/* projections_report_v4.css — Jerry Projections Report (see projections_report_v4.js) */

#projectionsReportModal .pjr-backdrop {
    position: fixed; inset: 0; z-index: 1999;
    background: var(--jt-overlay-bg); backdrop-filter: var(--jt-overlay-blur);
}
#projectionsReportModal .pjr-shell {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
#projectionsReportModal .pjr-modal {
    pointer-events: auto;
    display: flex; flex-direction: column;
    background: var(--jt-modal-bg); border: 1px solid var(--jt-modal-border);
    border-radius: 12px; box-shadow: var(--jt-modal-shadow);
    width: min(1040px, 94vw); height: min(780px, 90vh);
    overflow: hidden;
}
#projectionsReportModal .pjr-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--jt-border-primary);
    cursor: grab; flex: none;
}
#projectionsReportModal .pjr-title { font-size: .95rem; font-weight: 800; white-space: nowrap; }
#projectionsReportModal .pjr-league {
    font-size: .7rem; color: var(--jt-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#projectionsReportModal .pjr-spacer { flex: 1; }
#projectionsReportModal .pjr-close {
    width: 26px; height: 26px; border: none; background: transparent;
    color: var(--jt-text-secondary); font-size: 1rem; cursor: pointer; border-radius: 6px;
}
#projectionsReportModal .pjr-close:hover { background: var(--jt-bg-hover); color: var(--jt-text-primary); }

/* ReportActions + minimize buttons: .ra-btn ships on-dark (white-chrome)
   styling for the gradient report headers. This header is a plain surface,
   so flip the toolbar to dark-on-light in light theme — mirrors
   reports_v4.css's .ls-standalone-modal block (same fix as Transactions). */
[data-theme="light"] #projectionsReportModal .pjr-header .ra-btn,
[data-theme="light"] #projectionsReportModal .pjr-header .ra-dl-trigger,
[data-theme="light"] #projectionsReportModal .pjr-header .jt-mp-minimize-btn {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-secondary);
    border-color: var(--jt-border-primary);
}
[data-theme="light"] #projectionsReportModal .pjr-header .ra-btn:hover,
[data-theme="light"] #projectionsReportModal .pjr-header .ra-dl-trigger:hover,
[data-theme="light"] #projectionsReportModal .pjr-header .jt-mp-minimize-btn:hover {
    background: var(--jt-bg-elevated);
    border-color: var(--jt-border-secondary);
    color: var(--jt-text-primary);
}

/* controls */
#projectionsReportModal .pjr-ctrl {
    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;
}
#projectionsReportModal .pjr-flabel {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .6px;
    color: var(--jt-text-muted); font-weight: 700;
}
#projectionsReportModal .pjr-sel,
#projectionsReportModal .pjr-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;
}
#projectionsReportModal .pjr-q { width: 150px; }
#projectionsReportModal .pjr-seg {
    display: inline-flex; border: 1px solid var(--jt-border-secondary);
    border-radius: 8px; overflow: hidden;
}
#projectionsReportModal .pjr-seg button {
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
    border: none; padding: 4px 12px; font-size: .72rem; font-weight: 700; cursor: pointer;
}
#projectionsReportModal .pjr-seg button.on { background: var(--jt-accent-teal); color: var(--jt-text-inverse); }
#projectionsReportModal .pjr-wkstep { display: inline-flex; align-items: center; gap: 4px; }
#projectionsReportModal .pjr-wkstep button {
    width: 22px; height: 22px; border-radius: 6px;
    border: 1px solid var(--jt-border-secondary);
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    cursor: pointer; font-size: .68rem;
}
#projectionsReportModal .pjr-wk { font-size: .76rem; font-weight: 800; min-width: 42px; text-align: center; }
#projectionsReportModal .pjr-chips { display: flex; gap: 4px; }
#projectionsReportModal .pjr-pchip {
    border: 1px solid var(--jt-border-primary); background: transparent;
    color: var(--jt-text-muted); border-radius: 999px; padding: 2px 9px;
    font-size: .68rem; font-weight: 700; cursor: pointer;
}
#projectionsReportModal .pjr-pchip.on {
    color: var(--jt-accent-blue); background: var(--jt-accent-blue-bg);
    border-color: var(--jt-accent-blue);
}

/* summary strip — the tiles ARE the lens buttons (off → highlight → only;
   Players clears). Tri-state shown by border tint (hl) / solid edge (only)
   and the small state word under the label. */
#projectionsReportModal .pjr-summary {
    display: flex; gap: 8px; padding: 8px 14px; flex-wrap: wrap; flex: none;
    border-bottom: 1px solid var(--jt-border-primary);
}
#projectionsReportModal .pjr-summary:empty { display: none; }
#projectionsReportModal .pjr-stile {
    background: var(--jt-bg-secondary); border: 1px solid var(--jt-border-primary);
    border-radius: 8px; padding: 4px 12px 2px; text-align: center; min-width: 84px;
    cursor: pointer; font: inherit; color: inherit;
}
#projectionsReportModal .pjr-stile:hover { border-color: var(--jt-border-focus); background: var(--jt-bg-tertiary); }
#projectionsReportModal .pjr-stile.idle { cursor: default; }
#projectionsReportModal .pjr-stile.idle:hover { border-color: var(--jt-border-primary); background: var(--jt-bg-secondary); }
#projectionsReportModal .pjr-sst {
    font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    color: var(--jt-text-muted); min-height: .8em;
}
#projectionsReportModal .pjr-stile[data-tone="teal"].hl    { border-color: var(--jt-accent-teal);  background: color-mix(in srgb, var(--jt-accent-teal) 10%, var(--jt-bg-secondary)); }
#projectionsReportModal .pjr-stile[data-tone="amber"].hl   { border-color: var(--jt-accent-amber); background: color-mix(in srgb, var(--jt-accent-amber) 10%, var(--jt-bg-secondary)); }
#projectionsReportModal .pjr-stile[data-tone="green"].hl   { border-color: var(--jt-accent-green); background: color-mix(in srgb, var(--jt-accent-green) 10%, var(--jt-bg-secondary)); }
#projectionsReportModal .pjr-stile.hl .pjr-sst,
#projectionsReportModal .pjr-stile.only .pjr-sst { color: inherit; }
#projectionsReportModal .pjr-stile[data-tone="teal"].only  { border: 2px solid var(--jt-accent-teal);  background: color-mix(in srgb, var(--jt-accent-teal) 18%, var(--jt-bg-secondary)); }
#projectionsReportModal .pjr-stile[data-tone="amber"].only { border: 2px solid var(--jt-accent-amber); background: color-mix(in srgb, var(--jt-accent-amber) 18%, var(--jt-bg-secondary)); }
#projectionsReportModal .pjr-stile[data-tone="green"].only { border: 2px solid var(--jt-accent-green); background: color-mix(in srgb, var(--jt-accent-green) 18%, var(--jt-bg-secondary)); }
#projectionsReportModal .pjr-stile[data-tone="teal"].only .pjr-sst  { color: var(--jt-accent-teal); }
#projectionsReportModal .pjr-stile[data-tone="amber"].only .pjr-sst { color: var(--jt-accent-amber); }
#projectionsReportModal .pjr-stile[data-tone="green"].only .pjr-sst { color: var(--jt-accent-green); }
#projectionsReportModal .pjr-sn { font-weight: 800; font-size: .95rem; }
#projectionsReportModal .pjr-sn[data-tone="teal"]  { color: var(--jt-accent-teal); }
#projectionsReportModal .pjr-sn[data-tone="amber"] { color: var(--jt-accent-amber); }
#projectionsReportModal .pjr-sn[data-tone="green"] { color: var(--jt-accent-green); }
#projectionsReportModal .pjr-sl {
    font-size: .58rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--jt-text-secondary);
}

/* table */
#projectionsReportModal .pjr-body { flex: 1; overflow: auto; }
#projectionsReportModal .pjr-body table { width: 100%; border-collapse: collapse; font-size: .78rem; }
#projectionsReportModal thead th {
    position: sticky; top: 0; background: var(--jt-bg-secondary); z-index: 2;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .6px;
    color: var(--jt-text-secondary); padding: 6px 10px; text-align: left;
    border-bottom: 1px solid var(--jt-border-primary); white-space: nowrap;
}
#projectionsReportModal thead th.num { text-align: right; }
#projectionsReportModal thead th.sortable { cursor: pointer; }
#projectionsReportModal thead th.sorted { color: var(--jt-accent-teal); }
#projectionsReportModal tbody td {
    padding: 5px 10px; border-bottom: 1px solid var(--jt-border-primary); white-space: nowrap;
}
#projectionsReportModal tbody td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
#projectionsReportModal tbody tr:hover td { background: var(--jt-bg-hover); }
#projectionsReportModal .pjr-rkcol { color: var(--jt-text-muted); font-size: .68rem; width: 34px; }
#projectionsReportModal .pjr-pl { font-weight: 700; }
#projectionsReportModal .pjr-meta { color: var(--jt-text-muted); font-weight: 400; font-size: .68rem; }
#projectionsReportModal .pjr-dim { color: var(--jt-text-secondary); font-weight: 400; }
#projectionsReportModal .pjr-pos {
    display: inline-block; width: 34px; text-align: center; border-radius: 5px;
    padding: 1px 0; font-size: .62rem; font-weight: 800; color: var(--jt-text-inverse);
}
#projectionsReportModal .pjr-pos-QB { background: var(--jt-pos-qb-accent); }
#projectionsReportModal .pjr-pos-RB { background: var(--jt-pos-rb-accent); }
#projectionsReportModal .pjr-pos-WR { background: var(--jt-pos-wr-accent); }
#projectionsReportModal .pjr-pos-TE { background: var(--jt-pos-te-accent); }
#projectionsReportModal .pjr-own { font-size: .68rem; color: var(--jt-text-secondary); }
#projectionsReportModal .pjr-own.mine { color: var(--jt-accent-teal); font-weight: 700; }
#projectionsReportModal .pjr-own.fa { color: var(--jt-accent-green); font-weight: 800; }
#projectionsReportModal .pjr-rchip {
    display: inline-block; border-radius: 4px; padding: 0 5px;
    font-size: .6rem; font-weight: 800;
    color: var(--jt-accent-amber); background: var(--jt-accent-amber-bg);
}
#projectionsReportModal .pjr-bye { color: var(--jt-accent-red); font-weight: 800; }

/* row lenses (highlight mode) */
#projectionsReportModal tr.is-my td { background: color-mix(in srgb, var(--jt-accent-teal) 9%, transparent); }
#projectionsReportModal tr.is-fa td { background: color-mix(in srgb, var(--jt-accent-green) 8%, transparent); }
#projectionsReportModal tr.is-rk { box-shadow: inset 3px 0 0 var(--jt-accent-amber); }

/* NFL team group headers */
#projectionsReportModal .pjr-teamhdr td {
    background: var(--jt-bg-secondary); font-weight: 800; font-size: .68rem;
    letter-spacing: .5px; color: var(--jt-text-secondary); text-transform: uppercase;
}

#projectionsReportModal .pjr-footer {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex: none;
    border-top: 1px solid var(--jt-border-primary);
    font-size: .68rem; color: var(--jt-text-muted);
}
#projectionsReportModal .pjr-empty {
    padding: 30px; text-align: center; color: var(--jt-text-muted); font-size: .8rem;
}
#projectionsReportModal .pjr-retry {
    background: var(--jt-bg-tertiary); color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-secondary); border-radius: 7px;
    padding: 5px 14px; font-size: .74rem; font-weight: 700; cursor: pointer;
}

/* mobile: full-bleed sheet, like the other reports */
@media (max-width: 640px) {
    #projectionsReportModal .pjr-modal { width: 100vw; height: 100dvh; border-radius: 0; }
    #projectionsReportModal .pjr-q { width: 110px; }
}

/* print: chrome off, table only */
@media print {
    #projectionsReportModal .pjr-ctrl, #projectionsReportModal .pjr-close,
    #projectionsReportModal .pjr-actions-mount, #projectionsReportModal .pjr-backdrop,
    #projectionsReportModal .jt-mp-minimize-btn { display: none !important; }
    #projectionsReportModal .pjr-modal { width: 100%; height: auto; box-shadow: none; }
    #projectionsReportModal .pjr-body { overflow: visible; }
}