:root{
  --color-bg:#F6F8FB;
  --color-surface:#FFFFFF;
  --color-primary:#0B5CAB;       /* Royal Blue */
  --color-accent:#E53935;        /* Fire Red (critical/action accent) */
  --color-ok:#2E7D32;            /* Green */
  --color-warn:#F9A825;          /* Amber */
  --color-text:#0D0E10;
  --color-text-sec:#5B6675;
  --color-border:#E7EAF0;

  --radius:14px;
  --shadow:0 6px 18px rgba(13,14,16,0.08);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;
}

/* Dark theme */
html[data-theme="dark"]{
  --color-bg:#0F141A;
  --color-surface:#151C24;
  --color-primary:#5BA5FF;
  --color-accent:#FF625D;
  --color-ok:#7DD68A;
  --color-warn:#FFD166;
  --color-text:#F2F5F9;
  --color-text-sec:#C6CFDA;
  --color-border:#263241;
  --shadow:0 8px 24px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;direction:rtl}
body{margin:0;background:var(--color-bg);color:var(--color-text);}
a{color:var(--color-primary);text-decoration:none}
h1,h2,h3{margin:0 0 var(--space-4);}

.container{display:flex;min-height:100vh}
.sidebar{
  width:300px;background:var(--color-surface);border-left:1px solid var(--color-border);
  padding:var(--space-6) var(--space-4);position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}
.brand .logo{width:40px;height:40px;border-radius:12px;background:conic-gradient(from 210deg, #FF6F00, #E53935);box-shadow:var(--shadow)}
.brand h2{font-size:18px;line-height:1.2}

.nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:12px;color:var(--color-text);border:1px solid transparent;
  margin-bottom:10px; transition:all .15s ease;
}
.nav a.active,.nav a:hover{background:color-mix(in oklab, var(--color-primary) 10%, transparent);border-color:var(--color-border)}
.nav .tag{font-size:12px;background:color-mix(in oklab, var(--color-primary) 18%, #fff);padding:2px 8px;border-radius:99px;color:var(--color-text)}

.main{flex:1;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;gap:var(--space-4);
  background:var(--color-surface);border-bottom:1px solid var(--color-border);
  padding:var(--space-4) var(--space-6);position:sticky;top:0;z-index:5;
}
.topbar .search{flex:1;display:flex;align-items:center;gap:8px;background:color-mix(in oklab,var(--color-surface),#000 8%);padding:10px 12px;border-radius:12px}
.topbar input{flex:1;border:none;background:transparent;outline:none;font-size:14px;color:var(--color-text)}

.content{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-6)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);
  padding:var(--space-5);box-shadow:var(--shadow);
}
.card h3{font-size:13px;color:var(--color-text-sec);letter-spacing:.2px}
.card .big{font-size:28px;margin:6px 0 2px 0}

.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.dot-green{background:var(--color-ok)} .dot-red{background:var(--color-accent)} .dot-orange{background:var(--color-warn)}

.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-6)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.toolbar{display:flex;gap:8px;align-items:center}
.btn{border:none;border-radius:12px;padding:10px 14px;cursor:pointer;transition:transform .05s ease, opacity .15s}
.btn:active{transform:scale(0.98)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}
.btn-danger{background:var(--color-accent);color:#fff}
.btn:disabled{opacity:0.6;cursor:not-allowed}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-size:12px;color:var(--color-text-sec);text-align:right;padding:8px}
.table td{background:var(--color-surface);border:1px solid var(--color-border);border-left:none;border-right:none;padding:12px}
.table tr{border-radius:12px}
.table tr td:first-child{border-right:1px solid var(--color-border);border-radius:12px 0 0 12px}
.table tr td:last-child{border-left:1px solid var(--color-border);border-radius:0 12px 12px 0}

.badge{font-size:12px;padding:4px 8px;border-radius:999px;display:inline-block}
.badge-ok{background:color-mix(in oklab, var(--color-ok) 18%, transparent); color:var(--color-ok)}
.badge-warn{background:color-mix(in oklab, var(--color-warn) 18%, transparent); color:#B56F00}
.badge-err{background:color-mix(in oklab, var(--color-accent) 16%, transparent); color:var(--color-accent)}

.panel{display:none}
.panel.active{display:block}

.chart{
  width:100%;height:220px;background:linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 6%, #fff) 0%, var(--color-surface) 100%);
  border:1px solid var(--color-border);border-radius:14px;position:relative;overflow:hidden;
}

.floorplan{
  width:100%;height:320px;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:14px;position:relative;box-shadow:var(--shadow);overflow:hidden;
}
.floorplan svg{width:100%;height:100%}

.footer-note{font-size:12px;color:var(--color-text-sec)}

@media(max-width:1100px){ .kpis{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} .sidebar{display:none} }
@media(max-width:600px){
  .topbar{padding:12px}
  .content{padding:16px}
  .kpis{grid-template-columns:1fr}
}