/* =============================================================
   DRAFT ANALYSIS REPORT MODAL — draft_analysis_report_v4.css
   Mirrors .sr- (Salary Report) modal patterns. dar- = Draft Analysis Report.
   ============================================================= */

/* ── Backdrop + positioning ───────────────────────────────────── */
#draftAnalysisReportModal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dar-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

/* ── Modal shell ──────────────────────────────────────────────── */
.dar-modal {
    position: relative;
    background: var(--jt-bg-deep);
    border: 1px solid var(--jt-border-muted);
    border-radius: 12px;
    width: min(1100px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* ── Header ───────────────────────────────────────────────────── */
.dar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #1a2942 100%);
    border-bottom: 1px solid var(--jt-border-muted);
    flex-shrink: 0;
}

.dar-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff; /* always white — sits on dark gradient header */
    letter-spacing: 0.02em;
}

.dar-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dar-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}
.dar-close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ── Body — scrolls; sections live here ───────────────────────── */
.dar-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: var(--jt-bg-primary);
}

/* ── Loading / empty / error states ───────────────────────────── */
.dar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 20px;
    color: var(--jt-text-muted);
    font-size: 0.9rem;
}
.dar-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #334155;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: darSpin 0.7s linear infinite;
}
@keyframes darSpin { to { transform: rotate(360deg); } }

.dar-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--jt-text-secondary);
}
.dar-empty-icon  { font-size: 2.4rem; margin-bottom: 8px; }
.dar-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--jt-text-primary); margin-bottom: 6px; }
.dar-empty-msg   { font-size: 0.85rem; max-width: 460px; margin: 0 auto; line-height: 1.5; }

.dar-empty-inline {
    padding: 16px;
    text-align: center;
    color: var(--jt-text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.dar-error {
    padding: 24px 20px;
    color: #fca5a5;
}
.dar-error-title { font-weight: 600; margin-bottom: 4px; }
.dar-error-msg   { font-size: 0.85rem; opacity: 0.85; }

/* ── Summary bar — top of body ────────────────────────────────── */
.dar-summary-bar {
    display: flex;
    gap: 0;
    background: var(--jt-bg-deep);
    border-bottom: 1px solid var(--jt-border-muted);
    flex-shrink: 0;
    overflow-x: auto;
}
.dar-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    border-right: 1px solid var(--jt-border-muted);
    min-width: 100px;
}
.dar-summary-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jt-text-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}
.dar-summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: #10b981; /* emerald — matches sr- summary */
}
.dar-summary-value.dar-summary-text {
    font-size: 0.85rem;
    color: var(--jt-text-primary);
}

/* ── Sections — vertical stack ────────────────────────────────── */
.dar-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dar-section {
    padding: 18px 20px;
    border-bottom: 1px solid var(--jt-border-muted);
}
.dar-section:last-child { border-bottom: none; }

.dar-section-hdr {
    margin-bottom: 12px;
}
.dar-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--jt-text-primary);
    margin: 0 0 4px 0;
    letter-spacing: 0.01em;
}
.dar-section-sub {
    font-size: 0.78rem;
    color: var(--jt-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Headline callout — strong takeaway sentence above the table */
.dar-section-headline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 8px;
    font-size: 0.86rem;
    color: var(--jt-text-primary);
    line-height: 1.4;
}
.dar-section-headline strong { color: #34d399; }
.dar-headline-emoji { font-size: 1.05rem; line-height: 1; }

.dar-section-foot {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--jt-text-muted);
    font-style: italic;
}

/* ── Tables — shared shell across sections ────────────────────── */
.dar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.dar-table thead th {
    background: var(--jt-bg-deep);
    padding: 8px 10px;
    text-align: left;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jt-text-muted);
    border-bottom: 2px solid var(--jt-border-muted);
    white-space: nowrap;
}
.dar-th-pos       { width: 56px; text-align: center !important; }
.dar-th-num       { text-align: right !important; }
.dar-th-tag       { width: 88px; text-align: center !important; }
.dar-th-franchise { max-width: 220px; }

.dar-row {
    border-bottom: 1px solid var(--jt-border-muted);
    transition: background 0.1s;
}
.dar-row:hover { background: var(--jt-bg-hover); }
.dar-row-empty td { color: var(--jt-text-muted); }

.dar-table td {
    padding: 8px 10px;
    color: var(--jt-text-primary);
    vertical-align: middle;
}
.dar-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dar-num-suffix {
    font-size: 0.72rem;
    color: var(--jt-text-muted);
    margin-left: 2px;
}
.dar-muted { color: var(--jt-text-muted); }

/* ── Position chip — left column of all section tables ────────── */
.dar-pos {
    display: inline-block;
    width: 38px;
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 3px 0;
    border-radius: 4px;
    color: #fff;
}
/* Position colors — match the rest of the app (FAG, team-needs-table) */
.dar-pos-QB  { background: rgba(220, 38, 38, 0.85); }
.dar-pos-RB  { background: rgba(22, 163, 74, 0.85); }
.dar-pos-WR  { background: rgba(37, 99, 235, 0.85); }
.dar-pos-TE  { background: rgba(234, 88, 12, 0.85); }
.dar-pos-K   { background: rgba(124, 58, 237, 0.85); }
.dar-pos-DST { background: rgba(71, 85, 105, 0.85); }

/* ── Section 2 — Reach/value tendencies ────────────────────────── */
.dar-franchise-name {
    font-weight: 600;
    color: var(--jt-text-primary);
}
.dar-num-delta { font-weight: 700; }

/* Reach / wait / neutral colorings — applied to delta + tag cells */
.dar-delta-reach   { color: #f87171; } /* red — reaches */
.dar-delta-wait    { color: #60a5fa; } /* blue — waits */
.dar-delta-neutral { color: var(--jt-text-secondary); }

.dar-tag {
    display: inline-block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dar-tag.dar-delta-reach   { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.3); }
.dar-tag.dar-delta-wait    { background: rgba(96, 165, 250, 0.12);  border: 1px solid rgba(96, 165, 250, 0.3); }
.dar-tag.dar-delta-neutral { background: rgba(148, 163, 184, 0.10); border: 1px solid rgba(148, 163, 184, 0.25); }

/* ── Footer ───────────────────────────────────────────────────── */
.dar-footer {
    padding: 10px 20px;
    background: var(--jt-bg-deep);
    border-top: 1px solid var(--jt-border-muted);
    text-align: center;
    flex-shrink: 0;
}
.dar-footer-note {
    font-size: 0.72rem;
    color: var(--jt-text-muted);
    font-style: italic;
}

/* ── Predictor-tab deep-link — small inline link button ───────── */
/* Lives next to the ⚙ Adjust button in .di-pred-hdr-row.            */
/* Reuses .di-pred-adjust-btn's spacing/font; does its own colorway. */
.di-pred-analysis-link {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: #93c5fd; /* blue-300 */
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.di-pred-analysis-link:hover {
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.25);
}

/* ── Light theme overrides ────────────────────────────────────── */
[data-theme="light"] .dar-modal       { background: var(--jt-bg-primary); }
[data-theme="light"] .dar-body        { background: var(--jt-bg-secondary); }
[data-theme="light"] .dar-summary-bar { background: var(--jt-bg-tertiary); }
[data-theme="light"] .dar-table thead th { background: var(--jt-bg-tertiary); color: var(--jt-text-secondary); }
[data-theme="light"] .dar-table td    { color: var(--jt-text-primary); }
[data-theme="light"] .dar-footer      { background: var(--jt-bg-tertiary); }
[data-theme="light"] .dar-section-headline {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.30);
}
[data-theme="light"] .dar-section-headline strong { color: #047857; }
[data-theme="light"] .dar-delta-reach { color: #b91c1c; }
[data-theme="light"] .dar-delta-wait  { color: #1d4ed8; }
[data-theme="light"] .di-pred-analysis-link { color: #1d4ed8; }
[data-theme="light"] .di-pred-analysis-link:hover {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.30);
}

/* Position colors on light bg — mirror Team Needs Table convention */
[data-theme="light"] .dar-pos-QB  { background: rgba(220, 38, 38, 0.9); }
[data-theme="light"] .dar-pos-RB  { background: rgba(22, 163, 74, 0.9); }
[data-theme="light"] .dar-pos-WR  { background: rgba(37, 99, 235, 0.9); }
[data-theme="light"] .dar-pos-TE  { background: rgba(234, 88, 12, 0.9); }
[data-theme="light"] .dar-pos-K   { background: rgba(124, 58, 237, 0.9); }
[data-theme="light"] .dar-pos-DST { background: rgba(71, 85, 105, 0.9); }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .dar-modal       { width: 100vw; max-height: 100vh; border-radius: 0; }
    .dar-section     { padding: 14px 14px; }
    .dar-summary-item { padding: 8px 12px; min-width: 84px; }
    .dar-summary-value { font-size: 0.9rem; }
    .dar-table       { font-size: 0.78rem; }
    .dar-th-tag      { display: none; }
    .dar-tag         { display: none; }
}