@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --bg:#F5F3EE;--card:#fff;--surface:#FAFBF8;--border:#E5E2DA;--border2:#D4D0C5;
  --t1:#1A1A1A;--t2:#5F5E5A;--t3:#888780;
  --nav:#113328;--lime:#D2FA52;--brand:#1A4D3A;
  --ok:#3B6D11;--ok-bg:#EAF3DE;--warn:#BA7517;--warn-bg:#FAEEDA;--alert:#A32D2D;--alert-bg:#FCEBEB;
  --bar:#1A4D3A;--shadow:0 1px 2px rgba(17,51,40,.05);
}
:root[data-theme="dark"]{
  --bg:#0f172a;--card:#16213a;--surface:#1b2845;--border:#26344f;--border2:#34456a;
  --t1:#f1f5f9;--t2:#a8b3c7;--t3:#7b88a1;
  --ok:#86d36a;--ok-bg:#16301f;--warn:#f0b455;--warn-bg:#382a10;--alert:#f28b8b;--alert-bg:#3d1b1f;
  --bar:#D2FA52;--shadow:none;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--t1);font:14px/1.5 'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;margin:0}
::selection{background:var(--lime);color:#113328}

/* top nav */
.nav{position:sticky;top:0;z-index:10;background:var(--nav);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{display:flex;align-items:center;gap:14px;padding:12px 24px}
.logo{width:34px;height:34px;flex:none}
.nav h1{font-size:17px;font-weight:800}
.nav .sub{font-size:11.5px;color:rgba(255,255,255,.62)}
.nav .grow{flex:1;min-width:0}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.75)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(210,250,82,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(210,250,82,0)}100%{box-shadow:0 0 0 0 rgba(210,250,82,0)}}
.iconbtn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:9px;padding:6px 12px;cursor:pointer;font:inherit;font-size:13px}
.iconbtn:hover{background:rgba(255,255,255,.16)}

/* page */
.page{width:100%;padding:22px 24px 48px}


.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.toolbar h2{font-size:16px;margin-right:auto}
.chip{border:1px solid var(--border);background:var(--card);color:var(--t2);border-radius:99px;padding:5px 14px;font:inherit;font-size:13px;cursor:pointer}
.chip.on{background:var(--nav);border-color:var(--nav);color:#fff}
:root[data-theme="dark"] .chip.on{background:var(--lime);border-color:var(--lime);color:#113328}

/* tenant cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.tcard{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 18px 16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;gap:14px}
.tcard.bad{border-color:color-mix(in srgb,var(--alert) 35%,var(--border))}
.thead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.tname{font:700 16px/1.25 'Plus Jakarta Sans',sans-serif}
.tid{color:var(--t3);font-size:12px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--alert-bg);color:var(--alert)}
.msg{font-size:12.5px;color:var(--alert);background:var(--alert-bg);border-radius:10px;padding:8px 11px}
.msg.warn{color:var(--warn);background:var(--warn-bg)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px 12px}
.metric label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:600}
.metric b{display:block;font:700 15px/1.3 'Plus Jakarta Sans',sans-serif;margin-top:2px}
.metric small{color:var(--t3);font-size:11.5px}
.metric.full{grid-column:1/-1}
.sparkwrap label{display:flex;justify-content:space-between;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:600;margin-bottom:6px}
.spark{width:100%;height:46px;display:block}
.spark rect{fill:var(--bar)}
.spark rect.miss{fill:var(--alert)}
.spark .empty{font-size:12px;fill:var(--t3)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:var(--surface);border:1px solid var(--border);color:var(--t2);border-radius:7px;padding:1px 9px;font-size:12px}
.devs{font-size:12px;color:var(--t2);border-top:1px dashed var(--border);padding-top:8px}
.devs div{display:flex;justify-content:space-between;gap:8px}
.note{font-size:12px;color:var(--t3);margin-top:20px}
.hidden{display:none!important}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login form{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px;width:min(380px,100%);box-shadow:0 10px 40px rgba(17,51,40,.1)}
.login .logo{width:48px;height:48px;margin-bottom:14px}
.login h1{font-size:20px}.login p{margin:4px 0 18px;color:var(--t3);font-size:13px}
.login input{width:100%;padding:11px 13px;border:1px solid var(--border2);border-radius:10px;background:var(--surface);color:var(--t1);font:inherit}
.login input:focus{outline:2px solid var(--lime);border-color:var(--brand)}
.login button{margin-top:12px;width:100%;padding:11px;border:0;border-radius:10px;background:var(--nav);color:var(--lime);font:inherit;font-weight:700;cursor:pointer}
.login .err{color:var(--alert);font-size:13px;margin-top:8px}
@media (max-width:640px){.nav-inner,.page{padding-left:14px;padding-right:14px}.grid{grid-template-columns:1fr}}