/* Ubunifu demo: warm Kenyan identity (cream, deep green, terracotta). Top-bar navigation on computers. */
:root{
  --bg:#F5F5F3;--surface:#FFFFFF;--surface-2:#F0EFEB;--ink:#111111;--ink-2:#2A2A2A;--mute:#6B6B6B;
  --line:#E4E2DC;--line-2:#D3D0C7;--brand:#111111;--brand-2:#2B2B2B;--brand-soft:#ECECEA;
  --gold:#BB0000;--gold-2:#E53935;--navy:#0B0B0B;--on-brand:#FFFFFF;--ok:#2B2B2B;--warn:#B7791F;--bad:#B42318;
  --r:12px;--r-lg:18px;--r-sm:8px;
  --sh1:0 1px 2px rgba(27,42,34,.06);--sh2:0 12px 30px -14px rgba(27,42,34,.22);--ring:0 0 0 4px rgba(31,77,58,.22);
}
body{background:var(--bg);color:var(--ink)}
h1,h2,h3{color:var(--ink);letter-spacing:-.01em}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1)}
.btn{background:var(--brand);color:var(--on-brand);box-shadow:0 8px 18px -12px rgba(31,77,58,.7)}
.btn:hover{background:var(--brand-2)}
.btn.secondary{background:var(--surface);color:var(--brand);border-color:var(--line-2)}
.btn.gold{background:var(--gold);color:var(--on-brand)}
.btn.danger{background:var(--bad)}

/* hero card */
.hero-card{background:linear-gradient(135deg,#111111 0%,#3A0D0D 100%);border-radius:var(--r-lg)}
.hero-card::before{background:var(--gold)}
.hc-top{color:#F4D6B8}
.hc-chip{background:rgba(255,252,245,.12)}

/* KPI tiles */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.kpi b{color:var(--brand)}
.kpi.warn b{color:var(--gold)}
.chart-card{border-radius:var(--r-lg)}

/* tables */
table{border-collapse:separate;border-spacing:0}
th{color:var(--mute);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:var(--surface-2)}
td,th{border-bottom:1px solid var(--line)}
tbody tr:hover td{background:var(--brand-soft)}
.pill.ok{background:var(--brand-soft);color:var(--brand)}
.pill.off{background:#F6E3E3;color:var(--gold)}

/* sign-in */
body.in-auth{background:linear-gradient(180deg,#111111 0,#111111 260px,var(--bg) 260px)}
.auth-brand,.auth-brand span{color:#FFFFFF}
.auth-brand strong{color:var(--gold-2)}
.auth-brand small{color:#E9E0CC}
.auth-brand .logo-mark{box-shadow:0 10px 24px -10px rgba(0,0,0,.4)}

/* computers: top bar navigation */
@media (min-width:980px){
  .sidebar{position:fixed;top:0;left:0;right:0;bottom:auto;width:auto;height:64px;z-index:40;flex-direction:row;align-items:center;border-radius:0;background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:var(--sh1);padding:0 20px;transform:none;visibility:visible;transition:none}
  .sidebar .sb-head{padding:0;margin-right:14px;flex:none}
  .sidebar .sb-x,.sidebar .sb-brand small{display:none}
  .sidebar .sb-name{color:var(--ink);font-size:.98rem}
  .sidebar .sb-name strong{color:var(--gold)}
  .sidebar .sb-top{display:flex;gap:8px;padding:0;margin-right:10px;flex:none}
  .sidebar .newbtn{width:auto;min-height:38px;padding:0 16px;border-radius:999px;background:var(--gold);color:var(--on-brand)}
  .sidebar .menusearch{width:190px;min-height:38px;border-radius:999px;background:var(--surface-2);color:var(--mute);border:1px solid var(--line)}
  .sidebar .sb-scroll{flex:1;display:flex;align-items:center;gap:4px;overflow:visible;padding:0;min-width:0}
  .sidebar .navgroup{display:flex;align-items:center;gap:2px;margin:0}
  .sidebar .navlabel{display:none}
  .sidebar .navgroup.closed .navlink{display:flex}
  .sidebar .navlink{min-height:38px;padding:0 13px;margin:0;border-radius:999px;color:var(--ink-2);font-size:.9rem;font-weight:600;display:flex;align-items:center;white-space:nowrap}
  .sidebar .navlink .ni{display:none}
  .sidebar .navlink:hover{background:var(--brand-soft);color:var(--brand)}
  .sidebar .navlink.on{background:var(--brand);color:var(--on-brand)}
  .sidebar .navlink.on::before{display:none}
  .sidebar .navbadge{background:var(--gold);color:var(--on-brand)}
  .sidebar .sb-foot{border:0;padding:0;margin-left:auto;flex:none;display:flex;align-items:center;gap:8px;width:auto}
  .sidebar .sb-collapse{display:none}
  .sidebar .sb-more{position:relative}
  .sidebar .sidecard{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);padding:4px 12px 4px 4px;border-radius:999px;width:auto}
  .sidebar .sidecard b{color:var(--ink)}
  .sidebar .sidecard>div>span{color:var(--mute)}
  .sidebar .sb-menu{position:absolute;right:0;top:calc(100% + 8px);width:260px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh2);border-radius:14px;padding:8px;z-index:60}
  .sidebar .sb-item{background:transparent;color:var(--ink)}
  .sidebar .sb-item:hover{background:var(--brand-soft)}
  .topbar{margin-left:0!important;position:sticky;top:64px;background:var(--surface);border-bottom:1px solid var(--line)}
  .topbar .brandline{display:none}
  .content{margin-left:0!important;margin-top:64px;padding-top:18px}
}

/* the top menu scrolls sideways instead of hiding later items; search folds away on narrower screens */
@media (min-width:980px){
  .sidebar .sb-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px}
  .sidebar .navlink{padding:0 10px;font-size:.86rem}
  .sidebar .navgroup{flex:none}
}
@media (min-width:980px) and (max-width:1366px){
  .sidebar .menusearch{display:none}
}