/* ==========================================================================
   Musoma COHAS — Student Registration System
   Design system + component styling on top of Bootstrap 5.3
   ========================================================================== */

:root{
  /* brand (teal) scale */
  --brand-50:#f0fdfa;  --brand-100:#ccfbf1; --brand-200:#99f6e4;
  --brand-300:#5eead4; --brand-400:#2dd4bf; --brand-500:#14b8a6;
  --brand-600:#0d9488; --brand-700:#0f766e; --brand-800:#115e59; --brand-900:#134e4a;
  --brand:#0f766e; --brand-ink:#0b5d56;

  --accent:#2563eb;              /* links / secondary emphasis */

  --bg:#f4f7f9;
  --surface:#ffffff;
  --surface-2:#f8fafb;
  --border:#e5e9ef;
  --border-strong:#d3dae2;
  --text:#1e293b;
  --muted:#64748b;

  --radius-sm:.5rem;
  --radius:.85rem;
  --radius-lg:1.15rem;

  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow:0 6px 18px -6px rgba(15,23,42,.16), 0 3px 8px -4px rgba(15,23,42,.10);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.28);

  /* Bootstrap overrides */
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-body-font-family:'Inter Variable','Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bs-border-color:var(--border);
  --bs-primary:var(--brand);
  --bs-link-color:var(--brand-ink);
  --bs-link-hover-color:var(--brand-900);
  --bs-emphasis-color:var(--text);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(15,118,110,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(37,99,235,.05), transparent 55%),
    var(--bg);
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
}
::selection{ background:var(--brand-200); }

/* thin, unobtrusive scrollbars */
*{ scrollbar-width:thin; scrollbar-color:#c7ced8 transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#c7ced8; border-radius:20px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#aab3bf; background-clip:content-box; }

/* ---------- top progress bar ---------- */
#app-progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:3000;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-300));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s ease, opacity .35s ease .2s; opacity:0;
  box-shadow:0 0 12px rgba(20,184,166,.6);
}
#app-progress.on{ opacity:1; }

/* ---------- global loading overlay ---------- */
.app-loader{
  position:fixed; inset:0; z-index:2500;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(244,247,249,.72); backdrop-filter:blur(3px) saturate(120%);
  animation:fadeIn .15s ease both;
}
.app-loader[hidden]{ display:none !important; }
.app-loader .spinner-border{ color:var(--brand)!important; }

/* ---------- entrance animation ---------- */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.fade-in{ animation:fadeInUp .32s cubic-bezier(.2,.7,.2,1) both; }
.wizard-step{ animation:fadeInUp .24s ease both; }
main.container-fluid > .row > [class*="col"] .card{ animation:fadeInUp .34s ease both; }
main.container-fluid > .row > [class*="col"]:nth-child(2) .card{ animation-delay:.04s; }
main.container-fluid > .row > [class*="col"]:nth-child(3) .card{ animation-delay:.08s; }
main.container-fluid > .row > [class*="col"]:nth-child(4) .card{ animation-delay:.12s; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar.bg-primary{
  background:linear-gradient(180deg,var(--brand-700),var(--brand-800))!important;
  position:sticky; top:0; z-index:1040;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 24px -16px rgba(15,23,42,.5);
  transition:box-shadow .25s ease, padding .25s ease;
  padding-top:.6rem; padding-bottom:.6rem;
}
.navbar.is-scrolled{ box-shadow:0 10px 30px -12px rgba(15,23,42,.45); }
.navbar-brand{ letter-spacing:.2px; }
.navbar-brand img{ box-shadow:0 2px 8px rgba(0,0,0,.18); }
.navbar .nav-link{ border-radius:.6rem; padding:.45rem .7rem!important; transition:background .18s ease,color .18s ease; opacity:.92;
  display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
.navbar .nav-link:hover{ background:rgba(255,255,255,.12); opacity:1; }
.navbar .nav-link.active{ background:rgba(255,255,255,.18); opacity:1; font-weight:600; }

/* Custom "navbar-expand" breakpoint: hamburger on phone/tablet, full row on
   PC. Bootstrap's own -lg mixin (992px) is the right cutoff for that, but at
   that width this app's 9 top-level items + brand + search + profile chip
   don't fit at their normal (mobile) size — so above 992px several things
   shrink (icons drop off top-level links, brand name hides, search narrows,
   role badge hides) specifically to buy back the room a plain row needs.
   The navbar's own container is capped at the same 1200px as the page
   content below it (matching the original design — a full-bleed dark bar
   isn't what was wanted), so this compact sizing is permanent at any width
   from 992px up rather than easing off again on a wider monitor: the
   container never actually gets wider than ~1170px usable regardless of
   how wide the window is. Full icons/labels/search remain in the collapsed
   menu below 992px, where there's no horizontal pressure since everything
   stacks vertically. */
@media (min-width:992px){
  .navbar-expand-custom{ flex-wrap:nowrap; justify-content:flex-start; }
  .navbar-expand-custom .navbar-nav{ flex-direction:row; }
  .navbar-expand-custom .navbar-nav .dropdown-menu{ position:absolute; }
  .navbar-expand-custom .navbar-collapse{ display:flex!important; flex-basis:auto; }
  .navbar-expand-custom .navbar-toggler{ display:none; }
  .navbar .navbar-collapse{ gap:.1rem; }
  .navbar .navbar-nav{ flex-wrap:nowrap; align-items:center; gap:0; }
  .navbar .navbar-nav > .nav-item > .nav-link{ padding:.45rem .22rem!important; font-size:.74rem; }
  .navbar .navbar-nav > .nav-item > .nav-link > .bi{ display:none; }
  .navbar-brand span{ display:none; }
  /* Search and profile need to stay legible rather than being crushed to fit —
     so they keep a real, readable width/size and the *labels* (brand name,
     nav icons) are what give way first at this breakpoint instead. */
  #navSearch{ flex:0 1 130px; min-width:90px; }
  .navbar .user-menu .u-name, .navbar .user-menu .badge{ display:none; }
}
#navSearch #navSearchInput{ width:100%; }
@media (max-width:991.98px){ #navSearch{ width:100%; margin:.25rem 0 .5rem; } }
.navbar .dropdown-menu{ border:none; box-shadow:var(--shadow); border-radius:var(--radius); padding:.35rem; margin-top:.5rem;
  max-height:min(75vh,560px); overflow-y:auto; overscroll-behavior:contain; }
.navbar .dropdown-header{ font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.5rem .7rem .2rem; }
.navbar .dropdown-item{ border-radius:.55rem; padding:.42rem .7rem; font-weight:500; }
.navbar .dropdown-item:hover{ background:var(--brand-50); color:var(--brand-900); }
.navbar .btn-outline-light{ border-color:rgba(255,255,255,.35); border-radius:.6rem; }
.navbar .btn-outline-light:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
/* Notification bell + profile avatar: a real, clearly-clickable size at every
   width, not just whatever was left over after the nav links took their share. */
.navbar .nav-avatar-btn{ min-height:38px; padding-top:.4rem; padding-bottom:.4rem; }
.navbar .nav-avatar-btn > .bi{ font-size:1.25rem; line-height:1; }
.navbar .notif-menu .dropdown-item.bg-light:hover{ background:var(--brand-50)!important; }

main.container-fluid{ animation:fadeIn .25s ease both; }

/* ==========================================================================
   Typography scale — one family (Inter) across the whole system, sized/
   weighted per element so dense tables and forms stay readable. Component
   rules further down (badges, stat cards, kv lists, stepper…) refine these
   base defaults for their own context and take precedence as normal.
   ========================================================================== */
:root{ --bs-body-font-size:14px; --bs-body-font-weight:400; --bs-body-line-height:1.55; }
h1,h2,h3,h4,h5,h6{ font-weight:600; letter-spacing:-.01px; }
.navbar-brand{ font-weight:700; font-size:1.2rem; }
.btn{ font-weight:600; font-size:.85rem; letter-spacing:.1px; }
table{ font-size:.82rem; }
.form-control, .form-select{ font-size:.85rem; }
.card-header{ font-weight:600; font-size:.95rem; }
[data-countup]{ font-weight:700; }

/* Horizontal "tick all" submission checklists (documents, per-semester supplies) */
.check-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .9rem; }
.check-row .form-check{ margin:0; padding-left:1.6em; }
.check-row .form-check-input{ margin-left:-1.6em; }
.check-row .chk-all + label{ font-weight:600; }
.check-row .sep{ width:1px; align-self:stretch; background:var(--border-strong); }

/* Dashboard "Recent registrations" — compact, name on a single line, no h-scroll */
/* Compact data tables (dashboard "recent", the students list, and similar listings) —
   smaller type, tight rows, names/values kept to one line instead of wrapping. */
.dash-recent, .tbl-compact{ font-size:.82rem; }
.dash-recent th, .dash-recent td, .tbl-compact th, .tbl-compact td{ padding-top:.4rem; padding-bottom:.4rem; }
.dash-recent th, .tbl-compact th{ font-size:.7rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
.dash-recent .badge, .tbl-compact .badge{ font-size:.68rem; }
.tbl-compact td.text-nowrap, .tbl-compact th.text-nowrap{ white-space:nowrap; }
.dash-recent th, .dash-recent td{ white-space:nowrap; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-header{
  background:var(--surface)!important;
  border-bottom:1px solid var(--border);
  font-weight:600; padding:.85rem 1.1rem;
  border-top-left-radius:var(--radius)!important; border-top-right-radius:var(--radius)!important;
}
.card-body{ padding:1.1rem 1.15rem; }
.card-footer{ background:var(--surface)!important; border-top:1px solid var(--border); }
.list-group-flush .list-group-item{ padding:.7rem 1.1rem; border-color:var(--border); }
.list-group-item{ background:transparent; }

/* stat card (dashboard) */
.stat-card{ position:relative; overflow:hidden; }
.stat-card .stat-ico{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; flex:none;
}
.stat-card .stat-val{ font-size:1.5rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.stat-card .stat-lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.tone-primary .stat-ico{ background:var(--brand-50); color:var(--brand-700); }
.tone-success .stat-ico{ background:#ecfdf5; color:#059669; }
.tone-danger  .stat-ico{ background:#fef2f2; color:#dc2626; }
.tone-muted   .stat-ico{ background:#f1f5f9; color:#475569; }
.tone-accent  .stat-ico{ background:#eff6ff; color:#2563eb; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --bs-btn-border-radius:.65rem;
  font-weight:600; letter-spacing:.1px;
  transition:transform .06s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-800); --bs-btn-hover-border-color:var(--brand-800);
  --bs-btn-active-bg:var(--brand-900); --bs-btn-active-border-color:var(--brand-900);
  box-shadow:0 8px 18px -8px rgba(15,118,110,.6);
}
.btn-success{ --bs-btn-bg:#059669; --bs-btn-border-color:#059669; --bs-btn-hover-bg:#047857; --bs-btn-hover-border-color:#047857; box-shadow:0 8px 18px -8px rgba(5,150,105,.55); }
.btn-outline-secondary{ --bs-btn-color:var(--muted); --bs-btn-border-color:var(--border-strong); --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-color:var(--text); --bs-btn-hover-border-color:var(--border-strong); }
.btn-outline-primary{ --bs-btn-color:var(--brand-700); --bs-btn-border-color:var(--brand-300); --bs-btn-hover-bg:var(--brand-700); --bs-btn-hover-border-color:var(--brand-700); }
.btn-link{ text-decoration:none; font-weight:600; }
.btn-link:hover{ text-decoration:none; }
.btn-sm{ --bs-btn-border-radius:.5rem; }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 .22rem rgba(15,118,110,.25); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-label{ font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:.3rem; letter-spacing:.02em; }
.form-control, .form-select{
  border-radius:.65rem; border-color:var(--border-strong); padding:.5rem .75rem;
  background-color:var(--surface); color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder{ color:#9aa6b2; }
.form-control:focus, .form-select:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 .22rem rgba(15,118,110,.16);
}
.form-control:disabled, .form-select:disabled{ background:var(--surface-2); }
.input-group-text{ background:var(--surface-2); border-color:var(--border-strong); border-radius:.65rem; color:var(--muted); }
.form-check-input:checked{ background-color:var(--brand); border-color:var(--brand); }
.form-check-input:focus{ border-color:var(--brand-400); box-shadow:0 0 0 .22rem rgba(15,118,110,.16); }
.form-text{ font-size:.76rem; }

/* Tom Select — restyle the bootstrap5 theme to match .form-control exactly */
.ts-wrapper.single .ts-control, .ts-wrapper .ts-control{
  border-radius:.65rem!important; border-color:var(--border-strong)!important;
  background-color:var(--surface)!important; min-height:calc(1.5em + 1rem + 2px); padding:.5rem .75rem;
  box-shadow:none!important;
}
.ts-wrapper.focus .ts-control{
  border-color:var(--brand-500)!important; box-shadow:0 0 0 .22rem rgba(15,118,110,.16)!important;
}
.ts-wrapper.is-invalid .ts-control{ border-color:#dc3545!important; }
.ts-dropdown{ border-radius:.65rem; border-color:var(--border-strong); box-shadow:var(--shadow); overflow:hidden; }
.ts-dropdown .active{ background-color:var(--brand-50); color:var(--brand-ink); }
.ts-wrapper .ts-control > input{ font-family:inherit; }
.ts-wrapper.single .ts-control{ font-size:.85rem; }

/* Lucide icons replace Bootstrap-Icons glyphs (see the shim in app.js) — sized to
   match the surrounding text like a font icon would, colour inherited via currentColor. */
svg.lucide{ width:1em; height:1em; stroke-width:1.75; vertical-align:-.15em; flex-shrink:0; }

/* SweetAlert2 — compact, standard-size popup (default SweetAlert2 sizing runs large) */
.swal2-popup{
  border-radius:var(--radius); font-family:var(--bs-body-font-family);
  width:22rem!important; padding:1.1rem 1.3rem 1.4rem!important; font-size:.85rem;
}
.swal2-icon{ width:3em!important; height:3em!important; margin:.6rem auto .4rem!important; }
.swal2-icon .swal2-icon-content{ font-size:1.6em!important; }
.swal2-title{ font-size:1.02rem; padding:0 0 .2rem; margin:0; }
.swal2-html-container{ font-size:.82rem; margin:.4rem 0 0; line-height:1.45; }
.swal2-actions{ margin:1.1rem 0 0; gap:.5rem; }
.swal2-styled{ padding:.4rem .95rem!important; font-size:.82rem!important; }
.swal2-styled.swal2-confirm{ border-radius:.6rem!important; box-shadow:none!important; }
.swal2-styled.swal2-cancel{ border-radius:.6rem!important; background:var(--surface-2)!important; color:var(--text)!important; box-shadow:none!important; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table{ --bs-table-bg:transparent; margin-bottom:0; }
.table thead th{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  color:var(--muted); background:var(--surface-2);
  border-bottom:1px solid var(--border); padding:.7rem .9rem; white-space:nowrap;
}
.table tbody td{ padding:.7rem .9rem; border-color:var(--border); vertical-align:middle; }
.table tbody tr{ transition:background .12s ease; }
.table-hover tbody tr:hover{ background:var(--brand-50); }
.table tfoot td{ border-color:var(--border); background:var(--surface-2); }
.table-responsive{ border-radius:var(--radius); }
.card > .table-responsive:last-child{ border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); }
.fee-line{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap; }
.tbl-fees td, .tbl-fees th{ vertical-align:middle; white-space:nowrap; }
.tbl-fees .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tbl-fees .charge-ico{ width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--brand-50); color:var(--brand-700); font-size:.8rem; flex:none; }
.btn-icon{ --bs-btn-padding-x:.4rem; --bs-btn-padding-y:.2rem; line-height:1; }
.unit-note{ font-weight:400; font-size:.7rem; color:var(--muted); }

/* batch payment rows */
.batch-form tbody tr.row-off{ opacity:.45; }
.batch-form tbody tr.row-off .charge-ico{ filter:grayscale(1); }
.batch-form .bl-amt{ max-width:8rem; }

/* card-header tabs */
.nav-tabs{ --bs-nav-tabs-link-active-color:var(--brand-800); border-bottom-color:var(--border); }
.nav-tabs .nav-link{ color:var(--muted); font-weight:600; border:0; border-bottom:2px solid transparent; border-radius:0; padding:.5rem .85rem; }
.nav-tabs .nav-link:hover{ color:var(--brand-700); border-bottom-color:var(--brand-200); }
.nav-tabs .nav-link.active{ color:var(--brand-800); background:transparent; border-bottom-color:var(--brand-600); }

/* ==========================================================================
   Badges / pills / tags
   ========================================================================== */
.badge{ font-weight:600; letter-spacing:.02em; border-radius:.5rem; padding:.34em .6em; }
.badge.text-bg-light{ background:var(--surface-2)!important; color:var(--muted)!important; }
.badge.text-bg-info{ background:#e0f2fe!important; color:#0369a1!important; }
.badge.text-bg-warning{ background:#fef3c7!important; color:#92400e!important; }
.badge.text-bg-success{ background:#dcfce7!important; color:#166534!important; }
.badge.text-bg-danger{ background:#fee2e2!important; color:#991b1b!important; }
.badge.text-bg-secondary{ background:#e2e8f0!important; color:#475569!important; }
.badge.text-bg-dark{ background:#1e293b!important; }
.badge.text-bg-primary{ background:var(--brand-100)!important; color:var(--brand-800)!important; }

.pill{ display:inline-block; padding:.22em .65em; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.02em; }
.pill-paid{ background:#dcfce7; color:#166534; }
.pill-partial{ background:#fef3c7; color:#92400e; }
.pill-unpaid{ background:#fee2e2; color:#991b1b; }
.tag{ display:inline-block; padding:.2em .55em; border-radius:.45rem; font-size:.7rem; font-weight:600; }
.tag-green{ background:#dcfce7; color:#166534; }
.tag-amber{ background:#fef3c7; color:#92400e; }
.tag-grey{ background:#e2e8f0; color:#475569; }

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert{ border:1px solid transparent; border-left-width:4px; border-radius:.7rem; box-shadow:var(--shadow-xs); }
.alert-success{ background:#ecfdf5; border-color:#a7f3d0; border-left-color:#059669; color:#065f46; }
.alert-danger{ background:#fef2f2; border-color:#fecaca; border-left-color:#dc2626; color:#991b1b; }
.alert-warning{ background:#fffbeb; border-color:#fde68a; border-left-color:#d97706; color:#92400e; }
.alert-info{ background:#eff6ff; border-color:#bfdbfe; border-left-color:#2563eb; color:#1e40af; }

/* ==========================================================================
   Accordion / offcanvas
   ========================================================================== */
.accordion{ --bs-accordion-border-color:var(--border); --bs-accordion-btn-focus-box-shadow:0 0 0 .22rem rgba(15,118,110,.16); }
.accordion-button{ font-weight:600; padding:.8rem 1.05rem; }
.accordion-button:not(.collapsed){ background:var(--brand-50); color:var(--brand-900); box-shadow:none; }
.accordion-button:not(.collapsed)::after{ filter:hue-rotate(120deg) saturate(1.4); }
.accordion-body{ padding:1rem 1.05rem; }
.accordion-flush .accordion-item:last-child{ border-bottom:0; }
.offcanvas{ border-left:1px solid var(--border)!important; }
.offcanvas-header{ border-bottom:1px solid var(--border); }

/* key/value list */
dl.kv{ display:grid; grid-template-columns:minmax(140px,190px) 1fr; gap:.4rem 1rem; margin:0; font-size:.85rem; }
dl.kv dt{ color:var(--muted); font-weight:500; }
dl.kv dd{ margin:0; font-weight:600; word-break:break-word; }
@media (max-width:576px){ dl.kv{ grid-template-columns:1fr; gap:.15rem; } dl.kv dd{ margin-bottom:.55rem; } }

/* Profile tabs (narrow sidebar column) — stack label above value so each detail
   gets the card's full width and renders on one line instead of wrapping. */
#profileTabsCard .tab-pane dl.kv{ grid-template-columns:1fr; gap:0; }
#profileTabsCard .tab-pane dl.kv dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; margin-top:.7rem; }
#profileTabsCard .tab-pane dl.kv dt:first-child{ margin-top:0; }
#profileTabsCard .tab-pane dl.kv dd{ white-space:nowrap; overflow-x:auto; }

/* ==========================================================================
   Wizard stepper
   ========================================================================== */
.stepper{ display:flex; margin:.25rem 0 1.5rem; }
.stepper .step{ flex:1 1 0; text-align:center; position:relative; padding:0 .25rem; min-width:74px; }
.stepper .step::before{
  content:""; position:absolute; top:19px; left:-50%; width:100%; height:2px;
  background:var(--border-strong); z-index:0;
}
.stepper .step:first-child::before{ display:none; }
.stepper .step.done::before, .stepper .step.active::before{ background:var(--brand-400); }
.stepper .dot{
  position:relative; z-index:1; width:40px; height:40px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border-strong); color:var(--muted);
  display:flex; align-items:center; justify-content:center; margin:0 auto .45rem; font-weight:700;
  transition:all .28s cubic-bezier(.2,.7,.2,1);
}
.stepper .step.active .dot{
  border-color:var(--brand); color:var(--brand-700);
  box-shadow:0 0 0 5px rgba(15,118,110,.14); transform:scale(1.06);
}
.stepper .step.done .dot{ background:var(--brand); border-color:var(--brand); color:#fff; }
.stepper .step.done .dot::after{ content:"\2713"; font-size:1rem; }
.stepper .step.done .dot span{ display:none; }
.stepper .label{ font-size:.74rem; color:var(--muted); font-weight:500; }
.stepper .step.active .label{ color:var(--brand-800); font-weight:700; }
.stepper .step.done .label{ color:var(--brand-700); }
@media (max-width:520px){ .stepper .label{ display:none; } .stepper{ margin-bottom:1rem; } }

/* fee preview / collapse chevrons */
.list-collapse-toggle{ user-select:none; }
.list-collapse-toggle .bi-chevron-right{ transition:transform .2s ease; }
.list-collapse-toggle[aria-expanded="true"] .bi-chevron-right{ transform:rotate(90deg); }
.cursor-pointer{ cursor:pointer; }

/* ==========================================================================
   Auth (login / change password)
   ========================================================================== */
.auth-card{
  border:none; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.auth-card .auth-accent{ height:5px; background:linear-gradient(90deg,var(--brand-600),var(--brand-400),var(--accent)); }
.auth-logo{
  width:84px; height:84px; border-radius:22px; object-fit:contain; padding:12px;
  background:var(--surface); box-shadow:0 10px 24px -10px rgba(15,118,110,.5), 0 0 0 1px var(--border);
}
.auth-wrap{ min-height:calc(100dvh - 160px); display:flex; align-items:center; }

/* ==========================================================================
   Misc
   ========================================================================== */
h1,h2,h3,h4,h5{ letter-spacing:-.01em; }
.text-primary{ color:var(--brand-700)!important; }
a, a:hover, a:focus{ text-decoration:none; }
.toast{ border-radius:.7rem; box-shadow:var(--shadow); }
footer{ color:var(--muted); }
hr{ border-color:var(--border); opacity:1; }
.empty-state{ text-align:center; padding:2.5rem 1rem; color:var(--muted); }
.empty-state .bi{ font-size:2rem; opacity:.5; display:block; margin-bottom:.5rem; }

@media print{
  #app-progress, .navbar, footer, .app-loader, .no-print, .btn, .offcanvas{ display:none!important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:1px solid #dee2e6; break-inside:avoid; }
  a{ color:inherit; }
}