/*
 * Shared styles for Fantasy Streams.
 *
 * One palette, defined once. Every page links this file; nothing redefines a
 * colour inline. Layout stays with Tailwind utilities - this file owns the
 * design tokens and the handful of component classes the utilities cannot
 * express, so a ported page inherits the look instead of inventing one.
 *
 * Previously this file was the old app's light theme and no template linked
 * it, while index/draft-prep each redeclared the same hex values inline and
 * terms.html used a different palette again.
 *
 * Author - Jason Druckenmiller
 * Created - 7/3/2026
 * Updated - 10/1/2026
 */

:root {
    /* Surfaces - matched to the Tailwind greys the templates already use, so
       adopting tokens changed nothing visually. */
    --fs-bg: #111827;            /* page background      (gray-900) */
    --fs-surface: #1F2937;       /* cards, headers       (gray-800) */
    --fs-surface-raised: #2D2D2D;/* inputs, inset panels */
    --fs-surface-hover: #374151; /* row hover            (gray-700) */

    --fs-border: #374151;
    --fs-border-strong: #555;

    /* Text */
    --fs-text: #D4D4D4;
    --fs-text-strong: #FFFFFF;
    --fs-text-muted: #9CA3AF;
    --fs-text-dim: #888888;

    /* Accents - the VS Code blue the buttons already used. */
    --fs-accent: #0E639C;
    --fs-accent-hover: #1177BB;
    --fs-link: #60A5FA;
    --fs-purple: #8B5CF6;        /* category/points mode toggle */
    --fs-toggle-off: #2563EB;    /* pill toggle, unchecked */

    --fs-success: #10B981;
    --fs-success-bg: rgba(16, 185, 129, 0.15);
    --fs-danger: #F87171;
    --fs-danger-bg: rgba(248, 113, 113, 0.12);
    --fs-warning: #FBBF24;

    --fs-radius: 0.375rem;
    --fs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-font-mono: 'Courier New', Courier, monospace;
}

body {
    font-family: var(--fs-font);
}

/* Utility the templates rely on; Tailwind's own `hidden` can lose specificity
   battles against display utilities, so it is stated here too. */
.hidden { display: none; }

/* --- Forms ---------------------------------------------------------------- */

.form-input,
.form-select {
    background-color: var(--fs-surface-raised);
    color: var(--fs-text);
    border: 1px solid var(--fs-border-strong);
    border-radius: var(--fs-radius);
}

.form-input::placeholder { color: var(--fs-text-dim); }

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--fs-accent-hover);
    box-shadow: 0 0 0 1px var(--fs-accent-hover);
}

/* --- Buttons -------------------------------------------------------------- */

.btn-primary {
    background-color: var(--fs-accent);
    color: #fff;
}

.btn-primary:hover { background-color: var(--fs-accent-hover); }

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Tables --------------------------------------------------------------- */

.table-row-hover:hover { background-color: var(--fs-surface-hover); }

/* Marks the winning side of a category comparison (matchup, trade helper). */
.winner {
    font-weight: 600;
    background-color: var(--fs-success-bg);
    color: var(--fs-success);
}

/* --- Pill toggles --------------------------------------------------------- */
/* A checkbox styled as a sliding pill: hidden input + track + knob.
 *
 * These class names are ours. The markup previously hooked `.block`, which is
 * also Tailwind's `display: block` utility and is used as such all over the
 * draft-prep template - so the rule both lost the cascade to Tailwind's own
 * `.bg-blue-600` (the toggle never turned purple) and would have hit every
 * unrelated `.block` element the moment it set a background. */

.fs-toggle-track { background-color: var(--fs-toggle-off); }

input:checked ~ .fs-toggle-dot { transform: translateX(100%); }

/* The track's "on" colour is driven by the page's change handler rather than
   :checked, matching how the PIM toggle already works. A sibling rule off
   :checked proved unreliable here and this keeps both toggles on one pattern. */
.fs-toggle-track.is-on { background-color: var(--fs-purple); }

/* --- Messages ------------------------------------------------------------- */

.error-message {
    color: var(--fs-danger);
    background-color: var(--fs-danger-bg);
    border: 1px solid var(--fs-danger);
    border-radius: var(--fs-radius);
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
}

/* --- Job log stream ------------------------------------------------------- */
/* Used by the Phase 2 database-update progress stream. */

.terminal,
input.terminal {
    background-color: #1E1E1E;
    color: var(--fs-text);
    font-family: var(--fs-font-mono);
    border: 1px solid var(--fs-border);
    border-radius: var(--fs-radius);
}

.terminal-output {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* --- Help icon ------------------------------------------------------------ */

.help-icon {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--fs-border);
    color: var(--fs-text-strong);
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    margin-left: 10px;
}

/* --- Column toggles -------------------------------------------------------- */
/* Draft-prep's "hide this group of columns" chips. Pressed means hidden, which
   is the opposite of most toggles - so the pressed state is the muted one, and
   the label already says "Hide". */

.column-toggle {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fs-text-muted);
    background-color: transparent;
    border: 1px solid var(--fs-border);
    border-radius: var(--fs-radius);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.column-toggle:hover {
    color: var(--fs-text-strong);
    border-color: var(--fs-border-strong);
}

.column-toggle[aria-pressed="true"] {
    color: var(--fs-text-strong);
    background-color: var(--fs-accent);
    border-color: var(--fs-accent-hover);
}

/* --- Page tabs --------------------------------------------------------------- */
/* The sub-page row under a page's settings bar, as the old site's League Home
   had it: filled blue when selected, grey otherwise. Styled here rather than
   by swapping Tailwind classes from script - see the phone-layout traps. */

.page-tab {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #D1D5DB;
    background-color: var(--fs-surface-hover);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.page-tab:hover { background-color: #4B5563; }

.page-tab[aria-selected="true"] {
    color: var(--fs-text-strong);
    background-color: #2563EB;
}

/* --- Player card links ------------------------------------------------------- */
/* A player's name - or a cell about him - that opens his card on League Home.
   A button, for the keyboard and screen readers, dressed as the text it
   replaces; the underline on hover is the only hint it does anything. */

.player-link {
    font: inherit;
    color: inherit;
    text-align: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.player-link:hover,
.player-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* "L1 · PP1" beside a name: his line last game and his power-play unit, as
   the old site's red pill had it. */
.line-badge {
    margin-left: 0.375rem;
    padding: 0 0.25rem;
    font-size: 10px;
    font-weight: 600;
    line-height: 1rem;
    border-radius: 0.25rem;
    background-color: #7F1D1D;
    color: #FECACA;
    white-space: nowrap;
}

.line-badge:hover,
.line-badge:focus-visible {
    background-color: #991B1B;
    text-decoration: none;
}

/* --- Sticky table header --------------------------------------------------- */
/* A draft board is read by scrolling, and a category column means nothing
   without its heading. The header cells carry the background themselves rather
   than the row doing it, because a sticky <tr> leaves its own background
   behind and the rows show through. */

.table-sticky-head th {
    position: sticky;
    top: 0;
    z-index: 10;
    /* gray-900, matching the thead the page already paints - a sticky cell
       shows the rows through it unless it carries its own background. */
    background-color: var(--fs-bg);
}

/* Sticky only works against a scroll container, and `overflow-x: auto` alone
   makes one whose height is unbounded - so the header would never actually
   stick. The table therefore scrolls inside a viewport-height box in both
   axes, which is also what keeps the filter bar and the pager on screen. */

.table-scroll {
    overflow: auto;
    max-height: calc(100vh - 8rem);
    /* On a phone 100vh counts the browser toolbar that slides away, so the box
       ran under it and hid its last rows. dvh tracks what is actually visible;
       the line above stands for browsers without it. */
    max-height: calc(100dvh - 8rem);
}

/* --- Frozen player column --------------------------------------------------- */
/* On a phone the board is a narrow window onto twenty-odd columns, and a row of
   numbers means nothing once the name has scrolled off. The Player column pins
   to the left edge once the select box and Rank have scrolled past.

   Like the sticky header it has to be opaque, or the columns scrolling under it
   show through. So it paints the row's tag colour itself, pre-composited over
   the surface exactly as the row's translucent Tailwind tint lands on it
   (emerald/yellow/red-900 at 40% over gray-800) - otherwise a tagged player
   would lose his tint on the one cell that names him. */

.col-sticky {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: var(--fs-surface);
    box-shadow: inset -1px 0 0 var(--fs-border);
}

.table-sticky-head th.col-sticky {
    z-index: 20;
    background-color: var(--fs-bg);
}

tr[data-tag="fav"] > .col-sticky { background-color: rgb(21, 56, 57); }
tr[data-tag="sleeper"] > .col-sticky { background-color: rgb(64, 50, 40); }
tr[data-tag="dnd"] > .col-sticky { background-color: rgb(69, 36, 45); }
.table-row-hover:hover > .col-sticky { background-color: var(--fs-surface-hover); }

/* --- Narrow screens --------------------------------------------------------- */
/* Tailwind's sm breakpoint, so these switch over at the same width the
   templates' sm: utilities do. Shared by every page - the standard they are
   part of is "Phone layout" in CLAUDE.md. */

@media (max-width: 639.98px) {
    /* iOS Safari zooms into any focused field under 16px and does not zoom back
       out, so one search would leave the whole board magnified. The element
       selectors outrank Tailwind's .text-sm whichever stylesheet lands last. */
    input.form-input,
    select.form-select,
    input.stat-weight {
        font-size: 16px;
    }

    /* Any table marked .data-table. The desktop p-4 / px-4 spends a third of a
       phone's width on cell padding; the element selectors outrank those
       utilities. */
    .data-table th,
    .data-table td {
        padding: 0.5rem 0.625rem;
    }

    /* Wide enough for most names on one line; longer ones wrap */
    .data-table .col-sticky {
        min-width: 7rem;
    }

    /* A 16px box is a hard target for a thumb. Draft prep's whole select cell
       toggles it too - see toggleFromCell() in draft-prep.html. */
    .data-table input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* A name is a thumb's target on League Home - it opens his card */
    .player-link {
        padding: 0.25rem 0;
    }

    /* Room at the foot of the page while draft-prep's selection bar is up, so
       it never covers the pager. A class of ours rather than a Tailwind
       utility set from script: the vendored CDN build only generates a utility
       once it has noticed it in the page, and a pb-28 first added on the tick
       measured 0px. */
    body.has-selection {
        padding-bottom: 7rem;
    }

    /* League Home's transaction list: four columns on a desktop, one stacked
       cell a phone can read without scrolling sideways. Ours rather than
       max-sm:/sm: utilities, which the page's markup never uses and the CDN
       build would not have generated. */
    .wide-only {
        display: none;
    }
}

@media (min-width: 640px) {
    .narrow-only {
        display: none;
    }
}