/* ═══════════════════════════════════════════════════════════════════
   styles.css — Stamped
   Brand palette: Midnight Green · Viridian Teal · Gamboge Amber · Rufous
   001219 → 005f73 → 0a9396 → 94d2bd → e9d8a6 → ee9b00 → ca6702 → ae2012
   ═══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  /* ── Brand — 001219 ocean palette ── */
  --navy:        #005f73;   /* Midnight Green    */
  --amaranth:    #ae2012;   /* Rufous crimson    */
  --gold:        #ee9b00;   /* Gamboge amber     */
  --green:       #0a9396;   /* Viridian teal     */

  /* Semantic: teal = approved, rufous = rejected */
  --approved:    #0a9396;
  --approved-lt: rgba(10,147,150,0.10);
  --rejected:    #ae2012;
  --rejected-lt: rgba(174,32,18,0.08);

  /* ── Surface ── */
  --bg:          #f6f1e7;   /* warm sand tint    */
  --bg-card:     #ffffff;
  --bg-input:    rgba(0,95,115,0.05);
  --bg-rejected: rgba(174,32,17,0.05);

  /* ── Text ── */
  --text:        #001219;   /* Rich Black        */
  --text-muted:  rgba(0,18,25,0.58);
  --text-faint:  rgba(0,18,25,0.35);

  /* ── Border ── */
  --border:      rgba(0,95,115,0.10);
  --border-md:   rgba(0,95,115,0.18);

  /* ── Radii / shadow ── */
  --radius-sm:   6px;
  --radius-md:   16px;
  --radius-lg:   14px;
  --radius-pill: 100px;

  --shadow-xs:   0 1px 2px rgba(0,18,25,0.06);
  --shadow-sm:   0 1px 4px rgba(0,18,25,0.08), 0 1px 2px rgba(0,18,25,0.04);
  --shadow-md:   0 4px 16px rgba(0,18,25,0.10), 0 1px 4px rgba(0,18,25,0.05);

  --ease:        cubic-bezier(0.4,0,0.2,1);
}

[data-theme="dark"] {
  --bg:          #001219;   /* Rich Black — deep ocean */
  --bg-card:     #012028;
  --bg-input:    rgba(148,210,189,0.06);

  --text:        #e9d8a6;   /* Flax warm cream   */
  --text-muted:  rgba(233,216,166,0.60);
  --text-faint:  rgba(233,216,166,0.35);

  --border:      rgba(148,210,189,0.09);
  --border-md:   rgba(148,210,189,0.18);

  --approved-lt: rgba(10,147,150,0.14);
  --rejected-lt: rgba(174,32,18,0.14);

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.45);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.3);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height:   100%;
  overflow: auto;
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color:    var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}
button, select, input, textarea { font-family: inherit; }

/* ── PAGE SHELL ── */
.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Changed from height: 100vh */
  overflow-y: auto;  /* Allow the whole page to scroll */
  position: relative;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════════
   ROW 1 — TOPBAR
   ════════════════════════════════════════════════════════════════════ */
.topbar {
  flex-shrink:   0;
  height:        52px;
  background:    var(--bg-card);
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  padding:       0 24px;
  justify-content: space-between;
  box-shadow:    var(--shadow-xs);
  position:      sticky;
  top:           0;
  z-index:       100;
}

.topbar-logo {
  font-family:    'Fraunces', Georgia, serif;
  font-size:      19px;
  font-weight:    600;
  color:          var(--navy);
  letter-spacing: -0.3px;
}
[data-theme="dark"] .topbar-logo { color: var(--text); }

.dark-toggle {
  width:         32px; height: 32px;
  border:        1px solid var(--border-md);
  background:    var(--bg-input);
  border-radius: 50%;
  display:       flex; align-items: center; justify-content: center;
  cursor:        pointer; color: var(--text-muted);
  transition:    all 0.2s;
}
.dark-toggle:hover { background: var(--border); color: var(--text); }
.dark-toggle svg   { width: 14px; height: 14px; }
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

.card-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.metrics-body {
  padding: 16px 24px 0;
}


.card {
  display: flex;
  flex-direction: column; /* Default to column for mobile safety */
  width: 100%;            
  box-sizing: border-box;
  gap: 16px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;          /* Equal padding on all sides */
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .card {
  background: rgba(255, 255, 255, 0.03); /* Subtle glass effect */
  backdrop-filter: blur(10px);
}


/* ════════════════════════════════════════════════════════════════════
   ROW 2 — METRICS BAR
   ════════════════════════════════════════════════════════════════════ */

.metrics-stats {
  display: flex;
  flex-wrap: wrap;        /* Prevents stats from squashing */
  gap: 16px;
  flex: 1;
}
.metric-stat { display: flex; flex-direction: column; gap: 0; }

.metric-stat-num {
  font-family: 'Fraunces', serif;
  font-size:   20px;
  font-weight: 400;
  color:       var(--text);
  line-height: 1.1;
  display:     flex;
  align-items: center;
  gap:         6px;
}

/* Live dot next to the first stat */
.live-dot {
  width:         8px; height: 8px;
  background:    var(--amaranth);
  border-radius: 50%;
  opacity: 0.9;
  display:       inline-block;
  animation:     livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.metric-stat-label {
  font-size:  10.5px;
  color:      var(--text-muted);
  font-weight: 400;
}

.metrics-divider {
  width:      1px; height: 28px;
  background: var(--border-md);
  flex-shrink: 0;
}

/* Share CTA */
.btn-share {
  display:       flex; align-items: center; gap: 7px;
  padding:       8px 18px;
  background:    var(--navy);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  font-size:     13px; font-weight: 500;
  cursor:        pointer;
  transition:    background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space:   nowrap; flex-shrink: 0;
  box-shadow:    0 2px 10px rgba(238,155,0,0.28);
}
.btn-share:hover  { background: #ca6702; box-shadow: 0 4px 16px rgba(238,155,0,0.40); }
.btn-share:active { transform: scale(0.97); }
.btn-share svg    { width: 13px; height: 13px; }

/* ════════════════════════════════════════════════════════════════════
   ROW 3 — FILTER BAR
   ════════════════════════════════════════════════════════════════════ */

.filter-label-txt {
  font-size:      11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
  color:          var(--text-faint); flex-shrink: 0;
}

/* Visa type — primary, pulsing border */
.visa-filter-wrap { position: relative; flex-shrink: 0; }
.visa-filter-wrap::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: calc(var(--radius-sm) + 2px);
  border: 2px solid var(--gold);
  pointer-events: none;
  animation: filterPulse 2s ease-in-out infinite;
}
.visa-filter-wrap.selected::after { display: none; }
@keyframes filterPulse { 0%,100%{opacity:.9} 50%{opacity:.2} }

.filter-select-primary {
  appearance: none;
  background: var(--navy);
  border: none; border-radius: var(--radius-sm);
  padding: 7px 28px 7px 11px;
  font-size: 12px; font-weight: 500; color: #fff;
  cursor: pointer; min-width: 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.filter-select-primary:focus { outline: none; }
.filter-select-primary option { background: #002642; }

/* Nudge */
.filter-nudge {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--gold); font-weight: 500;
  flex-shrink: 0; animation: nudge 2.2s ease-in-out infinite;
}
.filter-nudge svg { width: 12px; height: 12px; }
@keyframes nudge { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Secondary filters */
#secondaryFilters {
  display: flex;
  flex-wrap: wrap;        /* Allows filters to drop to next line on mobile */
  gap: 8px;
  align-items: center;
}
#secondaryFilters.visible { opacity: 1; transform: none; pointer-events: all; }

.filter-select {
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border-md); border-radius: var(--radius-sm);
  padding: 6px 26px 6px 10px; font-size: 12px; font-weight: 400;
  color: var(--text); cursor: pointer; min-width: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23374151' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: border-color 0.15s;
}
.filter-select, .filter-select-primary {
  width: 100%;            /* Full width on mobile */
}
[data-theme="dark"] .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff' opacity='.4'/%3E%3C/svg%3E");
}
.filter-select:focus  { outline: none; border-color: var(--navy); }
.filter-select.active { border-color: var(--gold); }
input[type="date"].filter-select { min-width: 140px; }

.filter-div   { width: 1px; height: 18px; background: var(--border-md); flex-shrink: 0; }
.filter-reset {
  background: none; border: none; font-size: 12px; color: var(--text-muted);
  cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.filter-reset:hover { color: var(--amaranth); background: rgba(132,0,50,0.06); }

@media (min-width: 640px) {
  .filter-select, .filter-select-primary {
    width: auto;          /* Natural width on desktop */
    min-width: 140px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ROW 4 — DASHBOARD BODY (scrollable)
   ════════════════════════════════════════════════════════════════════ */
.dashboard-body {
  width: 100%;
  padding: 20px 24px 80px;
  background: var(--bg);
  overflow-y: auto;
}

/* Error banner */
.error-banner {
  display: none; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 12px; color: var(--red);
  margin-bottom: 16px; align-items: center; gap: 8px;
}
.error-banner.show { display: flex; }
.error-banner svg  { width: 14px; height: 14px; flex-shrink: 0; }

/* Placeholder */
.explore-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; min-height: 260px;
  text-align: center; color: var(--text-faint); gap: 8px;
}
.explore-placeholder svg    { width: 36px; height: 36px; opacity: 0.2; }
.explore-placeholder p      { font-size: 15px; color: var(--text-muted); }
.explore-placeholder .hint  { font-size: 12px; }

/* Dashboard reveal */
#dashboard {
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
#dashboard.visible { opacity: 1; transform: none; pointer-events: all; }

/* ════════════════════════════════════════════════════════════════════
   TOP STAT CARDS (H1B Pulse style — large numbers + split bar)
   SELECTED | NOT SELECTED | TOTAL REPORTS
   ════════════════════════════════════════════════════════════════════ */
.top-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       18px 20px 16px;
  box-shadow:    var(--shadow-sm);
}

.stat-card-label {
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--text-faint);
  margin-bottom:  8px;
}

/* Big number — gold for approved, amaranth for rejected, navy for total */
.stat-card-num {
  font-family: 'Fraunces', serif;
  font-size:   46px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card-num.green { color: var(--gold); }
.stat-card-num.red   { color: var(--amaranth); }
.stat-card-num.black { color: var(--navy); }
[data-theme="dark"] .stat-card-num.black { color: var(--text); }

.stat-card-sub {
  font-size:    12px;
  color:        var(--text-muted);
  margin-bottom: 12px;
}

/* Gold/amaranth split bar (total card) */
.split-bar {
  height:        5px;
  border-radius: 3px;
  background:    var(--border);
  overflow:      hidden;
  display:       flex;
}
.split-bar-green { background: var(--gold);      transition: width 0.6s ease; }
.split-bar-red   { background: var(--amaranth);  transition: width 0.6s ease; }

/* Single-colour bar (approved / rejected cards) */
.stat-bar {
  height:        4px;
  border-radius: 3px;
  background:    var(--border);
  overflow:      hidden;
  margin-top:    auto;
}
.stat-bar-fill {
  height:      100%;
  border-radius: 3px;
  transition:  width 0.6s ease;
}
.stat-bar-fill.green { background: var(--gold); }
.stat-bar-fill.red   { background: var(--amaranth); }

/* ════════════════════════════════════════════════════════════════════
   DIMENSION GROUP SECTIONS
   "BY WAGE LEVEL", "BY EDUCATION", etc.
   ════════════════════════════════════════════════════════════════════ */
.dim-section { margin-bottom: 22px; }

.dim-label {
  font-size:      13px;
  font-weight:    600;
  letter-spacing: 0;
  text-transform: none;
  color:          var(--text);
  margin-bottom:  10px;
  padding-bottom: 6px;
  border-bottom:  2px solid var(--border-md);
}

.dim-cards {
  display: grid;
  gap:     10px;
  /* cols set dynamically by JS based on number of groups */
}

/* Dimension breakdown card */
.dim-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       14px 16px 12px;
  box-shadow:    var(--shadow-sm),
                 inset 0 0 0 1px rgba(255,255,255,0.5);
}
[data-theme="dark"] .dim-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.dim-card--low { background: var(--bg-rejected) !important; }
[data-theme="dark"] .dim-card--low { background: var(--rejected-lt) !important; }
 
.dim-card-key {
  font-size:     12px;
  font-weight:   600;
  color:         var(--text);
  margin-bottom: 10px;
}

.dim-card-stats {
  display:       flex;
  gap:           16px;
  margin-bottom: 10px;
  flex-wrap:     wrap;
}
.dim-stat { display: flex; flex-direction: column; gap: 1px; }
.dim-stat-num {
  font-family: 'Fraunces', serif;
  font-size:   24px;
  font-weight: 400;
  line-height: 1;
}
.dim-stat-num.approved { color: var(--approved); }
.dim-stat-num.rejected { color: var(--amaranth); }
.dim-stat-num.pending  { color: var(--navy); opacity: 0.55; }
[data-theme="dark"] .dim-stat-num.pending { color: rgba(233,216,166,0.55); opacity: 1; }
.dim-stat-label {
  font-size:      10px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color:          var(--text-faint);
}
 
.dim-card-rate {
  font-size:     11px;
  color:         var(--text-muted);
  margin-bottom: 8px;
}

/* "1,158 / 663" — approved amber-broze, slash muted, rejected amaranth */
.dim-card-nums {
  font-family:   'Fraunces', serif;
  font-size:     28px;
  font-weight:   400;
  line-height:   1;
  margin-bottom: 4px;
  display:       flex;
  align-items:   baseline;
  gap:           6px;
  flex-wrap:     wrap;
}
.dim-card-nums .n-approved { color: var(--gold); }
.dim-card-nums .n-slash    { color: var(--text-faint); font-size: 22px; }
.dim-card-nums .n-rejected { color: var(--amaranth); }

.dim-card-rate {
  font-size:    12px;
  color:        var(--text-muted);
  margin-bottom: 10px;
}

/* Split bar inside dimension cards */
.dim-bar { height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; display: flex; }
.dim-bar-g { background: var(--approved);  transition: width 0.6s ease; }
.dim-bar-r { background: var(--amaranth);  transition: width 0.6s ease; }
.dim-bar-p { background: var(--navy); opacity: 0.35; transition: width 0.6s ease; }

/* "No data" placeholder for empty dimensions */
.dim-empty {
  font-size:  13px;
  color:      var(--text-faint);
  padding:    24px 0;
  text-align: center;
}

/* Pending-only state (no approved/rejected yet) */
.dim-pending-note {
  font-size: 11px; color: var(--text-faint);
  font-style: italic; margin-top: 4px;
}
 

/* ════════════════════════════════════════════════════════════════════
   FORM OVERLAY TOOLBOX
   ════════════════════════════════════════════════════════════════════ */
.form-overlay-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(3px);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.form-overlay-backdrop.open { opacity: 1; pointer-events: all; }

.form-toolbox {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(460px, 100vw);
  background: var(--bg-card);
  box-shadow: -4px 0 40px rgba(0,0,0,0.15);
  z-index: 201;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  overflow: hidden;
}
.form-toolbox.open { transform: translateX(0); }

/* Toolbox header */
.toolbox-header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.toolbox-title {
  font-family: 'Fraunces', serif;
  font-size: 17px; font-weight: 300;
  color: var(--text); letter-spacing: -0.2px;
}
.toolbox-title em { font-style: italic; color: var(--amaranth); }
.toolbox-close {
  width: 28px; height: 28px;
  border: 1px solid var(--border-md);
  background: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.toolbox-close:hover { background: var(--border); color: var(--text); }
.toolbox-close svg   { width: 13px; height: 13px; }

/* Toolbox body */
.toolbox-body {
  flex: 1; overflow-y: auto;
  padding: 18px 20px 24px;
}
.toolbox-eyebrow {
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 16px;
}

/* ── FORM FIELDS ── */
.form-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field        { display: flex; flex-direction: column; gap: 4px; }
.form-field.full   { grid-column: 1/-1; }
.form-field label  {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted);
}

/* Shared input styles — static AND dynamic fields use these */
.form-input,
.form-select-light,
.form-textarea {
  background:    var(--bg-card);
  border:        1px solid var(--border-md);
  border-radius: var(--radius-sm);
  padding:       9px 11px;
  font-size:     13px; color: var(--text);
  width:         100%;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-faint); }
.form-input:focus,
.form-select-light:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0,38,66,0.08);
}
.form-select-light {
  appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23374151' opacity='.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
[data-theme="dark"] .form-select-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff' opacity='.4'/%3E%3C/svg%3E");
}
.form-textarea { resize: vertical; min-height: 80px; }

#dynamicFields { display: contents; }

/* Detailed toggle */
.detailed-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; grid-column: 1/-1;
  transition: border-color 0.15s;
}
.detailed-toggle:hover { border-color: var(--border-md); }
.toggle-sw {
  width: 32px; height: 18px;
  background: var(--border-md); border-radius: 9px;
  position: relative; flex-shrink: 0; transition: background 0.2s;
}
.toggle-sw::after {
  content: ''; width: 12px; height: 12px; background: #fff;
  border-radius: 50%; position: absolute; top: 3px; left: 3px;
  transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle-sw.on        { background: var(--navy); }
.toggle-sw.on::after { transform: translateX(14px); }
.toggle-label        { font-size: 12px; color: var(--text-muted); }
.toggle-label strong { color: var(--text); font-weight: 500; }

.detail-field        { grid-column: 1/-1; display: none; flex-direction: column; gap: 4px; }
.detail-field.show   { display: flex; }
.detail-field label  { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); }

/* Toolbox footer */
.toolbox-footer {
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  display: flex; align-items: center; gap: 12px;
}

.btn-submit {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 500;
  padding: 10px 20px; border-radius: var(--radius-sm);
  border: none; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-submit:hover    { background: var(--amaranth); }
.btn-submit:active   { transform: scale(0.97); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-submit svg      { width: 13px; height: 13px; }

.anon-note     { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.anon-note svg { width: 11px; height: 11px; }

/* Thank-you state */
.toolbox-thankyou {
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; text-align: center; padding: 40px 28px; gap: 12px;
}
.toolbox-thankyou.show { display: flex; }
.thankyou-icon {
  width: 52px; height: 52px;
  background: rgba(10,147,150,0.12); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.thankyou-icon svg     { width: 24px; height: 24px; color: var(--gold); }
.thankyou-title        { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 300; color: var(--text); }
.thankyou-sub          { font-size: 13px; color: var(--text-muted); max-width: 280px; }
.btn-close-thanks {
  margin-top: 6px; background: none;
  border: 1px solid var(--border-md); border-radius: var(--radius-sm);
  padding: 8px 18px; font-size: 13px; color: var(--text-muted); cursor: pointer;
  transition: background 0.15s;
}
.btn-close-thanks:hover { background: var(--border); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .top-stats { grid-template-columns: 1fr 1fr; }
  .top-stats .stat-card:last-child { grid-column: 1/-1; }
}
@media (max-width: 640px) {
  .top-stats  { grid-template-columns: 1fr; }
  .topbar, .metrics-bar, .filter-bar { padding: 0 14px; }
  .dashboard-body { padding: 14px 14px 32px; }
  .metrics-body   { padding: 14px 14px 0; }
  .form-toolbox   { width: 100vw; }
  .form-grid      { grid-template-columns: 1fr; }
  .metrics-stats  { gap: 14px; }
  .metric-stat-num { font-size: 17px; }
  .stat-card-num   { font-size: 36px; }
}

@media (min-width: 768px) {
  .card {
    flex-direction: row;  /* Switch back to row on larger screens */
    align-items: center;
    padding: 24px;
  }
  .card-list {
    padding: 24px;
    gap: 20px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TOPBAR IMPROVEMENTS
   Logo left group + right action group
   ════════════════════════════════════════════════════════════════════ */
.topbar-left {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.topbar-logo-link {
  display:         flex;
  align-items:     center;
  gap:             7px;
  text-decoration: none;
}
.topbar-tagline {
  font-size:   11px;
  color:       var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.1px;
}
.topbar-stats {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-left: auto;
  margin-right: 20px;
}
.topbar-stat-num {
  font-size: 15px !important;
}
.topbar-stats .metric-stat      { align-items: center; }
.topbar-stats .metric-stat-label{ font-size: 9.5px; color: var(--text-faint); }
.topbar-stats .metrics-divider  { height: 20px; }

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

/* ── CONTRIBUTE BUTTON ── */
.btn-contribute {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  background:    rgba(238,155,0,0.10);
  border:        1px solid rgba(238,155,0,0.30);
  border-radius: var(--radius-pill);
  font-size:     12px;
  font-weight:   500;
  color:         #8a5a00;
  cursor: pointer;
  text-decoration: none;
  transition:    background 0.15s, border-color 0.15s, transform 0.1s;
  white-space:   nowrap;
}
[data-theme="dark"] .btn-contribute {
  background:  rgba(238,155,0,0.12);
  border-color: rgba(238,155,0,0.25);
  color:       var(--gold);
}
.btn-contribute:hover  {
  background:    rgba(238,155,0,0.18);
  border-color:  rgba(238,155,0,0.50);
  transform:     translateY(-1px);
}
.btn-contribute svg { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════════
   METRICS CTA IMPROVEMENTS
   CTA button + sub-label group
   ════════════════════════════════════════════════════════════════════ */
.metrics-cta-group {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            4px;
  flex-shrink:    0;
}
.metrics-cta-sub {
  font-size:  11px;
  color:      var(--text-faint);
  text-align: center;

}

/* ════════════════════════════════════════════════════════════════════
   FEEDBACK HOVER BUTTON (bottom-right)
   ════════════════════════════════════════════════════════════════════ */
.feedback-btn {
  position:    fixed;
  bottom:      24px;
  right:       24px;
  z-index:     300;
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     10px 16px 10px 12px;
  background:  var(--navy);
  color:       #fff;
  border-radius: var(--radius-pill);
  cursor:      pointer;
  box-shadow:  0 4px 20px rgba(0,38,66,0.3);
  transition:  transform 0.2s var(--ease), box-shadow 0.2s, background 0.15s;
  user-select: none;
  font-size:   13px;
  font-weight: 500;
}
.feedback-btn:hover {
  transform:   translateY(-2px);
  box-shadow:  0 6px 28px rgba(0,38,66,0.4);
  background:  var(--amaranth);
}
.feedback-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.feedback-label   { white-space: nowrap; }

/* Feedback popover */
.feedback-popover {
  position:      fixed;
  bottom:        72px;
  right:         24px;
  z-index:       301;
  width:         300px;
  background:    var(--bg-card);
  border:        1px solid var(--border-md);
  border-radius: var(--radius-md);
  box-shadow:    0 8px 32px rgba(0,38,66,0.18), 0 2px 8px rgba(0,38,66,0.08);
  padding:       16px;
  opacity:       0;
  transform:     translateY(8px) scale(0.97);
  pointer-events: none;
  transition:    opacity 0.22s var(--ease), transform 0.22s var(--ease);
  transform-origin: bottom right;
}
.feedback-popover.open {
  opacity:       1;
  transform:     translateY(0) scale(1);
  pointer-events: all;
}
.feedback-popover-head {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   4px;
}
.feedback-popover-head span {
  font-size:   13px;
  font-weight: 500;
  color:       var(--text);
}
.feedback-close {
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         var(--text-muted);
  padding:       2px;
  border-radius: 4px;
  display:       flex;
  align-items:   center;
  transition:    color 0.15s;
}
.feedback-close:hover { color: var(--text); }
.feedback-popover-sub {
  font-size:     11px;
  color:         var(--text-muted);
  margin-bottom: 12px;
  line-height:   1.4;
}
.feedback-textarea {
  width:         100%;
  background:    var(--bg);
  border:        1px solid var(--border-md);
  border-radius: var(--radius-sm);
  padding:       9px 11px;
  font-size:     12px;
  color:         var(--text);
  resize:        vertical;
  min-height:    80px;
  font-family:   inherit;
  line-height:   1.5;
  transition:    border-color 0.15s;
  margin-bottom: 10px;
  display:       block;
}
.feedback-textarea::placeholder { color: var(--text-faint); }
.feedback-textarea:focus         { outline: none; border-color: var(--navy); }
.feedback-actions {
  display:     flex;
  align-items: center;
  justify-content: space-between;
}
.feedback-submit {
  background:    var(--navy);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       7px 16px;
  font-size:     12px;
  font-weight:   500;
  cursor:        pointer;
  transition:    background 0.15s;
}
.feedback-submit:hover { background: var(--amaranth); }
.feedback-anon {
  font-size:  10px;
  color:      var(--text-faint);
}
.feedback-sent {
  margin-top:  10px;
  font-size:   12px;
  color:       var(--gold);
  font-weight: 500;
  text-align:  center;
}

/* ════════════════════════════════════════════════════════════════════
   DATA DISCLAIMER (bottom of page)
   ════════════════════════════════════════════════════════════════════ */
.data-disclaimer {
  text-align:   center;
  font-size:    11px;
  color:        var(--text-faint);
  padding:      14px 24px 20px;
  line-height:  1.5;
  border-top:   1px solid var(--border);
  background:   var(--bg-card);
  margin-top:   auto;
}
.disclaimer-love {
  display:     block;
  margin-top:  4px;
  font-size:   11px;
  color:       var(--text-faint);
}

/* ── Responsive tweaks for new elements ── */
@media (max-width: 640px) {
  .topbar-tagline   { display: none; }
  .topbar-logo      { font-size: 14px; }
  #main-logo        { height: 20px; }
  .metrics-controls    { flex-direction: column; align-items: stretch; gap: 10px; }
  .metrics-filter-area,
  .metrics-cta-group   { width: 100%; flex: 1 1 100%; flex-shrink: 1; align-items: stretch; }
  .metrics-filter-area .visa-filter-wrap,
  .metrics-filter-area .filter-select-primary { width: 100%; }
  .metrics-cta-group .btn-share               { width: 100%; justify-content: center; }
  .feedback-popover { width: calc(100vw - 32px); right: 16px; }
  .feedback-btn     { bottom: 16px; right: 16px; padding: 10px 13px; }
  .feedback-label   { display: none; }
  .metrics-cta-sub  { display: none; }
  .btn-contribute span { display: none; }
  .btn-contribute   { padding: 6px 10px; }
}


.top-stats {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-bottom: 24px;
}
 
/* ── Combined outcome card ── */
.outcome-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       18px 20px 16px;
  box-shadow:    var(--shadow-sm),
                 inset 0 0 0 1px rgba(255,255,255,0.5);
}
[data-theme="dark"] .outcome-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.outcome-card-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-muted);
  margin-bottom:  14px;
}
.outcome-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.outcome-col {
  padding-right:  16px;
  border-right:   1px solid var(--border);
}
.outcome-col:first-child { padding-left: 0; }
.outcome-col:nth-child(2){ padding-left: 16px; }
.outcome-col:last-child  { border-right: none; padding-left: 16px; padding-right: 0; }
 
.outcome-col-label {
  font-size:     11px;
  font-weight:   500;
  color:         var(--text-faint);
  margin-bottom: 4px;
}
.outcome-col-num {
  font-family:   'Fraunces', serif;
  font-size:     36px;
  font-weight:   400;
  line-height:   1;
  margin-bottom: 3px;
}
/* Approved → amber-bronze, Rejected → amaranth, Pending → navy */
.outcome-col-num.approved { color: var(--approved); }
.outcome-col-num.rejected { color: var(--amaranth); }
.outcome-col-num.pending  { color: var(--navy); opacity: 0.55; }
[data-theme="dark"] .outcome-col-num.pending { color: rgba(233,216,166,0.55); opacity: 1; }
 
.outcome-col-pct {
  font-size:  11px;
  color:      var(--text-faint);
}
/* Three-segment bar at bottom of outcome card */
.outcome-bar {
  display:       flex;
  height:        5px;
  border-radius: 3px;
  overflow:      hidden;
  background:    var(--border);
  margin-top:    14px;
}
.outcome-bar-approved { background: var(--approved);  transition: width 0.6s ease; }
.outcome-bar-rejected { background: var(--amaranth);  transition: width 0.6s ease; }
.outcome-bar-pending  { background: var(--navy); opacity: 0.35; transition: width 0.6s ease; }
 
/* ── Total reports card ── */
.total-card {
  background:     var(--bg-card);
  border:         1px solid var(--border);
  border-radius:  var(--radius-md);
  padding:        18px 20px 16px;
  box-shadow:     var(--shadow-sm),
                  inset 0 0 0 1px rgba(255,255,255,0.5);
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
}
[data-theme="dark"] .total-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.total-card-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-muted);
  margin-bottom:  8px;
}
.total-card-num {
  font-family:   'Fraunces', serif;
  font-size:     52px;
  font-weight:   400;
  line-height:   1;
  color:         var(--navy);
  margin-bottom: 4px;
}
[data-theme="dark"] .total-card-num { color: var(--text); }
.total-card-sub {
  font-size:     12px;
  color:         var(--text-muted);
  margin-bottom: 12px;
}
.split-bar {
  display:       flex;
  height:        5px;
  border-radius: 3px;
  overflow:      hidden;
  background:    var(--border);
}
.split-bar-approved { background: var(--approved);  transition: width 0.6s ease; }
.split-bar-rejected { background: var(--amaranth);  transition: width 0.6s ease; }
.split-bar-pending  { background: var(--navy); opacity: 0.35; transition: width 0.6s ease; }
 
/* Keep stat-card for any legacy use */
.stat-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       18px 20px 16px;
  box-shadow:    var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════════════
   SUMMARY CARD — combined total reports + outcomes in one card
   ════════════════════════════════════════════════════════════════════ */
.summary-card {
  display:       flex;
  gap:           20px;
  align-items:   stretch;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       18px 20px;
  box-shadow:    var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,0.5);
  margin-bottom: 24px;
}
[data-theme="dark"] .summary-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
@media (max-width: 640px) {
  .summary-card     { flex-direction: column; }
  .summary-vdivider { width: 100%; height: 1px; }
}

.summary-left {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  min-width:      120px;
}
.summary-card-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-muted);
  margin-bottom:  8px;
}
.summary-total {
  font-family:   'Fraunces', serif;
  font-size:     52px;
  font-weight:   400;
  line-height:   1;
  color:         var(--navy);
  margin-bottom: 4px;
}
[data-theme="dark"] .summary-total { color: var(--text); }
.summary-detail {
  font-size:      12px;
  color:          var(--text-muted);
  flex:           1;
  padding-bottom: 12px;
}
.summary-vdivider {
  width:      1px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--border-md);
}
.summary-right {
  flex:           1;
  display:        flex;
  flex-direction: column;
}
.summary-outcomes-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-muted);
  margin-bottom:  14px;
}

/* ════════════════════════════════════════════════════════════════════
   METRICS CARD — filter + CTA only (stats live in topbar now)
   ════════════════════════════════════════════════════════════════════ */
.metrics-card {
  flex-direction: row !important;
  align-items:    center !important;
  gap:            0 !important;
  width:          100% !important;
  aspect-ratio:   unset !important;
  border-radius:  var(--radius-md) !important;
  padding:        0 !important;
  margin-bottom:  0 !important;
  overflow:       hidden !important;
  border:         1px solid var(--border) !important;
  background:     var(--bg-card) !important;
  box-shadow:     var(--shadow-sm) !important;
}

/* Controls row — single horizontal row (no top border, no instrument above) */
.metrics-controls {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         14px 20px;
  width:           100%;
  flex-wrap:       wrap;
}

/* Filter area */
.metrics-filter-area {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            6px;
  flex:           1;
}

.metrics-card .metrics-cta-group { align-items: flex-end; }

/* ════════════════════════════════════════════════════════════════════
   DIM CONTAINER — 2-column grid for dimension sections
   DIM SECTION CARD — all group items inside one bordered card
   ════════════════════════════════════════════════════════════════════ */
.dim-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     16px;
}
@media (max-width: 768px) {
  .dim-container { grid-template-columns: 1fr; }
}

.dim-section { margin-bottom: 0; }

.dim-section-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       16px;
  box-shadow:    var(--shadow-sm);
  height:        100%;
  box-sizing:    border-box;
}
[data-theme="dark"] .dim-section-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}

/* Label inside card acts as the card header */
.dim-section-card .dim-label {
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

/* Individual group chips inside the card — no separate card border */
.dim-section-card .dim-card {
  background:    var(--bg-input);
  border:        none;
  border-radius: var(--radius-sm);
  box-shadow:    none;
  padding:       10px 12px;
}
[data-theme="dark"] .dim-section-card .dim-card {
  background: rgba(255,255,255,0.04);
}

/* ════════════════════════════════════════════════════════════════════
   PALETTE — 001219 ocean palette
   ════════════════════════════════════════════════════════════════════ */
:root {
  --p1:  #001219;   /* Rich Black       */
  --p2:  #005f73;   /* Midnight Green   */
  --p3:  #0a9396;   /* Viridian Teal    */
  --p4:  #94d2bd;   /* Middle Blue-Green (mint) */
  --p5:  #e9d8a6;   /* Flax (warm sand) */
  --p6:  #ee9b00;   /* Gamboge amber    */
  --p7:  #ca6702;   /* Alloy Orange     */
  --p8:  #bb3e03;   /* Rust             */
  --p9:  #ae2012;   /* Rufous           */
  --p10: #9b2226;   /* Auburn           */
}

/* ── Hero 1 — filter selector (midnight green) ── */
.filter-select-primary {
  background-color: var(--p2);
  font-size:   13px;
  font-weight: 600;
  padding:     10px 32px 10px 14px;
}
.filter-select-primary option { background: var(--p2); color: #fff; }

/* Pulse ring amber, nudge matches hero 1 */
.visa-filter-wrap::after { border-color: var(--p6); }
.filter-nudge            { color: var(--p2); }
@keyframes filterPulse   { 0%,100%{opacity:.9} 50%{opacity:.2} }

/* ── Hero 2 — share button (amber) ── */
.btn-share {
  background:  var(--p6);
  box-shadow:  0 2px 10px rgba(238,155,0,0.30);
}
.btn-share:hover {
  background:  var(--p7);
  box-shadow:  0 4px 16px rgba(238,155,0,0.45);
}

/* ── Feedback button — smaller ── */
.feedback-btn {
  padding:   7px 12px 7px 10px;
  font-size: 12px;
}
.feedback-btn svg { width: 14px; height: 14px; }

#main-logo {
  height: 26px;
  width:  auto;
  display: block;
}