/* =====================================================================
   Madalali Tanzania — muundo wa simu kwanza
   ===================================================================== */

:root{
  /* wino */
  --ink:#0a1713;
  --ink-2:#3d514a;
  --ink-3:#7a8b84;
  --ink-4:#a6b3ad;

  /* kijani cha msingi */
  --primary:#0b5e43;
  --primary-2:#0e7a57;
  --primary-dark:#073b2a;
  --primary-soft:#e8f2ee;
  --primary-line:#c3ddd2;

  /* hatua (WhatsApp) */
  --wa:#25d366;
  --wa-dark:#1da851;
  --wa-ink:#06301e;

  /* dhahabu ya mapambo */
  --gold:#b98b1d;
  --gold-soft:#fdf6e3;

  /* uso */
  --bg:#f6f8f7;
  --bg-2:#eef3f0;
  --card:#ffffff;
  --line:#e4ebe7;
  --line-2:#d3ded8;

  /* hali */
  --ok:#14603d;      --ok-soft:#e3f6ea;   --ok-line:#a8dcbe;
  --onyo:#8a5a06;    --onyo-soft:#fdf3d9; --onyo-line:#f0d89a;
  --kosa:#9f2222;    --kosa-soft:#fdeaea; --kosa-line:#f3bdbd;

  /* mviringo na vivuli */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --kivuli-1:0 1px 2px rgba(10,23,19,.05);
  --kivuli-2:0 1px 3px rgba(10,23,19,.06), 0 8px 24px -12px rgba(10,23,19,.16);
  --kivuli-3:0 2px 6px rgba(10,23,19,.07), 0 24px 48px -24px rgba(10,23,19,.28);

  --kasi:.18s cubic-bezier(.4,0,.2,1);
  --mguu-simu:0px;   /* hubadilika kwenye skrini ndogo */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--mguu-simu) + env(safe-area-inset-bottom));
}

a{color:var(--primary-2);text-decoration:none;transition:color var(--kasi)}
a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
img{max-width:100%;display:block}

h1,h2,h3{letter-spacing:-.022em;line-height:1.25;color:var(--ink)}

::selection{background:var(--primary-soft);color:var(--primary-dark)}

/* ---------------------------------------------------------- muundo */
.kontena{width:100%;max-width:1020px;margin:0 auto;padding:0 18px}
.kontena--nyembamba{max-width:640px}
.sehemu{padding:26px 0 34px}

/* ruka kwenda yaliyomo (kwa vinasa sauti) */
.ruka{
  position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r-m) 0;z-index:100
}
.ruka:focus{left:0}

/* ---------------------------------------------------------- kichwa */
.kichwa{
  background:var(--primary);
  color:#fff;
  position:sticky;top:0;z-index:40;
  padding-top:env(safe-area-inset-top);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 2px 16px -6px rgba(7,59,42,.5);
}
.kichwa__ndani{display:flex;align-items:center;gap:12px;height:60px}

.nembo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;letter-spacing:-.02em}
.nembo:hover{text-decoration:none;color:#fff}
.nembo__ikoni{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,rgba(255,255,255,.26),rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:17px;
}
.nembo__maandishi{display:flex;flex-direction:column;line-height:1.1}
.nembo__maandishi span{font-size:16.5px}
.nembo__maandishi small{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:.06em;text-transform:uppercase}

.kichwa__viungo{margin-left:auto;display:flex;gap:4px;align-items:center}
.kichwa__viungo a{
  color:rgba(255,255,255,.88);font-size:14.5px;font-weight:600;
  padding:9px 13px;border-radius:10px;transition:background var(--kasi),color var(--kasi)
}
.kichwa__viungo a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.kichwa__viungo a.hai{background:rgba(255,255,255,.18);color:#fff}

/* menyu ya chini kwa simu */
.mguu-simu{display:none}

/* ---------------------------------------------------------- bango */
.bango{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(37,211,102,.22) 0%, rgba(37,211,102,0) 55%),
    linear-gradient(158deg,var(--primary-2) 0%,var(--primary) 46%,var(--primary-dark) 100%);
  padding:26px 0 28px;
}
.bango::after{
  content:"";position:absolute;inset:auto -10% -55% 40%;height:280px;
  background:radial-gradient(closest-side,rgba(255,255,255,.1),transparent);
  pointer-events:none;
}
.bango h1{
  font-size:clamp(23px,6vw,32px);margin:0;color:#fff;
  letter-spacing:-.03em;font-weight:700
}

/* ----------------------------------------------------------- kadi */
.kadi{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:22px;box-shadow:var(--kivuli-2);
}
.kadi + .kadi{margin-top:16px}
.kadi h2{font-size:19.5px;margin:0 0 4px;font-weight:650}
.kadi h3{font-size:16.5px;margin:0 0 6px;font-weight:650}
.kadi__maelezo{margin:0 0 18px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.kadi--tulivu{background:var(--bg-2);box-shadow:none}

/* ----------------------------------------------------------- fomu */
.uga{margin-bottom:16px}
.uga:last-child{margin-bottom:0}
.uga label{
  display:block;font-size:13px;font-weight:650;color:var(--ink-2);
  margin-bottom:7px;letter-spacing:.01em
}
.uga label .si-lazima{font-weight:400;color:var(--ink-4);letter-spacing:0}
.uga small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:6px;line-height:1.45}

input[type=text],input[type=tel],input[type=number],input[type=email],
input[type=password],input[type=url],input[type=search],select,textarea{
  width:100%;
  min-height:50px;
  padding:13px 15px;
  border:1px solid var(--line-2);
  border-radius:var(--r-m);
  font:inherit;
  font-size:16px;              /* huzuia iPhone kuvuta skrini */
  color:var(--ink);
  background:#fff;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--kasi),box-shadow var(--kasi),background var(--kasi);
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}

select{
  padding-right:42px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
textarea{min-height:96px;resize:vertical;line-height:1.55}

input[type=file]{
  padding:11px 14px;min-height:50px;background:var(--bg-2);
  border:1px dashed var(--line-2);color:var(--ink-2);font-size:14px;cursor:pointer
}
input[type=file]:hover{border-color:var(--primary-line);background:var(--primary-soft)}

input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primary-2);
  box-shadow:0 0 0 4px rgba(14,122,87,.12)
}
input[readonly]{background:var(--bg-2);color:var(--ink-2)}

.safu{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.safu--3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:560px){
  .safu,.safu--3{grid-template-columns:1fr;gap:0}
  .safu > .uga{margin-bottom:16px}
}

/* mstari wa kugawanya sehemu za fomu */
.fomu__kichwa{
  display:flex;align-items:center;gap:10px;margin:24px 0 14px;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)
}
.fomu__kichwa::after{content:"";flex:1;height:1px;background:var(--line)}
.fomu__kichwa:first-child{margin-top:0}

/* --------------------------------------------------------- vitufe */
.kitufe{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:14px 22px;border-radius:var(--r-m);
  border:1px solid transparent;
  font:650 15.5px/1 inherit;letter-spacing:-.01em;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:transform var(--kasi),box-shadow var(--kasi),background var(--kasi),border-color var(--kasi);
}
.kitufe:hover{text-decoration:none}
.kitufe:active{transform:translateY(1px)}

.kitufe--kuu{
  background:linear-gradient(175deg,var(--primary-2),var(--primary));
  color:#fff;width:100%;box-shadow:0 1px 2px rgba(7,59,42,.2),0 10px 22px -12px rgba(7,59,42,.7)
}
.kitufe--kuu:hover{background:linear-gradient(175deg,var(--primary),var(--primary-dark));color:#fff}

.kitufe--wa{
  background:var(--wa);color:var(--wa-ink);
  box-shadow:0 1px 2px rgba(6,48,30,.15),0 8px 18px -10px rgba(29,168,81,.8)
}
.kitufe--wa:hover{background:var(--wa-dark);color:var(--wa-ink)}

.kitufe--nje{background:#fff;color:var(--ink-2);border-color:var(--line-2);box-shadow:var(--kivuli-1)}
.kitufe--nje:hover{border-color:var(--ink-4);color:var(--ink);background:#fff}

.kitufe--dogo{min-height:40px;padding:10px 15px;font-size:13.5px;border-radius:var(--r-s)}
.kitufe--pana{width:100%}
.kitufe[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.kitufe-pendekezo{
  min-height:36px;padding:8px 13px;font-size:13px;font-weight:600;border-radius:99px;
  background:var(--primary-soft);color:var(--primary-dark);border:1px solid var(--primary-line);
  cursor:pointer;margin:0 7px 7px 0;transition:all var(--kasi);
}
.kitufe-pendekezo:hover{background:var(--primary-2);color:#fff;border-color:var(--primary-2)}

.msaada{display:block;text-align:center;color:var(--ink-3);font-size:13px;margin-top:12px}

/* -------------------------------------------------------- taarifa */
.taarifa{
  padding:13px 16px;border-radius:var(--r-m);font-size:14.5px;line-height:1.5;
  margin-bottom:16px;border:1px solid;display:flex;gap:10px;align-items:flex-start
}
.taarifa--ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.taarifa--kosa{background:var(--kosa-soft);border-color:var(--kosa-line);color:var(--kosa)}
.taarifa--onyo{background:var(--onyo-soft);border-color:var(--onyo-line);color:var(--onyo)}
.taarifa a{color:inherit;font-weight:650;text-decoration:underline}

/* ---------------------------------------------------------- alama */
.alama{
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;border:1px solid transparent;white-space:nowrap
}
.alama--hai{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.alama--subiri{background:var(--onyo-soft);color:var(--onyo);border-color:var(--onyo-line)}
.alama--zuiwa{background:var(--kosa-soft);color:var(--kosa);border-color:var(--kosa-line)}
.alama--eneo{background:var(--primary-soft);color:var(--primary-dark);border-color:var(--primary-line)}
.alama--dhahabu{background:var(--gold-soft);color:var(--gold);border-color:#eddcac}

/* ------------------------------------------------- orodha ya madalali */
.dalali{
  display:flex;gap:14px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--line)
}
.dalali:last-child{border-bottom:0;padding-bottom:0}
.dalali__picha{
  width:46px;height:46px;border-radius:14px;flex:none;
  background:linear-gradient(145deg,var(--primary-soft),#d8ebe2);
  color:var(--primary-dark);border:1px solid var(--primary-line);
  display:grid;place-items:center;font-weight:700;font-size:17px
}
.dalali__ndani{flex:1;min-width:0}
.dalali__jina{
  font-weight:650;font-size:15.5px;display:flex;gap:8px;align-items:center;
  flex-wrap:wrap;letter-spacing:-.01em
}
.dalali__meta{color:var(--ink-3);font-size:13px;margin-top:3px;line-height:1.45}
.dalali__kitufe{flex:none}

@media(max-width:480px){
  .dalali{flex-wrap:wrap}
  .dalali__kitufe{width:100%;padding-left:60px}
  .dalali__kitufe .kitufe{width:100%}
}

/* ------------------------------------------------------ jibu / chumba */
.jibu{
  border:1px solid var(--line);border-radius:var(--r-m);padding:16px;
  margin-bottom:14px;background:#fff;box-shadow:var(--kivuli-1);
  transition:box-shadow var(--kasi),border-color var(--kasi)
}
.jibu:hover{box-shadow:var(--kivuli-2);border-color:var(--line-2)}
.jibu:last-child{margin-bottom:0}
.jibu__juu{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.jibu__mahali{font-weight:650;font-size:16px;letter-spacing:-.01em;line-height:1.35}
.jibu__dalali{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.jibu__bei{
  font-weight:700;color:var(--primary-dark);white-space:nowrap;font-size:16px;
  background:var(--primary-soft);border:1px solid var(--primary-line);
  padding:6px 12px;border-radius:var(--r-s)
}
.jibu__mstari{font-size:14.5px;color:var(--ink-2);margin:5px 0;line-height:1.5}
.jibu__mstari b{color:var(--ink);font-weight:650}
.jibu__picha{border-radius:var(--r-m);margin-top:12px;max-height:280px;object-fit:cover;width:100%}
.jibu__hatua{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
@media(max-width:420px){
  .jibu__hatua .kitufe{flex:1 1 100%}
}

/* -------------------------------------------------------- jedwali */
.jedwali-mzunguko{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
table.jedwali{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.jedwali th{
  text-align:left;padding:11px 12px;border-bottom:1.5px solid var(--line-2);
  color:var(--ink-3);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap
}
table.jedwali td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
table.jedwali tr:last-child td{border-bottom:0}
table.jedwali tbody tr{transition:background var(--kasi)}
table.jedwali tbody tr:hover{background:var(--bg-2)}

/* jedwali huwa kadi kwenye simu */
@media(max-width:700px){
  .jedwali-mzunguko{overflow:visible;margin:0}
  table.jedwali,table.jedwali tbody,table.jedwali tr,table.jedwali td{display:block;width:100%;min-width:0}
  table.jedwali thead{display:none}
  table.jedwali tr{
    border:1px solid var(--line);border-radius:var(--r-m);padding:14px;
    margin-bottom:12px;background:#fff;box-shadow:var(--kivuli-1)
  }
  table.jedwali tr:hover{background:#fff}
  table.jedwali td{
    border:0;padding:7px 0;display:flex;gap:14px;align-items:flex-start;justify-content:space-between
  }
  table.jedwali td::before{
    content:attr(data-jina);flex:none;
    font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-3);padding-top:3px
  }
  table.jedwali td[data-jina=""]::before{display:none}
  table.jedwali td > *{text-align:right;margin-left:auto}
  table.jedwali td form{justify-content:flex-end}
}

/* -------------------------------------------------------- takwimu */
.takwimu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px;margin-bottom:18px}
.takwimu__kadi{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px 17px;box-shadow:var(--kivuli-1)
}
.takwimu__namba{
  font-size:28px;font-weight:700;letter-spacing:-.035em;color:var(--primary-dark);
  line-height:1.05;font-variant-numeric:tabular-nums
}
.takwimu__jina{
  font-size:11.5px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.06em;margin-top:5px;font-weight:600
}
@media(max-width:520px){
  .takwimu{grid-template-columns:1fr 1fr;gap:10px}
  .takwimu__kadi{padding:14px}
  .takwimu__namba{font-size:24px}
}

/* --------------------------------------------------- kodi ya ombi */
.kodi-kisanduku{
  background:linear-gradient(160deg,#fff,var(--primary-soft));
  border:1px solid var(--primary-line);border-radius:var(--r-l);
  padding:20px;text-align:center;margin-bottom:18px;box-shadow:var(--kivuli-2)
}
.kodi-kisanduku small{color:var(--ink-3);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.kodi-kisanduku__namba{
  font-size:clamp(26px,8vw,34px);font-weight:700;letter-spacing:.09em;
  color:var(--primary-dark);margin:8px 0;font-variant-numeric:tabular-nums
}
.kodi-kisanduku__chini{color:var(--ink-2);font-size:13.5px;text-transform:none;letter-spacing:0;font-weight:400}

/* ----------------------------------------------------------- mguu */
.mguu{
  padding:32px 0 40px;color:var(--ink-3);font-size:13.5px;text-align:center;
  border-top:1px solid var(--line);margin-top:20px;background:var(--bg-2)
}
.mguu a{color:var(--ink-2);font-weight:500}
.mguu__viungo{display:flex;gap:8px 20px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.mguu__haki{color:var(--ink-4);font-size:12.5px;line-height:1.6}

/* ------------------------------------------------------- msaidizi */
.mstari-kando{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tupu{text-align:center;padding:34px 16px;color:var(--ink-3)}
.tupu__ikoni{
  font-size:30px;margin:0 auto 12px;width:64px;height:64px;border-radius:50%;
  background:var(--bg-2);display:grid;place-items:center
}
.tupu h3{margin:0 0 6px;color:var(--ink)}
.tupu p{margin:0 0 16px;font-size:14.5px;line-height:1.55;max-width:44ch;margin-inline:auto}
.ficha{display:none !important}
.kata-chip{margin:0 7px 7px 0}

/* ------------------------------------------------- menyu ya chini (simu) */
@media(max-width:640px){
  :root{--mguu-simu:66px}

  .kichwa__ndani{height:56px}
  .kichwa__viungo{display:none}
  .nembo__maandishi small{display:none}

  .mguu-simu{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--line-2);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 20px -12px rgba(10,23,19,.4);
  }
  .mguu-simu a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 4px 8px;color:var(--ink-3);font-size:11px;font-weight:600;
    text-decoration:none;transition:color var(--kasi)
  }
  .mguu-simu a:hover{text-decoration:none}
  .mguu-simu a span{font-size:19px;line-height:1}
  .mguu-simu a.hai{color:var(--primary-2)}

  .sehemu{padding:20px 0 26px}
  .kadi{padding:18px;border-radius:var(--r-m)}
  .bango{padding:22px 0 24px}
  .mguu{padding:26px 0 30px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ------------------------------------------ maoni na ripoti (tathmini) */
.tathmini{margin-top:14px;padding-top:13px;border-top:1px dashed var(--line-2)}

.tathmini__jibu{
  font-size:13.5px;color:var(--ink-2);background:var(--bg-2);
  border-radius:var(--r-s);padding:9px 12px;margin-bottom:8px;line-height:1.5
}
.tathmini__jibu--onyo{background:var(--onyo-soft);color:var(--onyo)}

.nyota{color:#e0a800;letter-spacing:2px;margin-right:5px}

.tathmini__fungua{margin-top:6px}
.tathmini__fungua summary{
  cursor:pointer;font-size:13.5px;font-weight:650;color:var(--primary-2);
  padding:8px 0;list-style:none;display:flex;align-items:center;gap:7px
}
.tathmini__fungua summary::-webkit-details-marker{display:none}
.tathmini__fungua summary::before{content:"\203A";font-size:18px;line-height:1;transition:transform var(--kasi)}
.tathmini__fungua[open] summary::before{transform:rotate(90deg)}
.tathmini__fungua summary:hover{color:var(--primary)}
.tathmini__fungua--onyo summary{color:var(--kosa)}
.tathmini__fungua--onyo summary:hover{color:#7c1a1a}

.tathmini__fomu{
  padding:14px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-m);margin-top:4px
}

/* nyota za kuchagua: zimeandikwa kinyume ili ~ ifanye kazi */
.nyota-chagua{display:inline-flex;flex-direction:row-reverse;gap:4px;margin-bottom:12px}
.nyota-chagua input{position:absolute;opacity:0;width:0;height:0}
.nyota-chagua label{
  font-size:30px;line-height:1;color:var(--line-2);cursor:pointer;
  transition:color var(--kasi);margin:0;padding:0 2px
}
.nyota-chagua label:hover,
.nyota-chagua label:hover ~ label,
.nyota-chagua input:checked ~ label{color:#f0b429}
.nyota-chagua input:focus-visible + label{outline:2px solid var(--primary-2);outline-offset:2px;border-radius:4px}

/* alama ya nyota kwenye jedwali */
.nyota-alama{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nyota-alama b{color:var(--ink);font-weight:700}
.nyota-alama span{color:var(--ink-3);font-size:12.5px}

/* --------------------------------------------------- kibadilishi cha lugha */
.lugha-badili{
  margin-left:6px;padding:7px 11px;border-radius:9px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  color:#fff !important;font-size:12.5px;font-weight:700;letter-spacing:.06em
}
.lugha-badili:hover{background:rgba(255,255,255,.22);text-decoration:none}
@media(max-width:640px){
  .kichwa__viungo{display:flex !important;margin-left:auto}
  .kichwa__viungo a:not(.lugha-badili){display:none}
}