/* Gombe SS Teachers SACCO: light, flat, square, Inter. No build step: this file is served as it is. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2');}

/* Light only. Text pairs are 4.5:1 or better on white and on --bg. */
:root{
  color-scheme:light;
  --bg:#f4f6f3; --surface:#ffffff; --surface-2:#eef2ed;
  --line:#dfe5dd; --line-2:#c5cfc3;
  --tx:#14201a; --mt:#4f5f55; --mt2:#5b6a60;
  --br:#17633a; --br-d:#0f4a2a; --br-soft:#e8f2eb; --on-br:#ffffff;
  --gold:#8a6508; --gold-fill:#d4a72c; --gold-soft:#fbf3dc;
  --ok:#14783a; --ok-soft:#e6f4ea; --warn:#9a4a06; --warn-soft:#fcf0e1; --bad:#b42318; --bad-soft:#fdecea; --info:#1f4fb4; --info-soft:#e9effb;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sw:236px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 14.5px/1.5 var(--font);}
a{color:var(--br);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em;line-height:1.25}
h1{font-size:21px} h2{font-size:16px} h3{font-size:14.5px}
p{margin:0 0 10px}
small,.muted{color:var(--mt)}
.hint{color:var(--mt2);font-size:12.5px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.right,.list th.right,.list td.right{text-align:right}
.nowrap{white-space:nowrap}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grow{flex:1}
.bp-i{display:inline-flex;width:1.1em;height:1.1em;vertical-align:-.17em;flex:none}
.bp-i svg{width:100%;height:100%}
.only-sm{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Shell */
.shell{display:flex;min-height:100vh}
.side{width:var(--sw);flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:10px;align-items:center;padding:14px 14px 12px;border-bottom:1px solid var(--line);color:var(--tx)}
.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px;flex:none}
.brand b{display:block;font-size:13.5px;line-height:1.2}
.brand span{display:block;font-size:11.5px;color:var(--mt)}
.nav{padding:8px 8px 16px;flex:1}
.nav .group{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mt2);padding:14px 8px 4px}
.nav a{display:flex;gap:10px;align-items:center;padding:7px 8px;color:var(--tx);border-radius:3px;font-weight:500}
.nav a:hover{background:var(--surface-2);text-decoration:none}
.nav a.on{background:var(--br-soft);color:var(--br-d)}
.nav a .bp-i{color:var(--mt)} .nav a.on .bp-i{color:var(--br)}
.nav .count{margin-left:auto;background:var(--gold-fill);color:#2b1d00;font-size:11px;font-weight:700;padding:0 6px;border-radius:9px;line-height:18px}
.side-foot{border-top:1px solid var(--line);padding:10px 8px}
.who{display:flex;gap:9px;align-items:center;padding:4px 8px 8px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--br-soft);color:var(--br-d);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.who b{display:block;font-size:13px;line-height:1.2}
.who span{font-size:11.5px;color:var(--mt)}
.linkbtn{display:flex;gap:10px;align-items:center;width:100%;padding:7px 8px;border:0;background:none;color:var(--mt);font:inherit;font-weight:500;cursor:pointer;border-radius:3px;text-align:left}
.linkbtn:hover{background:var(--surface-2);color:var(--tx)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:none}
.content{padding:22px 26px 40px;max-width:1180px;width:100%}
.backdrop{display:none}

/* Page head */
.head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.head p{margin:3px 0 0;color:var(--mt)}
.crumb{font-size:12.5px;color:var(--mt);margin-bottom:4px}
.crumb a{color:var(--mt)}

/* Panels: flat, a thin border, no shadow */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;margin-bottom:16px}
.panel>.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel>.pb{padding:14px 16px}
.panel>.pb.tight{padding:0}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols>.panel{margin-bottom:0}
.stack>*+*{margin-top:16px}

/* Figures: one row of numbers divided by rules */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:4px;margin-bottom:16px}
.fig{padding:13px 16px;border-right:1px solid var(--line);min-width:0}
.fig:last-child{border-right:0}
.fig .k{font-size:12px;color:var(--mt);font-weight:500}
.fig .v{font-size:19px;font-weight:650;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fig .s{font-size:12px;color:var(--mt2);margin-top:1px}
.fig.gold .v{color:var(--gold)}
.fig.br .v{color:var(--br)}
dl.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:0}
dl.facts dt{color:var(--mt)}
dl.facts dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
dl.facts dd.num{white-space:normal}

/* Tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.list{width:100%;border-collapse:collapse;font-size:13.5px}
.list th{font-size:12px;font-weight:600;color:var(--mt);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.list td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.list tr:last-child td{border-bottom:0}
.list tfoot td{font-weight:650;background:var(--surface-2);border-top:1px solid var(--line-2)}
.list tr.dim td{color:var(--mt2)}
.list tr.dim td s{text-decoration-color:var(--mt2)}
.list .sub{display:block;font-size:12px;color:var(--mt2)}
.list a.rowlink{color:var(--tx);font-weight:500}
.plus{color:var(--ok)} .minus{color:var(--bad)}
.empty{padding:26px 16px;text-align:center;color:var(--mt)}

/* Badges */
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:3px;background:var(--surface-2);color:var(--mt);white-space:nowrap;border:1px solid var(--line)}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:#c4e3cd}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:#efd3b0}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:#f3c7c2}
.badge.info{background:var(--info-soft);color:var(--info);border-color:#c9d6f3}
.badge.gold{background:var(--gold-soft);color:var(--gold);border-color:#ecd9a3}

/* Buttons */
.btn{display:inline-flex;gap:7px;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid var(--line-2);background:var(--surface);color:var(--tx);font:500 14px var(--font);border-radius:4px;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn.primary{background:var(--br);border-color:var(--br);color:var(--on-br)}
.btn.primary:hover{background:var(--br-d)}
.btn.danger{color:var(--bad);border-color:#efc2bd}
.btn.danger:hover{background:var(--bad-soft)}
.btn.small{min-height:30px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* Forms */
.form{max-width:640px}
.field{margin-bottom:14px}
.field>label,.label{display:block;font-weight:550;font-size:13.5px;margin-bottom:5px}
.field .hint{margin-top:4px}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=search],select,textarea{width:100%;min-height:38px;padding:7px 10px;border:1px solid var(--line-2);border-radius:4px;background:#fff;color:var(--tx);font:400 14.5px var(--font)}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--br);outline-offset:1px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad)}
.err{color:var(--bad);font-size:12.5px;margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.choice{display:flex;gap:8px;flex-wrap:wrap}
.choice label{display:flex;gap:7px;align-items:center;border:1px solid var(--line-2);border-radius:4px;padding:7px 11px;cursor:pointer;font-weight:500;background:#fff}
.choice input{margin:0;accent-color:var(--br)}
.choice label:has(input:checked){border-color:var(--br);background:var(--br-soft);color:var(--br-d)}
.check{display:flex;gap:8px;align-items:center}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;padding:12px 16px;border-bottom:1px solid var(--line)}
.filters .field{margin:0;min-width:140px}
.filters label{font-size:12px;color:var(--mt);font-weight:500;margin-bottom:3px}

/* A worked-out figure (loan quote, share cost) */
.calc{border:1px solid var(--line);background:var(--surface-2);border-radius:4px;padding:12px 14px;margin:4px 0 14px}
.calc .big{font-size:22px;font-weight:700;color:var(--br-d);font-variant-numeric:tabular-nums}
.calc dl.facts{font-size:13.5px}

/* Messages */
.flash{border:1px solid;border-radius:4px;padding:10px 14px;margin-bottom:16px;display:flex;gap:9px;align-items:flex-start}
.flash.ok{background:var(--ok-soft);border-color:#c4e3cd;color:#0d5a2b}
.flash.bad{background:var(--bad-soft);border-color:#f3c7c2;color:#8f1b12}
.flash.info{background:var(--info-soft);border-color:#c9d6f3;color:#173d8c}
.flash.warn{background:var(--warn-soft);border-color:#efd3b0;color:#7a3a05}
.flash .bp-i{margin-top:2px}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a{padding:8px 12px;color:var(--mt);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--tx);text-decoration:none}
.tabs a.on{color:var(--br-d);border-bottom-color:var(--br)}
.tabs .count{font-size:11px;background:var(--surface-2);border-radius:9px;padding:0 6px;margin-left:4px}

/* Waiting-for-you list */
.todo{list-style:none;margin:0;padding:0}
.todo li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.todo li:last-child{border-bottom:0}
.todo .what b{display:block}
.todo .what span{font-size:12.5px;color:var(--mt)}

/* Loan timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 14px 22px}
.timeline li::before{content:"";position:absolute;left:5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--br)}
.timeline li::after{content:"";position:absolute;left:8.5px;top:16px;bottom:0;width:1px;background:var(--line-2)}
.timeline li:last-child::after{display:none}
.timeline li.bad::before{background:var(--bad)}
.timeline b{font-weight:600}
.timeline .when{font-size:12px;color:var(--mt2)}
.steps{display:flex;gap:0;margin:0 0 16px;padding:0;list-style:none;border:1px solid var(--line);border-radius:4px;background:var(--surface);overflow-x:auto}
.steps li{flex:1;min-width:120px;padding:10px 12px;border-right:1px solid var(--line);font-size:12.5px;color:var(--mt2)}
.steps li:last-child{border-right:0}
.steps li b{display:block;font-size:13px;color:var(--mt)}
.steps li.done b{color:var(--ok)}
.steps li.now{background:var(--gold-soft)}
.steps li.now b{color:var(--gold)}
.steps li.stop b{color:var(--bad)}

/* Pagination */
.pager{display:flex;gap:6px;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--mt)}

/* Sign-in */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:26px 24px}
.auth-brand{text-align:center;margin-bottom:20px}
.auth-brand img{width:64px;height:64px}
.auth-brand h1{font-size:19px;margin-top:10px}
.auth-brand p{color:var(--mt);margin:4px 0 0;font-size:13px}
.auth .btn{width:100%;min-height:42px}
.auth-foot{text-align:center;font-size:12.5px;color:var(--mt2);margin-top:16px}
.pw{position:relative}
.pw button{position:absolute;right:4px;top:4px;height:30px;border:0;background:none;color:var(--mt);cursor:pointer;padding:0 8px;font:500 12.5px var(--font)}

/* Receipt (also printed) */
.receipt{max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:22px}
.receipt .rh{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.receipt .rh img{width:44px;height:44px}
.receipt .amount{font-size:26px;font-weight:700;color:var(--br-d);margin:6px 0 12px}
.stamp{display:inline-block;border:2px solid var(--bad);color:var(--bad);font-weight:700;padding:2px 10px;transform:rotate(-4deg);letter-spacing:.06em}

/* Phone */
@media (max-width: 900px){
  .cols,.cols.c3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .18s ease}
  body.menu-open .side{transform:none}
  body.menu-open .backdrop{display:block;position:fixed;inset:0;background:rgba(20,32,26,.35);z-index:30}
  .top{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .top button{border:0;background:none;color:var(--tx);font-size:20px;padding:6px;cursor:pointer;display:flex}
  .top img{width:28px;height:28px}
  .top b{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .content{padding:16px 16px 32px}
  .two,.three{grid-template-columns:minmax(0,1fr)}
  dl.facts{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:6px 12px}
  .figs{grid-template-columns:1fr 1fr}
  .fig{border-bottom:1px solid var(--line)}
  .fig:nth-child(2n){border-right:0}
  .fig .v{font-size:17px}
  h1{font-size:19px}
  .head .actions{width:100%}
  .list th,.list td{padding:8px 10px}
  .hide-sm{display:none}
  .only-sm{display:table-cell}
}

@media print{
  .side,.top,.no-print,.head .actions,.flash{display:none!important}
  body{background:#fff}
  .content{padding:0}
  .panel,.receipt{border:0}
}

/* Rows and list items that open a page (data-href) */
[data-href]{cursor:pointer}
.list tr[data-href]:hover td,.todo li[data-href]:hover{background:var(--surface-2)}
.list tr[data-href]:active td,.todo li[data-href]:active{background:var(--br-soft)}

/* Searchable picker (select[data-search]) */
.combo{position:relative}
.combo input{padding-right:30px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6a60' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 9px center/16px}
.combo.bad input{border-color:var(--bad)}
.combo-list{position:absolute;z-index:25;left:0;right:0;top:calc(100% + 2px);margin:0;padding:4px 0;list-style:none;background:#fff;border:1px solid var(--line-2);border-radius:4px;max-height:264px;overflow-y:auto}
.combo-list li{padding:8px 11px;cursor:pointer;font-size:14px}
.combo-list li.on{background:var(--br-soft);color:var(--br-d)}
.combo-list li[aria-selected=true]{font-weight:600}
.combo-list li.muted{cursor:default}
.filters .combo{min-width:200px}
.top a.home{display:flex;align-items:center;gap:10px;color:var(--tx);min-width:0}
.top a.home:hover{text-decoration:none}

@media (max-width: 760px){
  .actions .btn{flex:1 1 auto}
  .head .actions{gap:6px}
  .filters{padding:10px 12px}
  .filters .field,.filters .combo{min-width:0;flex:1 1 140px}
  .filters .btn{flex:0 0 auto}
  .panel>.ph{padding:11px 12px}
  .panel>.pb{padding:12px}
  .todo li{padding:11px 12px}
  .list td.right,.list th.right{padding-left:6px}
  .receipt{padding:16px}
  .steps li{min-width:104px;padding:8px 10px}
  input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=search],select,textarea{font-size:16px} /* no zoom-in on iPhone */
}