/* ========================================
   Base Styles
   ======================================== */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    /* The app's rem-based type/spacing scale was built against MDL's
       html{font-size:14px}. Keep the 14px rem root explicitly now that
       MDL is gone, or every rem token inflates by 16/14. Also keep MDL's
       fast-tap behavior. */
    font-size: 14px;
    touch-action: manipulation;
}

body {
    font-family: var(--font-family);
    font-size: 14px;
    background-color: var(--bg-tertiary);
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1400px;
    margin: auto;
    text-align: center;
    padding: 70px var(--space-6) var(--space-6) var(--space-6);
}

.tile-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.tile {
    width: 280px;
    height: auto;
    text-align: center;
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color-light);
}

.tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.centered-text {
    font-size: var(--font-size-lg);
    margin: 0;
    font-weight: 500;
}

.confidence-text {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
}

.processed-image {
    max-width: 100%;
    max-height: 500px;
    margin-top: 20px;
    margin-bottom: 20px;
    object-fit: contain;
    cursor: pointer; /* Pointer cursor for clickable image */
}

/* Lightbox styles - Updated for side panel layout */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
}

.lightbox-image-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
    object-fit: contain;
    cursor: grab;
    transition: transform 0.1s ease-out;
    transform-origin: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.upload-another {
    margin-top: 20px;
}

.execution-time {
    margin-top: 10px;
    font-size: 1.1em;
}

.upload {
    margin: 20px 0;
}

#spinner {
    margin: 20px auto;
}

/* Disabled button styling */
button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Error message styling */
.error-message {
    background-color: #ffebee;
    color: #c62828;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    border-left: 5px solid #c62828;
}

.error-message p {
    margin: 0 0 15px 0;
    font-weight: bold;
}

/* Progress bar styles */
.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    margin: 10px 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background-color: #2196F3;
    border-radius: 5px;
    animation: progress-animation 3s ease-in-out infinite;
}

@keyframes progress-animation {
    0% { width: 0%; }
    50% { width: 75%; }
    100% { width: 0%; }
}

/* Responsive improvements */
/* Airport tag styling */
.airport {
    display: inline-block;
    background-color: #2196F3;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.85em;
    margin-top: 3px;
}

body.dark-mode .airport {
    background-color: #0d47a1;
}

/* Uploader tag styling */
.uploader {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.85em;
    margin-top: 3px;
}

body.dark-mode .uploader {
    background-color: #2e7d32;
}

/* Filter section styling improvements */
.filter-container {
    background-color: var(--bg-primary);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    border: 1px solid var(--border-color-light);
}

body.dark-mode .filter-container {
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    border-color: var(--border-color);
}

body.dark-mode .filter-container label {
    color: var(--text-primary);
}

/* Modern dropdown styling */
.filter-container select,
#stats-uploader-filter,
.map-filters select {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-xs);
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4L2 0zM2 5L0 3h4L2 5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: 28px;
    min-width: 130px;
    width: auto;
    max-width: 180px;
}

.filter-container select:hover,
#stats-uploader-filter:hover,
.map-filters select:hover {
    border-color: var(--primary-400);
    box-shadow: var(--shadow-sm);
}

.filter-container select:focus,
#stats-uploader-filter:focus,
.map-filters select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

/* Dark mode dropdown styling */
body.dark-mode .filter-container select,
body.dark-mode #stats-uploader-filter,
body.dark-mode .map-filters select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23999" d="M2 0L0 2h4L2 0zM2 5L0 3h4L2 5z"/></svg>');
}

body.dark-mode .filter-container select:hover,
body.dark-mode #stats-uploader-filter:hover,
body.dark-mode .map-filters select:hover {
    border-color: var(--primary-400);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .filter-container select:focus,
body.dark-mode #stats-uploader-filter:focus,
body.dark-mode .map-filters select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

/* Sort dropdown specific styling */
#sort-field,
#sort-order,
#fav-sort-field,
#fav-sort-order {
    min-width: 100px;
    margin-left: 5px;
    background-position: right 8px center !important;
    background-size: 10px !important;
    padding-right: 25px !important;
}

#sort-order,
#fav-sort-order {
    margin-left: 10px;
}

body.dark-mode #sort-field,
body.dark-mode #sort-order,
body.dark-mode #fav-sort-field,
body.dark-mode #fav-sort-order {
    background-position: right 8px center !important;
    background-size: 10px !important;
}

.filter-info {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

body.dark-mode .filter-info {
    border-top-color: #444;
}

#filtered-count {
    font-weight: bold;
}

#reset-filters, #refresh-history, #fav-reset-filters, #refresh-favorites {
    background-color: var(--primary-500);
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

#reset-filters:hover, #refresh-history:hover, #fav-reset-filters:hover, #refresh-favorites:hover {
    background-color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Lightbox improvements */
.caption-buttons {
    margin-top: var(--space-4);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
}

.caption-buttons button {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-sm);
}

.caption-buttons button:hover {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.caption-buttons button:active {
    transform: translateY(0);
}

.caption-buttons .delete-button {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
}

.caption-buttons .delete-button:hover {
    background: linear-gradient(135deg, var(--accent-red-dark), #b71c1c);
}

/* Modern notification */
.notification {
    position: fixed;
    top: var(--space-5);
    left: var(--space-5);
    right: auto;
    min-width: 250px;
    max-width: 400px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    transform: translateX(calc(-100% - var(--space-5)));
    transition: transform var(--transition-slow) cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2000;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(8px);
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
}

.notification.error {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
}

.notification-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.notification-icon {
    font-size: var(--font-size-xl);
    font-weight: bold;
}

.notification-message {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

body.dark-mode .notification {
    box-shadow: var(--shadow-xl);
}

body.dark-mode .notification.success {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
}

body.dark-mode .notification.error {
    background: linear-gradient(135deg, #c62828, #b71c1c);
}

/* No results message */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background-color: #f9f9f9;
    border-radius: 8px;
    font-size: 1.2em;
    color: #666;
}

body.dark-mode .no-results {
    background-color: #2a2a2a;
    color: #aaa;
}

/* History grid and items */
.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.history-item {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color-light);
}

.history-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.history-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: opacity var(--transition-base), transform var(--transition-slow);
}

.history-item:hover img {
    transform: scale(1.02);
}

.history-caption {
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    flex: 1;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color-light);
}

/* Highlighting styles for items that need attention */
.low-confidence {
    border-left: 4px solid #FFC107;
}

/* Loading styles for images */
.history-item img.loading {
    opacity: 0.6;
}

/* Lazy loading placeholder - hide image content, shimmer on parent tile */
.history-item img.lazy-placeholder {
    opacity: 0;
    color: transparent;
}

/* Smooth fade-in transition when image loads */
.history-item img {
    transition: opacity 0.3s ease-in-out, transform var(--transition-slow);
}

.history-item img:not(.lazy-placeholder) {
    opacity: 1;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tile loading animation - shimmer + subtle glow while images load */
.history-item:has(img.lazy-placeholder) {
    background: linear-gradient(90deg, #f5f5f5 25%, #eeeeee 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite, tilePulse 2.5s ease-in-out infinite;
}

@keyframes tilePulse {
    0%, 100% {
        box-shadow: var(--shadow-sm);
    }
    50% {
        box-shadow: var(--shadow-sm), 0 0 4px rgba(33, 150, 243, 0.08);
    }
}

body.dark-mode .history-item:has(img.lazy-placeholder) {
    background: linear-gradient(90deg, #2d2d2d 25%, #333333 50%, #2d2d2d 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite, tilePulseDark 2.5s ease-in-out infinite;
}

@keyframes tilePulseDark {
    0%, 100% {
        box-shadow: var(--shadow-sm);
    }
    50% {
        box-shadow: var(--shadow-sm), 0 0 5px rgba(33, 150, 243, 0.1);
    }
}

/* Lightbox loading styles */
#lightbox-content {
    transition: opacity 0.3s ease;
}

#lightbox-loading .spinning {
    color: white;
}

@media (max-width: 768px) {
    .container {
        padding: 80px 10px 10px 10px; /* More top padding on mobile for stacked top controls */
    }
    
    .tile {
        width: 100%;
        margin: 10px 0;
    }
    
    .processed-image {
        max-height: 300px;
    }
    
    .tab-bar button {
        font-size: 0.9em;
        padding: 10px;
    }
    
    .filter-container > div {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .filter-container select, 
    .filter-container input[type="text"] {
        width: auto;
        max-width: 100%;
        flex: 1;
    }
    
    .lightbox-controls {
        top: 5px;
        right: 5px;
    }
    
    .lightbox-control-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    .lightbox-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* New loading animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

.spinning {
    display: inline-block;
    animation: bounce 2s infinite;
    font-size: 2em;
}

/* Selected files list */
.selected-files {
    margin: 15px 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
}

.selected-file {
    padding: 5px;
    margin: 3px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.selected-file:last-child {
    border-bottom: none;
}

.file-name {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.file-size {
    color: #666;
    font-size: 0.9em;
}

/* Error tile styling */
.error-tile {
    background-color: #ffebee;
    border-left: 5px solid #c62828;
}

.error-icon {
    font-size: 2em;
    color: #c62828;
    margin: 10px;
    text-align: center;
}

body.dark-mode .error-message {
    background-color: #451515;
    color: #ff8a80;
    border-left-color: #ff8a80;
}

body.dark-mode .error-tile {
    background-color: #451515;
    border-left-color: #ff8a80;
}

body.dark-mode .selected-files {
    background-color: #333;
    border-color: #555;
}

body.dark-mode .selected-file {
    border-bottom-color: #444;
}

body.dark-mode .file-size {
    color: #aaa;
}

/* Stats page styles */
.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.stats-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
}

#refresh-stats {
    background-color: var(--primary-500);
    color: white;
    border: none;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
}

#refresh-stats:hover {
    background-color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: var(--space-6);
}

.stats-card {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color-light);
    transition: box-shadow var(--transition-base);
    /* Allow the card to shrink below its content's intrinsic width.
       Without this, a grid/flex item defaults to min-width:auto and the
       chart canvas's pixel width inflates the track, causing the chart to
       grow rightward on each resize (the classic Chart.js feedback loop). */
    min-width: 0;
    overflow: hidden;
}

.stats-card:hover {
    box-shadow: var(--shadow-md);
}

.stats-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-lg);
    text-align: center;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: var(--space-3);
    font-weight: 600;
}

.stats-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 300px;
    margin: 0 auto;
    /* Hard cap so a misbehaving canvas can never push the layout wider. */
    overflow: hidden;
}

/* Chart.js sets inline pixel width/height on the canvas; cap it so it can
   never exceed its bounded container on narrow viewports. */
.chart-container canvas {
    max-width: 100% !important;
}

/* Summary stats styles */
.summary-stats {
    background: linear-gradient(135deg, var(--primary-50), rgba(255, 255, 255, 0.8));
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color-light);
    transition: background-color var(--transition-fast);
}

.stat-item:hover {
    background-color: rgba(33, 150, 243, 0.05);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--primary-600);
}

.country-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.country-flag {
    font-size: 2em;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Fallback for emoji flags */
.country-flag.fallback {
    width: 1.5em;
    height: 1em;
    margin: 0.25em;
    background-size: cover;
    background-position: center;
    border-radius: 0.1em;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    position: relative;
}

/* Country code fallback for Windows */
.country-flag.country-code {
    font-size: 0.8em;
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
    border: 1px solid #ccc;
    color: #333;
    font-weight: bold;
    margin: 0.25em;
    box-shadow: none;
}

body.dark-mode .country-flag.country-code {
    background-color: #333;
    color: #eee;
    border-color: #555;
}

/* Dark mode styles for stats */
body.dark-mode .stats-card {
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    border-color: var(--border-color);
}

body.dark-mode .stats-card h3 {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

body.dark-mode .summary-stats {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.05));
}

body.dark-mode .stat-item {
    border-bottom-color: var(--border-color);
}

body.dark-mode .stat-label {
    color: var(--text-secondary);
}

body.dark-mode .stat-value {
    color: var(--primary-300);
}

body.dark-mode .country-flags {
    border-top-color: var(--border-color);
}

/* Lightbox edit form styles - optimized for 350px info panel */
.lightbox-edit-form {
    display: flex;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 15px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100%;
}

.lightbox-edit-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-bottom: 12px;
}

.lightbox-edit-form .form-row label {
    font-size: 0.9em;
    font-weight: bold;
    color: #ccc;
    margin-bottom: 2px;
}

.lightbox-edit-form input,
.lightbox-edit-form select {
    width: 100% !important;
    padding: 8px !important;
    border-radius: 4px !important;
    border: 1px solid #555 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    font-size: 0.9em !important;
    box-sizing: border-box !important;
}

.lightbox-edit-form input:focus,
.lightbox-edit-form select:focus {
    outline: none;
    border-color: #2196F3 !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.lightbox-edit-form .button-row {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    width: 100%;
}

.lightbox-edit-form button {
    flex: 1;
    padding: 10px 15px !important;
    background-color: #2196F3 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    transition: background-color 0.2s !important;
}

.lightbox-edit-form button:hover {
    background-color: #0d8aee !important;
}

.lightbox-edit-form .lookup-button {
    background-color: #4CAF50 !important;
    font-size: 0.8em !important;
    padding: 6px 12px !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
    align-self: flex-start !important;
    display: block !important;
    width: auto !important;
}

/* Force spacing after lookup button */
.lightbox-edit-form .lookup-button + .form-row {
    margin-top: 20px !important;
}

.lightbox-edit-form .lookup-button:hover {
    background-color: #388E3C !important;
}

.lightbox-edit-form .cancel-button {
    background-color: #757575 !important;
}

.lightbox-edit-form .cancel-button:hover {
    background-color: #616161 !important;
}

/* Top control buttons styling */
#dark-mode-btn, #login-btn, #logout-btn, #refresh-map {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#dark-mode-btn:hover, #login-btn:hover, #logout-btn:hover, #refresh-map:hover {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#dark-mode-btn:active, #login-btn:active, #logout-btn:active, #refresh-map:active {
    transform: translateY(0);
}

#logout-btn {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
}

#logout-btn:hover {
    background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
}

/* Dark mode styles for top controls */
body.dark-mode #dark-mode-btn,
body.dark-mode #login-btn,
body.dark-mode #logout-btn,
body.dark-mode #refresh-map {
    box-shadow: var(--shadow-sm);
}

body.dark-mode #dark-mode-btn:hover,
body.dark-mode #login-btn:hover,
body.dark-mode #logout-btn:hover,
body.dark-mode #refresh-map:hover {
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .stats-container {
        /* minmax(0, 1fr), not the `1fr` shorthand (== minmax(auto, 1fr)):
           the `auto` minimum lets the column grow to the canvas's intrinsic
           width and feeds the infinite-growth loop. 0 keeps it viewport-bound. */
        grid-template-columns: minmax(0, 1fr);
    }

    .stats-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-header > div {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: var(--space-2);
    }

    .stats-header > div select {
        width: 100%;
    }

    #refresh-stats {
        width: 100%;
    }

    .chart-container {
        height: 250px;
    }

    .stat-value {
        font-size: var(--font-size-lg);
    }

    /* Top controls stay horizontal on mobile, just smaller */
    #top-controls {
        top: var(--space-2);
        right: var(--space-2);
        flex-direction: row;
        gap: var(--space-1);
    }

    #dark-mode-btn, #login-btn, #logout-btn, #settings-btn {
        padding: var(--space-2);
        font-size: var(--font-size-sm);
    }
}

/* Map filter styles */
.map-filters {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.map-filters > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.map-filters label {
    font-weight: bold;
    font-size: 0.9em;
}

.map-filters select {
    box-sizing: border-box;
}

body.dark-mode .map-filters select {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .map-filters label {
    color: var(--text-primary);
}

/* ========================================
   Login Modal Styles
   ======================================== */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(0, 0, 0, 0.7));
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.login-modal-container {
    background: var(--bg-primary);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-modal-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-modal-icon {
    font-size: 3rem;
    margin-bottom: var(--space-3);
}

.login-modal-header h3 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
}

.login-modal-subtitle {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.login-form .form-group {
    margin-bottom: var(--space-5);
}

.login-form .form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.login-form .form-group input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.login-form .form-group input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
    background-color: var(--bg-primary);
}

.login-form .form-group input::placeholder {
    color: var(--text-tertiary);
}

.form-group-checkbox {
    margin-bottom: var(--space-6);
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: var(--space-2);
    cursor: pointer;
    accent-color: var(--primary-500);
}

.checkbox-text {
    user-select: none;
}

.login-submit-btn {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-shadow: var(--shadow-sm);
}

.login-submit-btn:hover {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.login-submit-btn:active {
    transform: translateY(0);
}

.login-submit-btn svg {
    transition: transform var(--transition-fast);
}

.login-submit-btn:hover svg {
    transform: translateX(4px);
}

.login-error {
    color: var(--accent-red);
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    display: none;
    padding: var(--space-3);
    background-color: rgba(244, 67, 54, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.login-error:not(:empty) {
    display: block;
}

/* Dark mode login modal */
body.dark-mode .login-modal-overlay {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.05), rgba(0, 0, 0, 0.85));
}

body.dark-mode .login-modal-container {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-xl);
}

body.dark-mode .login-form .form-group input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

body.dark-mode .login-form .form-group input:focus {
    background-color: var(--bg-primary);
}

body.dark-mode .login-form .form-group label {
    color: var(--text-primary);
}

body.dark-mode .login-form .form-group input {
    color: var(--text-primary);
}

body.dark-mode .checkbox-label {
    color: var(--text-primary);
}

body.dark-mode .login-modal-header h3 {
    color: var(--text-primary);
}

body.dark-mode .login-modal-subtitle {
    color: var(--text-secondary);
}

/* ========================================
   Tab Bar Styles
   ======================================== */
.tab-bar {
    display: flex;
    justify-content: center;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    gap: var(--space-1);
    border: 1px solid var(--border-color-light);
}

.tab-bar button {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
}

.tab-bar button:hover:not(.disabled-during-upload) {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.tab-bar button.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 700;
}

/* Taxiway-signage indicator: an amber underline marks the active tab
   instead of a heavy fill, so amber stays the app's single "you are here"
   signal. */
.tab-bar button.active::after {
    content: '';
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--accent);
}

.tab-bar button.disabled-during-upload {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

body.dark-mode .tab-bar {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .tab-bar button:hover:not(.disabled-during-upload):not(.active) {
    background-color: var(--bg-tertiary);
}

/* The tab bar and --bg-secondary are the same slate in dark mode, so lift
   the active tab onto the lighter surface for contrast. */
body.dark-mode .tab-bar button.active {
    background: var(--bg-tertiary);
}

/* ========================================
   General Button Improvements
   ======================================== */
.btn-raised {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
    color: white !important;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-6) !important;
    font-weight: 500 !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.btn-raised:hover {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-raised:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark)) !important;
}

.btn-accent:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-green-dark), #2e7d32) !important;
}

/* ========================================
   Progress Bar Improvements
   ======================================== */
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
    margin: var(--space-3) 0;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), var(--primary-500));
    border-radius: var(--radius-full);
    transition: width var(--transition-slow) ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 16px 16px;
    animation: progressStripes 0.75s linear infinite;
}

@keyframes progressStripes {
    0% { background-position: 0 0; }
    100% { background-position: 16px 0; }
}

/* ========================================
   Upload Section Improvements
   ======================================== */
.selected-files {
    margin: var(--space-4) 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background-color: var(--bg-secondary);
}

.selected-file {
    padding: var(--space-2) var(--space-3);
    margin: var(--space-1) 0;
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.selected-file:hover {
    background-color: var(--bg-tertiary);
}

.selected-file:last-child {
    border-bottom: none;
}

.file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    color: var(--text-primary);
}

.file-size {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

body.dark-mode .selected-files {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

body.dark-mode .selected-file {
    border-bottom-color: var(--border-color);
}

body.dark-mode .selected-file:hover {
    background-color: var(--bg-secondary);
}

/* ========================================
   No Results State
   ======================================== */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-12);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    border: 2px dashed var(--border-color);
}

body.dark-mode .no-results {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* ========================================
   Return to Top Button
   ======================================== */
#return-to-top {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xl);
    cursor: pointer;
    z-index: 1500;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-fast);
}

#return-to-top:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

body.dark-mode #return-to-top {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

/* ========================================
   Lightbox Navigation Improvements
   ======================================== */
.lightbox-nav-btn {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
}

.lightbox-nav-btn:hover {
    background: rgba(33, 150, 243, 0.8);
    transform: scale(1.1);
}

.lightbox-control-btn {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.125rem;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
}

.lightbox-control-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ========================================
   Airport and Uploader Tags
   ======================================== */
.airport {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-top: var(--space-1);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.airport:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

body.dark-mode .airport {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.uploader {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
    color: white;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-top: var(--space-1);
}

body.dark-mode .uploader {
    background: linear-gradient(135deg, var(--accent-green-dark), #2e7d32);
}

/* ========================================
   Mobile Responsive Improvements
   ======================================== */
@media (max-width: 768px) {
    .container {
        padding: 80px var(--space-3) var(--space-4) var(--space-3);
    }

    .tab-bar {
        flex-wrap: wrap;
        border-radius: var(--radius-md);
    }

    .tab-bar button {
        flex: 1 1 auto;
        min-width: 80px;
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }

    .history-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-3);
    }

    .history-item img {
        height: 140px;
    }

    .filter-container {
        padding: var(--space-3);
    }

    .filter-container select {
        min-width: 100px;
        max-width: 150px;
        font-size: var(--font-size-xs);
    }

    .stats-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-modal-container {
        padding: var(--space-6);
    }

    .lightbox-info-panel {
        width: 100%;
        max-height: 45%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

@media (max-width: 480px) {
    .tab-bar button {
        min-width: 60px;
        font-size: var(--font-size-xs);
        padding: var(--space-2);
    }

    .history-grid {
        grid-template-columns: 1fr;
    }

    .history-item img {
        height: 200px;
    }

    .stats-card {
        padding: var(--space-3);
    }

    .chart-container {
        height: 220px;
    }

    .country-flag {
        font-size: 1.5em;
    }

    .login-modal-icon .login-modal-logo {
        width: 56px;
        height: 56px;
    }

    .login-modal-header h3 {
        font-size: var(--font-size-xl);
    }
}

/* ========================================
   Top Controls
   ======================================== */
.top-controls {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2000;
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

#auth-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.top-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 36px;
    line-height: 1;
    vertical-align: middle;
}

.top-controls .btn-icon {
    font-size: var(--font-size-base);
    line-height: 1;
}

.top-controls .btn-text {
    font-size: var(--font-size-sm);
    line-height: 1;
}

.logged-in-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 36px;
}

.welcome-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    gap: 0;
    height: 36px;
    box-sizing: border-box;
}

.welcome-text {
    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1;
    white-space: nowrap;
}

.settings-link {
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.settings-link:hover {
    opacity: 1;
    color: var(--primary-500);
}

body.dark-mode .welcome-badge {
    background-color: var(--bg-secondary);
}

body.dark-mode .welcome-text {
    color: var(--text-primary);
}

body.dark-mode .settings-link {
    color: var(--text-tertiary);
}

body.dark-mode .settings-link:hover {
    color: var(--primary-400);
}

/* Settings button styling */
#settings-btn {
    background: linear-gradient(135deg, var(--gray-500), var(--gray-600));
    display: none; /* Hidden on desktop, shown on mobile */
}

#settings-btn:hover {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
}

body.dark-mode #settings-btn {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
}

body.dark-mode #settings-btn:hover {
    background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
}

@media (max-width: 768px) {
    .top-controls {
        top: var(--space-2);
        right: var(--space-2);
        gap: var(--space-2);
        flex-wrap: nowrap;
    }

    #auth-controls {
        gap: var(--space-2);
    }

    .logged-in-controls {
        gap: var(--space-2);
        height: auto;
    }

    .top-controls .btn-text {
        display: none;
    }

    .top-controls .btn-icon {
        font-size: var(--font-size-lg);
    }

    .top-controls button {
        padding: var(--space-2);
        min-width: 36px;
        min-height: 36px;
        justify-content: center;
    }

    /* Mobile welcome badge - compact user icon style */
    .welcome-badge {
        padding: var(--space-2);
        min-width: 40px;
        min-height: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        justify-content: center;
    }

    .welcome-badge .welcome-text {
        display: none;
    }

    .welcome-badge .settings-link {
        font-size: 0;
        text-decoration: none;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Show gear icon instead of text on mobile */
    .welcome-badge .settings-link::before {
        content: '⚙️';
        font-size: var(--font-size-lg);
    }

    /* Show settings button on mobile since welcome-badge is hidden */
    #settings-btn {
        display: inline-flex;
    }
}

/* ========================================
   Dark Mode Toggle Button Improvements
   ======================================== */
#dark-mode-btn {
    position: relative;
    overflow: hidden;
}

#dark-mode-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

#dark-mode-btn:hover::before {
    left: 100%;
}

/* ========================================
   History Grid Image Improvements
   ======================================== */
.history-item {
    position: relative;
    overflow: hidden;
}

.history-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.03));
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.history-item:hover::after {
    opacity: 1;
}

/* ========================================
   Spinner and Loading Improvements
   ======================================== */
.spinning {
    display: inline-block;
    animation: gentleBounce 1.5s ease-in-out infinite;
    font-size: 2.5rem;
}

@keyframes gentleBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-4px) rotate(5deg); }
}

/* ========================================
   Caption Info Improvements
   ======================================== */
.caption-info {
    line-height: 1.7;
}

.caption-info strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.caption-metadata {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.6;
}

.caption-metadata strong {
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   Chart Container Improvements
   ======================================== */

/* ========================================
   Country Flags Improvements
   ======================================== */
.country-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color-light);
}

.country-flag {
    font-size: 1.75rem;
    cursor: help;
    transition: transform var(--transition-fast);
}

.country-flag:hover {
    transform: scale(1.2);
}

/* ========================================
   Map Container Improvements
   ======================================== */
.map-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

#aircraft-map {
    flex: 3;
    min-width: 300px;
    height: 600px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color-light);
}

.map-sidebar .stats-card {
    margin-bottom: 0;
}

/* ========================================
   Admin Section Improvements
   ======================================== */
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5);
}

/* ========================================
   Scrollbar Styling
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* ========================================
   Selection Styling
   ======================================== */
::selection {
    background-color: var(--primary-200);
    color: var(--text-primary);
}

body.dark-mode ::selection {
    background-color: var(--primary-700);
    color: white;
}

/* ========================================
   Focus Visible Improvements
   ======================================== */
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* ========================================
   Mobile Hamburger Menu
   ======================================== */

/* Desktop controls - shown by default */
.desktop-controls {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

/* Mobile menu container - hidden by default */
.mobile-menu-container {
    display: none;
    position: relative;
}

/* Hamburger button */
.hamburger-btn {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    border: none;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-xl);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.hamburger-btn:hover {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hamburger-btn:active {
    transform: translateY(0);
}

.hamburger-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* Mobile dropdown menu */
.mobile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    min-width: 200px;
    overflow: hidden;
    z-index: 2100;
    border: 1px solid var(--border-color-light);
    animation: dropdownSlideIn 0.2s ease-out;
}

.mobile-dropdown.open {
    display: block;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile menu items */
.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    transition: background-color var(--transition-fast);
    text-align: left;
}

.mobile-menu-item:hover {
    background-color: var(--bg-secondary);
}

.mobile-menu-item:active {
    background-color: var(--bg-tertiary);
}

.mobile-menu-item .menu-icon {
    font-size: 1.25rem;
    width: 28px;
    text-align: center;
}

.mobile-menu-item .menu-text {
    font-weight: 500;
}

/* Divider for menu items (if needed) */
.mobile-menu-item + .mobile-menu-item {
    border-top: 1px solid var(--border-color-light);
}

/* Dark mode styles for mobile menu */
body.dark-mode .hamburger-btn {
    box-shadow: var(--shadow-sm);
}

body.dark-mode .hamburger-btn:hover {
    box-shadow: var(--shadow-md);
}

body.dark-mode .mobile-dropdown {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-xl);
}

body.dark-mode .mobile-menu-item:hover {
    background-color: var(--bg-tertiary);
}

body.dark-mode .mobile-menu-item:active {
    background-color: var(--bg-primary);
}

body.dark-mode .mobile-menu-item + .mobile-menu-item {
    border-top-color: var(--border-color);
}

/* Mobile menu items - visibility controlled by JavaScript */
#mobile-login-btn,
#mobile-settings-btn,
#mobile-logout-btn {
    display: none;
}

/* Mobile responsive: show hamburger, hide desktop controls */
@media (max-width: 768px) {
    .desktop-controls {
        display: none;
    }

    .mobile-menu-container {
        display: block;
    }

    /* Ensure top-controls positions correctly for mobile menu */
    .top-controls {
        top: var(--space-2);
        right: var(--space-2);
    }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Legacy app.css layer (appended after styles.css layer; loaded
   last historically, so order here preserves the cascade exactly)
   ============================================================ */

/* Version badge */
.version-badge {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  color: #999;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  z-index: 999;
  font-family: var(--font-mono);
}

/* Page-specific overrides - using CSS variables from styles.css */

/* Mode visibility controls */
#upload-mode, #batch-upload-mode, #history-mode, #favorites-mode, #map-mode, #admin-mode {
  display: none;
}

/* Hide main content until authentication is confirmed */
.container, .tab-bar, .top-controls {
  display: none;
}

/* Show login modal by default for unauthenticated users */
#login-modal {
  display: flex !important;
}

/* Hide login modal when user is authenticated */
.authenticated #login-modal {
  display: none !important;
}

/* Show main content when user is authenticated */
.authenticated .container {
  display: block !important;
}

.authenticated .tab-bar {
  display: flex !important;
}

.authenticated .top-controls {
  display: flex !important;
}

/* Hide top controls in lightbox mode */
.lightbox-open .top-controls {
  display: none !important;
}

/* Confidence border indicators */
.low-confidence {
  border-left: 4px solid var(--accent-orange) !important;
}
.uncertain-confidence {
  border-left: 4px solid var(--accent-orange) !important;
}
.confident-result {
  border-left: 4px solid var(--accent-green) !important;
}
.missing-info {
  border-left: 4px solid var(--accent-red) !important;
}

/* Filter container layout improvements */
.filter-container {
  margin-bottom: var(--space-5);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.filter-container label {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.filter-container input[type="text"] {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.filter-container input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

body.dark-mode .filter-container input[type="text"] {
  background-color: var(--bg-tertiary);
}

/* Airport list styling */
.airport-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

.airport-list li {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color-light);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
}

.airport-list li:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-300);
}

.airport-list li:active {
  background-color: var(--primary-100);
}

body.dark-mode .airport-list li:hover {
  background-color: rgba(33, 150, 243, 0.15);
}

body.dark-mode .airport-list li:active {
  background-color: rgba(33, 150, 243, 0.25);
}

/* Lightbox Styles */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  transition: opacity var(--transition-slow);
}
.lightbox-content {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.lightbox-image-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
}
.lightbox.active .lightbox-image-container {
  touch-action: none;
}
.lightbox-info-panel {
  width: 380px;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(20, 20, 20, 0.95));
  color: white;
  padding: var(--space-6);
  overflow-y: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}
.lightbox.active .lightbox-info-panel {
  touch-action: pan-y;
}
.lightbox-controls {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-3);
  z-index: 1100;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.1s ease-out;
  cursor: grab;
  user-select: none;
  pointer-events: auto;
}
.lightbox.active img {
  touch-action: none;
}

.lightbox img:active {
  cursor: grabbing;
}
.lightbox-info-content {
  color: #fff;
  line-height: 1.6;
}
/* Force remove any old positioning */
#lightbox-caption {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  margin: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.lightbox-info-section {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lightbox-info-section:last-child {
  border-bottom: none;
}
.lightbox-info-section h4 {
  margin: 0 0 var(--space-3) 0;
  color: var(--primary-300);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.highlight-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: var(--space-2);
  vertical-align: middle;
  box-shadow: 0 0 4px currentColor;
}
.highlight-low-confidence {
  background-color: var(--accent-orange);
}
.highlight-missing-info {
  background-color: var(--accent-red);
}

/* Confidence Level Styles for Toast Notifications */
.confidence-high {
  color: var(--accent-green);
  font-weight: 600;
}
.confidence-medium {
  color: var(--accent-orange);
  font-weight: 600;
}
.confidence-low {
  color: var(--accent-red);
  font-weight: 600;
}
.confidence-uncertain {
  color: var(--accent-orange);
  font-weight: 600;
}
.confidence-confident {
  color: var(--accent-green);
  font-weight: 600;
}
.confidence-no-registration {
  color: var(--gray-500);
  font-weight: 600;
}

/* Backend Indicator Styles */
.backend-indicator {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-style: italic;
  margin-left: var(--space-2);
}

/* Uploader tag styles - base handled in styles.css */
.uploader:not([style]) {
  background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
}

.caption-info {
  margin-bottom: 20px;
  text-align: left;
}

.caption-metadata {
  margin-bottom: 20px;
  text-align: left;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  transform: translateY(-50%);
  z-index: 1050;
}
.lightbox-nav-btn {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  transition: background-color 0.2s, transform 0.2s;
}
.lightbox-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}
.lightbox.active {
  display: flex;
}
.lightbox-edit-form {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  align-items: center;
  justify-content: center;
}
.lightbox-edit-form input {
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #ccc;
}
.lightbox-edit-form button {
  padding: 5px 10px;
  background-color: var(--primary-500);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.lightbox-edit-form button:hover {
  background-color: var(--primary-hover);
}

/* Loading Indicator - handled in styles.css */

/* Progress Bar Styles - handled in styles.css */

/* Disabled state for navigation during upload */
.disabled-during-upload {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}
.tab-bar button.disabled-during-upload {
  background-color: var(--disabled-bg);
  color: var(--disabled-text);
}

/* Background scan progress widget (spotarchy-c4d): an app-wide, Drive-style card, bottom-right,
   that persists across tab switches while the scan pump drains the queue. Hidden until shown. */
.scan-progress {
  position: fixed;
  right: var(--space-5, 1.25rem);
  bottom: var(--space-5, 1.25rem);
  width: 300px;
  max-width: calc(100vw - 2 * var(--space-5, 1.25rem));
  background: var(--bg-secondary, #f3f5f7);
  color: var(--text-primary, #16202b);
  border: 1px solid var(--border-color, #dde3e9);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.15));
  padding: var(--space-4, 1rem);
  z-index: 1900;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.scan-progress.active,
.scan-progress.done,
.scan-progress.paused {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scan-progress-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 0.75rem);
}
.scan-progress-label {
  flex: 1;
  font-size: 0.9em;
  font-weight: 600;
}
/* Spinner while active; green check when done. Only one shows at a time. */
.scan-progress-spin { display: inline-block; }
.scan-progress-check {
  display: none;
  color: var(--accent-green, #3e9b6e);
  font-weight: bold;
}
.scan-progress.done .scan-progress-spin,
.scan-progress.paused .scan-progress-spin { display: none; }
.scan-progress.done .scan-progress-check { display: inline-block; }
.scan-progress-dismiss {
  background: none;
  border: none;
  color: var(--text-secondary, #4b5966);
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.scan-progress-dismiss:hover { color: var(--text-primary, #16202b); }
.scan-progress-bar {
  height: 6px;
  background: var(--border-color, #dde3e9);
  border-radius: 3px;
  overflow: hidden;
}
.scan-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-green, #3e9b6e);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.scan-progress.paused .scan-progress-fill { background: var(--accent, #f2b01e); }

/* Reassuring hint under the ingest progress header (replaces the old "do not navigate away!"). */
.upload-progress-hint {
  color: var(--text-secondary, #4b5966);
  font-size: 0.9em;
  margin: 0 0 var(--space-3, 0.75rem);
}

/* Batch Upload Styles */
#batch-upload-mode form > * {
  margin-top: 20px;
  margin-bottom: 20px;
}
#batch-results {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.result-tile {
  background: var(--bg-primary);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  width: 220px;
  border: 1px solid var(--border-color-light);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}
.result-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.result-tile img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.tile-caption {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--text-secondary);
}
.tile-caption strong {
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

/* Processing tile - shown while upload is in progress */
.result-tile.processing {
  position: relative;
  min-height: 200px;
}
.result-tile.processing .processing-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  min-height: 150px;
  background: linear-gradient(135deg, var(--primary-50), var(--bg-primary));
  border-radius: var(--radius-md);
}
.result-tile.processing .spinning {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
}
.result-tile.processing .processing-text {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}
.result-tile.processing .spinning {
  opacity: 0.5;
  animation: gentlePulse 2s ease-in-out infinite;
}
@keyframes gentlePulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}
.result-tile.processing .processing-filename {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  word-break: break-all;
  margin-top: var(--space-1);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark-mode .result-tile.processing .processing-overlay {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), var(--bg-secondary));
}

/* Active processing tile - currently being uploaded */
.result-tile.processing.active-processing {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-200), var(--shadow-md);
}
.result-tile.processing.active-processing .processing-text {
  color: var(--primary-600);
  font-weight: 600;
}
.result-tile.processing.active-processing .spinning {
  opacity: 1;
  animation: gentleBounce 1s ease-in-out infinite;
}
body.dark-mode .result-tile.processing.active-processing {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3), var(--shadow-md);
}
body.dark-mode .result-tile.processing.active-processing .processing-text {
  color: var(--primary-300);
}

/* Tile wall clock - elapsed time display */
.tile-clock {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.result-tile.processing.active-processing .tile-clock {
  color: var(--primary-600);
}
body.dark-mode .result-tile.processing.active-processing .tile-clock {
  color: var(--primary-300);
}
.tile-elapsed {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* Success animation for completed tiles */
@keyframes fadeInUp {
  from {
    opacity: 0.7;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Success checkmark flash */
.result-tile.just-completed::before {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: var(--accent-green);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successFlash 0.8s ease-out forwards;
  z-index: 10;
}
@keyframes successFlash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
body.dark-mode .result-tile.just-completed::before {
  background: rgba(30, 30, 30, 0.9);
}

/* Upload progress inline section */
.upload-progress-inline {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-5) auto;
  max-width: 600px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color-light);
  text-align: center;
}
.upload-progress-inline h3 {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.upload-progress-inline .warning-message {
  background: var(--callout-warning-bg);
  color: var(--callout-warning-text);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-orange);
  margin: var(--space-4) 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  text-align: left;
}
body.dark-mode .upload-progress-inline {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}
.upload-progress-inline .progress-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin: var(--space-3) 0;
  font-size: var(--font-size-base);
}
.upload-progress-inline .progress-stat {
  font-weight: 600;
}
.upload-progress-inline .progress-stat.current {
  color: var(--primary-600);
}
.upload-progress-inline .progress-stat.total {
  color: var(--text-tertiary);
}
body.dark-mode .upload-progress-inline .progress-stat.current {
  color: var(--primary-300);
}

/* Cancel upload button */
.cancel-upload-btn {
  display: block;
  margin: var(--space-4) auto 0;
  padding: var(--space-2) var(--space-5);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.cancel-upload-btn:hover {
  background: linear-gradient(135deg, var(--accent-red-dark), var(--accent-red-darker));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.cancel-upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Cancelled tile styling */
.result-tile.cancelled-tile {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
}
.cancelled-icon {
  font-size: 2rem;
  text-align: center;
  padding: var(--space-4) 0;
  opacity: 0.6;
}
.cancelled-tile .tile-caption {
  color: var(--text-tertiary);
}
body.dark-mode .result-tile.cancelled-tile {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

/* Google Photos import: duplicate tile (photo already archived), muted like cancelled */
.result-tile.duplicate-tile {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
}
.duplicate-icon {
  font-size: 2rem;
  text-align: center;
  padding: var(--space-4) 0;
  opacity: 0.6;
}
.duplicate-tile .tile-caption {
  color: var(--text-tertiary);
}
body.dark-mode .result-tile.duplicate-tile {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

/* Moderation-rejected tile (image is not an aviation photo, not kept) — warning-toned,
   distinct from the red error tile: nothing failed technically. */
.result-tile.moderation-rejected-tile {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
  border-left: 4px solid var(--accent-orange);
}
.rejected-icon {
  font-size: 2rem;
  text-align: center;
  padding: var(--space-4) 0;
  opacity: 0.6;
}
.moderation-rejected-tile .tile-caption {
  color: var(--text-tertiary);
}
.moderation-rejected-tile .tile-caption strong {
  color: var(--accent-orange);
}
body.dark-mode .result-tile.moderation-rejected-tile {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  border-left-color: var(--accent-orange);
}

/* Google Photos import progress panel */
.google-import-status {
  margin: var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}
.google-import-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.google-import-actions .cancel-upload-btn {
  margin: 0;
}
/* Nudge state: the Google tab looks closed and nothing has moved for a while */
.google-import-nudge {
  box-shadow: 0 0 0 3px var(--accent-orange);
}
#reset-button {
  display: block;
  margin: var(--space-5) auto;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  background: linear-gradient(135deg, var(--gray-500), var(--gray-600));
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
#reset-button:hover {
  background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
body.dark-mode #reset-button {
  background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
}
body.dark-mode #reset-button:hover {
  background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
}
#batch-loading-indicator {
  text-align: center;
  font-size: 2em;
  margin-top: 10px;
}

/* Map Styles */
.map-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
#aircraft-map {
  flex: 3;
  min-width: 300px;
  height: 600px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}
#map-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--loading-overlay-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 8px;
}
#map-loading .spinning {
  font-size: 3em;
  margin-bottom: 15px;
  animation: spin 1s linear infinite;
}
#map-loading .loading-text {
  font-size: 1.1em;
  color: var(--muted);
}
.map-sidebar {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.map-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.map-path {
  stroke: var(--primary-500);
  stroke-width: 2;
  opacity: 0.7;
}
.map-path:hover {
  stroke-width: 4;
  opacity: 1;
}
.airport-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.airport-list li {
  padding: 5px;
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
}
.airport-list li:hover {
  background-color: #f0f0f0;
}

/* Admin Mode Styles */
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-5);
}
.admin-section {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color-light);
}
.admin-section h3 {
  margin-top: 0;
  color: var(--text-primary);
  border-bottom: 2px solid var(--primary-500);
  padding-bottom: var(--space-3);
  font-weight: 600;
}

/* Claude Debug Lightbox (admin only) */
.claude-debug-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
.claude-debug-lightbox.active {
  display: flex;
}
.claude-debug-content {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-color-light);
  overflow: hidden;
}
.claude-debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color-light);
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), transparent);
  flex-shrink: 0;
}
.claude-debug-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}
.claude-debug-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}
.claude-debug-close:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.1);
}
.claude-debug-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
  line-height: 1.6;
  color: var(--text-secondary);
}
.claude-debug-section {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color-light);
}
.claude-debug-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.claude-debug-section h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-base);
  color: var(--primary-500);
  font-weight: 600;
}
.claude-debug-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.claude-debug-badge.confident {
  background: rgba(76, 175, 80, 0.15);
  color: var(--accent-green);
}
.claude-debug-badge.uncertain {
  background: rgba(255, 152, 0, 0.15);
  color: var(--accent-orange);
}
.claude-debug-badge.no-registration {
  background: rgba(244, 67, 54, 0.15);
  color: var(--accent-red);
}
.claude-debug-detection {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-color-light);
}
.claude-debug-detection:last-child {
  margin-bottom: 0;
}
.claude-debug-field {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.claude-debug-field:last-child {
  margin-bottom: 0;
}
.claude-debug-label {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 100px;
  flex-shrink: 0;
}
.claude-debug-value {
  color: var(--text-secondary);
  word-break: break-word;
}
.claude-debug-notes {
  font-style: italic;
  color: var(--text-tertiary);
  white-space: pre-wrap;
}
.claude-debug-confidence-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  margin-top: var(--space-2);
  overflow: hidden;
}
.claude-debug-confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
body.dark-mode .claude-debug-content {
  border-color: var(--border-color);
}
body.dark-mode .claude-debug-header {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.12), transparent);
  border-color: var(--border-color);
}
body.dark-mode .claude-debug-section {
  border-color: var(--border-color);
}
body.dark-mode .claude-debug-detection {
  border-color: var(--border-color);
}
body.dark-mode .claude-debug-close:hover {
  background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
  .claude-debug-content {
    width: 95%;
    max-height: 90vh;
  }
  .claude-debug-field {
    flex-direction: column;
    gap: 2px;
  }
  .claude-debug-label {
    min-width: unset;
  }
}

/* Dark Mode Overrides - uses CSS variables from styles.css */
body.dark-mode .history-item,
body.dark-mode .result-tile {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-color);
}

/* Return-to-top arrow styling - handled in styles.css */

/* Admin User Controls */
.user-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.user-controls button {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.user-controls button:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

#user-info {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* Admin Create User Form */
#create-user-form {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

#create-user-form h4 {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-primary);
}

#create-user-form label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

#create-user-form input,
#create-user-form select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  box-sizing: border-box;
  transition: all var(--transition-fast);
}

#create-user-form input:focus,
#create-user-form select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

#create-user-form select {
  cursor: pointer;
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  padding-right: 28px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.admin-form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Admin Buttons */
.admin-btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  color: white;
}

.admin-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.admin-btn-success {
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
}

.admin-btn-success:hover {
  background: linear-gradient(135deg, var(--accent-green-dark), var(--accent-green-darker));
}

.admin-btn-danger {
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
}

.admin-btn-danger:hover {
  background: linear-gradient(135deg, var(--accent-red-dark), var(--accent-red-darker));
}

/* Admin Users Table */
#users-table,
#invites-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
}

#users-table thead tr,
#invites-table thead tr {
  background: var(--bg-secondary);
}

#users-table th,
#invites-table th {
  padding: var(--space-3);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
}

#users-table td,
#invites-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-color-light);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

#users-table tbody tr:hover,
#invites-table tbody tr:hover {
  background: var(--bg-secondary);
}

.admin-table-message {
  padding: var(--space-5) !important;
  text-align: center;
  color: var(--text-secondary);
}

.admin-nowrap {
  white-space: nowrap;
}

.admin-align-right {
  text-align: right;
}

/* Sortable admin table headers (Last Login / L7 / L30) */
#users-table th.sortable-header {
  cursor: pointer;
  user-select: none;
}

#users-table th.sortable-header:hover {
  background: var(--bg-tertiary);
}

#users-table th.sortable-header.sorted {
  color: var(--primary-500);
}

#users-table th.sortable-header .sort-indicator {
  display: inline-block;
  min-width: 0.9em;
  margin-left: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--primary-500);
}

/* Admin Table Inline Elements */
.admin-type-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  background: var(--bg-primary);
  color: var(--text-primary);
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  padding-right: 24px;
}

.admin-type-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  background: var(--admin-badge-bg);
  color: var(--admin-badge-text);
}

.admin-action-btn {
  padding: var(--space-1) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--font-size-xs);
  transition: all var(--transition-fast);
  color: white;
  margin-right: var(--space-1);
}

.admin-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.admin-action-btn-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
}

.admin-action-btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.admin-action-btn-warning {
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-dark));
}

.admin-action-btn-warning:hover {
  background: linear-gradient(135deg, var(--accent-orange-dark), var(--accent-orange-darker));
}

.admin-action-btn-danger {
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
}

.admin-action-btn-danger:hover {
  background: linear-gradient(135deg, var(--accent-red-dark), var(--accent-red-darker));
}

.admin-inactive-label,
.admin-current-user-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.admin-unverified-label {
  color: var(--accent-orange);
  font-size: var(--font-size-xs);
}

/* Moderation markers on the admin user grid */
.admin-locked-label {
  color: var(--accent-red);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.admin-strikes-label {
  color: var(--accent-orange);
  font-size: var(--font-size-xs);
}

.admin-cost-label {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.admin-status-text {
  margin-left: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.users-container {
  margin-top: var(--space-4);
}

/* Admin dark mode overrides */
body.dark-mode .admin-section {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

body.dark-mode .admin-type-select {
  background-color: var(--bg-tertiary);
}

/* User Settings Modal Styling */
.settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.settings-modal-container {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s ease-out;
}

.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color-light);
}

.settings-modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.settings-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.settings-close-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.settings-form {
  padding: var(--space-4);
}

.settings-form h4 {
  margin: 0 0 var(--space-4) 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.settings-form .form-group {
  margin-bottom: var(--space-4);
}

.settings-form label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.settings-form input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-sizing: border-box;
}

.settings-form input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.settings-error {
  background: var(--form-error-bg);
  color: var(--form-error-text);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

.settings-submit-btn {
  width: 100%;
  padding: var(--space-3);
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings-submit-btn:hover {
  background: var(--primary-600);
}

.settings-submit-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}

/* Forgot-password link on the login modal */
.login-forgot {
  margin-top: var(--space-3);
  text-align: center;
}
.login-forgot a {
  color: var(--primary-500);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.login-forgot a:hover {
  text-decoration: underline;
}

/* Email + verification status row in the settings modal */
.settings-email-section {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color-light);
}
.settings-email-section h4 {
  margin: 0 0 var(--space-2) 0;
}
.settings-email-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.settings-email-address {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  word-break: break-all;
}
.settings-email-neutral {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
/* Staged email change awaiting confirmation (spotarchy-2ea): a full-width second
   line under the verified live address. */
.settings-email-pending {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.verify-badge {
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.verify-badge--ok {
  color: var(--accent-green);
  background: rgba(76, 175, 80, 0.12);
}
.verify-badge--pending {
  color: var(--accent-orange);
  background: rgba(255, 152, 0, 0.12);
}
.settings-resend-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}
.settings-resend-btn:hover:not(:disabled) {
  background: var(--primary-600);
}
.settings-resend-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}

/* "Change email" trigger + inline form in the settings modal */
.settings-change-email-btn {
  margin-top: var(--space-3);
}
.settings-change-email-form {
  /* Inline within the email section, so drop the standalone form padding. */
  padding: var(--space-4) 0 0 0;
}
.settings-change-email-actions {
  display: flex;
  gap: var(--space-3);
}
.settings-change-email-actions .settings-submit-btn {
  flex: 1;
  width: auto;
}
.settings-cancel-btn {
  flex: 1;
  padding: var(--space-3);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: background 0.2s ease;
}
.settings-cancel-btn:hover {
  background: var(--border-color-light);
}

/* Soft "please verify your email" banner shown in the main app */
.verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 152, 0, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.35);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.verify-banner-text {
  flex: 1;
  min-width: 0;
}
.verify-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.verify-banner-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--accent-orange);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.verify-banner-btn:hover:not(:disabled) {
  background: var(--accent-orange-dark);
}
.verify-banner-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}
.verify-banner-dismiss {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-2);
}
.verify-banner-dismiss:hover {
  color: var(--text-primary);
}

/* Maintenance mode banner: same amber family as the verify banner, with a solid
   edge to read as app state rather than a personal nag (spotarchy-ff4) */
.maintenance-banner {
  border-left: 4px solid var(--accent-orange);
}

/* Upload surface while maintenance blocks the current user */
.maintenance-disabled .dropzone {
  opacity: 0.5;
  pointer-events: none;
}

/* Explanatory text under an admin-section's controls */
.admin-hint {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  max-width: 70ch;
}

/* Settings tabs styling */
.settings-tab.active {
  color: var(--primary-500) !important;
  border-bottom-color: var(--primary-500) !important;
}
.settings-tab:hover:not(.active) {
  background: var(--bg-secondary);
}
.sharing-option:hover {
  border-color: var(--primary-400) !important;
  background: var(--bg-secondary);
}
.sharing-option:has(input:checked) {
  border-color: var(--primary-500) !important;
  background: var(--primary-50);
}
body.dark-mode .sharing-option:has(input:checked) {
  background: rgba(33, 150, 243, 0.1);
}
/* Custom radio button styling for sharing options */
.sharing-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-primary);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
.sharing-option input[type="radio"]:checked {
  border-color: var(--primary-500);
  background: var(--primary-500);
}
.sharing-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.sharing-option input[type="radio"]:hover {
  border-color: var(--primary-400);
}
.sharing-option-content {
  flex: 1;
  min-width: 0;
}
.sharing-option-title {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}
.sharing-option-description {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

body.dark-mode .settings-modal-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

body.dark-mode .settings-modal-header {
  border-bottom-color: var(--border-color);
}

body.dark-mode .settings-form input {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

body.dark-mode .settings-close-btn:hover {
  background: var(--bg-tertiary);
}

/* Additional lightbox info panel styling */
.caption-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 15px;
}
.caption-buttons button {
  background-color: var(--primary-500);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}
.caption-buttons button:hover {
  background-color: var(--primary-hover);
}
.caption-buttons .delete-button {
  background-color: var(--accent-red);
}
.caption-buttons .delete-button:hover {
  background-color: var(--accent-red-dark);
}

/* Mobile responsive lightbox */
@media (max-width: 768px) {
  .lightbox-content {
    flex-direction: column;
  }
  
  .lightbox-info-panel {
    width: 100%;
    max-height: 40%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .lightbox-image-container {
    flex: 1;
    min-height: 60%;
  }
  
  .lightbox-controls {
    right: 10px;
  }
}

/* Mobile landscape lightbox - keep side-by-side layout with compact info panel */
@media (max-height: 500px) and (orientation: landscape) {
  .lightbox-content {
    flex-direction: row;
  }

  .lightbox-image-container {
    flex: 1;
    min-height: 100%;
  }

  .lightbox-info-panel {
    width: 260px;
    max-height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    padding: var(--space-3);
    font-size: 0.85em;
  }

  .lightbox-controls {
    top: 5px;
    right: 5px;
    gap: var(--space-2);
  }

  .lightbox-control-btn {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .lightbox-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .lightbox-info-section {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
  }

  .lightbox-info-section h4 {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
  }

  .caption-buttons {
    flex-direction: column;
    gap: 5px;
  }

  .caption-buttons button {
    font-size: 0.8em;
    padding: 6px 10px;
  }
}

/* Event-Based Admin Logs Styling */

/* Event Container */
.events-container {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  max-height: 600px;
  overflow-y: auto;
  padding: 0;
}

.events-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Individual Event Item */
.event-item {
  background: var(--panel-surface);
  border-bottom: 1px solid var(--panel-border-subtle);
  margin: 0;
  padding: 0;
  transition: all 0.2s ease;
  position: relative;
}

.event-item:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.event-item:first-child {
  border-radius: 8px 8px 0 0;
}

.event-item:hover {
  background: var(--panel-bg-subtle);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Event Header */
.event-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}

.event-header:hover {
  background: var(--panel-hover-tint);
}

.event-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* Event Type Indicators */
.event-type-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 60px;
  text-align: center;
}

.event-type-upload {
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border: 1px solid var(--state-success-border);
}

.event-type-ocr {
  background: var(--state-primary-bg);
  color: var(--state-primary-text);
  border: 1px solid var(--state-primary-border);
}

.event-type-error {
  background: var(--state-danger-bg);
  color: var(--state-danger-text);
  border: 1px solid var(--state-danger-border);
}

.event-type-api {
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
  border: 1px solid var(--state-warning-border);
}

.event-type-auth {
  background: var(--state-neutral-bg);
  color: var(--state-neutral-text);
  border: 1px solid var(--state-neutral-border);
}

.event-type-system {
  background: var(--state-info-bg);
  color: var(--state-info-text);
  border: 1px solid var(--state-info-border);
}

/* Timestamp Styling */
.event-timestamp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--panel-text-muted);
  font-weight: 500;
}

/* User Badge */
.event-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  background: var(--panel-bg-subtle);
  border: 1px solid var(--panel-border);
}

.user-color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

/* Event Action Description */
.event-action {
  font-size: 14px;
  color: var(--panel-text);
  font-weight: 500;
  margin-left: 8px;
  flex: 1;
}

/* Expand/Collapse Button */
.event-toggle {
  background: none;
  border: none;
  color: var(--panel-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-toggle:hover {
  background: var(--panel-border-subtle);
  color: var(--panel-text);
}

.event-toggle.expanded {
  transform: rotate(180deg);
}

/* Event Details Section */
.event-details {
  display: none;
  padding: 0 16px 16px 16px;
  border-top: 1px solid var(--panel-inset-border);
  background: var(--panel-inset-bg);
}

.event-details.expanded {
  display: block;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* Event Details Content */
.event-details-content {
  padding: 12px 0;
}

.event-detail-section {
  margin-bottom: 12px;
}

.event-detail-label {
  font-weight: 600;
  color: var(--panel-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.event-detail-value {
  font-size: 13px;
  color: var(--panel-text-muted);
  line-height: 1.4;
}

/* JSON Code Formatting */
.event-json {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  border: 1px solid var(--code-border);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.event-json .json-key {
  color: var(--code-key);
}

.event-json .json-string {
  color: var(--code-string);
}

.event-json .json-number {
  color: var(--code-number);
}

.event-json .json-boolean {
  color: var(--code-boolean);
}

.event-json .json-null {
  color: var(--code-null);
}

/* Search and Filter Controls */
.event-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.event-search {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  font-size: 14px;
}

.event-search:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.event-filter-select {
  padding: 8px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--panel-control-bg);
  cursor: pointer;
}

.event-filter-select:focus {
  outline: none;
  border-color: var(--primary-500);
}

/* Refresh and Action Buttons */
.event-action-buttons {
  display: flex;
  gap: 8px;
}

.event-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-btn-primary {
  background: var(--primary-500);
  color: white;
}

.event-btn-primary:hover {
  background: var(--primary-700);
  transform: translateY(-1px);
}

.event-btn-secondary {
  background: var(--panel-bg-subtle);
  color: var(--panel-text);
  border: 1px solid var(--panel-border);
}

.event-btn-secondary:hover {
  background: var(--panel-border-subtle);
}

/* Loading States */
.event-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--panel-text-muted);
}

.event-loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--spinner-track);
  border-top: 2px solid var(--primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Empty State */
.events-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--panel-text-muted);
}

.events-empty-icon {
  font-size: 48px;
  color: var(--panel-border);
  margin-bottom: 12px;
}

/* Statistics Cards */
.event-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.event-stat-card {
  background: var(--panel-surface);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  text-align: center;
}

.event-stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--panel-text);
  margin-bottom: 4px;
}

.event-stat-label {
  font-size: 12px;
  color: var(--panel-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dark Mode Styles for Events
   (colors are handled by the --panel-* tokens in tokens.css; only the rules
   below remain because their light-mode counterparts don't declare the
   property at all, so there is no token-carrying declaration to inherit.) */
body.dark-mode .event-user-badge {
  color: var(--panel-text);
}

body.dark-mode .event-search {
  background: var(--panel-control-bg);
  color: var(--panel-text);
}

body.dark-mode .event-filter-select {
  color: var(--panel-text);
}

/* Responsive Design for Events */
@media (max-width: 768px) {
  .event-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .event-search {
    min-width: auto;
  }
  
  .event-action-buttons {
    justify-content: center;
  }
  
  .event-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .event-header {
    padding: 12px;
  }
  
  .event-details {
    padding: 0 12px 12px 12px;
  }
  
  .event-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .event-json {
    font-size: 11px;
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .event-stats {
    grid-template-columns: 1fr;
  }
  
  .event-type-badge {
    font-size: 10px;
    padding: 3px 6px;
  }
  
  .event-timestamp {
    font-size: 11px;
  }
  
  .event-action {
    font-size: 13px;
  }
}

/* Accessibility Improvements */
.event-toggle:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.event-search:focus,
.event-filter-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.event-btn:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Smooth Scrolling for Event Container */
.events-container {
  scroll-behavior: smooth;
}

/* Event Priority Indicators */
.event-item.priority-high {
  border-left: 4px solid var(--state-danger);
}

.event-item.priority-medium {
  border-left: 4px solid var(--state-warning);
}

.event-item.priority-low {
  border-left: 4px solid var(--state-success);
}

/* Event Status Indicators */
.event-status {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.event-status.success {
  background: var(--state-success);
}

.event-status.warning {
  background: var(--state-warning);
}

.event-status.error {
  background: var(--state-danger);
}

.event-status.info {
  background: var(--state-info);
}

/* Shared on-photo composer (Comments + Spotter Notes) */
.composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.composer-input {
  background: var(--gray-700);
  border: 1px solid var(--gray-600);
  color: var(--gray-200);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 32px;
  max-height: 80px;
  font-size: 0.85rem;
  font-family: inherit;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer-btn {
  margin-left: auto;
  border: none;
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
}

.composer-btn--note {
  background: var(--accent-orange);
}

.composer-btn--comment {
  background: var(--primary-500);
}

/* ===== Logo branding (spotarchy-379: replaces the ✈️ emoji) ===== */

/* Theme-adaptive logo mark: the PNG is a pure alpha mask (shape only); the visible
   color comes from currentColor, so it renders dark on the light theme and light on
   the dark theme with a single asset. width/height of 1em means every existing
   .spinning font-size rule keeps sizing it exactly like it sized the emoji glyph. */
.logo-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("logo-mark.png") no-repeat center / contain;
  mask: url("logo-mark.png") no-repeat center / contain;
}

/* Login modal logo: the full squircle app icon, corner-rounded like the iOS login
   screen (LoginView clips to a 22% continuous corner radius). */
.login-modal-logo {
  width: 64px;
  height: 64px;
  border-radius: 22%;
}

/* ========================================
   Accessibility utilities
   ======================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link: hidden until keyboard-focused, then floats above everything */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: 10001;
    padding: var(--space-2) var(--space-4);
    background: var(--primary-700);
    color: #fff;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-2);
}

/* Info toast + dismissability (success/error defined earlier) */
.notification {
    cursor: pointer;
}

.notification.info {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
}

/* Confirm dialog (shares the settings-modal shell) */
.confirm-dialog-container {
    max-width: 420px;
}

.confirm-dialog-body {
    padding: var(--space-5);
}

.confirm-dialog-body p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-line;
}

#confirm-dialog-type-row {
    margin-top: var(--space-4);
}

#confirm-dialog-type-row label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

#confirm-dialog-type-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: 0 var(--space-5) var(--space-5);
}

#confirm-dialog-confirm.confirm-danger {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
}

#confirm-dialog-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   Upload dropzone + staged-file chips (Phase 5)
   ======================================== */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-6);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    text-align: center;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.dropzone.dragover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.dropzone-icon .logo-mark {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

.dropzone-primary {
    margin: 0;
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.dropzone-secondary {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.dropzone .btn-raised {
    margin: var(--space-1) 0;
}

.dropzone-hint {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

/* Remove-file chip button */
.selected-file-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.selected-file-remove:hover {
    background: var(--state-danger-bg);
    color: var(--state-danger);
}

body.dark-mode .dropzone.dragover {
    background: rgba(33, 150, 243, 0.12);
}

/* ========================================
   Card data strip (signature element, Phase 6)
   A FIDS/data-plate row keyed on the registration: aircraft data reads in
   B612 Mono with a taxiway-amber accent, the rest of the caption recedes.
   ======================================== */
.history-caption {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.card-plate {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--space-3);
    border-left: 3px solid var(--accent);
}

.card-reg {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--font-size-lg);
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 1.1;
}

.card-type {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.card-airline {
    font-weight: 600;
    color: var(--text-primary);
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* Chips no longer need the stacked-line top margin now that the strip
   lays them out in a flex row. */
.card-tags .airport,
.card-tags .uploader {
    margin-top: 0;
}

.card-date {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.card-exif {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--text-tertiary);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border-color);
}

/* Missing-info / low-confidence cards already carry a colored left border
   on .history-item; drop the amber plate accent there so the two don't
   clash. */
.history-item.missing-info .card-plate,
.history-item.low-confidence .card-plate,
.history-item.uncertain-confidence .card-plate {
    border-left-color: transparent;
    padding-left: 0;
}

/* Scan-outcome states on the upload result tile (spotarchy-799). 'failed' = the scan errored but
   the photo was saved; 'empty' = the scan ran and found no registration. */
.scan-state {
    display: inline-block;
    font-weight: 600;
}
.scan-state-failed {
    color: var(--state-danger-text);
}
.scan-state-empty {
    color: var(--text-secondary);
}
.scan-state-skipped {
    color: var(--text-secondary);
}

/* Skip-scan toggle on the upload form (spotarchy-877). */
.upload-skip-scan {
    margin: var(--space-4) 0;
}
.upload-skip-scan .checkbox-label {
    justify-content: center;
}
.scan-state-detail {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
.result-tile.scan-failed-tile {
    border-left: 3px solid var(--state-danger-border);
}

/* Scan-state on the archive card plate and in the lightbox, for photos with no detection. */
.card-reg.card-scan-state {
    color: var(--text-secondary);
    font-style: italic;
}
.lightbox-scan-state {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
.lightbox-scan-state.scan-state-failed {
    color: var(--state-danger-text);
}