/* historical_drafts_v4.css — Historical Draft Board (Pro)
   Mockup: docs/mockups/historical_draft_board_v3.html. Tokens only. */

#historicalDraftsModal .hdb-backdrop {
    position: fixed; inset: 0;
    background: var(--jt-overlay-bg);
    backdrop-filter: var(--jt-overlay-blur);
    z-index: 10000;
}
#historicalDraftsModal .hdb-shell {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
#historicalDraftsModal .hdb-modal {
    pointer-events: auto;
    display: flex; flex-direction: column;
    width: min(1120px, 96vw); height: min(760px, 90vh);
    min-width: 560px; min-height: 380px;
    background: var(--jt-modal-bg);
    /* Pair the surface with its own text colour instead of inheriting the host
       page's. The panel body-mounts, so anything it doesn't set falls back to
       whatever ambient colour is in scope — black on a page that sets none,
       which is black-on-black against this surface. */
    color: var(--jt-text-primary);
    border: 1px solid var(--jt-modal-border);
    border-radius: 12px;
    box-shadow: var(--jt-modal-shadow);
    overflow: hidden;
}

/* header */
#historicalDraftsModal .hdb-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--jt-border-primary);
    cursor: grab; flex: none;
}
#historicalDraftsModal .hdb-title { font-size: .95rem; font-weight: 800; white-space: nowrap; }
#historicalDraftsModal .hdb-league {
    font-size: .7rem; color: var(--jt-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#historicalDraftsModal .hdb-spacer { flex: 1; }
#historicalDraftsModal .hdb-close {
    width: 26px; height: 26px; border: none; background: transparent;
    color: var(--jt-text-secondary); font-size: 1rem; cursor: pointer; border-radius: 6px;
}
#historicalDraftsModal .hdb-close:hover { background: var(--jt-bg-hover); color: var(--jt-text-primary); }

/* ReportActions + minimize buttons ship on-dark chrome for gradient report
   headers; this header is a plain surface, so flip them in light theme
   (mirrors transactions_report_v4.css). */
[data-theme="light"] #historicalDraftsModal .hdb-header .ra-btn,
[data-theme="light"] #historicalDraftsModal .hdb-header .ra-dl-trigger,
[data-theme="light"] #historicalDraftsModal .hdb-header .jt-mp-minimize-btn {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-secondary);
    border-color: var(--jt-border-primary);
}
[data-theme="light"] #historicalDraftsModal .hdb-header .ra-btn:hover,
[data-theme="light"] #historicalDraftsModal .hdb-header .ra-dl-trigger:hover,
[data-theme="light"] #historicalDraftsModal .hdb-header .jt-mp-minimize-btn:hover {
    background: var(--jt-bg-elevated);
    border-color: var(--jt-border-secondary);
    color: var(--jt-text-primary);
}

/* filters */
#historicalDraftsModal .hdb-filters {
    display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-secondary); flex: none;
}
#historicalDraftsModal .hdb-flabel {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .6px;
    color: var(--jt-text-muted); font-weight: 700;
}
#historicalDraftsModal .hdb-sel,
#historicalDraftsModal .hdb-q {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 7px;
    padding: 4px 8px; font-size: .76rem;
}
#historicalDraftsModal .hdb-q { width: 150px; }
#historicalDraftsModal .hdb-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
#historicalDraftsModal .hdb-chip {
    border: 1px solid var(--jt-border-primary); background: transparent;
    color: var(--jt-text-muted); border-radius: 999px; padding: 2px 10px;
    font-size: .68rem; font-weight: 700; cursor: pointer;
}
#historicalDraftsModal .hdb-chip.on[data-tone="green"]  { color: var(--jt-accent-green);  background: var(--jt-accent-green-bg);  border-color: var(--jt-accent-green); }
#historicalDraftsModal .hdb-chip.on[data-tone="blue"]   { color: var(--jt-accent-blue);   background: var(--jt-accent-blue-bg);   border-color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-chip.on[data-tone="amber"]  { color: var(--jt-accent-amber);  background: var(--jt-accent-amber-bg);  border-color: var(--jt-accent-amber); }
#historicalDraftsModal .hdb-chip.on[data-tone="purple"] { color: var(--jt-accent-purple-hover); background: var(--jt-accent-purple-bg); border-color: var(--jt-accent-purple-border); }

/* segmented toggles (view / sort) */
#historicalDraftsModal .hdb-seg {
    display: inline-flex; border: 1px solid var(--jt-border-secondary);
    border-radius: 7px; overflow: hidden;
}
#historicalDraftsModal .hdb-segbtn {
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
    border: none; padding: 4px 10px; font-size: .7rem; font-weight: 700; cursor: pointer;
}
/* Selected segment sits ON the teal fill, so its text needs a contrasting
   local token — same trick news_board uses for --nb-on-teal (no global
   on-accent token exists; the accent itself flips per theme). */
#historicalDraftsModal .hdb-modal { --hdb-on-teal: #042f2e; }
[data-theme="light"] #historicalDraftsModal .hdb-modal { --hdb-on-teal: #ffffff; }
#historicalDraftsModal .hdb-segbtn.on { background: var(--jt-accent-teal); color: var(--hdb-on-teal); }
#historicalDraftsModal .hdb-segbtn:not(.on):hover { color: var(--jt-text-primary); }

/* summary strip */
#historicalDraftsModal .hdb-summary {
    display: flex; gap: 7px; padding: 8px 14px; flex-wrap: wrap; flex: none;
    border-bottom: 1px solid var(--jt-border-primary);
}
#historicalDraftsModal .hdb-summary:empty { display: none; }
#historicalDraftsModal .hdb-stile {
    background: var(--jt-bg-secondary); border: 1px solid var(--jt-border-primary);
    border-radius: 8px; padding: 4px 12px; text-align: center; min-width: 82px;
}
/* Untoned tile (the picks/lots count) needs its own colour — the toned
   variants below set theirs, and inheriting is what left this one black. */
#historicalDraftsModal .hdb-sn { font-weight: 800; font-size: .95rem; color: var(--jt-text-primary); }
#historicalDraftsModal .hdb-stile[data-tone="teal"]  .hdb-sn { color: var(--jt-accent-teal); }
#historicalDraftsModal .hdb-stile[data-tone="amber"] .hdb-sn { color: var(--jt-accent-amber); }
#historicalDraftsModal .hdb-stile[data-tone="blue"]  .hdb-sn { color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-stile[data-tone="green"] .hdb-sn { color: var(--jt-accent-green); }
#historicalDraftsModal .hdb-stile[data-tone="red"]   .hdb-sn { color: var(--jt-accent-red); }
#historicalDraftsModal .hdb-sl {
    font-size: .58rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--jt-text-secondary);
}

#historicalDraftsModal .hdb-body { flex: 1; overflow: auto; }

/* NOW overlay — NFL chip + roster status, one switch's worth of signal */
#historicalDraftsModal .hdb-nfl {
    display: inline-block; border-radius: 4px; padding: 0 4px;
    font-size: .58rem; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
    border: 1px solid var(--jt-border-primary); color: var(--jt-text-secondary);
}
#historicalDraftsModal .hdb-nfl[data-tone="s1"]  { color: var(--jt-accent-green);  background: var(--jt-accent-green-bg);  border-color: var(--jt-accent-green); }
#historicalDraftsModal .hdb-nfl[data-tone="s2"]  { color: var(--jt-accent-blue);   background: var(--jt-accent-blue-bg);   border-color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-nfl[data-tone="s3"]  { color: var(--jt-text-secondary); }
#historicalDraftsModal .hdb-nfl[data-tone="off"] { color: var(--jt-accent-amber);  background: var(--jt-accent-amber-bg);  border-color: var(--jt-accent-amber); }
/* Wraps rather than clips: league team names run long ("Purdy Sure I Should've
   Stuck With JSN"), and nowrap+ellipsis meant the one thing this column exists
   to say — WHOSE roster — was the part that got cut. A second line costs a few
   pixels of row height on the handful of rows that need it. */
#historicalDraftsModal .hdb-ros {
    font-size: .62rem; font-weight: 700;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
}
#historicalDraftsModal .hdb-ros[data-state="same"]  { color: var(--jt-accent-green); }
#historicalDraftsModal .hdb-ros[data-state="moved"] { color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-ros[data-state="fa"]    { color: var(--jt-accent-red); }
#historicalDraftsModal .hdb-ros[data-state="gone"]  { color: var(--jt-text-muted); }
#historicalDraftsModal .hdb-who { font-weight: 800; }

/* player name — linked only when the pool still carries him */
#historicalDraftsModal .hdb-pl { font-weight: 700; color: var(--jt-text-primary); }
#historicalDraftsModal .hdb-pl.hdb-link {
    cursor: pointer; text-decoration: underline;
    text-decoration-color: var(--jt-border-secondary);
    text-underline-offset: 2px; text-decoration-thickness: 1px;
}
#historicalDraftsModal .hdb-pl.hdb-link:hover { color: var(--jt-accent-teal); }

/* board view (snake): rounds × franchises, columns in draft order */
#historicalDraftsModal .hdb-board { border-collapse: separate; border-spacing: 0; width: max-content; }
#historicalDraftsModal .hdb-board th {
    position: sticky; top: 0; z-index: 3;
    background: var(--jt-bg-secondary); color: var(--jt-text-secondary);
    font-size: .6rem; text-transform: uppercase; letter-spacing: .5px;
    padding: 6px 8px; text-align: left; white-space: nowrap;
    max-width: 158px; overflow: hidden; text-overflow: ellipsis;
    border-bottom: 1px solid var(--jt-border-primary);
}
#historicalDraftsModal .hdb-board td { border-bottom: 1px solid var(--jt-border-primary); vertical-align: top; padding: 0; }
#historicalDraftsModal .hdb-board td.hdb-rd,
#historicalDraftsModal .hdb-board th.hdb-rd {
    position: sticky; left: 0; z-index: 2;
    background: var(--jt-bg-secondary); color: var(--jt-text-secondary);
    font-weight: 800; font-size: .66rem; padding: 0 9px;
    border-right: 1px solid var(--jt-border-primary);
}
#historicalDraftsModal .hdb-cell {
    width: 158px; padding: 5px 7px; min-height: 62px;
    border-left: 2px solid transparent;
}
#historicalDraftsModal .hdb-cell:hover { background: var(--jt-bg-hover); }
#historicalDraftsModal .hdb-cell[data-tone="purple"] { border-left-color: var(--jt-accent-purple-border); }
#historicalDraftsModal .hdb-cell[data-tone="green"]  { border-left-color: var(--jt-accent-green); }
#historicalDraftsModal .hdb-cell[data-tone="blue"]   { border-left-color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-cell[data-tone="amber"]  { border-left-color: var(--jt-accent-amber); }
#historicalDraftsModal .hdb-cell.hdb-dim { opacity: .3; }
/* .62/.64rem, not .56/.6 — muted text sits ~4.8:1 on this surface, which is
   legible at the report-standard size but not below it. */
#historicalDraftsModal .hdb-pk { font-size: .62rem; color: var(--jt-text-muted); font-weight: 700; letter-spacing: .4px; }
#historicalDraftsModal .hdb-at { color: var(--jt-text-muted); font-size: .64rem; }
#historicalDraftsModal .hdb-cell .hdb-ros { display: block; margin-top: 1px; }
#historicalDraftsModal .hdb-cell .hdb-pl { font-size: .73rem; line-height: 1.25; }

/* auction lots + flat list share the column rhythm */
#historicalDraftsModal .hdb-colhdr {
    display: flex; gap: 10px; padding: 5px 14px;
    position: sticky; top: 0; z-index: 3;
    background: var(--jt-bg-secondary); border-bottom: 1px solid var(--jt-border-primary);
    font-size: .58rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--jt-text-muted); font-weight: 800;
}
#historicalDraftsModal .hdb-colhdr span { flex: none; }
#historicalDraftsModal .hdb-lot,
#historicalDraftsModal .hdb-row {
    /* align-items:center keeps a one-line row centred against a neighbour that
       wrapped to two — flex-start would leave the short cells riding high. */
    display: flex; align-items: center; gap: 10px;
    padding: 5px 14px; font-size: .78rem;
    border-bottom: 1px solid var(--jt-border-primary);
}
#historicalDraftsModal .hdb-lot:hover,
#historicalDraftsModal .hdb-row:hover { background: var(--jt-bg-hover); }
#historicalDraftsModal .hdb-seq {
    flex: none; width: 64px; color: var(--jt-text-muted);
    font-size: .64rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
#historicalDraftsModal .hdb-lot .hdb-amt { width: 46px; }
#historicalDraftsModal .hdb-row .hdb-amt { width: 40px; }
#historicalDraftsModal .hdb-amt {
    flex: none; text-align: right; font-weight: 800;
    color: var(--jt-accent-amber); font-variant-numeric: tabular-nums;
}
#historicalDraftsModal .hdb-bar {
    flex: none; width: 84px; height: 7px; border-radius: 4px;
    background: var(--jt-bg-tertiary); overflow: hidden;
}
#historicalDraftsModal .hdb-bar i { display: block; height: 100%; background: var(--jt-accent-amber); opacity: .75; }
#historicalDraftsModal .hdb-plcol { flex: 1; min-width: 0; }
#historicalDraftsModal .hdb-fr {
    flex: none; width: 132px; font-size: .72rem; color: var(--jt-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#historicalDraftsModal .hdb-nflcol { flex: none; width: 74px; text-align: right; }
#historicalDraftsModal .hdb-roscol { flex: none; width: 186px; text-align: right; }
#historicalDraftsModal .hdb-row .hdb-pk { flex: none; width: 52px; font-size: .64rem; }
#historicalDraftsModal .hdb-pos {
    flex: none; width: 28px; text-align: center; font-size: .6rem; font-weight: 800;
    color: var(--jt-text-secondary);
}
#historicalDraftsModal .hdb-pos[data-tone="purple"] { color: var(--jt-accent-purple-hover); }
#historicalDraftsModal .hdb-pos[data-tone="green"]  { color: var(--jt-accent-green); }
#historicalDraftsModal .hdb-pos[data-tone="blue"]   { color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-pos[data-tone="amber"]  { color: var(--jt-accent-amber); }

/* franchise grouping — one section per relationship to the selected team */
#historicalDraftsModal .hdb-grp {
    padding: 6px 14px; background: var(--jt-bg-tertiary);
    border-bottom: 1px solid var(--jt-border-primary);
    font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
}
#historicalDraftsModal .hdb-grp[data-grp="drafted"]  { color: var(--jt-accent-teal); }
#historicalDraftsModal .hdb-grp[data-grp="acquired"] { color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-grpn {
    color: var(--jt-text-muted); font-weight: 700;
    letter-spacing: 0; text-transform: none; margin-left: 6px;
}

/* ── analysis view (Elite tab) ───────────────────────────────────────────── */
#historicalDraftsModal .hdb-analysis { padding: 4px 14px 14px; color: var(--jt-text-primary); }
#historicalDraftsModal .hdb-ascope {
    padding: 8px 0 4px; font-size: .66rem; color: var(--jt-text-muted);
}
#historicalDraftsModal .hdb-ahead {
    background: var(--jt-bg-secondary); border: 1px solid var(--jt-border-primary);
    border-radius: 9px; padding: 8px 12px; margin: 6px 0 12px; font-size: .8rem;
}
#historicalDraftsModal .hdb-asection { margin-bottom: 18px; }
#historicalDraftsModal .hdb-ahdr h3 { margin: 0; font-size: .88rem; font-weight: 800; }
#historicalDraftsModal .hdb-ahdr p {
    margin: 2px 0 8px; font-size: .7rem; color: var(--jt-text-secondary); max-width: 70ch;
}
/* Numeric columns are right-aligned in the cells, so their HEADERS have to be
   too — left-aligned headers over right-aligned figures is what made these
   tables read as misaligned. The label column stays left; every other column
   is a number or a short tag and gets a fixed width so the eye has a rhythm
   instead of columns that resize with the widest team name. */
#historicalDraftsModal .hdb-atable { border-collapse: collapse; width: 100%; max-width: 620px; font-size: .76rem; }
#historicalDraftsModal .hdb-atable th:not(:first-child),
#historicalDraftsModal .hdb-atable td:not(:first-child) { text-align: right; }
#historicalDraftsModal .hdb-atable th:not(:first-child) { width: 104px; }
/* The Style column reads as a word, not a figure — centred, and matched by
   CLASS rather than position: nth-child(3) is the tag in the reach tables but a
   numeric cohort column ("1 → 4") in the runs table, which it would misalign. */
#historicalDraftsModal .hdb-atable th.hdb-athead-tag,
#historicalDraftsModal .hdb-atable td.hdb-atag { text-align: center; }
#historicalDraftsModal .hdb-atable th {
    text-align: left; padding: 4px 8px; font-size: .6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px; color: var(--jt-text-muted);
    border-bottom: 1px solid var(--jt-border-primary);
}
#historicalDraftsModal .hdb-atable td {
    padding: 4px 8px; border-bottom: 1px solid var(--jt-border-primary); color: var(--jt-text-primary);
}
#historicalDraftsModal .hdb-atable tr:hover td { background: var(--jt-bg-hover); }
#historicalDraftsModal .hdb-apos { font-weight: 800; color: var(--jt-text-secondary); }
#historicalDraftsModal .hdb-afr { font-weight: 700; }
#historicalDraftsModal .hdb-anum { text-align: right; font-variant-numeric: tabular-nums; }
#historicalDraftsModal .hdb-asuffix { color: var(--jt-text-muted); font-size: .62rem; }
#historicalDraftsModal .hdb-amuted { color: var(--jt-text-muted); }
#historicalDraftsModal .hdb-atag { font-size: .64rem; font-weight: 800; }
#historicalDraftsModal [data-delta="reach"]   { color: var(--jt-accent-amber); }
#historicalDraftsModal [data-delta="wait"]    { color: var(--jt-accent-blue); }
#historicalDraftsModal [data-delta="neutral"] { color: var(--jt-text-secondary); }
#historicalDraftsModal .hdb-afoot { font-size: .64rem; color: var(--jt-text-muted); margin-top: 4px; }

/* locked state — the Elite upsell, in place of the tab's content */
#historicalDraftsModal .hdb-locked {
    padding: 46px 24px; text-align: center; color: var(--jt-text-secondary);
}
#historicalDraftsModal .hdb-locked-icon { font-size: 1.6rem; margin-bottom: 8px; }
#historicalDraftsModal .hdb-locked h3 { margin: 0 0 6px; font-size: .95rem; color: var(--jt-text-primary); }
#historicalDraftsModal .hdb-locked p { margin: 0 auto 14px; font-size: .78rem; max-width: 52ch; }

/* legend / footer / states */
#historicalDraftsModal .hdb-legend {
    display: flex; gap: 14px; flex-wrap: wrap; flex: none;
    padding: 6px 14px; border-top: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-secondary);
    font-size: .6rem; color: var(--jt-text-muted);
}
#historicalDraftsModal .hdb-legend:empty { display: none; }
#historicalDraftsModal .hdb-legend b[data-tone="s1"]  { color: var(--jt-accent-green); }
#historicalDraftsModal .hdb-legend b[data-tone="s2"]  { color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-legend b[data-tone="s3"]  { color: var(--jt-text-secondary); }
#historicalDraftsModal .hdb-legend b[data-tone="off"] { color: var(--jt-accent-amber); }
#historicalDraftsModal .hdb-legend b[data-state="same"]  { color: var(--jt-accent-green); }
#historicalDraftsModal .hdb-legend b[data-state="moved"] { color: var(--jt-accent-blue); }
#historicalDraftsModal .hdb-legend b[data-state="fa"]    { color: var(--jt-accent-red); }
#historicalDraftsModal .hdb-legend b[data-state="gone"]  { color: var(--jt-text-muted); }
#historicalDraftsModal .hdb-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 14px; flex: none;
    border-top: 1px solid var(--jt-border-primary);
    font-size: .64rem; color: var(--jt-text-muted);
}
#historicalDraftsModal .hdb-empty {
    padding: 40px 20px; text-align: center;
    color: var(--jt-text-muted); font-size: .8rem;
}
#historicalDraftsModal .hdb-retry {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 7px;
    padding: 6px 14px; font-size: .74rem; font-weight: 700; cursor: pointer;
}

/* mobile — the board is wide by nature, so it scrolls; rows shed the extras */
@media (max-width: 640px) {
    #historicalDraftsModal .hdb-modal { width: 100vw; height: 100dvh; min-width: 0; border-radius: 0; }
    #historicalDraftsModal .hdb-fr { width: 92px; }
    #historicalDraftsModal .hdb-roscol { width: 118px; }
    #historicalDraftsModal .hdb-bar { display: none; }
    #historicalDraftsModal .hdb-q { width: 100%; }
}

/* print — the board is the artifact */
@media print {
    #historicalDraftsModal .hdb-filters,
    #historicalDraftsModal .hdb-actions-mount,
    #historicalDraftsModal .hdb-close { display: none !important; }
    #historicalDraftsModal .hdb-modal { width: 100%; height: auto; box-shadow: none; }
    #historicalDraftsModal .hdb-body { overflow: visible; }
}