/* ═══════════════════════════════════════════════════════════════════════════
   Frisbee Analytics — dark-theme UI overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── RangeSlider mark labels ─────────────────────────────────────────────────
   Marks also receive inline {"style": {"color": ...}} from slider_marks(),
   so these rules are a belt-and-braces fallback.                              */
.rc-slider-mark-text {
    color: #d8d8d8 !important;
    font-size: 11px !important;
}
.rc-slider-mark-text-active {
    color: #ffffff !important;
}

/* ── Slider handle tooltip ───────────────────────────────────────────────── */
.rc-slider-tooltip-inner {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #666 !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    min-width: 28px;
}
.rc-slider-tooltip-arrow {
    border-top-color: #666 !important;
    border-bottom-color: #666 !important;
}

/* Slider end-range input boxes — dark text on white background.
   Dash renders these as <input type="number"> inside the slider container;
   they inherit color:#e8e8e8 from the dark panel, making them near-invisible. */
input[type="number"] {
    color: #111111 !important;
}

/* ── Dropdown — scoped under .dark-dd (applied to every dcc.Dropdown) ──────
   The control panel background is dark (#2a2a2a) and cascades color: #e8e8e8
   into the dropdown.  The control BAR itself stays white (Dash inline style),
   so we force all text inside it to near-black so it's readable.             */

/* Control bar border / hover */
.dark-dd .Select-control {
    border-color: #555555 !important;
}
.dark-dd .Select-control:hover,
.dark-dd .is-focused > .Select-control,
.dark-dd .is-open > .Select-control {
    border-color: #4a9eff !important;
    box-shadow: none !important;
}

/* The dropdown's outer div now carries color:#111111 as an inline style
   (set via Dash style= prop), so all text inside inherits dark colour.
   The rules below only need to handle cases where component CSS explicitly
   overrides that inherited value. */

/* Placeholder is slightly muted */
.dark-dd .Select-placeholder {
    color: #555555 !important;
}

/* ── Multi-select pills ─────────────────────────────────────────────────────
   React-Select sets pill text to #007eff inline, so we need !important.     */
.dark-dd .Select--multi .Select-value-label {
    color: #111111 !important;
    padding: 2px 5px !important;
}
.dark-dd .Select--multi .Select-value-icon {
    color: #555555 !important;
    padding: 2px 5px !important;
}
.dark-dd .Select--multi .Select-value-icon:hover {
    background-color: #b03020 !important;
    color: #ffffff !important;
}

/* ── Drop-down menu panel ────────────────────────────────────────────────── */
.dark-dd .Select-menu-outer {
    background-color: #252525 !important;
    border-color: #555555 !important;
    z-index: 9999;
}
.dark-dd .Select-menu {
    background-color: #252525 !important;
}

/* Menu options */
.dark-dd .Select-option {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
}
.dark-dd .Select-option:hover,
.dark-dd .Select-option.is-focused {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}
.dark-dd .Select-option.is-selected {
    background-color: #1a3f5c !important;
    color: #ffffff !important;
}
.dark-dd .Select-option.is-selected.is-focused {
    background-color: #1e4d70 !important;
}
.dark-dd .Select-option.is-disabled {
    color: #606060 !important;
}

/* Clear-all × and down-caret */
.dark-dd .Select-clear-zone { color: #555555 !important; }
.dark-dd .Select-clear-zone:hover { color: #ff6b6b !important; }
.dark-dd .Select-arrow { border-top-color: #777777 !important; }
.dark-dd .is-open .Select-arrow { border-bottom-color: #4a9eff !important; border-top-color: transparent !important; }

/* ── Dark-theme dropdown control bar (Dash 4.x) ───────────────────────────
   `.dark-dd` above assumes a WHITE control bar (the default for react-select)
   with dark text. On the tracking page we want the control bar itself to
   sit in the dark theme with white text, so pair `.dark-dd dark-dd-inv`.

   Dash 4.x renders dcc.Dropdown as a <button class="dash-dropdown"> with
   `dash-dropdown-value`, `dash-dropdown-placeholder`, and `dash-dropdown-clear`
   children — NOT the legacy react-select `.Select-*` classes. The rules below
   target both so either component library works.                            */
.dark-dd-inv.dash-dropdown,
.dark-dd-inv .Select-control {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
}
.dark-dd-inv.dash-dropdown .dash-dropdown-value,
.dark-dd-inv .Select-value-label,
.dark-dd-inv .Select--single > .Select-control .Select-value,
.dark-dd-inv .Select input {
    color: #e8e8e8 !important;
}
.dark-dd-inv.dash-dropdown .dash-dropdown-placeholder,
.dark-dd-inv .Select-placeholder {
    color: #888 !important;
}
.dark-dd-inv.dash-dropdown .dash-dropdown-trigger-icon,
.dark-dd-inv.dash-dropdown .dash-dropdown-clear {
    color: #aaa !important;
}
.dark-dd-inv .Select-arrow {
    border-top-color: #aaa !important;
}

/* ── RadioItems ──────────────────────────────────────────────────────────── */
.dash-radio-items label {
    color: #e8e8e8 !important;
}

/* ── Checklist (lineup picker) ─────────────────────────────────────────────
   Dash's own CSS sets `.dash-options-list-option` to a dark blue
   (rgba(0,9,38,0.9)) that overrides any color set on the container's
   inline style, so player names end up dark-on-dark inside the lineup
   picker. Force the light theme colour. Scoped to `.dash-checklist` —
   an unscoped rule also swept into Dash 4.x dropdown menus (which render
   on a white background in a Radix portal), forcing light-on-white
   and making admin merge dropdowns unreadable.                               */
.dash-checklist .dash-options-list-option {
    color: #e8e8e8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile / responsive layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar (ctrl-panel) — desktop default ─────────────────────────────── */
/* display is intentionally NOT set inline in Python so CSS fully controls it */
.ctrl-panel {
    display: flex;
    width: 340px;
    min-width: 340px;
    flex-shrink: 0;
}

/* ── Tab content rows — desktop default ─────────────────────────────────── */
/* display and height are NOT set inline in Python so CSS fully controls them */
.tab-content-row {
    display: flex;
    height: calc(100vh - 100px);
}

/* ── Sidebar toggle button — hidden on desktop ──────────────────────────── */
.sidebar-toggle-btn {
    display: none;
}

/* ── Tab labels — allow wrapping on narrower desktops ───────────────────── */
.dash-tab {
    white-space: normal !important;
    text-align: center;
}

/* ── Sticky top bar support ─────────────────────────────────────────────────
   Dash Tabs wraps the active-tab body in `#tabs-parent` with an inline
   `overflow: hidden`, which silently breaks `position: sticky` for any
   element rendered inside a tab (the sticky element un-sticks at its
   parent's top, not the viewport's). Overriding to `visible` lets the
   stat-tracking top bar actually pin to the viewport on scroll. The other
   tabs don't rely on the overflow clip for layout correctness, so this
   is safe.                                                                   */
#tabs-parent {
    overflow: visible !important;
}

/* ══════════════════════════════════════════════════
   Tablet  (≤ 1024 px)
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ctrl-panel {
        width: 280px;
        min-width: 280px;
    }
}

/* ══════════════════════════════════════════════════
   Mobile  (≤ 768 px)
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Tabs bar — smaller text, allow wrap ──── */
    .dash-tab {
        font-size: 10px !important;
        padding: 6px 4px !important;
        letter-spacing: -0.2px;
    }

    /* ── Toggle button — shown on mobile ──────── */
    .sidebar-toggle-btn {
        display: block;
        width: 100%;
        background: #1a2d3d;
        color: #4a9eff;
        border: 1px solid #4a9eff;
        border-radius: 4px;
        padding: 10px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        text-align: left;
        flex-shrink: 0;
        order: -1; /* always first in flex column */
    }
    .sidebar-toggle-btn:active {
        background: #1e3a50;
    }

    /* ── Tab content rows — stack vertically ──── */
    .tab-content-row {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 100px);
    }

    /* ── Sidebar — hidden by default, full-width when open ─── */
    .ctrl-panel {
        display: none;
        width: 100%;
        min-width: unset;
        max-height: 55vh;
        border-right: none;
        border-bottom: 1px solid #444;
        box-sizing: border-box;
    }
    .ctrl-panel.open {
        display: flex;
    }

    /* ── Chart area — fill remaining space ────── */
    .chart-area {
        min-height: 50vh;
        flex: 1 1 auto !important;
    }
    /* Plotly charts inside chart-area need a concrete height */
    .chart-area > .js-plotly-plot,
    .chart-area > div > .js-plotly-plot {
        min-height: 45vh;
    }

    /* ── Login card — full width with padding ─── */
    .login-outer {
        padding: 16px !important;
    }

    /* ── Auth header — wrap sign-in info to second row ─── */
    .auth-header {
        gap: 6px;
    }
    .auth-header > div:first-child {
        font-size: 15px !important;
    }

    /* ── Change-password / admin panels ──────── */
    #change-pw-panel > div,
    #admin-panel > div {
        flex-direction: column !important;
        padding: 14px !important;
        margin: 0 10px !important;
    }
    #change-pw-panel input,
    #admin-panel input,
    #admin-panel .dark-dd {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ── Player View controls row — single column ─── */
    #pv-player {
        width: 100% !important;
    }

    /* ── Drop-down menus — ensure they don't overflow ─── */
    .Select-menu-outer {
        max-width: 100vw;
    }
}