/* ============================================================================
   DZ Datacenter — control-plane design system (shared by admin + client).
   Aesthetic: an operator console. Dark instrument panel, fine grid, a single
   high-signal accent per app, monospaced telemetry labels, characterful display
   type. Accent switches on body[data-app="admin"|"client"].
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg:        #0a0d12;
  --bg-grid:   #11151d;
  --panel:     #11151c;
  --panel-2:   #161b25;
  --line:      #232b39;
  --line-soft: #1a212c;
  --fg:        #e8edf5;
  --mut:       #8593a6;
  --mut-2:     #5c6878;
  --ok:        #57d295;
  --warn:      #f4b740;
  --danger:    #ff6363;
  --radius:    7px;
  --display: 'Bricolage Grotesque', serif;
  --body:    'Hanken Grotesk', sans-serif;
  --mono:    'IBM Plex Mono', monospace;
}
body[data-app="admin"]  { --acc:#f6b73c; --acc-ink:#1a1304; --acc-dim:#6e561d; --glow: 246,183,60; }
body[data-app="client"] { --acc:#4fd6b8; --acc-ink:#04201a; --acc-dim:#1f6657; --glow: 79,214,184; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 14px; line-height: 1.5;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 44px 44px; background-position: -1px -1px;
}
::selection { background: rgba(var(--glow), .3); }
a { color: var(--acc); text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
.mono { font-family: var(--mono); }

/* ---- shell ---------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 232px 1fr; grid-template-rows: 60px 1fr;
       grid-template-areas: "brand top" "nav main"; height: 100vh; }

.brand { grid-area: brand; display: flex; align-items: center; gap: 11px;
         padding: 0 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
         background: var(--panel); }
.brand .glyph { width: 26px; height: 26px; border-radius: 6px; flex: none;
  background: radial-gradient(circle at 30% 25%, var(--acc), transparent 70%), var(--panel-2);
  border: 1px solid var(--acc-dim); box-shadow: 0 0 16px rgba(var(--glow), .35) inset; position: relative; }
.brand .glyph::after { content:""; position:absolute; inset:7px; border:1.5px solid var(--acc); border-radius:2px; opacity:.85;}
.brand .name { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .02em; line-height: 1; }
.brand .role { font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; color: var(--acc);
               text-transform: uppercase; margin-top: 3px; }

.topbar { grid-area: top; display: flex; align-items: center; gap: 14px;
          padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
.topbar .ctx { display: flex; align-items: center; gap: 8px; }
.topbar .spacer { flex: 1; }
.topbar .who { font-family: var(--mono); font-size: 12px; color: var(--mut); }
.topbar .who b { color: var(--fg); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mut-2); display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.off { background: var(--danger); }

nav.side { grid-area: nav; border-right: 1px solid var(--line); background: var(--panel);
           padding: 14px 10px; overflow-y: auto; }
nav.side .grp { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
                color: var(--mut-2); margin: 16px 10px 6px; }
nav.side a { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 6px;
             color: var(--mut); font-weight: 500; font-size: 13.5px; cursor: pointer; border: 1px solid transparent; }
nav.side a:hover { color: var(--fg); background: var(--panel-2); }
nav.side a.active { color: var(--acc); background: linear-gradient(90deg, rgba(var(--glow), .1), transparent);
                    border-color: var(--acc-dim); }
nav.side a .tic { width: 4px; height: 16px; border-radius: 2px; background: transparent; }
nav.side a.active .tic { background: var(--acc); box-shadow: 0 0 10px var(--acc); }

main.view { grid-area: main; overflow-y: auto; padding: 26px 30px 60px; }

/* ---- type / headers ------------------------------------------------------- */
.h-row { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.h-row h1 { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: -.01em; margin: 0; }
.h-row .sub { font-family: var(--mono); font-size: 11px; color: var(--mut-2); letter-spacing: .12em;
              text-transform: uppercase; padding-bottom: 5px; }
.h-row .spacer { flex: 1; }

/* ---- buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 6px; cursor: pointer;
       font-weight: 600; font-size: 13px; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg);
       transition: .12s; white-space: nowrap; }
.btn:hover { border-color: var(--mut-2); }
.btn.acc { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.btn.acc:hover { box-shadow: 0 0 18px rgba(var(--glow), .45); filter: brightness(1.05); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: rgba(255,99,99,.35); }
.btn.danger:hover { background: rgba(255,99,99,.1); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- panels / cards ------------------------------------------------------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; margin-bottom: 22px; }
.stat { padding: 16px 18px; }
.stat .k { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut-2); }
.stat .v { font-family: var(--display); font-weight: 700; font-size: 30px; margin-top: 6px; line-height: 1; }
.stat .v small { font-size: 13px; color: var(--mut); font-family: var(--mono); font-weight: 500; }

/* ---- tables --------------------------------------------------------------- */
.tbl-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
           color: var(--mut-2); padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); font-weight: 500; }
tbody td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(var(--glow), .035); }
td .id { font-family: var(--mono); font-size: 11.5px; color: var(--mut); }
td .strong { font-weight: 600; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty { padding: 44px; text-align: center; color: var(--mut-2); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.pager { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel-2); }
.pager .spacer { flex: 1; }
.pg-info { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--mut); }

/* ---- pills / badges ------------------------------------------------------- */
.pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; padding: 3px 9px; border-radius: 20px;
        border: 1px solid var(--line); color: var(--mut); text-transform: uppercase; white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: rgba(87,210,149,.35); background: rgba(87,210,149,.08); }
.pill.warn { color: var(--warn); border-color: rgba(244,183,64,.35); background: rgba(244,183,64,.08); }
.pill.bad { color: var(--danger); border-color: rgba(255,99,99,.35); background: rgba(255,99,99,.08); }
.pill.acc { color: var(--acc); border-color: var(--acc-dim); background: rgba(var(--glow), .08); }

/* ---- inputs --------------------------------------------------------------- */
label.fld { display: block; margin: 13px 0 0; }
label.fld .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-bottom: 5px; display:block; }
input, select, textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  border-radius: 6px; padding: 9px 11px; font-size: 13.5px; outline: none; transition: .12s; }
input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--glow), .12); }
textarea { resize: vertical; min-height: 96px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%); background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
.ctx select { padding: 7px 30px 7px 11px; font-family: var(--mono); font-size: 12.5px; min-width: 180px; }

/* ---- drawer (create / edit) ---------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(4,6,10,.6); backdrop-filter: blur(2px); z-index: 40;
         opacity: 0; pointer-events: none; transition: .2s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 460px; max-width: 92vw; background: var(--panel);
          border-left: 1px solid var(--line); z-index: 41; transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
          display: flex; flex-direction: column; box-shadow: -30px 0 60px rgba(0,0,0,.4); }
.drawer.open { transform: translateX(0); }
.drawer .dh { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.drawer .dh h2 { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0; }
.drawer .db { padding: 6px 22px 22px; overflow-y: auto; flex: 1; }
.drawer .df { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.x { margin-left: auto; cursor: pointer; color: var(--mut); font-size: 20px; line-height: 1; background: none; border: none; }

/* ---- json / detail -------------------------------------------------------- */
pre.json { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 13px; overflow: auto;
           font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #b9c4d4; max-height: 60vh; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: 13px; }
.kv dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut-2); }
.kv dd { margin: 0; word-break: break-word; }

/* ---- toast ---------------------------------------------------------------- */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 6px;
         padding: 12px 16px; min-width: 240px; font-size: 13px; box-shadow: 0 14px 40px rgba(0,0,0,.45);
         animation: slidein .25s ease; }
.toast.ok { border-left-color: var(--ok); } .toast.bad { border-left-color: var(--danger); }
.toast .tt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut-2); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ---- gate (login) --------------------------------------------------------- */
.gate { position: fixed; inset: 0; display: grid; place-items: center; z-index: 80; background: var(--bg);
        background-image: radial-gradient(circle at 50% 38%, rgba(var(--glow), .12), transparent 55%),
          linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
        background-size: auto, 44px 44px, 44px 44px; }
.gate .box { width: 380px; max-width: 90vw; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
             padding: 34px 30px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.gate .glyph { width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 11px; position: relative;
  background: radial-gradient(circle at 30% 25%, var(--acc), transparent 70%), var(--panel-2); border: 1px solid var(--acc-dim);
  box-shadow: 0 0 30px rgba(var(--glow), .4) inset; }
.gate .glyph::after { content:""; position:absolute; inset:12px; border:2px solid var(--acc); border-radius:3px; }
.gate h1 { font-family: var(--display); font-weight: 800; font-size: 23px; margin: 0 0 4px; }
.gate .role { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--acc); margin-bottom: 24px; }
.gate label.fld { text-align: left; }
.spin { width: 15px; height: 15px; border: 2px solid rgba(var(--glow),.3); border-top-color: var(--acc); border-radius: 50%; animation: sp .7s linear infinite; display: inline-block; }
@keyframes sp { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
.muted { color: var(--mut); } .small { font-size: 12px; }
.hint { font-size: 12px; color: var(--mut-2); margin-top: 6px; }
.flex { display: flex; gap: 10px; align-items: center; }
.wrap { flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }