/* franchise_tag_report_v4.css — Franchise Tag & Holdout Report
   (see franchise_tag_report_v4.js · mockup docs/mockups/franchise_tag_report_v2.html)

   Colors follow the salary report's existing tier markers so the same concept
   reads the same on both surfaces: tag = amber (.sr-tier-tag), holdout = red
   (.sr-tier-holdout, "more severe than tag"). Aliased once here so a future
   re-hue is one edit. */
#franchiseTagReportModal {
    --ftr-tag:       var(--jgm-accent-amber-text);
    --ftr-tag-fill:  var(--jgm-accent-amber);   /* washes + borders, never text */
    --ftr-hold:      var(--jgm-accent-red-text);
    --ftr-hold-fill: var(--jgm-accent-red);
}

/* Opens FROM the Salary Report (10001, 10002 when fronted) and must sit above
   it — and above the LCR action panel band (10003–10012) — while staying under
   toasts/tour overlays (10040+). */
#franchiseTagReportModal .ftr-backdrop {
    position: fixed; inset: 0; z-index: 10020;
    background: var(--jgm-overlay-bg); backdrop-filter: var(--jgm-overlay-blur);
}
#franchiseTagReportModal .ftr-shell {
    position: fixed; inset: 0; z-index: 10021;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
#franchiseTagReportModal .ftr-modal {
    pointer-events: auto;
    display: flex; flex-direction: column;
    background: var(--jgm-modal-bg); border: 1px solid var(--jgm-modal-border);
    border-radius: 12px; box-shadow: var(--jgm-modal-shadow);
    width: min(1180px, 96vw); height: min(720px, 90vh);
    overflow: hidden;
}

/* ── header ───────────────────────────────────────────────────── */
#franchiseTagReportModal .ftr-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--jgm-border-primary);
    cursor: grab; flex: none;
}
#franchiseTagReportModal .ftr-title { font-size: .95rem; font-weight: 800; white-space: nowrap; }
#franchiseTagReportModal .ftr-ctx {
    font-size: .7rem; color: var(--jgm-text-secondary); white-space: nowrap;
}
#franchiseTagReportModal .ftr-spacer { flex: 1; }
#franchiseTagReportModal .ftr-season-group {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
}
#franchiseTagReportModal .ftr-season-label {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--jgm-text-muted); white-space: nowrap;
}
#franchiseTagReportModal .ftr-season-select {
    background: var(--jgm-bg-tertiary); border: 1px solid var(--jgm-border-secondary);
    border-radius: 6px; color: var(--jgm-text-primary); font-size: .72rem; padding: 3px 7px;
}
#franchiseTagReportModal .ftr-close {
    width: 26px; height: 26px; border: none; background: transparent;
    color: var(--jgm-text-secondary); font-size: 1rem; cursor: pointer; border-radius: 6px;
}
#franchiseTagReportModal .ftr-close:hover { background: var(--jgm-bg-hover); color: var(--jgm-text-primary); }

/* Plain (non-gradient) header → flip the on-dark toolbar chrome in light theme,
   same block Projections and the Player Report carry. */
[data-theme="light"] #franchiseTagReportModal .ftr-header .ra-btn,
[data-theme="light"] #franchiseTagReportModal .ftr-header .ra-dl-trigger,
[data-theme="light"] #franchiseTagReportModal .ftr-header .jgm-mp-minimize-btn {
    background: var(--jgm-bg-tertiary);
    color: var(--jgm-text-secondary);
    border-color: var(--jgm-border-primary);
}
[data-theme="light"] #franchiseTagReportModal .ftr-header .ra-btn:hover,
[data-theme="light"] #franchiseTagReportModal .ftr-header .ra-dl-trigger:hover,
[data-theme="light"] #franchiseTagReportModal .ftr-header .jgm-mp-minimize-btn:hover {
    background: var(--jgm-bg-elevated);
    border-color: var(--jgm-border-secondary);
    color: var(--jgm-text-primary);
}

/* ── position price cards ─────────────────────────────────────── */
#franchiseTagReportModal .ftr-cards {
    display: flex; gap: 10px; padding: 12px 14px; flex-wrap: wrap; flex: none;
    border-bottom: 1px solid var(--jgm-border-primary);
}
#franchiseTagReportModal .ftr-cards:empty { display: none; }
#franchiseTagReportModal .ftr-card {
    flex: 1; min-width: 172px;
    background: var(--jgm-bg-secondary); border: 1px solid var(--jgm-border-primary);
    border-radius: 9px; padding: 7px 11px 5px; cursor: pointer;
}
#franchiseTagReportModal .ftr-card:hover { border-color: var(--jgm-border-focus); }
#franchiseTagReportModal .ftr-card-on {
    border-color: var(--ftr-tag-fill);
    background: color-mix(in srgb, var(--ftr-tag-fill) 10%, var(--jgm-bg-secondary));
}
#franchiseTagReportModal .ftr-cardpos {
    font-size: .68rem; font-weight: 800; letter-spacing: .05em; margin-bottom: 2px;
}
#franchiseTagReportModal .ftr-cardcount {
    font-size: .6rem; font-weight: 400; color: var(--jgm-text-muted); margin-left: 6px;
}
#franchiseTagReportModal .ftr-cardline {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .68rem; color: var(--jgm-text-secondary);
    padding: 2px 0; border-top: 1px solid var(--jgm-border-muted);
}
#franchiseTagReportModal .ftr-cardline b { font-weight: 800; }
#franchiseTagReportModal .ftr-cardline.ftr-tag  b { color: var(--ftr-tag);  font-size: .95rem; }
#franchiseTagReportModal .ftr-cardline.ftr-hold b { color: var(--ftr-hold); }

/* ── body / table ─────────────────────────────────────────────── */
#franchiseTagReportModal .ftr-body { flex: 1; overflow: auto; }
#franchiseTagReportModal .ftr-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
#franchiseTagReportModal .ftr-th {
    position: sticky; top: 0; z-index: 1;
    background: var(--jgm-bg-secondary); color: var(--jgm-text-secondary);
    text-align: left; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
    padding: 7px 10px; border-bottom: 1px solid var(--jgm-border-primary); white-space: nowrap;
}
#franchiseTagReportModal .ftr-th-num  { text-align: right; }
#franchiseTagReportModal .ftr-th-rank { width: 34px; text-align: right; }
#franchiseTagReportModal .ftr-th-chk  { width: 22px; }
#franchiseTagReportModal .ftr-td {
    padding: 5px 10px; border-bottom: 1px solid var(--jgm-border-muted); white-space: nowrap;
}
#franchiseTagReportModal .ftr-td-num  { text-align: right; font-variant-numeric: tabular-nums; }
#franchiseTagReportModal .ftr-td-rank { text-align: right; color: var(--jgm-text-muted); }
#franchiseTagReportModal .ftr-td-chk  { color: var(--ftr-tag); font-weight: 800; }
#franchiseTagReportModal .ftr-name    { font-weight: 600; color: var(--jgm-text-primary); }
#franchiseTagReportModal .ftr-nfl     { font-size: .66rem; color: var(--jgm-text-muted); margin-left: 5px; }
#franchiseTagReportModal .ftr-posb {
    display: inline-block; border: 1px solid; border-radius: 4px;
    padding: 0 6px; font-size: .64rem; font-weight: 700;
}
#franchiseTagReportModal .ftr-td-owner,
#franchiseTagReportModal .ftr-td-contract { color: var(--jgm-text-secondary); }
#franchiseTagReportModal .ftr-salary   { font-weight: 700; color: var(--jgm-text-primary); }
#franchiseTagReportModal .ftr-basis-up { font-weight: 700; color: var(--jgm-accent-amber-text); }
#franchiseTagReportModal .ftr-dim      { color: var(--jgm-text-muted); }
#franchiseTagReportModal .ftr-td-src   { font-size: .68rem; color: var(--jgm-text-muted); }
#franchiseTagReportModal .ftr-src-hist { color: var(--jgm-accent-purple-text); }
#franchiseTagReportModal .ftr-src-ovr  { color: var(--jgm-accent-green-text); }

/* rows above the tag line / between tag and the last holdout line */
#franchiseTagReportModal .ftr-row-tag  td { background: color-mix(in srgb, var(--ftr-tag-fill) 7%, transparent); }
#franchiseTagReportModal .ftr-row-hold td { background: color-mix(in srgb, var(--ftr-hold-fill) 6%, transparent); }

/* the price lines themselves */
#franchiseTagReportModal .ftr-lrow td {
    padding: 7px 10px; font-size: .74rem; font-weight: 700;
    border-top: 2px solid; border-bottom: 2px solid;
}
#franchiseTagReportModal .ftr-lrow-tag td {
    color: var(--ftr-tag); border-color: var(--ftr-tag-fill);
    background: color-mix(in srgb, var(--ftr-tag-fill) 16%, transparent);
}
#franchiseTagReportModal .ftr-lrow-hold td {
    color: var(--ftr-hold); border-color: var(--ftr-hold-fill);
    background: color-mix(in srgb, var(--ftr-hold-fill) 14%, transparent);
}
#franchiseTagReportModal .ftr-lrow-rhs {
    float: right; font-weight: 600; color: var(--jgm-text-secondary);
}

#franchiseTagReportModal .ftr-showall {
    padding: 8px 14px; text-align: center; cursor: pointer;
    font-size: .72rem; font-weight: 600; color: var(--jgm-accent-blue-text);
    border-top: 1px solid var(--jgm-border-muted);
}
#franchiseTagReportModal .ftr-showall:hover { background: var(--jgm-bg-hover); }
#franchiseTagReportModal .ftr-foot {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 9px 14px; font-size: .68rem; color: var(--jgm-text-muted);
    border-top: 1px solid var(--jgm-border-primary); background: var(--jgm-bg-secondary);
}
#franchiseTagReportModal .ftr-k-sal { color: var(--jgm-text-primary); }
#franchiseTagReportModal .ftr-k-bas { color: var(--ftr-tag); }

/* ── loading / empty ──────────────────────────────────────────── */
#franchiseTagReportModal .ftr-loading {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 60px 20px; color: var(--jgm-text-secondary); font-size: .82rem; text-align: center;
}
#franchiseTagReportModal .ftr-spinner {
    width: 22px; height: 22px; flex: none;
    border: 2px solid var(--jgm-border-secondary); border-top-color: var(--jgm-accent-blue);
    border-radius: 50%; animation: ftr-spin .8s linear infinite;
}
@keyframes ftr-spin { to { transform: rotate(360deg); } }
#franchiseTagReportModal .ftr-empty {
    padding: 60px 30px; text-align: center; max-width: 620px; margin: 0 auto;
    color: var(--jgm-text-secondary); font-size: .82rem; line-height: 1.6;
}

/* ── print ────────────────────────────────────────────────────── */
@media print {
    #franchiseTagReportModal .ftr-backdrop,
    #franchiseTagReportModal .ftr-close,
    #franchiseTagReportModal .ftr-showall,
    #franchiseTagReportModal .ftr-season-group { display: none !important; }
    #franchiseTagReportModal .ftr-shell  { position: static; }
    #franchiseTagReportModal .ftr-modal  { width: 100%; height: auto; border: none; box-shadow: none; }
    #franchiseTagReportModal .ftr-body   { overflow: visible; }
}