/* admin_styles.css */
body { 
    font-family: Arial, sans-serif; 
    margin: 20px; 
    background-color: #f5f5f5; 
}

.container { 
    max-width: 900px; 
    margin: 0 auto; 
}

.section {
    background: white;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.input-group {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}

input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 5px 0;
    box-sizing: border-box;
    font-family: monospace;
}

button {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #0056b3;
}

.generate-btn {
    padding: 8px 15px;
    margin: 0;
    background: #28a745;
    font-size: 14px;
    white-space: nowrap;
}

.generate-btn:hover { 
    background: #218838; 
}

.status {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
.info { background: #d1ecf1; color: #0c5460; }

.html-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 10px;
    height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    margin: 20px 0;
}

.form-section {
    display: none;
}

.field-label {
    font-weight: bold;
    margin-top: 10px;
}

.field-hint {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.validation-errors { 
    background: #fff3cd; 
    border: 1px solid #ffeaa7; 
    padding: 10px; 
    margin: 10px 0; 
    border-radius: 4px; 
}

.validation-errors ul { 
    margin: 5px 0; 
    padding-left: 20px; 
}


.health-check-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.test-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.test-section h3 {
    margin-top: 0;
    color: #343a40;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #495057;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

.btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
}

.btn:hover {
    background: #0056b3;
}

.btn-secondary {
    background: #6c757d;
}

.btn-secondary:hover {
    background: #545b62;
}

.results-section {
    background: #e9ecef;
    border: 1px solid #adb5bd;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.results-section h4 {
    margin-top: 0;
    color: #495057;
}

.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

.json-output {
    background: #2d3748;
    color: #e2e8f0;
    padding: 15px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    margin: 10px 0;
}

.image-preview {
    max-width: 200px;
    margin: 10px 0;
    border-radius: 4px;
}

.database-stats {
    display: flex;
    gap: 20px;
    margin: 15px 0;
}

.stat-card {
    background: white;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    text-align: center;
    flex: 1;
}

.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
}

.loading {
    display: none;
    color: #6c757d;
    font-style: italic;
}

.keyword-checkbox-container {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 5px;
    background: #f9f9f9;
}

.keyword-checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    padding: 2px;
}

.keyword-checkbox-item input[type="checkbox"] {
    margin-right: 4px;
}

.keyword-checkbox-item label {
    flex: 1;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#get_artworks_btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
    width: 100%;
}

#get_artworks_btn:hover {
    background: #218838;
}

#get_artworks_btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.artwork-list-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    background: #f9f9f9;
}

.artwork-item {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    background: white;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.artwork-item:hover {
    background-color: #f0f8ff;
}

.artwork-item.selected {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.artwork-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 12px;
    border-radius: 4px;
}

.artwork-details {
    flex: 1;
}

.artwork-title {
    font-weight: bold;
    color: #333;
}

.artwork-year {
    color: #666;
    font-size: 12px;
}

.artwork-url {
    color: #007bff;
    font-size: 11px;
    word-break: break-all;
}

.artwork-details-container {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

.artwork-parsed-details {
    font-size: 13px;
}

.artwork-detail-list {
    margin: 10px 0;
    padding-left: 20px;
}

.artwork-detail-list li {
    margin-bottom: 5px;
}

.artwork-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.copy-keywords-btn, .add-image-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.copy-keywords-btn {
    background: #17a2b8;
    color: white;
}

.add-image-btn {
    background: #28a745;
    color: white;
}

.copy-keywords-btn:hover {
    background: #138496;
}

.add-image-btn:hover {
    background: #218838;
}

.check-data-btn {
    background: #17a2b8;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    margin: 10px 0;
}

.check-data-btn:hover {
    background: #138496;
}

.check-data-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.validation-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin: 10px 0;
}

.validation-header {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
    color: #495057;
}

.validation-item {
    margin: 8px 0;
    padding: 8px;
    border-radius: 4px;
}

.validation-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.validation-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.validation-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.tiny-image {
    max-width: 40px;
    max-height: 40px;
    margin: 2px;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.json-preview {
    background: #f1f3f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-family: monospace;
    font-size: 12px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.final-submit-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    margin: 20px 0;
}

.final-submit-btn:hover {
    background: #218838;
}

.descriptions-preview {
    background: #e8f5e8;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 10px;
    margin: 5px 0;
    font-family: monospace;
    font-size: 12px;
}

.download-missing-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
}

.download-missing-btn:hover {
    background: #c82333;
}

.download-missing-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.keyword-search-section {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    margin: 10px 0;
}

.keyword-search-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.keyword-search-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.keyword-search-btn {
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.keyword-search-btn:hover {
    background: #0056b3;
}

.keyword-search-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.search-mode-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.search-mode-toggle label {
    cursor: pointer;
}

.keyword-results-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    padding: 10px;
    margin-top: 10px;
}

.keyword-result-item {
    padding: 5px 10px;
    margin: 2px 0;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.keyword-result-item:hover {
    background: #e9ecef;
}

.keyword-result-item.selected {
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.keyword-type-badge {
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 3px;
    background: #6c757d;
    color: white;
}

.selected-keywords-display {
    margin-top: 10px;
    padding: 10px;
    background: #e7f3ff;
    border-radius: 4px;
    min-height: 40px;
}

.selected-keyword-chip {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px;
    background: #007bff;
    color: white;
    border-radius: 3px;
    font-size: 0.9em;
}

.selected-keyword-chip .remove-btn {
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* Databawe Browser Dashboard Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: white;
            padding: 20px 30px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .header h1 {
            color: #2c3e50;
        }
        
        .pagination-top {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .controls {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .table-selector {
            display: flex;
            gap: 10px;
        }
        
        .table-btn {
            padding: 8px 16px;
            border: 2px solid #3498db;
            background: white;
            color: #3498db;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .table-btn:hover {
            background: #f0f8ff;
        }
        
        .table-btn.active {
            background: #3498db;
            color: white;
        }
        
        .stats {
            font-size: 14px;
            color: #666;
        }
        
        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th {
            background: #34495e;
            color: white;
            padding: 12px;
            text-align: left;
            font-weight: 500;
            position: sticky;
            top: 0;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }
        
        th:hover {
            background: #2c3e50;
        }
        
        th.sorted-asc::after {
            content: ' ↑';
            opacity: 0.8;
        }
        
        th.sorted-desc::after {
            content: ' ↓';
            opacity: 0.8;
        }
        
        td {
            padding: 12px;
            border-bottom: 1px solid #ecf0f1;
        }
        
        tr {
            cursor: pointer;
            transition: background 0.2s;
        }
        
        tr:hover {
            background: #f8f9fa;
        }
        
        .truncate {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .json-field {
            background: #f8f9fa;
            padding: 4px 8px;
            border-radius: 3px;
            font-family: monospace;
            font-size: 12px;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        
        .page-btn {
            padding: 8px 16px;
            border: 1px solid #ddd;
            background: white;
            color: #333;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .page-btn:hover:not(:disabled) {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }
        
        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .page-info {
            font-size: 14px;
            color: #666;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .error {
            background: #fee;
            color: #c33;
            padding: 20px;
            border-radius: 5px;
            margin: 20px 0;
        }
        
        .empty {
            text-align: center;
            padding: 40px;
            color: #999;
        }
        
        /* Image thumbnail styles */
        .image-thumbnail {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .image-thumbnail:hover {
            transform: scale(1.1);
            transition: transform 0.2s;
        }
        
        /* Artist badge
        .artist-badge {
            background: #e74c3c;
            color: white;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 500;
        } */
        
        /* Type badge */
        .type-badge {
            background: #9b59b6;
            color: white;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 500;
        }
        
        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            animation: fadeIn 0.3s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 0;
            border-radius: 8px;
            width: 80%;
            max-width: 800px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            animation: slideIn 0.3s;
        }
        
        @keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .modal-header {
            background: #34495e;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h2 {
            margin: 0;
            font-size: 20px;
        }
        
        .close {
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            line-height: 20px;
            padding: 0 5px;
        }
        
        .close:hover {
            opacity: 0.8;
        }
        
        .modal-body {
            padding: 20px;
            overflow-y: auto;
            max-height: calc(80vh - 120px);
        }
        
        .detail-row {
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .detail-row:last-child {
            border-bottom: none;
        }
        
        .detail-label {
            font-weight: 600;
            width: 150px;
            flex-shrink: 0;
            color: #555;
        }
        
        .detail-value {
            flex: 1;
            word-break: break-word;
        }
        
        .detail-value.json {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 13px;
            white-space: pre-wrap;
        }
        
        .detail-image {
            max-width: 100%;
            max-height: 400px;
            object-fit: contain;
            border-radius: 4px;
            margin-top: 10px;
        }


        .data-cleaner-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }

        .cleaner-section {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .cleaner-section h3 {
            margin-top: 0;
            color: #343a40;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }

        .stats-grid {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .stat-label {
            font-size: 12px;
            color: #6c757d;
            text-transform: uppercase;
        }

        .action-buttons {
            margin: 15px 0;
        }

        .btn-warning {
            background: #ffc107;
            color: #212529;
        }

        .btn-warning:hover:not(:disabled) {
            background: #e0a800;
        }

        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 10px;
            border-radius: 4px;
        }

        .faulty-entries {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }

        .faulty-entry {
            padding: 15px;
            border-bottom: 1px solid #dee2e6;
            background: white;
        }

        .faulty-entry:last-child {
            border-bottom: none;
        }

        .entry-header {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .entry-details {
            font-size: 14px;
            color: #495057;
        }

        .invalid-id {
            background: #f8d7da;
            color: #721c24;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
            margin: 0 2px;
        }

        .json-error {
            background: #fff3cd;
            color: #856404;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
        }

        .warning-text {
            font-size: 12px;
            color: #856404;
            margin-top: 5px;
        }

        .success-message {
            margin-top: 15px;
        }

        .placeholder-buttons .btn {
            opacity: 0.6;
        }

        .malformed-entries {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }

        .malformed-entry {
            padding: 15px;
            border-bottom: 1px solid #dee2e6;
            background: white;
        }

        .malformed-entry:last-child {
            border-bottom: none;
        }

        .malformed-entry.fixable {
            border-left: 4px solid #28a745;
        }

        .malformed-entry.unfixable {
            border-left: 4px solid #dc3545;
        }

        .status-fixable {
            color: #28a745;
            font-weight: 600;
        }

        .status-unfixable {
            color: #dc3545;
            font-weight: 600;
        }

        .current-text {
            background: #f8f9fa;
            padding: 4px 8px;
            border-radius: 3px;
            font-family: monospace;
            font-size: 12px;
            word-break: break-all;
        }

        .conversion-preview {
            margin-top: 8px;
            padding: 8px;
            background: #e8f5e8;
            border-radius: 4px;
            border-left: 3px solid #28a745;
        }

        .conversion-preview code {
            background: #fff;
            padding: 2px 4px;
            border-radius: 2px;
            font-size: 11px;
        }

        .keyword-issues-list {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }

        .keyword-issue-entry {
            padding: 15px;
            border-bottom: 1px solid #dee2e6;
            background: white;
        }

        .keyword-issue-entry:last-child {
            border-bottom: none;
        }

        .issue-types {
            color: #dc3545;
            font-weight: 600;
        }

        .strings-comparison {
            margin-top: 10px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .current-strings, .correct-strings {
            padding: 8px;
            background: #f8f9fa;
            border-radius: 4px;
            font-size: 13px;
        }

        .current-strings {
            border-left: 3px solid #dc3545;
        }

        .correct-strings {
            border-left: 3px solid #28a745;
        }

        .keyword-issue-entry .invalid-id {
            background: #f8d7da;
            color: #721c24;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
            margin: 0 2px;
        }

        /* New styles for artist search results */
        .artists-with-matches, .artists-without-matches {
            margin: 15px 0;
        }

        .artist-match-entry, .artist-no-match-entry {
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
            border: 1px solid #dee2e6;
        }

        .artist-match-entry {
            background: #d4edda;
            border-left: 4px solid #28a745;
        }

        .artist-no-match-entry {
            background: #f8d7da;
            border-left: 4px solid #dc3545;
        }

        .artist-match-entry ul {
            margin: 5px 0 0 20px;
        }

        .artist-match-entry li {
            margin: 3px 0;
        }

        .btn-info {
            background: #17a2b8;
            color: white;
        }

        .btn-info:hover:not(:disabled) {
            background: #138496;
        }

        .info-text {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }

        /* Duplicate Images Styles */
        .duplicates-groups-list {
            margin: 20px 0;
        }

        .duplicate-group {
            border: 1px solid #dee2e6;
            border-radius: 6px;
            margin: 15px 0;
            background: #fff;
        }

        .group-header {
            background: #f8f9fa;
            padding: 15px;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .group-header h4 {
            margin: 0;
            flex-grow: 1;
            color: #495057;
        }

        .group-actions {
            display: flex;
            gap: 10px;
        }

        .btn-sm {
            padding: 4px 8px;
            font-size: 12px;
        }

        .duplicate-items {
            padding: 10px;
            display: grid;
            gap: 15px;
            grid-template-columns: 1fr;
        }

        /* Layout for 2 items side by side for easy comparison */
        .duplicate-items.two-items {
            grid-template-columns: 1fr 1fr;
        }

        /* For browsers that support :has(), use automatic detection */
        @supports selector(:has(*)) {
            .duplicate-items:has(.duplicate-item:nth-child(2):last-child) {
                grid-template-columns: 1fr 1fr;
            }

            .duplicate-items:has(.duplicate-item:nth-child(3)) {
                grid-template-columns: 1fr;
            }
        }

        .duplicate-item {
            display: flex;
            align-items: flex-start;
            padding: 12px;
            margin: 8px 0;
            border: 2px solid #dee2e6;
            border-radius: 4px;
            background: #f8f9fa;
            transition: all 0.2s ease;
        }

        .duplicate-item.selected {
            border-color: #dc3545;
            background: #f8d7da;
        }

        .item-checkbox {
            margin-right: 15px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .item-checkbox input[type="checkbox"] {
            transform: scale(1.2);
        }

        .item-image {
            width: 150px;
            height: 150px;
            margin-right: 15px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e9ecef;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .item-image:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .item-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.2s ease;
        }

        .item-image:hover img {
            transform: scale(1.1);
        }

        .image-placeholder, .image-error {
            color: #6c757d;
            font-size: 12px;
            text-align: center;
            padding: 10px;
        }

        .image-error {
            color: #dc3545;
        }

        .item-details {
            flex-grow: 1;
            font-size: 13px;
            line-height: 1.4;
        }

        .item-details strong {
            color: #495057;
        }

        .field-content {
            max-height: 100px;
            overflow-y: auto;
            background: #f8f9fa;
            padding: 5px;
            border: 1px solid #dee2e6;
            border-radius: 3px;
            font-family: monospace;
            font-size: 11px;
            margin: 3px 0;
            white-space: pre-wrap;
            word-break: break-all;
        }

        /* Image Modal Styles */
        .image-modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }

        .image-modal-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            background: white;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
        }

        .image-modal-close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            color: #aaa;
            z-index: 2001;
        }

        .image-modal-close:hover {
            color: #000;
        }

        .image-modal img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
        }

        .image-modal-title {
            margin-top: 15px;
            font-weight: bold;
            color: #333;
        }