/* BC Orion — display font for titles, big numbers, action buttons */
@font-face {
    font-family: 'BC Orion';
    src: url('/assets/fonts/BC-Orion-Regular-01948ca9f24b9bc777b4bbea127b4130.woff2') format('woff2'),
         url('/assets/fonts/BC-Orion-Regular-01948ca9f24b9bc777b4bbea127b4130.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

[x-cloak] { display: none !important; }

/* Poster cards */
.poster-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.poster-card:hover { transform: scale(1.02); box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

/* Gap between border and poster image */
.poster-card { padding: 4px; background: #fff; }

/* Force every grid thumbnail to a uniform 5:7 frame and center-crop the
   underlying image. Posters with other proportions get cropped — the
   lightbox still shows the full uncropped artwork. */
.poster-card > img {
    aspect-ratio: 5 / 7;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Vote border colors */
.vote-border-yes      { border-color: #000000 !important; border-width: 3px !important; }
.vote-border-probably { border-color: #525252 !important; border-width: 3px !important; }
.vote-border-doubt    { border-color: #a3a3a3 !important; border-width: 3px !important; }
.vote-border-no       { border-color: #d4d4d4 !important; border-width: 3px !important; }
.vote-border-none     { border-color: #e5e5e5 !important; }

/* Vote indicator dots — shown at small grid sizes instead of text buttons */
.vote-dots { display: none; }
.poster-card .vote-buttons-text { display: flex; }
.poster-card .vote-dots { display: none; }

/* At small card sizes (5+ columns), switch to dot indicators */
.grid-cols-5 .poster-card .vote-buttons-text,
.grid-cols-6 .poster-card .vote-buttons-text,
.grid-cols-7 .poster-card .vote-buttons-text,
.grid-cols-8 .poster-card .vote-buttons-text { display: none !important; }
.grid-cols-5 .poster-card .vote-dots,
.grid-cols-6 .poster-card .vote-dots,
.grid-cols-7 .poster-card .vote-dots,
.grid-cols-8 .poster-card .vote-dots { display: flex !important; }

/* Admin finalist buttons — same toggle for text vs compact */
.finalist-dots { display: none; }
.poster-card .finalist-buttons-text { display: flex; }
.poster-card .finalist-dots { display: none; }

.grid-cols-4 .poster-card .finalist-buttons-text,
.grid-cols-5 .poster-card .finalist-buttons-text,
.grid-cols-6 .poster-card .finalist-buttons-text,
.grid-cols-7 .poster-card .finalist-buttons-text,
.grid-cols-8 .poster-card .finalist-buttons-text { display: none !important; }
.grid-cols-4 .poster-card .finalist-dots,
.grid-cols-5 .poster-card .finalist-dots,
.grid-cols-6 .poster-card .finalist-dots,
.grid-cols-7 .poster-card .finalist-dots,
.grid-cols-8 .poster-card .finalist-dots { display: flex !important; }

/* Compact text buttons on poster card overlays */
.poster-card .finalist-buttons-text .btn-vote {
    padding: 4px 6px;
    font-size: 9px;
    letter-spacing: 0.03em;
}

/* Compact vote buttons — responsive with letters, B&W */
.vote-dot {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 3px 0;
    border: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border-radius: 0;
    line-height: 1;
}
.vote-dot:hover { background: rgba(255,255,255,0.25); color: #fff; }

/* Active states — strong B&W contrast */
.vote-dot-yes.active      { background: #fff; color: #000; border-color: #fff; }
.vote-dot-probably.active { background: rgba(255,255,255,0.7); color: #000; border-color: rgba(255,255,255,0.7); }
.vote-dot-doubt.active    { background: rgba(255,255,255,0.4); color: #fff; border-color: rgba(255,255,255,0.5); }
.vote-dot-no.active       { background: rgba(255,255,255,0.2); color: #fff; border-color: rgba(255,255,255,0.3); }

/* Text vote buttons */
.btn-vote {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
    cursor: pointer;
    border: 2px solid transparent;
}
.btn-vote-yes      { background: #f5f5f5; color: #000; border-color: #d4d4d4; }
.btn-vote-yes:hover      { background: #000; color: #fff; border-color: #000; }
.btn-vote-probably { background: #f5f5f5; color: #525252; border-color: #d4d4d4; }
.btn-vote-probably:hover { background: #525252; color: #fff; border-color: #525252; }
.btn-vote-doubt    { background: #f5f5f5; color: #737373; border-color: #d4d4d4; }
.btn-vote-doubt:hover    { background: #737373; color: #fff; border-color: #737373; }
.btn-vote-no       { background: #f5f5f5; color: #a3a3a3; border-color: #d4d4d4; }
.btn-vote-no:hover       { background: #a3a3a3; color: #fff; border-color: #a3a3a3; }

.btn-vote-yes.active      { background: #000; color: #fff; border-color: #000; }
.btn-vote-probably.active { background: #525252; color: #fff; border-color: #525252; }
.btn-vote-doubt.active    { background: #737373; color: #fff; border-color: #737373; }
.btn-vote-no.active       { background: #a3a3a3; color: #fff; border-color: #a3a3a3; }

/* Locked vote buttons — read-only, show active choice but no interaction */
.votes-locked { pointer-events: none; }
.votes-locked .btn-vote:not(.active) { opacity: 0.3; }
.votes-locked .vote-dot:not(.active) { opacity: 0.3; }

/* Lightbox - split layout */
.lightbox-overlay {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.9);
}
.lightbox-split {
    display: flex;
    width: 90vw;
    max-width: 1200px;
    height: 85vh;
    max-height: 85vh;
}
.lightbox-poster-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}
.lightbox-details-side {
    width: 300px;
    min-width: 300px;
    background: #fff;
    padding: 32px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
/* Widen details panel on large screens so text vote buttons fit */
@media (min-width: 960px) {
    .lightbox-details-side {
        width: 380px;
        min-width: 380px;
    }
}
@media (max-width: 768px) {
    .lightbox-split {
        flex-direction: column;
        height: 95vh;
    }
    .lightbox-poster-side {
        flex: 1;
        min-height: 50vh;
    }
    .lightbox-details-side {
        width: 100%;
        min-width: 100%;
        min-height: auto;
        max-height: 40vh;
    }
}

/* Lightbox vote button toggle: full text vs compact (Y/•/•/N) */
#lb-vote-buttons .lb-vote-text { display: flex; }
#lb-vote-buttons .lb-vote-dots { display: none; }
#lb-vote-buttons .lb-vote-text .btn-vote { padding: 6px 8px; }
#lb-vote-buttons .lb-vote-dots .btn-vote { padding: 6px 4px; min-width: 0; }

/* 769–959px: side panel is 300px — text doesn't fit, use compact */
@media (min-width: 769px) and (max-width: 959px) {
    #lb-vote-buttons .lb-vote-text { display: none !important; }
    #lb-vote-buttons .lb-vote-dots { display: flex !important; }
}
/* Very narrow mobile (<480px): panel is full-width but tight — use compact */
@media (max-width: 480px) {
    #lb-vote-buttons .lb-vote-text { display: none !important; }
    #lb-vote-buttons .lb-vote-dots { display: flex !important; }
}

/* Lightbox series view toggle */
.lb-view-toggle {
    display: inline-flex;
    border: 1px solid #e5e5e5;
    overflow: hidden;
}
.lb-view-btn {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    color: #a3a3a3;
    border: none;
}
.lb-view-btn.active {
    background: #000;
    color: #fff;
}
.lb-view-btn:hover:not(.active) {
    background: #f5f5f5;
    color: #000;
}

/* Series grid view */
.lb-series-grid {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
}
.lb-series-grid img {
    max-height: calc(85vh - 80px);
    object-fit: contain;
    flex-shrink: 1;
    min-width: 0;
}
/* 2x2 grid for 3-4 posters */
.lb-series-grid.grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: center;
    max-width: calc(85vh - 80px);
    margin: 0 auto;
}
.lb-series-grid.grid-2x2 img {
    max-height: calc(42vh - 44px);
    max-width: 100%;
    width: auto;
}

/* Toast notification */
.toast {
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 4.7s;
}
@keyframes slideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Global form styling overrides */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="datetime-local"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #e5e5e5 !important;
    border-radius: 0 !important;
    font-size: 14px;
    transition: border-color 0.15s ease;
}
select {
    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='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px !important;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #e5e5e5;
    border: none !important;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 0;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #000;
    border: none;
    border-radius: 0;
    cursor: pointer;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #000 !important;
    outline: none !important;
    box-shadow: none !important;
    ring: none !important;
}

/* Button overrides for black & white theme */
.btn-primary {
    background: #000;
    color: #fff;
    border: 2px solid #000;
    font-family: 'BC Orion', 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 24px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-primary:hover {
    background: #fff;
    color: #000;
}

.btn-secondary {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    font-family: 'BC Orion', 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 24px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-secondary:hover {
    background: #000;
    color: #fff;
}

/* Table styling */
table th {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #737373 !important;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #d4d4d4; }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }