/* /assets/dark-polish.css  — v6
   Load AFTER Bootstrap and AFTER any page <style> blocks.
   Works with data-bs-theme="light" | "dark" (on <html>).
*/

/* ---------- Theme tokens ---------- */
:root{
  --glass: rgba(255,255,255,.70);
  --blur: blur(10px);
  --ink: #334155;                /* base text */
  --ink-strong: #0b3a82;         /* emphasized text / code pills (light) */
  --muted: #6c757d;              /* muted text */
  --surface: #ffffff;            /* card surface */
  --surface-weak: #f8fafc;       /* page bg (light) */
  --surface-border: #dbe4f0;     /* card borders */
  --brand: #0d6efd;              /* primary */
  --accent: #20c997;             /* success-accent for chips/badges */

  /* Stage bar & chips */
  --stage-chip-bg:#ffffff;
  --stage-chip-border:var(--surface-border);
  --stage-chip-ink:#2b3b54;
  --stage-bar-bg:#e9ecef;
  --stage-bar-fill:var(--brand);
}

html[data-bs-theme="dark"]{
  --glass: rgba(20,24,32,.92);
  --ink: #e6ebf2;
  --ink-strong: #f1f5fa;
  --muted: #b0bac5;
  --surface: #0d1526;            /* card surface (dark) */
  --surface-weak: #0a0f16;       /* page bg (dark) */
  --surface-border: #2a3342;     /* borders (dark) */
  --brand: #6ea8fe;
  --accent: #40d1a7;

  /* Stage bar & chips */
  --stage-chip-bg:#0f172a;
  --stage-chip-border:#25324a;
  --stage-chip-ink:#e2e8f0;
  --stage-bar-bg:#1f2a44;
  --stage-bar-fill:#74c0fc;
}

/* ---------- Page backgrounds (landing & status/apply pages) ---------- */
body.light-bg{
  background:
    radial-gradient(1200px 600px at -10% -10%, #f3f7ff 0%, transparent 60%),
    radial-gradient(1200px 600px at 110% -10%, #f7f3ff 0%, transparent 60%),
    radial-gradient(1200px 600px at 50% 120%, #f2fff9 0%, transparent 60%),
    linear-gradient(180deg, #f9fbff 0%, #f7f9fc 100%);
  color: var(--ink);
}
html[data-bs-theme="dark"] body.light-bg{
  background:
    radial-gradient(1200px 600px at -10% -10%, #0c1220 0%, transparent 60%),
    radial-gradient(1200px 600px at 110% -10%, #0c0f1a 0%, transparent 60%),
    radial-gradient(1200px 600px at 50% 120%, #0b1518 0%, transparent 60%),
    linear-gradient(180deg, #0a0f16 0%, #0a0d12 100%);
  color: var(--ink);
}

/* Global dark body rule (for pages without .light-bg) */
html[data-bs-theme="dark"] body{
  color: var(--ink);
}

/* ---------- Glass shells / cards / feature blocks ---------- */
.card-glass,
.nav-shell,
.feature,
.stage-card{
  background: var(--glass) !important;
  backdrop-filter: var(--blur);
  border: 1px solid var(--surface-border) !important;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
html[data-bs-theme="dark"] .nav-shell,
html[data-bs-theme="dark"] .card-glass,
html[data-bs-theme="dark"] .feature,
html[data-bs-theme="dark"] .stage-card{
  background: rgba(20, 24, 32, .90) !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
}

/* ---------- Top bar / header ---------- */
.topbar{
  background: var(--glass) !important;
  backdrop-filter: var(--blur);
  border: 1px solid var(--surface-border) !important;
  border-radius: 14px;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
html[data-bs-theme="dark"] .topbar{
  background: rgba(20, 24, 32, .92) !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
}

/* ---------- Text & links ---------- */
.muted, .text-muted{ color: var(--muted) !important; }
h1, h2, h3, .fw-bold { color: var(--ink-strong); }

.topbar a,
.nav-shell a{ color: var(--ink); text-decoration: none; }
.topbar a:hover,
.nav-shell a:hover{ color: #ffffff; }

/* ---------- Buttons ---------- */
.btn-ghost{
  background: transparent;
  border: 1px solid var(--surface-border);
  color: var(--ink);
}
.btn-ghost:hover{ background: rgba(0,0,0,.03); }
html[data-bs-theme="dark"] .btn-ghost{ border-color: var(--surface-border); color: #d9e1ea; }
html[data-bs-theme="dark"] .btn-ghost:hover{ background:#1a2230; }

.btn-outline-secondary{ border-color:#bcc7d6; color:#2b3b54; }
.btn-outline-secondary:hover{ background:#e9eef6; }
html[data-bs-theme="dark"] .btn-outline-secondary{ border-color:#3a4558; color:#d9e1ea; }
html[data-bs-theme="dark"] .btn-outline-secondary:hover{ background:#2a3342; }

/* ---------- Forms / inputs ---------- */
.form-control, .form-select{
  background: #fff;
  border-color: var(--surface-border);
  color: var(--ink);
}
.form-control::placeholder{ color:#9aa7bb; }
.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select{
  background:#121827;
  border-color: var(--surface-border);
  color:#e6ebf2;
}
html[data-bs-theme="dark"] .form-control::placeholder{ color:#8a95a7; }
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* ---------- Nav pills / tabs (photo step) ---------- */
.nav-pills .nav-link{
  background:#ffffff; border:1px solid var(--surface-border); color:#2b3b54;
}
.nav-pills .nav-link.active{
  background: var(--brand); border-color: var(--brand); color:#fff;
}
html[data-bs-theme="dark"] .nav-pills .nav-link{
  background:#151b2a; border:1px solid var(--surface-border); color:#d9e1ea;
}
html[data-bs-theme="dark"] .nav-pills .nav-link.active{
  background: var(--brand); border-color: var(--brand); color:#fff;
}

/* ---------- Tables ---------- */
.table > :not(caption) > * > *{
  background-color: transparent !important;
  border-color: #e6edf7;
}
.table tbody tr:hover{ background: rgba(13,110,253,.06) !important; }

html[data-bs-theme="dark"] .table > :not(caption) > * > *{ border-color:#253043; }
html[data-bs-theme="dark"] .table tbody tr:hover{ background: rgba(13,110,253,.18) !important; }

/* ---------- Stage chips / timeline ---------- */
.stage-chip{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; border-radius:999px;
  border:1px solid var(--stage-chip-border);
  background:var(--stage-chip-bg); color:var(--stage-chip-ink);
  font-weight:600; font-size:.9rem;
}
.stage-chip .dot{ width:10px; height:10px; border-radius:999px; background:#adb5bd; }
.stage-chip.done  { background:#e9f7f2; border-color:#bde5d7; color:#146c43 }
.stage-chip.done .dot{ background: var(--accent); }
.stage-chip.active{ outline:2px solid var(--brand); }

html[data-bs-theme="dark"] .stage-chip{ background:var(--stage-chip-bg); border-color: var(--stage-chip-border); color:var(--stage-chip-ink); }
html[data-bs-theme="dark"] .stage-chip.done{ background:#11251f; border-color:#1e6d57; color:#cfece5; }
html[data-bs-theme="dark"] .stage-chip.active{ outline:2px solid var(--brand); }

.timeline .item{ position:relative; padding-left:1rem; border-left:2px solid #e6edf7; }
.timeline .item::before{
  content:''; position:absolute; left:-6px; top:.35rem; width:10px; height:10px; border-radius:50%;
  background: var(--brand);
}
html[data-bs-theme="dark"] .timeline .item{ border-left-color: var(--surface-border); }
html[data-bs-theme="dark"] .timeline .item::before{ background: var(--brand); }

/* ---------- Stepper (apply wizard) ---------- */
.stepper{ display:grid; grid-template-columns: repeat(6,1fr); gap:.5rem; }
.stepper .dot{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem;
  border-radius:999px; border:1px solid var(--surface-border);
  background: #ffffff;
}
.stepper .dot .n{
  width:28px; height:28px; display:grid; place-items:center; border-radius:999px;
  background:#e9f2ff; color: var(--brand); font-weight:700;
}
.stepper .dot.done .n{ background:#d1f2e8; color:#198754; }
.stepper .dot.active{ outline:2px solid var(--brand); }

html[data-bs-theme="dark"] .stepper .dot{
  background:#151b2a; border-color: var(--surface-border);
}
html[data-bs-theme="dark"] .stepper .dot .n{ background:#10233d; color:#6fb1ff; }
html[data-bs-theme="dark"] .stepper .dot.done .n{ background:#193e32; color:#40d1a7; }

/* ---------- Photo preview & CAMERA guides ---------- */
.photo, .photo-preview, .photo-canvas{
  border:1px solid var(--surface-border) !important;
  background: transparent !important;  /* no black fill */
}

/* Transparent overlay used for camera guidance */
.guide{ pointer-events:none; }
.guide .safe{ fill:none; stroke: rgba(13,110,253,.95); stroke-width:2; }
.guide .soft{ fill:none; stroke: rgba(13,110,253,.40); stroke-width:1.5; stroke-dasharray:6 6; }
.guide .hint{ fill: rgba(13,110,253,.10); }

/* Compatibility */
.guides{ background: transparent !important; }

/* ---------- Progress / micro bars ---------- */
.progress{ background-color:#eef3fa; }
.progress-bar{ background-color: var(--brand); }
.micro{ height:6px; background: #e6edf7; border-radius:6px }
.micro .bar{ height:100%; border-radius:6px; background: var(--accent); transition: width .4s }
html[data-bs-theme="dark"] .progress{ background-color:#1e2734; }
html[data-bs-theme="dark"] .micro{ background:#1e2734; }

/* ---------- Utility: track pill ---------- */
.trk{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--ink-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 800; letter-spacing:.4px;
  padding:.45rem .8rem; border-radius:12px; display:inline-block;
}

/* ---------- Small helpers ---------- */
.btn, .form-control, .form-select{ border-radius: .7rem; } /* soft, mobile-friendly */
.table{ --bs-table-striped-bg: transparent; }               /* keep glass look */

/* =================================================================
   Stage BAR (buttons with counts + tiny progress line)
   Usage:
   <a class="stage-btn active">
     <div class="top"><span class="name">STATE</span><span class="count">24</span></div>
     <div class="bar"><span style="width:42%"></span></div>
   </a>
   ================================================================= */
.stage-btn{
  display:flex; flex-direction:column; gap:.35rem;
  border:1px solid var(--stage-chip-border);
  background:var(--stage-chip-bg);
  color:var(--stage-chip-ink);
  border-radius:14px; padding:.55rem .75rem; text-decoration:none; min-width:160px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.stage-btn .top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.stage-btn .name{ font-weight:700; letter-spacing:.2px; }
.stage-btn .count{ font-weight:800; font-variant-numeric: tabular-nums; }
.stage-btn .bar{ height:7px; border-radius:999px; background:var(--stage-bar-bg); overflow:hidden; }
.stage-btn .bar > span{ display:block; height:100%; background:var(--stage-bar-fill); }
.stage-btn.active{ outline:2px solid var(--brand); }
.stage-btn:hover{ text-decoration:none; border-color:var(--brand); transform: translateY(-1px); }
