/* ============================================================================
 * snapshot_viewer_v4.css
 *
 * Styles for SnapshotViewerModal (sv-*) and SnapshotCompareModal (sc-*).
 * Uses the project's --jt-* token family so it themes correctly in both
 * light and dark mode. Width tracks the Manage Roster modal pattern:
 *   min(960px, 99vw)   — 96vw caused scroll issues on iPad.
 *
 * Class namespace:
 *   .sv-*  Snapshot Viewer (list + detail single modal)
 *   .sc-*  Snapshot Compare (two side-by-side detail panes)
 *   .sv-pos-* / .sv-contract-* / .sv-kind-*  shared with both
 *
 * The compare modal reuses several .sv-* utility classes (player rows,
 * franchise selector, diff highlight) so the visual is identical.
 * ============================================================================ */

/* ── Overlay (shared) ────────────────────────────────────────────────────── */
.sv-overlay,
.sc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 12px;
    overflow-y: auto;
}

.sv-content,
.sc-content {
    width: min(960px, 99vw);
    max-height: calc(100vh - 64px);
    background: var(--jt-bg-primary);
    color: var(--jt-text-primary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--jt-font-sans, system-ui, -apple-system, sans-serif);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.sv-header,
.sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-secondary);
}

.sv-title,
.sc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--jt-text-primary);
}

.sv-title-icon { font-size: 17px; }

.sv-subtitle,
.sc-subtitle {
    font-size: 11px;
    color: var(--jt-text-muted);
    margin-top: 2px;
}

.sv-close-btn,
.sc-close-btn,
.sc-back-btn {
    background: transparent;
    border: none;
    color: var(--jt-text-secondary);
    font-size: 18px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.sv-close-btn:hover,
.sc-close-btn:hover,
.sc-back-btn:hover {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-primary);
}

.sc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Action bar (single line) ────────────────────────────────────────────── */
.sv-action-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--jt-bg-secondary);
    border-bottom: 1px solid var(--jt-border-primary);
    flex-wrap: nowrap;
}

.sv-filter,
.sv-search {
    background: var(--jt-bg-tertiary);
    border: 1px solid var(--jt-border-primary);
    color: var(--jt-text-primary);
    font-size: 11px;
    padding: 4px 7px;
    border-radius: 5px;
}
.sv-filter { flex: 0 0 auto; }
.sv-search {
    flex: 1 1 auto;
    min-width: 100px;
}
.sv-filter:focus,
.sv-search:focus { outline: 1px solid var(--jt-accent-blue); }

.sv-btn-action {
    background: var(--jt-accent-purple-bg, rgba(196, 168, 232, 0.12));
    border: 1px solid var(--jt-accent-purple, #c4a8e8);
    color: var(--jt-accent-purple, #c4a8e8);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: background 0.15s;
}
.sv-btn-action:hover:not(:disabled) {
    background: var(--jt-accent-purple-bg-hover, rgba(196, 168, 232, 0.22));
}
.sv-btn-action:disabled { opacity: 0.6; cursor: wait; }

.sv-btn-icon {
    background: transparent;
    border: 1px solid var(--jt-border-primary);
    color: var(--jt-text-secondary);
    font-size: 13px;
    padding: 4px 7px;
    border-radius: 5px;
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1;
}
.sv-btn-icon:hover {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-primary);
}

/* ── Compare bar (appears on selection) ──────────────────────────────────── */
.sv-compare-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px;
    background: var(--jt-accent-purple-bg, rgba(196, 168, 232, 0.08));
    border-bottom: 1px solid var(--jt-accent-purple-border, rgba(196, 168, 232, 0.2));
    font-size: 11px;
}
.sv-compare-status {
    color: var(--jt-text-secondary);
}
.sv-compare-actions {
    display: flex;
    gap: 6px;
}

.sv-btn-secondary {
    background: transparent;
    border: 1px solid var(--jt-border-primary);
    color: var(--jt-text-secondary);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sv-btn-secondary:hover {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-primary);
}

.sv-btn-primary {
    background: var(--jt-accent-purple, #c4a8e8);
    border: none;
    color: #0f1418;
    font-size: 11px;
    padding: 4px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}
.sv-btn-primary:hover { filter: brightness(1.1); }
.sv-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Body grid: list pane + detail pane ──────────────────────────────────── */
.sv-body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 480px;
    max-height: 70vh;
    overflow: hidden;
}

/* ── List pane (left) ────────────────────────────────────────────────────── */
.sv-list-pane {
    border-right: 1px solid var(--jt-border-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--jt-bg-primary);
}

.sv-list-head {
    display: grid;
    grid-template-columns: 24px 64px 1fr;
    gap: 6px;
    padding: 7px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jt-text-muted);
    border-bottom: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-secondary);
}

.sv-sort-btn {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    padding: 0;
    text-transform: inherit;
    letter-spacing: inherit;
}
.sv-sort-btn:hover { color: var(--jt-text-primary); }
.sv-sort-btn.sv-sort-active { color: var(--jt-accent-purple, #c4a8e8); }

.sv-list { overflow-y: auto; flex: 1; }

.sv-list-empty,
.sv-detail-empty {
    padding: 18px;
    text-align: center;
    color: var(--jt-text-muted);
    font-style: italic;
    font-size: 12px;
}
.sv-list-error { color: var(--jt-accent-red, #e57373); font-style: normal; }

/* ── List rows ───────────────────────────────────────────────────────────── */
.sv-row {
    display: grid;
    grid-template-columns: 24px 64px 1fr;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--jt-border-subtle, rgba(255, 255, 255, 0.05));
    cursor: pointer;
    align-items: start;
    transition: background 0.1s;
    font-size: 11px;
}
.sv-row:hover { background: var(--jt-bg-tertiary); }
.sv-row-active {
    background: var(--jt-accent-purple-bg, rgba(196, 168, 232, 0.12));
    border-left: 2px solid var(--jt-accent-purple, #c4a8e8);
    padding-left: 10px;
}
.sv-row-selected { background: var(--jt-accent-amber-bg, rgba(247, 200, 115, 0.07)); }

/* Checkbox */
.sv-check {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 3px;
    border: 1px solid var(--jt-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    color: transparent;
    transition: all 0.1s;
}
.sv-check:hover { border-color: var(--jt-accent-purple, #c4a8e8); }
.sv-check-on {
    background: var(--jt-accent-purple, #c4a8e8);
    border-color: var(--jt-accent-purple, #c4a8e8);
    color: #0f1418;
}

/* Kind cell (icon + small label) */
.sv-kind-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}
.sv-kind-icon { font-size: 12px; }
.sv-kind-text {
    font-weight: 500;
    text-transform: lowercase;
}

/* Name / when / extra column */
.sv-row-name { overflow: hidden; }
.sv-row-label {
    font-weight: 500;
    line-height: 1.2;
    color: var(--jt-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sv-row-when {
    font-size: 10px;
    color: var(--jt-text-muted);
    margin-top: 1px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sv-row-extra {
    font-size: 10px;
    color: var(--jt-text-tertiary, var(--jt-text-muted));
    font-style: italic;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kind color tinting (matches Manage Roster + Salary Report kind pills) */
.sv-kind-weekly       { color: var(--jt-text-secondary); }
.sv-kind-on_demand    { color: var(--jt-accent-blue, #6db1e8); }
.sv-kind-pre_trade,
.sv-kind-post_trade   { color: var(--jt-accent-green, #6dd6a3); }
.sv-kind-pre_draft,
.sv-kind-post_draft   { color: var(--jt-accent-purple, #d99fe8); }

/* ── Detail pane (right) ─────────────────────────────────────────────────── */
.sv-detail-pane {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sv-detail-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--jt-border-primary);
}
.sv-detail-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.sv-detail-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--jt-text-primary);
}
.sv-detail-kindlabel {
    font-size: 11px;
    text-transform: lowercase;
}
.sv-detail-meta {
    font-size: 11px;
    color: var(--jt-text-muted);
}

.sv-detail-controls {
    padding: 7px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--jt-border-subtle, var(--jt-border-primary));
    background: var(--jt-bg-secondary);
}
.sv-controls-label {
    font-size: 10px;
    color: var(--jt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sv-franchise-sel {
    flex: 1;
    background: var(--jt-bg-tertiary);
    border: 1px solid var(--jt-border-primary);
    color: var(--jt-text-primary);
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 5px;
}
.sv-cap-summary {
    font-size: 11px;
    color: var(--jt-text-muted);
    white-space: nowrap;
}
.sv-cap-summary strong {
    color: var(--jt-accent-amber, #f7c873);
    font-weight: 500;
}

.sv-players { overflow-y: auto; flex: 1; min-height: 0; }

/* ── Player table rows ───────────────────────────────────────────────────── */
.sv-player-row {
    display: grid;
    grid-template-columns: 1fr 32px 36px 52px 52px 76px;
    gap: 6px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--jt-border-subtle, rgba(255, 255, 255, 0.04));
    font-size: 11px;
    align-items: center;
}

.sv-player-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jt-text-muted);
    border-bottom: 1px solid var(--jt-border-primary);
    position: sticky;
    top: 0;
    background: var(--jt-bg-primary);
    z-index: 1;
}

.sv-player-name {
    font-weight: 500;
    color: var(--jt-accent-blue, #6db1e8);
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sv-player-name:hover { text-decoration: underline; }

.sv-team {
    color: var(--jt-text-muted);
    font-variant-numeric: tabular-nums;
}
.sv-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sv-muted { color: var(--jt-text-muted); }

.sv-contract {
    text-align: right;
    font-variant-numeric: tabular-nums;
    cursor: help;
    border-bottom: 1px dotted var(--jt-text-tertiary, var(--jt-text-muted));
}
.sv-contract-G { color: var(--jt-accent-green, #6dd6a3); }
.sv-contract-L { color: var(--jt-accent-amber, #f7c873); }
.sv-contract-R { color: var(--jt-accent-purple, #c4a8e8); }

/* Position colors — match the rest of the app's --jt-pos-* tokens. */
.sv-pos-qb  { color: var(--jt-pos-qb,  #f7c873); font-weight: 500; }
.sv-pos-rb  { color: var(--jt-pos-rb,  #6dd6a3); font-weight: 500; }
.sv-pos-wr  { color: var(--jt-pos-wr,  #6db1e8); font-weight: 500; }
.sv-pos-te  { color: var(--jt-pos-te,  #d99fe8); font-weight: 500; }
.sv-pos-k   { color: var(--jt-pos-k,   #94a3b8); font-weight: 500; }
.sv-pos-def { color: var(--jt-pos-def, #94a3b8); font-weight: 500; }

/* Diff highlight — applied per-cell when compare modal flags differences.
   Subtle amber tint draws the eye without screaming. */
.sv-diff {
    background: var(--jt-accent-amber-bg, rgba(247, 200, 115, 0.12));
    border-radius: 3px;
    padding-right: 4px;
    padding-left: 4px;
    margin-right: -4px;
    margin-left: -4px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.sv-footer,
.sc-footer {
    padding: 7px 16px;
    border-top: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--jt-text-muted);
}
.sv-footer-actions { display: flex; gap: 6px; }

/* ============================================================================
 * COMPARE MODAL — adds two-pane layout; reuses sv-* row + cell styles
 * ============================================================================ */

.sc-body {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    flex: 1 1 auto;
    min-height: 460px;
    max-height: 70vh;
    overflow: hidden;
}

.sc-divider { background: var(--jt-border-primary); }

.sc-pane {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sc-pane-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--jt-border-primary);
    background: var(--jt-bg-secondary);
}
.sc-pane-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.sc-pane-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--jt-text-primary);
}
.sc-pane-kindlabel {
    font-size: 10px;
    text-transform: lowercase;
}

.sc-pane-controls {
    margin-bottom: 4px;
}
.sc-franchise-sel { width: 100%; }

.sc-pane-meta {
    font-size: 10px;
    color: var(--jt-text-muted);
}

.sc-pane-players {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.sc-pane-players .sv-player-row {
    grid-template-columns: 1fr 28px 32px 44px 44px 64px;
    font-size: 10.5px;
    padding: 5px 14px;
}

/* Empty placeholder for players unique to the OTHER pane (alignment) */
.sc-player-empty {
    background: var(--jt-bg-secondary);
    color: var(--jt-text-tertiary, var(--jt-text-muted));
}
.sc-empty-cell {
    color: var(--jt-text-tertiary, var(--jt-text-muted));
    text-align: center;
    font-style: italic;
}

/* ============================================================================
 * MOBILE — collapse list + detail to a stacked layout below 700px
 * ============================================================================ */

@media (max-width: 700px) {
    .sv-body {
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr;
    }
    .sv-list-pane {
        border-right: none;
        border-bottom: 1px solid var(--jt-border-primary);
    }

    /* Compare modal: stack panes vertically with divider as horizontal rule */
    .sc-body {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1px 1fr;
    }
    .sc-divider {
        width: 100%;
        height: 1px;
    }

    /* Tighter action bar on mobile — wrap allowed */
    .sv-action-bar { flex-wrap: wrap; }
    .sv-search { min-width: 100%; order: 99; }
}

/* ============================================================================
 * REDUCED MOTION
 * ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .sv-row,
    .sv-check,
    .sv-btn-action,
    .sv-btn-secondary,
    .sv-close-btn,
    .sc-close-btn,
    .sc-back-btn { transition: none; }
}