/* ═══════════════════════════════════════════════════════════════
   SiteCORE — Phase 2 Enhancement CSS
   Sparklines, deltas, trend arrows, enhanced chips, grade fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── Inline Sparkline (stat cards + module chips) ────────── */
.spark-line{display:block;margin-top:6px;opacity:0.7;transition:opacity 0.2s}
.stat-card:hover .spark-line,.mod-chip:hover .spark-line{opacity:1}
.spark-line path{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spark-line .spark-fill{stroke:none;opacity:0.1}
.spark-line .spark-dot{r:2}

/* ── Change Delta Indicators ─────────────────────────────── */
.delta-badge{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:700;font-family:var(--font-mono);padding:1px 6px;border-radius:4px;margin-left:4px;vertical-align:middle;line-height:1}
.delta-badge.up{background:rgba(12,206,107,0.12);color:#0cce6b}
.delta-badge.down{background:rgba(255,78,66,0.12);color:#ff4e42}
.delta-badge.flat{background:rgba(148,163,184,0.12);color:#94a3b8}
.delta-badge svg{width:10px;height:10px}

/* Hero stat change indicators */
.dhs-change{font-size:10px;font-weight:700;font-family:var(--font-mono);margin-top:2px;min-height:14px}
.dhs-change.up{color:#0cce6b}
.dhs-change.down{color:#ff4e42}
.dhs-change.flat{color:#94a3b8}

/* ── Health Trend Arrows on Site Cards ────────────────────── */
.dc-trend{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;font-family:var(--font-mono);margin-left:6px}
.dc-trend.up{color:#0cce6b}
.dc-trend.down{color:#ff4e42}
.dc-trend.flat{color:#94a3b8}
.dc-trend svg{width:12px;height:12px}

/* ── Module Chip Sparkline Container ─────────────────────── */
.mod-chip{position:relative;min-height:70px}
.mod-chip .chip-spark{position:absolute;bottom:8px;right:12px;opacity:0.5;transition:opacity 0.2s}
.mod-chip:hover .chip-spark{opacity:0.9}

/* ── Grade Badge Fix (unscanned sites) ───────────────────── */
.dc-badge.unknown{background:rgba(148,163,184,0.08);color:#64748b;border:1px dashed rgba(148,163,184,0.3);font-style:italic;font-size:10px}

/* ── Trends Tab Real Charts ──────────────────────────────── */
.trend-chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:10px}
.trend-chart-card .tc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.trend-chart-card .tc-label{font-size:12px;font-weight:700}
.trend-chart-card .tc-value{font-size:16px;font-weight:900;font-family:var(--font-mono)}
.trend-chart-card .tc-delta{font-size:10px;font-weight:700;font-family:var(--font-mono)}
.trend-chart-card svg{width:100%;height:60px;display:block}
.trend-chart-card path.trend-fill{opacity:0.15}
.trend-chart-card path.trend-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trend-chart-card circle.trend-dot{r:3}
.trend-month-compare{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px}
.trend-month-compare .tmc-item{text-align:center;padding:8px 4px;background:var(--bg-secondary);border-radius:6px}
.trend-month-compare .tmc-val{font-size:14px;font-weight:800;font-family:var(--font-mono)}
.trend-month-compare .tmc-lbl{font-size:8px;color:var(--text-muted);margin-top:2px}

/* ── Time Range Active State (functional) ────────────────── */
.time-range-btn.active{background:var(--accent)!important;color:#fff!important;font-weight:700}

/* ── Stat Card Sparkline Positioning ─────────────────────── */
.stat-card{position:relative;overflow:hidden}
.stat-card .spark-line{position:absolute;bottom:0;left:0;right:0;height:30px}

/* ── Inline Progress Bars (table cells) ──────────────────── */
.inline-progress{display:inline-flex;align-items:center;gap:6px;width:100%}
.inline-progress-bar{flex:1;height:4px;background:var(--bg-secondary);border-radius:2px;overflow:hidden}
.inline-progress-fill{height:100%;border-radius:2px;transition:width 0.6s ease}
.inline-progress-fill.green{background:linear-gradient(90deg,#0cce6b,#34d399)}
.inline-progress-fill.yellow{background:linear-gradient(90deg,#ffa400,#fbbf24)}
.inline-progress-fill.red{background:linear-gradient(90deg,#ff4e42,#f87171)}
.inline-progress-val{font-size:11px;font-weight:700;font-family:var(--font-mono);min-width:36px;text-align:right}

/* ── Contrast Fixes (dark theme) ──────────────────────────── */
/* Sidebar nav items: ensure readable */
.nav-item{color:#c0cad6!important}
.nav-item:hover{color:var(--text-primary)!important}
.nav-item.active{color:var(--accent)!important}
.nav-item svg{color:inherit!important;opacity:0.7}
.nav-item:hover svg,.nav-item.active svg{opacity:1}
.nav-section-label,.nav-section{color:#8899aa!important}

/* Site card domain names: always bright */
.dc-name{color:#eef2f7!important;font-size:14px!important;font-weight:800!important}
.dc-client{color:#8899aa!important;font-size:11px!important}
.dc-header{margin-bottom:12px}

/* Hero stat values: bright + readable */
.dhs-val{color:var(--text-primary)!important;font-size:22px!important}
.dhs-lbl{color:#8899aa!important;font-size:10px!important}

/* Stat card values: always visible */
.stat-value{color:var(--text-primary);font-size:26px!important;font-weight:900!important}
.stat-label{color:#8899aa!important;font-size:10px!important;text-transform:uppercase;letter-spacing:0.5px}
.stat-change{font-size:10px!important;font-weight:600}
.stat-change.up{color:#0cce6b}
.stat-change.down{color:#ff4e42}

/* Module chip scores: always visible */
.mod-chip-score{color:var(--text-primary)!important}
.mod-chip-detail{color:#8899aa!important}

/* Card borders more visible */
.card,.domain-card,.stat-card,.mod-chip{border-color:rgba(148,163,184,0.15)!important}
.card:hover,.domain-card:hover{border-color:rgba(59,130,246,0.3)!important}

/* Table headers: bright */
.data-table th{color:#a0aec0!important;border-bottom-color:rgba(148,163,184,0.15)!important}
.data-table td{border-bottom-color:rgba(148,163,184,0.08)!important;color:#d0d7e0!important}
.data-table td.mono,.data-table td .mono,.mono{color:#c8d0da!important}
.data-table a{color:var(--accent)!important}

/* All body text bright in dark mode */
[data-theme="dark"] .page{color:#d0d7e0}
[data-theme="dark"] td{color:#d0d7e0}
[data-theme="dark"] .card{color:#d0d7e0}
[data-theme="dark"] p,[data-theme="dark"] span,[data-theme="dark"] div{color:inherit}
[data-theme="dark"] .card-header .card-title{color:#e0e6ed!important}
[data-theme="dark"] .card-header .card-badge{color:#8899aa!important}
[data-theme="dark"] .section-title{color:#e0e6ed!important}
[data-theme="dark"] .toolbar{color:#c0cad6}
[data-theme="dark"] input,[data-theme="dark"] select{color:#d0d7e0!important}
[data-theme="dark"] input::placeholder{color:#6b7a8d!important}

/* Filter buttons */
.filter-btn{color:#a0aec0!important}
.filter-btn.active{color:var(--accent)!important;background:var(--accent-light)!important}
.filter-btn:hover{color:var(--text-primary)!important}

/* Schedule cards, template cards */
.rpt-template h4{color:#e0e6ed!important}
.rpt-template p{color:#8899aa!important}
.schedule-name{color:#e0e6ed!important}
.schedule-meta{color:#8899aa!important}

/* Activity items */
.activity-title{color:#d0d7e0!important}
.activity-title strong{color:#eef2f7!important}
.activity-time{color:#7b8ba0!important}

/* Pagination */
.pagination-info{color:#8899aa!important}
.pagination-btn{color:#a0aec0!important;border-color:rgba(148,163,184,0.15)!important}
.pagination-btn.active{color:var(--accent)!important;background:var(--accent-light)!important}

/* Page titles and breadcrumbs */
.page-title{color:var(--text-primary)!important}
.page-subtitle{color:#8899aa!important}
.breadcrumbs{color:#7b8ba0!important}
.breadcrumbs a{color:var(--accent)!important}

/* ── Trend Loading Skeleton ──────────────────────────────── */
.trend-loading{text-align:center;padding:20px;color:var(--text-muted);font-size:11px}
.trend-loading .dot-pulse{display:inline-flex;gap:4px}
.trend-loading .dot-pulse span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:pulse-dot 1.2s ease infinite}
.trend-loading .dot-pulse span:nth-child(2){animation-delay:0.2s}
.trend-loading .dot-pulse span:nth-child(3){animation-delay:0.4s}
@keyframes pulse-dot{0%,80%,100%{opacity:0.3;transform:scale(0.8)}40%{opacity:1;transform:scale(1.2)}}

/* ── Light Theme Overrides ───────────────────────────────── */
[data-theme="light"] .data-table td{color:#1e293b!important}
[data-theme="light"] .data-table td.mono,[data-theme="light"] .data-table td .mono,[data-theme="light"] .mono{color:#334155!important}
[data-theme="light"] .nav-item{color:#475569!important}
[data-theme="light"] .nav-item:hover{color:#0f172a!important}
[data-theme="light"] .nav-section-label,[data-theme="light"] .nav-section{color:#64748b!important}
[data-theme="light"] .dc-name{color:#0f172a!important}
[data-theme="light"] .activity-title{color:#1e293b!important}
[data-theme="light"] .stat-label{color:#64748b!important}
[data-theme="light"] .dhs-lbl{color:#64748b!important}
[data-theme="light"] .filter-btn{color:#475569!important}
[data-theme="light"] .card-header .card-title{color:#0f172a!important}
[data-theme="light"] .rpt-template h4{color:#0f172a!important}
[data-theme="light"] .rpt-template p{color:#64748b!important}
[data-theme="light"] .page-subtitle{color:#64748b!important}
[data-theme="light"] .breadcrumbs{color:#64748b!important}