/* =====================================================================
 |  theme.css  v3  -  Muonekano wa kisasa (sidebar inayokunjika, kadi za glasi)
 |  data-theme = "indigo" (giza-buluu, chaguo-msingi) | "ocean" (giza-teal)
 |              | "dark" (charcoal) | "light" (mwanga laini)
 |  Rangi zote zinatoka kwenye variables hapa chini.
 ===================================================================== */

/* mlima (mchoro wangu mwenyewe) - hutumika kwenye themes za giza */
:root{
  --mtn:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 400V250l120-40 110 38 150-90 120 70 140-110 130 80 150-60 140 90 170-100 130 70v300z' fill='%23000' fill-opacity='.22'/><path d='M0 400V310l160-50 140 40 170-70 150 60 170-80 150 70 140-40 160 60 200-50v180z' fill='%23000' fill-opacity='.28'/></svg>");
}

/* ---------- 1) INDIGO (giza-buluu, kama NMB) ---------- */
:root, html[data-theme="indigo"]{
  --page-bg:linear-gradient(180deg,#1d1d44 0%,#24244f 50%,#171734 100%);
  --side-bg:#0f1028; --side-ink:#c9cdf0; --side-soft:#8d93c4; --side-hover:rgba(255,255,255,.07);
  --side-active-bg:rgba(99,102,241,.22); --side-active-ink:#fb923c; --side-line:rgba(255,255,255,.09);
  --top-ink:#e8eaff; --chip:rgba(255,255,255,.09); --chip-line:rgba(255,255,255,.10); --chip-ink:#e8eaff;
  --card:rgba(43,45,104,.78); --card-line:rgba(255,255,255,.08); --card-shadow:0 18px 40px -22px rgba(0,0,0,.6);
  --ink:#eceeff; --ink-soft:#b9bee6; --muted:#8e94c2; --head:#c7d2fe; --link:#a5b4fc;
  --input-bg:rgba(255,255,255,.06); --input-line:rgba(255,255,255,.16); --input-focus-bg:rgba(255,255,255,.10);
  --row-hover:rgba(255,255,255,.05); --line:rgba(255,255,255,.09);
  --dd-bg:#26286a; --dd-ink:#dfe3ff; --dd-hover:rgba(255,255,255,.08); --modal-bg:#25275c;
  --accent:#6366f1; --accent-strong:#4f46e5; --stripe:#fb923c; --thead-ink:#b9bee6;
  --ok-ink:#4ade80; --bad-ink:#fca5a5; --warn-ink:#fcd34d; --info-ink:#93c5fd; --def-ink:#cbd5e1;
  --foot:#0f1028; --foot-ink:#aab0dd;
  --login:radial-gradient(circle at 15% 20%,rgba(255,255,255,.14),transparent 40%),radial-gradient(circle at 85% 85%,rgba(255,255,255,.10),transparent 45%),linear-gradient(135deg,#312e81,#4f46e5 60%,#6366f1);
  --scheme:dark;
}
/* ---------- 2) BAHARI (giza-teal) ---------- */
html[data-theme="ocean"]{
  --page-bg:linear-gradient(180deg,#0c2c30 0%,#103b3f 50%,#0a2528 100%);
  --side-bg:#061b1d; --side-ink:#c5ece6; --side-soft:#80b9b2; --side-hover:rgba(255,255,255,.07);
  --side-active-bg:rgba(20,184,166,.22); --side-active-ink:#fbbf24;
  --card:rgba(18,72,76,.78); --card-line:rgba(255,255,255,.09);
  --ink:#e9fbf8; --ink-soft:#b3dcd6; --muted:#7fb0aa; --head:#99f6e4; --link:#5eead4;
  --dd-bg:#124a4e; --dd-ink:#d9f7f2; --modal-bg:#104247;
  --accent:#14b8a6; --accent-strong:#0f766e; --stripe:#fbbf24; --thead-ink:#b3dcd6;
  --foot:#061b1d; --foot-ink:#99d9d0;
  --login:radial-gradient(circle at 15% 20%,rgba(255,255,255,.14),transparent 40%),radial-gradient(circle at 85% 85%,rgba(255,255,255,.10),transparent 45%),linear-gradient(135deg,#134e4a,#0f766e 60%,#0891b2);
}
/* ---------- 3) GIZA (charcoal) ---------- */
html[data-theme="dark"]{
  --page-bg:linear-gradient(180deg,#121722 0%,#1b2230 50%,#10141d 100%);
  --side-bg:#0a0d14; --side-ink:#d3d9e4; --side-soft:#8b96a8; --side-hover:rgba(255,255,255,.07);
  --side-active-bg:rgba(129,140,248,.2); --side-active-ink:#fb923c;
  --card:rgba(38,46,62,.80); --card-line:rgba(255,255,255,.08);
  --ink:#eef1f6; --ink-soft:#bcc5d3; --muted:#8c97a9; --head:#e2e8f0; --link:#a5b4fc;
  --dd-bg:#252d3d; --dd-ink:#e2e8f0; --modal-bg:#232b3a;
  --accent:#6366f1; --accent-strong:#4f46e5; --stripe:#fb923c; --thead-ink:#bcc5d3;
  --foot:#0a0d14; --foot-ink:#9aa5b7;
  --login:radial-gradient(circle at 15% 20%,rgba(255,255,255,.10),transparent 40%),radial-gradient(circle at 85% 85%,rgba(255,255,255,.07),transparent 45%),linear-gradient(135deg,#0f172a,#1e293b 60%,#334155);
}
/* ---------- 4) MWANGA (laini kwa macho, katikati jeupe-jeupe) ---------- */
html[data-theme="light"]{
  --mtn:none;
  --page-bg:#f1f4fb;
  --side-bg:linear-gradient(185deg,#312e81,#4338ca 75%,#4f46e5); --side-ink:#e0e3fb; --side-soft:#c7cbf5; --side-hover:rgba(255,255,255,.10);
  --side-active-bg:rgba(255,255,255,.20); --side-active-ink:#ffffff; --side-line:rgba(255,255,255,.14);
  --top-ink:#334155; --chip:#ffffff; --chip-line:#e3e8f1; --chip-ink:#475569;
  --card:#ffffff; --card-line:#e8ecf3; --card-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 34px -22px rgba(16,24,40,.22);
  --ink:#334155; --ink-soft:#5b6b82; --muted:#94a3b8; --head:#4338ca; --link:#4338ca;
  --input-bg:#f7f9fc; --input-line:#e2e8f0; --input-focus-bg:#ffffff;
  --row-hover:#f7f8fa; --line:#e8ecf3;
  --dd-bg:#ffffff; --dd-ink:#475569; --dd-hover:#f2f5fb; --modal-bg:#ffffff;
  --accent:#4f46e5; --accent-strong:#4338ca; --stripe:#f59e0b; --thead-ink:#475569;
  --ok-ink:#166534; --bad-ink:#b91c1c; --warn-ink:#92400e; --info-ink:#1e40af; --def-ink:#475569;
  --foot:#1e1b4b; --foot-ink:#c7d2fe;
  --scheme:light;
}

/* ---------- Msingi ---------- */
html{ color-scheme:var(--scheme,dark); }
body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important; background:var(--page-bg) !important; background-attachment:fixed !important; color:var(--ink); font-size:14px; }
body::before{ content:""; position:fixed; left:0; right:0; bottom:0; height:46vh; background:var(--mtn) no-repeat bottom/100% 100%; pointer-events:none; z-index:0; }
.app{ position:relative; z-index:1; background:transparent; }
.main{ background:transparent; }
.content{ background:transparent; padding:8px 28px 28px; }
h1,h2,h3,h4,.box-header h2,.card-stat .num,.shortcuts .sc span,.modal-title{ font-family:'Poppins','Inter',sans-serif !important; }
a{ color:var(--link); } a:hover{ color:var(--ink); }
.text-muted,.help-block{ color:var(--muted) !important; }
hr{ border-color:var(--line); }
label{ color:var(--ink-soft); font-weight:500; }
select option{ background:var(--dd-bg); color:var(--dd-ink); }

/* ---------- Sidebar ---------- */
.sidebar{ background:var(--side-bg) !important; color:var(--side-ink); width:264px; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden; transition:width .22s ease; scrollbar-width:thin; z-index:5; }
.sidebar .logo{ background:transparent; color:#fff; border-bottom:1px solid var(--side-line); padding:18px 18px; display:flex; align-items:center; gap:10px; min-height:76px; }
.sidebar .logo img{ max-height:38px; max-width:44px; border-radius:10px; }
.sidebar .logo span{ font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.side-toggle{ background:var(--side-hover); border:none; color:var(--side-ink); width:34px; height:34px; border-radius:10px; cursor:pointer; flex-shrink:0; }
.side-toggle:hover{ background:rgba(255,255,255,.16); color:#fff; }
.sidebar .menu{ padding:10px 0 20px; }
.sidebar .menu .grp{ list-style:none; padding:16px 22px 6px; font-size:11px; letter-spacing:1.4px; font-weight:700; color:var(--side-soft); text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.sidebar .menu .grp i{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.sidebar .menu > li > a{ color:var(--side-ink); margin:2px 12px; padding:11px 14px; border-radius:14px; border-left:none !important; font-weight:500; display:flex; align-items:center; gap:10px; transition:background .15s,color .15s; }
.sidebar .menu > li > a .fa-fw{ width:22px; text-align:center; font-size:16px; color:var(--side-soft); margin:0; }
.sidebar .menu > li > a:hover{ background:var(--side-hover); color:#fff; }
.sidebar .menu > li > a:hover .fa-fw{ color:#fff; }
.sidebar .menu > li.active > a{ background:var(--side-active-bg); color:var(--side-active-ink); font-weight:600; }
.sidebar .menu > li.active > a .fa-fw{ color:var(--side-active-ink); }
.sidebar .menu .arr{ margin-left:auto; color:var(--side-soft); }
.sidebar .submenu{ background:rgba(0,0,0,.18); margin:0 12px 4px; border-radius:14px; }
.sidebar .submenu li a{ color:var(--side-soft); padding:9px 14px 9px 46px; display:block; border-radius:10px; }
.sidebar .submenu li a:hover{ background:var(--side-hover); color:#fff; }
.sidebar .submenu li.active a{ color:#fff; background:var(--side-hover); }
/* imekunjika */
html.side-collapsed .sidebar{ width:80px; }
html.side-collapsed .sidebar .mt, html.side-collapsed .sidebar .arr, html.side-collapsed .sidebar .grp span, html.side-collapsed .sidebar .logo span{ display:none; }
html.side-collapsed .sidebar .logo{ flex-direction:column; justify-content:center; padding:14px 0; gap:8px; }
html.side-collapsed .sidebar .menu > li > a{ justify-content:center; padding:12px 0; margin:3px 14px; }
html.side-collapsed .sidebar .grp{ justify-content:center; padding:12px 0 4px; }
html.side-collapsed .sidebar .submenu{ display:none !important; }

/* ---------- Topbar ---------- */
.topbar{ background:transparent !important; color:var(--top-ink); height:auto; min-height:76px; padding:18px 28px 12px; display:flex; align-items:center; gap:16px; box-shadow:none; }
.tb-search{ flex:1; max-width:460px; position:relative; margin:0; }
.tb-search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); }
.tb-search input{ width:100%; height:42px; border-radius:999px; border:1px solid var(--chip-line); background:var(--chip); color:var(--chip-ink); padding:0 16px 0 42px; outline:none; font-size:14px; }
.tb-search input::placeholder{ color:var(--muted); }
.tb-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(99,102,241,.18); }
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:12px; flex:none; }
.topbar .clock{ background:var(--chip); border:1px solid var(--chip-line); color:var(--chip-ink); padding:9px 14px; border-radius:999px; font-size:12.5px; white-space:nowrap; }
.tb-chip, .theme-dd .ts-toggle{ background:var(--chip); border:1px solid var(--chip-line); color:var(--chip-ink) !important; height:42px; min-width:42px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:13px; }
.tb-chip:hover, .theme-dd .ts-toggle:hover{ filter:brightness(1.15); text-decoration:none; color:var(--chip-ink); }
.user-dd .ud-toggle{ display:flex; align-items:center; gap:11px; color:var(--top-ink); padding:0; background:transparent; }
.user-dd .ud-toggle:hover{ text-decoration:none; color:var(--top-ink); }
.user-dd .uinfo{ text-align:right; line-height:1.25; }
.user-dd .uinfo b{ display:block; font-size:14px; font-weight:600; }
.user-dd .uinfo small{ color:var(--muted); font-size:12px; }
.user-dd .avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; overflow:hidden; box-shadow:0 8px 18px -8px rgba(0,0,0,.5); }
.user-dd .avatar img{ width:44px; height:44px; object-fit:cover; border-radius:50%; }
.dropdown-menu{ background:var(--dd-bg); border:1px solid var(--card-line); border-radius:14px; box-shadow:0 18px 44px -14px rgba(0,0,0,.55); overflow:hidden; margin-top:8px; padding:6px; }
.dropdown-menu > li > a{ color:var(--dd-ink); padding:10px 14px; border-radius:9px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{ background:var(--dd-hover); color:var(--ink); }
.dropdown-menu .divider{ background:var(--line); }
.theme-dd .dropdown-menu{ min-width:220px; }
.tsw{ display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:6px; vertical-align:-2px; border:1px solid rgba(255,255,255,.3); }
.tsw-indigo{ background:linear-gradient(135deg,#1d1d44,#6366f1); } .tsw-ocean{ background:linear-gradient(135deg,#0c2c30,#14b8a6); } .tsw-dark{ background:linear-gradient(135deg,#121722,#475569); } .tsw-light{ background:linear-gradient(135deg,#ffffff,#c7d2fe); border-color:#cbd5e1; }

/* ---------- Box / Kadi ---------- */
.box{ background:var(--card); border:1px solid var(--card-line); border-top:1px solid var(--card-line); border-radius:22px; box-shadow:var(--card-shadow); backdrop-filter:blur(6px); margin-bottom:22px; }
.box-header{ border-bottom:1px solid var(--line); padding:18px 24px; }
.box-header h2{ color:var(--head); font-weight:700; font-size:17px; letter-spacing:.2px; }
.box-content{ padding:24px; color:var(--ink); }
.well{ background:var(--input-bg); border:1px solid var(--line); color:var(--ink); border-radius:14px; box-shadow:none; }

/* ---------- Buttons ---------- */
.btn{ border-radius:12px; font-weight:600; border:none; padding-top:8px; padding-bottom:8px; transition:transform .12s, filter .12s; }
.btn:hover{ transform:translateY(-1px); }
.btn-xs{ border-radius:9px; padding:3px 9px; } .btn-sm{ border-radius:11px; }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#fff; box-shadow:0 10px 20px -10px rgba(0,0,0,.55); }
.btn-primary:hover,.btn-primary:focus{ filter:brightness(1.08); color:#fff; }
.btn-success{ background:linear-gradient(135deg,#22c55e,#15803d); color:#fff; }
.btn-danger{ background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; }
.btn-warning{ background:linear-gradient(135deg,#f59e0b,#b45309); color:#fff; }
.btn-info{ background:linear-gradient(135deg,#22a5c9,#0e7490); color:#fff; }
.btn-default{ background:var(--chip); color:var(--ink-soft); border:1px solid var(--chip-line); }
.btn-default:hover,.btn-default:focus{ background:var(--chip); color:var(--ink); border-color:var(--accent); }
.btn-success:hover,.btn-danger:hover,.btn-warning:hover,.btn-info:hover{ color:#fff; filter:brightness(1.08); }

/* ---------- Inputs ---------- */
.form-control{ border:1.5px solid var(--input-line); border-radius:12px; background:var(--input-bg); color:var(--ink); box-shadow:none; height:auto; padding:10px 14px; }
.form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(99,102,241,.18); background:var(--input-focus-bg); color:var(--ink); }
.form-control::placeholder{ color:var(--muted); }
.form-control[disabled],.form-control[readonly]{ background:var(--input-bg); opacity:.7; }
.input-group-addon{ border-radius:12px 0 0 12px; border:1.5px solid var(--input-line); background:var(--chip); color:var(--head); }
.checkbox label, .radio label{ color:var(--ink-soft); }

/* ---------- Jedwali (bila rangi za kuchanganya) ---------- */
.table{ color:var(--ink); background:transparent; }
.table > thead > tr > th, table.dataTable thead th, table.dataTable thead td{
  background:transparent !important; color:var(--thead-ink) !important; border-color:var(--line) !important; border-bottom:2px solid var(--line) !important;
  text-transform:uppercase; font-size:11px; letter-spacing:.5px; font-weight:700; vertical-align:middle; padding:14px 12px; }
.table > tbody > tr > td, .table > tbody > tr > th{ background:transparent; border-color:var(--line); padding:13px 12px; vertical-align:middle; }
.table-bordered{ border-color:var(--line); } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td{ border-color:var(--line); }
.table-hover > tbody > tr:hover > td{ background:var(--row-hover); }
.table-striped > tbody > tr:nth-of-type(odd) > td{ background:transparent; }
.table > tbody > tr.row-overdue > td, .table > tbody > tr.row-paid > td{ background:transparent !important; }
table.dataTable.no-footer{ border-bottom:1px solid var(--line); }

/* ---------- Labels / Alerts ---------- */
.label{ border-radius:999px; padding:.34em .8em; font-weight:700; font-size:11px; }
.label-success{ background:rgba(34,197,94,.18); color:var(--ok-ink); }
.label-danger{ background:rgba(239,68,68,.18); color:var(--bad-ink); }
.label-warning{ background:rgba(245,158,11,.2); color:var(--warn-ink); }
.label-info{ background:rgba(59,130,246,.2); color:var(--info-ink); }
.label-primary{ background:rgba(99,102,241,.22); color:var(--link); }
.label-default{ background:rgba(148,163,184,.2); color:var(--def-ink); }
.alert{ border-radius:14px; border:1px solid; font-weight:500; }
.alert-success{ background:rgba(34,197,94,.14); color:var(--ok-ink); border-color:rgba(34,197,94,.35); }
.alert-danger{ background:rgba(239,68,68,.14); color:var(--bad-ink); border-color:rgba(239,68,68,.35); }
.alert-warning{ background:rgba(245,158,11,.15); color:var(--warn-ink); border-color:rgba(245,158,11,.38); }
.alert-info{ background:rgba(59,130,246,.14); color:var(--info-ink); border-color:rgba(59,130,246,.35); }
.alert a{ color:inherit; text-decoration:underline; }
.text-danger{ color:var(--bad-ink) !important; } .text-success{ color:var(--ok-ink) !important; }

/* ---------- Kadi za takwimu (kama NMB: kichwa juu, namba kubwa chini) ---------- */
.cards{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:22px; }
.card-stat{ position:relative; flex:1; min-width:210px; background:var(--card); border:1px solid var(--card-line); border-radius:20px; padding:22px 22px 20px; color:var(--ink); box-shadow:var(--card-shadow); display:flex; flex-direction:column-reverse; gap:6px; overflow:hidden; backdrop-filter:blur(6px); }
.card-stat::before{ content:""; position:absolute; left:0; top:22px; width:3px; height:34px; border-radius:0 3px 3px 0; background:var(--stripe); }
.card-stat .lbl{ font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-soft); font-weight:600; opacity:1; padding-right:46px; line-height:1.4; }
.card-stat .num{ font-size:28px; font-weight:700; color:var(--ink); line-height:1.15; margin-top:4px; }
.card-stat .cs-ico{ position:absolute; right:18px; top:18px; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; box-shadow:0 10px 20px -10px rgba(0,0,0,.55); }
.bg-blue,.bg-green,.bg-red,.bg-yellow{ background:var(--card) !important; }
.bg-blue .cs-ico{ background:linear-gradient(135deg,#38bdf8,#2563eb); } .bg-green .cs-ico{ background:linear-gradient(135deg,#34d399,#0d9488); }
.bg-red .cs-ico{ background:linear-gradient(135deg,#fb7185,#be123c); } .bg-yellow .cs-ico{ background:linear-gradient(135deg,#c084fc,#7c3aed); }

/* ---------- Njia za mkato (duara za rangi + jina) ---------- */
.shortcuts{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.shortcuts .sc{ flex:1; min-width:150px; background:var(--card); border:1px solid var(--card-line); border-radius:20px; padding:20px 12px 16px; text-align:center; color:var(--ink); box-shadow:var(--card-shadow); transition:transform .12s, border-color .12s; }
.shortcuts .sc:hover{ transform:translateY(-3px); border-color:var(--accent); color:var(--ink); text-decoration:none; opacity:1; }
.shortcuts .sc i{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:22px; color:#fff; box-shadow:0 12px 22px -10px rgba(0,0,0,.6); }
.shortcuts .sc span{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.sc-blue,.sc-teal,.sc-red,.sc-purple,.sc-green,.sc-orange{ background:var(--card); }
.sc-blue i{ background:linear-gradient(135deg,#6366f1,#4338ca); } .sc-teal i{ background:linear-gradient(135deg,#2dd4bf,#0d9488); } .sc-red i{ background:linear-gradient(135deg,#fb7185,#be123c); }
.sc-purple i{ background:linear-gradient(135deg,#c084fc,#7c3aed); } .sc-green i{ background:linear-gradient(135deg,#34d399,#059669); } .sc-orange i{ background:linear-gradient(135deg,#fb923c,#ea580c); }

/* ---------- Footer ---------- */
.footer{ background:var(--foot) !important; color:var(--foot-ink) !important; font-weight:500; letter-spacing:.2px; }
.footer a{ color:var(--foot-ink); }

/* ---------- Modals ---------- */
.modal-content{ border:1px solid var(--card-line); border-radius:22px; box-shadow:0 26px 70px -18px rgba(0,0,0,.65); overflow:hidden; background:var(--modal-bg); color:var(--ink); }
.modal-header{ background:var(--input-bg); border-bottom:1px solid var(--line); }
.modal-footer{ border-top:1px solid var(--line); }
.modal-title{ color:var(--head); }
.close{ color:var(--ink); text-shadow:none; opacity:.6; }

/* ---------- DataTables / Pagination ---------- */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{ border:1.5px solid var(--input-line); border-radius:10px; padding:6px 12px; background:var(--input-bg); color:var(--ink); height:auto; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length{ color:var(--ink-soft); font-weight:500; }
.pagination > li > a, .pagination > li > span{ color:var(--link); border-radius:10px !important; margin:0 2px; border:1px solid var(--line); background:var(--chip); }
.pagination > li > a:hover{ background:var(--row-hover); color:var(--ink); border-color:var(--line); }
.pagination > .active > a,.pagination > .active > a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pagination > .disabled > a{ background:transparent; color:var(--muted); border-color:var(--line); }

/* ---------- Autocomplete ya wateja ---------- */
.cust-ac-menu{ background:var(--dd-bg); border:1px solid var(--card-line); border-radius:14px; box-shadow:0 18px 44px -14px rgba(0,0,0,.55); }
.cust-ac-item{ border-bottom:1px solid var(--line); }
.cust-ac-item:hover{ background:var(--dd-hover); }
.cust-ac-item b{ color:var(--ink); } .cust-ac-item span{ color:var(--muted); }

/* ---------- Hali tupu ---------- */
.empty-state{ text-align:center; padding:34px 16px 28px; }
.empty-state svg{ width:130px; height:auto; margin:0 auto 6px; display:block; }
.empty-state .es-bg{ fill:var(--accent); opacity:.16; }
.empty-state .es-main{ fill:var(--accent); }
.empty-state .es-text{ color:var(--muted); font-size:14.5px; font-weight:500; }



/* =====================================================================
 |  v3.1 - Fomu, chini ya ukurasa, na vipengele vidogo
 ===================================================================== */
/* safu nzima (tr) isiwe nyeupe - Bootstrap huweka rangi kwenye <tr> */
.table-striped > tbody > tr:nth-of-type(odd), .table > tbody > tr, .table-hover > tbody > tr:hover, .table > tbody > tr > td.text-center.text-muted{ background:transparent !important; }
.table > tbody > tr.row-overdue, .table > tbody > tr.row-paid{ background:transparent !important; }

/* chaguo (checkbox/radio) zifuate rangi ya theme */
input[type=checkbox], input[type=radio]{ accent-color:var(--accent); width:16px; height:16px; vertical-align:-3px; margin-right:4px; }
.checkbox-inline, .radio-inline{ color:var(--ink-soft); }

/* faili na rangi */
input[type=file].form-control{ padding:7px 10px; line-height:1.6; color:var(--ink-soft); }
input[type=file]::file-selector-button{ background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#fff; border:none; border-radius:9px; padding:6px 14px; margin-right:12px; font-weight:600; cursor:pointer; }
input[type=color].form-control{ padding:4px 6px; height:42px; cursor:pointer; }
textarea.form-control{ min-height:90px; }
select.form-control{ cursor:pointer; }
.form-control-static{ color:var(--ink); }
.form-group{ margin-bottom:18px; }
legend{ color:var(--head); border-bottom:1px solid var(--line); }

/* code / pre */
code, kbd, pre{ background:var(--input-bg); color:var(--warn-ink); border:1px solid var(--line); border-radius:7px; padding:2px 7px; font-size:12.5px; }
html[data-theme="light"] code{ color:#be185d; background:#fdf2f8; border-color:#fbcfe8; }

/* kalenda ya input type=date iwe nyeupe kwenye giza */
html:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator{ filter:invert(.85); cursor:pointer; }

/* kichwa kidogo ndani ya fomu */
.box-content h4, .box-content h5{ color:var(--head); font-weight:700; }
.box-content p{ color:var(--ink-soft); }
.box-content b, .box-content strong{ color:var(--ink); }

/* nambari za amana (customers/view) zisomeke kwenye giza */
html:not([data-theme="light"]) td[style*="#b91c1c"]{ color:var(--bad-ink) !important; }
html:not([data-theme="light"]) td[style*="#166534"]{ color:var(--ok-ink) !important; }

/* vitufe vya fomu viwe na nafasi */
form .btn + .btn{ margin-left:6px; }
.box-content > form > .btn, .box-content form .btn-primary{ min-width:120px; }

/* ---------- Chini ya ukurasa (footer) ---------- */
.main{ min-height:100vh; }
.footer{ margin-top:auto; padding:16px 24px; font-size:13px; border-top:1px solid rgba(255,255,255,.08); text-align:center; }
html[data-theme="light"] .footer{ border-top:none; }
body::before{ height:40vh; }
::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:10px; border:3px solid transparent; background-clip:content-box; }
html[data-theme="light"] ::-webkit-scrollbar-thumb{ background-color:rgba(100,116,139,.35); }


/* =====================================================================
 |  v4 - Ung'arishaji wa kitaalamu: meza, vitufe vya ikoni, sidebar, footer
 ===================================================================== */
:root{ --r-lg:22px; --r-md:14px; --r-sm:10px; --hair:rgba(255,255,255,.07); --glow:rgba(99,102,241,.35); }
html[data-theme="ocean"]{ --glow:rgba(20,184,166,.35); }
html[data-theme="light"]{ --hair:#eceff5; --glow:rgba(79,70,229,.25); }
body{ font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased; letter-spacing:-.003em; }
.content{ max-width:1500px; width:100%; }
.table td, .table th, .card-stat .num, .money-input{ font-variant-numeric:tabular-nums; }

/* ---------- Kadi: mwanga mwembamba juu (inset), kina ---------- */
.box, .card-stat, .shortcuts .sc{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--card-shadow); }
html[data-theme="light"] .box, html[data-theme="light"] .card-stat, html[data-theme="light"] .shortcuts .sc{ box-shadow:var(--card-shadow); }
.box-header{ border-bottom:1px solid var(--hair); }
.box-header h2{ display:flex; align-items:center; gap:10px; font-size:16.5px; letter-spacing:-.01em; }
.box-header h2 .fa{ width:34px; height:34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:rgba(99,102,241,.16); color:var(--link); font-size:17px; vertical-align:middle; }
html[data-theme="ocean"] .box-header h2 .fa{ background:rgba(20,184,166,.16); }
html[data-theme="light"] .box-header h2 .fa{ background:#eef2ff; color:var(--accent-strong); }

/* ---------- Jedwali / orodha: mistari laini ya mlalo tu ---------- */
.table-responsive{ border:none; margin:0; overflow-x:auto; }
.table, .table-bordered{ border:none !important; border-collapse:separate; border-spacing:0; margin-bottom:0; }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th{ border-left:none !important; border-right:none !important; }
.table > thead > tr > th, table.dataTable thead th, table.dataTable thead td{
  text-transform:none; font-size:12.5px; letter-spacing:0; font-weight:600; color:var(--muted) !important;
  background:rgba(255,255,255,.03) !important; border-top:none !important; border-bottom:1px solid var(--hair) !important; padding:12px 14px; white-space:nowrap; }
html[data-theme="light"] .table > thead > tr > th, html[data-theme="light"] table.dataTable thead th{ background:#f7f9fc !important; }
.table > thead > tr > th:first-child{ border-top-left-radius:12px; } .table > thead > tr > th:last-child{ border-top-right-radius:12px; }
.table > tbody > tr > td, .table > tbody > tr > th{ border-top:none !important; border-bottom:1px solid var(--hair) !important; padding:14px 14px; color:var(--ink); }
.table > tbody > tr:last-child > td{ border-bottom:none !important; }
.table-hover > tbody > tr > td{ transition:background .12s; }
.table-hover > tbody > tr:hover > td{ background:var(--row-hover) !important; }
.table-hover > tbody > tr:hover > td:first-child{ border-radius:12px 0 0 12px; } .table-hover > tbody > tr:hover > td:last-child{ border-radius:0 12px 12px 0; }
table.dataTable.no-footer{ border-bottom:none; }
.table a{ font-weight:500; }
.table td.text-right b, .table td b{ font-weight:600; }

/* ---------- Hali (labels): vibonge na nukta ---------- */
.label{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; letter-spacing:0; line-height:1.2; }
.label::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }

/* ---------- Vitufe vidogo vya vitendo = vigae vya ikoni ---------- */
.btn-xs{ width:32px; height:32px; padding:0 !important; border-radius:10px !important; display:inline-flex; align-items:center; justify-content:center; font-size:14px; margin:0 2px; box-shadow:none !important; }
.btn-xs .fa{ font-size:16px; vertical-align:0; }
.btn-xs.btn-success{ background:rgba(34,197,94,.16); color:var(--ok-ink); }
.btn-xs.btn-info{ background:rgba(59,130,246,.18); color:var(--info-ink); }
.btn-xs.btn-warning{ background:rgba(245,158,11,.18); color:var(--warn-ink); }
.btn-xs.btn-danger{ background:rgba(239,68,68,.16); color:var(--bad-ink); }
.btn-xs.btn-default{ background:var(--chip); color:var(--ink-soft); }
.btn-xs.btn-primary{ background:rgba(99,102,241,.2); color:var(--link); }
.btn-xs.btn-success:hover{ background:#16a34a; color:#fff; } .btn-xs.btn-info:hover{ background:#2563eb; color:#fff; }
.btn-xs.btn-warning:hover{ background:#d97706; color:#fff; } .btn-xs.btn-danger:hover{ background:#dc2626; color:#fff; }
.btn-xs.btn-primary:hover{ background:var(--accent); color:#fff; } .btn-xs:hover{ filter:none; transform:translateY(-1px); }
html[data-theme="light"] .btn-xs.btn-success{ background:#dcfce7; } html[data-theme="light"] .btn-xs.btn-info{ background:#dbeafe; }
html[data-theme="light"] .btn-xs.btn-warning{ background:#fef3c7; } html[data-theme="light"] .btn-xs.btn-danger{ background:#fee2e2; }
.btn .fa{ margin-right:2px; }
.btn-xs .fa{ margin:0; }

/* ---------- Vitufe vikubwa: tulivu, nzuri ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 18px; font-size:13.5px; letter-spacing:0; }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn-block{ display:flex; }
.btn-primary{ box-shadow:0 8px 20px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-default{ background:transparent; border:1px solid var(--chip-line); }

/* ---------- Sidebar: ikoni kwenye vigae, kiashiria cha kushoto ---------- */
.sidebar .menu > li > a{ position:relative; padding:8px 12px; gap:12px; }
.sidebar .menu > li > a .fa-fw{ width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); font-size:18px; color:var(--side-soft); transition:background .15s,color .15s; flex-shrink:0; }
.sidebar .menu > li > a:hover .fa-fw{ background:rgba(255,255,255,.12); color:#fff; }
.sidebar .menu > li.active > a{ background:transparent; box-shadow:none; }
.sidebar .menu > li.active > a .fa-fw{ background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#fff; box-shadow:0 8px 18px -8px var(--glow); }
.sidebar .menu > li.active > a::before{ content:""; position:absolute; left:-12px; top:10px; bottom:10px; width:4px; border-radius:0 4px 4px 0; background:var(--side-active-ink); }
.sidebar .menu > li.active > a, .sidebar .menu > li.active > a .mt{ color:#fff; }
.sidebar .menu .arr .fa, .sidebar .menu .arr{ font-size:15px; }
.sidebar .menu .grp{ text-transform:none; letter-spacing:.2px; font-size:12px; font-weight:600; padding:18px 24px 6px; color:var(--side-soft); }
.sidebar .menu .grp i{ width:6px; height:6px; }
.sidebar .submenu{ background:transparent; margin:0 12px 6px 30px; padding-left:12px; border-left:1px solid rgba(255,255,255,.10); border-radius:0; }
.sidebar .submenu li a{ padding:8px 12px; border-radius:9px; font-size:13.5px; }
html.side-collapsed .sidebar .menu > li > a{ padding:6px 0; } html.side-collapsed .sidebar .menu > li.active > a::before{ left:-14px; }
.side-toggle .fa{ font-size:18px; }

/* ---------- Topbar ---------- */
.tb-search input{ height:44px; background:var(--chip); }
.tb-search .fa{ font-size:17px; }
.tb-chip, .theme-dd .ts-toggle{ height:44px; min-width:44px; }
.tb-chip .fa, .theme-dd .ts-toggle .fa, .topbar .clock .fa{ font-size:17px; }
.topbar .clock{ display:inline-flex; align-items:center; gap:8px; height:44px; }
.user-dd .avatar{ width:44px; height:44px; box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 8px 18px -8px rgba(0,0,0,.6); }
.dropdown-menu > li > a .fa{ margin-right:8px; font-size:16px; color:var(--muted); }

/* ---------- Kadi za takwimu: ikoni kubwa ya kigae ---------- */
.card-stat .lbl{ text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:500; color:var(--ink-soft); }
.card-stat .num{ font-size:30px; font-weight:700; letter-spacing:-.02em; }
.card-stat .cs-ico{ width:44px; height:44px; font-size:21px; border-radius:14px; }
.card-stat::before{ display:none; }
.shortcuts .sc i.fa{ font-size:24px; }
.shortcuts .sc span{ font-size:13.5px; }

/* ---------- Fomu ---------- */
label{ font-size:13px; margin-bottom:7px; }
.form-control{ height:46px; padding:0 14px; } textarea.form-control{ height:auto; padding:12px 14px; }
.form-control:hover{ border-color:rgba(255,255,255,.26); } html[data-theme="light"] .form-control:hover{ border-color:#cbd5e1; }
.input-group-addon{ height:46px; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{ height:40px; border-radius:12px; }
.dataTables_wrapper .dataTables_filter input{ min-width:220px; }
.dataTables_wrapper .row:first-child{ margin-bottom:14px; }

/* ---------- Footer: bila mstari wala boksi - maandishi tulivu tu ---------- */
.footer{ background:transparent !important; border:none !important; box-shadow:none !important; color:var(--muted) !important; font-weight:400; font-size:12.5px; padding:22px 24px 26px; letter-spacing:.1px; }
.footer a{ color:var(--ink-soft) !important; }
html[data-theme="light"] .footer{ color:#8a96a8 !important; }

/* ---------- Hali tupu ---------- */
.empty-state{ padding:42px 16px 34px; } .empty-state .es-text{ font-size:14px; }
.sidebar .menu > li > a{ padding:5px 12px; margin:1px 12px; }
.sidebar .menu > li > a .fa-fw{ width:34px; height:34px; font-size:17px; }
.sidebar .menu .grp{ padding:14px 24px 4px; }


/* =====================================================================
 |  v5 - Majedwali yanabana dirishani, safu inabonyezeka, sidebar bila scrollbar
 ===================================================================== */
/* Sidebar: bila scrollbar kabisa (bado inasogea kwa gurudumu/kidole) */
.sidebar{ scrollbar-width:none; -ms-overflow-style:none; }
.sidebar::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Hakuna maneno yenye mstari chini kwenye orodha */
.table a:not(.btn), .table a:not(.btn):hover, .table a:not(.btn):focus{ text-decoration:none; }
.cell-name{ font-weight:600; color:var(--ink); }
tr[data-href]{ cursor:pointer; }
tr[data-href]:hover .cell-name{ color:var(--link); }

/* Jedwali: bila kuscroll pembeni, nafasi ndogo kidogo, maandishi yanajifunga */
.box-content{ overflow:visible; }
.table-responsive{ overflow-x:visible !important; border:none; width:100%; min-height:.01%; }
.table{ width:100% !important; table-layout:auto; }
.table > thead > tr > th{ padding:11px 10px; white-space:nowrap; }
.table > tbody > tr > td{ padding:11px 10px; white-space:normal; word-break:break-word; }
.table > tbody > tr > td:last-child{ white-space:nowrap; word-break:normal; }
/* Vitendo: mlalo (horizontal) na vidogo */
.table td .btn-xs{ width:30px; height:30px; margin:0 1px; }
.table td:last-child{ text-align:left; }
.table td:last-child .btn-xs + .btn-xs{ margin-left:3px; }

/* DataTables Responsive: kiashiria cha "+" na safu za ziada */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control{ padding-left:34px !important; position:relative; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before{
  content:"+"; position:absolute; left:8px; top:50%; transform:translateY(-50%); height:20px; width:20px; line-height:19px; border-radius:7px; border:none !important; box-shadow:none !important;
  background:rgba(99,102,241,.22); color:var(--link); font-weight:700; font-size:15px; text-align:center; font-family:'Inter',sans-serif; display:block; }
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before{ content:"–"; background:var(--accent); color:#fff; }
html[data-theme="light"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before{ background:#e0e7ff; }
table.dataTable > tbody > tr.child{ background:transparent !important; }
table.dataTable > tbody > tr.child td.child{ padding:6px 14px 16px 34px !important; background:rgba(255,255,255,.03); border-bottom:1px solid var(--hair) !important; }
html[data-theme="light"] table.dataTable > tbody > tr.child td.child{ background:#f7f9fc; }
table.dataTable > tbody > tr.child ul.dtr-details{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 22px; width:100%; margin:0; padding:0; }
table.dataTable > tbody > tr.child ul.dtr-details > li{ border:none !important; padding:6px 0 !important; display:flex; gap:8px; align-items:baseline; }
table.dataTable > tbody > tr.child span.dtr-title{ min-width:auto; color:var(--muted); font-weight:500; font-size:12.5px; }
table.dataTable > tbody > tr.child span.dtr-title::after{ content:":"; }
table.dataTable > tbody > tr.child span.dtr-data{ color:var(--ink); }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before{ opacity:.35; color:var(--ink-soft); }
.tb-search{ min-width:0; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before{ top:50%; margin-top:-10px; transform:none; }
@media (max-width:1100px){ .topbar .clock{ display:none; } .tb-search{ flex:1 1 140px; } }
@media (max-width:900px){ .user-dd .uinfo{ display:none; } .content{ padding-left:16px; padding-right:16px; } }


/* =====================================================================
 |  v6 - Gridi inayoonekana (wima + mlalo) kwenye themes zote, vichwa visigongane
 ===================================================================== */
:root{ --grid:rgba(255,255,255,.15); --grid-soft:rgba(255,255,255,.09); }
html[data-theme="light"]{ --grid:#d5dce8; --grid-soft:#e6ebf3; }

.table-responsive{ border:1px solid var(--grid); border-radius:14px; overflow:hidden !important; }
.table, .table-bordered{ border-collapse:collapse !important; border:none !important; }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table > thead > tr > th, .table > tbody > tr > td, table.dataTable thead th, table.dataTable thead td{
  border:1px solid var(--grid) !important; }
.table > thead > tr > th:first-child, .table > tbody > tr > td:first-child{ border-left:none !important; }
.table > thead > tr > th:last-child, .table > tbody > tr > td:last-child{ border-right:none !important; }
.table > thead > tr:first-child > th{ border-top:none !important; }
.table > tbody > tr:last-child > td{ border-bottom:none !important; }
.table > thead > tr > th{ border-bottom:1px solid var(--grid) !important; }
.table > thead > tr > th:first-child, .table > thead > tr > th:last-child{ border-radius:0; }
.table-hover > tbody > tr:hover > td:first-child, .table-hover > tbody > tr:hover > td:last-child{ border-radius:0; }
table.dataTable.no-footer{ border-bottom:none; }
table.dataTable > tbody > tr.child td.child{ border:none !important; border-top:1px solid var(--grid-soft) !important; }

/* Vichwa vya safu: visigongane na mishale ya kupanga */
.table > thead > tr > th{ white-space:nowrap; padding:12px 26px 12px 12px !important; line-height:1.3; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{ padding-right:28px !important; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after{ right:9px; }
.table > thead > tr > th.text-right{ text-align:right; padding-right:28px !important; }
.table > thead > tr > th.text-center{ text-align:center; }

/* Kiasi cha fedha kiwe mstari mmoja kila mara */
.table td.text-right, .table th.text-right, .table td b, .table .money, td.nowrap{ white-space:nowrap !important; }
.table td.text-center{ white-space:nowrap; }

/* Idadi ndogo kwenye kichwa cha kisanduku */
.count-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 9px; margin-left:8px; border-radius:999px; font-size:12.5px; font-weight:700; background:rgba(99,102,241,.2); color:var(--link); font-family:'Inter',sans-serif; }
.count-pill.ok{ background:rgba(34,197,94,.18); color:var(--ok-ink); }
html[data-theme="light"] .count-pill{ background:#e0e7ff; } html[data-theme="light"] .count-pill.ok{ background:#dcfce7; }
.box-header h2 .count-pill{ vertical-align:middle; }

/* Sampuli ya kupakua kwenye kurasa za Import */
.sample-dl{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 18px; margin:6px 0 22px; border:1px dashed var(--grid); border-radius:16px; background:rgba(99,102,241,.08); }
.sample-dl > .fa{ width:44px; height:44px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; background:rgba(99,102,241,.2); color:var(--link); flex-shrink:0; }
.sample-dl > div:nth-child(2){ flex:1; min-width:220px; line-height:1.5; }
.sample-dl .sample-btns{ display:flex; gap:8px; }

/* v7: filter chips + no wrapping inside rows (only the name may wrap) */
.filter-btns{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.filter-btns .btn-xs{ width:auto !important; height:34px; padding:0 16px !important; margin:0; border-radius:999px !important; font-size:13px; font-weight:600; white-space:nowrap; }
.table > tbody > tr > td, .table > thead > tr > th{ white-space:nowrap !important; }
.table > tbody > tr > td.cell-name{ white-space:normal !important; min-width:120px; word-break:break-word; }
.table > tbody > tr > td.child{ white-space:normal !important; }
.table > tbody > tr > td.child *{ white-space:normal; }

/* v8: SMS customer picker */
.pk{ border:1px solid var(--grid); border-radius:14px; overflow:hidden; background:transparent; }
.pk-bar{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-bottom:1px solid var(--grid); }
.pk-search{ position:relative; flex:1; }
.pk-search .fa{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.6; }
.pk-search input{ width:100%; height:38px; border-radius:999px; border:1px solid var(--chip-line); background:var(--chip); color:var(--chip-ink); padding:0 14px 0 36px; outline:none; font-size:13.5px; }
.pk-search input:focus{ border-color:var(--accent); }
.pk-act{ font-size:12.5px; font-weight:600; white-space:nowrap; }
.pk-list{ max-height:340px; overflow-y:auto; }
.pk-row{ display:flex; align-items:center; gap:12px; margin:0; padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--grid-soft); font-weight:500; transition:background .12s; }
.pk-row:last-of-type{ border-bottom:none; }
.pk-row:hover{ background:var(--chip); }
.pk-row.on{ background:rgba(99,102,241,.16); }
.pk-row input{ position:absolute; opacity:0; pointer-events:none; }
.pk-box{ width:22px; height:22px; border-radius:7px; border:1.5px solid var(--chip-line); display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; color:transparent; font-size:12px; background:var(--chip); }
.pk-row.on .pk-box{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pk-name{ flex:1; min-width:0; color:var(--ink); }
.pk-name small{ display:block; font-size:11.5px; opacity:.65; font-weight:400; }
.pk-ph{ white-space:nowrap; font-variant-numeric:tabular-nums; opacity:.8; font-size:13px; }
.pk-none{ padding:18px; text-align:center; opacity:.7; }
.pk-foot{ padding:10px 14px; border-top:1px solid var(--grid); font-size:12.5px; }
.pk-hint{ opacity:.6; }

/* v9: sidebar pinned to the window (no gap while scrolling) */
html, body{ min-height:100%; background:var(--page-bg); }
.sidebar{ position:fixed !important; top:0; left:0; bottom:0; height:auto !important; }
.main{ margin-left:264px; min-width:0; width:calc(100% - 264px); min-height:100vh; }
html.side-collapsed .main{ margin-left:80px; width:calc(100% - 80px); }

/* v10: hidden checkboxes of the SMS picker must stay inside their row (they stretched the page) */
.pk-list{ position:relative; }
.pk-row{ position:relative; }
.pk-row input{ left:0; top:0; width:1px; height:1px; }

/* v11: sidebar always scrolls (no visible bar) when the window is short */
.sidebar{ position:fixed !important; top:0 !important; left:0; bottom:auto !important; height:100vh !important; height:100dvh !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.sidebar::-webkit-scrollbar{ width:0; height:0; display:none; }
.sidebar .menu{ padding-bottom:40px; }

/* v12: autocomplete ya wateja - safi, imara, haipitwi na kitu */
.cust-ac-wrap{ position:relative; }
.cust-ac-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:3000; background:var(--modal-bg,var(--dd-bg)) !important; border:1px solid var(--card-line); border-radius:16px; box-shadow:0 22px 50px -12px rgba(0,0,0,.6); max-height:292px; overflow-y:auto; padding:6px; -webkit-overflow-scrolling:touch; }
.cust-ac-item{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; border:0 !important; border-radius:11px; cursor:pointer; }
.cust-ac-item b{ font-size:14.5px; font-weight:600; line-height:1.25; }
.cust-ac-item span{ font-size:12.5px; line-height:1.25; }
.cust-ac-item:hover,.cust-ac-item.act{ background:var(--dd-hover,rgba(255,255,255,.08)); }
.dcards{ display:none; }

/* v13: kitufe kimoja cha "Vitendo" + dropdown, safu za Deni/Kimelipwa/Bakaa, malipo kwa mstari mmoja */
.act-btn{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.2px; cursor:pointer; box-shadow:0 8px 16px -10px rgba(0,0,0,.55); white-space:nowrap; }
.act-btn:hover,.act-btn.is-open{ filter:brightness(1.1); }
.act-btn .fa{ font-size:12px; opacity:.9; }
.act-menu{ position:fixed; z-index:2600; display:none; min-width:210px; background:var(--modal-bg); color:var(--ink); border:1px solid var(--card-line); border-radius:16px; box-shadow:0 24px 54px -14px rgba(0,0,0,.65); padding:6px; }
.act-menu.open{ display:block; }
.act-menu .am-head{ display:flex; flex-direction:column; padding:9px 12px 10px; margin-bottom:4px; border-bottom:1px solid var(--card-line); }
.act-menu .am-head span{ font-weight:700; font-size:14px; max-width:230px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-menu .am-head small{ color:var(--muted); font-size:12px; }
.act-menu .am-i{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; color:var(--ink); font-weight:500; font-size:14px; text-decoration:none; }
.act-menu .am-i i{ width:20px; text-align:center; font-size:15px; color:var(--muted); }
.act-menu .am-i:hover{ background:var(--dd-hover,rgba(255,255,255,.08)); color:var(--ink); text-decoration:none; }
.act-menu .am-pay i{ color:#22c55e; } .act-menu .am-del,.act-menu .am-del i{ color:#f87171; }
.act-bk{ display:none; }
.debts-table td.amt-paid{ color:#4ade80; }
html[data-theme="light"] .debts-table td.amt-paid,html[data-theme="light"] .amt-paid{ color:#15803d; }
.amt-bal.due{ color:#fb7185; } html[data-theme="light"] .amt-bal.due{ color:#dc2626; } .amt-bal.clear{ color:var(--muted); }
.debts-table td,.debts-table th{ white-space:nowrap; }
/* malipo kwa mstari mmoja (kwenye "+") */
.paylist,.dc-pays{ display:flex; flex-wrap:nowrap; align-items:center; gap:8px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
.paylist::-webkit-scrollbar,.dc-pays::-webkit-scrollbar{ display:none; }
td.paylist{ display:table-cell; }
.pl-i{ display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:999px; background:var(--chip,rgba(255,255,255,.08)); border:1px solid var(--card-line); font-size:12.5px; flex:0 0 auto; }
.pl-i i{ font-style:normal; color:var(--muted); } .pl-i b{ color:#4ade80; font-weight:700; } .pl-i u{ text-decoration:none; color:var(--muted); font-size:11.5px; }
html[data-theme="light"] .pl-i b{ color:#15803d; }
.pl-tot{ margin-left:auto; padding-left:10px; font-size:12.5px; color:var(--muted); flex:0 0 auto; } .pl-tot b{ color:var(--ink); }
.pl-none{ color:var(--muted); font-size:12.5px; font-style:italic; }
table.dataTable > tbody > tr.child ul.dtr-details > li{ display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--card-line); padding:7px 0; }
table.dataTable > tbody > tr.child span.dtr-title{ min-width:150px; font-weight:600; color:var(--muted); flex:0 0 auto; }
table.dataTable > tbody > tr.child span.dtr-data{ min-width:0; flex:1; overflow:hidden; }
.child-box{ padding:6px 4px 8px; }
.child-box .ch-pay{ display:flex; align-items:center; gap:14px; }
.child-box .ch-pay > em{ font-style:normal; font-weight:700; font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); flex:0 0 auto; }
.child-box .ch-pay .paylist{ flex:1; min-width:0; display:flex; padding:2px 0; }
.child-box .ch-rest{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--card-line); font-size:13px; }
.child-box .ch-pair em{ font-style:normal; color:var(--muted); margin-right:7px; font-size:12px; }
table.dataTable > tbody > tr.child td.child{ white-space:normal; padding:8px 14px; }
.nt-ico{ display:none; }
/* "+" haipanui jedwali: malipo mengi huscroll ndani ya mstari mmoja, "Jumla" hubaki kuonekana kulia */
table.dataTable > tbody > tr.child > td.child{ padding:0 !important; }
.child-box{ width:0; min-width:100%; box-sizing:border-box; padding:8px 14px 10px; }
.child-box .ch-pay{ min-width:0; }
.child-box .ch-pay .paylist{ min-width:0; overflow-x:auto; }
.paylist .pl-tot{ position:sticky; right:0; margin-left:auto; padding:3px 0 3px 14px; background:linear-gradient(90deg,transparent,var(--modal-bg) 22%); }

/* Namba nyembamba + kialama cha siku (+/-) */
.debts-table th:first-child,.debts-table td:first-child{ width:1% !important; min-width:50px; max-width:64px; padding-left:8px !important; padding-right:6px !important; }
.debts-table th:first-child:before,.debts-table th:first-child:after{ display:none !important; }
.dchip{ display:inline-block; min-width:34px; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.3; text-align:center; margin-left:4px; }
.dchip.left{ background:rgba(34,197,94,.16); color:#4ade80; border:1px solid rgba(34,197,94,.35); }
.dchip.over{ background:rgba(239,68,68,.16); color:#fb7185; border:1px solid rgba(239,68,68,.38); }
html[data-theme="light"] .dchip.left{ color:#15803d; } html[data-theme="light"] .dchip.over{ color:#dc2626; }
table.dataTable.debts-table > thead > tr > th:first-child{ padding-left:8px !important; padding-right:4px !important; width:1% !important; }
table.dataTable.dtr-inline.collapsed.debts-table > tbody > tr > td:first-child{ padding-left:30px !important; padding-right:6px !important; width:1% !important; }
table.dataTable.dtr-inline.collapsed.debts-table > tbody > tr > td:first-child:before{ left:6px !important; }
table.dataTable.debts-table > thead > tr > th:nth-child(2){ width:34% !important; }
table.dataTable.debts-table > thead > tr > th:first-child,table.dataTable.debts-table > tbody > tr > td:first-child{ min-width:0 !important; max-width:none !important; }

/* ---------- v14: maelezo ya juu + vidhibiti vya jedwali ---------- */
.note-box{ display:flex; gap:12px; align-items:flex-start; background:var(--chip); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; padding:12px 16px; margin:0 0 16px; color:var(--ink-soft); font-size:13.5px; line-height:1.55; }
.note-box .nb-ico{ color:var(--accent); font-size:18px; margin-top:2px; flex:0 0 auto; }
.note-box ul{ list-style:none; margin:0; padding:0; min-width:0; }
.note-box li{ margin:0 0 4px; } .note-box li:last-child{ margin:0; }
.note-box b{ color:var(--ink); }
p.note-line{ background:var(--chip); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; padding:10px 14px; line-height:1.55; font-size:13.5px; margin:0 0 12px !important; }
.dataTables_wrapper > .row:first-child{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px; }
.dataTables_wrapper > .row:first-child:before,.dataTables_wrapper > .row:first-child:after{ display:none; }
.dataTables_wrapper > .row:first-child > div{ float:none; width:auto; padding:0; }
.dataTables_wrapper .dataTables_length label,.dataTables_wrapper .dataTables_filter label{ display:inline-flex; align-items:center; gap:10px; margin:0; white-space:nowrap; }
.dataTables_wrapper .dataTables_length select{ width:auto; min-width:84px; padding:0 34px 0 14px; }
.dataTables_wrapper .dataTables_filter input{ margin:0; width:260px; max-width:100%; }
@media (max-width:900px){
  .note-box{ padding:11px 13px; gap:10px; font-size:13px; }
  .dataTables_wrapper > .row:first-child > div{ flex:1 1 100%; }
  .dataTables_wrapper .dataTables_filter label{ display:flex; width:100%; } .dataTables_wrapper .dataTables_filter input{ flex:1; width:auto; }
}
.dataTables_wrapper .dataTables_length select{ min-width:104px; padding:0 30px 0 12px; text-overflow:clip; }
.note-box .nb-ico{ width:18px; height:18px; }