/* roster_grid_report_v4.css — the whole league's rosters on one page.
   Shell mirrors the Projections/Transactions report pattern (backdrop + shell
   + modal, MinimizablePanel drives float/drag/resize). Mockup:
   docs/mockups/roster_grid_report_v2.html */

#rosterGridReportModal { position: fixed; inset: 0; z-index: var(--z-modal, 2000); }

.rgr-backdrop {
    position: absolute; inset: 0;
    background: var(--jt-overlay-bg, rgba(0,0,0,.55));
}
.rgr-shell { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

.rgr-modal {
    position: relative;
    display: flex; flex-direction: column;
    width: min(1180px, 96vw);
    height: min(82vh, 900px);
    min-height: 320px;
    background: var(--jt-bg-secondary);
    color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    overflow: hidden;
}

/* ── header ──────────────────────────────────────────────────────────── */
.rgr-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--jt-border-muted);
    flex-shrink: 0;
}
.rgr-title  { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.rgr-league { color: var(--jt-text-muted); font-size: 0.78rem;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgr-spacer { flex: 1 1 auto; }
.rgr-close {
    background: transparent; border: 1px solid transparent; color: var(--jt-text-primary);
    font-size: 1.1rem; cursor: pointer; width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
}
.rgr-close:hover { background: var(--jt-bg-hover); border-color: var(--jt-border-muted); }

/* ── control row ─────────────────────────────────────────────────────── */
.rgr-ctrl {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 14px;
    border-bottom: 1px solid var(--jt-border-muted);
    background: var(--jt-bg-primary);
    flex-shrink: 0;
}
.rgr-lbl {
    font-size: 0.66rem; color: var(--jt-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
}
/* The toggles are shared Utils.ctxMenuHTML pills — they bring their own
   styling, so this is only the mount box. Deliberately no local button styling:
   a bespoke look here is how two controls that should be identical drift. */
.rgr-mount { display: inline-flex; }
.rgr-hint { color: var(--jt-text-muted); font-size: 0.72rem; }

/* ── body ────────────────────────────────────────────────────────────── */
.rgr-body { flex: 1 1 auto; overflow: auto; padding: 0; }
.rgr-empty { padding: 28px; text-align: center; color: var(--jt-text-muted); font-size: 0.85rem; }

.rgr-grid { border-collapse: collapse; width: 100%; font-size: 0.72rem; }
.rgr-grid th {
    position: sticky; top: 0; z-index: 2;
    background: var(--jt-bg-deep);
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--jt-text-muted); font-weight: 700;
    text-align: left; padding: 6px 7px; white-space: nowrap;
    border-bottom: 2px solid var(--jt-border-muted);
}
.rgr-grid th small { display: block; font-weight: 400; opacity: .75; letter-spacing: 0; }
.rgr-grid td {
    padding: 2px 7px; vertical-align: top;
    border-bottom: 1px solid var(--jt-border-muted);
}

/* Position column (landscape): the label prints once per band. */
.rgr-poscol {
    width: 42px; white-space: nowrap;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
    color: var(--jt-text-muted); text-transform: uppercase;
}
/* Team column (portrait). */
.rgr-teamcol { width: 128px; font-weight: 700; white-space: nowrap; }
.rgr-teamcol small { display: block; font-weight: 400; font-size: 0.62rem; color: var(--jt-text-muted); }

.rgr-nm   { font-weight: 600; white-space: nowrap; }
.rgr-ct   { color: var(--jt-text-muted); font-size: 0.64rem; white-space: nowrap; }
.rgr-p    { padding: 1px 0; }
.rgr-none { color: var(--jt-text-muted); }

/* Markers. Slot state and injury state read differently on purpose: an IR/taxi
   marker is roster management, an injury marker is news. */
.rgr-mk { font-size: 0.6rem; font-weight: 700; margin-left: 3px; vertical-align: 1px; }
.rgr-mk-ir { color: var(--jt-accent-purple-text); }
.rgr-mk-t  { color: var(--jt-accent-teal); }
.rgr-mk-q  { color: var(--jt-accent-amber); }
.rgr-mk-o  { color: var(--jt-accent-red); }

/* Position tint — a left rule in landscape (rows are the position), a top rule
   in portrait (columns are). Same hues as the roster board's position groups. */
.rgr-grid tr.rgr-qb  td:first-child { box-shadow: inset 3px 0 0 var(--jt-accent-red); }
.rgr-grid tr.rgr-rb  td:first-child { box-shadow: inset 3px 0 0 var(--jt-accent-green); }
.rgr-grid tr.rgr-wr  td:first-child { box-shadow: inset 3px 0 0 var(--jt-accent-blue); }
.rgr-grid tr.rgr-te  td:first-child { box-shadow: inset 3px 0 0 var(--jt-accent-amber); }
.rgr-grid tr.rgr-k   td:first-child { box-shadow: inset 3px 0 0 var(--jt-accent-purple); }
.rgr-grid tr.rgr-dst td:first-child { box-shadow: inset 3px 0 0 var(--jt-text-muted); }

.rgr-pgrid td.rgr-qb  { box-shadow: inset 0 2px 0 var(--jt-accent-red); }
.rgr-pgrid td.rgr-rb  { box-shadow: inset 0 2px 0 var(--jt-accent-green); }
.rgr-pgrid td.rgr-wr  { box-shadow: inset 0 2px 0 var(--jt-accent-blue); }
.rgr-pgrid td.rgr-te  { box-shadow: inset 0 2px 0 var(--jt-accent-amber); }
.rgr-pgrid td.rgr-k   { box-shadow: inset 0 2px 0 var(--jt-accent-purple); }
.rgr-pgrid td.rgr-dst { box-shadow: inset 0 2px 0 var(--jt-text-muted); }
.rgr-pgrid td { padding: 5px 7px; }

/* Portrait runs denser than landscape: it fits SIX position columns rather
   than one, so the name has less room and the page has more rows to hold. */
.rgr-pgrid .rgr-nm { font-size: 0.66rem; }
.rgr-pgrid .rgr-ct { font-size: 0.58rem; }
.rgr-pgrid .rgr-teamcol { font-size: 0.68rem; }

/* Deep cells go two columns (see RosterGridReport.SPLIT_AT). CSS columns, not
   grid: the list is ALREADY in value order, and columns fill top-to-bottom
   then across — so the best player stays first and reading down still ranks.
   A grid would reorder them left-to-right and quietly break that. */
.rgr-stack-2 {
    column-count: 2;
    column-gap: 10px;
}
.rgr-stack-2 .rgr-p {
    break-inside: avoid;          /* never split a player across the columns */
    -webkit-column-break-inside: avoid;
}

/* Collapsed holdout line. Dimmed and small because it is roster BOOKKEEPING,
   not a player — but present, because the spots are real and the per-team
   count includes them. Names are inline (never a tooltip): this report is
   print-first and a tooltip does not survive paper. */
.rgr-hold {
    display: block;
    color: var(--jt-text-muted);
    font-weight: 400;
    font-size: 0.6rem;
    font-style: italic;
}
.rgr-holdrow td {
    color: var(--jt-text-muted);
    font-size: 0.6rem;
    font-style: italic;
    border-top: 1px solid var(--jt-border-muted);
}

/* ── legend ──────────────────────────────────────────────────────────── */
.rgr-legend {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding: 7px 14px; flex-shrink: 0;
    border-top: 1px solid var(--jt-border-muted);
    color: var(--jt-text-muted); font-size: 0.68rem;
}
.rgr-legend:empty { display: none; }

/* ── print ───────────────────────────────────────────────────────────── */
@media print {
    /* Isolation is the FRAMEWORK's job — ReportActions marks the printing panel
       with data-jt-print-root and report_actions_v4.css hides every other
       top-level node. A 'body > *:not(#me)' rule here would fire on every print
       in the app and blank out other reports, which is the exact bug that made
       this report print empty pages (reports_v4.js, Aug 2026). Only the
       counter-rule below is ours to own: it re-asserts visibility in case some
       other stylesheet's legacy hide is still in force. */
    #rosterGridReportModal,
    #rosterGridReportModal * { visibility: visible !important; }
    #rosterGridReportModal { position: static !important; inset: auto !important; }
    .rgr-backdrop, .rgr-ctrl, .rgr-close, .rgr-actions-mount { display: none !important; }
    .rgr-shell { position: static !important; display: block !important; }
    .rgr-modal {
        position: static !important;
        width: 100% !important; height: auto !important; max-height: none !important;
        border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
        background: #fff !important; color: #000 !important;
    }
    .rgr-body { overflow: visible !important; }
    .rgr-hold, .rgr-holdrow td { color: #555 !important; }
    .rgr-modal.rgr-portrait .rgr-nm { font-size: 7.5pt; }
    .rgr-modal.rgr-portrait .rgr-ct { font-size: 6.5pt; }
    /* Sticky headers repeat per printed page via thead instead. */
    .rgr-grid thead { display: table-header-group; }
    .rgr-grid th { position: static !important; background: #eee !important; color: #000 !important; }
    .rgr-grid tr { break-inside: avoid; }
    .rgr-nm { color: #000 !important; }
    .rgr-ct, .rgr-teamcol small, .rgr-poscol { color: #444 !important; }
    .rgr-legend { border-top: 1px solid #999; color: #333 !important; }
    .rgr-modal { overflow: visible !important; }

    /* NO @page here. @page cannot be selector-scoped, so a fixed size in this
       file would force one orientation on both layouts — and worse, would
       fight every other report's. The report injects its own @page at print
       time to match the chosen layout (see _syncPageStyle). */
}