/* JoePokerPool — slice 1 minimal styling. Full Smarthand-look palette lands in slice 3. */
:root {
    --bg: #262626;
    --bg-card: #333;
    --bg-row: #464646;
    --bg-hover: #505050;
    --accent: #ff9436;
    --accent-hi: #ff8a1e;
    --text: #d0d0d0;
    --text-strong: #dedede;
    --muted: #808080;
    --positive: #81d281;
    --negative: #f56f6f;
    --border: #3a3a3a;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.container { max-width: 980px; margin: 0 auto; padding: 1rem 1.2rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

button {
    background: var(--accent);
    color: #1a1a1a;
    border: 0;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}
button:hover { background: var(--accent-hi); }

input[type="email"] {
    background: var(--bg-row);
    border: 1px solid var(--border);
    color: var(--text-strong);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 0.8rem;
}

.muted { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--negative); margin-top: 0.8rem; }

.auth-card {
    max-width: 400px;
    margin: 6rem auto;
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.auth-card h1 { margin: 0 0 0.4rem; color: var(--accent); }
.auth-card form { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
/* Joe directive 2026-05-07: email + parool 75% laius. Joe directive (iter):
   email peab nägema välja samasugune nagu parooli kast (orange 2px border,
   transparent bg, sama padding/font). Päris-padding match'b
   .password-input-wrap input rule'iga (rida ~2142). */
.auth-card input[type="email"] {
    width: 100%;
    padding: 0.85rem 1rem;
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 8px;
    color: var(--text-strong);
    font-size: 0.95rem;
    box-sizing: border-box;
    margin: 0;
}
.auth-card input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
.auth-card input[type="email"]:focus {
    outline: none;
    border-color: var(--accent-hi);
    background: rgba(255,255,255,0.02);
}
.auth-card button { min-width: 180px; }
/* Joe directive 2026-05-07 (3-mode iter): kolme-režiimiline /login —
   vaikimisi (choice) näha ainult [📬 Saada magic-link] nupp + "Mul on parool
   juba" link. Klõps nupule → magic mode (avab email). Klõps "parool" →
   password mode (avab email + parool). Width 75% mõlemad row'd. */
.auth-card .auth-email-row { width: 75%; display: flex; justify-content: center; }
.auth-card .auth-pw-row { width: 75%; display: flex; justify-content: center; }
.auth-card .auth-pw-row .password-input-wrap { max-width: none; width: 100%; }
/* Joe directive 2026-05-07: ülal `display: flex` rules override [hidden]
   UA-default `display: none` (specificity 0,2,0 > 0,1,0). Explicit
   [hidden] override taastab choice mode'is näkkimatuse. */
.auth-card .auth-email-row[hidden],
.auth-card .auth-pw-row[hidden] { display: none; }
/* Joe directive 2026-05-07: silm parem-äär + reset (3× iter, "ma räägin seda
   3 korda juba"). Scope = .password-input-wrap .password-input-icon → katab
   nii /login (auth-card) kui /settings (password-form), /set-password jne.
   KRIITILINE — global `button { background: var(--accent) }` (rida 31)
   lekkis läbi varasema bg-set'ita override'i kaudu → "kole oranž kast" oli
   minu enda button orange-täidisega. Hardened reset !important + appearance. */
.password-input-wrap .password-input-icon {
    position: absolute !important;
    right: 0.55rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: rgba(255,255,255,0.55) !important;
    cursor: pointer !important;
    transition: color 0.15s ease;
}
.password-input-wrap .password-input-icon:hover { color: var(--accent-hi) !important; }
.password-input-wrap .password-input-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}
/* Klõpsu-fookus ring eemaldatud (Joe "võta ära see kole kast"). Klaviatuuri-
   focus-visible jätame a11y jaoks. */
.password-input-wrap .password-input-icon:focus { outline: none; }
.password-input-wrap .password-input-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Joe directive 2026-05-07: peita Chromium "Strong Password Suggest" +
   credentials autofill overlay (oranž porno mis kattis pool parooli kasti
   eye-toggle peal). Kõik kolme pseudo-element-overlay'd off. */
.auth-card input::-webkit-credentials-auto-fill-button,
.auth-card input::-webkit-strong-password-auto-fill-button,
.auth-card input::-webkit-contacts-auto-fill-button,
.auth-card input::-webkit-caps-lock-indicator,
.auth-card input::-ms-reveal,
.auth-card input::-ms-clear {
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}
/* Autofill bg override (väldi oranži/kollast detect-tausta tüüpide vahetuse
   peal). Inset-shadow maskib bg, transition 5000s külmutab värvi. */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    -webkit-text-fill-color: var(--text-strong) !important;
    caret-color: var(--text-strong);
    transition: background-color 5000s ease-in-out 0s;
}
.auth-card .auth-toggle-row { margin-top: 0.6rem; text-align: center; }
.auth-card .auth-toggle-row a { color: var(--accent); text-decoration: none; }
.auth-card .auth-toggle-row a:hover { color: var(--accent-hi); text-decoration: underline; }

.topbar {
    display: flex;
    align-items: center;
    /* Joe directive 2026-05-07 (kaeperra.png): topbar overflows right edge with
       longer player names + admin shield icon. Tighten parent gap so search-form
       always fits inside frame. Fonts unchanged (variant B). */
    gap: 0.5rem;
    background: #1a1a1a;
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 0.2rem;       /* tighter to layout below — "üks terviks" */
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75);
    /* Joe directive 2026-05-08: filter-dropdown + search-dropdown on
       position: absolute topbar'is — overflow: hidden CLIPB need! Eemaldatud.
       Search overflow narrow viewports'is handled responsive media queries
       (allpool) kaudu — element-padding/font shrink, mitte clipping. */
    min-width: 0;
}
/* Joe directive 2026-05-08: search-form must shrink aggressively at narrow
   viewports so it stays inside topbar border, not visually clipped. */
.topbar .search-form { flex-shrink: 1; min-width: 0; }
.topbar .search-form input { min-width: 50px; max-width: 130px; width: 100%; box-sizing: border-box; }
.topbar .brand {
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    font-size: 1rem;
}
.topbar .user { color: var(--muted); }
.topbar > form { margin-left: 0; }
.topbar button { padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* Player tile (in topbar, when on /p/{name}) — orange-bordered, name only.
   Joe directive 2026-05-02: "võta ära (PS), shared pool ja see ring, jäta ainult mängija nimi". */
.topbar .player-tile {
    display: flex;
    align-items: center;
    /* Joe directive 2026-05-07: tighter horizontal padding (0.7rem vs 1rem)
       so longer player names leave room for nav + search inside frame. */
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--accent);    /* peenem nagu Smarthand 2026-05-02 */
    border-radius: 4px;
    background: var(--bg-card);
    flex: 0 0 auto;
    cursor: pointer;
    text-decoration: none;
}
.topbar .player-tile:hover { background: var(--bg-row); }
.topbar .player-tile .name {
    color: var(--text-strong);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Top nav items (STATISTICS / GAME GRAPH / TOP PLAYERS) */
.topbar .top-nav {
    display: flex;
    gap: 0;
    flex: 1 1 auto;
}
/* nav-items can live INSIDE .top-nav (left group) OR as standalone children
   of .topbar (UPLOAD on far right). Both share the same visual style. */
.topbar .nav-item {
    color: #888;
    /* Joe directive 2026-05-07 (kaeperra.png): tighter padding (0.6rem) +
       font clamp 0.7-0.8rem. Joe-validated for wide viewports. */
    padding: 0.5rem 0.6rem;
    font-size: clamp(0.7rem, 0.65vw, 0.8rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    transition: color 0.1s, border-color 0.1s, background 0.12s ease-out;
    white-space: nowrap;
}
/* Joe directive 2026-05-07: tighter inter-item gap (0.25rem vs 0.4rem). */
.topbar .top-nav { display: inline-flex; gap: 0.25rem; align-items: center; }
.topbar .nav-item:hover {
    color: var(--text-strong);
    /* Joe directive 2026-05-07 evening: hover bg highlight kõikidele nav-item'idele
       (GAME GRAPH / TOP PLAYERS / UPLOAD), sama disain mis 🛡 🔧 ⚙ ikoonidel. */
    background: rgba(255, 255, 255, 0.10);
}
.topbar .nav-item.active {
    color: #fff;
    border-bottom-color: var(--accent);
}

/* Joe directive 2026-05-05 Phase 1A — filter dropdown (Game type / Limits).
   Smarthand-style: orange-active button group, fieldset sections. */
.topbar .filter-menu {
    /* position: relative removed — dropdown anchors to .topbar (set on .topbar
       below) so right-edge can reach .container's right edge. */
    flex: 0 0 auto;
}
.topbar .filter-menu summary {
    list-style: none;
    cursor: pointer;
    /* Joe directive 2026-05-05: smaller filter+menu buttons, closer together. */
    padding: 0.25rem 0.4rem;
    font-size: 1.15rem;
    color: var(--accent);
    border-radius: 4px;
    line-height: 1;
}
.topbar .filter-menu summary::-webkit-details-marker { display: none; }
.topbar .filter-menu[open] summary { background: var(--bg-row); }
/* Joe directive 2026-05-05: filter dropdown right-edge aligned to main container.
   Anchored to .topbar (full container width) instead of .filter-menu button —
   right: 0.8rem matches .topbar padding-right, so dropdown right edge meets
   topbar's right edge (= container right edge). */
.topbar { position: relative; }
.filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    background: var(--bg-card);
    /* Joe directive 2026-05-08: õrn oranž joon ümber filtri kasti. */
    border: 1px solid rgba(255, 148, 54, 0.45);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    min-width: 320px;
    max-width: 320px;
    padding: 0.7rem 0.9rem;
    z-index: 110;
    margin-top: 6px;
}
.filter-section {
    padding: 0;
    margin: 0 0 0.8rem;
}
/* Joe directive 2026-05-05 — switched from <fieldset>/<legend> to <div>
   structure (legend overlapped border-top, hiding divider). Now plain div
   sections with reliable adjacent-sibling top border. */
.filter-section + .filter-section {
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 0.8rem;
}
.filter-section-head {
    color: var(--text-strong);
    font-weight: 600;
    font-size: 0.9rem;
    /* Joe directive 2026-05-07 evening *"filtrite tabis tee game type ja
       kastide ja limits ja kastide ja dates ja kastide vahesid 10dp
       suuremaks"* — applies to topnav filter popup (NOT /settings page).
       Section heading → first .filter-row gap = 10px. */
    margin-bottom: 10px;
    /* Joe directive 2026-05-05 *"FR any custom kastid joonda paremale"* —
       title centered, active-tag pill positioned right (absolute). */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
.filter-section-head .filter-active-tag {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.filter-section legend {
    padding: 0;
    color: var(--text-strong);
    font-weight: 600;
    font-size: 0.9rem;
    width: 100%;
    /* Joe directive 2026-05-05 *"pane game type keskele, limits ja dates ka
       keskele"* — center legend label + active tag. */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}
.filter-active-tag {
    background: var(--accent);
    /* Joe directive 2026-05-05 *"fr any custom kastide tekst ka valge"*. */
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 12px;
    text-transform: lowercase;
}
.filter-row {
    /* Joe directive 2026-05-05 *"tee seadete kastide joondused sama nagu
       originaalis"* — grid layout for equal-width buttons matching Smarthand
       reference. Per-section column count via inline `style="--cols: N"`. */
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 0.3rem;
    margin-top: 0.4rem;
}
/* Joe directive 2026-05-07: 2-cols rida (NL500 + NL1000) keskele joondatud
   et joonduks 3-cols rea (NL50/NL100/NL200) keskmise (NL100) all. */
.filter-row.filter-row-centered {
    width: calc((100% - 0.6rem) * 2 / 3 + 0.3rem);
    margin-left: auto;
    margin-right: auto;
}
.filter-row.filter-date-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    /* Subtle divider matching Smarthand. */
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 0.8rem;
    margin-top: 0.8rem;
}
.filter-btn {
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    color: var(--text-strong);
    font-size: 0.85rem;
    font-family: inherit;
    /* Joe directive 2026-05-05 *"dates kastide tekst mitte boldi, originaalis
       pole bold"* — explicit regular weight (was inheriting/defaulting). */
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filter-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.filter-btn input[type="radio"],
.filter-btn input[type="checkbox"] { display: none; }
/* Joe directive 2026-05-05: orange background, WHITE text (was #1a1a1a dark). */
.filter-btn:has(input:checked),
.filter-btn.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    font-weight: 600;
}
button.filter-btn {
    font-family: inherit;
    line-height: inherit;
}
.filter-date-row { align-items: stretch; gap: 0.4rem; }
.filter-date-wrapper { position: relative; flex: 1 1 auto; min-width: 0; }
.filter-date {
    width: 100%;
    background: var(--bg-row);
    border: 1px solid var(--border);
    color: var(--text-strong);
    padding: 0.32rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    /* Joe directive 2026-05-05 *"valitavad kuupäevad joonda kastide keskele"*. */
    text-align: center;
}
/* Joe directive 2026-05-05: from/to placeholders white (was muted gray). */
.filter-date::placeholder { color: var(--text-strong); opacity: 0.85; }
.filter-date-sep { align-self: center; color: var(--text-strong); padding: 0 0.2rem; }

/* Joe directive 2026-05-05 — custom calendar (kalender.png reference). */
.custom-calendar {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 1000;
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.6);
    min-width: 220px;
    font-size: 0.85rem;
    user-select: none;
}
.custom-calendar[hidden] { display: none; }
.cal-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}
.cal-header .cal-nav {
    background: transparent;
    border: 0;
    color: var(--accent);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 0.4rem;
    line-height: 1;
}
.cal-header .cal-nav:hover { color: var(--accent-hi); }
.cal-header select {
    background: var(--bg-row);
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.18rem 0.3rem;
    font-size: 0.85rem;
    cursor: pointer;
    flex: 1 1 auto;
}
.cal-weekdays, .cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cal-weekdays span {
    text-align: center;
    color: var(--muted);
    font-size: 0.7rem;
    padding: 0.2rem 0;
    font-weight: 600;
}
.cal-day {
    text-align: center;
    padding: 0.35rem 0;
    cursor: pointer;
    color: var(--accent);
    font-size: 0.85rem;
    border-radius: 2px;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cal-day:hover { background: var(--bg-row); }
.cal-day-empty { cursor: default; }
.cal-day-empty:hover { background: transparent; }
.cal-today { font-weight: 700; }
.cal-selected {
    background: var(--accent);
    color: #1a1a1a;
}
.cal-selected:hover { background: var(--accent-hi); }
.filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.7rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.filter-reset {
    /* Joe directive 2026-05-05 *"resetile pane valge joon ümber"* — border. */
    color: var(--text-strong);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    font-weight: 600;
}
.filter-reset:hover { background: var(--bg-row); }
.filter-apply {
    background: var(--accent);
    color: #ffffff;
    /* Joe directive 2026-05-05 *"pane apply kastile ka peenike valge joon ümber"*. */
    border: 1px solid rgba(255,255,255,0.5);
    padding: 0.45rem 1.2rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}
.filter-apply:hover { background: var(--accent-hi); }

/* Settings gear dropdown */
.topbar .settings-menu {
    position: relative;
    flex: 0 0 auto;
}
.topbar .settings-menu summary {
    list-style: none;
    cursor: pointer;
    /* Joe directive 2026-05-05: smaller filter+menu buttons. */
    padding: 0.25rem 0.4rem;
    font-size: 1.15rem;
    color: var(--accent);
    border-radius: 4px;
    line-height: 1;
}
.topbar .settings-menu summary::-webkit-details-marker { display: none; }
.topbar .settings-menu[open] summary { background: var(--bg-row); }
.topbar .settings-menu .settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    min-width: 200px;
    padding: 0.4rem;
    z-index: 100;
    margin-top: 0.2rem;
}
.topbar .settings-menu .settings-dropdown a,
.topbar .settings-menu .settings-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.7rem;
    color: var(--text-strong);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 3px;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: normal;
}
.topbar .settings-menu .settings-dropdown a:hover,
.topbar .settings-menu .settings-dropdown button:hover {
    background: var(--bg-hover);
    color: var(--accent);
}
form.inline { display: inline; }

.placeholder { background: var(--bg-card); padding: 2rem; border-radius: 6px; }
.placeholder h2 { margin-top: 0; color: var(--text-strong); }

/* navigation in topbar */
.topbar a.brand { font-weight: 700; color: var(--accent); text-decoration: none; }
.topbar .nav { display: flex; gap: 1rem; }
.topbar .nav a { color: var(--text); padding: 0.3rem 0.6rem; border-radius: 4px; }
.topbar .nav a.active { background: var(--bg-row); color: var(--accent); }
.topbar .nav a:hover { background: var(--bg-hover); color: var(--accent-hi); }
/* Joe directive 2026-05-05: search box narrower + taller. Search now sits at
   the far right (after ⚙ + ☰) with 5px gap from settings, matching other
   right-cluster spacing. */
.topbar .search-form { margin-left: calc(5px - 0.5rem); position: relative; }
.topbar .search-form input {
    background: var(--bg-row);
    border: 1px solid var(--accent);
    color: var(--text-strong);
    /* Narrower (90-130px) + taller (0.55-0.7rem padding-y).
       Joe directive 2026-05-07: shrinkable to 80px so longer player names
       can't push search input outside the frame. */
    padding: 0.55rem 0.55rem;
    border-radius: 4px;
    font-size: clamp(0.7rem, 0.7vw, 0.9rem);
    min-width: 80px;
    max-width: 130px;
    flex-shrink: 1;
}
/* Joe directive 2026-05-05: tight 5px gap. Topbar parent has flex gap: 0.8rem
   (12.8px) — override with negative margin to net total ~5px between buttons. */
.topbar .filter-menu { margin-left: calc(5px - 0.5rem); }
.topbar .settings-menu { margin-left: calc(5px - 0.5rem); }
/* Joe directive 2026-05-07 evening: text-align: center → left (Joe pref).
   Plus subtle glow when focused — accent-colored ring + faint bg lift. */
.topbar .search-form input { text-align: left; }
.topbar .search-form input::placeholder { text-align: left; }
.topbar .search-form input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(243, 146, 55, 0.45),
                0 0 12px rgba(243, 146, 55, 0.35);
    background: rgba(255, 255, 255, 0.04);
}
/* Joe directive 2026-05-05: "search player" placeholder same white as player
   tile name, not bold. */
.topbar .search-form input::placeholder {
    color: var(--text-strong);
    font-weight: 400;
    opacity: 1;  /* override default browser placeholder muting */
}

/* Joe directive 2026-05-08: /top stat-range filter dropdown.
   ⚙ icon → click opens dropdown with 15 stat min/max input rows.
   Submit triggers form GET to /top with stat_<key>_min/max query params. */
/* Joe directive 2026-05-08: dropdown anchored to .top-page-filter (form row,
   full width inside card) so right edge aligns with card border. menu wrapper
   is non-position so absolute child resolves to nearest positioned ancestor.
   Joe directive 2026-05-08 (iter): ⚙ ikoon Reset'i lähedale — margin-left: 0
   ja täiendav negatiivne margin-right vähendamiseks form-gap'iga (kompenseerib). */
/* Joe directive 2026-05-08 (iter): Reset auto-margini tõttu jäi gap. Anname
   ⚙'le auto-marg vasakult (push to right), Reset järgneb form gap'iga. */
.top-stat-filter-menu {
    display: inline-block;
    margin-left: auto;
    margin-right: 0;
}
.top-page-filter { position: relative; }
.top-stat-filter-icon {
    list-style: none;
    cursor: pointer;
    padding: 0.3rem 0.55rem;
    /* Joe directive 2026-05-08: oranž icon + õrn oranž border vaikimisi
       (mitte ainult active state'is). Active state läheb täielikult vibrant. */
    color: var(--accent);
    background: #2a2a2a;
    border: 1px solid rgba(255, 148, 54, 0.45);
    border-radius: 3px;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.top-stat-filter-icon::-webkit-details-marker { display: none; }
.top-stat-filter-icon:hover { color: var(--accent-hi); }
.top-stat-filter-icon.active { color: var(--accent); border-color: var(--accent); }
.top-stat-filter-menu[open] .top-stat-filter-icon { color: var(--accent); }
.top-stat-filter-dropdown {
    position: absolute;
    /* Joe directive 2026-05-08: parempoolse ääre joonega kohakuti — dropdown
       right edge matches .top-page-filter form right edge (= card border).
       Joe directive iter: 15px paremale et katuks kogu kaardi parem-äär. */
    top: calc(100% + 6px);
    right: -15px;
    left: auto;
    z-index: 200;
    background: var(--bg-card);
    /* Joe directive 2026-05-08: õrn oranž joon ümber filtri kasti. */
    border: 1px solid rgba(255, 148, 54, 0.45);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);
    padding: 0.8rem 1rem;
    /* Single column → narrower. */
    min-width: 320px;
    max-width: 380px;
    /* Safety scroll if card is shorter than dropdown content. */
    max-height: 75vh;
    overflow-y: auto;
}
/* Joe directive 2026-05-08: kaardi piir EI tohi olla dropdown'ist üleval kui
   tabel on lühike (vähe filtri-tulemusi). `:has()` modern selector kasvatab
   kaardi min-height kui dropdown avatud — alumine joon liigub dropdown'i
   alla. Browser-support: Chrome 105+, Firefox 121+, Safari 15.4+. */
.top-page-card:has(.top-stat-filter-menu[open]) {
    min-height: 620px;
}
/* Joe directive 2026-05-08: pealkiri keskele. */
.top-stat-filter-dropdown h4 {
    margin: 0 0 0.4rem;
    color: var(--accent);
    font-size: 0.95rem;
    text-align: center;
}
.top-stat-filter-dropdown p.muted { text-align: center; }
/* Joe directive 2026-05-08 (iter 3): single-column tagasi (15 rida üksteise
   alla) — Joe verbatim "tee filtri tab tagasi ühe reaga". */
.top-stat-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.top-stat-row {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    align-items: center;
    gap: 0.4rem;
}
.top-stat-label {
    color: #c0c0c0;
    font-size: 0.85rem;
    font-weight: 500;
}
.top-stat-input {
    background: var(--bg-row);
    border: 1px solid #444;
    border-radius: 3px;
    color: var(--text-strong);
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.12s ease, background 0.12s ease;
}
/* Joe directive 2026-05-08: hover/focus effect sama nagu kuupäeva filtri kastis. */
.top-stat-input:hover { border-color: var(--accent) !important; background: rgba(255,255,255,0.04); }
.top-stat-input:focus { outline: none; border-color: var(--accent-hi) !important; background: rgba(255,255,255,0.06); }
/* Joe directive 2026-05-08: Top select option list (browser-native popup) —
   dark theme override (default oli valge bg). */
.top-stat-select { cursor: pointer; }
.top-stat-select option {
    background: #1a1a1a;
    color: #fff;
}
.top-stat-row--top { margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.top-stat-actions {
    margin-top: 0.7rem;
    display: flex;
    /* Joe directive 2026-05-08: Apply nupp keskele. */
    justify-content: center;
}

/* Autocomplete dropdown attached to top-nav search input */
.search-dropdown {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    /* Joe directive 2026-05-08: bump z-index 100→500 so dropdown stays above
       graph SVG (Plotly + d3 use z-index ~10-100). filter-dropdown 110 below
       this so search dropdown wins if both happen to overlap. */
    z-index: 500;
    /* Joe directive 2026-05-07 evening: võta scroll ära, kuva max 30 kohta
       (server-side LIMIT 30 prefix_search_players). */
}
.search-dropdown:empty { display: none; }
.autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.autocomplete-list li a {
    display: block;
    padding: 0.5rem 0.8rem;
    color: var(--text-strong);
    text-decoration: none;
    font-size: 0.9rem;
}
.autocomplete-list li a:hover,
.autocomplete-list li.highlighted a {
    background: var(--bg-hover);
    color: var(--accent-hi);
}
.autocomplete-list li.highlighted a {
    border-left: 3px solid var(--accent);
    padding-left: calc(0.8rem - 3px);
}
.autocomplete-list li.empty {
    padding: 0.5rem 0.8rem;
    color: var(--muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* Player view — Smarthand-look layout */

/* Standalone player-header (legacy, no longer used since player tile moved to topbar — keep for backward compat) */
.player-header { display: none; }

/* Outer player-screen wrapper — single unified frame around entire player view
   (topbar + KPI/graph/Summary/Monthly + tab-area). Joe directive 2026-05-02
   *"kõik kastid kokku, sinna tee efekti joon ka ümber"*. */
.player-screen {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 0.4rem;
    background: rgba(0,0,0,0.2);
    box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75);
}
/* Joe directive 2026-05-05: bottom gap inside .player-screen must equal side
   gap (0.4rem padding). Drop margin-bottom from any direct-child card/section
   that's the last visible element (otherwise .card { margin-bottom: 1.5rem }
   adds asymmetric gap on /graph and /upload). */
.player-screen > section:last-child,
.player-screen > .card:last-child,
.player-screen > section:nth-last-child(2):has(+ script) {
    margin-bottom: 0;
}
.player-tile { display: flex; align-items: center; gap: 0.9rem; }
.player-tile .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    border: 2px solid var(--accent-hi);
}
.player-tile .name { color: var(--text-strong); font-weight: 600; font-size: 1.05rem; }

/* Sub-tab nav + tab-area bound together (Joe directive 2026-05-02 — unified
   white-bordered card hosting both subtabs + stats grid as ONE visual unit).
   #tab-area wraps both; subtabs have only bottom-border to separate from grid. */
#tab-area {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    background: #262626;
    margin-top: 0.6rem;
    /* Joe directive 2026-05-05: bottom gap = side gap (.player-screen padding
       0.4rem). Was 1rem — created visible vertical asymmetry. */
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75);
}
/* Joe directive 2026-05-05 *"tee meile samasugune joon vahele, see on limiite
   ja Main riba vahel ... tee keskele"* — explicit horizontal divider between
   Summary/Monthly section and Main subtab nav, centered in the gap. Inserted as
   <hr class="section-divider"> in `_shell.html`. */
hr.section-divider {
    border: 0;
    border-top: 2px solid rgba(255,255,255,0.4);
    margin: 0.6rem 0;
    padding: 0;
}

/* KPI tiles + Main stats grid stay fixed (Joe didn't ask them to scale).
   Only Summary/Monthly first row (th) and first col (.row-label) scale via
   clamp() in their respective rules above. */

nav.subtabs {
    display: flex;
    gap: 0;
    background: #1a1a1a;            /* match Summary/Month header dark */
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    /* Joe directive 2026-05-05: fluid sizing — subtabs shrink (font + padding)
       rather than triggering overflow-x scrollbar. */
    justify-content: space-between;
    min-width: 0;
}
nav.subtabs .subtab,
nav.subtabs a {
    font-size: 0.95rem;
    padding: 0.7rem 0.8rem;
}
nav.subtabs .subtab {
    flex: 1 1 0;
    text-align: center;
}
nav.subtabs .subtab {
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
/* Joe directive 2026-05-03: hover over tabs uses WHITE text, not orange. */
nav.subtabs .subtab:hover { background: var(--bg-hover); color: #ffffff; }
/* Joe directive 2026-05-03: *"võta oranž pointer ära main 6max 9max riba peal
   valitud kastil"* — no orange underline + white text on active tab. */
nav.subtabs .subtab.active {
    background: var(--bg-row);
    color: #ffffff;
    border-bottom: 0;
}
/* Tab content section — flush with #tab-area bottom border. Joe directive
   2026-05-03: *"tee see üldkasti joone ja alumise kasti vahe samasuureks
   nagu külgede peal, praegu liiga lai vahe"*. */
section.tab-content {
    margin: 0;
    padding: 5px 0 0 0;  /* 5px gap below subtabs nav per Joe directive 2026-05-03 */
    line-height: 0;
    font-size: 0;        /* kills whitespace-text-node height from inline contexts */
    display: block;
}
section.tab-content > * { line-height: normal; font-size: 0.85rem; }
/* 6max + 3bet matrix tables lift up tight against the #tab-area border —
   Joe directive 2026-05-03 *"tõsta üles poole alumist joont"*. */
section.tab-content > .preflop-matrix,
section.tab-content > .threebet-matrix {
    margin-bottom: 0;
    vertical-align: top;
}
/* Last table inside stats-grid (main tab) — flush with #tab-area bottom border.
   Joe directive 2026-05-03 *"see vahe on endiselt, tee kitsamaks, tõmba rohkem
   kokku"*. Tables inside .stats-grid section must NOT add any baseline gap. */
section.tab-content > .stats-grid {
    margin: 0;
    padding: 0;
}
section.tab-content > .stats-grid > .smarthand-stats:last-child {
    margin-bottom: 0;
}
section.tab-content,
section.tab-content > * {
    vertical-align: top;
}

/* Main-tab grid layout (KPI tiles + graph + summary + monthly) */
.layout-grid.main-layout {
    display: grid;
    grid-template-columns: 2fr 1.4fr;
    grid-template-rows: auto auto;
    gap: 0.2rem;
    margin-bottom: 0.2rem;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    min-width: 0;
}
/* Smarthand-style KPI tiles — fixed sizes (Joe 2026-05-05 *"teeme smarthandi
   stiilis"*). */
.kpi-tile {
    background: var(--bg-card);
    border: 1px solid #555;
    /* Joe directive 2026-05-07 (vrgseg.png + 5 iter): veel +5px sissepoole. */
    padding: 0.5rem 2.5rem;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 30px;
    min-width: 0;
}
/* Joe directive 2026-05-07: tekst valgemaks (was #dedede) + bold label
   matching Smarthand home tab style. */
.kpi-tile .kpi-label {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-tile .kpi-value {
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: #ffffff;
    white-space: nowrap;
}
.kpi-tile .kpi-value.positive { color: var(--positive); }
.kpi-tile .kpi-value.negative { color: var(--negative); }
.kpi-grid { gap: 0.35rem; }

/* 15-tile variant (Joe directive 2026-05-02): same 3 cols, 5 rows. Narrower
   tiles via tighter padding + smaller font so all labels (e.g. "EV Winnings:")
   fit without wrap. */
.kpi-grid-15, .kpi-grid-9 {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    padding: 0.4rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    background: #1f1f1f;
    box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75);
}
.kpi-grid-15 .kpi-tile, .kpi-grid-9 .kpi-tile {
    padding: 0.35rem 0.55rem;
    min-height: 26px;
    background: #262626;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
}
.kpi-grid-15 .kpi-tile .kpi-label, .kpi-grid-9 .kpi-tile .kpi-label {
    font-size: 0.8rem;
    color: #e6e6e6;
}
.kpi-grid-15 .kpi-tile .kpi-value, .kpi-grid-9 .kpi-tile .kpi-value {
    font-size: 0.8rem;
    color: var(--text-strong);
}
/* Joe directive 2026-05-05 (9-tile grid only): darker white text + thinner
   border + smaller tile padding. (Tile background reverted to #262626 — Joe
   preferred the distinct tile fill over blending with wrapper.) */
.kpi-grid-9 .kpi-tile {
    /* Joe directive 2026-05-07 (padding.png — match Smarthand original):
       tagasi mõõdukas padding, mitte liiga laia "porno". */
    padding: 0.45rem 0.9rem;
    min-height: 22px;
    /* Joe directive 2026-05-05: home tile border natuke valgem (0.10 → 0.20). */
    border: 1px solid rgba(255,255,255,0.20);
}
/* Joe directive 2026-05-07: tekst valge (was #c0c0c0/#d8d8d8 grey) + bold label. */
.kpi-grid-9 .kpi-tile .kpi-label { color: #ffffff; font-weight: 600; }
.kpi-grid-9 .kpi-tile .kpi-value { color: #ffffff; }
.kpi-grid-15 .kpi-tile .kpi-value.positive, .kpi-grid-9 .kpi-tile .kpi-value.positive { color: var(--positive); }
.kpi-grid-15 .kpi-tile .kpi-value.negative, .kpi-grid-9 .kpi-tile .kpi-value.negative { color: var(--negative); }

.graph-panel {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 0;
    min-height: 220px;
    display: flex;
    box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75);
    /* Defensive — grid items default to min-width: auto (= min-content) which
       could push col 2 wider than its 1.4fr allocation when chart has min-content
       width. Reset to 0 so grid track sizing wins. */
    min-width: 0;
}
.placeholder-graph {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--bg-row);
    border-radius: 4px;
    color: var(--muted);
}
.bb-chart-wrap {
    position: relative;
    flex: 1;
    width: 100%;
}
.bb-chart-wrap.large { height: 480px; }
.bb-chart {
    width: 100%;
    /* Joe directive 2026-05-05 (revised: *"pane vana graafik tagasi nagu oli,
       suur graafik"*) — fixed height back to 220px (was clamped down). Width
       is still 100% of grid cell so chart shrinks horizontally with browser. */
    height: 220px;
    background: #2a2a2a;       /* Match Smarthand graafik12.png chart bg */
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb-chart-large { height: 480px; }
.bb-chart svg { display: block; }

/* $/BB toggle pill — top-center for large chart (Joe directive 2026-05-02
   *"tõsta keskele üles"*); top-right for small/legacy charts (default). */
.bb-chart-toggle {
    position: absolute;
    top: 8px; right: 12px;
    z-index: 5;
    display: inline-flex;
    background: rgba(40, 40, 40, 0.85);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.bb-chart-wrap.large .bb-chart-toggle {
    top: 8px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}
.bb-chart-toggle button {
    background: transparent;
    border: 0;
    color: #888;
    padding: 3px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}
.bb-chart-toggle button:hover { color: var(--text-strong); }
.bb-chart-toggle button.active {
    background: var(--accent);
    color: #1a1a1a;
}

/* Hover tooltip box (top-left of chart) */
.bb-chart-tooltip {
    position: absolute;
    top: 8px; left: 12px;
    z-index: 4;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-strong);
    pointer-events: none;
    min-width: 180px;
}
.bb-chart-tooltip .tt-title {
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 4px;
    font-size: 0.85rem;
}
.bb-chart-tooltip .tt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
}
.bb-chart-tooltip .tt-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bb-chart-tooltip .tt-label { color: #aaa; flex: 1; }
.bb-chart-tooltip .tt-val { font-variant-numeric: tabular-nums; }

/* Graph page KPI strip (horizontal, on /p/{name}/graph) */
.graph-kpi-strip {
    display: flex;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
/* Joe directive 2026-05-08: ~10px vahe KPI strip ja graph card vahel.
   Specificity-bump (.card.graph-kpi-strip) override'b generic `.card` reeglit
   (line 1661 hiljem cascade'is, sama specificity → võidaks default 1.5rem). */
.card.graph-kpi-strip {
    margin-bottom: 0.625rem; /* ≈10px @ 16px root font */
}
.graph-kpi-strip .kpi-cell {
    flex: 1;
    /* Joe directive 2026-05-08: kompaktsem KPI strip — graph card tõstub
       visuaalselt üles poole (lähemale topnav'ile). 0.7rem → 0.4rem vertical. */
    padding: 0.4rem 1rem;
    border-right: 1px solid var(--border);
    text-align: center;
}
.graph-kpi-strip .kpi-cell:last-child { border-right: 0; }
.graph-kpi-strip .kpi-label {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Joe directive 2026-05-08: kompaktsem strip → 0.2 → 0.1 label gap. */
    margin-bottom: 0.1rem;
}
.graph-kpi-strip .kpi-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
/* Joe directive 2026-05-07: + roheline / − punane Winnings/EV/winrate KPI'l,
   sama värv kui main screenil (#81d281 / #f56f6f). Vaja .graph-kpi-strip
   prefiksiga selectorit sest .kpi-value (specifity 2) override'b global .positive (1). */
.graph-kpi-strip .kpi-value.positive { color: var(--positive); }
.graph-kpi-strip .kpi-value.negative { color: var(--negative); }
.graph-kpi-strip .kpi-value.muted { color: var(--muted); }

/* Joe directive 2026-05-07: admin DB-overview — kokku käed + per-user contribution. */
.db-overview {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.db-overview-cell {
    flex: 0 0 auto;
    padding: 0.4rem 1rem 0.4rem 0;
}
.db-overview-cell .kpi-label {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
}
.db-overview-cell .kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.graph-card { padding: 0.8rem; }

/* Summary + Monthly tables — Smarthand DARK theme palette (extracted 2026-05-02
   from `~/Downloads/50CandyJoe - stats_files/dark.css` `.st-table` rules):
     - TH background: #262626 (darker)
     - TD background: #333 (slightly lighter)
     - Border: #505050 / #484848
     - Text: #dedede / #dadada / #84909d */
.summary-table, .monthly-table {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    padding: 0;
    box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75);
    /* Defensive sizing so grid cell constrains both sections identically. */
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.summary-table table, .monthly-table table {
    width: 100%;
    border-collapse: collapse;
    /* Joe directive 2026-05-05 (revised): *"numbrid jäta suureks, aga esimene
       tulp ja esimene rida skaleerub font väiksemaks"* — DATA cells stay at
       fixed 0.88rem; only headers (th) and first-col labels (.row-label) shrink
       fluidly via clamp() in their override rules below. */
    font-size: 0.88rem;
    font-family: 'Lato', -apple-system, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    table-layout: fixed;
}
.summary-table th, .summary-table td,
.monthly-table th, .monthly-table td {
    /* Joe directive 2026-05-05 (bc88972a00ba54c798408f39c5f7c421.png): padding-x
       0.4rem → 0.2rem so longer negative values (`-$723.2` = 7 chars) fit
       centered without crowding right border. */
    padding: 0.5rem 0.2rem;
    /* Joe directive 2026-05-05 *"joonda kõik tulbad keskele summary ja month"*
       — !important defensive in case any future rule (positive/negative class)
       overrides. */
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    border-left: 1px solid rgba(255,255,255,0.18);
    font-variant-numeric: tabular-nums;
    background: #2a2a2a;
    color: #dedede;
    white-space: nowrap;
}
.summary-table th, .monthly-table th {
    background: #1a1a1a;
    color: #dadada;
    font-weight: 400;
    /* Joe directive 2026-05-05 *"summary on üle rea ja winnings üle rea ...
       tee nii et summary ja winnings mahuvad ka ühe tulba sisse"* — reduced
       max from 0.88 → 0.78rem so "Summary" / "Winnings" / etc fit in 1
       column at all viewport widths. nowrap defensive. */
    font-size: clamp(0.62rem, 0.72vw, 0.78rem);
    white-space: nowrap;
}
/* First column (Summary/Month label) explicit width — ensures "Summary" / "Month"
   header has known compact space and labels (HU/SH/2026/04 etc) center cleanly. */
.summary-table th:first-child,
.summary-table td.row-label,
.monthly-table th:first-child,
.monthly-table td.row-label {
    width: clamp(58px, 7.2vw, 80px);
    min-width: clamp(58px, 7.2vw, 80px);
    max-width: clamp(58px, 7.2vw, 80px);
    text-align: center;
}
/* Joe directive 2026-05-05: first column inherits same font as data cells. No
   explicit width — table-layout:auto sizes column to content (HU/SH/NL1000)
   responsively as viewport shrinks. */
.summary-table .row-label, .monthly-table .row-label {
    text-align: center;
    color: #dedede;
    font-weight: 400;
    background: #1a1a1a;
    /* First-col labels shrink fluidly (Joe 2026-05-05). */
    font-size: clamp(0.72rem, 0.78vw, 0.88rem);
}
.summary-table tr:hover td, .monthly-table tr:hover td { background: #484848; }
/* Top players sortable column — single-arrow flip. Inactive: muted ▼;
   active asc: ▲ accent; active desc: ▼ accent. Click toggles direction. */
.top-table th.sortable { padding: 0; }
/* Joe directive 2026-05-07: sort-arrow LABEL ALL (mitte kõrval) — vertikaalne
   stack et veerud kitsamalt mahtuksid. */
.top-table th.sortable .sort-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 6px; color: inherit;
    text-decoration: none; cursor: pointer;
    line-height: 1.1;
}
.top-table th.sortable .sort-link:hover { background: rgba(255,255,255,0.08); }
.top-table th.sortable .sort-arrow {
    margin-left: 0;
    margin-top: 2px;
    color: #555;
    font-size: 0.7em;
    line-height: 1;
}
.top-table th.sortable .sort-arrow.active { color: var(--accent, #ff9f43); }
/* Joe directive 2026-05-05 "tõsta see riba esile" — header row visual lift.
   Stronger background + bold + accent border-bottom to separate from data. */
.top-table thead {
    background: #2a2a2a;
    border-bottom: 2px solid var(--accent, #ff9f43);
}
.top-table thead th {
    background: #2a2a2a;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.78em;
    padding: 7px 6px;
}
/* Override the alternating-shade rule for header row so the lift stays uniform. */
.top-table thead th:nth-child(2n) { background: #303030; }
/* Period switcher buttons in top nav (3M / 6M / 12M | SH / FR). Joe directive
   2026-05-05: "ära tee nii kõrgeid kaste, normaalsed kastid teksti ümber". */
.period-switch { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; flex-wrap: nowrap; }
/* When period-switch lives on the right (after nav, alongside search/settings)
   push it right via auto margin — sits next to search box. */
.period-switch.period-switch-right { margin-left: auto; flex-shrink: 0; }
/* Joe directive 2026-05-08: responsive topnav. Default suurused JOE-VALIDATED
   laia brauseri jaoks. Kompakt'imine ainult kitsa viewport'i puhul (<1300px,
   <1000px), MITTE alati. */
@media (max-width: 1300px) {
    .topbar .nav-item {
        padding: 0.45rem 0.45rem;
        font-size: clamp(0.65rem, 0.6vw, 0.75rem);
        letter-spacing: 0.8px;
    }
    .period-switch.period-switch-right a {
        padding: 2px 5px;
        font-size: 0.7em;
    }
    .period-switch.period-switch-right .period-divider {
        padding: 0 1px;
    }
}
@media (max-width: 1000px) {
    .topbar .nav-item {
        padding: 0.4rem 0.35rem;
        font-size: 0.68rem;
        letter-spacing: 0.5px;
    }
    .period-switch.period-switch-right a {
        padding: 2px 4px;
        font-size: 0.65em;
    }
}
/* (Removed: search-form is now last child after ☰ settings, not before ⚙.) */
.period-switch a {
    padding: 2px 7px; border: 1px solid #444; border-radius: 3px;
    color: #aaa; text-decoration: none; font-size: 0.75em; background: #2a2a2a;
    line-height: 1.4;
}
.period-switch a:hover { background: #3a3a3a; color: #fff; }
.period-switch a.active { background: var(--accent, #ff9f43); color: #1a1a1a; border-color: var(--accent, #ff9f43); }
.period-switch .period-divider { color: #555; padding: 0 3px; font-size: 0.85em; }
/* Top page card — wider (~100px wider) AND horizontally centered.
   Base `.container { max-width: 980px; margin: 0 auto }` — override max-width
   only; keep auto margins so container stays centered in viewport. */
body.top-page main { max-width: 1400px; }
.top-page-filter {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px; padding: 6px 10px; background: #2a2a2a;
    border-radius: 4px; font-size: 0.85em; color: #ccc;
    /* Joe directive 2026-05-05: filter ribbon text all on one line. */
    flex-wrap: nowrap; white-space: nowrap;
}
/* Joe directive 2026-05-07: filter labels valged (was #888 muted). */
.top-page-filter label { color: #ffffff; font-size: 0.85em; white-space: nowrap; }
/* Joe directive 2026-05-07: settings 🔧 ikoon natuke suurem (sama kõrgus kui
   admin shield 🛡 mõlemad emoji-default font-size'iga väiksed). */
.topbar .nav-settings-icon, .topbar .nav-admin-icon {
    font-size: 1.25em;
    line-height: 1;
}
/* Joe directive 2026-05-07: peida number-input'i spinner-nupud (Joe sisestab käsitsi). */
.top-page-filter input[type="number"]::-webkit-outer-spin-button,
.top-page-filter input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.top-page-filter input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* Joe directive 2026-05-07: Top page filter-buttons (Any/HU/SH/FR | 50/100/...). */
.top-page-filter .top-filter-buttons { display: inline-flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.top-page-filter .top-filter-buttons a {
    padding: 2px 8px;
    border: 1px solid #444;
    border-radius: 3px;
    color: #aaa;
    text-decoration: none;
    font-size: 0.85em;
    background: #2a2a2a;
    line-height: 1.4;
}
.top-page-filter .top-filter-buttons a:hover { background: #3a3a3a; color: #fff; }
.top-page-filter .top-filter-buttons a.active { background: var(--accent, #ff9f43); color: #1a1a1a; border-color: var(--accent, #ff9f43); }
.top-page-filter .top-filter-divider { color: #555; padding: 0 3px; font-size: 0.85em; }
/* Joe directive 2026-05-07: time filtrid eraldatud limit-filtritest. */
.top-page-filter .top-filter-spacer { display: inline-block; width: 16px; }
.top-page-filter .top-date-range { display: inline-flex; gap: 0.3rem; align-items: center; }
.top-page-filter .filter-date-wrapper { position: relative; }
.top-page-filter .filter-date {
    background: #1a1a1a; color: #fff; border: 1px solid #444;
    padding: 3px 8px; border-radius: 3px; font-size: 0.85em;
    width: 90px; text-align: center; cursor: pointer;
}
.top-page-filter .filter-date::placeholder { color: #aaa; }
.top-page-filter .filter-date-sep { color: #555; font-size: 0.85em; }
.top-page-filter select, .top-page-filter input[type="number"] {
    background: #1a1a1a; color: #fff; border: 1px solid #444;
    padding: 3px 6px; border-radius: 3px; font-size: 0.95em;
}
/* Joe directive 2026-05-05: Reset link in Top filter — clears to defaults.
   Joe directive 2026-05-08: margin-left: auto eemaldatud — auto on nüüd
   ⚙ ikoonil (top-stat-filter-menu), Reset järgneb form gap'iga. */
.top-page-reset {
    padding: 3px 12px; background: #2a2a2a; border: 1px solid #555;
    border-radius: 3px; color: #ccc; text-decoration: none; font-size: 0.85em;
    cursor: pointer;
}
.top-page-reset:hover { background: #3a3a3a; color: #fff; border-color: var(--accent); }
/* Joe directive 2026-05-05: Top table — text + numbers center-aligned. */
.top-table th, .top-table td { text-align: center !important; }
/* Joe directive 2026-05-08: PLAYER veerg (esimene) vasakule — nimed
   loomulikult vasakult-paremale loetavad. Override `text-align: center
   !important` üldreeglile (1467) sama specificity'iga + `!important`. */
.top-table th:first-child,
.top-table td:first-child { text-align: left !important; }
/* Joe directive 2026-05-08: PLAYER label vasakul, kolmnurk keskel ALL label'i.
   `width: fit-content` + `align-items: center` paneb label+arrow ühte
   vertikaalsesse "blokki" kus arrow on label-teksti laiuse keskel; blokk
   ise on cell'i vasakul (text-align: left). */
.top-table th:first-child .sort-link {
    align-items: center;
    width: fit-content;
}
/* Joe directive 2026-05-07: top-table player nimed valged (orange asemel). */
.top-table td a.player-link { display: inline-block; color: #ffffff; }
.top-table td a.player-link:hover { color: var(--accent-hi); }
/* Joe directive 2026-05-07 (toppö.png + iteratsioonid): tabel skaleerub
   browser kitsenedes — font + padding clamp'iga. table-layout auto et
   pikemate teksti veerud (PLAYER, FLOP AGRO header) saavad oma loomuliku
   laiuse, mitte ei klipita ühtlaseks 8.33%-ks. nowrap kõikidel cell'idel
   et header MITTE wrappiks 2 rea peale. Kui viewport väga kitsas, .card
   parent saab overflow-x scroll backup'iks. */
.result-table.compact.top-table {
    /* Joe directive 2026-05-07 iter 7: ridade laiust ühtlustada — `fixed` jaotab
       16 veergu uniform 6.25%-ks. PLAYER veerg saab natuke laiema (12%) et pikad
       nimed mahuksid, ülejäänud 15 stat-veergu jagavad 88% = ~5.87% each. */
    table-layout: fixed;
    width: 100%;
}
.result-table.compact.top-table th:first-child,
.result-table.compact.top-table td:first-child { width: 12%; }
.result-table.compact.top-table th,
.result-table.compact.top-table td {
    /* Joe directive 2026-05-07 iter 5: kitsamad rida + agressiivsem narrow-fit
       et "Turn AG / Riv AG" mahuks ka kitsamal viewport'il. Font floor 0.5rem,
       padding-y väiksem (rida kitsam), padding-x tighter. */
    font-size: clamp(0.5rem, 1.0vw, 0.85rem);
    padding: clamp(0px, 0.25vw, 4px) clamp(1px, 0.25vw, 6px);
    white-space: nowrap;
}
body.top-page .card { overflow-x: auto; }
/* Joe directive 2026-05-05: Flop/Turn/Riv Agro columns narrower (last 3 cols).
   Use nth-last-child so it scales if columns added/removed at start. */
.top-table th:nth-last-child(-n+3),
.top-table td:nth-last-child(-n+3) { padding-left: 3px; padding-right: 3px; font-size: 0.93em; }
/* Joe directive 2026-05-05: alternating column shading on Top table — every
   other column has lighter tint so eye tracks rows easily. */
.top-table tbody td:nth-child(2n) { background: rgba(255,255,255,0.04); }
.top-table thead th:nth-child(2n) { background: rgba(255,255,255,0.06); }
/* Joe directive 2026-05-05: highlight active filter month — light white tone. */
.monthly-table tr.monthly-row.active td { background: rgba(255,255,255,0.18); color: #fff; }
.monthly-table tr.monthly-row.active td.row-label { background: rgba(255,255,255,0.26); }
.summary-table .positive, .monthly-table .positive { color: #81d281; }
.summary-table .negative, .monthly-table .negative { color: #f56f6f; }
/* Joe directive 2026-05-07: highlighted (active) kuu — negatiivne winnings/EV
   peab JÄÄMA punaseks (mitte muutuma valgeks). Active row override'is `color: #fff`
   spetsificity 0,3,1 ületas .negative (0,2,0). Tagasta värvid täppispetsi-fika
   kombinatsiooniga `tr.monthly-row.active td.negative` (0,3,1, võitab source order'iga). */
.monthly-table tr.monthly-row.active td.positive { color: #81d281; }
.monthly-table tr.monthly-row.active td.negative { color: #f56f6f; }
/* Joe directive 2026-05-07: HU/SH/FR rida ALATI nähtaval, sh 0-hand HU. Empty-row mute. */
.summary-table tr.empty-row td { color: var(--muted); cursor: default; }
.summary-table tr.empty-row { pointer-events: none; }
.placeholder-note { margin: 0.5rem 0 0; text-align: center; }

/* Smarthand-style stats grid (Main tab — slice 7, matches smartidisain.png 2026-05-02).
   Header + row-label = pale lavender-blue #99B5DC, data cells dark grey #5C5C5C,
   white text. Fixed first-column width across all 3 sub-tables for visual alignment. */
.stats-grid {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    line-height: 0;  /* kills phantom whitespace text-node height between tables */
    font-size: 0;
}
.stats-grid > * { line-height: 1.4; font-size: 0.85rem; }
.stats-grid h3 { display: none; }
.smarthand-stats {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;     /* fixed — Joe didn't ask Main stats to scale */
    font-family: 'Lato', -apple-system, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    table-layout: fixed;
}
.smarthand-stats + .smarthand-stats {
    margin-top: -1px;
}
.smarthand-stats th:first-child,
.smarthand-stats td:first-child {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}
/* Smarthand EXACT palette (2026-05-02 — extracted from saved HTML
   `50CandyJoe - stats.html` JSON: backgroundColor properties on table cells):
     - Headers + row labels: #0f44e4 (deep navy-blue)
     - Data cells ALTERNATING per column: #e4ded8 (cream) and #95b1e4 (lavender-blue)
     - Data cell text: #060606 (near-black)
     - Border + empty: #1A1A1A */
.smarthand-stats th {
    background: #0f44e4;
    color: #fff;
    padding: 0.5rem 0.4rem;
    font-weight: 400;
    border: 1px solid #1A1A1A;
    text-align: center;
    white-space: nowrap;
    /* Joe directive 2026-05-05: headers (Hands/Winnings/EV/...) scale fluidly. */
    font-size: clamp(0.72rem, 0.78vw, 0.88rem);
}
/* Joe directive 2026-05-07: 1. tulp ülevalt alla tumesinine (sh empty corner
   cell). Eemaldatud #262626 override → th:first-child saab navy `.smarthand-stats th`'lt. */
.smarthand-stats td {
    padding: 0.5rem 0.4rem;
    text-align: center;
    border: 1px solid #1A1A1A;
    color: #060606;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Data cells ALTERNATE per column (Smarthand convention).
   nth-child(even) = Hands/EV/VPIP/3Bet/Steal BTN/3Bet OOP/4Bet/4Bet OOP/WTSD/CBet IP/CBet OOP IP variants etc. → cream
   nth-child(odd) (excluding first which is row-label) = Winnings/bb100/PFR/Steal CO/Steal SB → lavender */
.smarthand-stats td:nth-child(even) { background: #e4ded8; }
.smarthand-stats td:nth-child(odd):not(:first-child) { background: #95b1e4; }
/* Row labels — deep navy-blue. !important defensive: nth-child(even/odd)
   alternating-bg rules above (specificity (0,2,1)+(0,3,1)) override naive
   `.smarthand-stats .row-label`, so any non-first-column .row-label cell
   (e.g. Limp-Raise label at col 6 row 2 — Joe directive 2026-05-06) needs
   !important to win. */
.smarthand-stats td.row-label {
    background: #0f44e4 !important;
    color: #fff !important;
    font-weight: 400;
    text-align: center;
    /* Joe directive 2026-05-05: first-col labels (Basic stats / PreFlop /
       PreFlop Fold / CBet / Flop / Turn / River) scale fluidly. */
    font-size: clamp(0.72rem, 0.78vw, 0.88rem);
}
.smarthand-stats td.muted {
    background: #262626 !important;
    color: #6a6a6a;
}
/* Joe directive 2026-05-07 (vsrer.png): empty cell'idel sama värv kui sama
   tulba teistel cell'idel — eemaldatud dark #262626 override, las nth-child
   even/odd bg rakendub (cream/lavender alternating). */
.smarthand-stats td.empty {
    border-color: #1A1A1A;
}
/* Stats Grid: Joe directive 2026-05-02 — Winnings/EV black like other cells (no green/red). */
.smarthand-stats td.positive { color: #060606; font-weight: 400; }
.smarthand-stats td.negative { color: #060606; font-weight: 400; }

/* (Older `.subtab.active` orange-underline rule removed per Joe directive
   2026-05-03 *"võta oranž pointer ära main 6max 9max riba peal valitud
   kastil"*. See line ~317 for current active-tab styling.) */

a.player-link { color: var(--accent); font-weight: 600; }
a.player-link:hover { color: var(--accent-hi); text-decoration: underline; }

/* Page toggle pills (e.g., Top mängijad 1-100 / 101-200) */
.page-toggle {
    display: flex;
    gap: 0.4rem;
    margin: 0.6rem 0 1rem;
}
.page-toggle .page-btn {
    padding: 0.4rem 1rem;
    background: var(--bg-row);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.page-toggle .page-btn:hover { background: var(--bg-hover); color: var(--accent-hi); }
.page-toggle .page-btn.active {
    background: var(--accent);
    color: #1a1a1a;
    border-color: var(--accent);
}

.search-page-form {
    display: flex;
    gap: 0.6rem;
    max-width: 600px;
    margin-bottom: 1rem;
}
.search-page-form input {
    flex: 1;
    background: var(--bg-row);
    border: 1px solid var(--border);
    color: var(--text-strong);
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
}

/* Joe directive 2026-05-05: *"tee sama loogikaga nagu originaal"* — Smarthand
   keeps KPIs + chart horizontal at narrow widths via fluid font/padding scaling
   (clamp()), NOT breakpoint-based stacking. Earlier `(max-width: 900px) →
   layout 1fr + kpi 2col` collapsed the panel vertically too aggressively.
   Stacking only kicks in on phone-narrow (≤500px). */
@media (max-width: 500px) {
    .layout-grid.main-layout { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* generic card */
.card {
    background: var(--bg-card);
    padding: 1.5rem 2rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.card h2 { margin-top: 0; color: var(--text-strong); }

/* upload form */
.upload-form { display: flex; flex-direction: column; gap: 1rem; }
.dropzone-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px dashed var(--border);
    background: var(--bg-row);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: var(--accent); background: var(--bg-hover); }
.dropzone.dragover {
    border-color: var(--accent);
    background: var(--bg-hover);
    box-shadow: 0 0 0 3px rgba(255, 148, 54, 0.25);
}
.selected-files {
    padding: 0.6rem 0.8rem;
    background: var(--bg-row);
    border-radius: 4px;
    min-height: 1.2rem;
    font-family: monospace;
    font-size: 0.85rem;
}
.selected-files:empty { display: none; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Hide native file input — peida kohmakas "No file chosen" tekst, label = click target. */
.dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.dropzone-text { color: var(--text-strong); font-size: 0.95rem; }
.dropzone-sub { font-size: 0.8rem; color: var(--text); }
/* "Lae üles" button — small, centered (Joe directive 2026-05-06). */
#upload-submit { align-self: center; padding: 0.45rem 1.4rem; }
.dropzone code {
    background: var(--bg-card);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    color: var(--accent);
}
@media (max-width: 600px) {
    .dropzone-row { grid-template-columns: 1fr; }
}

/* Upload progress bar */
.upload-progress {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-row);
    border-radius: 4px;
    border: 1px solid var(--border);
}
.upload-progress[hidden] { display: none; }
.progress-track {
    flex: 1;
    height: 16px;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi));
    transition: width 0.15s ease-out;
    border-radius: 8px;
}
.progress-label {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-strong);
    min-width: 180px;
    text-align: right;
}

/* HTMX hx-indicator: visible only during in-flight requests */
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Pool prewarm progress card (under upload form) */
.prewarm-card { margin-top: 1rem; }
.prewarm-card h3 { margin: 0 0 0.6rem; color: var(--text-strong); font-size: 1rem; }
.small { font-size: 0.85rem; }

/* result + history table */
.result-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.result-table th, .result-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.result-table th { color: var(--muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.result-table tbody tr:hover { background: var(--bg-hover); }
.result-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.result-table .total-row { background: var(--bg-row); }
.result-table .total-row td { border-top: 2px solid var(--border); }
.result-table.compact th, .result-table.compact td { padding: 0.35rem 0.55rem; font-size: 0.88rem; }
.result-table.compact th { font-size: 0.78rem; }
/* Top tab — pull stats 5px left (Joe directive 2026-05-04): tighten right padding on stat cells */
.result-table.top-table th.num, .result-table.top-table td.num { padding-right: calc(0.55rem - 5px); }

.positive { color: var(--positive); }
.negative { color: var(--negative); }
.warn { color: var(--accent); }

.actions { margin-top: 1.5rem; display: flex; gap: 1rem; }
.btn-link {
    background: var(--bg-row);
    color: var(--text-strong);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.btn-link:hover { background: var(--bg-hover); color: var(--accent); }

details summary { cursor: pointer; color: var(--accent); }
.errors ul { margin: 0.4rem 0 0; padding-left: 1.4rem; font-size: 0.85rem; color: var(--negative); }

/* ---- 6max preflop matrix (Slice 9 Pack 9A) ---- */
.preflop-matrix {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
    background: var(--bg-card);
    /* No outer border/radius — let #tab-area frame the table edge-to-edge.
       Joe directive 2026-05-03 *"see kõige alumine üldkasti riba pole ikka
       rohkem koos fold to squueze alumise kasti joonega, tõsta üles poole"* —
       eliminates visible double-line gap between table border and #tab-area border. */
    border: 0;
    border-radius: 0;
    margin: 0;
    /* Joe directive 2026-05-05: *"tee 6max ja 9max 1:1-le graafiku joondused,
       praegu natuke nihkes"*. fixed layout ensures 6max ↔ 9max identical column
       widths (auto layout sized cols to content → subtle drift between tabs). */
    table-layout: fixed;
}
.preflop-matrix th,
.preflop-matrix td {
    padding: 0.4rem 0.7rem;
    text-align: center;
    border: 1px solid #1a1a1a;
    color: #d0d0d0;
    /* Joe directive 2026-05-05: *"kui sample on mõne statsi taga, siis see teeb
       rida kõrgemaks, kas saad nii teha et rea vahed ja laiuse ei muutu"*.
       Fixed line-height absorbs <sub.sample-n> descent so rows don't grow when
       small-N samples appear in some cells but not others. */
    line-height: 1.6;
}
.preflop-matrix thead th {
    background: #0f44e4;  /* main screen deep navy-blue (Joe directive 2026-05-03) */
    font-weight: 600;
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.preflop-matrix td.row-label,
.preflop-matrix thead th:first-child {
    /* thead first <th> needs same width — table-layout: fixed reads column
       widths from the FIRST ROW (thead), so width on body td.row-label alone
       is ignored. Joe directive 2026-05-05: *"tee esimest tulpa laiemaks"*. */
    width: 178px;
    white-space: nowrap;
}
.preflop-matrix td.row-label {
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    background: #0f44e4;  /* deep navy-blue — matches main screen + column header */
}
.preflop-matrix td.row-label.sub {
    /* Joe directive 2026-05-05: *"joonda tekst keskele"* — drop padding-left so
       sub-row labels are truly centered like main rows (was indented 1.6rem,
       which shifted centered text right vs non-sub rows). Hierarchy now via
       lighter font color + weight, not indent. */
    font-weight: 400;
    color: #d6e2f3;       /* lighter blue for sub-rows (IP/OOP) on navy */
    background: #0f44e4;
}
.preflop-matrix tr.row-blank td {
    background: transparent;
    border: 0;
    padding: 0.15rem 0;
    height: 0.15rem;
}
/* Blank-row TOTAL preserver — keeps the white border continuous through
   blank spacer rows. Joe directive 2026-05-03 *"totali joon ikka katkeb,
   tee nii et ei katke"*. */
.preflop-matrix tr.row-blank td.total-keep {
    background: var(--bg-card);
    border-left: 3px solid #d0d0d0;
    border-right: 3px solid #d0d0d0;
    border-top: 0;
    border-bottom: 0;
}
/* Joe directive 2026-05-03: *"võta üldse punane ja roheline ja sinine 6max
   tabis kastidelt ära, jäta ainult sama värv mis on raise limper MP kastil"*.
   All data cells uniform dark `var(--bg-card)` (#333) — same as Raise Limper MP.
   Row classes (.row-pink/red/blue/green) intentionally produce NO color now. */
/* Joe directive 2026-05-03: *"tee 6max kastis üle rea helesiniseks nagu main
   screeni helesinine"* + *"tee TOTAL kasti sees samamoodi"* — alternating rows:
   lavender every other data row INCLUDING TOTAL column. Row labels + header
   row stay navy. */
.preflop-matrix tbody tr:nth-child(even) td:not(.row-label) {
    background: #95b1e4;       /* main screen lavender-blue */
    color: #060606;
}
/* Joe directive 2026-05-05: *"asendame tumeda kasti värvi valgemat tooni kasti
   värviga, sama mida kasutame main screenil"* — odd data rows previously fell
   through to dark var(--bg-card) (#333). Replace with main-screen cream #e4ded8
   so 6max/9max matrix matches main screen palette (cream + lavender alternation). */
.preflop-matrix tbody tr:nth-child(odd) td:not(.row-label):not(.empty) {
    background: #e4ded8;       /* main screen cream */
    color: #060606;
}
/* Joe directive 2026-05-03: *"sample statsi taha tumeda riba peal hele font,
   heleda riba peal tume font"*. sample-n inherits color from cell's color
   (set per row: dark cells use `#d0d0d0`, lavender even rows use `#060606`),
   then opacity tones it down. */
.preflop-matrix sub.sample-n {
    font-size: 0.6rem;
    margin-left: 2px;
    color: inherit;
    opacity: 0.6;
    vertical-align: sub;
    font-weight: 400;
}
/* FOLD to 3-Bet expandable IP/OOP rows (Joe directive 2026-05-04) — collapsed by default. */
.preflop-matrix tr.sub-fold3 { display: none; }
.preflop-matrix tbody.show-fold3 tr.sub-fold3 { display: table-row; }
.preflop-matrix tr.fold3-row { cursor: pointer; }
.preflop-matrix tr.fold3-row .disclosure {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.55em;
    transition: transform 0.15s ease;
    opacity: 0.85;
}
.preflop-matrix tbody.show-fold3 tr.fold3-row .disclosure { transform: rotate(180deg); }
/* Empty TOTAL cell on RFI / Raise Limper rows (Joe directive 2026-05-04 — TOTAL
   misleading for these stats since BB never opens). */
.preflop-matrix td.empty {
    background: #1a1a1a;
    color: transparent;
}

/* ---- Post (SRP) postflop matrix (Joe directive 2026-05-04, srp post.png) ---- */
.postflop-srp {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
    background: var(--bg-card);
    border: 0;
    margin: 0;
}
.postflop-srp th,
.postflop-srp td {
    padding: 0.4rem 0.7rem;
    text-align: center;
    border: 1px solid #1a1a1a;
    color: #d0d0d0;
    line-height: 1.6;       /* stable row height (sub-N etc) — same as 6max */
}
.postflop-srp thead th {
    background: #0f44e4;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.postflop-srp td.row-label {
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    width: 220px;
    background: #0f44e4;
    white-space: nowrap;
}
.postflop-srp td.empty { background: #1a1a1a; }
/* Joe directive 2026-05-05: *"tee POST (SRP) ja Post (3BP) sama disaini keelega
   nagu 6max ja 9max tabid"*. Cream/lavender row alternation matching main-screen
   palette + 6max/9max preflop matrix. */
.postflop-srp tbody tr:nth-child(even) td:not(.row-label):not(.empty) {
    background: #95b1e4;       /* lavender — same as 6max even */
    color: #060606;
}
.postflop-srp tbody tr:nth-child(odd) td:not(.row-label):not(.empty) {
    background: #e4ded8;       /* cream — same as 6max odd */
    color: #060606;
}
/* Joe directive 2026-05-06 (Post 3BP): Check-Raise sub-row LABEL cells light
   cream (sama toon kui Cbet IP flop kast = #e4ded8). Andmeread (data cells)
   jäävad default nth-child alternating'iks — ainult vasakpoolne label-kast
   muutub. */
.postflop-srp tbody tr.cr-sub td.row-label.sub {
    background: #95b1e4 !important;   /* lavender — same as Check-Raise FLOP cell */
    color: #060606;
    font-style: italic;
    padding-left: 1.4rem;
}

/* ---- 4Bet (6M) tab — 5 rows (positions) × 5 data cols (4-Bet / GTO / IP / OOP / Fold 5-Bet)
       Joe directive 2026-05-04, per `4bet tab.png`.
       Joe directive 2026-05-07: lisatud 4-Bet IP + OOP veerud GTO järele;
       table-layout fixed + uniform 5 data-veeru laius; GTO värv match'ib 3bet
       matrix GTO baseline (#1a1a1a + #e0e0e0). ---- */
.fourbet-tab {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    font-size: 0.95rem;
    background: var(--bg-card);
    margin: 0;
}
.fourbet-tab th, .fourbet-tab td {
    padding: 0.55rem 0.5rem;
    text-align: center;
    /* Joe directive 2026-05-07: heledam piirjoon (sama nagu .threebet-matrix #3a3a3a). */
    border: 1px solid #3a3a3a;
    color: #ffffff;
}
.fourbet-tab thead th:not(:first-child),
.fourbet-tab tbody td:not(.row-label) { width: 16%; }
.fourbet-tab thead th { background: #0f44e4; color: #fff; font-weight: 600; }
/* Joe directive 2026-05-07: row-label sama värv kui 3bet (6m) tabis (#161616 taust). */
.fourbet-tab td.row-label { background: #161616; color: #c8c8c8; font-weight: 500; width: 120px; font-size: 0.9rem; }
.fourbet-tab .col-4bet { background: #b03434; }
.fourbet-tab .col-gto { background: #1a1a1a; color: #e0e0e0; }
.fourbet-tab .col-fold5 { background: #95b1e4; color: #060606; }

/* ---- 3Bet pos×pos matrix (slice 9 Pack 9C, 3bet-6m sub-tab) ----
   Layout per Joe näidis ~/Downloads/3bet.png. Each cell has two halves:
   LEFT = Joe actual value on dark, RIGHT = GTO baseline as full-height
   bright-purple rectangle. Column headers mauve, row labels dark. */
.threebet-matrix {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.95rem;
    background: #0d0d0d;
    border: 1px solid #3a3a3a;
    table-layout: fixed;
}
.threebet-matrix th,
.threebet-matrix td {
    text-align: center;
    border-right: 1px solid #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
    color: #e0e0e0;
    vertical-align: middle;
    padding: 0;
    height: 38px;
}
.threebet-matrix th:last-child,
.threebet-matrix td:last-child { border-right: 0; }
.threebet-matrix tr:last-child td { border-bottom: 0; }

.threebet-matrix thead th {
    background: #0f44e4;  /* main screen smarthand-stats deep navy-blue */
    font-weight: 600;
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid #3a3a3a;
}
/* First-cell (empty top-left) ALSO dark navy per Joe directive 2026-05-03
   *"tee ülemine rida tumesinine nagu main screenil, kaasa arvatud esimene
   tume kast"*. */
.threebet-matrix td.row-label {
    text-align: center;
    color: #c8c8c8;
    font-weight: 500;
    background: #161616;
    width: 80px;
    padding: 0;
    font-size: 0.9rem;
}
/* Cell internals: two flex halves — Joe value (left, dark) + GTO box (right, purple). */
.threebet-matrix .threebet-cell {
    display: flex;
    align-items: stretch;
    height: 38px;
    width: 100%;
    margin: 0;
}
/* Joe directive 2026-05-07: .actual selector laiendatud (mitte ainult .threebet-cell sees)
   et 3bet (9m) statside kastid samuti lavender — 9m'l pole .threebet-cell wrapperit. */
.threebet-matrix .actual {
    background: #95b1e4;  /* lavender-blue (Joe stat) — main screen smarthand-stats odd cols */
    color: #060606;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    box-sizing: border-box;
    font-weight: 500;
    height: 100%;
}
.threebet-matrix .threebet-cell .actual { flex: 1 1 50%; }
.threebet-matrix .threebet-cell .gto-baseline {
    flex: 1 1 50%;
    background: #1a1a1a;  /* dark grey (GTO baseline) */
    color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    position: relative;
}
/* Joe directive 2026-05-07: väike "GTO" tag GTO-kasti üleval paremas. */
.threebet-matrix .gto-baseline .gto-tag {
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.45);
    font-weight: 400;
    letter-spacing: 0.5px;
    pointer-events: none;
}
/* Joe directive 2026-05-07: tühjadel cell'idel (puudub GTO baseline = invalid pos
   combo nt MP vs MP) eemalda valged piirjooned visuaalselt. */
.threebet-matrix td.empty {
    border-color: transparent;
    background: #0d0d0d;
}
/* Joe directive 2026-05-07: sample-n must (was valge) — heledal lavender
   `.actual` taustal valge ei paistnud välja. Mõjutab 3bet (6m) + 3bet (9m). */
.threebet-matrix sub.sample-n {
    font-size: 0.55rem;
    margin-left: 2px;
    color: rgba(0,0,0,0.55);
    vertical-align: sub;
}
/* Click target = ONLY .actual half (Joe stat), NOT .gto-baseline.
   Joe directive 2026-05-03: *"klickida saab ainult mängija statsi peal
   gridi avamiseks mitte gto statsi peal"*. */
.threebet-matrix .threebet-cell .actual.steal-host {
    cursor: pointer;
    position: relative;
}
/* Joe directive 2026-05-07 evening: vana `background: #b8cef0` rule eemaldatud
   et 3bet (6m) ei oleks heledam kui 3bet (9m). Mõlemad kasutavad nüüd ainult
   cross-tab overlay rule (rgba(255,255,255,0.20)) — ühtlane heledus. */
/* TOTAL column — Joe directive 2026-05-05 (Option C — Neon): *"valge sees +
   2px tume + 6-8px hajunud helekuldne või sinine glow väljaspool"*.
   Layered: 2px black border (border-left/right/top/bottom) → 2px white inset
   shadow (inside the black) → diffuse gold glow (outer box-shadow with blur).
   Horizontal-only offsets on outer glow avoid internal vertical bars between
   stacked cells in the column. position+z-index+isolation force outer glow
   to render above adjacent cells under `border-collapse: collapse`. */
/* TOTAL column 3-layer frame (Joe directive 2026-05-05): outer 2px black border
   + middle 2px light grey inset (#cccccc) + innermost thin black inset (3px depth,
   visible 1px at 2-3px region since grey covers 0-2px on top). Order: GREY first
   (paints 0-2px on top), BLACK second (paints 0-3px behind, visible 2-3px). + gold
   neon glow outside (kept from earlier Option C). */
.preflop-matrix th:nth-child(2),
.preflop-matrix td:nth-child(2) {
    position: relative;
    z-index: 2;
    isolation: isolate;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    box-shadow:
        inset 2px 0 0 #cccccc,
        inset -2px 0 0 #cccccc,
        inset 3px 0 0 #000000,
        inset -3px 0 0 #000000,
        -10px 0 14px 0 rgba(255, 200, 60, 0.55),
         10px 0 14px 0 rgba(255, 200, 60, 0.55);
    font-weight: 700;
}
.preflop-matrix thead th:nth-child(2) {
    border-top: 2px solid #000000;
    background: #0f44e4;
    box-shadow:
        inset 2px 2px 0 #cccccc,
        inset -2px 0 0 #cccccc,
        inset 3px 3px 0 #000000,
        inset -3px 0 0 #000000,
        -10px 0 14px 0 rgba(255, 200, 60, 0.55),
         10px 0 14px 0 rgba(255, 200, 60, 0.55),
         0 -10px 14px 0 rgba(255, 200, 60, 0.55);
}
.preflop-matrix tbody tr:last-child td:nth-child(2) {
    border-bottom: 2px solid #000000;
    box-shadow:
        inset 2px 0 0 #cccccc,
        inset -2px -2px 0 #cccccc,
        inset 3px 0 0 #000000,
        inset -3px -3px 0 #000000,
        -10px 0 14px 0 rgba(255, 200, 60, 0.55),
         10px 0 14px 0 rgba(255, 200, 60, 0.55),
         0 10px 14px 0 rgba(255, 200, 60, 0.55);
}
.preflop-matrix tbody td:nth-child(2) {
    background: var(--bg-card);  /* #333 — same as Home: KPI tile */
    color: #ffffff;
}
/* (Row-class TOTAL overrides removed — row classes no longer set colors after
   Joe directive 2026-05-03 *"võta üldse punane ja roheline ja sinine ära"*.) */

/* ---- Steal hand-combo popup (Slice 8) ---- */
/* Container is the cell holding the Steal stat — popup floats absolute. */
.steal-host {
    position: relative;
}
/* position:fixed escapes #tab-area's overflow:hidden ancestor (Joe screenshot
   2026-05-02 — bottom rows clipped). Anchored to viewport center-right. */
.steal-popup-anchor {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}
.steal-host.open .steal-popup-anchor:not(:empty) {
    display: block;                 /* shows on click, persists until click outside */
}
.steal-host.htmx-request::after {
    content: "Loading…";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.3rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    color: var(--muted);
    font-size: 0.7rem;
    z-index: 1000;
}
.steal-popup {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75);
    padding: 0.5rem;
    font-family: 'Lato', sans-serif;
}
.steal-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Joe directive 2026-05-07 (round 2): kitsam ülemine rida —
       bottom padding 0.4rem → 0.2rem, font-size 0.8rem → 0.72rem. */
    padding: 0 0.2rem 0.2rem;
    color: var(--text-strong);
    font-size: 0.72rem;
}
.steal-popup-title { font-weight: 700; color: var(--accent); }
.steal-popup-summary { color: var(--muted); font-size: 0.7rem; }
/* Joe directive 2026-05-07 (round 2): väiksem X-button (0.85rem vs 1.1rem). */
.steal-popup-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 0.2rem;
    margin-left: 0.3rem;
    transition: color 0.1s;
}
.steal-popup-close:hover { color: var(--text-strong); }
/* Joe directive 2026-05-07: clicking anywhere inside popup also closes
   (3 ways: outside, X, grid itself). Pointer cursor signals clickability. */
.steal-popup, .steal-grid { cursor: pointer; }

/* CSS Grid for guaranteed uniform cell sizes (Joe 2026-05-02 *"tee ruudud ühtlaseks"*).
   `<table>` was auto-sizing first column wider since labels like "AKs" are 3 chars. */
.steal-grid {
    display: grid;
    grid-template-columns: repeat(13, 44px);
    grid-auto-rows: 34px;
    gap: 1px;
    background: #1a1a1a;            /* shows through gaps as cell border */
    padding: 1px;
}
.steal-grid .steal-cell {
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.05;
    color: #060606;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.steal-grid .steal-cell .combo { display: block; }
.steal-grid .steal-cell .count {
    display: block;
    font-size: 0.6rem;
    font-weight: 400;
    opacity: 0.85;
}
/* Blue gradient palette (Joe directive 2026-05-02 evening):
   dark blue = most opened, light blue = least opened, black = NEVER opened. */
.steal-grid .steal-cell.b4     { background: #0a3a8c; color: #ffffff; }  /* darkest blue — most opens */
.steal-grid .steal-cell.b3     { background: #1d4ed8; color: #ffffff; }  /* deep blue */
.steal-grid .steal-cell.b2     { background: #3b82f6; color: #ffffff; }  /* mid blue */
.steal-grid .steal-cell.b1     { background: #60a5fa; color: #060606; }  /* light blue */
.steal-grid .steal-cell.b0     { background: #93c5fd; color: #060606; }  /* lightest blue */
.steal-grid .steal-cell.b-zero { background: #000000; color: #555;    }  /* never opened */

/* ---- Admin users page (2026-05-06) ---------------------------------------- */
.admin-users { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.admin-users th, .admin-users td { padding: 0.5rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border); }
.admin-users th { background: #1a1a1a; font-weight: 700; }
.admin-users tbody tr:hover { background: rgba(255,255,255,0.04); }
.admin-users .actions { display: flex; gap: 0.4rem; }
.admin-users form.inline { display: inline-block; margin: 0; }
.badge { padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.75rem; }
.badge.admin { background: var(--accent); color: #000; font-weight: 700; }
.btn-small { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.btn-danger { background: #5b1414; color: #fff; border-color: #872020; }
.btn-danger:hover { background: #872020; }
.add-user-form { display: flex; gap: 0.5rem; max-width: 480px; }
.add-user-form input { flex: 1; }
.msg-success { color: #4ade80; padding: 0.5rem 0.8rem; background: rgba(74,222,128,0.1); border-left: 3px solid #4ade80; }
.error { color: #f87171; padding: 0.5rem 0.8rem; background: rgba(248,113,113,0.1); border-left: 3px solid #f87171; }

/* Joe directive 2026-05-07 evening: import-stats line (Parsed/Inserted/
   Duplicates) was muted grey — Joe wanted full white legibility. Same small
   font but full text-strong color. */
.import-stats-bright {
    color: var(--text-strong) !important;
}

/* Joe directive 2026-05-07 evening: settings-page layout. Game type on
   single row (no wrap), Limits + Dates split into 2 explicit rows in HTML;
   Dates centered. Plus "Vaheta parool" button gets 10px gap above. */
.settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
/* Joe directive 2026-05-07 evening: 10px gap between section heading and
   first row of filter-btn'ide (Game type, Limits, Dates). */
.settings-section h3 {
    margin-bottom: 10px;
}
.settings-row-nowrap {
    flex-wrap: nowrap;
}
.settings-row-centered {
    justify-content: center;
}
form[action="/change-password"] .settings-actions {
    margin-top: 10px;
}
.text-center { text-align: center; }

/* Joe directive 2026-05-07 evening (Screenshot 2026-05-07 171329.png):
   site-code suffix `(PS)` after autocomplete name — muted, smaller. */
.autocomplete-site {
    color: rgba(255,255,255,0.45);
    font-size: 0.85em;
    margin-left: 0.3rem;
}

/* Joe directive 2026-05-07 evening: /settings 2-column layout — Vaikimisi
   filtrid vasakul, Konto + Vaheta parool paremal. Collapses to single column
   on narrow screens.
   Joe directive 2026-05-07 *"vaikimisi filtrid kast joonta venita sama alla
   nagu vaheta parooli kast"* — left col card stretches to match right col
   total height. *"konto ja vaheta parooli kasti vahe tee kitsamaks"* —
   replace card margin-bottom with tighter column gap. */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 900px) {
    .settings-grid { grid-template-columns: 1fr; }
}
.settings-col-left, .settings-col-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.settings-col-left > section.card {
    flex: 1;
    margin-bottom: 0;
}
.settings-col-right > section.card {
    margin-bottom: 0;
}

/* Joe directive 2026-05-07 evening: password kastid orange-border + lock-
   icon disain (per passs.png screenshot). 1 row "Praegune parool" full-width,
   2nd row "Uus parool" + "Korda uut parooli" kõrvuti. Submit nupp keskel. */
.password-form {
    max-width: 920px;
    margin: 0 auto;
}
.password-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
}
.password-input-wrap {
    position: relative;
    flex: 1 1 0;
    max-width: 220px;
    display: block;
}
/* Scope by parent (.password-input-wrap), not by input[type="..."] — JS
   eye-toggle swaps type=password ↔ text and we need the orange-border
   styling to apply in BOTH states. Joe directive 2026-05-07 evening. */
.password-input-wrap input {
    width: 100%;
    padding: 0.85rem 2.5rem 0.85rem 1rem;
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 8px;
    color: var(--text-strong);
    font-size: 0.95rem;
    box-sizing: border-box;
}
.password-input-wrap input::placeholder {
    color: rgba(255,255,255,0.55);
}
.password-input-wrap input:focus {
    outline: none;
    border-color: var(--accent-hi);
    background: rgba(255,255,255,0.02);
}
.password-input-icon {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 1.05rem;
    background: transparent;
    border: none;
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    line-height: 1;
}
.password-input-icon:hover {
    color: var(--accent-hi);
}
/* Hide browser-native password reveal eye (Edge/Chromium ::-ms-reveal,
   webkit credentials button) so only our persistent eye toggle shows. */
.password-input-wrap input::-ms-reveal,
.password-input-wrap input::-ms-clear { display: none; }
.password-input-wrap input::-webkit-credentials-auto-fill-button {
    visibility: hidden; display: none !important;
}

/* Joe directive 2026-05-07 evening: reduce extra padding at bottom of
   .player-screen on /settings — last card was floating with too much
   empty space. Match bottom gap to main screen's card→edge. */
.player-screen > .settings-grid {
    margin-bottom: 0;
}
.settings-grid .settings-col-left > section.card:last-child,
.settings-grid .settings-col-right > section.card:last-child {
    margin-bottom: 0;
}

/* Joe directive 2026-05-07: parse-phase indeterminate progress shimmer.
   1-file batch'iga (Hands.txt 117MB) progress jääks 0%-le kuni parse läbi.
   Indeterminate state: bar full width, sliding-gradient animatsioon. */
.upload-progress .progress-fill.indeterminate {
    background-image: linear-gradient(
        90deg,
        rgba(255,255,255,0.15) 0%,
        rgba(255,255,255,0.45) 50%,
        rgba(255,255,255,0.15) 100%
    );
    background-size: 200% 100%;
    animation: jpp-progress-shimmer 1.4s linear infinite;
}
@keyframes jpp-progress-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Admin icon link — saves ~50px vs "ADMIN" text. Joe directive 2026-05-06. */
.nav-admin-icon {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    font-size: 1.1rem;
    line-height: 1;
}

/* ============================================================================
   Joe directive 2026-05-07: cross-tab stat-cell hover highlight.

   Reference: existing `.threebet-matrix .threebet-cell .actual.steal-host:hover`
   in 3bet (6m) tab — lavender gets slightly lighter on hover. Joe verbatim:
   *"3bet (6m) tabis lähen statsi kasti peale, siis highlightib kasti, tee kõik
   tabide statside kastid sedasi, välja arvatud gto statside kastid"*.

   Translucent-white inset overlay — works on top of any base bg color
   (lavender, navy, dark grey, cream). GTO baseline cells excluded
   (.gto-baseline, .col-gto, both don't match the selectors below).

   Preflop-matrix TOTAL column has its own gold-glow box-shadow frame, so a
   hover-overlay on `:nth-child(2)` would replace the frame — a separate
   compound-shadow rule below preserves the frame and adds the overlay.
   ========================================================================== */
.threebet-matrix .actual:hover,
.fourbet-tab td.col-4bet.steal-host:hover,
.fourbet-tab td.col-fold5:hover,
.preflop-matrix tbody td:not(.row-label):not(.empty):not(:empty):not(:nth-child(2)):hover,
.smarthand-stats tbody td:not(.row-label):not(.empty):not(:empty):hover,
.postflop-srp tbody td:not(.row-label):not(:empty):hover,
.kpi-tile:hover {
    /* Joe directive 2026-05-07 evening: 0.10 → 0.20 et 3bet (6m) heledusele
       lähemale ja teised tabid sama valgustada.
       Joe directive 2026-05-08: graph-kpi-strip EI hover'i (puhtalt info-riba,
       mitte interaktiivne kontrol). Eemaldatud sellest grupist .kpi-cell:hover. */
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.20);
}

/* Joe directive 2026-05-07 evening: heledatel cream-cell'idel (#e4ded8) valge
   overlay invisible. Asenda bluish overlay'iga (lavender #95b1e4 tint).
   Cream cellid kolmes kohas:
     - smarthand-stats per-col alternation: td:nth-child(even)
     - preflop-matrix per-row alternation: tbody tr:nth-child(odd) td (6max+9max)
     - postflop-srp per-row alternation: tbody tr:nth-child(odd) td (post srp+3bp)
   Joe directive 2026-05-07 *"6max 9max post srp ja post 3bp ja main screen tee
   sama hoverite disaini keelega"*. */
.smarthand-stats tbody td:nth-child(even):not(.row-label):not(.empty):not(:empty):hover,
.preflop-matrix tbody tr:nth-child(odd) td:not(.row-label):not(.empty):not(:empty):not(:nth-child(2)):hover,
.postflop-srp tbody tr:nth-child(odd) td:not(.row-label):not(.empty):not(:empty):hover {
    box-shadow: inset 0 0 0 9999px rgba(149, 177, 228, 0.45);
}

/* Preflop-matrix TOTAL column LAVENDER rows — keep gold-glow frame +
   white overlay (visible on lavender base #95b1e4). */
.preflop-matrix tbody tr:nth-child(even) td:nth-child(2):not(.row-label):not(.empty):not(:empty):hover {
    box-shadow:
        inset 2px 0 0 #cccccc,
        inset -2px 0 0 #cccccc,
        inset 3px 0 0 #000000,
        inset -3px 0 0 #000000,
        -10px 0 14px 0 rgba(255, 200, 60, 0.55),
         10px 0 14px 0 rgba(255, 200, 60, 0.55),
        inset 0 0 0 9999px rgba(255, 255, 255, 0.20);
}
/* Preflop-matrix TOTAL column CREAM rows — keep gold-glow frame +
   bluish overlay (white invisible on cream #e4ded8). */
.preflop-matrix tbody tr:nth-child(odd) td:nth-child(2):not(.row-label):not(.empty):not(:empty):hover {
    box-shadow:
        inset 2px 0 0 #cccccc,
        inset -2px 0 0 #cccccc,
        inset 3px 0 0 #000000,
        inset -3px 0 0 #000000,
        -10px 0 14px 0 rgba(255, 200, 60, 0.55),
         10px 0 14px 0 rgba(255, 200, 60, 0.55),
        inset 0 0 0 9999px rgba(149, 177, 228, 0.45);
}

/* Joe directive 2026-05-07 evening: topnav icons (🛡 admin, 🔧 settings,
   ⚙ filter) said hover-effekti ei olnud — ainult color change. Lisame
   subtle background highlight + zoom. */
.topbar .nav-admin-icon,
.topbar .nav-settings-icon,
.filter-icon {
    transition: background 0.12s ease-out, transform 0.12s ease-out;
    border-radius: 4px;
}
.topbar .nav-admin-icon:hover,
.topbar .nav-settings-icon:hover,
.filter-icon:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: scale(1.05);
}