/* ============================================================
   FILE: static/css/style.css
   PURPOSE: Master theme stylesheet. Defines all --sc-* colour
            variables plus layout rules for navbar/offcanvas nav,
            content cards, decorations, and z-index stacking for
            fixed/overlay elements (navbar, offcanvas, page
            transition, Bootstrap modals).

   DEPENDS ON:
     - static/js/bootstrap.bundle.min.js (Bootstrap 5 modal /
       offcanvas / toast components styled here)

   USED BY:
     - templates/base.html (linked on every page)
     - All templates that use --sc-* variables, .sc-main-panel,
       .modal / #reqModal dialogs (e.g. templates/anilist/detail.html,
       anilist_detail.html — "Request CZ/SK Subtitles" modal)

   LAST MODIFIED: 2026-09-07 — found the SAME modal click-through bug
     (main > * forces z-index:10 on direct children of <main>, defeating
     Bootstrap's modal z-index — see the 2026-08-19 note above for the
     original discovery) recurring in FIVE more templates:
     translators/manage.html (#episodeUploadModal), anilist/list.html
     (#requestModal), admin/community.html (#resolveModal),
     main/account_settings.html (#deleteAccountModal), and
     admin/registry_search.html (#sibling-modal) — all fixed the same
     way (move the modal HTML into {% block modals %}). Two more
     instances exist in anilist_detail.html and anilist_list.html
     (note: NOT anilist/list.html, a different, unused/stray file — see
     asz-map/asz-translators skill) but those are confirmed dead code,
     not wired to any route, so left as-is.
     If you add a new Bootstrap modal to ANY template, put it in
     {% block modals %} from the start — do not put it in
     {% block content %}, even temporarily. This bug produces no error
     at all, just a modal that looks fine but silently can't be clicked.
   Previous: 2026-08-28 — added .translator-banner-box (fixed 3:1
     aspect-ratio, replaces a fixed-pixel max-height so the crop shown
     is identical on every screen size — see templates/translators/*.html
     and static/js/banner_cropper.js).
                  2026-08-19 — fixed Bootstrap modal (e.g. the
     "Request CZ/SK Subtitles" dialog) rendering visually on top
     of but interactively underneath the offcanvas nav layer;
     added explicit .modal.show / .modal-backdrop.show z-index
     above #navbarCollapse (see z-index stacking note below).
   ============================================================ */

/* ═══════════════════════════════════════════════════
   STREMIO COMMUNITY SUBTITLES — Master Theme
   Všetky farby sú definované tu ako CSS premenné.
   Šablóny ich používajú cez var(--sc-*)
   ═══════════════════════════════════════════════════ */

:root {
    /* Pozadia */
    --sc-body-bg:        #0f172a;
    --sc-card-bg:        #1e293b;
    --sc-card-header-bg: #3d4b61;
    --sc-input-bg:       #3d4b61;
    --sc-hover-bg:       #263347;
    --sc-border:         #616265;

    /* Text */
    --sc-text:           #ababab;
    --sc-heading:        #d9d9d9;
    --sc-muted:          #8b949e;
    --sc-placeholder:    #484f58;

    /* Akčné farby */
    --sc-link:           #00cdff;
    --sc-link-hover:     #1eebff;
    --sc-primary:        #1a6f84;
    --sc-primary-hover:  #1e8ba3;
    --sc-danger:         #672d2d;
    --sc-danger-hover:   #7d3535;
    --sc-success:        #196e3a;
    --sc-success-hover:  #1e8a49;
    --sc-warning:        #f39c12;
    --sc-ok:             #27ae60;

    /* AniList špecifické */
    --sc-al-blue:        #1a6f84;
    --sc-al-dark:        #1e293b;
    --sc-al-bg:          #263347;

    /* Pozadia kariet — solid (panel je opaque, glass nie je potrebný) */
    --sc-card-glass:        #1e293b;
    --sc-card-header-glass: #3d4b61;
    --sc-list-item-glass:   #1e293b;
    --sc-hover-glass:       #263347;
    --sc-blur:              none;

    /* Typografia — škála pre celý projekt */
    --sc-fs-base:        1rem;       /* body text, form inputs */
    --sc-fs-sm:          .875rem;    /* sekundárny text, linky pod formulárom */
    --sc-fs-xs:          .82rem;     /* pomocný text, why-list, badges */
    --sc-fs-xxs:         .75rem;     /* labely, timestamps, meta */
    --sc-fs-card-title:  .9rem;      /* card headery (h5) */
    --sc-fs-card-h4:     1.05rem;    /* card headery (h4) */
    --sc-fs-feat-title:  .88rem;     /* feature card nadpisy */
    --sc-fs-feat-desc:   .82rem;     /* feature card popisy */
}

/* ── Auth stránky — body override (eliminácia 8px scroll) ── */
/* body padding-bottom: 3rem (48px) > footer: 40px => 8px overflow bez tohto overridu */
body.login-page,
body.register-page {
    padding-bottom: 40px; /* = footer height, žiadny overflow */
}

/* ── Typografia — utility triedy ────────────────────── */
.sc-fs-sm  { font-size: var(--sc-fs-sm); }
.sc-fs-xs  { font-size: var(--sc-fs-xs); }
.sc-fs-xxs { font-size: var(--sc-fs-xxs); }

/* ── Layout ─────────────────────────────────────────── */
html {
    overflow-x: hidden; /* iOS Safari: musí byť na html aj body */
    overflow-y: scroll; /* vždy zobrazený scrollbar → žiadny layout shift, kompatibilné s Edge */
}
/* Prevent Bootstrap offcanvas from shifting the page */
html, body, .navbar {
    scrollbar-gutter: stable;
}
body {
    padding-top: 4.5rem;
    padding-bottom: 3rem;
    overflow-x: hidden;
}
body[style*="padding-right"] {
    padding-right: 0 !important;
}
body[style*="overflow"] {
    overflow: visible !important;
    overflow-x: hidden !important;
}
.navbar[style*="padding-right"] {
    padding-right: 0 !important;
}
.navbar-brand { font-weight: 700; }
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    z-index: 1030;               /* rovnaká úroveň ako navbar */
    background-color: #0f172a;   /* rovnaká farba ako body — cards vynikajú */
    border-top: 1px solid rgba(0, 205, 255, .10);
}
.card { margin-bottom: 20px; }
.subtitle-card { transition: transform 0.2s; }
.subtitle-card:hover { transform: translateY(-5px); }
.active-subtitle { border: 2px solid var(--sc-success); }
.vote-buttons .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.vote-count { font-weight: bold; min-width: 30px; display: inline-block; text-align: center; }
.poster-img { max-height: 300px; object-fit: contain; }
.toast-container { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 1050; }

/* ── Poster animations ──────────────────────────────── */
.poster-wrapper { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.poster-image { position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transition: opacity 0.3s ease-in-out; }
.poster-image.loaded { opacity: 1; }
.poster-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 0.375rem; z-index: 1; opacity: 1; transition: opacity 0.3s ease-in-out; }
.poster-fallback i { font-size: 2rem; animation: pulse 2s infinite; }
.poster-fallback.hidden { opacity: 0; }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
.poster-wrapper-card { position: relative; width: 100%; height: 300px; min-height: 200px; overflow: hidden; }
.poster-wrapper-card .poster-image { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transform: scale(1.05); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.poster-wrapper-card .poster-image.loaded { opacity: 1; transform: scale(1); }
.poster-fallback-card { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 1; opacity: 1; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.poster-fallback-card i { font-size: 4rem; animation: fadeInOut 2s ease-in-out infinite; }
.poster-fallback-card.hidden { opacity: 0; transform: scale(0.95); }

/* ── Coffee banner ──────────────────────────────────── */
.coffee-banner { display: none; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 1050; max-width: 350px; width: 90%; }
@media (min-width: 768px) { .coffee-banner { left: auto; right: 20px; transform: none; width: auto; } }

/* ── Navbar — spoločné pravidlá (všetky breakpointy) ── */
.navbar {
    background: #0f172a;
    border-bottom: 1px solid rgba(0, 205, 255, .08);
    transition: box-shadow .3s ease;
    padding-right: 0 !important; /* prevent offcanvas shift */
}
.navbar.scrolled {
    box-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.navbar .container-fluid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    letter-spacing: .01em;
    flex: 0 0 auto;
    min-width: 0;
    text-decoration: none;
    position: relative;
    transition: opacity .2s ease;
}
.navbar-brand:hover { opacity: .85; }
.navbar-brand::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00cdff, transparent);
    transition: width .3s ease;
}
.navbar-brand:hover::after { width: 70%; }
.navbar-brand--landing,
body.landing-page .navbar-brand {
    flex: 0 1 clamp(200px, 40vw, 440px);
}
.navbar-brand__wordmark {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.navbar-brand__asz {
    font-size: 1.15rem;
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: .04em;
    line-height: 1;
    flex-shrink: 0;
}
.navbar-brand__divider {
    width: 1.5px;
    height: 28px;
    background: linear-gradient(to bottom, transparent, rgba(0, 205, 255, .55), transparent);
    flex-shrink: 0;
}
.navbar-brand__texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex-shrink: 0;
}
.navbar-brand__kanji {
    font-size: .56rem;
    letter-spacing: .3em;
    color: rgba(0, 205, 255, .3);
    font-family: serif;
    font-weight: 300;
    line-height: 1;
}
.navbar-brand__name {
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .05em;
    line-height: 1;
}
.navbar-brand__region {
    font-size: .58rem;
    color: rgba(0, 205, 255, .5);
    letter-spacing: .15em;
    text-transform: uppercase;
    line-height: 1;
}

/* ── Nav link styling ──────────────────────────────── */
.navbar .nav-link {
    position: relative;
    color: rgba(226, 232, 240, .75);
    transition: color .2s ease;
    font-size: .875rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #e2e8f0;
}
.navbar .nav-link i {
    color: rgba(0, 205, 255, .55);
    transition: color .2s ease;
}
.navbar .nav-link:hover i {
    color: #00cdff;
}

/* Active underline indicator — desktop only, brand-style gradient sweep */
@media (min-width: 992px) {
    .navbar .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #00cdff, transparent);
        border-radius: 1px;
        transition: width .3s ease;
    }
    .navbar .nav-link:hover::after {
        width: 70%;
    }
}

/* Admin link */
.nav-link--admin {
    color: #f87171 !important;
    font-weight: 700;
}
.nav-link--admin:hover { color: #fca5a5 !important; }

/* User avatar circle */
.navbar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 205, 255, .12);
    border: 1px solid rgba(0, 205, 255, .25);
    font-size: .72rem;
    color: #00cdff;
    flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease;
}
.nav-link:hover .navbar-user-avatar {
    background: rgba(0, 205, 255, .2);
    border-color: rgba(0, 205, 255, .45);
}

/* Dropdown menus — modernized */
.navbar .dropdown-menu {
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(15, 23, 42, .95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    padding: .4rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
    animation: navDropIn .15s ease-out;
}
@keyframes navDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.navbar .dropdown-item {
    border-radius: 6px;
    font-size: .84rem;
    padding: .45rem .75rem;
    transition: background .15s ease;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: rgba(0, 205, 255, .08);
}
.navbar .dropdown-item i {
    opacity: .6;
    transition: opacity .15s ease;
}
.navbar .dropdown-item:hover i {
    opacity: 1;
}
.navbar .dropdown-header {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, .6);
    padding: .35rem .75rem .15rem;
}
.navbar .dropdown-divider {
    border-color: rgba(255, 255, 255, .06);
    margin: .25rem .5rem;
}
/* ── Navbar right controls (lang + user + hamburger) ── */
.navbar-right-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}
.navbar-right-controls .navbar-toggler {
    padding: 0.2rem 0.45rem;
    font-size: 1rem;
    border: 0;
}
.navbar-right-controls .navbar-toggler-icon { width: 1.2em; height: 1.2em; }

/* Hamburger tooltip */
.hamburger-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    background: rgba(15, 23, 42, .95);
    border: 1px solid rgba(0, 205, 255, .2);
    color: rgba(0, 205, 255, .8);
    font-size: .7rem;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
    z-index: 1031;
}
.hamburger-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* ── Offcanvas — always hamburger-driven ─────────────── */
#navbarCollapse { background-color: #0f172a; z-index: 1060; }
#navbarCollapseBody { display: flex; }
#navbarCollapse {
    width: min(78vw, 320px);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: rgba(15, 23, 42, .98) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #e2e8f0;
}
#navbarCollapse .offcanvas-header {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #e2e8f0;
}
#navbarCollapseBody {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .5rem 0;
}
#navbarCollapseBody .navbar-nav { width: 100%; flex-shrink: 0; }
#navbarCollapseBody .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    margin-top: 4px;
    background-color: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.06);
    box-shadow: none;
    border-radius: 8px;
    animation: none;
}
#navbarCollapseBody .nav-link {
    padding: .6rem 1rem;
    border-radius: 8px;
    margin: 1px .5rem;
    color: rgba(226, 232, 240, .85);
}
#navbarCollapseBody .nav-link:hover {
    background: rgba(0, 205, 255, .06);
    color: #e2e8f0;
}
/* Offcanvas backdrop */
.offcanvas-backdrop.show { opacity: .5; z-index: 1055; }

/* ── Bootstrap modal must stay above the offcanvas nav ──
   #navbarCollapse sits at z-index:1060 and its backdrop at 1055.
   Bootstrap's own modal defaults (backdrop:1050, modal:1055) are
   therefore equal to or lower than the offcanvas layer, which made
   dialogs like "Request CZ/SK Subtitles" render visually on top but
   sit underneath for pointer/focus events (unclickable, unwritable). */
.modal-backdrop.show { z-index: 1065; }
.modal.show { z-index: 1070; }

/* ── Anime zone (center of navbar) ────────────────────── */
.navbar-anime-zone {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    margin: 0 1rem;
}
/* ── Subtitle track ─────────────────────────────────── */
.sub-track {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.sub-line {
    position: absolute;
    white-space: nowrap;
    font-size: .7rem;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: .03em;
    color: rgba(0, 205, 255, .18);
    line-height: 1;
    pointer-events: none;
    will-change: transform, opacity;
    animation: subScroll var(--sub-dur, 18s) linear forwards;
}
.sub-line.sub-line--bright {
    color: rgba(0, 205, 255, .32);
}
@keyframes subScroll {
    0%   { transform: translateX(0); opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(var(--sub-drift, -280px)); opacity: 0; }
}

/* Hide anime zone on very small screens */
@media (max-width: 479px) {
    .navbar-anime-zone { display: none; }
}

/* ── Mobile responsive ──────────────────────────────── */
@media (max-width: 575.98px) {
    .list-group-item .row > [class*="col-md-5"],
    .list-group-item .row > [class*="col-md-4"] { padding-top: 8px; }
    .list-group-item .d-flex.flex-wrap { justify-content: flex-start !important; }
    .card-header.d-flex { flex-wrap: wrap; gap: 6px; }
    .badge, .text-monospace { word-break: break-all; white-space: normal; }
    .poster-wrapper-card { height: 200px; min-height: 160px; }
    .card-header .btn { font-size: .8rem; padding: .25rem .6rem; }
    .vote-buttons .btn { padding: .2rem .4rem; }
    #linkSearchInput { font-size: .85rem; }
    .list-group-item .d-flex.align-items-center { flex-wrap: wrap; }
}

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sc-card-bg); }
::-webkit-scrollbar-thumb { background: var(--sc-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7a7d82; }

/* ── Bootstrap dark mode CSS vars ──────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg:                    var(--sc-body-bg);
    --bs-body-color:                 var(--sc-text);
    --bs-card-bg:                    var(--sc-card-glass);
    --bs-card-border-color:          rgba(0, 205, 255, .14);
    --bs-border-color:               var(--sc-border);
    --bs-secondary-bg:               var(--sc-card-glass);
    --bs-tertiary-bg:                var(--sc-hover-glass);
    --bs-link-color:                 var(--sc-link);
    --bs-link-hover-color:           var(--sc-link-hover);
    --bs-emphasis-color:             var(--sc-heading);
    --bs-heading-color:              var(--sc-heading);
    --bs-dropdown-bg:                var(--sc-card-bg);      /* dropdown plný — čitateľnosť */
    --bs-dropdown-border-color:      var(--sc-border);
    --bs-dropdown-link-color:        var(--sc-text);
    --bs-dropdown-link-hover-color:  var(--sc-heading);
    --bs-dropdown-link-hover-bg:     var(--sc-hover-bg);
    --bs-list-group-bg:              var(--sc-list-item-glass);
    --bs-list-group-border-color:    rgba(0, 205, 255, .10);
    --bs-list-group-color:           var(--sc-text);
    --bs-list-group-action-hover-bg: var(--sc-hover-glass);
    --bs-table-color:                var(--sc-text);
    --bs-table-border-color:         var(--sc-border);
    --bs-table-bg:                   transparent;
    --bs-table-striped-bg:           transparent;
    --bs-table-hover-bg:             rgba(61, 75, 97, .20);
    --bs-modal-bg:                   var(--sc-card-bg);      /* modal plný — nad backdrop */
}

/* Solid pozadie na kartách a list-group — priame background-color (Bootstrap lokálny --bs-card-bg má vyššiu spec.) */
[data-bs-theme="dark"] .card {
    background-color: var(--sc-card-glass) !important;
    border-color: rgba(0, 205, 255, .14);
}
[data-bs-theme="dark"] .card:hover {
    border-color: rgba(0, 205, 255, .22);
}
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--sc-list-item-glass) !important;
    border-color: rgba(0, 205, 255, .10);
}

/* ── sc-main-panel — wrapper pre hlavný obsah stránky ── */
/*
 * Štruktúra: body(padding-top:4.5rem, padding-bottom:3rem)
 *             └─ main.container
 *                 └─ .sc-main-panel   ← sme tu
 *
 * Cieľ: panel začína tesne pod navbarom, končí tesne nad footerom.
 * Riešenie: negatívny margin kompenzuje body padding, šírka cez
 *           calc pokryje container gutters.
 */
.sc-main-panel {
    background: linear-gradient(to right,
        transparent,
        #0f172a 10px,
        #0f172a calc(100% - 10px),
        transparent
    );
    border-top:    none;
    box-sizing:    border-box;

    /* Vytiahnutie na vrch — panel začína tam kde končí navbar */
    margin-top:    -4.5rem;

    /* Vytiahnutie na šírku — Bootstrap container má padding 0.75rem na každej strane */
    margin-left:   -0.75rem;
    margin-right:  -0.75rem;

    /* Obsah odsadený od horného okraja panela (inak by bol pod navbarom) */
    padding:       4.5rem 0.75rem 1rem;

    /* margin-bottom: -3rem kompenzuje body padding-bottom(3rem) — panel vizuálne siaha až k footeru */
    margin-bottom: -3rem;
    min-height:    calc(100vh - 40px);
}

/* Panel vypnutý na auth stránkach (landing, login, register) */
body.landing-page  .sc-main-panel,
body.login-page    .sc-main-panel,
body.register-page .sc-main-panel {
    background:    transparent;
    border-top:    none;
    margin:        0;
    padding:       0;
    min-height:    unset;
}

/* ── Tabuľky — tbody transparent, hover jemný (§CSS.1) ── */
[data-bs-theme="dark"] .table tbody tr {
    --bs-table-bg:       transparent;
    --bs-table-hover-bg: rgba(61, 75, 97, .20);
}

/* ── Bootstrap button overrides ────────────────────── */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--sc-primary);
    --bs-btn-border-color: var(--sc-primary);
    --bs-btn-hover-bg: var(--sc-primary-hover);
    --bs-btn-hover-border-color: var(--sc-primary-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    background-color: var(--sc-primary) !important;
    border-color: var(--sc-primary) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-primary:hover {
    background-color: var(--sc-primary-hover) !important;
    border-color: var(--sc-primary-hover) !important;
}
[data-bs-theme="dark"] .btn-danger {
    --bs-btn-bg: var(--sc-danger);
    --bs-btn-border-color: var(--sc-danger);
    --bs-btn-hover-bg: var(--sc-danger-hover);
    --bs-btn-color: #fff;
    background-color: var(--sc-danger) !important;
    border-color: var(--sc-danger) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-danger:hover {
    background-color: var(--sc-danger-hover) !important;
    border-color: var(--sc-danger-hover) !important;
}
[data-bs-theme="dark"] .btn-success {
    --bs-btn-bg: var(--sc-success);
    --bs-btn-border-color: var(--sc-success);
    background-color: var(--sc-success) !important;
    border-color: var(--sc-success) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-secondary {
    background-color: #44475a !important;
    border-color: #44475a !important;
    color: var(--sc-heading) !important;
}
[data-bs-theme="dark"] .btn-outline-primary {
    border-color: var(--sc-primary) !important;
    color: var(--sc-link) !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--sc-primary) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-outline-danger {
    border-color: var(--sc-danger) !important;
    color: #e06c6c !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover {
    background-color: var(--sc-danger) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-outline-success {
    border-color: var(--sc-success) !important;
    color: #3fb950 !important;
}
[data-bs-theme="dark"] .btn-outline-success:hover {
    background-color: var(--sc-success) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: var(--sc-border) !important;
    color: var(--sc-text) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: #44475a !important;
    color: var(--sc-heading) !important;
}

/* ── Form controls ──────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--sc-input-bg) !important;
    border-color: var(--sc-border) !important;
    color: var(--sc-text) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #515f75 !important;
    border-color: var(--sc-link) !important;
    color: var(--sc-heading) !important;
    box-shadow: 0 0 0 .2rem rgba(0,205,255,.15) !important;
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--sc-placeholder) !important; }

/* ── Homepage feature cards ─────────────────────────── */
.index-feature-card {
    background: var(--sc-card-glass) !important;
    color: var(--sc-heading) !important;
}
.index-feature-card p, .index-feature-card h5 {
    color: var(--sc-heading) !important;
}

/* ── Input group fix ────────────────────────────────── */
[data-bs-theme="dark"] .input-group-text {
    background-color: #3d4b61 !important;
    border-color: #616265 !important;
    color: #ababab !important;
}
[data-bs-theme="dark"] .input-group .form-control {
    background-color: #3d4b61 !important;
    border-color: #616265 !important;
    color: #d9d9d9 !important;
}
[data-bs-theme="dark"] .input-group .form-control::placeholder {
    color: #616265 !important;
}

/* ── Page header — univerzálny komponent ────────────── */
.page-header {
    background: var(--sc-card-glass);
    border: 1px solid rgba(0, 205, 255, .14);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.page-header h1 {
    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
    color: var(--sc-heading);
    margin-bottom: 2px;
}
.page-header .page-header-sub {
    font-size: .82rem;
    color: var(--sc-muted);
}
@media (max-width: 576px) {
    .page-header { padding: 14px 16px; }
}

/* ── Globálny modrý accent pruh na card-header ──────── */
[data-bs-theme="dark"] .card-header {
    background-color: var(--sc-card-header-glass) !important;
    border-bottom: 1px solid rgba(0, 205, 255, .10);
    border-top: 3px solid var(--sc-link);
    color: var(--sc-heading);
}
/* Zachovať oblé rohy card-header keď je prvý child karty */
[data-bs-theme="dark"] .card > .card-header:first-child {
    border-top-left-radius: calc(var(--bs-card-border-radius) - 1px);
    border-top-right-radius: calc(var(--bs-card-border-radius) - 1px);
}
/* Výnimka — card-header s farebným pozadím (bg-primary, bg-secondary, bg-dark, ...) — tie sa nerobia cez sc-* */
[data-bs-theme="dark"] .card-header[class*="bg-"] {
    border-top: none;
}
/* Výnimka — warning accent (border-left) karty nemajú border-top */
[data-bs-theme="dark"] .card-header[style*="border-left"] {
    border-top: none;
}

/* ── Tabuľky — thead glass konzistencia s card-header ── */
[data-bs-theme="dark"] .table thead {
    background-color: var(--sc-card-header-glass) !important;
}

/* ── Auth hero wordmark — zdieľaný komponent (login, register, ...) ── */
.auth-hero {
    text-align: center;
    margin-bottom: 0.5rem;
}
.auth-hero__inner {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.auth-hero__asz {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: .04em;
    line-height: 1;
    text-shadow: 0 0 32px rgba(0,205,255,.18);
}
.auth-hero__divider {
    width: 2px;
    height: clamp(36px, 4vw, 52px);
    background: linear-gradient(to bottom, transparent, rgba(0,205,255,.6), transparent);
    flex-shrink: 0;
}
.auth-hero__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.auth-hero__kanji {
    font-size: clamp(.65rem, 1.2vw, .78rem);
    letter-spacing: .35em;
    color: rgba(0,205,255,.32);
    font-family: serif;
    font-weight: 300;
}
.auth-hero__name {
    font-size: clamp(1.1rem, 2.5vw, 1.55rem);
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .05em;
    line-height: 1;
}
.auth-hero__region {
    font-size: clamp(.75rem, 1.5vw, .95rem);
    color: rgba(0,205,255,.55);
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1;
}

/* ── Auth page layout — zdieľaný základ (login, register, reset, ...) ── */
.auth-page-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: calc(100vh - 4.5rem - 40px); /* navbar + footer */
    padding: 1rem 1rem 1.5rem;
}
/* Register — dvojstĺpcový vnútorný kontajner */
.auth-page-wrap--wide {
    align-items: flex-start;
}
.auth-page-content-wrap {
    width: 100%;
    max-width: 860px;
}
.auth-page-content-wrap--narrow {
    max-width: 440px;
}
.auth-page-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    max-width: 860px;
}
.auth-page-form-col {
    flex: 0 0 420px;
    min-width: 0;
}
.auth-page-side-col {
    flex: 1 1 0;
    min-width: 0;
}
/* Divider — rovnaký efekt ako na landing */
.auth-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,205,255,.2), transparent);
    margin: 0.75rem 0;
}
@media (max-width: 700px) {
    .auth-page-wrap { padding: 0.75rem 1rem 1rem; }
    .auth-page-inner { flex-direction: column; }
    .auth-page-form-col { flex: none; width: 100%; }
}

/* ── Auth card — zdieľaný štýl karty ── */
.auth-card-box {
    background: var(--sc-card-glass);
    border: 1px solid rgba(0,205,255,.10);
    border-radius: 8px;
}
.auth-card-box .auth-card-header {
    background: var(--sc-card-header-glass);
    border-bottom: 1px solid rgba(0,205,255,.12);
    border-top: 3px solid var(--sc-link);
    padding: .85rem 1.25rem;
    border-radius: 8px 8px 0 0;
}
.auth-card-box .auth-card-header h4,
.auth-card-box .auth-card-header h5 {
    color: var(--sc-heading);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.auth-card-box .auth-card-header h4 { font-size: var(--sc-fs-card-h4); }
.auth-card-box .auth-card-header h5 { font-size: var(--sc-fs-card-title); }
.auth-card-box .auth-card-header i { color: var(--sc-link); }
.auth-card-box .auth-card-body { padding: 1.25rem 1.5rem; font-size: var(--sc-fs-base); }

/* ── Navbar auth buttons (Login / Register) ─────────── */
.navbar-auth-btn {
    font-size: .78rem;
    padding: 4px 14px;
}
.navbar-auth-btn.btn-outline-info {
    border-color: rgba(0,205,255,.45);
    color: #00cdff;
}
.navbar-auth-btn.btn-outline-info:hover,
.navbar-auth-btn.btn-outline-info:focus {
    background: rgba(0,205,255,.15);
    border-color: #00cdff;
    color: #00cdff;
    box-shadow: none !important;
}
.navbar-auth-btn--primary.btn-info {
    background: #00cdff;
    border-color: #00cdff;
    color: #0f172a;
    font-weight: 700;
}
.navbar-auth-btn--primary.btn-info:hover,
.navbar-auth-btn--primary.btn-info:focus {
    background: #33d7ff;
    border-color: #33d7ff;
    color: #0f172a;
    box-shadow: none !important;
}

/* ── Mobile: hide navbar auth buttons — Login/Register live in offcanvas ── */
@media (max-width: 576px) {
    .navbar-auth-desktop { display: none !important; }
}

/* ── Hover modrý pruh na .btn — box-shadow inset (funguje aj cez overflow:hidden) ── */
[data-bs-theme="dark"] .btn {
    transition: all .18s ease, box-shadow .18s ease;
}
[data-bs-theme="dark"] .btn:hover {
    box-shadow: inset 3px 0 0 var(--sc-link) !important;
}
/* Výnimka — buttons kde hover box-shadow nevyzerá dobre */
[data-bs-theme="dark"] .btn-close:hover,
[data-bs-theme="dark"] .btn-sm.vote-btn:hover,
[data-bs-theme="dark"] .btn-link:hover,
[data-bs-theme="dark"] .navbar .btn:hover,
[data-bs-theme="dark"] .dropdown-toggle:hover {
    box-shadow: none !important;
}

/* ── Poster border — tmavý jemný rámček ─────────────── */
.poster-image {
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Landing page — overflow visible pre SVG dekorácie */
main.container:has(.landing-deco) {
    overflow: visible;
}

/* ── Landing page kontajner — roztiahne sa na celý priestor medzi dekoráciami ── */
/*
 * container-fluid = celá šírka viewportu
 * Interný #landing-wrap má max-width zhodný s Bootstrap container breakpointmi —
 * tým obsah (hero, karty) zostane vycentrovaný, ale <main> siaha až k dekoráciám.
 * Ostatné stránky (class="container") sú nedotknuté.
 */
.landing-container {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left:  0;
}

/* ── Globálne bočné dekorácie (na každej stránke) ───── */
/*
 * Kontajner:
 *   - fixed, od navbaru (4.5rem = 72px) po footer (40px)
 *   - šírka = (viewport - BS container) / 2
 *   - overflow: hidden → orieže obrázok ktorý vyčnieva
 *
 * Obrázok (700×1400, aspect 0.5):
 *   - height: 100% (= výška kontajnera, nie viewport)
 *   - width: auto → zachová aspect ratio (napr. pri 788px výške → 394px šírka)
 *   - Ak je deco box UŽŠÍ ako obrázok (bežné na 1080–1600px) → overflow orezáva,
 *     flex zarovnanie drží postavu pri vnútornom okraji.
/* ── Bočné dekorácie — jeden rotujúci kruh v strede stránky ── */
/*
 * Jeden obrázok (logo_flowers.png) fixovaný v strede viewportu.
 * Rotuje pomaly — viditeľné sú len bočné segmenty kruhu
 * pretože navbar (z-index:1030) a main (z-index:10) ho prekrývajú.
 */
@keyframes deco-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.asz-deco {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.asz-deco-right { display: none; }

/* picture je blokový element — display:contents ho "zruší" a štýly prevezmie img */
.asz-deco picture {
    display: contents;
}
.asz-deco img {
    position: absolute;
    top: 0;
    left: 0;
    width: 230vh;
    height: 230vh;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(0deg);
    mix-blend-mode: normal;
    opacity: 0.45;
    will-change: transform;
    animation: deco-spin 450s linear infinite;
    pointer-events: none;
}

/* Znížená pohyblivosť */
@media (prefers-reduced-motion: reduce) {
    .asz-deco img { animation: none; }
}

/* ── Obsah stránky musí byť NAD dekoráciami ── */
/* deco / page-transition sú priamo v <body>, nie v <main>  */
/* → všetok obsah v <main> má automaticky vyšší z-index                        */
main {
    position: relative;
    z-index: 10;
}
main > * {
    position: relative;
    z-index: 10;
}


/* ── Page transition overlay ── */
#asz-page-transition {
    position: fixed;
    inset: 0;
    background: var(--sc-body-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}
#asz-page-transition.apt-hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
/* apt-show zachované pre spätnú kompatibilitu */
#asz-page-transition.apt-show {
    opacity: 1;
    pointer-events: auto;
    transition: none;
}
#apt-logo {
    width: min(280px, 40vw);
    opacity: 0.35;
    animation: aptPulse 1.5s ease-in-out infinite;
}
@keyframes aptPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(0,205,255,.3)); }
    50%       { filter: drop-shadow(0 0 24px rgba(0,205,255,.7)); }
}

@media (max-width: 768px) {
    .asz-deco       { display: none; }
}

/* ── Deep Space téma ─────────────────────────────────── */

/* ── Hybrid téma (Navy + Violet + Cyan) ──────────────── */
[data-theme="hybrid"] {
    --sc-body-bg:        #0d0d1f;
    --sc-card-bg:        #161630;
    --sc-card-header-bg: #2d2d5e;
    --sc-input-bg:       #2d2d5e;
    --sc-hover-bg:       #1f1f45;
    --sc-border:         #3d3d7a;
    --sc-text:           #8892a4;
    --sc-heading:        #e2e8f0;
    --sc-muted:          #5a6478;
    --sc-link:           #00cdff;
    --sc-primary:        #4338ca;
}

/* ── Cross-ID chips — reused on the AniList detail page and the upload
   forms' Verify result (kitsu/mal/anilist/imdb cross-reference badges) ── */
.id-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 600;
}
.id-chip .ic-lbl {
    opacity: .85;
    font-weight: 500;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.id-chip .ic-val { color: #fff; }
.id-chip.ic-al     { background: rgba(2,169,255,.12);  color: var(--sc-primary); }
.id-chip.ic-mal     { background: rgba(46,81,162,.2);   color: #7fa4ff; }
.id-chip.ic-kitsu   { background: rgba(255,165,0,.1);   color: #ffa94d; }
.id-chip.ic-linked  { background: rgba(39,174,96,.12);  color: var(--sc-ok); }
.id-chip.ic-gap     { background: rgba(243,156,18,.12); color: var(--sc-warning); }
.id-chip.ic-nolink  { background: rgba(255,255,255,.05);color: var(--sc-muted); }

/* ── Translator profile banner (2026-08-28) ──────────────────────────
   Fixed 3:1 aspect-ratio (NOT a fixed pixel max-height) so the same
   relative crop shows on every screen size — width scales with the
   container, height is derived from it, so object-fit:cover never has
   to crop a differently-shaped box on mobile vs desktop. Used on both
   templates/translators/detail.html (public profile) and manage.html
   (upload preview + crop-editor stage) — keep both in sync with this
   class if the ratio ever changes, and with
   static/js/banner_cropper.js's aspectRatio option (must match: 3/1). */
.translator-banner-box {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    background: #111;
}
#bannerCropCanvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}