/* =============================================================================
   reports_v4.css — Shared report-shell styling (SINGLE SOURCE OF TRUTH)

   Every standalone report panel (Draft Report, Injury Report, League Contracts,
   Historical Draft Report, Trade Block, Coaching Grid, …) shares this shell:
     .ls-panel          fixed full-viewport host
     .ls-backdrop       click/escape layer — NON-dimming (board stays visible)
     .ls-standalone-modal   the report card itself
     .ls-header (+left/right/title/subtitle)   the themed header bar
     .ls-actions-mount  ReportActions toolbar mount (Print/Email/Downloads)
     .ls-close-btn      ✕
     .jt-mp-minimize-btn ▼ (injected by MinimizablePanel, styled here for the header)
     .ls-popout-btn     ⧉ open-in-window
     .ls-spinner / .ls-pane-loading / .ls-error   shared loading/error atoms

   These atoms were previously defined across three injected <style> blocks
   (data_provider_settings_ui_v4.js, reports_v4.js, ui_v4.js) and had drifted —
   different header colors, detached ▼, unreadable buttons. They now live here,
   once, theme-driven via --jt-* tokens.

   THEMING: the header surface uses --jt-report-header-* tokens (jt_theme_v4.css).
     dark  → navy→teal gradient, on-dark-bright controls
     light → clean white/elevated, dark controls
   The header is a fixed-contrast surface, so its controls use the on-dark-*
   family in dark mode and flip in the [data-theme="light"] block at the bottom.

   NOTE: the large tabbed League SETTINGS modal (.ls-modal, .ls-tab-bar, .ls-btn-*)
   is a SEPARATE concern and stays in data_provider_settings_ui_v4.js — only the
   report shell is consolidated here.
   ============================================================================= */

/* ── Panel host + backdrop ─────────────────────────────────────────────────── */
/* .ls-panel / .ls-backdrop are shared (by class name) with the tabbed League
   SETTINGS modal. Reports get a lighter dim+blur backdrop (board still visible,
   matching Franchise Analysis); settings keeps a stronger dim. The report
   variant is scoped via :has(> .ls-standalone-modal) so we don't need a marker
   class on every report's markup. */
.ls-panel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Report panels match Franchise Analysis: a dimmed + blurred backdrop so the
   board is visible behind the report (but de-emphasized), NOT a solid scrim
   that hides it. Click on the backdrop closes (the reports' JS binds that).
   This is the DEFAULT for reports (those used outside a live draft —
   Trade Block, League Contracts, Salary, Historical Draft Report, and Franchise
   Analysis via its own .tng styling). Scoped to panels containing a
   .ls-standalone-modal so the tabbed SETTINGS modal keeps its own stronger dim. */
.ls-panel:has(> .ls-standalone-modal):not(.ls-float) > .ls-backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── .ls-float: pure floating panel (no blur, board stays interactive) ───────
   For reports used DURING a live draft (Draft Report, Injury, Coaching, …) the
   board must stay visible AND clickable behind the report — like the Franchise
   Budgets popout. The host is click-through and the backdrop paints nothing;
   these reports close via ✕ or Esc (their JS keeps both), since a click-through
   backdrop can't be click-to-close. */
.ls-panel.ls-float {
    pointer-events: none;                 /* clicks fall through to the board */
}
.ls-panel.ls-float > .ls-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}
.ls-panel.ls-float > .ls-standalone-modal {
    pointer-events: auto;                 /* the report itself stays interactive */
}

/* Settings modal (and any non-report .ls-panel): keep the stronger dim. */
.ls-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}

/* ── Standalone report card ────────────────────────────────────────────────── */
/* Floating, resizable panel — opens over a visible, interactive board (the
   transparent backdrop above), and the user can drag the bottom-right handle to
   resize. Default size is generous but NOT viewport-filling, so the board stays
   visible around it like the Franchise Budgets popout. */
.ls-standalone-modal {
    position: relative;
    background: var(--jt-bg-deep);
    color: var(--jt-text-primary);
    border-radius: 16px;
    width: min(1100px, 94vw);
    height: min(82vh, 900px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--jt-border-primary);
    resize: both;          /* drag bottom-right corner to resize */
    min-width: 420px;
    min-height: 320px;
    max-width: 99vw;
    max-height: 94vh;
}
@media (max-width: 768px) {
    .ls-standalone-modal { resize: none; }
}

/* Height chain so report bodies (e.g. Coaching Grid's .ls-cg-wrap height:100%)
   get a bounded, scrollable container. Scoped to the standalone modal so the
   settings modal's .ls-body is untouched. */
.ls-standalone-modal > .ls-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ls-standalone-modal #lsStandalonePane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ls-standalone-modal .ls-cg-wrap { flex: 1 1 auto; }

/* ── Header (themed) ───────────────────────────────────────────────────────── */
/* Scoped to .ls-standalone-modal so the tabbed SETTINGS modal (which also uses
   .ls-header but is a separate concern, decision: reports ≠ settings) keeps its
   own header styling in data_provider_settings_ui_v4.js. */
.ls-standalone-modal .ls-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    background: var(--jt-report-header-bg);
    color: var(--jt-report-header-text);
    border-bottom: 1px solid var(--jt-report-header-border);
    flex-shrink: 0;
    /* Container-query host so ReportActions can collapse to icon-only when the
       header is narrow (report_actions_v4.css @container ra-host). */
    container-type: inline-size;
    container-name: ra-host;
}

.ls-standalone-modal .ls-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;   /* allow title/subtitle to ellipsis instead of pushing controls */
}

/* Right-side control group: ReportActions toolbar + popout + ▼ + ✕ all sit
   together here so the minimize button is always adjacent to close. */
.ls-standalone-modal .ls-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ls-standalone-modal .ls-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--jt-report-header-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-standalone-modal .ls-subtitle {
    font-size: 0.78rem;
    color: var(--jt-report-header-subtext);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ReportActions (Print/Email/Downloads) mount — sits in the header control
   group. The .ra-* buttons already use the on-dark token family, so they read
   correctly on the dark header; the light-theme block below flips them. */
.ls-standalone-modal .ls-actions-mount {
    display: inline-flex;
    align-items: center;
}

/* ── Header controls: ✕ close, ▼ minimize, ⧉ popout, + ReportActions buttons ──
   The header is a colored/dark surface in dark mode (teal gradient) and a clean
   white surface in light mode. So:
     • DARK  → on-dark-* tokens (white-translucent chrome) — designed exactly
               for controls sitting on a colored dark header.
     • LIGHT → flip to dark-on-light via the light-theme block below.
   This matches Franchise Analysis's readable look in both themes and fixes the
   washed-out Print/Email/Downloads buttons. */
.ls-standalone-modal .ls-close-btn,
.ls-standalone-modal .ls-popout-btn,
.ls-standalone-modal .ls-header .jt-mp-minimize-btn,
.ls-standalone-modal .ls-header .ra-btn,
.ls-standalone-modal .ls-header .ra-dl-trigger {
    background: var(--jt-on-dark-bg);
    color: var(--jt-on-dark-text-bright);
    border: 1px solid var(--jt-on-dark-border);
}
.ls-standalone-modal .ls-close-btn,
.ls-standalone-modal .ls-popout-btn,
.ls-standalone-modal .ls-header .jt-mp-minimize-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ls-standalone-modal .ls-close-btn:hover,
.ls-standalone-modal .ls-popout-btn:hover,
.ls-standalone-modal .ls-header .jt-mp-minimize-btn:hover,
.ls-standalone-modal .ls-header .ra-btn:hover,
.ls-standalone-modal .ls-header .ra-dl-trigger:hover {
    background: var(--jt-on-dark-bg-hover);
    border-color: var(--jt-on-dark-border-hover);
    color: var(--jt-on-dark-text-bright);
}
.ls-standalone-modal .ls-close-btn:focus-visible,
.ls-standalone-modal .ls-popout-btn:focus-visible,
.ls-standalone-modal .ls-header .jt-mp-minimize-btn:focus-visible {
    outline: 2px solid var(--jt-accent-blue, #0ea5e9);
    outline-offset: 1px;
}

/* LIGHT theme: match Franchise Analysis exactly.
   FA's header has NO background — it inherits the modal surface (a clean light
   panel in light mode) with just a bottom border, and uses solid neutral
   buttons (--jt-bg-tertiary). So in light mode we drop the white gradient and
   the controls become solid-neutral, matching FA's look. (Dark mode keeps the
   teal gradient + on-dark controls, above.) */
[data-theme="light"] .ls-standalone-modal .ls-header {
    background: transparent;                 /* inherit the modal's light surface, like .tng-header */
    border-bottom: 1px solid var(--jt-border-primary);
}
[data-theme="light"] .ls-standalone-modal .ls-title {
    color: var(--jt-text-primary);
}
[data-theme="light"] .ls-standalone-modal .ls-subtitle {
    color: var(--jt-text-secondary);
}
[data-theme="light"] .ls-standalone-modal .ls-close-btn,
[data-theme="light"] .ls-standalone-modal .ls-popout-btn,
[data-theme="light"] .ls-standalone-modal .ls-header .jt-mp-minimize-btn,
[data-theme="light"] .ls-standalone-modal .ls-header .ra-btn,
[data-theme="light"] .ls-standalone-modal .ls-header .ra-dl-trigger {
    background: var(--jt-bg-tertiary);       /* solid neutral, matches .tng-close */
    color: var(--jt-text-secondary);
    border-color: var(--jt-border-primary);
}
[data-theme="light"] .ls-standalone-modal .ls-close-btn:hover,
[data-theme="light"] .ls-standalone-modal .ls-popout-btn:hover,
[data-theme="light"] .ls-standalone-modal .ls-header .jt-mp-minimize-btn:hover,
[data-theme="light"] .ls-standalone-modal .ls-header .ra-btn:hover,
[data-theme="light"] .ls-standalone-modal .ls-header .ra-dl-trigger:hover {
    background: var(--jt-bg-elevated);
    border-color: var(--jt-border-secondary);
    color: var(--jt-text-primary);
}

/* ── Body / loading / error (shared atoms) ─────────────────────────────────── */
.ls-pane-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    color: var(--jt-text-secondary);
}

.ls-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--jt-border-primary);
    border-top-color: var(--jt-accent-purple, #7c3aed);
    border-radius: 50%;
    animation: ls-spin 0.7s linear infinite;
}
@keyframes ls-spin { to { transform: rotate(360deg); } }
.ls-spinner-text { font-size: 0.85rem; }

.ls-error {
    padding: 2rem;
    text-align: center;
    color: var(--jt-accent-red, #f87171);
    font-size: 0.9rem;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ls-standalone-modal {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
    .ls-header { padding: 0.75rem 0.9rem; }
}