/* =====================================================
   KANISA-MS — Stylish UI (mobile + desktop)
   ===================================================== */

/* Design tokens — zinafuata muundo wa Portal ya Mshirika (safi, flat, mobile-first) */
:root {
  --kms-navy: #0B2545;
  --kms-navy-deep: #0A0E1E;
  --kms-primary: #1E40AF;
  --kms-primary-dark: #0B2545;
  --kms-primary-light: #3B82F6;
  --kms-accent: #3B82F6;
  --kms-bg: #F1F5F9;
  --kms-card-bg: #ffffff;
  --kms-text: #0F172A;
  --kms-text-muted: #64748B;
  --kms-text-soft: #94A3B8;
  --kms-border: #E2E8F0;
  --kms-border-soft: #F1F5F9;
  --kms-success: #15803D;
  --kms-danger: #DC2626;
  --kms-warning: #92400E;
  --kms-info: #1E40AF;
  --kms-tint-blue: #DBEAFE;
  --kms-tint-green: #DCFCE7;
  --kms-tint-amber: #FEF3C7;
  --kms-tint-slate: #F1F5F9;
  --sidebar-width: 250px;
  --navbar-height: 60px;
  --kms-shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --kms-shadow-md: 0 2px 10px rgba(15,23,42,.07);
  --kms-shadow-lg: 0 8px 24px rgba(15,23,42,.10);
  --kms-shadow-xl: 0 20px 50px rgba(15,23,42,.14);
  --kms-radius: 16px;
  --kms-radius-sm: 12px;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--kms-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--kms-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== NAVBAR ===== */
.kms-navbar {
  background: linear-gradient(160deg, var(--kms-navy-deep) 0%, var(--kms-navy) 70%, #1E40AF 190%) !important;
  height: var(--navbar-height);
  box-shadow: none;
  border: 0;
}

.kms-navbar .container-fluid {
  height: 100%;
  align-items: center;
  gap: .5rem;
}

.kms-menu-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 10px;
  padding: .35rem .65rem;
  transition: all .2s;
}
.kms-menu-btn:hover, .kms-menu-btn:focus {
  background: rgba(255,255,255,.28);
  color: #fff;
}

.kms-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #fff !important;
  font-size: 1.15rem;
  letter-spacing: .5px;
}
.kms-brand-icon {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.18);
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  border: 1px solid rgba(255,255,255,.22);
}
.kms-brand-text { font-weight: 700; }
@media (max-width: 480px) {
  .kms-brand { font-size: 1rem; }
  .kms-brand-icon { width: 30px; height: 30px; }
}

/* Scope switcher */
.kms-scope-btn {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  border-radius: 10px;
  padding: .35rem .75rem;
  font-weight: 500;
  transition: all .2s;
}
.kms-scope-btn:hover { background: rgba(255,255,255,.28) !important; }
.kms-scope-btn::after { margin-left: .35rem; }

.kms-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  padding: .35rem .7rem;
  font-size: .85rem;
}

/* User dropdown */
.kms-user-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff !important;
  padding: .25rem .35rem;
  border-radius: 999px;
  transition: background .2s;
}
.kms-user-btn:hover { background: rgba(255,255,255,.15); }
.kms-user-btn::after { display: none; } /* hide bootstrap caret on mobile */
@media (min-width: 768px) {
  .kms-user-btn { padding-right: .85rem; }
  .kms-user-btn::after {
    display: inline-block;
    margin-left: .45rem;
    vertical-align: .15em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    opacity: .7;
  }
}

.kms-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7 0%, var(--kms-accent) 100%);
  color: var(--kms-primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* Dropdown menus */
.kms-dropdown {
  border-radius: 12px;
  padding: .35rem;
  margin-top: .5rem;
  min-width: 220px;
}
.kms-dropdown .dropdown-item {
  border-radius: 8px;
  padding: .55rem .8rem;
  font-size: .92rem;
  transition: background .15s;
}
.kms-dropdown .dropdown-item:hover { background: var(--kms-bg); }
.kms-dropdown .dropdown-item.active {
  background: var(--kms-primary);
  color: #fff;
}
.kms-dropdown .dropdown-header {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--kms-text-muted);
  padding: .5rem .8rem .25rem;
}

.kms-user-menu { min-width: 240px; }

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-width);
  min-height: calc(100vh - var(--navbar-height));
  position: sticky;
  top: var(--navbar-height);
  background: #fff !important;
  border-right: 1px solid var(--kms-border) !important;
  padding: .75rem 0;
}

.sidebar .nav-link {
  color: var(--kms-text);
  padding: .65rem .9rem;
  border-radius: 10px;
  margin: .15rem .55rem;
  font-size: .92rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .15s ease;
  position: relative;
}

.sidebar .nav-link i {
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
  margin-right: .65rem;
  color: var(--kms-text-muted);
  transition: color .15s;
}

.sidebar .nav-link:hover {
  background: var(--kms-tint-slate);
  color: var(--kms-primary);
}
.sidebar .nav-link:hover i { color: var(--kms-primary); }

.sidebar .nav-link.active {
  background: var(--kms-tint-blue);
  color: var(--kms-navy);
  font-weight: 600;
  box-shadow: none;
}
.sidebar .nav-link.active i { color: var(--kms-primary) !important; }
.sidebar .nav-link.active .badge {
  background: var(--kms-primary) !important;
  color: #fff !important;
}

/* Offcanvas mobile sidebar */
.offcanvas { border-right: 1px solid var(--kms-border); }
.offcanvas-header { background: var(--kms-bg); }
.offcanvas .sidebar { box-shadow: none; min-height: auto; padding: .5rem 0; }

/* ===== MAIN CONTENT ===== */
main {
  min-height: calc(100vh - var(--navbar-height));
  padding: 1.5rem !important;
}
@media (max-width: 768px) {
  main { padding: 1rem !important; }
}

/* ===== CARDS ===== */
.card {
  border: 0;
  background: var(--kms-card-bg);
  box-shadow: var(--kms-shadow-sm);
  border-radius: var(--kms-radius);
  transition: box-shadow .18s;
}
.card:hover { box-shadow: var(--kms-shadow-sm); }

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--kms-border-soft);
  font-weight: 600;
  padding: .9rem 1.1rem;
}
.card-footer { background: transparent; border-top: 1px solid var(--kms-border-soft); }

a .card { text-decoration: none; color: inherit; }
a .card:hover { box-shadow: var(--kms-shadow-md); }

/* Stat cards */
.stat-card {
  border-left: 0;
  background: var(--kms-card-bg);
}
.stat-card .display-6 { font-weight: 700; }
.stat-card .display-4 { font-weight: 700; }

/* Section heading — sawa na portal (`h2.sec`) */
.sec, h2.sec, .section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--kms-text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 1.35rem 0 .6rem;
}

/* ===== SIDEBAR NAV (grouped) ===== */
.kms-nav { padding: 10px 10px 20px; display: flex; flex-direction: column; gap: 2px; }

.kms-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  color: #475569; font-size: .875rem; font-weight: 500;
  text-decoration: none; transition: background .13s, color .13s;
  min-width: 0;
}
.kms-nav-link i { font-size: 1rem; width: 19px; text-align: center; flex-shrink: 0; color: #94A3B8; }
.kms-nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kms-nav-link:hover { background: var(--kms-tint-slate); color: var(--kms-text); text-decoration: none; }
.kms-nav-link:hover i { color: var(--kms-primary-light); }
.kms-nav-link.active {
  background: var(--kms-tint-blue); color: var(--kms-navy); font-weight: 600;
}
.kms-nav-link.active i { color: var(--kms-primary); }

.kms-nav-top { font-weight: 600; color: var(--kms-text); }

/* Group header */
.kms-nav-group { margin-top: 5px; }
.kms-nav-gbtn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 0; background: none; border-radius: 10px;
  color: var(--kms-text-muted); font-size: .7rem; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; cursor: pointer;
  transition: background .13s, color .13s;
}
.kms-nav-gbtn:hover { background: var(--kms-tint-slate); color: var(--kms-text); }
.kms-nav-gicon { font-size: .95rem; width: 19px; text-align: center; color: #94A3B8; }
.kms-nav-glabel { flex: 1; text-align: left; }
.kms-nav-chev {
  font-size: .7rem; color: #CBD5E1;
  transition: transform .2s ease;
}
.kms-nav-gbtn[aria-expanded="true"] .kms-nav-chev { transform: rotate(180deg); }
.kms-nav-gbtn[aria-expanded="true"] { color: var(--kms-primary); }
.kms-nav-gbtn[aria-expanded="true"] .kms-nav-gicon { color: var(--kms-primary-light); }

/* Children — rail ya kushoto */
.kms-nav-sub {
  display: flex; flex-direction: column; gap: 1px;
  margin: 3px 0 4px 20px; padding-left: 11px;
  border-left: 1.5px solid var(--kms-border);
}
.kms-nav-sub .kms-nav-link { padding: 8px 10px; font-size: .845rem; }
.kms-nav-sub .kms-nav-link i { font-size: .92rem; width: 17px; }

/* ===== SIDEBAR COLLAPSED (icon rail) ===== */
.sidebar { transition: width .18s ease; }

@media (min-width: 768px) {
  html.sb-collapsed .sidebar { width: 66px; }
  html.sb-collapsed .kms-nav { padding: 10px 8px 20px; }

  html.sb-collapsed .kms-nav-link span,
  html.sb-collapsed .kms-nav-glabel,
  html.sb-collapsed .kms-nav-chev { display: none; }

  html.sb-collapsed .kms-nav-link,
  html.sb-collapsed .kms-nav-gbtn {
    justify-content: center;
    padding: 11px 0;
    gap: 0;
  }
  html.sb-collapsed .kms-nav-link i,
  html.sb-collapsed .kms-nav-gicon { font-size: 1.15rem; width: auto; }

  /* Watoto wamefichwa — kubofya icon ya kikundi kunafungua sidebar kwanza */
  html.sb-collapsed .kms-nav-sub { display: none; }
  html.sb-collapsed .kms-nav-group { margin-top: 4px; }
}

/* ===== BOTTOM TAB BAR (simu tu) ===== */
.kms-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1035;
  display: flex;
  background: var(--kms-card-bg);
  border-top: 1px solid var(--kms-border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(15,23,42,.06);
}
.kms-bottomnav a,
.kms-bottomnav button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 9px 3px 10px;
  background: none; border: 0;
  color: var(--kms-text-soft);
  font-size: 10.5px; font-weight: 500; line-height: 1.2;
  text-decoration: none;
}
.kms-bottomnav i { font-size: 19px; line-height: 1; }
.kms-bottomnav span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kms-bottomnav a.on { color: var(--kms-primary-light); }
.kms-bottomnav a:active, .kms-bottomnav button:active { background: var(--kms-tint-slate); }

/* Nafasi chini ili content isifichwe na bar */
@media (max-width: 767.98px) {
  body { padding-bottom: 62px; }
}
@media print {
  .kms-bottomnav { display: none !important; }
}

/* ===== HERO (dashboard greeting) ===== */
.kms-hero {
  background: linear-gradient(160deg, var(--kms-navy-deep) 0%, var(--kms-navy) 62%, #1E40AF 190%);
  border-radius: 20px;
  padding: 22px 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.kms-hero::after {
  content: '';
  position: absolute;
  top: -70px; right: -50px;
  width: 230px; height: 230px;
  background: rgba(59,130,246,.16);
  border-radius: 50%;
}
.kms-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.kms-hero-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: #93C5FD; margin-bottom: 5px;
}
.kms-hero-title {
  font-size: 1.5rem; font-weight: 700; margin: 0 0 6px;
  letter-spacing: -.4px; color: #fff;
}
.kms-hero-sub { font-size: .875rem; color: rgba(255,255,255,.7); }
.kms-hero-chip {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .78rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 576px) {
  .kms-hero { padding: 18px 18px; border-radius: 18px; }
  .kms-hero-title { font-size: 1.25rem; }
}

/* Ibada ijayo — ndani ya hero */
.kms-hero-next {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 10px 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: rgba(255,255,255,.9); font-size: .85rem;
  text-decoration: none; transition: background .15s;
}
.kms-hero-next:hover { background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }
.kms-hero-next strong { color: #fff; font-weight: 600; }
.kms-hero-next-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== INSIGHT BANNER ===== */
.kms-insight {
  display: flex; align-items: center; gap: 13px;
  background: #EEF2FF; border-radius: var(--kms-radius);
  padding: 14px 16px; text-decoration: none;
  transition: background .15s;
}
.kms-insight:hover { background: #E0E7FF; text-decoration: none; }
.kms-insight-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,70,229,.14); color: #4338CA; font-size: 16px;
}
.kms-insight-tx { flex: 1; min-width: 0; color: #3730A3; font-size: .9rem; line-height: 1.5; }
.kms-insight-cta {
  flex-shrink: 0; background: #fff; color: #4338CA;
  font-size: .8rem; font-weight: 600; padding: 7px 14px; border-radius: 9px;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .kms-insight { flex-wrap: wrap; }
  .kms-insight-cta { margin-left: 47px; }
}

/* ===== STAT CARDS ===== */
.kms-stat {
  background: var(--kms-card-bg);
  border-radius: var(--kms-radius);
  padding: 16px 16px 14px;
  box-shadow: var(--kms-shadow-sm);
  height: 100%;
}
.kms-stat-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.kms-stat-label {
  font-size: .78rem; color: var(--kms-text-muted); line-height: 1.35;
}
.kms-stat-top .ic { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }
.kms-stat-value {
  font-size: 1.65rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -.5px; color: var(--kms-text);
}
.kms-stat-foot {
  font-size: .76rem; color: var(--kms-text-soft); margin-top: 6px;
}
.kms-stat-foot strong { color: var(--kms-text-muted); font-weight: 600; }
@media (max-width: 576px) {
  .kms-stat-value { font-size: 1.35rem; }
}

/* ===== MODULE TILES ===== */
.kms-mod {
  display: flex; align-items: center; gap: 13px;
  background: var(--kms-card-bg);
  border-radius: var(--kms-radius);
  padding: 15px 16px;
  box-shadow: var(--kms-shadow-sm);
  text-decoration: none; height: 100%;
  transition: box-shadow .18s ease, transform .18s ease;
}
.kms-mod:hover {
  box-shadow: var(--kms-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.kms-mod .ic { width: 42px; height: 42px; font-size: 19px; border-radius: 12px; }
.kms-mod-body { flex: 1; min-width: 0; }
.kms-mod-title {
  display: block; font-size: .98rem; font-weight: 600;
  color: var(--kms-text); line-height: 1.3;
}
.kms-mod-desc {
  display: block; font-size: .78rem; color: var(--kms-text-muted);
  margin-top: 3px; line-height: 1.45;
}
.kms-mod-arrow { color: #CBD5E1; font-size: .95rem; flex-shrink: 0; }
.kms-mod:hover .kms-mod-arrow { color: var(--kms-primary-light); }

/* Icon chips — .ic + rangi (zinatumika ndani ya list rows) */
.ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.ic-blue  { background: var(--kms-tint-blue);  color: var(--kms-primary); }
.ic-green { background: var(--kms-tint-green); color: var(--kms-success); }
.ic-amber { background: var(--kms-tint-amber); color: var(--kms-warning); }
.ic-slate { background: var(--kms-tint-slate); color: #475569; }
.ic-red   { background: #FEE2E2;               color: var(--kms-danger); }

/* ===== BUTTONS ===== (flat — hakuna gradient wala lift) */
.btn {
  border-radius: var(--kms-radius-sm);
  font-weight: 600;
  letter-spacing: 0;
  transition: background .15s ease, color .15s ease;
}
.btn:active { transform: scale(.99); }
.btn-sm { border-radius: 10px; }
.btn-lg { border-radius: 14px; }

.btn-primary {
  background: var(--kms-primary-light);
  border-color: var(--kms-primary-light);
  box-shadow: none;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--kms-primary) !important;
  border-color: var(--kms-primary) !important;
  box-shadow: none;
  transform: none;
  color: #fff;
}

.btn-success {
  background: #16A34A; border-color: #16A34A; color: #fff;
}
.btn-success:hover, .btn-success:focus { background: #15803D; border-color: #15803D; color: #fff; }

.btn-warning {
  background: #F59E0B; border-color: #F59E0B; color: #fff;
}
.btn-warning:hover, .btn-warning:focus { background: #D97706; border-color: #D97706; color: #fff; }

.btn-danger { background: var(--kms-danger); border-color: var(--kms-danger); }
.btn-danger:hover, .btn-danger:focus { background: #B91C1C; border-color: #B91C1C; }

/* Outline buttons — nyepesi zaidi */
.btn-outline-secondary {
  border-color: var(--kms-border);
  color: #475569;
  background: var(--kms-card-bg);
}
.btn-outline-secondary:hover {
  background: var(--kms-tint-slate);
  border-color: var(--kms-border);
  color: var(--kms-text);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  border-color: #ef4444;
}
.btn-danger:hover { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info {
  border-width: 1.5px;
  font-weight: 500;
}

/* ===== FORM CONTROLS ===== */
.form-control, .form-select {
  border-radius: var(--kms-radius-sm);
  border: 1.5px solid var(--kms-border);
  padding: .7rem .9rem;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--kms-primary-light);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.form-control-lg { padding: .85rem 1rem; font-size: 1.05rem; }
.form-control-sm { padding: .4rem .7rem; font-size: .85rem; border-radius: 10px; }

label.form-label {
  font-weight: 600;
  color: #475569;
  font-size: .8rem;
  margin-bottom: .4rem;
}
.form-text { color: var(--kms-text-soft); font-size: .78rem; }

.form-check-input:checked {
  background-color: var(--kms-primary-light);
  border-color: var(--kms-primary-light);
}
.form-check-input:focus {
  border-color: var(--kms-primary-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* ===== BADGES ===== */
.badge {
  font-weight: 600;
  padding: .34em .7em;
  border-radius: 999px;
  letter-spacing: .1px;
  font-size: .72rem;
}

/* ===== TABLES ===== */
.table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
}
.table thead th {
  background: transparent;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--kms-text-muted);
  border-bottom: 1px solid var(--kms-border);
  padding-top: .85rem;
  padding-bottom: .85rem;
}
.table tbody td {
  vertical-align: middle;
  border-bottom-color: var(--kms-border-soft);
  padding-top: .8rem;
  padding-bottom: .8rem;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: var(--kms-tint-slate); }
.table-light, .table-light th { background: transparent !important; }

/* Make table scrollable on mobile gracefully */
.table-responsive { border-radius: var(--kms-radius); }

/* ===== LIST GROUP ===== */
.list-group-item {
  border-color: var(--kms-border-soft);
  padding: .85rem 1rem;
}
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }

/* ===== ALERTS ===== (flat, hakuna edge stripe) */
.alert {
  border: 0;
  border-left: 0;
  border-radius: var(--kms-radius-sm);
  padding: .9rem 1.05rem;
  font-size: .9rem;
}
.alert-success { background: var(--kms-tint-green); color: #166534; }
.alert-danger  { background: #FEE2E2;               color: #991B1B; }
.alert-warning { background: var(--kms-tint-amber); color: #92400E; }
.alert-info    { background: var(--kms-tint-blue);  color: #1E40AF; }
.alert-secondary { background: var(--kms-tint-slate); color: #475569; }

/* ===== LOGIN ===== */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,158,11,.15), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(45,125,210,.25), transparent 50%),
    linear-gradient(135deg, var(--kms-primary-dark) 0%, var(--kms-primary-light) 100%);
  padding: 1rem;
}
.login-card {
  width: 100%;
  max-width: 440px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.35);
  border: 0;
}

/* ===== UTIL ===== */
hr { background-color: var(--kms-border); opacity: 1; }
code { background: #f3f4f6; padding: .15em .4em; border-radius: 5px; font-size: .88em; color: #c026d3; }

/* ===== MOBILE FINE-TUNE ===== */
@media (max-width: 576px) {
  h3 { font-size: 1.4rem; }
  h4 { font-size: 1.2rem; }
  h5 { font-size: 1.05rem; }
  .display-4 { font-size: 2rem; }
  .display-6 { font-size: 1.6rem; }
  .card { border-radius: 12px; }
  .btn { padding: .45rem .9rem; }
  .stat-card { padding: 1rem !important; }
}

/* =====================================================================
   ===== MOBILE PATTERN FIXES — Phase 1 ===============================
   ====================================================================
   Tatizo 3 yanayoathiri pages 13+ za mfumo. Suluhu moja kwenye style.css
   inafix mfumo mzima badala ya kufix page-kwa-page.

   1. Title + buttons row → buttons clipped (members, expenses, n.k.)
   2. Btn-group ya tabs 4+ → tab ya mwisho clipped (sms/send, expenses)
   3. col-6 stat cards → text inakatika kwenye simu ndogo (<360px) */

/* ---- Pattern 0: shell overflow guard ----
   Bug ya msingi: `<main class="flex-grow-1">` ndani ya `<div class="d-flex">`
   ina `min-width: auto` ya default → ina-stretch na inhibits ya intrinsic
   content. Kama kuna chochote ndani kinacho-pana sana, main inazidi viewport
   na buttons/cards zote zina-overflow.

   Suluhu 3:
   - html/body wana overflow-x:hidden kama safety net wa mwisho
   - .d-flex shell wa header.php ana max-width:100vw + min-width:0
   - main ana min-width:0 (allow shrink) na max-width:100% */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body > .d-flex {
  max-width: 100vw;
  min-width: 0;
}
main.flex-grow-1 {
  min-width: 0;
  max-width: 100%;
}

/* ---- Pattern 1: page-level toolbars (title + actions) ----
   CSS Grid (sio flex) kwa buttons container ili columns ziwe STRICT.
   `auto-fit + minmax(150px, 1fr)` → 2 cols kwa simu za 360px+, 1 col chini.
   Tunaweza pia kutumia class ya hiari `.kms-page-toolbar` kama page
   inahitaji pattern hii bila kuwa na .mb-3/.mb-4. */
@media (max-width: 768px) {
  /* Stack title juu, actions chini */
  .kms-page-toolbar,
  .d-flex.justify-content-between.mb-3,
  .d-flex.justify-content-between.mb-4 {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
  }
  /* Title block — upana kamili */
  .kms-page-toolbar > div:first-child,
  .d-flex.justify-content-between.mb-3 > div:first-child,
  .d-flex.justify-content-between.mb-4 > div:first-child {
    width: 100%;
  }
  /* Actions group → CSS Grid. Buttons zinashiriki upana strict. */
  .kms-page-toolbar > div:last-child,
  .d-flex.justify-content-between.mb-3 > div:last-child,
  .d-flex.justify-content-between.mb-4 > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem !important;
    width: 100%;
    align-items: stretch;
  }
  /* Buttons zinajaza cell yao + text refu zinakatika kwa ellipsis */
  .kms-page-toolbar > div:last-child > .btn,
  .kms-page-toolbar > div:last-child > a,
  .kms-page-toolbar > div:last-child > button,
  .d-flex.justify-content-between.mb-3 > div:last-child > .btn,
  .d-flex.justify-content-between.mb-3 > div:last-child > a,
  .d-flex.justify-content-between.mb-3 > div:last-child > button,
  .d-flex.justify-content-between.mb-4 > div:last-child > .btn,
  .d-flex.justify-content-between.mb-4 > div:last-child > a,
  .d-flex.justify-content-between.mb-4 > div:last-child > button {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

/* Simu ndogo sana — buttons 1 per row, hakuna shida ya text refu */
@media (max-width: 380px) {
  .kms-page-toolbar > div:last-child,
  .d-flex.justify-content-between.mb-3 > div:last-child,
  .d-flex.justify-content-between.mb-4 > div:last-child {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Pattern 2: btn-group w-100 (tabs nyingi) → 2x2 wrap mobile ---- */
@media (max-width: 576px) {
  .btn-group.w-100 {
    flex-wrap: wrap;
    gap: .35rem;
  }
  .btn-group.w-100 > .btn,
  .btn-group.w-100 > .btn-check + .btn {
    flex: 1 1 calc(50% - .35rem);
    border-radius: 10px !important;   /* override Bootstrap's grouped corners */
    border: 1.5px solid var(--kms-border) !important;
    margin: 0 !important;
  }
  /* Checked / active states za btn-check radio */
  .btn-group.w-100 > .btn-check:checked + .btn,
  .btn-group.w-100 > .btn.active {
    border-color: var(--kms-primary) !important;
    background: var(--kms-primary);
    color: #fff;
  }
  /* Reduce icon+text crowding */
  .btn-group.w-100 .btn i { font-size: .95rem; }
  .btn-group.w-100 .btn { font-size: .85rem; padding: .55rem .35rem; }
}

/* ---- Pattern 3: col-6 stats → 1 per row chini ya 360px (Galaxy A1x, etc) ---- */
@media (max-width: 360px) {
  .row > .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Stat cards: zuia text-overflow kwenye namba kubwa */
.stat-card .h4,
.stat-card .display-4,
.stat-card .display-6 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card .text-muted,
.stat-card .small {
  word-break: keep-all;
  overflow-wrap: anywhere;     /* ruhusu break long words ('Mhamiaji'/'Ameacha') vizuri */
}

/* ---- Bonus: dropdown items tap-target ya 44px kwa mobile (Apple HIG) ---- */
@media (max-width: 768px) {
  .dropdown-item,
  .kms-dropdown .dropdown-item {
    padding: .8rem 1rem;
    font-size: .95rem;
  }
}

/* ---- Pattern 5: TABLES → CARDS kwenye mobile ----
   Tables zenye 5+ columns hazifit kwenye simu — hata na `.table-responsive`
   horizontal scroll, mobile UX ni dhaifu (user hajui ku-scroll, content
   muhimu hujificha). Suluhu: transform tr → card, td → row ndani ya card.

   Opt-in: ongeza class `.kms-list-table` kwenye <table> ya list views.
   Labels za columns hu-attached kupitia JS ndogo kwenye footer.php
   (inasoma <th> text na inaweka `data-label` kwa kila <td>). */
@media (max-width: 768px) {
  /* Cancel table layout — kila kitu kinakuwa block */
  table.kms-list-table {
    display: block;
    width: 100% !important;
  }
  table.kms-list-table thead { display: none; }
  table.kms-list-table tbody { display: block; }

  /* Each row → card */
  table.kms-list-table tbody tr {
    display: block;
    background: var(--kms-card-bg);
    border: 1px solid var(--kms-border);
    border-radius: 12px;
    margin-bottom: .65rem;
    padding: .85rem 1rem;
    box-shadow: var(--kms-shadow-sm);
  }
  table.kms-list-table tbody tr:hover {
    background: var(--kms-card-bg);   /* override .table-hover */
  }

  /* Each cell → block na label upande wa kushoto */
  table.kms-list-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .4rem 0;
    border: 0 !important;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Label inayotokana na <th> kupitia JS (data-label) */
  table.kms-list-table tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--kms-text-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 80px;
    padding-top: .15rem;
  }
  /* Cells za action buttons → 1 row chini ya card, full width */
  table.kms-list-table tbody td.text-end,
  table.kms-list-table tbody td.actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: .75rem;
    margin-top: .35rem;
    border-top: 1px dashed var(--kms-border) !important;
  }
  table.kms-list-table tbody td.text-end::before,
  table.kms-list-table tbody td.actions::before {
    display: none;
  }

  /* Empty state row (colspan) */
  table.kms-list-table tbody tr:has(td[colspan]) {
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    padding: 2rem 1rem;
  }
  table.kms-list-table tbody tr:has(td[colspan]) td {
    display: block;
    justify-content: center;
    text-align: center;
  }
  table.kms-list-table tbody tr:has(td[colspan]) td::before {
    display: none;
  }

  /* Onyesha kabisa columns zilizo-fichwa kwa d-none d-md-table-cell */
  table.kms-list-table tbody td.d-md-table-cell,
  table.kms-list-table tbody td.d-lg-table-cell {
    display: flex !important;
  }
}

/* Scrollbar polish (desktop) */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
}

/* Print: do not show navbar/sidebar */
@media print {
  .kms-navbar, .sidebar, .offcanvas { display: none !important; }
  main { padding: 0 !important; }
}

/* =====================================================
   DARK MODE — activated kupitia data-bs-theme="dark"
   Bootstrap 5.3 inahandle nyingi automatically; hapa
   tunafanya overrides za kms-* classes na sehemu zinazohitajika.
   ===================================================== */
[data-bs-theme="dark"] {
  --kms-navy:          #0B2545;
  --kms-navy-deep:     #060912;
  --kms-primary:       #60A5FA;
  --kms-primary-dark:  #1E40AF;
  --kms-primary-light: #3B82F6;
  --kms-accent:        #60A5FA;
  --kms-bg:            #0B1220;
  --kms-card-bg:       #16213A;
  --kms-text:          #E2E8F0;
  --kms-text-muted:    #94A3B8;
  --kms-text-soft:     #64748B;
  --kms-border:        #263557;
  --kms-border-soft:   #1D2A47;
  --kms-tint-blue:     rgba(59,130,246,.18);
  --kms-tint-green:    rgba(34,197,94,.16);
  --kms-tint-amber:    rgba(245,158,11,.16);
  --kms-tint-slate:    rgba(148,163,184,.12);
  --kms-success:       #4ADE80;
  --kms-danger:        #F87171;
  --kms-warning:       #FBBF24;
  --bs-body-bg:        #0B1220;
  --bs-body-color:     #E2E8F0;
}

[data-bs-theme="dark"] .kms-insight { background: rgba(99,102,241,.14); }
[data-bs-theme="dark"] .kms-insight:hover { background: rgba(99,102,241,.2); }
[data-bs-theme="dark"] .kms-insight-tx { color: #C7D2FE; }
[data-bs-theme="dark"] .kms-insight-ic { background: rgba(99,102,241,.22); color: #A5B4FC; }
[data-bs-theme="dark"] .kms-insight-cta { background: rgba(255,255,255,.08); color: #C7D2FE; }

[data-bs-theme="dark"] .kms-nav-link { color: #CBD5E1; }
[data-bs-theme="dark"] .kms-nav-link i { color: #64748B; }
[data-bs-theme="dark"] .kms-nav-link:hover { background: var(--kms-tint-slate); color: #fff; }
[data-bs-theme="dark"] .kms-nav-link:hover i { color: #93C5FD; }
[data-bs-theme="dark"] .kms-nav-link.active {
  background: var(--kms-tint-blue); color: #fff;
}
[data-bs-theme="dark"] .kms-nav-link.active i { color: #93C5FD; }
[data-bs-theme="dark"] .kms-nav-top { color: #E2E8F0; }
[data-bs-theme="dark"] .kms-nav-gbtn { color: #64748B; }
[data-bs-theme="dark"] .kms-nav-gbtn:hover { background: var(--kms-tint-slate); color: #CBD5E1; }
[data-bs-theme="dark"] .kms-nav-gbtn[aria-expanded="true"] { color: #93C5FD; }
[data-bs-theme="dark"] .kms-nav-chev { color: #475569; }
[data-bs-theme="dark"] .kms-nav-sub { border-left-color: var(--kms-border); }

[data-bs-theme="dark"] .kms-bottomnav {
  background: var(--kms-card-bg);
  border-top-color: var(--kms-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.4);
}
[data-bs-theme="dark"] .kms-bottomnav a,
[data-bs-theme="dark"] .kms-bottomnav button { color: #64748B; }
[data-bs-theme="dark"] .kms-bottomnav a.on { color: #60A5FA; }

[data-bs-theme="dark"] .kms-stat,
[data-bs-theme="dark"] .kms-mod {
  background: var(--kms-card-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .kms-mod-arrow { color: #475569; }
[data-bs-theme="dark"] label.form-label { color: #CBD5E1; }
[data-bs-theme="dark"] .form-text { color: #64748B; }
[data-bs-theme="dark"] .sec,
[data-bs-theme="dark"] h2.sec { color: #94A3B8; }
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer { border-color: var(--kms-border-soft); }
[data-bs-theme="dark"] .list-group-item {
  background: transparent;
  border-color: var(--kms-border-soft);
  color: var(--kms-text);
}
[data-bs-theme="dark"] .alert-success { color: #86EFAC; }
[data-bs-theme="dark"] .alert-danger  { background: rgba(220,38,38,.16); color: #FCA5A5; }
[data-bs-theme="dark"] .alert-warning { color: #FCD34D; }
[data-bs-theme="dark"] .alert-info    { color: #93C5FD; }
[data-bs-theme="dark"] .btn-outline-secondary {
  background: var(--kms-card-bg);
  border-color: var(--kms-border);
  color: #CBD5E1;
}

[data-bs-theme="dark"] body { background: var(--kms-bg); color: var(--kms-text); }

/* Cards */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card.p-3,
[data-bs-theme="dark"] .card.p-4 {
  background-color: var(--kms-card-bg);
  border: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  color: var(--kms-text);
}
[data-bs-theme="dark"] .card-header {
  background-color: rgba(255,255,255,.03) !important;
  border-color: var(--kms-border) !important;
  color: var(--kms-text);
}

/* Tables */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--kms-text);
  --bs-table-border-color: var(--kms-border);
  --bs-table-striped-bg: rgba(255,255,255,.025);
  --bs-table-hover-bg: rgba(255,255,255,.05);
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table thead.table-light th {
  background-color: #273344 !important;
  color: var(--kms-text) !important;
  border-color: var(--kms-border) !important;
}

/* Sidebar */
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .sidebar.bg-light {
  background-color: var(--kms-card-bg) !important;
  border-right-color: var(--kms-border) !important;
}
[data-bs-theme="dark"] .sidebar .nav-link,
[data-bs-theme="dark"] .sidebar a { color: #CBD5E1; }
[data-bs-theme="dark"] .sidebar .nav-link i { color: #94A3B8; }

[data-bs-theme="dark"] .sidebar .nav-link:hover,
[data-bs-theme="dark"] .sidebar a:hover {
  background-color: var(--kms-tint-slate);
  color: #fff;
}
[data-bs-theme="dark"] .sidebar .nav-link:hover i { color: #93C5FD; }

[data-bs-theme="dark"] .sidebar .nav-link.active,
[data-bs-theme="dark"] .sidebar a.active {
  background-color: var(--kms-tint-blue) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .sidebar .nav-link.active i { color: #93C5FD !important; }

/* Form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #0f172a;
  border-color: var(--kms-border);
  color: var(--kms-text);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #0f172a;
  border-color: var(--kms-primary-light);
  color: var(--kms-text);
}
[data-bs-theme="dark"] .form-control::placeholder { color: #64748b; }
[data-bs-theme="dark"] .input-group-text {
  background-color: #273344;
  border-color: var(--kms-border);
  color: var(--kms-text);
}

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #1e293b;
  border-color: var(--kms-border);
  color: var(--kms-text);
}
[data-bs-theme="dark"] .dropdown-item { color: var(--kms-text); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255,255,255,.06);
  color: #fff;
}
[data-bs-theme="dark"] .dropdown-header { color: var(--kms-text-muted); }
[data-bs-theme="dark"] .dropdown-divider { border-top-color: var(--kms-border); }

/* Alerts — bored colors zibaki za semantic, lakini text iwe inasomeka */
[data-bs-theme="dark"] .alert-light { background-color: #273344; border-color: var(--kms-border); color: var(--kms-text); }
[data-bs-theme="dark"] .alert-info  { background-color: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93c5fd; }
[data-bs-theme="dark"] .alert-success { background-color: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #6ee7b7; }
[data-bs-theme="dark"] .alert-warning { background-color: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fcd34d; }
[data-bs-theme="dark"] .alert-danger  { background-color: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #fca5a5; }

/* Subtle backgrounds (bg-*-subtle) */
[data-bs-theme="dark"] .bg-light { background-color: #1e293b !important; color: var(--kms-text) !important; }
[data-bs-theme="dark"] .bg-light.card-header { background-color: #273344 !important; }
[data-bs-theme="dark"] .text-muted { color: var(--kms-text-muted) !important; }

/* Code + pre */
[data-bs-theme="dark"] code,
[data-bs-theme="dark"] pre {
  background-color: rgba(255,255,255,.06);
  color: #fbbf24;
}

/* Modal */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--kms-card-bg);
  color: var(--kms-text);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--kms-border);
}
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Borders */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-start { border-color: var(--kms-border) !important; }

/* Buttons outline — keep readable */
[data-bs-theme="dark"] .btn-outline-secondary { color: #cbd5e1; border-color: #475569; }
[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: #475569; color: #fff; }
[data-bs-theme="dark"] .btn-outline-primary { color: #93c5fd; border-color: #4f8fd8; }
[data-bs-theme="dark"] .btn-outline-primary:hover { background-color: #4f8fd8; color: #fff; }

/* Footer */
[data-bs-theme="dark"] footer.border-top {
  border-top-color: var(--kms-border) !important;
  color: var(--kms-text-muted) !important;
}

/* Quick theme toggle button kwenye navbar */
.kms-theme-btn {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0;
}
.kms-theme-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.kms-theme-btn i { font-size: 1rem; }
@media (max-width: 576px) {
  .kms-theme-btn { width: 32px; height: 32px; }
}