/* Comic Valuator - Main Styles */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --success: #16a34a;
    --success-light: #22c55e;
    --danger: #dc2626;
    --danger-light: #ef4444;
    --warning: #d97706;
    --interpolated: #f59e0b;  /* Orange for interpolated values */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Skip navigation link (ADA/WCAG 2.1 AA) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
}
/* Screen-reader only helper (ADA) */
.sr-only {
    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:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
}

/* Global focus-visible indicator (ADA/WCAG 2.1 AA) */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* v2.11.19 — Clip horizontal at BOTH html and body, using `clip` (not
   `hidden`) on body so it doesn't auto-promote overflow-y to `auto` the
   way `hidden` does. That auto-promotion was the v2.11.6→v2.11.18 root
   cause of the sticky-header breakage: when body became a Y-scroll
   container, sticky stuck to body's port but window/html actually scrolled.
   `clip` skips the scroll-container creation and leaves overflow-y as
   `visible`, so html stays the single root scroller and sticky works. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: var(--gray-800);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Global Text Overflow - Allow word wrap in table cells (keep words whole, never break mid-word) */
td, th {
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    white-space: normal;
}

/* Apply to common content containers - allow word wrap for titles */
.title-cell,
.title-cell strong,
.title-cell .comic-desc,
.comic-title,
.series-name,
.issue-title,
.story-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

/* For multi-line truncation support (where needed) */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    padding: 0.375rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-full {
    height: 83px;
    width: auto;
    display: block;
}

.logo-icon {
    height: 83px;
    width: auto;
    display: none;
}

/* Show icon on small screens, full logo on larger screens */
@media (max-width: 480px) {
    .logo-full {
        display: none;
    }
    .logo-icon {
        display: block;
    }
    /* Move hamburger left 5px on vertical phone screens */
    .hamburger {
        margin-right: 5px;
    }
}

nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

nav a {
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--primary);
}

/* Hamburger Menu - Always visible */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
    z-index: 200;
    background: none;
    border: none;
    padding: 0;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--gray-700);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Navigation menu - slide-out panel */
.nav-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 2rem 2rem;
    gap: 1rem;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
    z-index: 150;
    overflow-y: auto;
    overflow-x: hidden;
    /* Hide scrollbar for modern browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.nav-menu::-webkit-scrollbar {
    display: none;
}

.nav-menu.active {
    right: 0;
}

.nav-menu a {
    font-size: 1.125rem;
    padding: 0.5rem 0;
    width: 100%;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 500;
}

.nav-menu a:hover {
    color: var(--primary);
}

/* Active nav link - bold and orange */
.nav-menu a.active {
    color: #ea580c;
    font-weight: 600;
}

/* Stellar badge - orange gradient for Stellar features */
.stellar-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    width: auto;
    border-bottom: none;
}

.nav-menu .btn {
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
}

/* Overlay for closing menu - transparent, just for click handling */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 140;
}

.nav-overlay.active {
    display: block;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(234, 88, 12, 0.4);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #15803d);
    color: white;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #b91c1c);
    color: white;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #c2410c 100%);
}

.btn-outline {
    background: transparent;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-outline:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-700);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
    box-sizing: border-box;
    min-height: 44px; /* Ensure consistent height across browsers */
}

/* Safari fix: override native styling to respect min-height */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.5rem;
    cursor: pointer;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Password visibility toggle */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: var(--gray-600);
}

.password-toggle:focus {
    outline: none;
    color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
    border-radius: 0.25rem;
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--primary);
}

/* Cards */
.card {
    background: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-100);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

/* Main Content */
main {
    padding: 2rem 0 0 0;
}

/* Hero Section */
.hero-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
    text-align: center;
    padding: 2.5rem 2rem;
}

.hero-card h1 {
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--gray-800), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

/* Search Section */
.search-section {
    margin-bottom: 2rem;
}

.search-box {
    display: flex;
    gap: 0.75rem;
}

.search-box input {
    flex: 1;
    font-size: 1rem;
    padding: 0.875rem 1.25rem;
}

.search-box .btn {
    padding: 0.875rem 1.5rem;
}

/* Quick Search Links (Popular Titles / Recent Searches) */
.quick-search-link {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    text-decoration: none;
    border-radius: 1rem;
    font-size: 0.8125rem;
    transition: all 0.2s;
    border: none;
}

.quick-search-link:hover,
nav .quick-search-link:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: white !important;
    text-decoration: none;
}

/* Recent search items with delete button */
.recent-search-item {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    border-radius: 1rem;
}

/* X button on the left */
.recent-search-item .recent-search-delete {
    background: transparent;
    border: none;
    padding: 0.375rem 0.35rem 0.375rem 0.55rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1;
    transition: color 0.15s;
}

.recent-search-item .recent-search-delete:hover {
    color: white;
}

/* Search text link */
.recent-search-item .quick-search-link {
    background: transparent;
    padding-left: 0;
    padding-right: 0.75rem;
    border-radius: 0 1rem 1rem 0;
}

/* Search Mode Toggle Container - Concave inset look */
.search-mode-toggle {
    display: flex;
    background: var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.1875rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-300);
}

/* Search Mode Toggle Buttons */
.search-mode-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--gray-600);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    position: relative;
}

.search-mode-btn:hover:not(.active) {
    color: var(--gray-800);
    background: rgba(255, 255, 255, 0.5);
}

.search-mode-btn.active {
    background: var(--primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Search Results Table */
.search-results {
    margin-top: 1.5rem;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    table-layout: auto;
}

.results-table thead {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.results-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: white;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.results-table tbody tr {
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

/* Zebra striping: count only visible data rows, skipping hidden detail rows */
.results-table tbody tr:nth-child(even of .search-result-row) {
    background: var(--gray-50);
}

.results-table tbody tr:hover {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.results-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #c4b5fd; /* Light brand purple for row separators */
    vertical-align: middle;
    font-size: 0.875rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

.results-table .cover-cell {
    width: 50px;
    padding: 0.5rem;
    padding-left: 0.75rem;
}

.results-table .cover-cell img {
    width: 40px;
    height: 60px;
    object-fit: cover;
    object-position: top;
    border-radius: 0.25rem;
    box-shadow: var(--shadow-sm);
}

.results-table td.title-cell {
    font-weight: 600;
    color: var(--gray-800);
    max-width: 300px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.results-table th.title-cell {
    max-width: 300px;
}

/* Year/Vol/Issues columns - minimum width for inline editing */
.results-table .year-cell,
.results-table td:nth-last-child(2),
.results-table td:nth-last-child(3),
.results-table td:nth-last-child(4) {
    min-width: 3.5em;
}

.results-table .title-cell strong {
    display: block;
    margin-bottom: 0.25rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

.results-table .title-cell .comic-desc {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

.results-table .issue-cell {
    font-weight: 700;
    color: var(--primary);
}

.results-table .year-cell {
    color: var(--gray-500);
    font-size: 0.875rem;
}

/* Publisher column - allow word wrap to prevent overlap */
.results-table .publisher-cell {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    color: var(--gray-600);
    font-size: 0.875rem;
}

/* Type column - compact display for series type */
.results-table .type-cell {
    color: var(--gray-600);
    font-size: 0.75rem;
}

/* Checkbox cells - consistent sizing and centered */
.results-table .checkbox-cell,
.results-table th:first-child:has(input[type="checkbox"]) {
    width: 40px;
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.results-table .checkbox-cell input[type="checkbox"],
.results-table th input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

/* =============================================
   RESULTS TABLE RESPONSIVE BREAKPOINTS
   Consistent font sizing at each screen size
   ============================================= */

/* iPad horizontal (1024px-1199px) */
@media (max-width: 1199px) {
    .results-table th {
        padding: 0.75rem 0.625rem;
        font-size: 0.6875rem;
    }

    .results-table td {
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
    }

    .results-table .cover-cell {
        width: 45px;
        padding: 0.375rem;
    }

    .results-table .cover-cell img {
        width: 36px;
        height: 54px;
    }

    .results-table .title-cell {
        max-width: 220px;
    }

    .results-table .title-cell .comic-desc {
        font-size: 0.6875rem;
    }

    .results-table .type-cell,
    .results-table .year-cell,
    .results-table .publisher-cell {
        font-size: 0.8125rem;
    }

    .results-table .issue-cell {
        font-size: 0.8125rem;
    }

    .results-table .btn-sm {
        padding: 0.3125rem 0.625rem;
        font-size: 0.6875rem;
    }

    .badge-variant,
    .badge-standard {
        padding: 0.1875rem 0.375rem;
        font-size: 0.625rem;
    }
}

/* Progressive shrinking (900px-1023px) */
@media (max-width: 1023px) {
    .results-table th {
        padding: 0.625rem 0.5rem;
        font-size: 0.625rem;
    }

    .results-table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }

    .results-table .cover-cell {
        width: 42px;
        padding: 0.3125rem;
    }

    .results-table .cover-cell img {
        width: 34px;
        height: 51px;
    }

    .results-table .title-cell {
        max-width: 180px;
    }

    .results-table .title-cell .comic-desc {
        font-size: 0.625rem;
    }

    .results-table .type-cell,
    .results-table .year-cell,
    .results-table .publisher-cell {
        font-size: 0.75rem;
    }

    .results-table .issue-cell {
        font-size: 0.75rem;
    }

    .results-table .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }

    .badge-variant,
    .badge-standard {
        padding: 0.1875rem 0.3125rem;
        font-size: 0.5625rem;
    }
}

/* iPad vertical (768px-899px) */
@media (max-width: 899px) {
    .results-table th {
        padding: 0.5rem 0.375rem;
        font-size: 0.5625rem;
    }

    .results-table td {
        padding: 0.4375rem 0.3125rem;
        font-size: 0.6875rem;
    }

    .results-table .cover-cell {
        width: 38px;
        padding: 0.25rem;
    }

    .results-table .cover-cell img {
        width: 30px;
        height: 45px;
    }

    .results-table .title-cell {
        max-width: 150px;
    }

    .results-table .title-cell .comic-desc {
        font-size: 0.5625rem;
    }

    .results-table .type-cell,
    .results-table .year-cell,
    .results-table .publisher-cell {
        font-size: 0.6875rem;
    }

    .results-table .issue-cell {
        font-size: 0.6875rem;
    }

    .results-table .btn-sm {
        padding: 0.1875rem 0.4375rem;
        font-size: 0.5625rem;
    }

    .badge-variant,
    .badge-standard {
        padding: 0.125rem 0.25rem;
        font-size: 0.5rem;
    }
}

/* Tablet/horizontal iPhone (640px-768px) */
@media (max-width: 768px) {
    .results-table th {
        padding: 0.4375rem 0.3125rem;
        font-size: 0.5rem;
    }

    .results-table td {
        padding: 0.375rem 0.25rem;
        font-size: 0.625rem;
    }

    .results-table .cover-cell {
        width: 34px;
        padding: 0.1875rem;
    }

    .results-table .cover-cell img {
        width: 28px;
        height: 42px;
    }

    .results-table .title-cell {
        max-width: 120px;
    }

    .results-table .title-cell .comic-desc {
        font-size: 0.5rem;
    }

    .results-table .type-cell,
    .results-table .year-cell,
    .results-table .publisher-cell {
        font-size: 0.625rem;
    }

    .results-table .issue-cell {
        font-size: 0.625rem;
    }

    .results-table .btn-sm {
        padding: 0.1875rem 0.375rem;
        font-size: 0.5rem;
    }

    .badge-variant,
    .badge-standard {
        padding: 0.125rem 0.1875rem;
        font-size: 0.4375rem;
    }
}


/* Analysis Section */
.analysis-section {
    background: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.comic-header {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--gray-50), white);
    border-bottom: 2px solid var(--gray-100);
}

.comic-header img {
    width: 120px;
    height: 180px;
    object-fit: cover;
    object-position: top;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
}

.comic-header-info h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}

.comic-header-info p {
    color: var(--gray-500);
    font-size: 0.875rem;
}

/* Analysis Grid */
.analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.analysis-grid > .card {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .analysis-grid {
        grid-template-columns: 1fr;
    }
}

/* Data Tables */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow);
    font-size: 0.875rem;
}

.data-table thead {
    background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
}

.data-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    color: white;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table th:not(:first-child) {
    text-align: right;
}

.data-table tbody tr {
    background: white;
    transition: background 0.2s;
}

.data-table tbody tr:nth-child(odd) {
    background: var(--gray-50);
}

.data-table tbody tr:hover {
    background: #e0e7ff;
}

.data-table tbody tr.highlight {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    font-weight: 600;
}

.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table td:first-child {
    max-width: 300px;
    white-space: nowrap;
}

.data-table td:not(:first-child) {
    text-align: right;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.data-table .positive {
    color: var(--success);
    font-weight: 600;
}

.data-table .negative {
    color: var(--danger);
    font-weight: 600;
}

/* =============================================
   DATA TABLE RESPONSIVE BREAKPOINTS
   Consistent font sizing at each screen size
   ============================================= */

/* iPad horizontal (1024px-1199px) */
@media (max-width: 1199px) {
    .data-table {
        font-size: 0.8125rem;
    }

    .data-table th {
        padding: 0.75rem 0.75rem;
        font-size: 0.6875rem;
    }

    .data-table td {
        padding: 0.625rem 0.75rem;
    }
}

/* Progressive shrinking (900px-1023px) */
@media (max-width: 1023px) {
    .data-table {
        font-size: 0.75rem;
    }

    .data-table th {
        padding: 0.625rem 0.625rem;
        font-size: 0.625rem;
    }

    .data-table td {
        padding: 0.5rem 0.625rem;
    }

    .data-table td:first-child {
        max-width: 200px;
    }
}

/* iPad vertical (768px-899px) */
@media (max-width: 899px) {
    .data-table {
        font-size: 0.6875rem;
    }

    .data-table th {
        padding: 0.5rem 0.5rem;
        font-size: 0.5625rem;
    }

    .data-table td {
        padding: 0.4375rem 0.5rem;
    }

    .data-table td:first-child {
        max-width: 150px;
    }
}

/* Tablet/horizontal iPhone (640px-768px) */
@media (max-width: 768px) {
    .data-table {
        font-size: 0.625rem;
    }

    .data-table th {
        padding: 0.4375rem 0.375rem;
        font-size: 0.5rem;
    }

    .data-table td {
        padding: 0.375rem 0.375rem;
    }

    .data-table td:first-child {
        max-width: 120px;
    }
}

/* Mobile (480px-640px) */
@media (max-width: 640px) {
    .data-table {
        font-size: 0.5625rem;
    }

    .data-table th {
        padding: 0.375rem 0.3125rem;
        font-size: 0.4375rem;
    }

    .data-table td {
        padding: 0.3125rem 0.3125rem;
    }

    .data-table td:first-child {
        max-width: 100px;
    }
}

/* Small mobile (< 480px) */
@media (max-width: 480px) {
    .data-table {
        font-size: 0.5rem;
    }

    .data-table th {
        padding: 0.25rem 0.25rem;
        font-size: 0.375rem;
    }

    .data-table td {
        padding: 0.25rem 0.25rem;
    }

    .data-table td:first-child {
        max-width: 80px;
    }
}

/* Criteria List */
.criteria-list {
    list-style: none;
}

.criteria-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    transition: background 0.2s;
}

.criteria-item:nth-child(odd) {
    background: var(--gray-50);
}

.criteria-item:hover {
    background: var(--gray-100);
}

.criteria-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.criteria-icon.pass {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: var(--success);
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.criteria-icon.fail {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: var(--danger);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.criteria-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}

.criteria-content p {
    font-size: 0.8125rem;
    color: var(--gray-500);
    line-height: 1.4;
}

/* Recommendation Badge */
.recommendation {
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: 1rem;
    margin: 1.5rem;
    position: relative;
    overflow: hidden;
}

.recommendation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    z-index: 0;
}

.recommendation.yes {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 3px solid var(--success);
}

.recommendation.yes::before {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5l5 10 10 2-7 7 2 10-10-5-10 5 2-10-7-7 10-2z' fill='%2316a34a' fill-opacity='0.3'/%3E%3C/svg%3E");
}

.recommendation.no {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 3px solid var(--danger);
}

.recommendation.graded {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    border: 3px solid #f59e0b;
}

.recommendation h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.recommendation.yes h2 {
    color: var(--success);
}

.recommendation.no h2 {
    color: var(--danger);
}

.recommendation.graded h2 {
    color: #f59e0b;
}

.recommendation p {
    color: var(--gray-700);
    font-size: 1.125rem;
    position: relative;
    z-index: 1;
}

.recommendation .criteria-count {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.8);
    border-radius: 2rem;
    font-weight: 600;
    margin-top: 1rem;
}

/* Financials */
.financials-section {
    background: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.financials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.financial-item {
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, var(--gray-50), white);
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    transition: transform 0.2s, box-shadow 0.2s;
}

.financial-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.financial-item .label {
    font-size: 0.6875rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.financial-item .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.financial-item .value.positive {
    color: var(--success);
}

.financial-item .value.negative {
    color: var(--danger);
}

/* Info Bubble (tooltip icon) */
.info-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: var(--gray-400);
    color: white;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
}

.info-bubble:hover {
    background: var(--primary);
}

/* Tooltip for info bubble */
.info-bubble::after {
    content: attr(data-tooltip);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--gray-800);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    pointer-events: none;
}

/* No arrow needed for centered tooltip */
.info-bubble::before {
    display: none;
}

.info-bubble:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Data anomaly warning icon */
.anomaly-icon {
    color: #f59e0b;
    cursor: help;
    font-size: 1em;
    vertical-align: middle;
    margin-left: 3px;
    position: relative;
}

.anomaly-icon:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.anomaly-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    pointer-events: none;
}

.anomaly-icon:hover::after,
.anomaly-icon:focus::after {
    opacity: 1;
    visibility: visible;
}

/* Generic tooltip for badges (not the info-bubble "i" icons) */
[data-tooltip]:not(.info-bubble):not(.anomaly-icon) {
    position: relative;
}

[data-tooltip]:not(.info-bubble):not(.anomaly-icon)::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 10000;
    pointer-events: none;
}

[data-tooltip]:not(.info-bubble):not(.anomaly-icon):hover::after {
    opacity: 1;
    visibility: visible;
}

/* Signed badge tooltip - position to the left of the icon */
.comic-card-badge.signed[data-tooltip]::after {
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    white-space: nowrap;
    max-width: none;
}

/* Financial item label with info bubble */
.financial-item .label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Collection Grid */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.comic-card {
    background: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

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

/* Checkbox for comic selection */
.comic-card-checkbox {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
}

.comic-card-checkbox input[type="checkbox"],
.comic-select-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary);
}

.comic-card-checkbox input[type="checkbox"]:checked,
.comic-select-checkbox:checked {
    accent-color: var(--primary);
}

/* Header checkbox in table - white with blue check */
.collection-table thead .comic-select-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.collection-table thead .comic-select-checkbox:checked {
    background: white;
    border-color: white;
}

.collection-table thead .comic-select-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.collection-table thead .comic-select-checkbox:indeterminate {
    background: rgba(255, 255, 255, 0.5);
    border-color: white;
}

.collection-table thead .comic-select-checkbox:indeterminate::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 5px;
    width: 8px;
    height: 2px;
    background: var(--primary);
}

/* Table checkbox cell */
.checkbox-cell {
    width: 40px;
    text-align: center;
    vertical-align: middle;
}

.comic-card-image {
    height: 200px;
    background: linear-gradient(135deg, var(--gray-200), var(--gray-100));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Blurred cover background */
.comic-card-image .cover-blur-bg {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-size: cover;
    background-position: center top;
    filter: blur(8px) brightness(0.7);
    transform: scale(1.1);
    z-index: 0;
}

.comic-card-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* Progressive cover loading — smooth fade-in as covers load one by one */
img.lazy-cover {
    transition: opacity 0.3s ease-in;
}

.comic-card-content {
    padding: 1.25rem;
}

.comic-card-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--gray-800);
}

.comic-card-meta {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.comic-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comic-card-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.comic-card-badge.yes {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: var(--success);
    border: 1px solid var(--success);
}

.comic-card-badge.no {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* Graded comics - Orange to match logo "Valuation" */
.comic-card-badge.graded {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: white;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.3);
}

.comic-card-badge.needs-details {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.comic-card-badge.pending {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4338ca;
    border: 1px solid #6366f1;
}

/* Unidentified comics — missing GCD and PriceCharting IDs
   Dashed border signals "we're not sure about this comic's identity" */
.comic-card-badge.unidentified {
    border-style: dashed;
}

/* Signed comics - Black background with white pencil icon (circular) */
.comic-card-badge.signed {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: white !important;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Make circular: scales with font-size like other badges */
    width: 2.1em;
    height: 2.1em;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.comic-card-badge.coming-soon {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    text-transform: lowercase;
    letter-spacing: normal;
}

/* Grade dropdown in modal */
select.comic-card-badge.grade-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f5f3ff;
    color: #1f2937;
    border: 2px solid #4f46e5;
    cursor: pointer;
    padding-right: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

select.comic-card-badge.grade-dropdown:hover {
    background-color: #e0e7ff;
    border-color: #4338ca;
}

select.comic-card-badge.grade-dropdown:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

select.comic-card-badge.grade-dropdown option {
    background: white;
    color: #1f2937;
    font-weight: 600;
    padding: 0.5rem;
}

/* Larger font for modal grade dropdown */
#modal-grade-select.grade-dropdown {
    font-size: 0.875rem;
    padding: 0.5rem 1.75rem 0.5rem 0.875rem;
}

/* Modal recommendation badge - prevent wrapping */
#modal-badge-recommendation {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* Responsive sizing for modal grade elements */
@media (max-width: 480px) {
    #modal-grade-select.grade-dropdown {
        font-size: 0.75rem;
        padding: 0.375rem 1.5rem 0.375rem 0.625rem;
    }
    #modal-badge-recommendation {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Copies badge - diamond shape indicator for multiple identical copies */
/* Teal/cyan color to differentiate from other badges */
.copies-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 0.25rem;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);
    letter-spacing: 0.02em;
}

.comic-card-value {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--primary);
}

/* Summary Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 0.25rem;
}

/* Stats Equation Row (Value - Invested = Profit) */
.stats-equation {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.stats-equation .stat-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-equation .stat-card .stat-value {
    font-size: 1.75rem;
}

.equation-operator {
    font-size: 2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .stats-equation {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .stats-equation .stat-card {
        flex: 1 1 calc(33% - 1.5rem);
        min-width: 80px;
        padding: 0.75rem 0.5rem;
    }

    .stats-equation .stat-card .stat-value {
        font-size: 1.125rem;
    }

    .stats-equation .stat-card .stat-label {
        font-size: 0.625rem;
    }

    .equation-operator {
        font-size: 1.25rem;
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .stats-equation .stat-card {
        padding: 0.75rem 0.375rem;
    }

    .stats-equation .stat-card .stat-value {
        font-size: 0.875rem;
    }

    .stats-equation .stat-card .stat-label {
        font-size: 0.5625rem;
        letter-spacing: 0.05em;
    }

    .equation-operator {
        font-size: 1rem;
    }
}

/* Tablet portrait — keep 6 columns but tighten spacing */
@media (max-width: 900px) {
    .stats-grid {
        gap: 0.5rem;
    }

    .stats-grid .stat-card {
        padding: 0.75rem 0.5rem;
    }

    .stats-grid .stat-card .stat-value {
        font-size: 1.375rem;
    }

    .stats-grid .stat-card .stat-label {
        font-size: 0.5625rem;
    }
}

/* Mobile — switch to 3 per row */
@media (max-width: 640px) {
    .stats-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .stats-grid .stat-card {
        flex: 0 0 calc(33.333% - 0.75rem);
        min-width: 100px;
        max-width: 140px;
        padding: 0.875rem;
    }

    .stats-grid .stat-card .stat-value {
        font-size: 1.375rem;
    }

    .stats-grid .stat-card .stat-label {
        font-size: 0.5625rem;
    }
}

@media (max-width: 480px) {
    .stats-grid .stat-card {
        flex: 0 0 calc(50% - 0.5rem);
        min-width: 90px;
        max-width: 130px;
        padding: 0.75rem;
    }

    .stats-grid .stat-card .stat-value {
        font-size: 1.25rem;
    }

    .stats-grid .stat-card .stat-label {
        font-size: 0.5rem;
    }
}

/* Loading */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Generic spin class for icons */
.spin {
    animation: spin 1s linear infinite;
}

/* Loading screen with facts */
.loading-facts-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 300px;
}

.loading-facts-cover {
    width: 100px;
    height: 150px;
    background: var(--gray-700);
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    opacity: 0;
    animation: fadeInFact 0.5s ease forwards;
}

.loading-facts-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loading-facts-label {
    color: var(--gray-500);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.loading-facts-text {
    color: var(--gray-800);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInFact 0.5s ease forwards;
}

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

.loading-facts-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--gray-700);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.loading-facts-phase {
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
    min-height: 1.5em;
}

/* Alerts */
.alert {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-info {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.alert-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fcd34d;
}

.alert-success {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border: 1px solid #86efac;
}

.alert-error {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 1.5rem;
    gap: 0.5rem;
}

.tab {
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    margin-bottom: -2px;
    border-radius: 0.5rem 0.5rem 0 0;
}

.tab:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}

.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: white;
}

/* Finder Tabs (Search/Newest/Publishers/Creators/Characters/Genres/Lists) */
.finder-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    position: relative;
}

.finder-tab {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-500);
    background: white;
    cursor: pointer;
    border: none;
    border-bottom: none;
    transition: all 0.2s;
    border-radius: 0.5rem 0.5rem 0 0;
    margin-right: -0.5rem;
    position: relative;
    box-shadow: -3px 0 1px -1px rgba(0,0,0,0.15), 3px 0 1px -1px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.finder-tab:nth-child(1) { z-index: 7; box-shadow: 3px 0 1px -1px rgba(0,0,0,0.3); }
.finder-tab:nth-child(2) { z-index: 6; }
.finder-tab:nth-child(3) { z-index: 5; }
.finder-tab:nth-child(4) { z-index: 4; }
.finder-tab:nth-child(5) { z-index: 3; }
.finder-tab:nth-child(6) { z-index: 2; }
.finder-tab:nth-child(7) { z-index: 1; }

.finder-tab:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}

.finder-tab.active {
    color: #f59e0b;
    background: white;
    z-index: 10;
    box-shadow: -3px 0 1px -1px rgba(0,0,0,0.3), 3px 0 1px -1px rgba(0,0,0,0.3), 0 0 0 0 transparent;
    /* No bottom shadow — active tab merges visually with the card content below */
}

/* Card with finder tabs - tabs sit outside the card */
.card.has-finder-tabs {
    border-radius: 0 1rem 1rem 1rem;
    padding-top: 1.5rem;
    position: relative;
}

.card.has-finder-tabs::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 1rem;
    height: 3px;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    z-index: 9;
    pointer-events: none;
}

.finder-tab-content {
    display: none;
}

.finder-tab-content.active {
    display: block;
}

/* Progressive responsive shrinking for 7 finder tabs */
@media (max-width: 1024px) {
    .finder-tab {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 850px) {
    .finder-tab {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .finder-tab {
        padding: 0.5rem 0.5rem;
        font-size: 0.6875rem;
        margin-right: -0.375rem;
    }
}

@media (max-width: 480px) {
    .finder-tab {
        padding: 0.4375rem 0.375rem;
        font-size: 0.625rem;
        margin-right: -0.3125rem;
        border-radius: 0.375rem 0.375rem 0 0;
    }
}

@media (max-width: 375px) {
    .finder-tab {
        padding: 0.375rem 0.25rem;
        font-size: 0.5625rem;
        margin-right: -0.25rem;
        border-radius: 0.25rem 0.25rem 0 0;
    }
}

.finder-placeholder {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-500);
}

.finder-placeholder h3 {
    font-size: 1.25rem;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.finder-placeholder p {
    font-size: 0.9rem;
}

/* Input Grid */
.input-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 640px) {
    .input-grid {
        grid-template-columns: 1fr;
    }
}

/* Options Box */
.options-box {
    background: linear-gradient(135deg, var(--gray-50), white);
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    margin: 1.5rem 0;
}

.options-box .options-title {
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--gray-700);
}

/* Footer */
footer {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    text-align: center;
    padding: 2rem;
    margin-top: 2rem;
}

footer a {
    color: white;
}

/* Consistent Section Widths */
.section-card {
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Scrollable Tables */
.table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.table-wrapper table {
    width: 100%;
}

/* Table Resizer Wrapper - ensure full width */
.table-resizer-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
}

.table-resizer-wrapper > table {
    width: 100% !important;
}

/* Consistent vertical spacing */
main .card,
main .section-card,
.analysis-section,
.financials-section {
    margin-bottom: 1.5rem;
}

main .card:last-child,
main .section-card:last-child {
    margin-bottom: 0;
}

/* Full-width analysis grid columns on larger screens */
@media (min-width: 769px) {
    .analysis-grid {
        gap: 2rem;
    }
}

/* Analysis results container */
#analysis-results {
    display: block;
}

#analysis-results > .card {
    width: 100%;
}

/* Responsive */
@media (max-width: 640px) {
    .financials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .financial-item {
        padding: 0.75rem 0.5rem;
    }

    .financial-item .label {
        font-size: 0.5625rem;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }

    .financial-item .value {
        font-size: 1rem;
    }

    .search-box {
        flex-direction: column;
    }

    .hero-card h1 {
        font-size: 1.75rem;
    }

    /* Hide Publisher column on mobile */
    .results-table .publisher-cell,
    .results-table th.publisher-header {
        display: none;
    }

    /* Month column stays visible on mobile - removed hide rule */

    /* =============================================
       CONSISTENT STYLING FOR ALL TABLES @ 640px
       One font size for everything: 0.5625rem (9px)
       Issues list header padding is the standard
       Using !important to override base styles
       ============================================= */

    /* ALL table headers - Issues list is the standard */
    .results-table th {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.5625rem !important;
    }

    /* ALL table cells - uniform padding and font */
    .results-table td {
        padding: 0.375rem !important;
        font-size: 0.5625rem !important;
    }

    /* Override specific cell font sizes */
    .results-table .type-cell,
    .results-table .year-cell,
    .results-table .publisher-cell,
    .results-table .issue-cell,
    .results-table .title-cell,
    .results-table .title-cell strong {
        font-size: 0.5625rem !important;
    }

    /* Cover cells need padding on sides */
    .results-table .cover-cell {
        padding-left: 0.5rem !important;
        padding-right: 0.375rem !important;
    }

    /* Action column needs padding on right */
    .results-table td:last-child {
        padding-right: 0.5rem !important;
    }

    /* ALL action buttons - same font as cells */
    .results-table .btn-sm,
    .results-table .btn.btn-primary.btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.5625rem !important;
    }

    /* Ownership badges - same font as everything else */
    .ownership-badge,
    .issue-cell .ownership-badge {
        padding: 0.125rem 0.25rem !important;
        font-size: 0.5625rem !important;
        margin-left: 0 !important;
    }

    /* Issue cell - keep as table-cell so row height matches other columns */
    .results-table .issue-cell {
        display: table-cell !important;
        vertical-align: middle !important;
    }

    /* Stack issue cell content vertically */
    .results-table .issue-cell > * {
        display: block;
        margin-bottom: 0.125rem;
    }

    .results-table .issue-cell > *:last-child {
        margin-bottom: 0;
    }

    /* Ownership badges in issue cell - proper sizing */
    .results-table .issue-cell .ownership-badge {
        display: block !important;
        width: fit-content !important;
        margin-top: 0.125rem !important;
    }

    /* Title cell badges on separate row */
    .title-cell div[style*="display: flex"] {
        gap: 0.125rem !important;
        margin-top: 0.125rem !important;
    }

    /* Type column - WORD WRAP */
    .results-table .type-cell {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Story/Title cells - WORD WRAP */
    .results-table .title-cell {
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Variant badges - slightly smaller than body text since bold uppercase + color background reads larger */
    .badge-variant,
    .badge-standard {
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.2 !important;
        display: inline-block !important;
        padding: 0.125rem 0.25rem !important;
        font-size: 0.46875rem !important;
    }
}

@media (max-width: 480px) {
    /* Smaller financial items on very small screens */
    .financials-grid {
        gap: 0.375rem;
    }

    .financial-item {
        padding: 0.5rem 0.375rem;
    }

    .financial-item .label {
        font-size: 0.5rem;
        letter-spacing: 0.03em;
        margin-bottom: 0.125rem;
    }

    .financial-item .value {
        font-size: 0.875rem;
    }

    /* =============================================
       CONSISTENT STYLING FOR ALL TABLES @ 480px
       One font size for everything: 0.5rem (8px)
       Using !important to override base styles
       ============================================= */

    /* ALL table headers */
    .results-table th {
        padding: 0.375rem 0.25rem !important;
        font-size: 0.5rem !important;
    }

    /* ALL table cells */
    .results-table td {
        padding: 0.25rem !important;
        font-size: 0.5rem !important;
    }

    /* Override specific cell font sizes */
    .results-table .type-cell,
    .results-table .year-cell,
    .results-table .publisher-cell,
    .results-table .issue-cell,
    .results-table .title-cell,
    .results-table .title-cell strong {
        font-size: 0.5rem !important;
    }

    /* Cover cells - padding only, width handled by fluid clamp() */
    .results-table .cover-cell {
        padding-left: 0.375rem !important;
        padding-right: 0.25rem !important;
    }

    .results-table .cover-cell img {
        max-width: 100%;
        height: auto;
        max-height: 36px;
    }

    /* Action column padding */
    .results-table td:last-child {
        padding-right: 0.375rem !important;
    }

    /* ALL action buttons - same font */
    .results-table .btn-sm,
    .results-table .btn.btn-primary.btn-sm {
        padding: 0.1875rem 0.375rem !important;
        font-size: 0.5rem !important;
    }

    /* Ownership badges - same font */
    .ownership-badge,
    .issue-cell .ownership-badge {
        padding: 0.0625rem 0.1875rem !important;
        font-size: 0.5rem !important;
        margin-left: 0 !important;
    }

    /* Variant badges - same font */
    .badge-variant,
    .badge-standard {
        padding: 0.125rem 0.1875rem !important;
        font-size: 0.4rem !important;
    }
}

/* No Cover Placeholder */
.no-cover {
    width: 50px;
    height: 75px;
    background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: var(--gray-500);
    text-align: center;
}

/* Search Breadcrumb */
.search-breadcrumb {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--gray-50), white);
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    font-size: 0.875rem;
    color: var(--gray-600);
}

.search-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.search-breadcrumb a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.search-breadcrumb .breadcrumb-active {
    font-weight: 600;
    color: var(--gray-800);
}

/* Volume Navigation — prev/next sibling volumes (v1.2.0) */
/* Uses .btn .btn-sm — same as issue nav buttons. Responsive overrides below. */

/* Search Breadcrumb - Responsive styles */
@media (max-width: 768px) {
    .search-breadcrumb {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .search-breadcrumb .issue-nav-buttons .btn,
    .search-breadcrumb .volume-nav-buttons .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .search-breadcrumb {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
        flex-direction: column;
        align-items: flex-start !important;
    }
    /* v2.11.34 — exempt simple breadcrumbs that don't host nav-button blocks
       (Lists tab). Those have just `<a> / <span>`, no width pressure, so
       keep them on one row. */
    #lists-breadcrumbs.search-breadcrumb {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .search-breadcrumb > div:first-child {
        word-break: break-word;
    }

    .search-breadcrumb .issue-nav-buttons,
    .search-breadcrumb .volume-nav-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .search-breadcrumb .issue-nav-buttons .btn,
    .search-breadcrumb .volume-nav-buttons .btn {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .search-breadcrumb {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
    }

    .search-breadcrumb a,
    .search-breadcrumb .breadcrumb-active {
        font-size: 0.6875rem;
    }

    /* Shorten breadcrumb text on mobile */
    .search-breadcrumb a[onclick*="backToSeries"] {
        font-size: 0;
    }
    .search-breadcrumb a[onclick*="backToSeries"]::before {
        content: '← Titles';
        font-size: 0.6875rem;
    }

    .search-breadcrumb a[onclick*="backToIssues"] {
        font-size: 0;
    }
    .search-breadcrumb a[onclick*="backToIssues"]::before {
        content: 'Issues';
        font-size: 0.6875rem;
    }

    .search-breadcrumb .issue-nav-buttons .btn,
    .search-breadcrumb .volume-nav-buttons .btn {
        padding: 0.2rem 0.375rem;
        font-size: 0.625rem;
    }
}

@media (max-width: 375px) {
    .search-breadcrumb {
        padding: 0.25rem 0.375rem;
        font-size: 0.625rem;
    }

    .search-breadcrumb a,
    .search-breadcrumb .breadcrumb-active {
        font-size: 0.625rem;
    }

    .search-breadcrumb .issue-nav-buttons .btn,
    .search-breadcrumb .volume-nav-buttons .btn {
        padding: 0.15rem 0.25rem;
        font-size: 0.5625rem;
    }
}

/* Issue number cell - same size as other text, just bold */
.results-table .issue-cell {
    font-weight: 700;
    color: var(--gray-800);
}

/* Read-only input styling */
input[readonly] {
    background: var(--gray-100);
    cursor: default;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.pagination .btn {
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
}

.pagination-ellipsis {
    padding: 0 0.5rem;
    color: var(--gray-500);
}

.pagination-info {
    /* v2.12.5 — sits inline right after the Next button (was margin-left:auto,
       which pushed it to the far right and wasted the row). */
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* v2.12.5 — trailing slot on the far right of the pagination row, where the
   item-count used to live. Hosts the bulk-action buttons (Quick Add / Delete /
   Add Unlisted) so they no longer need their own row. */
.pagination-trailing {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Single-page results: no page buttons, but still right-align the controls. */
.pagination.pagination-controls-only {
    justify-content: flex-end;
}

/* Issue Filter */
.issue-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--gray-50), white);
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.issue-filter label {
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.875rem;
}

.issue-filter input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

/* Filter Checkbox */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gray-700);
    user-select: none;
}

.filter-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

/* Results count badge */
.results-count {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

@media (max-width: 640px) {
    .pagination {
        justify-content: center;
    }

    .pagination-info {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .issue-filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .issue-filter span[style*="margin-left: auto"] {
        margin-left: 0 !important;
        width: 100%;
        text-align: left;
    }
}

/* Pricing Table */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.pricing-table thead {
    background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
}

.pricing-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--gray-200);
}

.pricing-table tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s ease;
}

.pricing-table tbody tr:hover {
    background: var(--gray-50);
}

.pricing-table tbody tr.highlight {
    background: linear-gradient(135deg, #dbeafe, #e0e7ff);
    font-weight: 500;
}

.pricing-table tbody tr.highlight:hover {
    background: linear-gradient(135deg, #bfdbfe, #c7d2fe);
}

.pricing-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing-table td:first-child {
    color: var(--gray-800);
    max-width: 250px;
    white-space: nowrap;
}

.pricing-table td.positive {
    color: var(--success);
    font-weight: 500;
}

.pricing-table td.negative {
    color: var(--danger);
    font-weight: 500;
}

/* Badge for estimated grade */
.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary);
    color: white;
    border-radius: 1rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.badge-variant {
    background: var(--warning);
    margin-left: 0;
}

/* Standard pills - Purple to match brand */
.badge-standard {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: white;
    margin-left: 0;
}

/* Variant cell in collection table - allow badge text wrapping */
.collection-table .variant-cell .badge-variant,
.collection-table .variant-cell .badge-standard {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    display: inline-block;
    max-width: 100%;
    text-align: center;
}

/* Price cell styling */
.price-cell {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-weight: 600;
    color: var(--success);
}

/* Interpolated price styling - orange to indicate calculated value */
.price-cell.interpolated-price,
.interpolated-price {
    color: var(--interpolated) !important;
    font-weight: 500;
}

/* Scan cover match confidence dot */
.scan-match-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}
.scan-match-dot.scan-match-high {
    background: var(--green-500, #22c55e);
}
.scan-match-dot.scan-match-medium {
    background: var(--orange-400, #fb923c);
}

/* Base edition row highlighting */
.results-table tr.base-edition {
    background: rgba(22, 163, 74, 0.08);
}

.results-table tr.base-edition:hover {
    background: rgba(22, 163, 74, 0.15);
}

/* Variant header styling */
.variant-header {
    border: 1px solid var(--gray-200);
}

.variant-header img {
    box-shadow: var(--shadow);
}

/* Filter checkbox styling */
.filter-checkbox {
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.filter-checkbox input {
    margin-right: 0.375rem;
    cursor: pointer;
}

/* Pricing Summary Box */
.pricing-summary {
    background: var(--gray-100);
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-top: 1rem;
}

/* =============================================
   PRICING TABLE RESPONSIVE BREAKPOINTS
   Consistent font sizing at each screen size
   ============================================= */

/* iPad horizontal (1024px-1199px) */
@media (max-width: 1199px) {
    .pricing-table th,
    .pricing-table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }

    .pricing-table th {
        font-size: 0.6875rem;
    }
}

/* Progressive shrinking (900px-1023px) */
@media (max-width: 1023px) {
    .pricing-table th,
    .pricing-table td {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }

    .pricing-table th {
        font-size: 0.625rem;
    }
}

/* iPad vertical (768px-899px) */
@media (max-width: 899px) {
    .pricing-table th,
    .pricing-table td {
        padding: 0.4375rem 0.5rem;
        font-size: 0.6875rem;
    }

    .pricing-table th {
        font-size: 0.5625rem;
    }
}

/* Tablet/horizontal iPhone (640px-768px) */
@media (max-width: 768px) {
    .pricing-table th,
    .pricing-table td {
        padding: 0.375rem 0.4375rem;
        font-size: 0.625rem;
    }

    .pricing-table th {
        font-size: 0.5rem;
    }
}

@media (max-width: 640px) {
    .pricing-table th,
    .pricing-table td {
        padding: 0.3125rem 0.375rem;
        font-size: 0.5625rem;
    }

    .pricing-table th {
        font-size: 0.4375rem;
    }

    .pricing-table th:nth-child(5),
    .pricing-table td:nth-child(5) {
        display: none; /* Hide Premium % on mobile */
    }

    .pricing-summary > div {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .pricing-table th,
    .pricing-table td {
        padding: 0.25rem 0.3125rem;
        font-size: 0.5rem;
    }

    .pricing-table th {
        font-size: 0.375rem;
    }

    .pricing-table td:first-child {
        max-width: 100px;
    }
}

/* Comic Detail Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 600px;
    /* v2.11.42 — pixel-pinned via JS (--modal-max-h = window.innerHeight*0.9).
       Prevents iOS Safari "stretching" when a forced reflow re-evaluates vh.
       Falls back to 90vh if JS hasn't set the variable yet. */
    max-height: var(--modal-max-h, 90vh);
    overflow-y: auto;
    z-index: 1001;
    padding: 2rem;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: var(--gray-100);
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.modal-header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--gray-100);
}

.modal-header img {
    width: 120px;
    height: 180px;
    object-fit: cover;
    object-position: top;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.modal-cover-container {
    position: relative;
    flex-shrink: 0;
}

.modal-cover-container img {
    width: 120px;
    height: 180px;
}

.modal-cover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 0 0 0.5rem 0.5rem;
}

.modal-cover-container:hover .modal-cover-overlay {
    opacity: 1;
}

.cover-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--gray-700);
}

.cover-upload-btn:hover {
    background: white;
    transform: scale(1.1);
    color: var(--primary);
}

.modal-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-info h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.modal-section {
    margin-bottom: 1.5rem;
}

.modal-section h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.modal-stat {
    background: var(--gray-50);
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}

.modal-stat-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.6875rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

.modal-stat-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-800);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.option-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--gray-100);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

.option-tag.selected {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: var(--success);
    border-color: var(--success);
}

.option-tag.unselected {
    background: var(--gray-50);
    color: var(--gray-500);
    border-color: var(--gray-200);
    opacity: 0.7;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--gray-100);
}

.modal-actions .btn {
    flex: 1;
}

@media (max-width: 640px) {
    .modal-content {
        padding: 1.5rem;
    }

    .modal-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .modal-info {
        align-items: center;
    }

    .modal-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-actions {
        flex-direction: column;
    }
}

/* =====================================================================
   Analyze Page - Inline Filter Dropdowns
   Three always-visible dropdowns (Language, Type, Publisher) between
   the search box and results. Language and Publisher use searchable
   custom dropdowns; Type uses a standard <select>.
   ===================================================================== */
.analyze-filter-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-top: 0.75rem;
}

.analyze-filter-row .filter-group {
    flex: 1;
    min-width: 0;
}

.analyze-filter-row .filter-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.analyze-filter-row select,
.analyze-filter-row .searchable-select input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: white;
    color: var(--gray-800);
    line-height: 1.4;
    box-sizing: border-box;
}

.analyze-filter-row select:focus,
.analyze-filter-row .searchable-select input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}

/* Searchable select component */
.searchable-select {
    position: relative;
}

.searchable-select input {
    padding-right: 1.75rem !important; /* Space for clear button */
}

.searchable-select-clear {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-200);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.searchable-select-clear:hover {
    background: var(--gray-300);
    color: var(--gray-800);
}

.searchable-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--gray-300);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.searchable-select-dropdown .option {
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gray-800);
}

.searchable-select-dropdown .option:hover {
    background: var(--gray-100);
}

.searchable-select-dropdown .option:first-child {
    color: var(--gray-500);
    font-style: italic;
}

/* Responsive: stack vertically on mobile */
@media (max-width: 639px) {
    .analyze-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .analyze-filter-row .filter-group {
        flex: none;
    }
}

/* Collection Filter Row Layout */
.collection-filter-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Filter Grid - responsive layout for filter dropdowns */
.collection-filters-grid {
    display: flex;
    flex: 1;
    gap: 0.5rem;
    align-items: center;
}

/* Large screens: all filters on one evenly distributed line */
@media (min-width: 1024px) {
    .collection-filters-grid {
        justify-content: space-between;
    }

    .collection-filters-grid select {
        flex: 1;
        min-width: 0;
        max-width: 145px;
        padding: 0.5rem 0.375rem;
    }

    .collection-filters-grid .price-filter {
        flex: 0 0 auto;
    }
}

/* Uniform font-size for all filter controls (selects, inputs, search, buttons) */
.collection-filters-grid select,
.collection-filters-grid .price-filter input,
#collection-search,
.collection-search-filters select,
.collection-search-filters .btn {
    font-size: 0.875rem;
}

@media (max-width: 1024px) {
    .collection-filters-grid select,
    .collection-filters-grid .price-filter input,
    #collection-search,
    .collection-search-filters select,
    .collection-search-filters .btn {
        font-size: 0.8125rem;
    }
}

@media (max-width: 768px) {
    .collection-filters-grid select,
    .collection-filters-grid .price-filter input,
    #collection-search,
    .collection-search-filters select,
    .collection-search-filters .btn {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .collection-filters-grid select,
    .collection-filters-grid .price-filter input,
    #collection-search,
    .collection-search-filters select,
    .collection-search-filters .btn {
        font-size: 0.8125rem;
    }
}

@media (max-width: 375px) {
    .collection-filters-grid select,
    .collection-filters-grid .price-filter input,
    #collection-search,
    .collection-search-filters select,
    .collection-search-filters .btn {
        font-size: 0.75rem;
    }
}

/* Medium screens: 2 per row grid */
@media (min-width: 640px) and (max-width: 1023px) {
    .collection-filter-row {
        flex-wrap: wrap;
    }

    .collection-filters-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .collection-filters-grid select {
        width: 100%;
        max-width: none;
    }

    .collection-filters-grid .price-filter {
        width: 100%;
    }

    .collection-filters-grid .price-filter .price-input-wrapper {
        flex: 1;
    }

    .collection-filters-grid .price-filter input {
        width: 100%;
        min-width: 0;
    }
}

/* Small screens: 2-per-row grid instead of single column */
@media (max-width: 639px) {
    .collection-filter-row {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .collection-filters-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .collection-filters-grid select {
        width: 100%;
        max-width: none;
    }

    .collection-filters-grid .price-filter {
        grid-column: 1 / -1;
        width: 100%;
    }

    .collection-filters-grid .price-filter .price-input-wrapper {
        flex: 1;
    }

    .collection-filters-grid .price-filter input {
        width: 100%;
        min-width: 0;
    }
}

/* Price separator styling */
.price-separator {
    color: var(--gray-500);
    flex-shrink: 0;
}

/* View Toggle Buttons */
.view-toggle {
    display: flex;
    gap: 0.25rem;
    background: var(--gray-100);
    padding: 0.25rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    /* v2.11.12 — view-toggle is its own row above the filter dropdowns at every
       viewport. fit-content keeps the pill narrow; `margin: 0 auto 0.75rem`
       centers it horizontally in the card's block-flow context (v2.11.13). */
    width: fit-content;
    margin: 0 auto 0.75rem;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--gray-500);
    transition: all 0.2s;
}

.view-btn:hover {
    color: var(--gray-700);
    background: var(--gray-200);
}

.view-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* v2.12.2 — finder toggle sits INLINE in the filter bar (not its own centered
   row like Collection). Kill the auto side-margins + bottom margin and shrink
   the buttons so the whole filter row fits one line on horizontal iPad. */
.finder-view-toggle {
    margin: 0;
    padding: 0.15rem;
    gap: 0.15rem;
}
.finder-view-toggle .view-btn {
    width: 30px;
    height: 30px;
}
.finder-view-toggle .view-btn svg {
    width: 16px;
    height: 16px;
}

/* Price Filter */
.price-filter {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.price-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.price-filter input {
    width: 75px;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.75rem 0.5rem 0.5rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    box-sizing: border-box;
    /* Consistent appearance across browsers */
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}

/* Hide default spinner for Chrome/Safari/Edge */
.price-filter input::-webkit-outer-spin-button,
.price-filter input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-clear-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: var(--gray-300);
    color: var(--gray-600);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
}

.price-clear-btn:hover {
    opacity: 1;
    background: var(--gray-400);
    color: white;
}

/* Collection filter grid selects - match standard height */
.collection-filters-grid select {
    height: 2.75rem;
    min-height: 2.75rem;
}

/* Inputs and buttons match select font-size at all breakpoints */
#collection-search {
    font-size: 0.875rem;
}

/* Collection List View */
.collection-list {
    display: block !important;
    width: 100%;
}

/* Top N Filter Row */
.top-n-filter-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.top-n-btn {
    flex: 1;
    padding: 0.5rem 0.25rem;
    border: none;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
}

.top-n-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
}

.top-n-btn.active {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #ea580c;
}

@media (max-width: 480px) {
    .top-n-filter-row {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .top-n-btn {
        flex: 1 1 calc(33.333% - 0.25rem);
        min-width: 0;
        font-size: 0.75rem;
        padding: 0.5rem 0.125rem;
    }
}

@media (max-width: 375px) {
    .top-n-btn {
        font-size: 0.6875rem;
        padding: 0.4375rem 0.125rem;
    }
}

/* Collection Search Container */
.collection-search-container {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: nowrap;
}

.collection-search-input {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 0.5rem;
}

.collection-search-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

/* Both filter dropdowns same width — wider to show full text */
.collection-search-filters select.search-filter-select {
    width: 9rem;
    min-width: 9rem;
}

.collection-search-filters .form-group {
    flex-shrink: 1;
    min-width: 0;
}

.collection-search-filters .form-group select {
    max-width: 100%;
}

/* Clear Filters responsive */
.collection-clear-filters-btn {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-criteria search filters (v2.11.0) — stacked rows, all equal precedence */
.collection-filters-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.collection-filter-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
}

.collection-filter-row select.search-filter-select {
    width: 9rem;
    min-width: 9rem;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.collection-filter-value {
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    background: white;
    color: var(--gray-800);
    font-size: 0.875rem;
}

.collection-filter-remove {
    flex-shrink: 0;
    padding: 0.5rem 0.625rem;
    height: 2.5rem;
}

.collection-filter-remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.collection-filters-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.collection-add-filter-btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.collection-filters-count {
    font-size: 0.875rem;
    color: var(--gray-500);
    white-space: nowrap;
}

/* Responsive: stack to 2x2 grid below 1023px, full single-column below 639px */
@media (max-width: 1023px) {
    .collection-filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "match field remove"
            "value value value";
        gap: 0.5rem;
    }
    .collection-filter-row select.search-filter-select:nth-of-type(1) { grid-area: match; width: 100%; min-width: 0; }
    .collection-filter-row select.search-filter-select:nth-of-type(2) { grid-area: field; width: 100%; min-width: 0; }
    .collection-filter-row .collection-filter-value { grid-area: value; }
    .collection-filter-row .collection-filter-remove { grid-area: remove; }
}

@media (max-width: 639px) {
    .collection-filter-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "match remove"
            "field field"
            "value value";
    }
}

/* Tablet screens - start shrinking search row */
@media (max-width: 1024px) {
    .collection-search-container {
        gap: 0.5rem;
    }

    .collection-search-filters {
        gap: 0.5rem;
    }

    .collection-search-filters .form-group select,
    #collection-search,
    .price-filter input,
    .collection-search-filters .btn {
        font-size: 0.8125rem;
    }

    .collection-search-filters .form-group select,
    .collection-search-filters .btn {
        padding: 0.5rem 0.5rem;
    }
}

/* Tablets and smaller - search field gets its own row, filters fill below */
@media (max-width: 768px) {
    .collection-search-container {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .collection-search-input {
        flex: 1 0 100%;
    }

    .collection-search-filters {
        flex: 1 0 100%;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .collection-search-filters .form-group {
        flex: 1;
        min-width: 0;
    }

    .collection-search-filters select.search-filter-select {
        width: 100%;
        min-width: 0;
    }

    .collection-search-filters .btn {
        flex-shrink: 1;
        padding: 0.5rem 0.5rem;
        font-size: 0.8125rem;
    }
}

/* Phones - padding only (font-size handled by unified rules above) */
@media (max-width: 480px) {
    .collection-search-filters .form-group select {
        padding: 0.375rem 0.25rem;
    }

    .collection-search-filters .btn {
        padding: 0.375rem 0.375rem;
    }

    #search-results-count {
        font-size: 0.75rem !important;
    }
}

/* Very small phones - padding only */
@media (max-width: 375px) {
    .collection-search-filters .form-group select {
        padding: 0.25rem 0.1875rem;
    }

    .collection-search-filters .btn {
        padding: 0.25rem 0.25rem;
    }
}

.collection-table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    background: white;
}

/* Ensure table corners stay rounded - apply to first/last cells */
.collection-table thead tr th:first-child {
    border-top-left-radius: 0.75rem;
}
.collection-table thead tr th:last-child {
    border-top-right-radius: 0.75rem;
}
.collection-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.75rem;
}
.collection-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.75rem;
}

.collection-table thead {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.collection-table th {
    padding: clamp(0.625rem, 1vw + 0.4rem, 1.25rem) clamp(0.25rem, 0.5vw + 0.1rem, 1rem);
    text-align: left;
    font-weight: 600;
    color: white;
    font-size: clamp(0.625rem, 0.3vw + 0.55rem, 0.8125rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
}

/* Checkbox cells for collection table - centered alignment */
.collection-table .checkbox-cell,
.collection-table th:first-child {
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.collection-table .checkbox-cell input[type="checkbox"],
.collection-table th input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.collection-table th.sortable-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.collection-table th.sortable-header:hover,
.collection-table th.sortable-header:active {
    background: rgba(255, 255, 255, 0.1);
}

.collection-table tbody tr {
    background: white;
    transition: all 0.2s;
}

.collection-table tbody tr:nth-child(even) {
    background: var(--gray-50);
}

.collection-table tbody tr:hover {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.collection-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.collection-table .cover-cell {
    padding: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.25rem;
}

.collection-table .cover-cell img {
    width: 100%;
    max-width: 50px;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: top;
    border-radius: 0.25rem;
    box-shadow: var(--shadow-sm);
}

.collection-table .title-cell {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    padding-left: 0;
}

.collection-table .price-cell {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

/* "est" label under estimated grades — larger on laptop, shrinks on mobile */
.grade-est-label {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* Uniform styling for all value cells (dollars + percentage changes) */
.collection-table .price-cell,
.collection-table td.positive,
.collection-table td.negative,
.collection-table .change-cell {
    font-weight: 600;
}

/* Status cell - allow pills to wrap and display without being cut off */
.collection-table .status-cell {
    white-space: normal;
    overflow: visible;
    line-height: 1.6;
}

.collection-table .status-cell .comic-card-badge {
    display: inline-block;
    margin-bottom: 2px;
}

.collection-table .positive {
    color: var(--success);
}

.collection-table .negative {
    color: var(--danger);
}

/* iPad horizontal (1024px-1199px) - column widths controlled by column-widths.css */
@media (max-width: 1199px) {
    .collection-table th,
    .collection-table td {
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
    }

    .collection-table th {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
        font-size: 0.75rem;
    }

    .collection-table .cover-cell {
        padding: 0.375rem;
    }

    .collection-table .comic-card-badge {
        padding: 0.1875rem 0.375rem;
        font-size: 0.8125rem;
    }

    .collection-table .variant-cell .badge-variant,
    .collection-table .variant-cell .badge-standard {
        font-size: 0.5625rem;
        padding: 0.1875rem 0.375rem;
    }
}

/* Progressive font shrinking starting at 1023px - column widths controlled by column-widths.css */
@media (max-width: 1023px) {
    .collection-table th,
    .collection-table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }

    .collection-table th {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 0.6875rem;
    }

    .collection-table .cover-cell {
        padding: 0.25rem;
    }

    .collection-table .comic-card-badge {
        padding: 0.1875rem 0.3125rem;
        font-size: 0.75rem;
    }

    .collection-table .variant-cell .badge-variant,
    .collection-table .variant-cell .badge-standard {
        font-size: 0.5rem;
        padding: 0.1875rem 0.3125rem;
    }

    .collection-table .price-cell,
    .collection-table td.positive,
    .collection-table td.negative,
    .collection-table .change-cell {
        font-size: 0.75rem;
    }
}

/* iPad vertical (768px-899px) - column widths controlled by column-widths.css */
@media (max-width: 899px) {
    .collection-table th,
    .collection-table td {
        padding: 0.375rem 0.25rem;
        font-size: 0.75rem;
    }

    .collection-table th {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 0.6875rem;
        letter-spacing: 0.02em;
    }

    .collection-table .cover-cell {
        padding: 0.25rem;
        padding-right: 0.375rem;
    }

    /* Bump up values for readability on vertical iPad */
    .collection-table .price-cell,
    .collection-table td.positive,
    .collection-table td.negative,
    .collection-table .change-cell {
        font-size: 0.75rem;
    }

    /* Shrink publisher/year text */
    .collection-table .title-cell span[style*="font-size"] {
        font-size: 0.5625rem !important;
    }

    .collection-table .comic-card-badge {
        padding: 0.1875rem 0.3125rem;
        font-size: 0.75rem;
    }

    .collection-table .variant-cell .badge-variant,
    .collection-table .variant-cell .badge-standard {
        font-size: 0.40625rem;
        padding: 0.09375rem 0.21875rem;
    }
}

/* 768px - column widths controlled by column-widths.css */
@media (max-width: 768px) {
    .collection-table th,
    .collection-table td {
        padding: 0.3125rem 0.1875rem;
        font-size: 0.6875rem;
    }

    .collection-table th {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        font-size: 0.625rem;
    }

    .collection-table .cover-cell {
        padding: 0.125rem;
        padding-right: 0.3125rem;
    }

    .collection-table .comic-card-badge {
        padding: 0.125rem 0.1875rem;
        font-size: 0.5625rem;
    }

    .collection-table .price-cell,
    .collection-table td.positive,
    .collection-table td.negative,
    .collection-table .change-cell {
        font-size: 0.6875rem;
    }

    .collection-table .variant-cell .badge-variant,
    .collection-table .variant-cell .badge-standard {
        font-size: 0.375rem;
        padding: 0.125rem 0.1875rem;
    }
}

/* 600px - column widths controlled by column-widths.css */
@media (max-width: 600px) {
    .collection-table th,
    .collection-table td {
        padding: 0.25rem 0.1875rem;
        font-size: 0.625rem;
    }

    .collection-table th {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 0.5625rem;
    }

    .collection-table .cover-cell {
        padding: 0.125rem;
        padding-right: 0.25rem;
    }

    .collection-table .comic-card-badge {
        padding: 0.0625rem 0.1875rem;
        font-size: 0.5rem;
    }

    .collection-table .price-cell,
    .collection-table td.positive,
    .collection-table td.negative,
    .collection-table .change-cell {
        font-size: 0.625rem;
    }

    .collection-table .variant-cell .badge-variant,
    .collection-table .variant-cell .badge-standard {
        font-size: 0.375rem;
        padding: 0.0625rem 0.1875rem;
    }
}

/* 480px - column widths controlled by column-widths.css */
@media (max-width: 480px) {
    .collection-table th,
    .collection-table td {
        padding: 0.1875rem 0.125rem;
        font-size: 0.5625rem;
    }

    .collection-table th {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 0.5rem;
        letter-spacing: 0.01em;
    }

    .collection-table .cover-cell {
        padding: 0.0625rem;
        padding-right: 0.1875rem;
    }

    /* Bump up value cells for readability */
    .collection-table .price-cell,
    .collection-table td.positive,
    .collection-table td.negative,
    .collection-table .change-cell {
        font-size: 0.625rem;
    }

    /* Bump up status badges to match value cells */
    .collection-table .comic-card-badge {
        padding: 0.125rem 0.1875rem;
        font-size: 0.625rem;
    }

    /* Shrink publisher/year text */
    .collection-table .title-cell span[style*="font-size"] {
        font-size: 0.5rem !important;
    }

    .collection-table .variant-cell .badge-variant,
    .collection-table .variant-cell .badge-standard {
        font-size: 0.3125rem;
        padding: 0.0625rem 0.125rem;
    }

    /* Smaller checkbox on mobile */
    .collection-table .checkbox-cell input[type="checkbox"],
    .collection-table th input[type="checkbox"] {
        width: 12px;
        height: 12px;
    }

    .collection-table .checkbox-cell,
    .collection-table th:first-child {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* 390px - smallest mobile */
@media (max-width: 390px) {
    .collection-table th,
    .collection-table td {
        padding: 0.125rem 0.0625rem;
        font-size: 0.4375rem;
    }

    .collection-table th {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        font-size: 0.375rem;
    }

    /* Bump up value cells for readability */
    .collection-table .price-cell,
    .collection-table td.positive,
    .collection-table td.negative,
    .collection-table .change-cell {
        font-size: 0.5rem;
    }

    /* Bump up status badges to match value cells */
    .collection-table .comic-card-badge {
        padding: 0.0625rem 0.15625rem;
        font-size: 0.5rem;
    }

    /* Publisher/year text */
    .collection-table .title-cell span[style*="font-size"] {
        font-size: 0.4375rem !important;
    }

    /* Shrink "est" label on small screens */
    .grade-est-label {
        font-size: 0.375rem;
    }

    /* Cover cell needs some padding so title isn't butted against it */
    .collection-table .cover-cell {
        padding: 0.125rem;
        padding-right: 0.25rem;
    }

    /* Ensure variant and variant badges stay small */
    .collection-table .variant-cell .badge-variant,
    .collection-table .variant-cell .badge-standard {
        padding: 0.0625rem 0.125rem;
        font-size: 0.25rem;
    }

    .collection-table .checkbox-cell input[type="checkbox"],
    .collection-table th input[type="checkbox"] {
        width: 10px;
        height: 10px;
    }
}

/* Covers Only View Styles */
.collection-grid.collection-covers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 4px;
}

.cover-only-card {
    position: relative;
    aspect-ratio: 0.65;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    background: var(--gray-800);
}

.cover-only-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s, opacity 0.2s;
}

.cover-only-card:hover img {
    transform: scale(1.05);
}

.cover-only-card .cover-refresh-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.cover-only-card:hover .cover-refresh-btn {
    opacity: 1;
}

.cover-only-card .cover-refresh-btn svg {
    width: 100%;
    height: 100%;
    fill: white;
}

.cover-only-card .cover-refresh-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Covers quantity badge - Same teal/cyan as copies-badge for consistency */
.covers-quantity-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}

.covers-grade-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Covers view selection checkbox — hidden until hover/touch */
.cover-only-checkbox {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s;
}

.cover-only-card:hover .cover-only-checkbox,
.cover-only-checkbox:focus-within {
    opacity: 1;
}

/* Always show if checked */
.cover-only-checkbox:has(input:checked) {
    opacity: 1;
}

.cover-only-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
    /* Subtle shadow so checkbox is visible against any cover */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Touch devices: show on touch via active state */
@media (hover: none) {
    .cover-only-checkbox {
        opacity: 1;
    }
}

/* ==========================================
   FINDER COVERS VIEW (v2.12.0)
   Reuses .cover-only-card / .collection-covers; adds an ownership-badge
   overlay (top-right) and an issue-# caption (bottom gradient) so the
   covers view of a finder issue-list still surfaces what you own + the
   issue number. Shared by all finder tabs + the variant flow.
   ========================================== */
.finder-cover-card .finder-cover-badges {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
    z-index: 9;
    pointer-events: none;
    max-width: calc(100% - 8px);
}

/* Compact the inline issue-ownership badges for the overlay context */
.finder-cover-card .finder-cover-badges .issue-ownership-badges {
    display: contents;
}
.finder-cover-card .finder-cover-badges .ownership-badge,
.finder-cover-card .finder-cover-badges .comic-card-badge {
    font-size: 0.625rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.finder-cover-card .finder-cover-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.375rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: white;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}
.finder-cover-card .finder-cover-caption .key-issue-icon svg {
    width: 11px;
    height: 11px;
}

/* Owned cards get a subtle ring so ownership reads at a glance in the wall */
.finder-cover-card:has(.ownership-badge.owned),
.finder-cover-card:has(.ownership-badge.needs-details) {
    outline: 2px solid var(--success, #16a34a);
    outline-offset: -2px;
}

/* Responsive adjustments for covers view */
/* Tablet breakpoint at 600px (not 768px) so iPad portrait keeps the larger 120px covers */
@media (max-width: 600px) {
    .collection-grid.collection-covers {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 3px;
    }
}

@media (max-width: 480px) {
    .collection-grid.collection-covers {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 2px;
    }
}

/* Grouped View Styles */
.collection-grid.collection-grouped {
    display: block;
}

.grouped-collection {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.group-publisher {
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    width: 100%;
}

.group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.group-header:hover {
    background: var(--gray-50);
}

.group-header.publisher-header {
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: white;
}

.group-header.publisher-header:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9);
}

.series-header {
    background: var(--gray-100);
    padding: 0.75rem 1rem;
}

.series-header:hover {
    background: var(--gray-200);
}

.group-toggle {
    font-size: 0.75rem;
    width: 1rem;
    flex-shrink: 0;
}

.group-name {
    font-weight: 600;
    flex-grow: 1;
}

.group-header.publisher-header .group-name {
    font-size: 1.125rem;
}

.series-header .group-name {
    font-size: 0.9375rem;
}

.group-stats {
    font-size: 0.75rem;
    opacity: 0.8;
    white-space: nowrap;
}

.group-content {
    padding: 0.5rem;
    background: var(--gray-50);
}

.group-series {
    margin-bottom: 0.5rem;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.group-series:last-child {
    margin-bottom: 0;
}

.group-comics-table {
    width: 100%;
    overflow-x: auto;
}

.group-comics-table .collection-table {
    margin: 0;
    border-radius: 0;
    table-layout: auto;
    width: 100%;
}

.group-comics-table .collection-table th {
    background: linear-gradient(135deg, var(--gray-700), var(--gray-800));
    color: white;
    font-size: 0.7rem;
    padding: 0.5rem 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.group-comics-table .collection-table td {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Column alignment for grouped table - auto layout with minimum widths */
/* Columns: 1=Checkbox, 2=Cover, 3=Title, 4=Variant, 5=Grade, 6=Value, 7=Change, 8=Invested, 9=Current ROI, 10=Potential ROI, 11=Status */
/* Left-justify all columns except Cover */
.group-comics-table .collection-table th:nth-child(1),
.group-comics-table .collection-table td:nth-child(1) {
    width: 40px; /* Checkbox - fixed */
    text-align: center;
}

.group-comics-table .collection-table th:nth-child(2),
.group-comics-table .collection-table td:nth-child(2) {
    width: 55px; /* Cover - fixed */
}

.group-comics-table .collection-table th:nth-child(3),
.group-comics-table .collection-table td:nth-child(3) {
    text-align: left; /* Title */
}

.group-comics-table .collection-table th:nth-child(4),
.group-comics-table .collection-table td:nth-child(4) {
    text-align: left; /* Variant */
}

.group-comics-table .collection-table th:nth-child(5),
.group-comics-table .collection-table td:nth-child(5) {
    text-align: left; /* Grade */
}

.group-comics-table .collection-table th:nth-child(6),
.group-comics-table .collection-table td:nth-child(6) {
    text-align: left; /* Value */
}

.group-comics-table .collection-table th:nth-child(7),
.group-comics-table .collection-table td:nth-child(7) {
    text-align: left; /* Change */
}

.group-comics-table .collection-table th:nth-child(8),
.group-comics-table .collection-table td:nth-child(8) {
    text-align: left; /* Invested */
}

.group-comics-table .collection-table th:nth-child(9),
.group-comics-table .collection-table td:nth-child(9) {
    text-align: left; /* Current ROI */
}

.group-comics-table .collection-table th:nth-child(10),
.group-comics-table .collection-table td:nth-child(10) {
    text-align: left; /* Potential ROI */
}

.group-comics-table .collection-table th:nth-child(11),
.group-comics-table .collection-table td:nth-child(11) {
    text-align: left; /* Status */
}

.group-comics-table .collection-table .cover-cell {
    padding: 0.25rem 0.375rem;
    position: relative;
    overflow: hidden;
    background: var(--gray-100);
    vertical-align: top;
}


.group-comics-table .collection-table .cover-cell img {
    width: 100%;
    max-width: 42px;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: top;
    position: relative;
    z-index: 1;
    display: block;
}

.group-comics-table .collection-table .title-cell {
    font-size: 0.8125rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

/* =============================================
   GROUP COMICS TABLE RESPONSIVE BREAKPOINTS
   Consistent font sizing at each screen size
   ============================================= */

/* iPad horizontal (1024px-1199px) - column widths controlled by column-widths.css */
@media (max-width: 1199px) {
    .group-comics-table .collection-table th {
        padding: 0.4375rem 0.4375rem;
        font-size: 0.625rem;
    }

    .group-comics-table .collection-table td {
        padding: 0.3125rem 0.4375rem;
        font-size: 0.75rem;
    }

    .group-comics-table .collection-table .title-cell {
        font-size: 0.75rem;
    }

    .group-comics-table .collection-table .variant-cell .badge-variant,
    .group-comics-table .collection-table .variant-cell .badge-standard {
        font-size: 0.5rem;
        padding: 0.125rem 0.25rem;
    }
}

/* Progressive shrinking (900px-1023px) - column widths controlled by column-widths.css */
@media (max-width: 1023px) {
    .group-comics-table .collection-table th {
        padding: 0.375rem 0.375rem;
        font-size: 0.5625rem;
    }

    .group-comics-table .collection-table td {
        padding: 0.25rem 0.375rem;
        font-size: 0.6875rem;
    }

    .group-comics-table .collection-table .title-cell {
        font-size: 0.6875rem;
    }

    .group-comics-table .collection-table .variant-cell .badge-variant,
    .group-comics-table .collection-table .variant-cell .badge-standard {
        font-size: 0.4375rem;
        padding: 0.0625rem 0.1875rem;
    }
}

/* iPad vertical (768px-899px) - column widths controlled by column-widths.css */
@media (max-width: 899px) {
    .group-header {
        padding: 0.75rem 0.875rem;
    }

    .group-header.publisher-header .group-name {
        font-size: 1.0625rem;
    }

    .group-stats {
        font-size: 0.625rem;
    }

    .group-comics-table .collection-table th {
        padding: 0.3125rem 0.3125rem;
        font-size: 0.5rem;
    }

    .group-comics-table .collection-table td {
        padding: 0.25rem 0.3125rem;
        font-size: 0.625rem;
    }

    .group-comics-table .collection-table .title-cell {
        font-size: 0.625rem;
    }

    .group-comics-table .collection-table .variant-cell .badge-variant,
    .group-comics-table .collection-table .variant-cell .badge-standard {
        font-size: 0.375rem;
        padding: 0.0625rem 0.125rem;
    }
}

/* 768px - column widths controlled by column-widths.css */
@media (max-width: 768px) {
    .group-header {
        padding: 0.75rem 0.875rem;
    }

    .group-header.publisher-header .group-name {
        font-size: 1rem;
    }

    .group-stats {
        font-size: 0.5625rem;
    }

    .group-comics-table .collection-table {
        table-layout: auto;
    }

    .group-comics-table {
        overflow-x: hidden;
    }

    .group-comics-table .collection-table th {
        padding: 0.25rem 0.25rem;
        font-size: 0.4375rem;
    }

    .group-comics-table .collection-table td {
        padding: 0.1875rem 0.25rem;
        font-size: 0.5625rem;
    }

    .group-comics-table .collection-table .title-cell {
        font-size: 0.5625rem;
    }

    .group-comics-table .collection-table .variant-cell .badge-variant,
    .group-comics-table .collection-table .variant-cell .badge-standard {
        font-size: 0.3125rem;
        padding: 0.0625rem 0.125rem;
    }

    .group-comics-table .collection-table .comic-card-badge {
        font-size: 0.3125rem;
        padding: 0.0625rem 0.125rem;
    }
}

/* 600px - column widths controlled by column-widths.css */
@media (max-width: 600px) {
    .group-header {
        padding: 0.625rem 0.75rem;
    }

    .group-header.publisher-header .group-name {
        font-size: 0.9375rem;
    }

    .group-stats {
        font-size: 0.5rem;
    }

    .group-comics-table .collection-table th,
    .group-comics-table .collection-table td {
        padding: 0.1875rem 0.1875rem;
        font-size: 0.5rem;
    }

    .group-comics-table .collection-table th {
        font-size: 0.375rem;
    }

    .group-comics-table .collection-table .title-cell {
        font-size: 0.5rem;
    }

    .group-comics-table .collection-table .variant-cell .badge-variant,
    .group-comics-table .collection-table .variant-cell .badge-standard {
        font-size: 0.3125rem;
        padding: 0.0625rem 0.0625rem;
    }
}

/* 480px - column widths controlled by column-widths.css */
@media (max-width: 480px) {
    .group-header {
        padding: 0.5rem 0.625rem;
    }

    .group-header.publisher-header .group-name {
        font-size: 0.875rem;
    }

    .group-stats {
        font-size: 0.4375rem;
    }

    .group-comics-table .collection-table th,
    .group-comics-table .collection-table td {
        padding: 0.125rem 0.125rem;
        font-size: 0.4375rem;
    }

    .group-comics-table .collection-table th {
        font-size: 0.3125rem;
    }

    .group-comics-table .collection-table .title-cell {
        font-size: 0.4375rem;
    }

    .group-comics-table .collection-table .status-cell .comic-card-badge {
        display: none;
    }

    .group-comics-table .collection-table .status-cell .status-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
    }

    .group-comics-table .collection-table .variant-cell .badge-variant,
    .group-comics-table .collection-table .variant-cell .badge-standard {
        font-size: 0.25rem;
        padding: 0.0625rem 0.0625rem;
    }

    .group-comics-table .collection-table .checkbox-cell input[type="checkbox"],
    .group-comics-table .collection-table th input[type="checkbox"] {
        width: 10px;
        height: 10px;
    }

    .group-comics-table .collection-table .checkbox-cell,
    .group-comics-table .collection-table th:first-child {
        padding-left: 0.1875rem;
        padding-right: 0.1875rem;
    }
}

/* Status Dots - Hidden by default, shown on mobile */
.status-dot {
    display: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}

.status-dot-yes {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.status-dot-no {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

/* Graded status dot - Orange to match logo */
.status-dot-graded {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 0 4px rgba(249, 115, 22, 0.5);
}

.status-dot-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}

.status-dot-pending {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.5);
}

/* ==========================================
   OWNERSHIP BADGES (Search Results)
   ========================================== */
.ownership-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.625rem;
    font-weight: 600;
    transition: opacity 0.2s ease-in;
    margin-left: 0.5rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ownership-badge.owned {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: var(--success);
    border: 1px solid var(--success);
}

/* Wanted with PriceCharting ID - Green Star */
.ownership-badge.wanted {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: var(--success);
    border: 1px solid var(--success);
}

/* Wanted without PriceCharting ID - Yellow Star, dashed = unidentified */
.ownership-badge.wanted-needs-details {
    background: linear-gradient(135deg, #fef9c3, #fef08a);
    color: #a16207;
    border: 1px dashed #eab308;
}

/* Needs pricing verification - yellow checkmark, dashed = unidentified */
.ownership-badge.needs-details {
    background: linear-gradient(135deg, #fef9c3, #fef08a);
    color: #a16207;
    border: 1px dashed #eab308;
}

/* Small indicator for mixed verified/unverified copies, dashed = unidentified */
.ownership-badge.needs-details-indicator {
    background: linear-gradient(135deg, #fef9c3, #fef08a);
    color: #a16207;
    border: 1px dashed #eab308;
    padding: 0.125rem 0.25rem;
    margin-left: 0.125rem;
    font-size: 0.5rem;
}

/* Duplicates badge - text only, no pill background */
.ownership-badge.duplicates {
    background: none;
    border: none;
    padding: 0.125rem 0.25rem;
}

/* Highlight owned rows in search results */
.search-result-row.owned-comic {
    background: rgba(34, 197, 94, 0.08);
}

.search-result-row.owned-comic td {
    border-bottom-color: #c4b5fd; /* Light brand purple separator for consistency */
}

.search-result-row.owned-comic:hover {
    background: rgba(34, 197, 94, 0.15);
}

/* Grey out unselected variants when one is selected */
.search-result-row.deselected-variant {
    opacity: 0.5;
    background: var(--gray-50);
}

.search-result-row.deselected-variant:hover {
    opacity: 0.75;
    background: var(--gray-100);
}

.search-result-row.deselected-variant .btn {
    opacity: 0.6;
}

/* Highlight selected variant in variant table - must come after deselected for specificity */
.search-result-row.selected-variant {
    background: rgba(102, 126, 234, 0.2) !important;
    border-left: 3px solid var(--primary);
    opacity: 1 !important;
}

.search-result-row.selected-variant:hover {
    background: rgba(102, 126, 234, 0.25) !important;
}

.search-result-row.selected-variant .btn {
    opacity: 1 !important;
}

/* Visual feedback when variant is selected on cover image */
#variant-main-cover.variant-selected {
    box-shadow: 0 0 0 3px var(--primary), 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: box-shadow 0.2s ease;
}

/* Issue cell ownership badge (inline) */
.issue-cell .ownership-badge {
    margin-left: 0.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
}

/* Issue ownership badges container - inline display with gap */
.issue-ownership-badges {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.issue-ownership-badges .ownership-badge {
    margin-left: 0;
}

/* ==========================================
   MULTI-SELECT / BULK MODE STYLES
   ========================================== */

/* Selection Summary Bar */
.selection-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
    color: white;
    position: sticky;
    top: 70px;
    z-index: 50;
}

.selection-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.selection-info .checkmark-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 0.75rem;
}

.selection-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.selection-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.selection-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.selection-actions .btn-primary {
    background: white;
    color: var(--primary);
    border: none;
    font-weight: 600;
}

.selection-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Issue Controls Container */
.issue-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--gray-50), white);
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.issue-controls .issue-filter {
    margin-bottom: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* Range Selector */
.range-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--gray-300);
}

.range-selector label {
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.range-selector input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    width: 60px;
    text-align: center;
}

.range-selector span {
    color: var(--gray-500);
    font-size: 0.875rem;
}

/* Checkbox Cell in Table */
.results-table .checkbox-cell,
.issues-table .checkbox-cell {
    width: 40px;
    min-width: 30px;
    max-width: 40px;
    padding: 0.5rem !important;
    text-align: center;
}

.results-table .checkbox-cell input[type="checkbox"],
.issues-table .checkbox-cell input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--primary);
}

/* Issues Table Column Widths */
.issues-table .cover-cell {
    width: 75px;
    min-width: 50px;
    max-width: 75px;
}

.issues-table .issue-cell {
    width: 216px;
    min-width: 216px;
    max-width: 216px;
}

.issues-table .title-cell {
    width: auto;
    min-width: 594px;
    max-width: 594px;
}

.issues-table[data-table-id="list-items"] .cover-cell {
    width: auto;
    min-width: 40px;
    max-width: 60px;
}

.issues-table[data-table-id="newest-issues"] .title-cell,
.issues-table[data-table-id="list-items"] .title-cell {
    min-width: 0;
    max-width: none;
    width: auto;
}

.issues-table[data-table-id="newest-issues"] .issue-cell,
.issues-table[data-table-id="list-items"] .issue-cell {
    width: auto;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
}

.issues-table[data-table-id="newest-issues"],
.issues-table[data-table-id="list-items"] {
    table-layout: fixed;
    width: 100%;
}

.issues-table td:nth-child(5) {
    /* Month column */
    width: 101px;
    min-width: 45px;
    max-width: 101px;
}

.issues-table td:nth-child(6) {
    /* Year column */
    width: 94px;
    min-width: 45px;
    max-width: 94px;
}

/* Selected Row Styling */
.issue-row.selected {
    background: linear-gradient(135deg, #dbeafe, #e0e7ff) !important;
}

.issue-row.selected:hover {
    background: linear-gradient(135deg, #bfdbfe, #c7d2fe) !important;
}

/* Bulk Warning Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-overlay.active {
    display: flex;
}

.bulk-modal-content {
    /* v2.11.44 — establishes the positioned ancestor for .modal-close. Without
       this, .modal-close (position:absolute) was falling back to the viewport
       as its containing block — placing the X at the SCREEN's top-right
       instead of the modal card's top-right corner. */
    position: relative;
    background: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 600px;
    /* v2.11.42 — see .modal-content comment above */
    max-height: var(--modal-max-h, 90vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bulk-modal-header {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.bulk-modal-header .warning-icon {
    font-size: 1.5rem;
}

.bulk-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.bulk-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.bulk-modal-body p {
    margin: 0 0 1rem 0;
    color: var(--gray-700);
    line-height: 1.6;
}

.bulk-modal-body ul {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
    color: var(--gray-600);
}

.bulk-modal-body ul li {
    margin-bottom: 0.375rem;
}

.bulk-modal-body .note {
    font-size: 0.875rem;
    color: var(--gray-500);
    background: var(--gray-50);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border-left: 3px solid var(--warning);
}

.bulk-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.bulk-modal-footer .btn {
    flex: 1;
}

/* Bulk Delete Confirmation Modal Table (v2.17.32) */
.bulk-delete-table {
    width: 100%;
    border-collapse: collapse;
}

.bulk-delete-table thead th {
    padding: 0.5rem 0.5rem 0.25rem;
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}

.bulk-delete-row {
    border-bottom: 1px solid var(--gray-100);
}

.bulk-delete-row:last-child {
    border-bottom: none;
}

.bulk-delete-check-cell {
    width: 32px;
    padding: 0.625rem 0.5rem;
    vertical-align: middle;
    text-align: center;
}

.bulk-delete-check-cell input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--danger);
}

.bulk-delete-cover-cell {
    width: 50px;
    padding: 0.5rem 0.5rem 0.5rem 0;
    vertical-align: middle;
}

.bulk-delete-cover-cell img {
    width: 42px;
    height: 64px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--gray-200);
}

.bulk-delete-info-cell {
    padding: 0.5rem 0.5rem 0.5rem 0;
    vertical-align: middle;
}

.bulk-delete-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.3;
}

.bulk-delete-edition {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-top: 0.125rem;
}

.bulk-delete-notes {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
    font-style: italic;
    line-height: 1.3;
}

/* Danger button disabled state */
#bulk-delete-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bulk Added Badge */
.badge-bulk {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    margin-left: 0.5rem;
}

/* Bulk Add Modal - Issues List */
.bulk-issues-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
}

.bulk-issue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
}

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

.bulk-issue-info {
    flex: 1;
    min-width: 0;
}

.bulk-issue-info strong {
    display: block;
    font-size: 0.875rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

.bulk-issue-info span {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.bulk-issue-remove {
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.bulk-issue-remove:hover {
    color: var(--danger);
}

.bulk-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Bulk selection in table */
.bulk-selected {
    background: rgba(102, 126, 234, 0.1) !important;
}

.checkbox-cell {
    width: 40px;
    text-align: center;
}

#bulk-add-modal .bulk-modal-header {
    background: var(--primary);
    justify-content: space-between;
}

#bulk-add-modal .bulk-modal-header .modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .selection-summary-bar {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .selection-info {
        width: 100%;
        justify-content: center;
    }

    .selection-actions {
        width: 100%;
        justify-content: center;
    }

    .issue-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .issue-controls .issue-filter {
        width: 100%;
        justify-content: space-between;
    }

    .range-selector {
        padding-left: 0;
        border-left: none;
        padding-top: 0.75rem;
        border-top: 1px solid var(--gray-200);
        width: 100%;
        justify-content: flex-start;
    }

    .bulk-modal-footer {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .selection-actions .btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .range-selector {
        flex-wrap: wrap;
    }

    .range-selector input {
        width: 50px;
    }
}

/* ==========================================
   GLOBAL IMAGE LIGHTBOX
   ========================================== */
/* v2.11.38 — lock background scroll while any foreground overlay is open.
   Uses CSS :has() to scope the lock to body whenever a lightbox, modal,
   or hamburger drawer is active. The background can't be accidentally
   scrolled out from under the foreground UI on touch devices. Older
   browsers without :has() support (Safari <15.4, Firefox <121) leave
   scroll enabled — graceful fallback. */
body:has(.image-lightbox.active),
body:has(.modal.active),
body:has(.modal-overlay.active),
body:has(.nav-menu.active) {
    /* `clip` not `hidden`: hidden makes body a scroll container, which
       breaks `position: sticky` on <header> (sticky reanchors to body
       and sits at its document-top, off-screen below scrollY). `clip`
       prevents overflow without creating a scroll container.
       See v2.11.19 gotcha in CLAUDE.md. */
    overflow-y: hidden;
    overflow-y: clip;
}

.image-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* v2.11.4 — dynamic viewport units track the VISIBLE area on iOS WebKit so
       the overlay doesn't extend under browser chrome (Chrome iOS Split View,
       Safari URL bar collapse, etc.). Browsers without dvh support fall back
       to the 100% line above. */
    width: 100dvw;
    height: 100dvh;
    /* v2.11.37 — iOS Safari has a known bug where 100dvh on a position:fixed
       element doesn't recompute after the URL bar collapses on scroll. The
       lightbox ends up stuck at its initial (smaller, URL-bar-expanded)
       height and the bottom edge lands mid-screen. JS keeps --ios-vh updated
       to window.innerHeight*0.01 (see initIosVhVar in app.js) and we use
       that here as the LAST height declaration so it wins in the cascade
       whenever the variable is defined. Browsers without JS / older
       browsers fall through to the 100dvh / 100% lines above. */
    height: calc(var(--ios-vh, 1vh) * 100);
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.image-lightbox.active {
    display: flex;
}

.image-lightbox img {
    max-height: calc(90vh - 14rem);
    max-width: 90vw;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.image-lightbox .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.image-lightbox .close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Lightbox content wrapper */
.image-lightbox .lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    /* v2.11.42 — see .modal-content comment */
    max-height: var(--lightbox-content-max-h, 95vh);
    overflow: hidden;
}

/* Lightbox info area */
.image-lightbox .lightbox-info {
    text-align: center;
    margin-top: 0.375rem;
    color: white;
}

.image-lightbox .lightbox-title {
    font-size: 1rem;
    font-weight: 600;
    max-width: 80vw;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    text-align: center;
}

.image-lightbox .lightbox-counter {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.125rem;
}

/* Lightbox navigation arrows */
.image-lightbox .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s;
    z-index: 10;
}

.image-lightbox .lightbox-nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
}

.image-lightbox .lightbox-prev {
    left: 1rem;
}

.image-lightbox .lightbox-next {
    right: 1rem;
}

/* Lightbox select button — inside .lightbox-content flow, not absolute */
.image-lightbox .lightbox-select-btn {
    position: static;
    align-self: center;
    margin-top: 0.375rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
    z-index: 10;
}

.image-lightbox .lightbox-select-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
}

/* Mobile adjustments for lightbox navigation */
@media (max-width: 640px) {
    .image-lightbox .lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .image-lightbox .lightbox-prev {
        left: 0.5rem;
    }

    .image-lightbox .lightbox-next {
        right: 0.5rem;
    }

    .image-lightbox .lightbox-select-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .image-lightbox .lightbox-title {
        font-size: 0.875rem;
        max-width: 70vw;
    }
}

/* Lightbox cover source navigation (vertical up/down) */
.image-lightbox .lightbox-cover-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 0.375rem;
    color: white;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    margin: 0.125rem auto;
}

.image-lightbox .lightbox-cover-nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
}

.image-lightbox .lightbox-cover-source {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.125rem 0;
    cursor: default;
}

/* Upload cover button in lightbox */
.image-lightbox .lightbox-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0.25rem auto;
}

.image-lightbox .lightbox-upload-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* "Use This Cover" button — brand orange, same as btn-primary */
.image-lightbox .lightbox-use-cover-btn {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
    margin-top: 0.25rem;
}

.image-lightbox .lightbox-use-cover-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
}

/* Make clickable images show zoom cursor */
.clickable-image,
img[onclick*="openLightbox"] {
    cursor: zoom-in;
}

/* ==========================================
   BACK TO TOP BUTTON
   ========================================== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    /* v2.11.4 — on iOS WebKit (Chrome iOS Split View, Safari with toolbar visible)
       the `bottom` reference is the layout viewport, which extends behind the
       browser's bottom chrome. env(safe-area-inset-bottom) reports that
       inset so we float the button above it. max() preserves the desktop
       2rem baseline when there's no inset. */
    bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
    right: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: 99;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: pulse-glow 2s infinite;
}

/* v2.11.48 — hide while the soft keyboard is up. On iPhone / iPad Split
   View, the layout viewport itself shrinks when the keyboard opens, so
   `bottom: 2rem` ends up just above the keyboard (mid-screen). JS
   toggles this class via the visualViewport.resize handler. */
.back-to-top.keyboard-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
    animation: none;
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(234, 88, 12, 0.7), 0 0 0 8px rgba(245, 158, 11, 0.15);
    }
}

@media (max-width: 480px) {
    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }

    .back-to-top svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================
   BROWSE BY PUBLISHER
   ========================================== */

.alphabet-btn {
    transition: all 0.2s ease;
}

.alphabet-btn:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary) !important;
}

.alphabet-btn.active,
.alphabet-btn[style*="background: var(--primary)"] {
    font-weight: 600;
}

.publisher-card {
    transition: all 0.2s ease;
}

.publisher-card:hover {
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.breadcrumb-item {
    transition: color 0.2s ease;
}

.breadcrumb-item:hover {
    text-decoration: underline;
}

#browse-results .results-table {
    margin-top: 0;
}

/* Mobile responsive for alphabet */
@media (max-width: 640px) {
    #browse-alphabet {
        gap: 0.125rem !important;
    }

    #browse-alphabet .alphabet-btn {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.75rem !important;
    }

    #browse-alphabet .alphabet-btn-all {
        padding: 0 0.5rem !important;
    }
}

/* ==========================================
   ADMIN STICKY TABS
   ========================================== */
.admin-tabs {
    background: var(--gray-800);
    padding: 0.5rem 0;
    margin-bottom: 2rem;
    position: sticky;
    top: 95px; /* Below main header (83px logo + 12px padding) */
    z-index: 90;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-tabs .container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-tabs .container::-webkit-scrollbar {
    display: none;
}

.admin-tabs a {
    color: var(--gray-300);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.admin-tabs a:hover {
    background: var(--gray-700);
    color: white;
}

.admin-tabs a.active {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
}

@media (max-width: 768px) {
    .admin-tabs {
        top: 95px; /* Same header height on tablet */
    }

    .admin-tabs a {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .admin-tabs {
        top: 95px; /* Same header height on mobile (icon logo is same 83px) */
    }

    .admin-tabs a {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ==========================================
   API ATTRIBUTION (Required by Metron CC BY-SA 4.0)
   ========================================== */
.api-attribution {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-align: right;
    padding: 0.5rem 1rem;
    display: block;
}

.api-attribution a {
    color: var(--primary);
    text-decoration: none;
}

.api-attribution a:hover {
    text-decoration: underline;
}

/* Attribution in table footers */
.results-table + .api-attribution,
.table-wrapper + .api-attribution {
    margin-top: 0.5rem;
}

/* Attribution in cards/modals */
.card .api-attribution {
    border-top: 1px solid var(--gray-200);
    margin-top: 1rem;
    padding-top: 0.75rem;
}

/* ==========================================
   CREATOR STATS CARDS
   Info cards shown above creator series list
   ========================================== */
.creator-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.creator-stat-card {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--gray-700);
}

.creator-stat-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    margin-bottom: 0.375rem;
}

.creator-stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.creator-stat-detail {
    font-size: 0.75rem;
    color: var(--primary-light, #60a5fa);
}

.creator-credit-type {
    display: block;
    font-size: 0.6875rem;
    color: var(--gray-500);
    font-weight: normal;
    font-style: italic;
    margin-top: 0.125rem;
}

.creator-stat-card[onclick] {
    transition: transform 0.15s, border-color 0.15s;
}

.creator-stat-card[onclick]:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

@media (max-width: 640px) {
    .creator-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   COVER REFRESH BUTTON
   Allows users to refresh wrong covers
   ========================================== */
.cover-cell {
    position: relative;
}

/* v2.3.0: Cover refresh and remove buttons hidden while relying on
   automatic cover fetching (rate limits removed). Uncomment the original
   .cover-refresh-btn display rules below to re-enable if needed. */
.cover-refresh-btn,
.cover-remove-btn {
    display: none !important;
}

.cover-refresh-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
    transition: background 0.2s;
}

.cover-refresh-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.cover-refresh-btn svg {
    width: 12px;
    height: 12px;
    fill: white;
}

.cover-refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Show button on hover over cover cell */
.cover-cell:hover .cover-refresh-btn,
.cover-cell:hover .cover-remove-btn {
    display: flex;
}

/* Cover Remove Button - positioned below refresh button */
.cover-remove-btn {
    position: absolute;
    top: 22px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(180, 50, 50, 0.7);
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
    transition: background 0.2s;
}

.cover-remove-btn:hover {
    background: rgba(200, 30, 30, 0.9);
}

.cover-remove-btn svg {
    width: 12px;
    height: 12px;
    fill: white;
}

.cover-remove-btn.loading svg {
    animation: spin 1s linear infinite;
}

/* Show cover buttons on touch devices (no hover available) */
@media (hover: none) {
    .cover-cell .cover-refresh-btn,
    .cover-cell .cover-remove-btn {
        display: flex;
    }
    .cover-only-card .cover-refresh-btn {
        opacity: 1;
    }
}

/* Admin expand button - invisible by default, shown on row hover */
/* Uses visibility instead of display to reserve space and prevent row jump */
.admin-expand-btn {
    visibility: hidden;
}

/* Show admin expand button on row hover */
tr:hover .admin-expand-btn,
.cover-cell:hover .admin-expand-btn {
    visibility: visible;
}

/* Admin expand button - bottom right of cover cell */
.cover-cell .admin-expand-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 5;
}

/* Admin expand button in checkbox cell - below checkbox */
.checkbox-cell .admin-expand-btn {
    margin-top: 0.25rem;
}

.admin-expand-btn button {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: white;
    font-size: 10px;
    transition: background 0.2s;
}

.admin-expand-btn button:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Hide admin expand on mobile */
@media (max-width: 640px) {
    .admin-expand-btn {
        display: none !important;
    }
}

/* ==========================================
   INLINE EDITING & EDIT SUGGESTIONS
   ========================================== */

/* Editable field styling */
.editable {
    cursor: pointer;
    position: relative;
    display: inline;
}

.edit-icon {
    position: absolute;
    top: -2px;
    right: -14px;
    width: 12px;
    height: 12px;
    color: var(--primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.edit-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.editable:hover .edit-icon {
    opacity: 0.7;
    pointer-events: auto;
}

.editable:hover .edit-icon:hover {
    opacity: 1;
}

.inline-edit-input {
    width: 100%;
    min-width: 3em;
    padding: 0.125rem 0.25rem;
    border: 2px solid var(--primary);
    border-radius: 3px;
    font-size: inherit;
    font-family: inherit;
    background: white;
    box-sizing: border-box;
}

.inline-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Suggest Edit Modal */
#suggest-edit-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

#suggest-edit-modal.show {
    display: flex;
}

#suggest-edit-modal .modal-content {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

#suggest-edit-modal h3 {
    margin: 0 0 1rem 0;
    color: var(--gray-800);
}

#suggest-edit-modal .current-value-display {
    background: var(--gray-50);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

#suggest-edit-modal label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--gray-700);
}

#suggest-edit-modal input,
#suggest-edit-modal textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

#suggest-edit-modal textarea {
    resize: vertical;
    min-height: 60px;
}

#suggest-edit-modal .modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Edit Suggestions List (Admin) */
.suggestions-list {
    max-height: 400px;
    overflow-y: auto;
}

.suggestion-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    align-items: flex-start;
}

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

.suggestion-info {
    flex: 1;
}

.suggestion-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.suggestion-change {
    font-size: 0.875rem;
}

.suggestion-change .old-value {
    color: var(--danger);
    text-decoration: line-through;
}

.suggestion-change .new-value {
    color: var(--success);
    font-weight: 500;
}

.suggestion-reason {
    font-size: 0.75rem;
    color: var(--gray-600);
    font-style: italic;
    margin-top: 0.25rem;
}

.suggestion-actions {
    display: flex;
    gap: 0.25rem;
}

.suggestion-actions button {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.suggestion-actions .btn-approve {
    background: var(--success);
    color: white;
}

.suggestion-actions .btn-reject {
    background: var(--danger);
    color: white;
}

/* ==========================================
   ADMIN SERIES DETAIL PANEL (Expandable Row)
   ========================================== */

/* Expand button in table row */
.series-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--gray-500);
    transition: color 0.15s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.series-expand-btn:hover {
    color: var(--primary);
}

.series-expand-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.series-expand-btn.expanded svg {
    transform: rotate(180deg);
}

/* Detail panel row */
.series-detail-row {
    display: none;
}

.series-detail-row.expanded {
    display: table-row;
}

.series-detail-row td {
    padding: 0 !important;
    background: var(--gray-50);
    border-top: none !important;
}

/* Detail panel container */
.series-detail-panel {
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.series-detail-panel.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: var(--gray-500);
}

.series-detail-panel.loading::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Issue detail row (mirrors series detail row) */
.issue-detail-row {
    display: none;
}

.issue-detail-row.expanded {
    display: table-row;
}

.issue-detail-row td {
    padding: 0 !important;
    background: var(--gray-50);
    border-top: none !important;
}

.issue-detail-panel {
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.issue-detail-panel.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: var(--gray-500);
}

.issue-detail-panel.loading::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 0.5rem;
}

/* Issue ID display in variant links */
.variant-link-series .issue-id {
    font-size: 0.85em;
    color: var(--gray-500);
    margin-left: 0.5rem;
}

/* Toast notifications */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background: var(--success, #22c55e);
}

.toast-error {
    background: var(--danger, #ef4444);
}

.toast-warning {
    background: var(--warning, #f59e0b);
}

.toast-info {
    background: var(--primary, #3b82f6);
}

/* Publisher search typeahead */
.publisher-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.publisher-search-input {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: white;
}

.publisher-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.publisher-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    margin-top: 2px;
}

.publisher-results:empty {
    display: none;
}

.publisher-result-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
}

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

.publisher-result-item:hover {
    background: var(--gray-50);
}

.publisher-result-item .publisher-name {
    font-weight: 500;
}

.publisher-result-item .publisher-id {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.publisher-no-results {
    padding: 0.75rem;
    color: var(--gray-500);
    font-size: 0.875rem;
    text-align: center;
}

.publisher-id-badge {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 3px;
    white-space: nowrap;
}

/* Series search typeahead (for moving issues between series) */
.series-search-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.series-input-container {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.series-search-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: white;
}

.series-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.series-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    margin-top: 2px;
}

.series-results:empty {
    display: none;
}

.series-result-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--gray-100);
}

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

.series-result-item:hover {
    background: var(--gray-50);
}

.series-result-item .series-name {
    font-weight: 500;
    flex: 1;
}

.series-result-item .series-id {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.series-no-results {
    padding: 0.75rem;
    color: var(--gray-500);
    font-size: 0.875rem;
    text-align: center;
}

.series-id-badge {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: 3px;
    white-space: nowrap;
}

/* Detail panel sections */
.detail-section {
    margin-bottom: 1.25rem;
}

.detail-section:last-child {
    margin-bottom: 0;
}

/* Danger zone section for destructive actions */
.detail-section-danger {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

.detail-section-danger .detail-section-title {
    color: #dc2626;
    border-bottom-color: #fecaca;
}

.danger-zone-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.danger-zone-content p {
    margin: 0;
    font-size: 0.875rem;
    color: #7f1d1d;
}

.detail-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gray-200);
}

/* Detail grid layout */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem 1.5rem;
}

.detail-grid-wide {
    grid-template-columns: 1fr;
}

/* PriceCharting mapping container */
.pc-mapping-container {
    padding: 0.5rem 0;
}

.pc-mapping-container .form-group input {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
}

.pc-mapping-container .form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Detail field */
.detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;
    min-width: 0; /* Allow grid items to shrink below content size */
}

/* Allow overflow for fields with dropdowns/typeaheads */
.detail-field:has(.series-search-wrapper),
.detail-field:has(.publisher-search-wrapper) {
    overflow: visible;
}

.detail-field-label {
    font-size: 0.6875rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-field-value {
    font-size: 0.875rem;
    color: var(--gray-800);
    min-height: 1.5em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    white-space: normal;
}

.detail-field-value.empty {
    color: var(--gray-500);
    font-style: italic;
}

/* Textarea fields (notes) */
.detail-field-value.multiline {
    white-space: pre-wrap;
    max-height: 150px;
    overflow-y: auto;
    padding: 0.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

/* Boolean toggle fields */
.detail-field-value.boolean {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.detail-field-value.boolean .toggle-indicator {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-field-value.boolean .toggle-indicator.on {
    background: var(--success);
    color: white;
}

.detail-field-value.boolean .toggle-indicator.off {
    background: var(--gray-300);
    color: var(--gray-600);
}

/* Dropdown select for detail panel */
.detail-select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    background: white;
    cursor: pointer;
    min-width: 120px;
}

.detail-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Close button for detail panel */
.detail-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--gray-500);
    transition: color 0.15s ease;
}

.detail-close-btn:hover {
    color: var(--gray-700);
}

/* Variant Link Search & Display */
.variant-link-search {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.variant-link-search .search-input-wrapper {
    flex: 2;
    position: relative;
    min-width: 250px;
}

.variant-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.875rem;
}

.variant-search-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.variant-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-300);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.variant-search-result {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
}

.variant-search-result:last-child {
    border-bottom: none;
}

.variant-search-result:hover {
    background-color: var(--gray-100);
}

.variant-search-result .series-name {
    flex: 1;
    font-weight: 500;
}

.variant-search-result .series-year {
    color: var(--gray-600);
    font-size: 0.8rem;
}

.variant-search-result .series-publisher {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.variant-search-results .no-results,
.variant-search-results .error {
    padding: 0.75rem;
    text-align: center;
    color: var(--gray-500);
    font-style: italic;
}

.variant-type-select {
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.875rem;
    width: auto;
    flex-shrink: 0;
}

.variant-help-text {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.variant-link-display {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-radius: 4px;
    border: 1px solid var(--gray-200);
}

.variant-link-series {
    flex: 1;
}

.variant-link-series .year {
    color: var(--gray-500);
    margin-left: 0.25rem;
}

.variant-link-type {
    padding: 0.125rem 0.5rem;
    background: var(--primary);
    color: white;
    border-radius: 3px;
    font-size: 0.75rem;
    text-transform: capitalize;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .series-detail-panel {
        padding: 0.75rem 1rem;
    }

    .variant-link-search {
        flex-direction: column;
    }

    .variant-type-select {
        width: 100%;
    }
}

/* Keys Only Toggle Switch */
.keys-toggle-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

.keys-toggle-container .toggle-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.keys-toggle-container .toggle-label.active {
    color: var(--warning);
}

.keys-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--gray-300);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.keys-toggle-switch.active {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

.keys-toggle-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.keys-toggle-switch.active::after {
    transform: translateX(20px);
}

/* Toggle Dropdown (for Owned/Unowned selection) */
.toggle-dropdown {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 0.125rem 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    appearance: auto;
}

.toggle-dropdown:hover {
    border-color: var(--gray-400);
}

.toggle-dropdown.active {
    color: var(--success);
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.1);
}

.toggle-dropdown:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Keys dropdown - uses warning/gold color */
.toggle-dropdown-keys.active {
    color: var(--warning);
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.toggle-dropdown-keys:focus {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Wanted dropdown - uses warning/gold color */
.toggle-dropdown-wanted.active {
    color: var(--warning);
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.toggle-dropdown-wanted:focus {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Chart Mode Toggle (Current/Potential) */
.chart-toggle-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-toggle-container .toggle-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    transition: color 0.2s;
}

.chart-toggle-container .toggle-label.active {
    color: #667eea;
    font-weight: 600;
}

.chart-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--gray-600);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.chart-toggle-switch.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.chart-toggle-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.chart-toggle-switch.active::after {
    transform: translateX(20px);
}

/* v2.11.8 — Value-History chart header: shrink type at smartphone widths so the
   [select indicator] left cluster + [toggle] right cluster fit on a single row.
   At default sizes, indicator's max-content (~137px) + select (144px) + toggle
   (155px) overflows a 405px content area; the leftGroup's nested flex would
   shrink the indicator vertically (2-line wrap) which looks bad. Smaller type
   + nowrap on the indicator keeps everything inline AND single-line.
   `!important` overrides the inline font-size declarations in collection.php
   on #history-range and #value-change-indicator (which would otherwise win
   by specificity). */
@media (max-width: 639px) {
    #value-history-section #history-range {
        max-width: 7rem;
        font-size: 0.75rem !important;
    }
    #value-history-section #value-change-indicator {
        font-size: 0.7rem !important;
        white-space: nowrap;
    }
    #value-history-section .chart-toggle-container .toggle-label {
        font-size: 0.65rem;
    }
}

/* Key Issue Icon */
.key-issue-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 0.35rem;
    color: #f59e0b;
    vertical-align: middle;
    flex-shrink: 0;
}

.key-issue-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Key issue row highlight (subtle) */
.issue-row.key-issue .issue-cell {
    color: var(--gray-800);
}

/* Key Issues List in Detail Panel */
.key-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.key-issue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-radius: 0.375rem;
    border: 1px solid var(--gray-200);
}

.key-issue-item:hover {
    background: var(--gray-100);
}

.key-issue-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.key-issue-type {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.875rem;
}

.key-issue-entity {
    color: var(--gray-600);
    font-size: 0.8125rem;
}

.key-issue-source {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-style: italic;
}

.key-issue-actions {
    display: flex;
    gap: 0.25rem;
}

.key-issue-delete {
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.15s;
}

.key-issue-delete:hover {
    color: var(--danger);
    background: rgba(220, 53, 69, 0.1);
}

/* Key Issue Add Form */
.key-issue-form {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-100);
    border-radius: 0.375rem;
    border: 1px solid var(--gray-200);
}

.key-issue-form-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.key-issue-form-row:last-child {
    margin-bottom: 0;
}

.key-issue-form select,
.key-issue-form input[type="text"] {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.25rem;
    background: white;
}

.key-issue-form select:focus,
.key-issue-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.key-issue-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.key-issue-form .btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
}

.no-key-issues {
    color: var(--gray-500);
    font-size: 0.875rem;
    font-style: italic;
    padding: 0.5rem 0;
}

/* Genre card styles */
.genre-card:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.genre-card:hover div {
    color: white !important;
}

/* Quick search/character/creator links */
.quick-character-link,
.quick-creator-link {
    color: var(--primary);
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    background: var(--gray-100);
    border-radius: 1rem;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.quick-character-link:hover,
.quick-creator-link:hover {
    background: var(--primary);
    color: white;
}

/* No results message */
.no-results {
    text-align: center;
    padding: 2rem;
    color: var(--gray-500);
}

/* Text center utility */
.text-center {
    text-align: center;
}

/* Padding utility */
.p-4 {
    padding: 1rem;
}

/* ===== Collection Totals Bar ===== */
.collection-totals-bar {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

#collection-totals-top {
    margin-top: 0;
}

.collection-totals-bar .totals-table {
    border-radius: 0.75rem;
}

.collection-totals-bar .table-wrapper {
    margin-bottom: 0;
    overflow: hidden;
}

.collection-totals-bar .totals-table {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
    border: 1px solid var(--gray-700);
}

.collection-totals-bar .totals-table thead {
    background: transparent;
}

.collection-totals-bar .totals-table th {
    background: transparent;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--gray-700);
}

/* First column (empty checkbox spacer) */
.collection-totals-bar .totals-table th:first-child,
.collection-totals-bar .totals-table td:first-child {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 0;
}

.collection-totals-bar .totals-table td {
    color: white;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
    border: none;
}

.collection-totals-bar .totals-table tbody tr,
.collection-totals-bar .totals-table tbody tr:nth-child(even),
.collection-totals-bar .totals-table tbody tr:nth-child(odd) {
    background: transparent !important;
}

.collection-totals-bar .totals-table tbody tr:hover {
    background: transparent !important;
}

.collection-totals-bar .totals-table .positive {
    color: var(--success);
}

.collection-totals-bar .totals-table .negative {
    color: var(--danger);
}

/* =============================================
   TOTALS TABLE RESPONSIVE BREAKPOINTS
   Consistent font sizing at each screen size
   ============================================= */

/* iPad horizontal (1024px-1199px) */
@media (max-width: 1199px) {
    .collection-totals-bar .totals-table th {
        padding: 0.5rem 0.75rem;
        font-size: 0.625rem;
    }

    .collection-totals-bar .totals-table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Progressive shrinking (900px-1023px) */
@media (max-width: 1023px) {
    .collection-totals-bar .totals-table th {
        padding: 0.4375rem 0.625rem;
        font-size: 0.5625rem;
    }

    .collection-totals-bar .totals-table td {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }
}

/* iPad vertical (768px-899px) */
@media (max-width: 899px) {
    .collection-totals-bar .totals-table th {
        padding: 0.375rem 0.5rem;
        font-size: 0.5rem;
    }

    .collection-totals-bar .totals-table td {
        padding: 0.4375rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .collection-totals-bar .totals-table th,
    .collection-totals-bar .totals-table td {
        padding: 0.3125rem 0.375rem;
        font-size: 0.6875rem;
    }

    .collection-totals-bar .totals-table th {
        font-size: 0.4375rem;
    }
}

@media (max-width: 600px) {
    .collection-totals-bar .totals-table th,
    .collection-totals-bar .totals-table td {
        padding: 0.25rem 0.3125rem;
        font-size: 0.625rem;
    }

    .collection-totals-bar .totals-table th {
        font-size: 0.375rem;
    }
}

@media (max-width: 480px) {
    /* Scale totals fonts to match main table scaling */
    .collection-totals-bar .totals-table th,
    .collection-totals-bar .totals-table td {
        padding: 0.1875rem 0.1875rem;
        font-size: 0.5rem;
    }

    .collection-totals-bar .totals-table th {
        font-size: 0.3125rem;
    }

    /* Smaller spacer column */
    .collection-totals-bar .totals-table th:first-child,
    .collection-totals-bar .totals-table td:first-child {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
    }
}

/* Collection Actions Row - Base Styles */
.collection-actions-row {
    margin-top: 1rem;
}

/* Removed: .collection-actions-left — checkbox now inside .collection-actions-primary */

.collection-actions-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    flex-wrap: wrap;
}

.collection-actions-buttons .btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* v2.11.15 — give the 5 filter-section action buttons a standard min-width
   (7rem ≈ 112px, matches the previously-widest Export/Import) and center
   their labels. Without this they had different widths because their text
   labels do (Edit=92px, Move=102px, Delete=110px, Export/Import=112px). */
#delete-selected-btn,
#move-selected-trigger,
#bulk-edit-btn,
#export-btn,
#import-btn {
    min-width: 7rem;
    justify-content: center;
}

/* v2.11.16 — At smartphone widths the 7rem min-width is too wide: 3 buttons
   plus the "All" checkbox overflow the ~420px content area by 50+ px. Switch
   the primary + secondary groups to grid so the buttons share the available
   width equally instead of trying to hit 7rem each. */
@media (max-width: 639px) {
    .collection-actions-primary {
        display: grid;
        grid-template-columns: auto 1fr 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
    }
    .collection-actions-secondary {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
        margin-left: 0;
    }
    /* move-selected-group is a wrapper div; needs to fill its grid cell so
       the inner #move-selected-trigger button can size to 100% inside it. */
    .collection-actions-primary > #move-selected-group {
        width: 100%;
    }
    #delete-selected-btn,
    #move-selected-trigger,
    #bulk-edit-btn,
    #export-btn,
    #import-btn {
        min-width: 0;
        width: 100%;
    }
}

/* Action buttons split into two groups */
.collection-actions-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.collection-actions-secondary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Status row: just the refresh status text now (export/import moved up) */
.collection-status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Phone portrait */
@media (max-width: 480px) {
    .collection-actions-primary,
    .collection-actions-secondary {
        gap: 0.375rem;
    }

    .collection-actions-buttons .btn {
        padding: 0.4rem 0.25rem;
        font-size: 0.75rem;
    }

    .collection-actions-buttons .btn svg {
        width: 13px;
        height: 13px;
        margin-right: 0.125rem !important;
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    .collection-actions-buttons .btn {
        padding: 0.3rem 0.2rem;
        font-size: 0.6875rem;
    }

    .collection-actions-buttons .btn svg {
        width: 11px;
        height: 11px;
        margin-right: 0 !important;
    }

    #delete-btn-text,
    #move-btn-text,
    #bulk-edit-btn-text,
    #export-btn-text,
    #import-btn-text {
        display: none;
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    .collection-actions-buttons .btn {
        padding: 0.3rem 0.2rem;
        font-size: 0.6875rem;
    }

    .collection-actions-buttons .btn svg {
        width: 11px;
        height: 11px;
        margin-right: 0 !important;
    }

    #delete-btn-text,
    #move-btn-text,
    #bulk-edit-btn-text,
    #export-btn-text,
    #import-btn-text {
        display: none;
    }
}

/* ========================================
   FLUID RESPONSIVE TABLE COLUMN WIDTHS
   Uses clamp() for smooth scaling between 390px and 1440px
   Formula: clamp(min, calc(min + (max - min) * (100vw - 390px) / 1050), max)
   ======================================== */

/* ===========================================
   SERIES RESULTS TABLE - Fluid Widths
   No width changes - just shift contents right
   1200px: 15px left padding on first column
   390px: 5px left padding on first column
   =========================================== */
[data-table-id="series-results"] {
    table-layout: fixed;
    width: 100%;
}

/* First column (Checkbox) - left padding scales: 4px at 390px → 15px at 1440px */
[data-table-id="series-results"] th:nth-child(1),
[data-table-id="series-results"] td:nth-child(1) {
    padding-left: clamp(4px, calc(4px + 11 * (100vw - 390px) / 1050), 15px) !important;
}

/* ===========================================
   ISSUES RESULTS TABLE - Fluid Widths
   Column widths controlled by column-widths.css when saved by admin
   =========================================== */
[data-table-id="issues-results"] {
    table-layout: fixed;
    width: 100%;
}

/* Month column ALWAYS visible */
[data-table-id="issues-results"] th:nth-child(5),
[data-table-id="issues-results"] td:nth-child(5) {
    display: table-cell !important;
}

/* ===========================================
   VARIANTS TABLE - Keep existing widths, add edge padding
   1200px: 10px left padding on checkbox, 10px right padding on 9.4
   390px:  10px right padding on 9.4 only
   =========================================== */
.variants-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Checkbox - add 10px left padding at both breakpoints */
.variants-table th:nth-child(1),
.variants-table td:nth-child(1) {
    padding-left: 10px !important;
}

/* 9.4 Grade (last column) - add 20px right padding at both breakpoints */
.variants-table th:nth-child(7),
.variants-table td:nth-child(7) {
    text-align: right !important;
    padding-right: 20px !important;
}

.variants-table .cover-cell {
    padding-left: 0.5rem;
    padding-right: 0.25rem;
}

.variants-table .title-cell {
    padding-left: 0.5rem;
}

/* Ensure price cells don't break */
.variants-table .price-cell {
    white-space: nowrap;
    text-align: right;
}

/* Align price column headers with body cells (Raw, 8.0, 9.4) */
.variants-table th:nth-child(5),
.variants-table th:nth-child(6),
.variants-table th:nth-child(7) {
    text-align: right !important;
}

/* ===========================================
   COLLECTION TABLE (List View)
   Uses table-layout: fixed to ensure full width
   Column widths controlled by column-widths.css when saved
   =========================================== */
.table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* When admin is actively resizing, allow scroll to access all columns */
body.admin-resizing .table-wrapper {
    overflow-x: scroll !important;
}

.table-wrapper .collection-table,
[data-table-id="collection"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

/* Hide Potential ROI column at 390px */
@media (max-width: 390px) {
    .collection-table:not(.totals-table) th:nth-child(10),
    .collection-table:not(.totals-table) td:nth-child(10) {
        display: none !important;
    }
}

/* ===========================================
   TOTALS TABLE - Full width to match collection table
   =========================================== */
.collection-totals-bar .table-wrapper,
.collection-totals-bar .totals-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.collection-totals-bar .totals-table {
    table-layout: fixed !important;
}

.collection-totals-bar .totals-table th,
.collection-totals-bar .totals-table td {
    display: table-cell !important;
}

/* ===========================================
   VARIANTS TABLE - Hide cents on mobile
   Shows only dollar amount below 600px
   =========================================== */

/* By default, show full price and hide short */
.variants-table .price-short {
    display: none;
}

.variants-table .price-full {
    display: inline;
}

/* On mobile, show short (no cents) and hide full */
@media (max-width: 600px) {
    .variants-table .price-short {
        display: inline;
    }

    .variants-table .price-full {
        display: none;
    }
}

/* Variant detail row (admin only - shows PriceCharting ID and URL) */
.variant-detail-row {
    display: none;
    background: var(--gray-50);
}

.variant-detail-row.expanded {
    display: table-row;
}

.variant-detail-panel {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.variant-detail-panel a {
    color: var(--primary);
    text-decoration: none;
}

.variant-detail-panel a:hover {
    text-decoration: underline;
}

/* Variants table - ensure it fits in container */
.variants-table {
    width: 100%;
    max-width: 100%;
    /* Ensure rounded corners on all sides */
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Ensure the last column header has rounded corner */
.variants-table thead tr th:last-child {
    border-top-right-radius: 0.75rem;
}

/* Ensure the last row's last cell has rounded corner */
.variants-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.75rem;
}

/* ========================================
   Drag and Drop - Folder View Volume Reassignment
   ======================================== */

/* Draggable comic rows */
tr[draggable="true"] {
    cursor: grab;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

tr[draggable="true"]:active {
    cursor: grabbing;
}

tr[draggable="true"].dragging {
    opacity: 0.4;
    background: var(--gray-200) !important;
}

/* Valid drop target indicator (same series volumes) */
.group-volume.drop-target-valid {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
    border-radius: 0.5rem;
}

.group-volume.drop-target-valid > .volume-header {
    background: rgba(37, 99, 235, 0.08) !important;
}

/* Active drop target (hovering over with dragged item) */
.group-volume.drop-target-active {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
}

.group-volume.drop-target-active > .volume-header {
    background: rgba(37, 99, 235, 0.15) !important;
    transform: scale(1.01);
    transition: all 0.15s ease;
}

/* Toast notification for drag-and-drop feedback */
.toast-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    background: var(--gray-800);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    font-size: 0.875rem;
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-notification.toast-success {
    background: var(--success);
}

.toast-notification.toast-error {
    background: var(--danger);
}

/* =====================================================
   FIX MISSING PRICES MODAL
   ===================================================== */

#fix-missing-modal .modal-content {
    max-height: var(--modal-max-h, 90vh);
    overflow-y: auto;
}

#fix-missing-modal .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Variant selection table */
#fix-missing-variants-table {
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
}

#fix-missing-variants-table table {
    margin: 0;
}

#fix-missing-variants-table thead tr {
    background: var(--gray-100);
}

#fix-missing-variants-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Variant row styles */
.fix-missing-variant-row {
    transition: background-color 0.15s ease;
}

.fix-missing-variant-row:hover {
    background-color: var(--gray-50);
}

.fix-missing-variant-row.selected {
    background-color: rgba(37, 99, 235, 0.1);
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.fix-missing-variant-row.selected td {
    font-weight: 500;
}

/* No variants state */
#fix-missing-no-variants {
    border: 2px dashed var(--gray-300);
}

/* Action buttons spacing */
#fix-missing-modal .modal-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

/* ═══════════════════════════════════════
   Collection Tabs (v2.17.0)
   ═══════════════════════════════════════ */

.collection-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.collection-tab:hover {
    color: var(--gray-700);
    background: var(--gray-100);
}

.collection-tab:active {
    transform: scale(0.97);
}

.collection-tab.active {
    color: white;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    border-color: transparent;
    font-weight: 600;
}

.collection-tab .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 9999px;
}

.collection-tab.active .tab-count {
    color: white;
    background: rgba(255, 255, 255, 0.25);
}

/* Cross-collection search (v2.17.4) */
#cross-collection-search:focus {
    border-color: #ea580c;
    outline: none;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
}

.collection-tab.no-matches {
    opacity: 0.4;
}

.collection-tab.has-matches .tab-count {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
}

.collection-tab.active.has-matches .tab-count {
    background: rgba(255, 255, 255, 0.35);
    color: white;
}

/* Context menu hover/active */
.context-menu-item:hover,
.context-menu-item:active {
    background: var(--gray-100) !important;
}

/* ==========================================================================
   PriceCharting CSV Import Modal (v2.17.1)
   ========================================================================== */

/* Dark background for import modal (inline styles assume dark theme) */
#import-csv-modal .modal-content {
    background: var(--gray-800);
}

#import-csv-modal .modal-close {
    color: var(--gray-500);
    background: rgba(255, 255, 255, 0.1);
}

#import-csv-modal .modal-close:hover {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* Dropzone */
#import-dropzone {
    border: 2px dashed var(--gray-500);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

#import-dropzone:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

#import-dropzone.dragover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

/* Duplicate row highlight */
.import-row-duplicate {
    background: rgba(245, 158, 11, 0.08) !important;
}

.import-row-duplicate td {
    border-bottom-color: rgba(245, 158, 11, 0.2) !important;
}

/* Duplicate badge tag */
.import-dup-tag {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--warning);
    background: rgba(245, 158, 11, 0.15);
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    margin-left: 0.375rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* Import preview table hover */
#import-preview-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Import modal responsive */
@media (max-width: 640px) {
    #import-csv-modal .modal-content {
        max-width: 100%;
        margin: 0.5rem;
        max-height: var(--lightbox-content-max-h, 95vh);
    }

    #import-controls {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    #import-controls > div {
        width: 100%;
    }

    #import-controls select {
        width: 100%;
    }

    #import-preview-table {
        font-size: 0.75rem !important;
    }

    /* Hide less-important columns on mobile */
    #import-preview-table th:nth-child(5),
    #import-preview-table td:nth-child(5),
    #import-preview-table th:nth-child(9),
    #import-preview-table td:nth-child(9) {
        display: none;
    }
}

/* ==========================================================================
   Bulk Edit Modal (v2.17.1)
   ========================================================================== */

.bulk-edit-field-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.bulk-edit-field-row > label:first-child {
    min-width: 100px;
    color: var(--gray-300);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.bulk-edit-field-row select {
    flex: 1;
    background: var(--gray-700);
    color: white;
    border: 1px solid var(--gray-500);
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.bulk-edit-paid-split {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 500;
}

.bulk-edit-graded-fields {
    display: none;
    padding-left: 0;
    border-left: 2px solid var(--gray-600);
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Responsive bulk edit */
@media (max-width: 480px) {
    .bulk-edit-field-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .bulk-edit-field-row > label:first-child {
        min-width: auto;
    }

    .bulk-edit-field-row select,
    .bulk-edit-field-row input[type="number"],
    .bulk-edit-field-row input[type="text"],
    .bulk-edit-field-row textarea {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Cover Scan (v2.0.0)
   ═══════════════════════════════════════════════════════════════════ */

#scan-confirmation {
    margin-top: 1rem;
}

.scan-confirmation-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.scan-confirmation-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.scan-photo-preview {
    max-width: 100px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.scan-identification h4 {
    font-size: 1.1rem;
    color: var(--gray-900);
    margin: 0 0 0.35rem 0;
}

.scan-identification p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0 0 0.5rem 0;
}

.scan-confidence-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.scan-confidence-badge.high {
    background: #dcfce7;
    color: #166534;
}

.scan-confidence-badge.medium {
    background: #fef3c7;
    color: #92400e;
}

.scan-confidence-badge.low {
    background: #fee2e2;
    color: #991b1b;
}

.scan-confirmation-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Hide scan label on small screens */
@media (max-width: 480px) {
    .scan-btn-label {
        display: none;
    }

    .scan-confirmation-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .scan-photo-preview {
        max-width: 80px;
        max-height: 112px;
    }
}

/* ─── Touch-screen auto-zoom prevention ───
   iOS Safari auto-zooms on focus when input font-size < 16px.
   Targets all touch devices (including iPads) via pointer: coarse.
   Uses !important to override any more-specific selectors that set
   smaller fonts on inputs. Preserves pinch-to-zoom — no viewport
   maximum-scale restriction needed. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select,
    textarea,
    [contenteditable="true"] {
        font-size: 16px !important;
    }
}