/* =========================================================
   RackHub — modern datacenter dashboard
   ========================================================= */
:root{
  --bg:#0B0E14; --bg2:#0F131B; --panel:#141922; --panel2:#1A2029;
  --line:#232B36; --line2:#2E3947;
  --txt:#E6EBF2; --mut:#8A97A8; --dim:#5B6675;
  --accent:#2DD4BF; --accent2:#22B8A6; --accent-dim:#134E4A;
  --amber:#F5B547; --red:#F87171; --blue:#60A5FA;
  --radius:12px; --sidebar:264px;
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:14px;-webkit-font-smoothing:antialiased}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent-dim)}

/* ---------- LOGIN ---------- */
.login-page{background:var(--bg)}
.login-split{display:grid;grid-template-columns:1.15fr 1fr;min-height:100vh}
.login-visual{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 15% 10%, rgba(45,212,191,.12), transparent 55%),
  linear-gradient(160deg,#0E1620,#0B0E14);padding:56px;display:flex;align-items:flex-end}
.lv-grid{position:absolute;inset:0;background-image:
  linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.35;mask-image:radial-gradient(80% 60% at 30% 20%,#000,transparent 80%)}
.lv-content{position:relative;max-width:440px}
.lv-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.2px;margin-bottom:40px}
.logo-mark{color:var(--accent);font-size:20px}
.lv-content h2{font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.8px;margin:0 0 14px}
.lv-content p{color:var(--mut);font-size:15px;line-height:1.6;margin:0 0 34px;max-width:390px}
.lv-stats{display:flex;gap:30px}
.lv-stats>div{display:flex;flex-direction:column}
.lv-stats b{font-size:20px;color:var(--accent)}
.lv-stats span{font-size:12px;color:var(--dim);margin-top:2px}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg)}
.lf-inner{width:100%;max-width:340px}
.lf-inner h1{font-size:24px;font-weight:700;letter-spacing:-.4px;margin:0 0 4px}
.lf-sub{color:var(--mut);font-size:13px;margin:0 0 26px}
.lf-inner label{display:block;font-size:12px;font-weight:500;color:var(--mut);margin:16px 0 6px}
.lf-inner input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:11px 13px;font-size:14px;transition:border-color .15s,box-shadow .15s}
.lf-inner input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,212,191,.12)}
@media(max-width:820px){.login-split{grid-template-columns:1fr}.login-visual{display:none}}

/* ---------- BUTTONS ---------- */
.btn-primary{background:var(--accent);color:#04211D;border:none;border-radius:9px;padding:10px 16px;
  font-size:14px;font-weight:600;transition:background .15s,transform .05s}
.btn-primary:hover{background:var(--accent2)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.55}
.btn-primary.block{width:100%;margin-top:24px;padding:12px}
.btn-primary.sm{padding:8px 14px;font-size:13px}
.alert{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.35);color:#FCA5A5;
  padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:4px}

/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:20px 16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;letter-spacing:-.3px;padding:4px 6px 22px}
.side-brand em{font-style:normal;font-size:10px;font-weight:600;color:var(--accent);background:var(--accent-dim);
  padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.side-nav{margin-bottom:22px}
.nav-label{font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;padding:0 6px 9px}
.nav-field{display:flex;gap:6px;margin-bottom:8px}
.nav-field select{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:9px 11px;font-size:13px;transition:border-color .15s}
.nav-field select:focus{outline:none;border-color:var(--accent)}
.chip-add{width:36px;background:var(--panel);border:1px solid var(--line);color:var(--accent);
  border-radius:8px;font-size:17px;line-height:1;transition:background .15s,border-color .15s}
.chip-add:hover{background:var(--panel2);border-color:var(--accent)}
.side-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;
  color:var(--mut);border-radius:8px;padding:9px 10px;font-size:13px;text-align:left;text-decoration:none;transition:background .12s,color .12s}
.side-item:hover{background:var(--panel);color:var(--txt)}
.side-item.danger:hover{background:rgba(248,113,113,.1);color:var(--red)}
.si-ic{width:18px;text-align:center;opacity:.85}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.tbl-badge{margin-top:12px;font-size:11px;color:var(--dim);padding:6px 10px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;text-align:center}
.tbl-badge.ok{color:var(--accent);border-color:var(--accent-dim)}
.tbl-badge.no{color:var(--amber);border-color:rgba(245,181,71,.3)}

/* ---------- MAIN ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:20px 28px 16px;border-bottom:1px solid var(--line)}
.crumbs{font-size:15px;font-weight:600;letter-spacing:-.2px;flex:1;min-width:0}
.crumbs .cr-hint{color:var(--dim);font-weight:400;font-size:14px}
.crumbs .sep{color:var(--dim);margin:0 8px;font-weight:400}
.crumbs .cr-dim{color:var(--mut);font-weight:500}
.top-actions{display:flex;gap:8px}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px 28px 8px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative}
.sc-label{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.sc-value{font-size:28px;font-weight:700;margin-top:8px;letter-spacing:-.5px}
.sc-value small{font-size:14px;color:var(--mut);font-weight:500}
.sc-sub{font-size:12px;color:var(--dim);margin-top:6px}
.stat-card.util .util-wrap{display:flex;align-items:center;gap:14px;margin-top:6px}
.donut{width:56px;height:56px;transform:rotate(-90deg)}
.donut-bg{fill:none;stroke:var(--line2);stroke-width:3}
.donut-fill{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .5s ease}
.util-num{font-size:22px;font-weight:700}
.type-picker{width:100%;margin-top:8px;background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:8px 10px;font-size:12px}
.type-picker:focus{outline:none;border-color:var(--accent)}

/* ---------- FLOOR ---------- */
.floor-wrap{flex:1;overflow:auto;padding:14px 28px 40px}
.floor{display:flex;gap:16px;align-items:flex-start;min-height:200px}
.empty-state{margin:40px auto;text-align:center;max-width:340px;color:var(--mut)}
.es-ic{font-size:40px;color:var(--line2);margin-bottom:10px}
.empty-state h3{font-size:16px;color:var(--txt);margin:0 0 6px;font-weight:600}
.empty-state p{font-size:13px;line-height:1.6;margin:0}

/* rack card */
.rack-col{flex:0 0 auto;width:150px}
.rack-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 2px}
.rack-title{font-size:13px;font-weight:600}
.rack-title small{display:block;font-size:10px;color:var(--dim);font-weight:400;margin-top:1px}
.rack-del{background:none;border:none;color:var(--dim);font-size:14px;padding:2px 4px;border-radius:5px}
.rack-del:hover{color:var(--red);background:rgba(248,113,113,.1)}
.rack-body{display:flex;gap:6px}
.u-ruler{display:flex;flex-direction:column;gap:2px;padding-top:0}
.u-tick{height:19px;font-size:9px;color:var(--dim);font-family:'JetBrains Mono',monospace;
  display:flex;align-items:center;justify-content:flex-end;width:20px}
.rack-frame{flex:1;background:#05070B;border:1px solid var(--line2);border-radius:10px;padding:5px;
  display:flex;flex-direction:column;gap:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.u-slot{height:19px;background:linear-gradient(180deg,#0C0F15,#090C11);border:1px solid #141A22;border-radius:4px;
  display:flex;align-items:center;justify-content:center;position:relative;transition:background .12s,border-color .12s}
.u-slot.editable{cursor:pointer}
.u-slot.editable:hover{background:#12212C;border-color:var(--accent-dim)}
.u-slot.sel{background:rgba(45,212,191,.14);border-color:var(--accent)}
.u-slot .u-empty-n{font-size:8px;color:#2A333F;font-family:'JetBrains Mono',monospace}
.u-slot.editable:hover .u-empty-n{color:var(--accent)}
.place-hint{position:absolute;background:var(--accent);color:#04211D;border:none;border-radius:5px;
  font-size:9px;font-weight:700;padding:2px 8px;font-family:'JetBrains Mono',monospace}
.device{border-radius:5px;display:flex;flex-direction:column;justify-content:center;padding:3px 8px;
  overflow:hidden;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.device.editable{cursor:pointer}
.device.editable:hover{filter:brightness(1.1);box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.dev-name{font-size:9.5px;font-weight:600;line-height:1.15;word-break:break-word;font-family:'JetBrains Mono',monospace}
.dev-meta{font-size:8px;opacity:.75;margin-top:1px;font-family:'JetBrains Mono',monospace}
.dev-badge{position:absolute;top:3px;right:5px;font-size:8px;opacity:.6;font-family:'JetBrains Mono',monospace}

/* rack power bar under */
.rack-foot{margin-top:8px}
.pbar{height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.pbar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width .4s}
.pbar-fill.hot{background:linear-gradient(90deg,var(--amber),#EA9A2E)}
.rack-watts{font-size:11px;color:var(--mut);margin-top:5px;text-align:center;font-family:'JetBrains Mono',monospace}

/* add-rack ghost card */
.add-rack-card{flex:0 0 auto;width:150px;min-height:120px;border:1.5px dashed var(--line2);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dim);
  background:transparent;transition:border-color .15s,color .15s}
.add-rack-card:hover{border-color:var(--accent);color:var(--accent)}
.add-rack-card .arc-plus{font-size:26px}
.add-rack-card span{font-size:12px}

/* ---------- MODAL ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(5,7,11,.7);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:24px;
  width:380px;max-width:100%;box-shadow:var(--shadow);animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 16px;font-size:17px;font-weight:600;letter-spacing:-.2px}
.modal label{display:block;font-size:12px;font-weight:500;color:var(--mut);margin:12px 0 5px}
.modal input{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:9px 11px;font-size:14px}
.modal input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,212,191,.1)}
.modal .row{display:flex;gap:10px}.modal .row>div{flex:1}
.modal-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end}
.mbtn{border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600}
.mbtn.ok{background:var(--accent);color:#04211D}.mbtn.ok:hover{background:var(--accent2)}
.mbtn.cancel{background:transparent;border:1px solid var(--line2);color:var(--mut)}
.mbtn.cancel:hover{color:var(--txt)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.tbl th{text-align:left;color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:7px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.swatch{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(255,255,255,.15)}
.mini{background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:6px;padding:3px 9px;font-size:12px;margin-left:4px}
.mini:hover{color:var(--txt);border-color:var(--line2)}
.mini.danger:hover{color:var(--red);border-color:rgba(248,113,113,.4)}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--panel2);border:1px solid var(--line2);color:var(--txt);padding:11px 18px;border-radius:10px;
  font-size:13px;box-shadow:var(--shadow);z-index:80;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(248,113,113,.5)}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:column}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* polish pass */
.stat-card.util{display:flex;flex-direction:column}
.util-wrap{position:relative}
.util-num{position:relative}
.rack-col{transition:transform .12s}
.floor .rack-col:hover .rack-frame{border-color:var(--line2)}
.side-brand{margin-bottom:24px}
.stat-card .type-picker{margin-top:10px}

/* refresh button + spin */
.btn-icon{background:var(--panel);border:1px solid var(--line);color:var(--mut);border-radius:9px;
  width:38px;height:38px;font-size:17px;line-height:1;transition:background .15s,color .15s,border-color .15s}
.btn-icon:hover{background:var(--panel2);color:var(--txt);border-color:var(--line2)}
.btn-icon.spin{animation:spin .5s ease}
@keyframes spin{to{transform:rotate(360deg)}}
.alert.info{background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.35);color:var(--accent)}