/* ==========================================================================
   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; }

/* one tidy row on desktop: links never wrap, search flexes, name truncates */
@media (min-width:992px){
  .navbar .navbar-collapse{ gap:.25rem; }
  .navbar .navbar-nav{ flex-wrap:nowrap; align-items:center; gap:.15rem; }
  #navSearch{ flex:0 1 240px; min-width:150px; }
  .navbar .user-menu .u-name{ display:inline-block; max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
}
#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; }
.navbar .dropdown-item{ border-radius:.55rem; padding:.5rem .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); }

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

/* Dashboard "Recent registrations" — compact, name on a single line, no h-scroll */
.dash-recent{ font-size:.82rem; }
.dash-recent th, .dash-recent td{ white-space:nowrap; padding-top:.4rem; padding-bottom:.4rem; }
.dash-recent th{ font-size:.7rem; letter-spacing:.03em; }
.dash-recent .badge{ font-size:.68rem; }

/* ==========================================================================
   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; }

/* ==========================================================================
   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; }
.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; } }

/* ==========================================================================
   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; }
}