/* ============================================================
   Natyavedam Operations Dashboard
   ============================================================ */

:root{
  --ground:#F4F3F0; --panel:#FFFFFF; --panel-2:#EDEBE6;
  --ink:#1A1815; --ink-2:#4A463E; --muted:#6E695E;
  --hair:#DCD8D0; --hair-2:#C0BAAE;
  --brass:#8A6413; --brass-soft:#F2E9D3;
  --alta:#A6153C;  --alta-soft:#F6E2E7;
  --peacock:#0D6675;
  --good:#2C6E4E;  --good-soft:#E1EDE6;
  --warn:#96601A;  --warn-soft:#F5EAD8;
  --crit:#A61C2B;  --crit-soft:#F7E3E5;
  --blue:#2A568A;  --blue-soft:#E2EAF3;
  --shadow:0 1px 2px rgba(26,24,21,.05), 0 4px 14px rgba(26,24,21,.05);
  --side:242px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#131210; --panel:#1C1A17; --panel-2:#262320;
    --ink:#EEEBE4; --ink-2:#C6C0B4; --muted:#928C7F;
    --hair:#312D27; --hair-2:#453F36;
    --brass:#DDB055; --brass-soft:#2E2616;
    --alta:#EC6B8C;  --alta-soft:#331620;
    --peacock:#5FC3D4;
    --good:#6FC79A;  --good-soft:#152820;
    --warn:#D9A354;  --warn-soft:#2C2314;
    --crit:#F0798A;  --crit-soft:#31161A;
    --blue:#7FA8D8;  --blue-soft:#16202C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ground); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em;}
h1{font-size:1.32rem;}
h2{font-size:1.05rem;}
h3{font-size:.92rem;}
.mono,.num,td.num,.kpi .v,.bar-lab{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh;}
.side{
  width:var(--side);flex:0 0 var(--side);background:var(--panel);
  border-right:1px solid var(--hair);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;border-bottom:1px solid var(--hair);}
.brand .mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:7px;background:var(--brass);
  color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;
}
@media (prefers-color-scheme: dark){ .brand .mark{color:#1C1A17;} }
.brand .bt{font-weight:650;font-size:.9rem;line-height:1.2;}

.side nav{padding:10px 10px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto;}
.side nav a{
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:6px;
  text-decoration:none;color:var(--ink-2);font-size:.88rem;
}
.side nav a svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8;}
.side nav a:hover{background:var(--panel-2);color:var(--ink);}
.side nav a.on{background:var(--brass-soft);color:var(--brass);font-weight:600;}
.side nav a.on svg{opacity:1;}

.side-foot{padding:12px 16px;border-top:1px solid var(--hair);display:flex;
  align-items:center;justify-content:space-between;gap:8px;}
.who{font-size:.8rem;line-height:1.3;}
.who span{display:block;color:var(--muted);font-size:.72rem;text-transform:capitalize;}
.out{font-size:.78rem;color:var(--muted);text-decoration:none;}
.out:hover{color:var(--alta);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 26px;border-bottom:1px solid var(--hair);background:var(--panel);
  position:sticky;top:0;z-index:5;
}
.top-right{font-size:.82rem;color:var(--muted);}
.body{padding:24px 26px 60px;}

/* ---------- flash ---------- */
.flash{padding:11px 15px;border-radius:5px;margin-bottom:16px;font-size:.88rem;border:1px solid;}
.flash.ok{background:var(--good-soft);border-color:var(--good);color:var(--good);}
.flash.err{background:var(--crit-soft);border-color:var(--crit);color:var(--crit);}
.flash.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);}

/* ---------- cards & grid ---------- */
.grid{display:grid;gap:14px;}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.card{background:var(--panel);border:1px solid var(--hair);border-radius:7px;box-shadow:var(--shadow);}
.card-h{padding:13px 17px;border-bottom:1px solid var(--hair);display:flex;
  align-items:center;justify-content:space-between;gap:12px;}
.card-h h2,.card-h h3{font-size:.9rem;}
.card-h .sub{font-size:.78rem;color:var(--muted);font-weight:400;}
.card-b{padding:16px 17px;}
.card-b.tight{padding:0;}

/* ---------- kpi ---------- */
.kpi{background:var(--panel);border:1px solid var(--hair);border-radius:7px;
  padding:15px 17px;box-shadow:var(--shadow);}
.kpi .k{font-size:.73rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.kpi .v{font-size:1.75rem;font-weight:650;line-height:1.1;margin-top:7px;}
.kpi .s{font-size:.78rem;color:var(--muted);margin-top:5px;}
.kpi.brass .v{color:var(--brass);}
.kpi.good  .v{color:var(--good);}
.kpi.crit  .v{color:var(--crit);}
.kpi.warn  .v{color:var(--warn);}

/* ---------- bars ---------- */
.bar{display:block;height:7px;background:var(--panel-2);border-radius:99px;overflow:hidden;min-width:60px;}
.bar > span{display:block;height:100%;border-radius:99px;background:var(--good);}
.bar > span.brass{background:var(--brass);}
.bar > span.crit{background:var(--crit);}
.bar > span.warn{background:var(--warn);}
.bar > span.blue{background:var(--blue);}
.bar-row{display:flex;align-items:center;gap:11px;}
.bar-lab{font-size:.78rem;color:var(--muted);white-space:nowrap;}

/* ---------- tables ---------- */
.tw{overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:.86rem;}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--hair);vertical-align:middle;}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:600;background:var(--panel-2);white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--panel-2);}
td.num,th.num{text-align:right;}
td.center,th.center{text-align:center;}
td.w{width:1%;white-space:nowrap;}

/* ---------- pills ---------- */
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.7rem;
  font-weight:600;letter-spacing:.02em;text-transform:capitalize;white-space:nowrap;}
.pill.grey {background:var(--panel-2);color:var(--muted);}
.pill.green{background:var(--good-soft);color:var(--good);}
.pill.amber{background:var(--warn-soft);color:var(--warn);}
.pill.red  {background:var(--crit-soft);color:var(--crit);}
.pill.blue {background:var(--blue-soft);color:var(--blue);}

/* ---------- forms ---------- */
label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:5px;font-weight:600;}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--hair-2);border-radius:5px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:.88rem;
}
textarea{min-height:80px;resize:vertical;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass);}
.field{margin-bottom:14px;}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.hint{font-size:.74rem;color:var(--muted);margin-top:4px;font-weight:400;}

.btn{
  display:inline-block;padding:8px 15px;border-radius:5px;border:1px solid var(--brass);
  background:var(--brass);color:#fff;font:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;text-decoration:none;
}
@media (prefers-color-scheme: dark){ .btn{color:#1C1A17;} }
.btn:hover{filter:brightness(1.06);}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--hair-2);}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);}
.btn.danger{background:var(--crit);border-color:var(--crit);}
.btn.sm{padding:5px 10px;font-size:.78rem;}
.btns{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}

/* ---------- misc ---------- */
.muted{color:var(--muted);}
.small{font-size:.8rem;}
.right{text-align:right;}
.mt{margin-top:18px;}
.mb{margin-bottom:18px;}
.empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:.88rem;}
.sec-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:700;margin:26px 0 11px;}
.sec-title:first-child{margin-top:0;}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;
  background:var(--panel-2);padding:1px 5px;border-radius:3px;}
pre{background:var(--panel-2);border:1px solid var(--hair);border-radius:5px;
  padding:12px 14px;overflow-x:auto;font-size:.78rem;line-height:1.5;}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;}
.login{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--hair);
  border-radius:9px;padding:28px;box-shadow:var(--shadow);}
.login h1{font-size:1.15rem;margin-bottom:4px;}
.login p.sub{color:var(--muted);font-size:.84rem;margin:0 0 20px;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .shell{flex-direction:column;}
  .side{width:100%;flex:none;height:auto;position:static;flex-direction:row;
    flex-wrap:wrap;align-items:center;gap:8px;padding:8px;}
  .brand{border:none;padding:6px 10px;}
  .side nav{flex-direction:row;overflow-x:auto;flex:1;padding:0;}
  .side nav a{white-space:nowrap;}
  .side nav a svg{display:none;}
  .side-foot{border:none;padding:6px 10px;}
  .body{padding:16px;}
  .top{padding:12px 16px;}
}