/* ═══════════════════════════════════════════════════════════
   Cinemascope — Design System & Styles
   Mobile-first · Dark theme · Minimal & polished
   ═══════════════════════════════════════════════════════════ */

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
    /* Palette */
    --bg:            #0a0a0f;
    --bg-surface:    #13131a;
    --bg-elevated:   #1a1a24;
    --border:        #2a2a35;
    --border-hover:  #3a3a48;
    --text:          #eeeef0;
    --text-muted:    #7a7a8e;
    --accent:        #6366f1;
    --accent-hover:  #818cf8;

    /* Semantic */
    --watched:       #22c55e;
    --recommended:   #f59e0b;
    --planned:       #3b82f6;

    /* Spacing (4px base) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
    --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

    /* Radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-full: 999px;

    /* Transitions */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 0.15s var(--ease);
    --t-base: 0.25s var(--ease);

    /* Layout */
    --max-w: 1440px;
    --gutter: var(--sp-4);
}
@media (min-width: 640px) { :root { --gutter: var(--sp-6); } }
@media (min-width: 1024px) { :root { --gutter: var(--sp-10); } }

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ─── Layout Shell ───────────────────────────────────────── */
.site-header, .filter-bar, main, footer {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
.site-header {
    padding-block: var(--sp-8) var(--sp-2);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.site-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.tagline {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: var(--sp-1);
}
.header-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-shrink: 0;
}

/* View Toggle Button */
.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-full);
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--t-fast);
    white-space: nowrap;
}
.view-toggle:hover { border-color: var(--accent); color: var(--accent); }
.view-toggle-icon { font-size: 1rem; line-height: 1; }

/* CTA Button */
.cta-button {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: #fff;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--t-fast);
    white-space: nowrap;
}
.cta-button:hover { background: var(--accent-hover); }

/* ═══════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════ */
.filter-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 15, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    padding-block: var(--sp-3);
    margin-top: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
/* Horizontal scroll for chips on mobile */
.filter-scroll {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.filter-scroll::-webkit-scrollbar { display: none; }

.filter-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: var(--sp-1);
    flex-shrink: 0;
}
.filter-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    flex-shrink: 0;
}

/* Chip / Filter Button */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-full);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--t-fast);
}
.chip:hover { border-color: var(--text-muted); color: var(--text); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Status Dots */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-watched     { background: var(--watched); }
.dot-recommended { background: var(--recommended); }
.dot-planned     { background: var(--planned); }

/* Sort Select */
.filter-controls select {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-full);
    font-size: 0.78rem;
    outline: none;
    transition: var(--t-fast);
    flex-shrink: 0;
}
.filter-controls select:focus { border-color: var(--accent); }

/* Results Count */
.results-count {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Search */
.search-wrapper {
    position: relative;
    margin-left: auto;
    flex-shrink: 1;
    min-width: 0;
}
.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
}
.search-wrapper input {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: var(--sp-2) var(--sp-3) var(--sp-2) 32px;
    border-radius: var(--r-full);
    font-size: 0.8rem;
    width: 100%;
    min-width: 120px;
    max-width: 220px;
    outline: none;
    transition: var(--t-fast);
}
.search-wrapper input:focus { border-color: var(--accent); }
.search-wrapper input::placeholder { color: var(--text-muted); }

/* Desktop: single-row filter bar */
@media (min-width: 768px) {
    .filter-bar {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-4);
        flex-wrap: nowrap;
    }
    .filter-scroll { flex-shrink: 0; overflow-x: visible; }
    .filter-controls { flex: 1; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════ */
main {
    padding-block: var(--sp-6) var(--sp-12);
    min-height: 60vh;
}

/* ═══════════════════════════════════════════════════════════
   TABLE VIEW
   ═══════════════════════════════════════════════════════════ */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
th, td {
    text-align: left;
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}
th {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.68rem;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 1;
}
/* Row hover */
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--bg-surface); }

/* Title button in table */
.table-title {
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: color var(--t-fast);
    white-space: normal;
    line-height: 1.3;
}
.table-title:hover { color: var(--accent); }

/* Status in table */
.table-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.table-status.s-watched      { background: rgba(34,197,94,0.15); color: var(--watched); }
.table-status.s-recommended  { background: rgba(245,158,11,0.15); color: var(--recommended); }
.table-status.s-planned      { background: rgba(59,130,246,0.15); color: var(--planned); }

/* IMDb link in table */
td a { color: var(--text-muted); text-decoration: none; transition: color var(--t-fast); }
td a:hover { color: var(--accent); }

/* Rating highlight */
.rating-cell { font-variant-numeric: tabular-nums; font-weight: 600; }
.rating-high { color: var(--watched); }
.rating-mid  { color: var(--recommended); }
.rating-low  { color: var(--text-muted); }

/* Responsive: hide columns */
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: table-cell; } }
.hide-md { display: none; }
@media (min-width: 768px) { .hide-md { display: table-cell; } }

/* Mobile: compact table rows */
@media (max-width: 639px) {
    th, td { padding: var(--sp-2) var(--sp-1); font-size: 0.78rem; }
    .col-num { width: 28px; }
    .table-title { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════
   MOSAIC VIEW — Mobile-first 2-column grid
   ═══════════════════════════════════════════════════════════ */
.mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}

/* Scale up columns on larger screens */
@media (min-width: 640px)  { .mosaic { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 1024px) { .mosaic { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
@media (min-width: 1280px) { .mosaic { grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); } }

/* ─── Mosaic Card ────────────────────────────────────────── */
.card {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    animation: fadeUp 0.4s var(--ease) both;
    background: var(--bg-surface);
    aspect-ratio: 2 / 3;
}
.card:hover { z-index: 2; }

/* Poster Image */
.card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}
.card:hover > img { transform: scale(1.04); }

/* Gradient overlay — always visible at bottom for legibility */
.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.45) 30%,
        rgba(0,0,0,0) 60%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--sp-3);
    opacity: 0;
    transition: opacity 0.25s var(--ease);
    pointer-events: none;
}
/* Always show overlay on touch devices, hover on desktop */
@media (hover: none) { .card-overlay { opacity: 1; } }
.card:hover .card-overlay { opacity: 1; }

/* Card Info */
.card-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
    margin-bottom: var(--sp-1);
}
.card-badge.s-watched      { background: var(--watched); color: #052e16; }
.card-badge.s-recommended  { background: var(--recommended); color: #451a03; }
.card-badge.s-planned      { background: var(--planned); color: #fff; }

.card-info-title {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-info-meta {
    font-size: 0.65rem;
    color: #aaa;
    margin-top: 2px;
}
.card-info-rating {
    font-size: 0.7rem;
    color: #fbbf24;
    font-weight: 600;
    margin-top: 2px;
}

/* Mobile card adjustments */
@media (max-width: 639px) {
    .card-overlay { padding: var(--sp-2); }
    .card-info-title { font-size: 0.72rem; }
    .card-badge { font-size: 0.52rem; padding: 1px 4px; }
}

/* Animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    color: var(--text-muted);
}
.empty-icon { font-size: 2.5rem; margin-bottom: var(--sp-4); opacity: 0.5; }
.empty-state h2 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); }
.empty-state p { font-size: 0.88rem; }

/* ═══════════════════════════════════════════════════════════
   DETAIL MODAL
   ═══════════════════════════════════════════════════════════ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: var(--sp-4);
}
.modal-backdrop.open { display: flex; }

.modal {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    max-width: 860px;
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.3s var(--ease);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Desktop: side-by-side poster + body */
@media (min-width: 640px) {
    .modal {
        flex-direction: row;
        overflow: hidden;
    }
    .modal-poster-wrap {
        width: 280px;
        flex-shrink: 0;
    }
    .modal-poster-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .modal-body {
        flex: 1;
        overflow-y: auto;
        max-height: 90vh;
    }
}

/* Mobile: poster on top, body below */
@media (max-width: 639px) {
    .modal-poster-wrap {
        width: 100%;
        max-height: 240px;
        overflow: hidden;
    }
    .modal-poster-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

.modal-body {
    padding: var(--sp-6);
}
.modal-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 1.1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: var(--t-fast);
}
.modal-close:hover { background: rgba(0,0,0,0.8); }

.modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: var(--sp-1);
}
.modal-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

/* Meta Grid */
.modal-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3) var(--sp-4);
    font-size: 0.84rem;
    color: #c4c4d1;
    margin-bottom: var(--sp-4);
}
.modal-meta-grid > div > span {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.modal-plot {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #d8d8e0;
    margin-bottom: var(--sp-4);
}

.modal-links {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.modal-links a {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    color: #fff;
    background: var(--accent);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    text-decoration: none;
    font-weight: 500;
    transition: var(--t-fast);
}
.modal-links a:hover { background: var(--accent-hover); }

.btn-admin {
    font-size: 0.78rem;
    color: #fff;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    margin-top: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
    text-align: center;
    padding: var(--sp-6) var(--gutter) var(--sp-10);
    color: var(--text-muted);
    font-size: 0.72rem;
    max-width: var(--max-w);
    margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════
   UTILITIES & SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Selection */
::selection { background: rgba(99, 102, 241, 0.3); color: #fff; }