/* KhushiHost SaaS Master - panel base layout (all designs share this skeleton;
   themes.css re-skins it per design P1-P10). Mobile-first responsive. */
:root{--bg:#f5f7fa;--card:#fff;--side:#fff;--sidetx:#33475c;--acc:#2456d6;--acc2:#f5a623;--tx:#1b2735;--mut:#8496ab;--line:#e6ebf1;--inbg:#fff;--bad:#d33;--warn:#b97d06}
*{box-sizing:border-box}body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--tx)}
a{color:var(--acc);text-decoration:none}
.shell{display:flex;min-height:100vh}
.side{width:212px;flex:0 0 212px;background:var(--side);color:var(--sidetx);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{font-size:19px;font-weight:800;padding:4px 8px 14px}.lg1{color:#0a7a43}.lg2{color:#d32f2f}
.side nav a{display:block;padding:10px 11px;border-radius:9px;color:var(--sidetx);font-weight:600;font-size:14px;margin-bottom:3px}
.side nav a.on{background:var(--acc);color:#fff}
.sidefoot{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}.sidefoot a{display:block;padding:7px 11px;color:var(--sidetx);font-size:13.5px}
.main{flex:1;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;background:var(--card);border-bottom:1px solid var(--line);padding:12px 18px;position:sticky;top:0;z-index:5}
.topbar b{font-size:16px}.tsearch{flex:1;max-width:340px}.tsearch input{width:100%;padding:8px 12px;border:1.5px solid var(--line);border-radius:20px;background:var(--inbg);color:var(--tx)}
.tuser{margin-left:auto;font-size:13.5px;color:var(--mut)}
.alertbar{background:#fff4e0;border-bottom:1px solid #f0d9a8;color:#7a5200;padding:9px 18px;font-size:13.5px}
.content{padding:18px;max-width:1240px;margin:0 auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px;margin-bottom:14px}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.kcard small{display:block;font-size:10.5px;letter-spacing:.6px;color:var(--mut);font-weight:700}
.kcard b{font-size:21px}.kcard span{font-size:11.5px;color:var(--mut);display:block}
.kcard .bad{color:var(--bad)}.kcard .warn{color:var(--warn)}.ok{color:#1d9e57}
.ringcard{display:flex;gap:12px;align-items:center}
.ring{--p:0;width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--acc) calc(var(--p)*1%),var(--line) 0);display:flex;align-items:center;justify-content:center;flex:0 0 58px}
.ring span{width:42px;height:42px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:14px}
.card h3{margin:0 0 12px;font-size:15.5px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.mut{color:var(--mut);font-size:13px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.5px;color:var(--mut);padding:8px;border-bottom:2px solid var(--line)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.pill{border-radius:20px;padding:2px 9px;font-size:10px;font-weight:800;color:#fff;display:inline-block;white-space:nowrap}
.pill.g{background:#1d9e57}.pill.r{background:#d33}.pill.y{background:#f2a007;color:#3d2700}.pill.b{background:#1565d8}
.hbar{width:74px;height:6px;background:var(--line);border-radius:3px;overflow:hidden}.hbar i{display:block;height:6px;background:var(--acc)}
.mini{font-size:12px;font-weight:700;border:1.5px solid var(--line);background:var(--card);color:var(--tx);border-radius:7px;padding:4px 9px;cursor:pointer}
.mini.danger,.btn.danger{background:#d33;color:#fff;border-color:#d33}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;border-radius:9px;padding:10px 16px;font-weight:700;font-size:13.5px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--acc);border:1.5px solid var(--acc)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters input,.filters select,.fgrid input,.fgrid select,.card input[type=text],.card input:not([type]){padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;background:var(--inbg);color:var(--tx);font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:11px}
.fgrid label,.card label{display:block;font-size:12px;font-weight:700;color:var(--mut)}
.fgrid input,.fgrid select{width:100%;margin-top:4px}
.fbtns{margin-top:15px;display:flex;gap:8px;flex-wrap:wrap}
.pager{margin-top:12px;display:flex;gap:5px}.pager a{padding:5px 11px;border:1.5px solid var(--line);border-radius:7px}.pager a.on{background:var(--acc);color:#fff}
.aerr{background:#fdecec;color:#a11;border:1px solid #f3c2c2;border-radius:9px;padding:10px 12px;font-size:13.5px;margin-bottom:11px}
.aok{background:#eafaf0;color:#0c5a2c;border:1px solid #bfe8cd;border-radius:9px;padding:10px 12px;font-size:13.5px;margin-bottom:11px}
.codebox{background:var(--bg);border:1.5px dashed var(--acc);border-radius:10px;padding:13px 15px;font-size:16px;letter-spacing:1px;margin:10px 0;word-break:break-all}
.chk{display:block;font-size:14px !important;color:var(--tx) !important;font-weight:600 !important;margin:9px 0}
form.inline{display:inline}
.appr{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1.5px solid var(--acc2);border-radius:11px;padding:13px 15px;margin-bottom:11px}
.apprbtns{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
/* auth screens */
.authbody{background:linear-gradient(135deg,#0b3b5e,#0e7490);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}
.authcard{background:#fff;border-radius:18px;padding:28px;max-width:400px;width:100%;box-shadow:0 22px 60px rgba(0,0,0,.4);color:#1b2735}
.authbrand{font-size:24px;font-weight:800;text-align:center;margin-bottom:6px}
.authcard h2{text-align:center;font-size:18px;margin:6px 0 14px}
.authcard label{display:block;font-size:12.5px;font-weight:700;color:#54687e;margin:12px 0 5px}
.authcard input{width:100%;padding:12px;border:1.5px solid #cfdae4;border-radius:10px;font-size:15px}
.abtn{margin-top:17px;width:100%;background:#0a7a43;color:#fff;border:0;padding:13px;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer}
.anote{font-size:12.5px;color:#6b7f92;text-align:center;line-height:1.6;margin-top:13px}
.bottomnav{display:none}
/* layout variants */
body[data-layout="top"] .shell{flex-direction:column}
body[data-layout="top"] .side{width:100%;flex:none;height:auto;position:static;flex-direction:row;align-items:center;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}
body[data-layout="top"] .side nav{display:flex;flex-wrap:wrap;gap:2px}
body[data-layout="top"] .sidefoot{margin:0 0 0 auto;border:0;padding:0;display:flex;gap:4px}
body[data-layout="rail"] .side{width:76px;flex-basis:76px;align-items:center}
body[data-layout="rail"] .side nav a{font-size:0;text-align:center;padding:11px 0}
body[data-layout="rail"] .side nav a::first-letter{font-size:17px}
body[data-layout="rail"] .brand{font-size:0}body[data-layout="rail"] .brand::first-letter{font-size:19px}
body[data-layout="rail"] .sidefoot a{font-size:0;text-align:center}body[data-layout="rail"] .sidefoot a::first-letter{font-size:15px}
@media(max-width:860px){
  .side{display:none}
  body[data-layout="top"] .side{display:flex}
  .content{padding:13px 12px 86px}
  .topbar{padding:10px 13px}.tsearch{display:none}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1.5px solid var(--line);z-index:20;padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav a{flex:1;text-align:center;font-size:17px;color:var(--tx);line-height:1.25}
  .bottomnav small{display:block;font-size:9.5px;color:var(--mut)}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1.5px solid var(--line);border-radius:11px;margin-bottom:10px;padding:8px 6px}
  .tbl th{display:none}.tbl td{border:0;padding:4px 8px}
  .kpis{grid-template-columns:1fr 1fr}
}