/* IP Motors — mfumo wa mikataba. Miundo ya mkononi kwanza (mobile-first):
   kanuni za msingi ni za skrini ndogo, ongeza za skrini kubwa huja ndani ya
   @media (min-width: …). */

:root {
  --rangi-eti: #0d0f12;
  --rangi-eti-kati: #191d23;
  --rangi-winjari: #15181d;
  --rangi-nyorofu: #5c6570;
  --rangi-mstari: #e2e6ea;
  --rangi-nyanda: #ffffff;
  --rangi-mandhari: #f4f6f8;

  --rangi-kazi: #d81f2a;
  --rangi-kazi-giza: #a81118;
  --rangi-kazi-epuka: #fdecee;
  --rangi-hatari: #b3121a;
  --rangi-hatari-epuka: #fdf0ef;
  --rangi-salama: #0f7a3d;
  --rangi-salama-epuka: #e8f5ed;
  --rangi-dhahabu: #8a5a00;
  --rangi-dhahabu-epuka: #fdf3e0;

  /* Pembe ndogo: vitupu na kadi hushikamana, si kuvuka. */
  --pembe-ndogo: 5px;
  --pembe: 8px;
  --pembe-pana: 12px;
  --urefu: 44px;

  --kivuli-1: 0 1px 2px rgba(13, 15, 18, .06);
  --kivuli-2: 0 1px 2px rgba(13, 15, 18, .05), 0 14px 28px -18px rgba(13, 15, 18, .28);
  --kivuli-3: 0 24px 60px -28px rgba(13, 15, 18, .45);

  --herufi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Kanuni: alama ya "hidden" hufanya kazi hata pale ambapo mwundo wa kadi au
   gridi umeweka "display" — ukificha kundi, lipotee kabisa kwenye mpangilio. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--herufi);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--rangi-winjari);
  background: var(--rangi-mandhari);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rangi-kazi-giza); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rangi-kazi); }

h1, h2, h3 { margin: 0 0 .35rem; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: 25px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 650; }
p { margin: 0 0 .6rem; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--rangi-kazi); outline-offset: 2px; border-radius: 4px; }

.ririma {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--rangi-eti); color: #fff; padding: 12px 18px; border-radius: var(--pembe);
}
.ririma:focus { left: 12px; }

/* Maandishi ya kisoma skrini pekee: yako kwenye DOM, si kwenye skrini. */
.sirio {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- Kichwa */

.juu {
  position: sticky; top: 0; z-index: 30;
  background: var(--rangi-eti);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px -22px rgba(0, 0, 0, .9);
}
/* Upau mmoja tu: nembo · menyu inayogong'oma · akaunti. Kimoja kilele, hakuna
   safu ya pili chini yake hata kwenye simu. */
.juu__ndani {
  display: flex; align-items: stretch; gap: 4px;
  max-width: 1280px; margin: 0 auto; padding: 0 10px; min-height: 54px;
}
.nembo { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding-inline-end: 6px; color: #fff; text-decoration: none; }
.nembo img { max-height: 26px; max-width: 120px; object-fit: contain; }
.nembo__maandishi {
  font-weight: 750; font-size: 16px; letter-spacing: -.03em;
  display: none; align-items: center; gap: 8px; white-space: nowrap;
}
.nembo__alama {
  width: 26px; height: 26px; border-radius: var(--pembe-ndogo); background: var(--rangi-kazi);
  color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: -.04em;
  display: inline-grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}

.navigesheni {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
}
.navigesheni::-webkit-scrollbar { display: none; }
.navigesheni a {
  flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 12px;
  color: #9ba4af; text-decoration: none; font-weight: 600; font-size: 14px;
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.navigesheni a:hover { color: #fff; }
.navigesheni a.amechaguliwa { color: #fff; border-bottom-color: var(--rangi-kazi); }

/* Kibadilishaji lugha: chipi mbili ndogo upauni, zinatumika hata ukurasa wa
   kuingia — mtumiaji anayebadilisha lugha hubaki hapo alikuwa. */
.lugha { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 0 2px; }
.lugha__chip {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .05em;
  min-height: 28px; padding: 0 8px; cursor: pointer;
  color: #9ba4af; background: transparent;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--pembe-ndogo);
}
.lugha__chip:hover { color: #fff; border-color: rgba(255, 255, 255, .42); }
.lugha__chip--hai { color: var(--rangi-winjari); background: #fff; border-color: #fff; }

/* Menyu ya akaunti: shoka dogo, juu yake vitendo vitatu. */
.menyu { position: relative; flex: 0 0 auto; display: flex; align-items: stretch; }
.menyu__kicho {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 6px;
  color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none;
}
.menyu__kicho::-webkit-details-marker { display: none; }
.menyu__kicho:hover .menyu__shoka, .menyu[open] .menyu__shoka { box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); }
.menyu__shoka {
  width: 30px; height: 30px; border-radius: var(--pembe-ndogo); background: var(--rangi-kazi);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 800; letter-spacing: -.02em;
}
.kicho__jina, .menyu__mshale { display: none; }
.kicho__jina { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menyu__mshale { font-size: 11px; opacity: .7; }
.menyu__orodha {
  position: absolute; top: calc(100% + 6px); right: 4px; z-index: 40; width: 232px;
  padding: 6px; background: var(--rangi-nyanda); color: var(--rangi-winjari);
  border: 1px solid var(--rangi-mstari); border-radius: var(--pembe); box-shadow: var(--kivuli-3);
}
.menyu__jitibu { padding: 10px 12px; margin: -6px -6px 6px; border-radius: var(--pembe) var(--pembe) 0 0; background: var(--rangi-mandhari); border-bottom: 1px solid var(--rangi-mstari); }
.menyu__jina { font-weight: 700; font-size: 14.5px; }
.menyu__mtumiaji { margin: 1px 0 0; font-size: 12.5px; color: var(--rangi-nyorofu); }
.menyu__orodha a, .menyu__orodha button {
  display: block; width: 100%; text-align: start; font: inherit; font-size: 14.5px; font-weight: 550;
  padding: 10px 12px; border: 0; border-radius: var(--pembe-ndogo); background: none;
  color: var(--rangi-winjari); text-decoration: none; cursor: pointer;
}
.menyu__orodha a:hover, .menyu__orodha button:hover { background: var(--rangi-mandhari); color: var(--rangi-kazi-giza); }
.menyu__orodha form { margin: 0; }
.menyu__orodha .menyu__tendo--hatari { color: var(--rangi-hatari); }
.kiungo-dhaifu { color: #97a0ab; font-size: 14px; text-decoration: none; }
.kiungo-dhaifu:hover { color: #fff; text-decoration: underline; }

.maudhui { max-width: 1280px; margin: 0 auto; padding: 22px 16px 56px; }
.maudhui.kipimo-upana { max-width: 760px; }
/* Fomu ya mkataba hupima upana ili gridi ya safu tatu na reli ya makundi
   viweze kukaa skrini moja bila kupinda. */
.maudhui.kipimo-fomu { max-width: 1160px; }

.chamba {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  max-width: 1280px; margin: 0 auto; padding: 18px 16px 30px;
  border-top: 1px solid var(--rangi-mstari);
  font-size: 13px; color: var(--rangi-nyorofu);
}
.chamba a { color: var(--rangi-nyorofu); text-decoration: none; }
.chamba a:hover { color: var(--rangi-kazi); text-decoration: underline; }

/* ---------------------------------------------------------------- Batoni */

.batoni {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--urefu); padding: 0 18px;
  font: inherit; font-size: 14.5px; font-weight: 650; line-height: 1;
  border: 1px solid var(--rangi-kazi); border-radius: var(--pembe-ndogo);
  background: var(--rangi-kazi); color: #fff; cursor: pointer; text-decoration: none;
  box-shadow: var(--kivuli-1);
  transition: background-color .16s ease, border-color .16s ease, transform .06s ease;
}
.batoni:hover { background: var(--rangi-kazi-giza); border-color: var(--rangi-kazi-giza); color: #fff; }
.batoni:active { transform: translateY(1px); }

.batoni--uwanja { background: var(--rangi-nyanda); color: var(--rangi-winjari); border-color: var(--rangi-mstari); }
.batoni--uwanja:hover { background: var(--rangi-mandhari); border-color: #c8cfd6; color: var(--rangi-winjari); }

.batoni--eti { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.batoni--eti:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }

.batoni--hatari { background: var(--rangi-nyanda); color: var(--rangi-hatari); border-color: #f0c9c8; }
.batoni--hatari:hover { background: var(--rangi-hatari-epuka); border-color: var(--rangi-hatari); color: var(--rangi-hatari); }

.batoni--imekalia { background: var(--rangi-eti); border-color: var(--rangi-eti); color: #fff; }
.batoni--imekalia:hover { background: var(--rangi-eti-kati); border-color: var(--rangi-eti-kati); color: #fff; }

.batoni--dogo { min-height: 36px; padding: 0 13px; font-size: 13.5px; }
.batoni--pana { width: 100%; }
.batoni[disabled] { opacity: .5; cursor: not-allowed; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 13px; border-radius: var(--pembe-ndogo);
  font-size: 13.5px; font-weight: 550; text-decoration: none;
  background: var(--rangi-nyanda); color: var(--rangi-nyorofu); border: 1px solid var(--rangi-mstari);
}
.chip:hover { border-color: #c8cfd6; color: var(--rangi-winjari); }
.chip.amechaguliwa { background: var(--rangi-eti); border-color: var(--rangi-eti); color: #fff; }

.kiungo-tendo { color: var(--rangi-nyorofu); font-size: 13.5px; font-weight: 550; text-decoration: none; }
.kiungo-tendo:hover { color: var(--rangi-kazi); text-decoration: underline; }

/* ---------------------------------------------------------------- Kadi */

.kadi {
  background: var(--rangi-nyanda); border: 1px solid var(--rangi-mstari);
  border-radius: var(--pembe); box-shadow: var(--kivuli-2);
}
.kadi + .kadi { margin-top: 16px; }
.kadi__ndani { padding: 18px; }
.kadi__kichwa {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--rangi-mstari);
}
.kadi__kichwa h2 { position: relative; padding-inline-start: 12px; margin: 0; }
.kadi__kichwa h2::before {
  content: ""; position: absolute; inset-block: 3px; left: 0; width: 3px;
  border-radius: 3px; background: var(--rangi-kazi);
}

.kichwa-cha-kipande { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.kichwa-cha-kipande p { margin: 4px 0 0; color: var(--rangi-nyorofu); font-size: 14.5px; }
.kichwa-cha-kipande > .batoni { flex: 0 0 auto; }
.kichwa-cha-kipande > .titiri { flex: 1 1 100%; }

.titiri { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.msaada { margin: 5px 0 0; font-size: 13px; color: var(--rangi-nyorofu); }
.kosa { margin: 5px 0 0; font-size: 13.5px; color: var(--rangi-hatari); font-weight: 550; }
.lazima { color: var(--rangi-kazi); }
.maana-hatari { color: var(--rangi-hatari); }
.maelezo-ndogo { font-size: 13.5px; color: var(--rangi-nyorofu); }
.kidokezo { margin-top: 18px; font-size: 13px; color: var(--rangi-nyorofu); }

/* ---------------------------------------------------------------- Ujumbe */

.ujumbe-za { margin-bottom: 16px; }
.ujumbe {
  margin: 0 0 8px; padding: 13px 16px; border-radius: var(--pembe-ndogo);
  font-weight: 550; font-size: 14.5px; border: 1px solid transparent;
  display: flex; align-items: flex-start; gap: 10px;
}
.ujumbe::before { content: ""; flex: 0 0 auto; width: 4px; align-self: stretch; border-radius: 4px; background: currentColor; opacity: .5; }
.ujumbe--success { background: var(--rangi-salama-epuka); color: var(--rangi-salama); border-color: #c3e5cf; }
.ujumbe--info { background: #eef3fa; color: #1d4d80; border-color: #cadff2; }
.ujumbe--warning { background: var(--rangi-dhahabu-epuka); color: var(--rangi-dhahabu); border-color: #eddcb0; }
.ujumbe--hatari { background: var(--rangi-hatari-epuka); color: var(--rangi-hatari); border-color: #f3cfcd; }

/* ---------------------------------------------------------------- Bendera */

.bendera { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.bendera::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px currentColor; opacity: .95; }
.bendera--haijarejeshwa { color: var(--rangi-kazi); }
.bendera--haijarejeshwa::before { background: var(--rangi-kazi); }
.bendera--imekamilika { color: var(--rangi-salama); }
.bendera--imekamilika::before { background: var(--rangi-salama); }
/* Orodha nyembamba: nukta pekee, jina la hali huja skrini kubwa. */
.bendera--nukta { font-size: 0; gap: 0; }

.aina { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .01em; }
.aina--kuuza { background: var(--rangi-kazi-epuka); color: var(--rangi-kazi-giza); }
.aina--kunua { background: #eceef1; color: #3c444d; }

/* ---------------------------------------------------------------- Fomu */

.fomu .kundi { padding: 16px 18px; }
.fomu .kundi + .kundi { border-top: 1px solid var(--rangi-mstari); }
/* Kichwa cha kundi: lebo ndogo ya herufi kubwa yenye alama nyekundu ileile ya
   kichwa cha kadi. Skrini kubwa huikaa kwenye reli ya kushoto, safu moja na
   mata — jina la kundi haliliendi juu ya mata, linakaa upande wake. */
.fomu .kundi__lebo {
  position: relative; padding-inline-start: 12px; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rangi-nyorofu);
}
.fomu .kundi__lebo::before {
  content: ""; position: absolute; inset-block: 2px; left: 0; width: 3px;
  border-radius: 3px; background: var(--rangi-kazi);
}
/* Cheo cha mteja kwenye kichwa cha kundi — kinasoma "mnunuzi" au "muuzaji" kulingana
   na aina iliyochaguliwa, kwa sababu karatasi moja hutumika pande zote mbili. */
.fomu .kundi__cheo {
  margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  white-space: nowrap;
  color: var(--rangi-kazi-giza); background: var(--rangi-kazi-epuka);
}

/* Kipande cha juu: aina ndiyo huamua muundo wa fomu yote, kwa hivyo haitagniwa
   chini ya orodha — ni swali moja na batoni mbili, safu moja na kichwa. */
.aina-ja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--rangi-mstari);
  background: var(--rangi-mandhari); border-radius: var(--pembe) var(--pembe) 0 0;
}
.aina-ja__swali {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rangi-nyorofu);
}
.aina-ja .kosa { flex: 1 1 100%; margin-top: 0; }
.chaguzi { display: inline-flex; gap: 3px; padding: 3px; background: #e3e8ed; border-radius: var(--pembe-ndogo); }
.chaguo { position: relative; }
.chaguo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chaguo span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  font-size: 14.5px; font-weight: 650; color: var(--rangi-nyorofu);
  border-radius: 4px; white-space: nowrap; cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.chaguo:hover span { color: var(--rangi-winjari); }
.chaguo input:checked + span { background: var(--rangi-nyanda); color: var(--rangi-winjari); box-shadow: var(--kivuli-1); }
.chaguo input:focus-visible + span { outline: 3px solid var(--rangi-kazi); outline-offset: 2px; }

.fomu .gridi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fomu .uga { margin: 0; min-width: 0; }
.fomu .uga--pana { grid-column: 1 / -1; }
/* Majina kamili huchukua safu mbili kati ya tatu: uwanja wa kuandika unakua,
   uga mfupi (simu) unabaki kwa kizio chake. */
.fomu .uga--pana-mbili { grid-column: auto; }
/* Ushauri unaohusu uga mmoja hukaa chini ya uga huo (safu ya kulia), si
   upana wa fomu kote — kisomeki kinabaki kikiwa kimepangwa na gridi moja. */
.fomu .uga--kulia { grid-column: 1 / -1; margin-top: 2px; }
.fomu label { display: block; font-weight: 650; font-size: 13px; margin-bottom: 5px; color: #2b323a; letter-spacing: .01em; }

.fomu input[type=text], .fomu input[type=tel], .fomu input[type=date], .fomu input[type=number], .fomu input[type=password],
.fomu input[type=file], .fomu select, .fomu textarea,
.vichujio input, .vichujio select,
.kipindi input[type=date] {
  width: 100%; min-height: var(--urefu); padding: 9px 12px;
  font: inherit; font-size: 15px; color: var(--rangi-winjari);
  background: var(--rangi-nyanda); border: 1px solid #ccd3da; border-radius: var(--pembe-ndogo);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.fomu input[type=number] { font-variant-numeric: tabular-nums; }
.kipindi input:focus, .fomu input:focus, .fomu select:focus, .vichujio input:focus, .vichujio select:focus {
  border-color: var(--rangi-kazi); box-shadow: 0 0 0 3px var(--rangi-kazi-epuka); outline: none;
}
.fomu input[type=file] { padding: 7px 8px; background: var(--rangi-mandhari); font-size: 14px; }

/* Kipakiaji: batoni ya Kiswahili ndiyo huonekana, uga halisi wa faili
   hukaa juu yake (ufifia) ili mboeo na kibodi vifanyee kazi. */
.pakia {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: var(--urefu); padding: 7px 8px; cursor: pointer;
  border: 1px solid #ccd3da; border-radius: var(--pembe-ndogo); background: var(--rangi-mandhari);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.pakia:hover { background: #eceff2; }
.pakia:focus-within { border-color: var(--rangi-kazi); box-shadow: 0 0 0 3px var(--rangi-kazi-epuka); }
.fomu .pakia input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  min-height: 0; margin: 0; padding: 0; border: 0; background: none;
  font-size: 0; opacity: 0; cursor: pointer;
}
.pakia__batoni {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px;
  font-size: 13.5px; font-weight: 650; color: var(--rangi-winjari);
  background: var(--rangi-nyanda); border: 1px solid #ccd3da; border-radius: var(--pembe-ndogo);
}
.pakia__jina {
  min-width: 0; font-size: 13.5px; color: var(--rangi-nyorofu);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pakia__sasa { margin: 0 0 6px; font-size: 13px; color: var(--rangi-nyorofu); }
.pakia__sasa a { color: var(--rangi-kazi); font-weight: 600; }
.pakia__ondoa {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 13px; color: var(--rangi-nyorofu); cursor: pointer;
}
.fomu .uga--kosa input, .fomu .uga--kosa select { border-color: var(--rangi-hatari); background: var(--rangi-hatari-epuka); }

/* Kirai cha nchi (+255) hukaa nje ya uga: mtumiaji huandika sehemu ya ndani tu,
   haulazimiki kulirudiya kila mara. */
.kiwanja {
  display: flex; align-items: stretch; overflow: hidden;
  border: 1px solid #ccd3da; border-radius: var(--pembe-ndogo); background: var(--rangi-nyanda);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.kiwanja:focus-within { border-color: var(--rangi-kazi); box-shadow: 0 0 0 3px var(--rangi-kazi-epuka); }
.kiwanja__kodii {
  flex: 0 0 auto; display: grid; place-items: center; padding: 0 11px;
  font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--rangi-nyorofu);
  background: var(--rangi-mandhari); border-inline-end: 1px solid #ccd3da;
}
.kiwanja__kirai {
  flex: 0 0 auto; display: grid; place-items: center; padding: 0 11px;
  font-size: 13px; font-weight: 650; color: var(--rangi-nyorofu);
  background: var(--rangi-mandhari); border-inline-start: 1px solid #ccd3da;
}
.fomu .kiwanja input[type=text], .fomu .kiwanja input[type=tel], .fomu .kiwanja input[type=number],
.fomu .kiwanja input[type=password] {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.fomu .kiwanja input:focus { border: 0; box-shadow: none; }

/* Jicho la nenosiri: uga unabaki ukubwa uleule, kibonyezo kinaingia ndani ya
   kikao cha uga kama kirai cha simu — hakuna safu ya pili chini ya uga. */
.kiwanja__jicho {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; padding: 0; cursor: pointer;
  color: var(--rangi-nyorofu); background: var(--rangi-nyanda);
  border: 0; border-inline-start: 1px solid #ccd3da;
}
.kiwanja__jicho:hover { color: var(--rangi-kazi-giza); background: var(--rangi-mandhari); }
.kiwanja__jicho--imeonyeshwa { color: var(--rangi-kazi); }
.kiwanja__jicho svg { width: 18px; height: 18px; display: block; }
.fomu .uga--kosa .kiwanja { border-color: var(--rangi-hatari); background: var(--rangi-hatari-epuka); }
.fomu .uga--kosa .kiwanja input { background: transparent; }
.fomu .uga--kosa .kiwanja__kodii, .fomu .uga--kosa .kiwanja__kirai { border-inline-color: #e8b4b2; }

.fomu-chini {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--rangi-mstari);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px);
  box-shadow: 0 -10px 24px -20px rgba(13, 15, 18, .5);
}
/* Tufupi: kitufe cha fomu ndogo (kupakia picha) hakihitaji upau unaonata. */
.fomu-chini--mwanzo { position: static; padding: 12px 0 0; box-shadow: none; backdrop-filter: none; }
/* Upau wa mwisho hufuata pembe za kadi ili usitoke nje yake. */
.kadi > .fomu-chini:last-of-type { border-radius: 0 0 var(--pembe) var(--pembe); }

.makosa-ya-fomu {
  border: 1px solid #f3cfcd; background: var(--rangi-hatari-epuka); color: #7c1d17;
  border-radius: var(--pembe); padding: 13px 16px; margin-bottom: 16px; font-size: 14.5px;
}
.makosa-ya-fomu ol { margin: 6px 0 0; padding-left: 18px; }
.makosa-ya-fomu li { margin-bottom: 3px; }
.makosa-ya-fomu a { color: inherit; font-weight: 650; text-decoration: underline; }

/* Kipimo hai cha faida: kilichobaki katika upau wa kuhifadhi. */
.faida-hai {
  display: flex; align-items: baseline; gap: 8px; margin-inline-end: auto;
  padding: 6px 12px; border-radius: var(--pembe-ndogo);
  background: var(--rangi-mandhari); border: 1px solid var(--rangi-mstari);
}
.faida-hai .lebo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rangi-nyorofu); }
.faida-hai .thamani { font-size: 16px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.faida-hai.hasidi .thamani { color: var(--rangi-hatari); }

/* ------------------------------------------------------- Orodha ya mikataba */

/* Upau wa kuchuja: utafutaji na hali safu moja (vilevile vinavyotumika kila
   siku); vichujio vingine hukunywa chini ya "Vichujio zaidi" ili jedwali
   lionekane bila kusogeza. */
.vichujio { padding: 14px 16px 15px; border-bottom: 1px solid var(--rangi-mstari); }
.vichujio .uga { margin: 0; }
.vichujio label { display: block; font-weight: 650; font-size: 12px; margin-bottom: 5px; color: var(--rangi-nyorofu); text-transform: uppercase; letter-spacing: .04em; }

.tafuta { position: relative; }
.tafuta__alama { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #98a2ad; pointer-events: none; }
.tafuta input[type=search] {
  width: 100%; min-height: 42px; padding: 0 12px 0 38px;
  font: inherit; font-size: 15px; color: var(--rangi-winjari);
  background: var(--rangi-mandhari); border: 1px solid #ccd3da; border-radius: var(--pembe-ndogo);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tafuta input[type=search]:focus { background: var(--rangi-nyanda); border-color: var(--rangi-kazi); box-shadow: 0 0 0 3px var(--rangi-kazi-epuka); outline: none; }
.tafuta input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

.vichujio__mstari { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.kundi-hali {
  flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.kundi-hali::-webkit-scrollbar { display: none; }
.kundi-hali .chip { flex: 0 0 auto; min-height: 34px; padding: 0 11px; font-size: 13px; }
.kundi-hali .chip.amechaguliwa .nukta--haijarejeshwa { color: #ff8a92; }
.kundi-hali .chip.amechaguliwa .nukta--imekamilika { color: #6fd39a; }
.zaidi { flex: 0 0 auto; }

.nukta { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.nukta--haijarejeshwa { color: var(--rangi-kazi); }
.nukta--imekamilika { color: var(--rangi-salama); }

.zaidi { position: relative; }
.zaidi__kicho {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px;
  font-size: 13.5px; font-weight: 600; color: var(--rangi-nyorofu);
  background: var(--rangi-nyanda); border: 1px solid var(--rangi-mstari); border-radius: var(--pembe-ndogo);
  cursor: pointer; list-style: none;
}
.zaidi__kicho::-webkit-details-marker { display: none; }
.zaidi__kicho:hover { color: var(--rangi-winjari); border-color: #c8cfd6; }
.zaidi__kicho svg { width: 11px; height: 11px; transition: transform .16s ease; }
.zaidi[open] .zaidi__kicho { color: var(--rangi-winjari); background: var(--rangi-mandhari); }
.zaidi[open] .zaidi__kicho svg { transform: rotate(180deg); }
.zaidi__ndani {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 25;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  width: min(400px, calc(100vw - 44px)); padding: 14px;
  background: var(--rangi-nyanda); border: 1px solid var(--rangi-mstari);
  border-radius: var(--pembe); box-shadow: var(--kivuli-3);
}
.zaidi__ndani .uga { grid-column: span 1; }
.zaidi__ndani select, .zaidi__ndani input[type=date] {
  width: 100%; min-height: 38px; padding: 6px 9px;
  font: inherit; font-size: 14px; color: var(--rangi-winjari);
  background: var(--rangi-nyanda); border: 1px solid #ccd3da; border-radius: var(--pembe-ndogo);
}
.zaidi__futa { grid-column: 1 / -1; font-size: 13.5px; font-weight: 650; }

/* Skrini ndogo: kila mkataba huwa kadi fupi — namba, tarehe, bei, pikipiki na
   kitendo kimoja kikuu. Majina ya pande zote mbili huonekana kwenye undani. */
.jedwali-ndani { padding: 8px 10px 10px; }
.jedwali { width: 100%; border-collapse: collapse; font-size: 14px; }
.jedwali thead { display: none; }
.jedwali tbody, .jedwali tr, .jedwali td { display: block; }
.jedwali tr {
  position: relative; display: grid; gap: 9px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "namba namba"
    "tarehe bei"
    "pikipiki pikipiki"
    "matendo matendo";
  margin: 0 0 9px; padding: 12px 13px;
  border: 1px solid var(--rangi-mstari); border-left: 3px solid var(--rangi-salama);
  border-radius: var(--pembe); background: var(--rangi-nyanda); box-shadow: var(--kivuli-1);
}
.jedwali tr.ni-kazi { border-left-color: var(--rangi-kazi); }
.jedwali td { padding: 0; border: 0; min-width: 0; overflow-wrap: break-word; }
.jedwali td::before {
  content: attr(data-lebo); display: block; margin-bottom: 1px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rangi-nyorofu); font-weight: 700;
}
.jedwali td[data-lebo=""]::before { content: none; }
.jedwali td.tarehe { grid-area: tarehe; color: var(--rangi-nyorofu); font-variant-numeric: tabular-nums; }
.jedwali td.pikipiki { grid-area: pikipiki; }
.jedwali td.bei { grid-area: bei; font-variant-numeric: tabular-nums; font-weight: 750; font-size: 15.5px; letter-spacing: -.02em; }
.jedwali td.matendo { grid-area: matendo; }
.jedwali td.safu-kuu { grid-area: namba; padding-inline-end: 22px; }
.jedwali td.safu-kuu::before { content: none; }
.jedwali td.safu-kuu > a { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.jedwali td.safu-kuu .aina { margin-top: 5px; }
.jedwali td.hali { position: absolute; top: 14px; right: 14px; z-index: 2; }
.jedwali td.hali::before { content: none; }
.jedwali td.hali .nukta { width: 10px; height: 10px; }
.jedwali td.hali .nukta--haijarejeshwa { box-shadow: 0 0 0 3px rgba(216, 31, 42, .16); }
.jedwali td.hali .nukta--imekamilika { box-shadow: 0 0 0 3px rgba(15, 122, 61, .16); }
.pikipiki__modeli { display: block; font-weight: 600; }
.pikipiki__bati { display: block; font-size: 12.5px; color: var(--rangi-nyorofu); font-variant-numeric: tabular-nums; }

/* Safu nzima huwa kiungo cha undani; vitendo vinalala juu yake. */
.kiungo-pana::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.jedwali tbody tr:hover { border-color: #cdd5dd; background: #fbfcfd; }
.jedwali tbody tr:hover .kiungo-pana { color: var(--rangi-kazi-giza); }

.jedwali td.matendo {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--rangi-mstari);
}
.jedwali td.matendo::before { content: none; }
.matendo__ndani { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; }
.nafasi { display: flex; align-items: center; justify-content: flex-end; min-width: 32px; }

.tendo {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 32px; height: 32px; padding: 0;
  font-size: 13px; font-weight: 650; color: var(--rangi-nyorofu); text-decoration: none;
  background: none; border: 1px solid transparent; border-radius: var(--pembe-ndogo);
  cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.tendo svg { width: 16px; height: 16px; display: block; }
.tendo:hover { color: var(--rangi-winjari); background: var(--rangi-mandhari); border-color: var(--rangi-mstari); }
.tendo--kuu { width: auto; padding: 0 12px; color: #fff; background: var(--rangi-kazi); border-color: var(--rangi-kazi); }
.tendo--kuu:hover { color: #fff; background: var(--rangi-kazi-giza); border-color: var(--rangi-kazi-giza); }

.kigawanyo {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 18px; border-top: 1px solid var(--rangi-mstari);
  color: var(--rangi-nyorofu); font-size: 14px;
}
.kigawanyo .hatua { display: flex; gap: 8px; }

.tupu { padding: 44px 22px; text-align: center; color: var(--rangi-nyorofu); }
.tupu h2 { color: var(--rangi-winjari); font-size: 18px; }
.tupu .batoni { margin-top: 12px; }

/* ---------------------------------------------------------------- Undani */

.maelezo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.maelezo dl { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rangi-mstari); }
.maelezo dl:last-child { border-bottom: 0; }
.maelezo dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--rangi-nyorofu); font-weight: 650; }
.maelezo dd { margin: 3px 0 0; font-weight: 550; }
.maelezo dd + dt { margin-top: 13px; }
/* Chaguo la wakala ni hariri ndani ya rekodi: likiwa mwisho wa mstari wake,
   isiundwe safu nyingine chini ya rekodi hiyo. */
.maelezo .titiri { gap: 8px; margin-top: 2px; }
.maelezo .titiri select { flex: 1 1 210px; min-width: 0; }

.historia { margin: 0; padding-left: 18px; color: var(--rangi-nyorofu); font-size: 14px; }
.historia li { margin-bottom: 5px; }

.picha-ya-sahihi { max-width: 100%; max-height: 320px; border: 1px solid var(--rangi-mstari); border-radius: var(--pembe-ndogo); display: block; box-shadow: var(--kivuli-1); }
.picha-hoji { display: inline-block; margin-top: 14px; }
.picha-hoji:hover .picha-ya-sahihi { border-color: var(--rangi-kazi); }
/* Kichupo cha nembo kwenye fomu ya mipangilio: kisanduku kisichobadilika
   ukubwa, ili nembo kubwa kisipanue safu ya fomu hadi nje ya gridi. */
.nembo-ya-sasa { display: inline-flex; align-items: center; gap: 8px; }
.nembo-ya-sasa img { max-width: 130px; max-height: 42px; padding: 3px 7px; background: #fff; border: 1px solid var(--rangi-mstari); border-radius: var(--pembe-ndogo); }

.mkataba-mwonekano { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--rangi-nyorofu); background: var(--rangi-mandhari); padding: 16px 18px; }
/* Kichwa cha kadi kinachofuata kundi cha fomu hupewa mstari wake wa juu, ili
   kisipange mstari mara mbili na mpemo wa chini wa kichwa chenyewe. */
.fomu .kadi__kichwa { border-top: 1px solid var(--rangi-mstari); }

/* ---------------------------------------------------------------- Portal */

.shujaa {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 8% -10%, #2a2f36 0%, var(--rangi-eti) 46%, #07080a 100%);
  color: #fff; border-radius: var(--pembe-pana); padding: 30px 22px;
  box-shadow: var(--kivuli-3);
}
.shujaa::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(216, 31, 42, .55), rgba(216, 31, 42, 0) 68%);
  pointer-events: none;
}
.shujaa__gridi { display: grid; gap: 26px; }
.shujaa__ndani { position: relative; z-index: 1; max-width: 620px; }
.shujaa .lebo-ya-eti {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 650; letter-spacing: .02em;
  background: rgba(216, 31, 42, .16); color: #ffc7cc; border: 1px solid rgba(216, 31, 42, .45);
}
.shujaa h1 { font-size: 30px; font-weight: 780; letter-spacing: -.035em; line-height: 1.1; margin-bottom: 10px; }
.shujaa h1 em { font-style: normal; color: #ff5661; }
.shujaa__ndani > p { color: #aeb6c0; font-size: 15.5px; max-width: 52ch; }
.shujaa .titiri { margin-top: 20px; }
.kiungo-eti { color: #b9c1cb; font-size: 14.5px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .22); padding-bottom: 2px; }
.kiungo-eti:hover { color: #fff; border-bottom-color: #fff; }

/* Paneli ya kazi zinazosubiri: neno kuu la ukurasa ni kazi ya leo, si takwimu. */
.paa-ya-kazi {
  position: relative; z-index: 1; padding: 18px 20px 20px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--pembe);
}
.paa__lebo { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8f98a4; }
.paa__thamani { margin: 0; font-size: 40px; font-weight: 780; line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.paa__thamani--kazi { color: #ff5661; }
.paa__maelezo { margin: 6px 0 16px; font-size: 13.5px; color: #aeb6c0; max-width: 26ch; }
.paa__nyorofu { margin: 12px 0 0; font-size: 12.5px; color: #8f98a4; }

.vituo-vya-kazi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.kituo {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--rangi-nyanda); border: 1px solid var(--rangi-mstari);
  border-radius: var(--pembe); padding: 16px; text-decoration: none; color: inherit;
  box-shadow: var(--kivuli-2);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.kituo:hover { transform: translateY(-2px); border-color: #cfd6dd; color: inherit; box-shadow: var(--kivuli-3); }
.kituo__alama {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--pembe-ndogo);
  display: grid; place-items: center;
  background: var(--rangi-kazi-epuka); color: var(--rangi-kazi-giza);
}
.kituo__alama svg { width: 19px; height: 19px; display: block; }
.kituo__maudhui { min-width: 0; }
.kituo__jina { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.kituo__maelezo { font-size: 13.5px; color: var(--rangi-nyorofu); margin: 2px 0 0; }
.kituo__mshale { margin-inline-start: auto; align-self: center; color: #c2c9d1; display: grid; place-items: center; transition: transform .14s ease, color .14s ease; }
.kituo__mshale svg { width: 12px; height: 12px; display: block; }
.kituo:hover .kituo__mshale { transform: translateX(3px); color: var(--rangi-kazi); }

/* Muhtasari wa takwimu: kadi moja yenye mgawanyiko, si visanduku vinne vilivyotawanyika. */
.muhtasari {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin-top: 16px; background: var(--rangi-mstari);
  border: 1px solid var(--rangi-mstari); border-radius: var(--pembe);
  box-shadow: var(--kivuli-1); overflow: hidden;
}
.muhtasari__kipande { padding: 14px 16px; background: var(--rangi-nyanda); }
.muhtasari .lebo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--rangi-nyorofu); font-weight: 650; }
.muhtasari .thamani { font-size: 21px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 3px; }
.muhtasari .maelezo-ndogo { font-size: 12.5px; color: var(--rangi-nyorofu); margin-top: 2px; }
.thamani--salama { color: var(--rangi-salama); }
.thamani--hatari { color: var(--rangi-kazi); }

.rekodi { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--rangi-mstari); }
.rekodi:last-child { border-bottom: 0; }
.rekodi > .nukta { margin-top: 6px; }
.rekodi__mwili { flex: 1 1 auto; min-width: 0; }
.rekodi__mstari { display: flex; align-items: baseline; gap: 10px; }
.rekodi__jina { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: 14.5px; text-decoration: none; }
.rekodi__jina:hover { text-decoration: underline; }
.rekodi__nyorofu { margin-top: 2px; font-size: 13px; color: var(--rangi-nyorofu); }
.rekodi__bei { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 650; font-size: 14px; white-space: nowrap; }

.vipaji { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; }
.vipaji .kadi__ndani { padding: 18px; }
.vipaji h2 { font-size: 16px; }
.vipaji p { font-size: 14px; color: var(--rangi-nyorofu); }
.vipaji__alama { display: block; margin-bottom: 10px; color: var(--rangi-kazi); }
.vipaji__alama svg { width: 22px; height: 22px; display: block; }
.kituo__alama--hatari { background: var(--rangi-kazi); color: #fff; }
.kadi--kiungo { margin-top: 16px; border-color: #f3cfcd; }
.kiungo-dhaifu--kazi { color: var(--rangi-kazi-giza); font-weight: 600; }
.kiungo-dhaifu--kazi:hover { color: var(--rangi-kazi); }
.rangi-kazi { color: var(--rangi-kazi); }
.rangi-salama { color: var(--rangi-salama); }

/* ---------------------------------------------------------------- Dashibodi */

/* Vituo sita vya dashibodi hukaa kwenye gridi moja; upana wa safu hubadilika
   mara moja tu kwa skrini kubwa (angalia @media 1040px) ili safu zikae kamili. */
/* Ndani ya gridi, mpemo wa juu wa ".kadi + .kadi" hupunguza urefu wa kipande
   kimoja na kuvurugza mistari — futa hapa, gridi ndiyo inayotengeneza nafasi. */
.vituo > .kadi, .ripoti-moja > .kadi { margin-top: 0; }
.vituo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kitu { padding: 15px 16px; box-shadow: var(--kivuli-1); }
.kitu .lebo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--rangi-nyorofu); font-weight: 650; }
.kitu .thamani { font-size: 20px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kitu .maelezo-ndogo { font-size: 12.5px; color: var(--rangi-nyorofu); margin-top: 2px; }
.kitu--hatari { border-color: #f3cfcd; }
.kitu--hatari .thamani { color: var(--rangi-kazi); }
.kitu--salama .thamani { color: var(--rangi-salama); }

/* Ripoti tatu hukaa kwenye gridi moja na kadi zote zina urefu sawa (stretch),
   ili msingi wa kadi usipote mahali popote kwenye ukurasa. */
.ripoti-moja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.paa { padding: 11px 0; font-size: 14px; }
.paa + .paa { border-top: 1px solid var(--rangi-mstari); }
.paa__juu { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.paa .jina { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.paa .kadiria { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--rangi-nyorofu); font-size: 13px; }
.paa .upimo { display: block; height: 8px; background: #eceef1; border-radius: 999px; overflow: hidden; margin-top: 7px; }
.paa .upimo span { display: block; height: 100%; background: linear-gradient(90deg, var(--rangi-kazi-giza), var(--rangi-kazi)); border-radius: 999px; }

.vipindi-cha-kuruka { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
/* Kipindi cha dashibodi: masanduku mawili ya tarehe kwa kizio kimoja, kitufe
   kikubaki kwa upana wake. Urefu wa pamoja (--urefu) unatoka kwenye miundo. */
.kipindi { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; flex: 0 1 auto; }
.kipindi .uga { margin: 0; flex: 1 1 140px; min-width: 0; }
.kipindi .batoni { flex: 0 0 auto; }
.kipindi label { display: block; font-size: 12px; font-weight: 650; color: var(--rangi-nyorofu); margin-bottom: 5px; }

/* ---------------------------------------------------------------- Kuingia */

.kuingia { max-width: 440px; margin: 8px auto 0; }
.kuingia__kichwa { text-align: center; margin-bottom: 20px; }
.kuingia__kichwa img { max-height: 52px; }
.kuingia__kichwa .nembo__maandishi { font-size: 21px; }
.kuingia__kichwa h1 { font-size: 20px; margin-top: 12px; }
.kuingia__kichwa p { color: var(--rangi-nyorofu); font-size: 14.5px; margin: 0; }
.kuingia .uga + .uga { margin-top: 14px; }
.kuingia .fomu-chini { justify-content: center; position: static; box-shadow: none; backdrop-filter: none; }
.kuingia .batoni { width: 100%; }
.kuingia-chini { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--rangi-nyorofu); }

/* ------------------------------------------------------------ Skrini kubwa */

@media (min-width: 620px) {
  .nembo__maandishi { display: inline-flex; }
  .kicho__jina { display: inline; }
  .menyu__mshale { display: inline; }
  .fomu .gridi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .fomu .uga--kulia { grid-column: 2; }
  .fomu .uga--pana-mbili { grid-column: span 2; }
  .maelezo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .maelezo dl { border-bottom: 0; }
  .vituo-vya-kazi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kitu .thamani { font-size: 23px; }
  .vipaji { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shujaa { padding: 44px 38px; }
  .shujaa h1 { font-size: 38px; }
  .muhtasari .thamani { font-size: 24px; }
  .rekodi__jina { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bendera--nukta { font-size: 13.5px; gap: 8px; }
}

@media (min-width: 780px) {
  .ripoti-moja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Kadi ya tatu hupanda upana wote: hakuna nusu safu iliyobaki tupu. */
  .ripoti-moja > .kadi:last-child { grid-column: 1 / -1; }
}

@media (min-width: 860px) {
  .juu__ndani { padding: 0 24px; min-height: 60px; }
  .navigesheni { flex: 0 1 auto; margin-inline: auto; overflow: visible; mask-image: none; }
  .navigesheni a { padding: 0 14px; font-size: 14.5px; }
  .maudhui { padding: 30px 24px 72px; }
  h1 { font-size: 28px; }
  .kichwa-cha-kipande > .titiri { flex: 0 0 auto; justify-content: flex-end; }

  /* Jedwali kamili: safu tano tu — zinazohitajika kupata mkataba haraka.
     Upana wa kila safu ni sehemu ya gridi moja ya vizio 24 (1·9·3·4·3·4), kwa
     hivyo mistari ya safu hukaa mahali pamoja kila ukurasa, haiendi na maudhui. */
  .jedwali-ndani { padding: 0; }
  .jedwali { min-width: 0; font-size: 14px; }
  .jedwali thead { display: table-header-group; }
  .jedwali tbody { display: table-row-group; }
  .jedwali tr { display: table-row; grid-template-areas: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .jedwali td, .jedwali th { display: table-cell; grid-area: auto; }
  .jedwali th, .jedwali td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--rangi-mstari); vertical-align: middle; }
  .jedwali th { position: sticky; top: 60px; z-index: 3; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--rangi-nyorofu); font-weight: 700; white-space: nowrap; background: var(--rangi-mandhari); }
  .jedwali td::before { content: none; }
  .jedwali th.th-hali, .jedwali td.hali { width: 4.1667%; }
  .jedwali th.th-hali { padding-inline: 3px; text-align: center; }
  .jedwali th.th-mkataba, .jedwali td.safu-kuu { width: 37.5%; }
  .jedwali th.th-tarehe, .jedwali td.tarehe { width: 12.5%; }
  .jedwali th.th-pikipiki, .jedwali td.pikipiki { width: 16.6667%; }
  .jedwali th.th-bei, .jedwali td.bei { width: 12.5%; }
  .jedwali th.th-matendo, .jedwali td.matendo { width: 16.6667%; }
  .jedwali td.hali { position: static; text-align: center; }
  .jedwali td.hali .nukta { width: 9px; height: 9px; box-shadow: none; }
  .jedwali td.safu-kuu { padding-inline-end: 14px; white-space: nowrap; }
  .jedwali td.safu-kuu > a { display: inline-block; font-size: 14.5px; }
  .jedwali td.safu-kuu .aina { margin-top: 0; margin-inline-start: 8px; }
  .jedwali td.tarehe { font-size: 13.5px; }
  .jedwali td.bei { text-align: right; font-size: 14.5px; }
  .jedwali th.th-bei { text-align: right; }
  .jedwali tbody tr:hover { background: #f7f9fb; }
  .jedwali tbody tr:last-child td { border-bottom: 0; }
  .jedwali td.matendo { display: table-cell; margin: 0; padding: 6px 10px 6px 8px; border-top: 0; text-align: right; white-space: nowrap; }
  .jedwali th.th-matendo { text-align: right; padding-inline-end: 12px; }
  .jedwali td.matendo .matendo__ndani { display: inline-flex; }
}

/* Skrini ya kati: jedwali lina safu sita lakini nafasi ni ndogo. Punguza mpemo
   na kitufe kikuu kiwe ikoni pekee ili kila rekodi ihali mstari mmoja. */
@media (min-width: 860px) and (max-width: 1039px) {
  .maudhui { padding: 24px 14px 60px; }
  .jedwali th, .jedwali td { padding-inline: 9px; }
  .jedwali td.safu-kuu > a { font-size: 14px; }
  .jedwali td.safu-kuu .aina { font-size: 11px; padding: 2px 7px; }
  .jedwali td.tarehe { font-size: 13px; }
  .jedwali td.bei { font-size: 14px; }
  .jedwali td.matendo { padding-inline: 4px 6px; }
  .jedwali .tendo--kuu .tendo__maandishi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jedwali .tendo--kuu { width: 32px; padding: 0; }
}

/* ------------------------------------------------- Fomu ya mkataba: skrini moja
   Reli ya kushoto na gridi ya tatu huja mapema (940px) kuliko mahali pengine
   panapotatiza. Kipimo hiki si cha upambo: chini yake kundi la watu hunaswa
   safu mbili, "Kata ya mteja" hulala chini ya mkono wa skrini, na mratibu
   haoni namba ya mwisho anayoihitaji. Upana wa reli (172px) umechaguliwa kwa
   kizio cha kifupi kinachoweza kubeba vichwa vilivyourefu — hakuna jina la
   kundi lililopunguzwa ili kufinya fomu. */
@media (min-width: 940px) {
  .fomu .gridi--tatu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fomu--mkataba .kundi { display: grid; grid-template-columns: 172px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .fomu--mkataba .kundi__lebo { margin: 0; padding-top: 4px; }
}

/* Skrini fupi (dirisha la programu, kompyuta ndogo): upau wa kusave unanata
   chini ya skrini na kufunika safu ya mwisho. Hupunguzwa mpemo wa juu na wa
   upau pekee — hakuna taarifa inayotoweka, ni ukubwa wa herufi. Kwa skrini
   ndefu kanuni hizi hazitumiki, fomu inabaki na kupumzika kwake. */
@media (min-width: 940px) and (max-height: 820px) {
  .kipimo-fomu { padding-top: 16px; }
  .kipimo-fomu .kichwa-cha-kipande { margin-bottom: 10px; }
  .kipimo-fomu .kichwa-cha-kipande h1 { font-size: 22px; }
  .kipimo-fomu .kichwa-cha-kipande p { font-size: 13.5px; line-height: 1.45; }
  .kipimo-fomu .aina-ja { padding: 10px 18px; }
  .kipimo-fomu .chaguo span { min-height: 34px; }
  .kipimo-fomu .fomu-chini { padding: 10px 18px; }
  /* Mpemo wa ndani ya kundi, si ukubwa wa mata: safu nne zikipunguzwa 5px
     kila moja, upau wa kusave haufuniki tena choja. */
  .fomu--mkataba .kundi { padding: 11px 18px; }
  /* Ushauri wa muundo wa simu hukaa kwenye seli iliyoachwa wazi badala ya
     safu yake mpya — hapo ndipo mpemo wa mwisho wa kundi hutoka. */
  .fomu .uga--kulia { grid-column: auto; }
}

@media (min-width: 1040px) {
  .maelezo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Sita hukaa safu mbili kamili; tatu ni kizio kimoja kwa upana huu. */
  .vituo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .muhtasari { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kitu .thamani { font-size: 26px; }
  .ripoti-moja { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ripoti-moja > .kadi:last-child { grid-column: auto; }
  .vituo-vya-kazi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shujaa { padding: 52px 44px; }
  .shujaa h1 { font-size: 42px; }
  .shujaa__gridi { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); align-items: center; gap: 44px; }
}

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