:root{--sgbus-green:#65e012;--kelly-green:#3ea70b;--deep-green:#1e8f06;--medium-blue:#0017be;--federal-blue:#000257;--nyanza:#e0f2d6;--ink:#0b1020;--paper:#f7faf4;--card:#fff;--border:#dbe7d2;--muted:#5b6b57;--danger:#d64545;--warn:#e8a13c;--radius:12px;--shadow:0 2px 10px #00025714}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font-family:Poppins,Segoe UI,system-ui,sans-serif;font-size:14px}.app-shell{height:100%;display:flex}.sidebar{background:linear-gradient(180deg, var(--federal-blue), #001070);color:#fff;flex-direction:column;gap:4px;width:220px;min-width:220px;padding:16px 12px;display:flex}.sidebar .brand{align-items:center;padding:6px 10px 18px;display:flex}.sidebar .brand img{width:auto;height:42px}.sidebar a{color:#cfd6ff;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;font-weight:500;text-decoration:none;display:flex}.sidebar a:hover{color:#fff;background:#ffffff14}.sidebar a.active{background:var(--sgbus-green);color:var(--federal-blue);font-weight:600}.sidebar .foot{color:#8f9bd8;margin-top:auto;padding:10px;font-size:11px}.sidebar .foot .product-of{color:#8f9bd8;margin-top:6px;display:block}.sidebar .foot .product-of a{color:#cfd6ff;font-weight:600}.product-of a{color:inherit;text-underline-offset:2px;text-decoration:underline}.flag{vertical-align:-2px;border-radius:2px;width:20px;height:14px;margin-right:6px;box-shadow:0 0 0 1px #00000026}.main{flex-direction:column;flex:1;min-width:0;display:flex}.topbar{background:var(--card);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.topbar h1{margin:0;font-size:16px;font-weight:600}.content{flex:1;padding:20px;overflow:auto}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.card h3{margin:0 0 10px;font-size:14px;font-weight:600}.grid{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}.kpi-strip{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;display:grid}.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}.kpi .v{color:var(--federal-blue);font-size:22px;font-weight:700}.kpi .l{color:var(--muted);margin-top:2px;font-size:11px}.kpi.green .v{color:var(--deep-green)}.kpi.warn .v{color:var(--warn)}.kpi.danger .v{color:var(--danger)}label.f{color:var(--ink);margin:10px 0 4px;font-size:12px;font-weight:600;display:block}input[type=text],input[type=number],select,textarea{border:1px solid var(--border);background:#fff;border-radius:8px;width:100%;padding:9px 10px;font-family:inherit;font-size:13px}input:focus,select:focus,textarea:focus{outline:2px solid var(--sgbus-green);border-color:#0000}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:9px 16px;font-family:inherit;font-size:13px;font-weight:600;display:inline-flex}.btn.primary{background:var(--sgbus-green);color:var(--federal-blue)}.btn.primary:hover{background:#57c60e}.btn.blue{background:var(--medium-blue);color:#fff}.btn.ghost{border:1px solid var(--border);color:var(--ink);background:0 0}.btn.danger{background:var(--danger);color:#fff}.btn.sm{padding:5px 10px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed}.seg{border:1px solid var(--border);border-radius:8px;display:inline-flex;overflow:hidden}.seg button{cursor:pointer;background:#fff;border:none;padding:8px 14px;font-family:inherit;font-size:12px;font-weight:500}.seg button.on{background:var(--federal-blue);color:#fff}.badge{border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.badge.green{background:var(--nyanza);color:var(--deep-green)}.badge.red{color:var(--danger);background:#fde8e8}.badge.blue{color:var(--medium-blue);background:#e6e9ff}.badge.amber{color:#a86e14;background:#fdf1dd}table.tbl{border-collapse:collapse;width:100%;font-size:13px}table.tbl th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--border);padding:8px 10px;font-size:11px}table.tbl td{border-bottom:1px solid var(--border);padding:9px 10px}table.tbl tr:hover td{background:var(--nyanza)}.map-box{border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}.leaflet-container{font-family:inherit}.bell{cursor:pointer;background:0 0;border:none;font-size:20px;position:relative}.bell .dot{background:var(--danger);color:#fff;border-radius:50%;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 3px;font-size:10px;display:flex;position:absolute;top:-4px;right:-6px}.notif-panel{border:1px solid var(--border);border-radius:var(--radius);z-index:1200;background:#fff;width:360px;max-height:480px;position:absolute;top:60px;right:16px;overflow:auto;box-shadow:0 8px 30px #0002572e}.notif-item{border-bottom:1px solid var(--border);cursor:pointer;padding:12px 14px}.notif-item.unread{background:var(--nyanza)}.notif-item .t{font-size:12px;font-weight:600}.notif-item .m{color:var(--muted);margin-top:2px;font-size:12px}.sc-card{border:1px solid var(--border);border-left:4px solid var(--sgbus-green);background:#fff;border-radius:8px;margin-bottom:8px;padding:10px 12px}.sc-card.risk{border-left-color:var(--danger)}.sc-card.metric{border-left-color:var(--medium-blue)}.sc-card .head{justify-content:space-between;align-items:center;display:flex}.empty{text-align:center;color:var(--muted);padding:40px 20px}.empty .big{font-size:40px}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.spread{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.mt{margin-top:14px}.muted{color:var(--muted);font-size:12px}.ndvi-legend{align-items:center;gap:8px;font-size:11px;display:flex}.ndvi-legend .bar{border-radius:5px;width:140px;height:10px}.split{gap:16px;display:grid}.split-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.split-7-3{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}.field-setup{height:100%}.setup-map,.setup-map .map-box{min-height:520px}.menu-btn,.bottom-nav,.backdrop{display:none}@media (width<=860px){body{font-size:15px}.sidebar{z-index:1500;width:272px;padding-bottom:calc(16px + env(safe-area-inset-bottom));transition:transform .22s;position:fixed;inset:0 auto 0 0;overflow-y:auto;transform:translate(-100%)}.sidebar.open{transform:none;box-shadow:8px 0 30px #00022859}.sidebar a{padding:13px 12px;font-size:15px}.backdrop{z-index:1400;background:#00022873;display:block;position:fixed;inset:0}.menu-btn{width:44px;height:44px;color:var(--federal-blue);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;margin-left:-8px;display:inline-flex}.topbar{z-index:1050;gap:8px;padding:0 12px;position:sticky;top:0}.topbar h1{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:17px;overflow:hidden}.topbar .badge{white-space:nowrap;text-overflow:ellipsis;max-width:42vw;overflow:hidden}.content{padding:12px 12px calc(88px + env(safe-area-inset-bottom))}.bottom-nav{z-index:1100;border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:#fff;grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #00025714}.bottom-nav a{color:var(--muted);text-align:center;border-radius:10px;flex-direction:column;align-items:center;gap:2px;min-height:54px;padding:6px 2px;font-size:11px;font-weight:600;line-height:1.15;text-decoration:none;display:flex}.bottom-nav a span{font-size:22px;line-height:1}.bottom-nav a.active{color:var(--federal-blue);background:var(--nyanza)}.bottom-nav a.add span{background:var(--sgbus-green);border-radius:15px;justify-content:center;align-items:center;width:38px;height:30px;font-size:18px;display:flex}.split-2,.split-3-2,.split-7-3{grid-template-columns:minmax(0,1fr)}.field-setup{height:auto}.setup-map,.setup-map .map-box{min-height:52vh}.card{padding:14px}.btn{padding:11px 16px;font-size:14px}.btn.sm{padding:8px 12px;font-size:13px}.seg{max-width:100%;overflow-x:auto}.seg button{white-space:nowrap;padding:10px 14px;font-size:13px}input[type=text],input[type=number],input[type=password],select,textarea{padding:11px 12px;font-size:16px}.content select{width:100%!important}.row>select,.row>.seg{flex:100%}table.tbl{white-space:nowrap;-webkit-overflow-scrolling:touch;display:block;overflow-x:auto}.notif-panel{width:auto;max-height:70vh;top:60px;left:8px;right:8px}.kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}
