/**
 * ContractScope — Shared Component Styles
 * Loaded by all dashboards. Covers: CSS variables, reset, typography,
 * layout primitives, KPI cards, section cards, AEC chips, badges,
 * alerts, spinners, buttons, and utility classes.
 */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --navy:  #080d1a;  --card:  #0d1e35;  --card2: #0a1628;  --card3: #0f2540;
  --cyan:  #0099cc;  --cyan2: #00b8ef;  --gold:  #f59e0b;  --purple:#a78bfa;
  --success:#00D68F; --danger:#FF4D6A;  --warn:  #f59e0b;
  --arq:   #6096B4;  --ing:   #44BBA4;  --const: #E9B44C;
  --text:  #e8edf5;  --text2: #8fa3bd;  --text3: #4a5a74;
  --border:rgba(0,153,204,0.12); --border2:rgba(0,153,204,0.22);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
html, body { min-height:100vh; background:var(--navy); color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.5; }
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(0,153,204,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,153,204,0.025) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; z-index:0; }
main { position:relative; z-index:1; max-width:1300px; margin:0 auto; padding:32px 40px 80px; }

/* ── Page hero ────────────────────────────────────────────────────────────── */
.page-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.hero-eyebrow { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-bottom:6px; opacity:0.8; }
.hero-title { font-family:'DM Serif Display',serif; font-size:28px; color:var(--text); margin-bottom:3px; line-height:1.2; }
.hero-sub { font-size:13px; color:var(--text2); }

/* ── KPI cards ────────────────────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:24px; }
.kpi-card,.kpi { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px 18px; position:relative; overflow:hidden; }
.kpi-card::after,.kpi::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--cyan),transparent); }
.kpi-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text2); margin-bottom:8px; font-weight:500; }
.kpi-value,.kpi-val { font-size:26px; font-weight:700; color:var(--text); line-height:1; }
.kpi-value.cyan,.kpi-val.cyan { color:var(--cyan); }
.kpi-sub { font-size:11px; color:var(--text2); margin-top:4px; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.section-card,.chart-card,.card { background:var(--card); border:1px solid var(--border); border-radius:8px; margin-bottom:16px; overflow:hidden; }
.chart-card { padding:18px 20px; }
.card-hd,.section-hd { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; background:rgba(255,255,255,0.01); }

/* Section titles — unified 15px across all pages */
.section-title,.chart-title,.card-title { font-size:15px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
.section-title svg,.chart-title svg,.card-title svg { flex-shrink:0; }
.section-sub,.card-sub { font-size:12px; color:var(--text2); margin-top:2px; }
.card-badge { font-size:11px; padding:2px 9px; border-radius:999px; background:rgba(0,153,204,0.1); border:1px solid rgba(0,153,204,0.25); color:var(--cyan); white-space:nowrap; font-weight:500; }

/* ── Period selector ──────────────────────────────────────────────────────── */
.period-select { background:var(--card2); border:1px solid rgba(255,255,255,0.1); border-radius:8px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; padding:8px 32px 8px 12px; outline:none; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238fa3bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.period-select option { background:#0a1628; }

/* ── AEC chips ────────────────────────────────────────────────────────────── */
.aec-wrap { display:inline-flex; gap:3px; flex-wrap:wrap; }
.aec-chip { font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; letter-spacing:0.3px; }
.aec-A { background:rgba(96,150,180,0.15);  color:var(--arq);   border:1px solid rgba(96,150,180,0.25); }
.aec-E { background:rgba(68,187,164,0.15);  color:var(--ing);   border:1px solid rgba(68,187,164,0.25); }
.aec-C { background:rgba(233,180,76,0.15);  color:var(--const); border:1px solid rgba(233,180,76,0.25); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; }
.badge-up      { background:rgba(0,214,143,0.1);   color:var(--success); border:1px solid rgba(0,214,143,0.2);   }
.badge-down    { background:rgba(255,77,106,0.1);  color:var(--danger);  border:1px solid rgba(255,77,106,0.2);  }
.badge-neutral { background:rgba(143,163,189,0.1); color:var(--text2);   border:1px solid rgba(143,163,189,0.2); }
.badge-premium { background:rgba(245,158,11,0.12); color:var(--gold);    border:1px solid rgba(245,158,11,0.3);  }
.badge-free    { background:rgba(143,163,189,0.1); color:var(--text3);   border:1px solid rgba(143,163,189,0.2); }

.rank-pill { display:inline-flex; align-items:center; justify-content:center; min-width:44px; padding:3px 8px; border-radius:5px; font-size:12px; font-weight:700; }
.rank-danger  { background:rgba(255,77,106,0.1);   color:var(--danger);  border:1px solid rgba(255,77,106,0.22);  }
.rank-safe    { background:rgba(0,214,143,0.1);    color:var(--success); border:1px solid rgba(0,214,143,0.22);   }
.rank-neutral { background:rgba(143,163,189,0.1);  color:var(--text3);   border:1px solid rgba(143,163,189,0.2);  }
.rank-me      { background:rgba(0,153,204,0.12);   color:var(--cyan);    border:1px solid rgba(0,153,204,0.25);   }

.loc-badge  { font-size:9px; padding:1px 6px; border-radius:3px; font-weight:600; letter-spacing:0.3px; }
.loc-muni   { background:rgba(245,158,11,0.1);  border:1px solid rgba(245,158,11,0.2);  color:var(--gold); }
.loc-agency { background:rgba(0,153,204,0.08);  border:1px solid rgba(0,153,204,0.15);  color:var(--cyan); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { font-size:13px; padding:10px 14px; border-radius:6px; margin-bottom:14px; display:none; }
.alert.show    { display:block; }
.alert.success { background:rgba(0,214,143,0.1);  border:1px solid rgba(0,214,143,0.25);  color:var(--success); }
.alert.error   { background:rgba(255,77,106,0.1); border:1px solid rgba(255,77,106,0.25); color:var(--danger);  }
.alert.info    { background:rgba(0,153,204,0.1);  border:1px solid rgba(0,153,204,0.25);  color:var(--cyan);    }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
@keyframes cs-spin { to { transform:rotate(360deg); } }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(0,153,204,0.25); border-top-color:var(--cyan); border-radius:50%; animation:cs-spin 0.7s linear infinite; vertical-align:middle; margin-right:6px; }
.loading-state,.empty-state { padding:48px; text-align:center; color:var(--text3); font-size:13px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; padding:8px 18px; border-radius:6px; cursor:pointer; border:none; transition:opacity 0.15s; text-decoration:none; }
.btn:hover    { opacity:0.88; }
.btn:disabled { opacity:0.45; cursor:not-allowed; }
.btn-primary  { background:var(--cyan); color:#000; }
.btn-gold     { background:var(--gold); color:#000; }
.btn-ghost    { background:transparent; color:var(--text2); border:1px solid var(--border2); }
.btn-danger   { background:rgba(255,77,106,0.1); color:var(--danger); border:1px solid rgba(255,77,106,0.2); }
.btn-sm       { font-size:11px; padding:4px 11px; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-label { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text2); display:block; margin-bottom:6px; font-weight:500; }
.form-input { width:100%; background:var(--card2); border:1px solid var(--border2); color:var(--text); padding:9px 12px; font-family:'DM Sans',sans-serif; font-size:13px; border-radius:6px; outline:none; transition:border-color 0.15s; }
.form-input:focus { border-color:var(--cyan); }
.form-group { margin-bottom:16px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.cs-table { width:100%; border-collapse:collapse; }
.cs-table th { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text2); padding:9px 16px; text-align:left; border-bottom:1px solid var(--border); font-weight:500; background:rgba(255,255,255,0.01); white-space:nowrap; }
.cs-table td { padding:11px 16px; border-bottom:1px solid rgba(255,255,255,0.035); font-size:13px; color:var(--text); vertical-align:middle; }
.cs-table tr:last-child td { border-bottom:none; }
.cs-table tr:hover td      { background:rgba(255,255,255,0.015); }
.cs-table tr.highlight td  { background:rgba(0,153,204,0.05); border-left:2px solid var(--cyan); }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.text-cyan   { color:var(--cyan); }  .text-gold   { color:var(--gold); }
.text-danger { color:var(--danger); } .text-success { color:var(--success); }
.text-muted  { color:var(--text3); } .text-sm { font-size:12px; } .text-xs { font-size:11px; }
.text-right  { text-align:right; }   .font-mono { font-family:'Courier New',monospace; }
.fw-600 { font-weight:600; }         .fw-700 { font-weight:700; }
.cs-divider  { height:1px; background:var(--border); margin:20px 0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  main { padding:20px 16px 60px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .page-hero { flex-direction:column; gap:12px; }
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.logo { display:flex; align-items:center; gap:10px; }
.logo-text { font-size:13px; font-weight:600; color:var(--text); }

/* ── Panel (hidden by default, shown via JS) ──────────────────────────────── */
.panel { display:none; }

/* ── Hero eyebrow ─────────────────────────────────────────────────────────── */
.hero-eyebrow { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-bottom:6px; opacity:0.8; }

/* ── Period picker ────────────────────────────────────────────────────────── */
.period-picker { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:6px 12px; }

/* ── Alert (unified) ──────────────────────────────────────────────────────── */
.alert { font-size:13px; padding:11px 14px; border-radius:7px; margin-bottom:14px; display:none; transition:opacity 0.3s; }
.alert.show    { display:block; }
.alert.success { background:rgba(0,214,143,0.1);  border:1px solid rgba(0,214,143,0.25);  color:var(--success); }
.alert.error   { background:rgba(255,77,106,0.1); border:1px solid rgba(255,77,106,0.25); color:var(--danger);  }
.alert.warning { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.25); color:var(--warn);    }
.alert.info    { background:rgba(0,153,204,0.1);  border:1px solid rgba(0,153,204,0.25);  color:var(--cyan);    }

/* ── Charts grid ──────────────────────────────────────────────────────────── */
.charts-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px; }

/* ── Loading state ────────────────────────────────────────────────────────── */
.loading { text-align:center; padding:40px 20px; color:var(--text3); font-size:13px; }

/* ── Chart wrap & sub ─────────────────────────────────────────────────────── */
.chart-wrap { position:relative; width:100%; }
.chart-sub  { font-size:12px; color:var(--text2); margin-top:4px; }

/* ── Search wrap ──────────────────────────────────────────────────────────── */
.search-wrap { position:relative; }

/* ── Info tooltip icon ────────────────────────────────────────────────────── */
.info-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background:rgba(0,153,204,0.15); border:1px solid rgba(0,153,204,0.3);
  color:var(--cyan); cursor:pointer; margin-left:6px;
  vertical-align:middle; flex-shrink:0;
  transition:background 0.15s; position:relative; top:-1px;
  padding:0; line-height:1;
}
.info-icon:hover { background:rgba(0,153,204,0.28); }
.info-icon svg   { display:block; }