/* ═══════════════════════════════════════════════════
   JSI 2026 · DASHBOARD PREMIUM (INDEX MATCH)
═══════════════════════════════════════════════════ */

:root {
  /* Brand Index Matching */
  --brand-blue: #0d3f96;
  --brand-blue-deep: #082c6d;
  --brand-blue-soft: #3d7af0;
  --brand-cyan: #3cb9d5;
  --brand-gold: #e8c46a;
  --brand-red: #d62828;
  --brand-red-deep: #b71c1c;
  --brand-green: #1f9d55;
  --brand-green-deep: #167a43;
  
  /* Override demo-exact colors to map to index premium colors */
  --t950: #04122d;
  --t900: var(--brand-blue-deep);
  --t800: var(--brand-blue);
  --t700: #10429a;
  --t600: #1a56c4;
  --t500: var(--brand-blue-soft);
  --t400: #66a7ff;
  --t300: var(--brand-cyan);
  --t200: #8ee2f5;
  --t100: #eef5ff;
  --t50: #f7fbff;

  --c700: var(--brand-red-deep);
  --c600: var(--brand-red);
  --c500: #e84545;
  --c400: #ff6b6b;
  --c300: #ffa2a2;
  --c100: #ffebeb;

  --l700: #5a3f9e;
  --l600: #7c5cbf;
  --l500: #9b7dd4;
  --l300: #c4adee;
  --l100: #ede8fa;

  --g700: #a68434;
  --g600: #d0a33c;
  --g500: var(--brand-gold);
  --g300: #fcd97a;
  --g100: #fdfaf0;

  --ok: var(--brand-green);
  --err: var(--brand-red);
  --warn: var(--brand-gold);

  --dash-surface: rgba(255, 255, 255, 0.96);
  --dash-surface-soft: rgba(247, 251, 255, 0.98);
  --dash-line: rgba(13, 63, 150, 0.08);
  --dash-line-strong: rgba(13, 63, 150, 0.12);
  --dash-shadow: 0 28px 72px rgba(10, 28, 80, 0.10);
  --dash-shadow-soft: 0 16px 40px rgba(13, 63, 150, 0.08);

  /* Shared Modals */
  --modal-bg: rgba(255, 255, 255, 0.98);
  --modal-border: 1px solid rgba(13, 63, 150, 0.10);
  --modal-shadow: 0 38px 90px rgba(10, 37, 96, 0.20);
}

/* Glassmorphism Effects & Overrides */
body {
  background: radial-gradient(circle at top left, rgba(61,122,240,.08), transparent 26%),
              linear-gradient(180deg,#f4f8ff 0%,#ffffff 100%);
}

.dash-layout {
  background: transparent;
}

.sidebar {
  background: linear-gradient(180deg, var(--brand-blue-deep) 0%, var(--brand-blue) 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 18px 0 60px rgba(8,31,81,.16);
}

.sb-avatar {
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-red-deep));
}

.dash-hero {
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(247,251,255,0.98));
  border: var(--dash-line);
  box-shadow: var(--dash-shadow);
  backdrop-filter: blur(10px);
}

.dash-hero::after, .dash-hero::before {
  background: radial-gradient(circle, rgba(13,63,150,.08), transparent 70%);
}

.hero-mini, .steps-wrap, .panel, .kpi, .doc-card, .card {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(14px);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-soft);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.kpi {
  background: linear-gradient(180deg,#ffffff 0%, #f9fcff 100%);
}

.hero-mini:hover, .panel:hover, .kpi:hover, .doc-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--dash-shadow);
  border-color: rgba(13, 63, 150, 0.16);
}

/* Modal Matching Index */
.modal-overlay {
  background: rgba(10, 28, 80, 0.65);
  backdrop-filter: blur(14px);
}

.modal {
  background: var(--modal-bg);
  border: var(--modal-border);
  box-shadow: var(--modal-shadow);
  border-radius: 28px;
  backdrop-filter: blur(28px);
}

.modal-topbar {
  height: 6px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-gold));
}

.modal-header {
  background: transparent;
  border-bottom: 1px solid var(--dash-line);
}

.modal-close:hover {
  background: var(--brand-red);
  color: #fff;
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue-deep), var(--brand-blue), var(--brand-cyan)) !important;
  box-shadow: 0 16px 34px rgba(13, 63, 150, 0.18) !important;
}
.btn-primary:hover {
  box-shadow: 0 24px 46px rgba(13, 63, 150, 0.26) !important;
}

.btn-teal {
  background: linear-gradient(135deg, var(--brand-blue-deep), var(--brand-blue-soft)) !important;
  box-shadow: 0 16px 34px rgba(13, 63, 150, 0.18) !important;
}
.btn-teal:hover {
  box-shadow: 0 24px 46px rgba(13, 63, 150, 0.26) !important;
}

/* Form Styles */
.fi, .fs, .ft {
  border: 1px solid var(--gray200);
  background: #fcfdfe;
}
.fi:focus, .fs:focus, .ft:focus {
  border-color: var(--brand-blue-soft);
  box-shadow: 0 0 0 4px rgba(61, 122, 240, 0.12);
}

/* Status Chips Match */
.badge-ok, .as-accepted, .ps-paid { background: rgba(31, 157, 85, 0.1) !important; color: var(--brand-green-deep) !important; }
.badge-err, .as-rejected, .ps-failed { background: rgba(214, 40, 40, 0.1) !important; color: var(--brand-red-deep) !important; }
.badge-warn, .ps-pending, .as-review { background: rgba(232, 196, 106, 0.15) !important; color: var(--g700) !important; }
.badge-teal, .as-submitted { background: rgba(61, 122, 240, 0.1) !important; color: var(--brand-blue-deep) !important; }
.badge-coral { background: rgba(214, 40, 40, 0.08) !important; color: var(--brand-red) !important; }

/* Progress */
.pb-teal, .kpi.teal::after { background: linear-gradient(90deg, var(--brand-blue-soft), var(--brand-blue)) !important; }
.pb-coral, .kpi.coral::after { background: linear-gradient(90deg, var(--brand-red), var(--brand-red-deep)) !important; }
.pb-ok, .kpi.ok::after { background: linear-gradient(90deg, var(--brand-green), var(--brand-green-deep)) !important; }
.pb-gold, .kpi.gold::after { background: linear-gradient(90deg, var(--brand-gold), var(--g700)) !important; }
.pb-lav, .kpi.lav::after { background: linear-gradient(90deg, var(--l500), var(--l700)) !important; }