/* ============================================================
   Kisumu Cadastral Portal — brand theme layer over Bootstrap 4
   Bootstrap supplies the components (cards, navbar, forms,
   buttons, switches, progress, list-group, tables, tooltips);
   this file supplies the Mapnovate palette, dark/light theming,
   and the map-app layout that Bootstrap does not cover.
   ============================================================ */
:root{
  --ink:#081d3a; --deep:#061530; --panel:#0d2649; --panel2:#0a2040;
  --line:#1b3a63; --line2:#28497a;
  --text:#e6ecef; --dim:#9fb0c0; --faint:#6e8093;
  --brass:#00a896; --brass-hi:#2ecc80;
  --ok:#2ecc80; --cond:#e0a93b; --bad:#d95448; --und:#5b6770; --unz:#44515a;
  --btn-ink:#04231f;
  --mono:'Poppins',system-ui,sans-serif;
  --disp:'Poppins',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
}
html[data-theme="light"]{
  --ink:#e6ecef; --deep:#dbe3e8; --panel:#ffffff; --panel2:#f2f6f8;
  --line:#ccd6dc; --line2:#b6c4cc;
  --text:#081d3a; --dim:#5b6770; --faint:#8494a0;
  --brass:#00a896; --brass-hi:#008576;
  --ok:#1fae63; --cond:#c08017; --bad:#c74335; --und:#5b6770; --unz:#8494a0;
  --btn-ink:#04231f;
}

/* ---------- base / Bootstrap re-skin ---------- */
html,body{height:100%;overflow:hidden}
body{font-family:var(--body);background:var(--ink);color:var(--text)}
#map{position:absolute;inset:0;background:#061530}
html[data-theme="light"] #map{background:#dbe3e8}
.leaflet-container{font-family:var(--body)}

.card{background:var(--panel);border-color:var(--line2);color:var(--text)}
.card-header{background:transparent;border-bottom-color:var(--line)}
.card-footer{background:transparent;border-top-color:var(--line)}

.form-control{background:var(--panel2);border-color:var(--line);color:var(--text);font-family:var(--mono)}
.form-control:focus{background:var(--panel2);border-color:var(--brass);color:var(--text);
  box-shadow:0 0 0 .15rem rgba(0,168,150,.35)}
.form-control::placeholder{color:var(--faint)}
label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-family:var(--mono)}

.btn{font-family:inherit}
.btn:focus{box-shadow:0 0 0 .15rem rgba(0,168,150,.35)}
.btn-brand{background:var(--brass);border-color:var(--brass);color:var(--btn-ink);letter-spacing:.08em;font-family:var(--disp)}
.btn-brand:hover,.btn-brand:focus{background:var(--brass-hi);border-color:var(--brass-hi);color:var(--btn-ink)}
.btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-hi)}
.close{color:var(--faint);text-shadow:none;opacity:1;font-weight:400}
.close:hover{color:var(--bad)}

.list-group-item{background:var(--panel);border-color:var(--line);color:var(--text);font-family:var(--mono);font-size:12px}
.list-group-item-action:hover,.list-group-item-action:focus{background:var(--panel2);color:var(--text)}

.progress{background:var(--deep)}

.table{color:var(--text)}
.table th,.table td{border-color:var(--line)}

.tooltip-inner{background:#000;font-size:11px;font-family:var(--body)}
.bs-tooltip-right .arrow::before,.bs-tooltip-auto[x-placement^="right"] .arrow::before{border-right-color:#000}

.badge{border:1px solid;font-family:var(--mono);font-weight:500;letter-spacing:.06em}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 70% 20%, #0e3266 0%, var(--ink) 60%)}
html[data-theme="light"] #login{background:radial-gradient(1200px 700px at 70% 20%, #ffffff 0%, var(--ink) 75%)}
#login::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,var(--dim) 40px),
  repeating-linear-gradient(90deg,transparent,transparent 39px,var(--dim) 40px)}
.login-card{position:relative;width:min(420px,92vw)}
.login-card::before{content:"";position:absolute;top:10px;left:10px;right:10px;bottom:10px;
  border:1px dashed rgba(0,168,150,.4);border-radius:3px;pointer-events:none;z-index:1}
.login-card .card-body{position:relative;z-index:2}
.beacon{width:44px;height:44px;flex:none}
.login-card h1{font-family:var(--disp);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.login-card h1 span{color:var(--brass)}
.sub{font-size:11.5px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono)}
.role-btn{background:var(--panel2);border:1px solid var(--line);color:var(--dim);font-size:12px;font-weight:600;letter-spacing:.04em}
.role-btn.on{background:rgba(0,168,150,.14);border-color:var(--brass);color:var(--brass-hi)}
#loginBtn{font-size:16px}
#loginErr{color:var(--bad);min-height:16px;font-family:var(--mono)}
.hint{border-top:1px solid var(--line);font-size:11px;color:var(--faint);font-family:var(--mono);line-height:1.7}
.hint b{color:var(--dim)}
.dev-credit span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dev-credit .lockup-img{height:34px;width:auto}
.theme-btn{width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);
  color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:15px;padding:0}
.theme-btn:hover{border-color:var(--brass);color:var(--brass)}
.back-link{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:20px;
  background:var(--panel2);border:1px solid var(--line);color:var(--dim);font-size:12.5px;
  font-weight:600;white-space:nowrap;transition:border-color .2s ease,color .2s ease}
.back-link:hover{border-color:var(--brass);color:var(--brass);text-decoration:none}
.login-theme{position:absolute;top:14px;right:14px;z-index:3}

/* ---------- TOP BAR (navbar) ---------- */
#topbar{height:52px;z-index:1200;background:linear-gradient(180deg,rgba(8,29,58,.97),rgba(8,29,58,.92));
  border-bottom:1px solid var(--line)}
html[data-theme="light"] #topbar{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(242,246,248,.94))}
#topbar .beacon{width:28px;height:28px}
.brand{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;color:var(--text)}
.brand span{color:var(--brass)}
.brand small{display:block;font-family:var(--mono);font-weight:400;font-size:8.5px;letter-spacing:.22em;
  color:var(--faint);text-transform:uppercase;margin-top:-2px}
#searchWrap{position:relative;max-width:430px}
#search{padding-left:34px;font-size:13px}
#searchWrap>svg{position:absolute;left:10px;top:8px;opacity:.5;z-index:5}
#suggest{position:absolute;top:36px;left:0;right:0;z-index:1300;max-height:280px;overflow:auto;display:none;border-radius:4px}
#suggest.show{display:block}
#suggest .list-group-item{cursor:pointer}
#suggest .sug-lr{color:var(--brass-hi)}
#suggest .sug-pr{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#userChip{background:var(--panel2);border:1px solid var(--line);padding:5px 12px 5px 7px;font-size:12px;color:var(--text)}
#userChip .dot{width:22px;height:22px;border-radius:50%;background:var(--brass);color:var(--btn-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
#userChip .rl{color:var(--dim);font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
#logout{color:var(--faint);font-size:11px;text-decoration:underline}
#logout:hover{color:var(--bad)}

/* ---------- LEFT TOOL RAIL ---------- */
#rail{position:absolute;left:0;top:52px;bottom:0;width:52px;z-index:1100;background:rgba(6,21,48,.96);
  border-right:1px solid var(--line);align-items:center;padding-top:10px;justify-content:flex-start}
html[data-theme="light"] #rail{background:rgba(255,255,255,.96)}
#rail.btn-group-vertical>.btn{flex:0 0 auto}
.rail-btn{width:38px;height:38px;border-radius:6px!important;background:transparent;border:1px solid transparent;
  color:var(--dim);display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:6px}
.rail-btn:hover{background:var(--panel);color:var(--text)}
.rail-btn.on{background:rgba(0,168,150,.15);border-color:var(--brass);color:var(--brass-hi)}
.rail-sep{width:26px;height:1px;background:var(--line);margin:4px 0 10px}

/* ---------- POP PANELS (layers / basemaps / filters) ---------- */
.pop-panel{position:absolute;left:58px;top:58px;z-index:1150;width:270px;display:none;
  max-height:calc(100vh - 130px);overflow:auto}
#ppLayers{width:340px}
.pop-panel.open{display:block}
.pp-head{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-hi);padding:.65rem .9rem}
.pp-body{padding:.6rem .9rem .9rem}
.pp-sec{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);margin:12px 0 6px}
.pp-sec:first-child{margin-top:0}

/* layer switches (Bootstrap custom-switch, generated in app.js) */
#lyrList{padding-left:4px}
.lyr-row.custom-switch{padding-left:2.6rem}
.lyr-row{padding:4px 0;font-size:12.5px}
.lyr-row .custom-control-label{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer}
.lyr-row .custom-control-label .sw{display:inline-block;width:18px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:7px}
.custom-control-input:checked~.custom-control-label::before{background-color:var(--brass);border-color:var(--brass)}
.custom-control-label::before{background-color:var(--deep);border-color:var(--line2)}
.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 .15rem rgba(0,168,150,.35)}
.lyr-note{font-size:10px;color:var(--faint);font-family:var(--mono);margin:-2px 0 4px 2.6rem}

/* basemap grid */
.bm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bm-card{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--panel2);text-align:left;padding:0}
.bm-card .th{height:44px;display:block}
.bm-card .nm{display:block;padding:5px 8px;font-size:11px;color:var(--dim)}
.bm-card.on{border-color:var(--brass)}
.bm-card.on .nm{color:var(--brass-hi)}

/* symbology segmented control */
.style-seg{border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:6px 0 2px}
.style-seg .btn{background:transparent;border:none;color:var(--dim);font-size:10.5px;font-weight:600;
  border-radius:0;padding:.35rem .1rem}
.style-seg .btn.on{background:rgba(0,168,150,.16);color:var(--brass-hi)}

/* filter chips (generated in app.js) */
.f-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;
  padding:4px 11px;font-size:11.5px;color:var(--dim);background:var(--panel2);margin:0 6px 6px 0}
.f-chip:hover{color:var(--text)}
.f-chip.on{border-color:var(--brass);color:var(--brass-hi);background:rgba(0,168,150,.12)}
.f-chip.f-reset{border-color:var(--bad);color:var(--bad)}
.f-count{font-family:var(--mono);font-size:10px;color:var(--faint)}

/* ---------- AUDIT SIDEBAR ---------- */
#audit{position:absolute;right:0;top:52px;bottom:0;width:378px;z-index:1150;background:var(--panel2);
  border:none;border-left:1px solid var(--line2);transform:translateX(100%);transition:transform .22s ease}
#audit.open{transform:none}
.au-head{padding:14px 18px 10px;position:relative}
.au-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.au-lr{font-family:var(--mono);font-size:25px;font-weight:600;color:var(--brass-hi);letter-spacing:.02em;margin-top:2px}
.au-close{position:absolute;top:12px;right:12px;border:1px solid var(--line);border-radius:4px;color:var(--dim);
  width:26px;height:26px;font-size:14px;padding:0;line-height:1}
.au-close:hover{color:var(--bad);border-color:var(--bad)}
.au-body{overflow-y:auto;padding:14px 18px 24px}

.stampwrap{display:flex;justify-content:center;margin:8px 0 16px;position:relative;height:74px}
.stamp{transform:rotate(-7deg);border:3px double;border-radius:6px;padding:8px 22px;text-align:center;
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;line-height:1.05;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 .45'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 .45'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.stamp .big{font-size:23px;font-weight:700}
.stamp .sm{font-size:9px;font-family:var(--mono);letter-spacing:.18em}

/* register table (Bootstrap table, generated in app.js) */
.kv{margin-bottom:14px}
.kv th{background:var(--deep);color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;width:118px;vertical-align:middle}
.kv td{font-family:var(--mono);font-weight:500;font-size:12.5px;word-break:break-word}
.kv .masked{color:var(--faint);font-style:italic;font-size:11px}

.au-sec{font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.au-sec::after{content:"";flex:1;height:1px;background:var(--line)}
.zone-card{border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:4px;padding:10px 12px;
  background:var(--panel);margin-bottom:12px}
.zone-card .zn{font-weight:600;font-size:14px}
.zone-card .zd{font-size:11.5px;color:var(--dim);margin:3px 0 8px;line-height:1.45}
.zgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.zg{background:var(--deep);border-radius:3px;padding:6px 4px;text-align:center}
.zg .n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--brass-hi)}
.zg .l{font-size:8.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}

/* encroachment gauges (Bootstrap progress, generated in app.js) */
.gauge{margin-bottom:10px}
.gauge .g-top{font-size:11.5px;margin-bottom:4px}
.gauge .g-top b{font-family:var(--mono)}
.gauge .progress{height:8px;border-radius:4px}

.au-actions{display:flex;gap:8px;margin-top:16px}
.au-actions .btn{font-size:11.5px;font-weight:600;padding:.5rem .35rem}
.sizewarn{font-size:11px;font-family:var(--mono);margin-top:6px}
.au-foot{padding:8px 18px}
.au-foot img{height:22px;width:auto}
.au-foot span{font-size:9.5px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}

/* ---------- DASHBOARD DRAWER ---------- */
#dashTab{position:absolute;left:64px;bottom:0;z-index:1140;background:var(--panel);border:1px solid var(--line2);
  border-bottom:none;border-radius:6px 6px 0 0;padding:7px 16px;font-family:var(--disp);font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass-hi);display:flex;gap:8px;align-items:center}
#dash{position:absolute;left:64px;bottom:0;z-index:1145;width:min(720px,calc(100vw - 460px));background:rgba(6,21,48,.97);
  border:1px solid var(--line2);border-bottom:none;border-radius:8px 8px 0 0;transform:translateY(105%);
  transition:transform .25s ease;box-shadow:0 -14px 50px rgba(0,0,0,.45)}
html[data-theme="light"] #dash{background:rgba(255,255,255,.98)}
#dash.open{transform:none}
.dash-head{padding:10px 16px}
.dash-head h2{font-family:var(--disp);font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-hi);font-weight:600}
.dash-head .close{font-size:16px}
.dash-body{display:grid;grid-template-columns:170px 1fr 1fr;gap:14px;padding:14px 16px 16px}
.donut-wrap{text-align:center}
.donut-lbl{font-size:10px;color:var(--faint);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.stat-list{display:flex;flex-direction:column;gap:7px}
.stat-row{display:flex;align-items:center;gap:8px;font-size:12px}
.stat-row .sw{width:10px;height:10px;border-radius:2px;flex:none}
.stat-row .lb{flex:1;color:var(--dim)}
.stat-row .ct{font-family:var(--mono);font-weight:600}
.mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:9px 11px;cursor:pointer}
.mini:hover{border-color:var(--brass)}
.mini .n{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--brass-hi)}
.mini .l{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;margin-top:2px;line-height:1.3}
@media (max-width:1100px){.dash-body{grid-template-columns:150px 1fr}.mini-cards{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}}

/* ---------- STATUS BAR + LEGEND ---------- */
#status{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:1100;background:rgba(6,21,48,.9);border:1px solid var(--line);
  border-radius:4px;padding:5px 12px;font-family:var(--mono);font-size:10.5px;color:var(--dim);gap:14px;white-space:nowrap}
html[data-theme="light"] #status{background:rgba(255,255,255,.94)}
#status .brass{color:var(--brass-hi)}
#legend{position:absolute;right:8px;bottom:44px;z-index:1100;background:rgba(6,21,48,.94);border:1px solid var(--line);
  border-radius:5px;padding:10px 13px;font-size:11px;max-width:210px;display:none}
html[data-theme="light"] #legend{background:rgba(255,255,255,.94)}
#legend.open{display:block}
#legend h3{font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-hi);margin-bottom:6px}
.lg-row{display:flex;align-items:center;gap:8px;padding:2.5px 0;color:var(--dim)}
.lg-row .sw{width:14px;height:10px;border-radius:2px;flex:none}
.lg-row .ln{width:14px;height:2.5px;flex:none}

/* ---------- MAP SKINS ---------- */
.txtlbl{background:none;border:none;box-shadow:none}
.txtlbl div{font-family:var(--mono);color:#f2e9c8;text-shadow:0 0 3px #000,0 0 6px #000;white-space:nowrap;font-weight:500}
html[data-theme="light"] .txtlbl div{color:#081d3a;text-shadow:0 0 3px #fff,0 0 5px #fff}
.mkicon{background:none;border:none}
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border:1px solid var(--line2);
  border-radius:5px;font-family:var(--mono);font-size:12px}
.leaflet-popup-tip{background:var(--panel)}
.leaflet-bar a{background:var(--panel);color:var(--text);border-bottom:1px solid var(--line)}
.leaflet-bar a:hover{background:var(--panel2)}
html[data-theme="light"] .leaflet-bar a{background:#fff;color:#081d3a}
.leaflet-control-scale-line{background:rgba(11,34,38,.8);color:var(--dim);border-color:var(--line2);font-family:var(--mono)}
.leaflet-control-attribution{background:rgba(6,21,48,.75)!important;color:var(--faint)!important;font-size:9px!important}
.leaflet-control-attribution a{color:var(--dim)!important}
html[data-theme="light"] .leaflet-control-attribution{background:rgba(255,255,255,.8)!important;color:#5b6770!important}
html[data-theme="light"] .leaflet-control-attribution a{color:#00a896!important}

#toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:4000;background:var(--panel);
  border:1px solid var(--brass);color:var(--brass-hi);padding:9px 18px;border-radius:5px;font-size:12.5px;
  font-family:var(--mono);display:none}

/* ---------- Mapnovate logo assets ---------- */
.lg-light{display:none}.lg-dark{display:inline-block}
html[data-theme="light"] .lg-light{display:inline-block}
html[data-theme="light"] .lg-dark{display:none}
.credit{font-size:9.5px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
.credit b{color:var(--brass);font-weight:600}
.mark-credit{gap:5px}
.mark-credit img{height:16px;width:auto;display:none}
html[data-theme="light"] .mark-credit img.lg-light{display:inline-block}
html:not([data-theme="light"]) .mark-credit img.lg-dark{display:inline-block}

/* ---------- PRINT (audit extract) ---------- */
@media print{
  #map,#topbar,#rail,#dash,#dashTab,#status,#legend,.pop-panel,#toast{display:none!important}
  #audit{position:static;transform:none;width:100%;background:#fff;color:#000;border:none}
  :root{--text:#000;--dim:#333;--faint:#555;--panel:#fff;--panel2:#fff;--deep:#f2f2f2;--line:#999;--brass:#7a6215;--brass-hi:#7a6215}
  .au-foot{display:flex!important;border-top:2px solid #081d3a;padding-top:12px;margin-top:16px}
  .au-foot img.lg-light{display:inline-block!important;height:34px}
  .au-foot img.lg-dark{display:none!important}
}

/* ---------- responsive / a11y ---------- */
@media (max-width:820px){
  #audit{width:100vw}
  .brand small{display:none}
  #dash{left:56px;width:calc(100vw - 60px)}
  #searchWrap{max-width:200px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}