/* =====================================================================
   KANISA-MS — lugha moja ya muundo (fonti + umbo)
   =====================================================================
   Inapakiwa na kila ukurasa kupitia includes/ui_head.php, BAADA ya
   Bootstrap na KABLA ya <style> ya ukurasa (ili ukurasa uweze kubadilisha).

   Muundo umefuata ShuleWiki: Montserrat; vichwa vizito (800) vyenye herufi
   zilizobanana; kadi zenye mstari mwembamba badala ya kivuli; vitufe
   vizito; label ndogo za HERUFI KUBWA zenye nafasi; namba zinazolingana.

   Rangi HAZIKO hapa. Landing, app ya kanisa, Super Admin, portal na
   affiliate zinaweka rangi zao wenyewe — hapa ni fonti, uzito, nafasi na
   pembe tu. Mistari inatumia rangi ya border ya Bootstrap ya eneo husika.
   ===================================================================== */

:root {
  --kui-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kui-radius: 14px;        /* kadi, paneli */
  --kui-radius-sm: 10px;     /* vitufe, fomu */
  --kui-radius-xs: 8px;      /* vitufe vidogo, chips */
  --kui-track-tight: -.03em; /* vichwa vikubwa */
  --kui-track-label: .08em;  /* label za HERUFI KUBWA */

  --bs-body-font-family: var(--kui-font);
  --bs-font-sans-serif: var(--kui-font);
  --bs-border-radius: var(--kui-radius-sm);
  --bs-border-radius-sm: var(--kui-radius-xs);
  --bs-border-radius-lg: var(--kui-radius);
  --bs-border-radius-xl: 18px;
}

body {
  font-family: var(--kui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Vitu vya fomu havirithi fonti kwa default */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ---------------------------------------------------------------- Vichwa */
h1, .h1, h2, .h2, h3, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 800;
  letter-spacing: var(--kui-track-tight);
  line-height: 1.12;
}
h4, .h4, h5, .h5 { font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
h6, .h6         { font-weight: 700; letter-spacing: -.005em; }
.lead { font-weight: 400; }
strong, b { font-weight: 700; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: 800 !important; }

/* Label ya sehemu — "DECIDE WITH THE DATA" ya ShuleWiki */
.kui-label {
  display: block;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  text-transform: uppercase; letter-spacing: var(--kui-track-label);
  color: var(--bs-secondary-color);
}

/* Namba: safu zinalingana kwenye jedwali, stats na bei */
.table, .kui-num, .badge { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Vitufe
   Kupitia vigezo vya Bootstrap — btn-group inabaki na pembe sahihi. */
.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: var(--kui-radius-sm);
  letter-spacing: -.005em;
}
.btn-sm, .btn-group-sm > .btn { --bs-btn-border-radius: var(--kui-radius-xs); --bs-btn-font-weight: 600; }
.btn-lg, .btn-group-lg > .btn { --bs-btn-border-radius: 12px; --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.4rem; --bs-btn-font-size: 1.05rem; }
.btn-link { --bs-btn-font-weight: 600; }
[class*="btn-outline-"] { --bs-btn-border-width: 1.5px; }

/* ---------------------------------------------------------------- Fomu */
.form-control-lg, .form-select-lg { border-radius: 12px; }
.form-label { font-weight: 600; }
.form-control::placeholder { font-weight: 400; }

/* ---------------------------------------------------------------- Kadi: mstari, si kivuli */
.card {
  --bs-card-border-radius: var(--kui-radius);
  --bs-card-inner-border-radius: calc(var(--kui-radius) - 1px);
  --bs-card-border-color: var(--bs-border-color);
  box-shadow: none;
}
.card-header { font-weight: 700; }
.card-title { font-weight: 700; letter-spacing: -.01em; }
.modal { --bs-modal-border-radius: var(--kui-radius); --bs-modal-inner-border-radius: calc(var(--kui-radius) - 1px); }
.dropdown-menu { --bs-dropdown-border-radius: 12px; }
.alert { --bs-alert-border-radius: 12px; }
.toast { --bs-toast-border-radius: 12px; }

/* ---------------------------------------------------------------- Badge, jedwali, nav */
.badge { font-weight: 700; letter-spacing: .01em; }
.table > thead th {
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--kui-track-label);
}
.nav-link { font-weight: 500; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { font-weight: 700; }
.navbar-brand { font-weight: 800; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- Vipande vya ShuleWiki */

/* Mstari wa takwimu: namba nzito juu, maelezo madogo chini, vigawanyo kati */
.kui-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--kui-stats-line, var(--bs-border-color));
}
.kui-stats > div { padding: 16px 18px 4px 0; }
.kui-stats > div + div { border-left: 1px solid var(--kui-stats-line, var(--bs-border-color)); padding-left: 18px; }
.kui-stats b {
  display: block; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.kui-stats span { display: block; font-size: 13px; line-height: 1.45; margin-top: 2px; opacity: .72; }
@media (max-width: 575.98px) {
  .kui-stats { grid-template-columns: 1fr 1fr; }
  .kui-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kui-stats > div:nth-child(n+3) { border-top: 1px solid var(--kui-stats-line, var(--bs-border-color)); }
}

/* Kadi ya kiungo: kichwa kizito + maelezo mafupi (Rank / Compare / Region) */
.kui-tile {
  display: block; height: 100%;
  padding: 18px; border-radius: var(--kui-radius);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: inherit; text-decoration: none;
  transition: border-color .15s ease;
}
.kui-tile:hover { border-color: currentColor; color: inherit; }
.kui-tile b { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.kui-tile span { display: block; font-size: 13px; line-height: 1.45; margin-top: 3px; color: var(--bs-secondary-color); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}