/* ============================================================
   QUANT X — app.css
   User dashboard + admin console UI. Built on site.css tokens.
   ============================================================ */
:root { --ax-side: 256px; --ax-top: 62px; }

body.ax-page { background: var(--bg); color: var(--text); min-height: 100vh; }

/* ---------- shell ---------- */
.ax { display: flex; min-height: 100vh; }
.ax-side {
  width: var(--ax-side); flex: 0 0 var(--ax-side);
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
  background: linear-gradient(180deg, #0a0e1a, #070a13);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  z-index: 40;
}
.ax-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--text); }
/* The real mark, same asset and same blend as the marketing nav. The gradient
   tile with a typed "X" that used to sit here was the only place on the estate
   where the logo was drawn in CSS instead of being the logo. See the note on
   .brand .mark-img in site.css for why mix-blend-mode is required. */
.ax-brand .mark-img { height: 26px; width: auto; display: inline-block;
  vertical-align: middle; mix-blend-mode: lighten; }
.ax-scope { font: 600 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); padding: 6px 22px 12px; }
.ax-admin .ax-scope { color: var(--gold); }
.ax-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px; overflow-y: auto; flex: 1; }
.ax-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: var(--text-dim); font-size: 14px; font-weight: 500; transition: background .14s, color .14s; }
.ax-link:hover { background: rgba(125,145,190,.08); color: var(--text); }
.ax-link.on { background: rgba(69,226,234,.1); color: var(--text); }
.ax-admin .ax-link.on { background: rgba(244,183,64,.12); }
.ax-link svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }
.ax-link.on svg { opacity: 1; }
.ax-link .tg { margin-left: auto; font: 600 9px/1 var(--font-mono); letter-spacing: .08em; padding: 3px 6px;
  border-radius: 5px; color: var(--cyan); border: 1px solid rgba(69,226,234,.3); }
.ax-sep { height: 1px; background: var(--line); margin: 10px 14px; }
.ax-foot { padding: 10px 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }

.ax-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ax-top { position: sticky; top: 0; height: var(--ax-top); z-index: 30;
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  background: rgba(8,11,20,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.ax-burger { display: none; background: none; border: 1px solid var(--line-bright); color: var(--text);
  border-radius: 9px; padding: 7px 10px; cursor: pointer; font-size: 16px; }
.ax-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.ax-title small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.ax-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ax-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 11px; min-width: 200px; }
.ax-search input { background: none; border: 0; color: var(--text); font-size: 13px; width: 100%; outline: none; }
.ax-search svg { width: 14px; height: 14px; opacity: .5; }
.ax-user { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 6px; border-radius: 9px; }
.ax-user:hover { background: rgba(125,145,190,.08); }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 30px;
  font: 700 12px var(--font-display); color: #04240f; background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.av.lg { width: 52px; height: 52px; flex-basis: 52px; font-size: 19px; }
.ax-user .un { font-size: 13px; font-weight: 600; line-height: 1.2; }
.ax-user .ur { font-size: 11px; color: var(--text-dim); }

.ax-main { padding: 26px 30px 48px; max-width: 1280px; width: 100%; }
@media (max-width: 1100px) { .ax-main { padding: 22px 20px 40px; } }

/* ---------- page header ---------- */
.ax-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.ax-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.ax-head p { color: var(--text-dim); font-size: 14px; margin-top: 5px; max-width: 560px; }
.ax-head .acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.tiles.c3 { grid-template-columns: repeat(3, 1fr); }
.tiles.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .tiles, .tiles.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tiles, .tiles.c3, .tiles.c2 { grid-template-columns: 1fr; } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; position: relative; overflow: hidden; }
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cyan); opacity: .85; }
.tile.g::before { background: var(--mint); } .tile.go::before { background: var(--gold); } .tile.v::before { background: var(--violet); } .tile.c::before { background: var(--coral); }
.tile .tl { font: 600 11px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.tile .tv { font-family: var(--font-display); font-size: 27px; font-weight: 700; margin-top: 8px; letter-spacing: -.01em; }
.tile .td { font-size: 12px; margin-top: 5px; color: var(--text-dim); }
.tile .td.up { color: var(--mint); } .tile .td.down { color: var(--coral); }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 20px; overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-h h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.panel-h h3 small { font-family: var(--font-body); font-weight: 400; color: var(--text-dim); font-size: 12.5px; margin-left: 8px; }
.panel-h .acts { display: flex; gap: 8px; align-items: center; }
.panel-b { padding: 20px; }
.panel-b.flush { padding: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 960px) { .grid2, .grid-2-1 { grid-template-columns: 1fr; } }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th { text-align: left; font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.tbl tbody td { padding: 13px 16px; border-bottom: 1px solid rgba(125,145,190,.09); color: var(--text); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.cl { cursor: pointer; transition: background .12s; }
.tbl tbody tr.cl:hover { background: rgba(125,145,190,.05); }
.tbl td .sub { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--font-mono); }
.tbl td.mono { font-family: var(--font-mono); font-size: 12.5px; }
.tbl .nm { display: flex; align-items: center; gap: 10px; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--font-mono); letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge.ok { color: var(--mint); border-color: rgba(54,224,160,.35); background: rgba(54,224,160,.08); }
.badge.info { color: var(--cyan); border-color: rgba(69,226,234,.35); background: rgba(69,226,234,.08); }
.badge.warn { color: var(--gold); border-color: rgba(244,183,64,.35); background: rgba(244,183,64,.08); }
.badge.bad { color: var(--coral); border-color: rgba(255,92,115,.35); background: rgba(255,92,115,.08); }
.badge.mute { color: var(--text-dim); border-color: var(--line-bright); background: rgba(125,145,190,.06); }

/* ---------- license key chip ---------- */
.key { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--font-mono); letter-spacing: .04em;
  color: var(--cyan); background: rgba(69,226,234,.06); border: 1px solid rgba(69,226,234,.2); border-radius: 8px; padding: 6px 10px; }
.key button { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 5px; }
.key button:hover { color: var(--cyan); background: rgba(69,226,234,.1); }

/* ---------- meter ---------- */
.meter { height: 8px; border-radius: 6px; background: rgba(125,145,190,.14); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.meter i.warn { background: linear-gradient(90deg, var(--gold), var(--coral)); }

/* ---------- key-value ---------- */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 0; }
.kv > div { padding: 11px 0; border-bottom: 1px solid rgba(125,145,190,.09); font-size: 13.5px; }
.kv > div:nth-child(odd) { color: var(--text-dim); font-size: 12.5px; }
.kv > div.full { grid-column: 1 / -1; }

/* ---------- buttons (extends site.css .btn) ---------- */
.btn-sm { padding: 7px 13px; font-size: 12.5px; border-radius: 8px; }
.btn-soft { background: rgba(125,145,190,.1); border: 1px solid var(--line-bright); color: var(--text); border-radius: 9px; padding: 8px 14px; font: 600 13px var(--font-body); cursor: pointer; transition: .14s; display: inline-flex; align-items: center; gap: 7px; }
.btn-soft:hover { background: rgba(125,145,190,.18); color: var(--text); }
.btn-danger { background: rgba(255,92,115,.12); border: 1px solid rgba(255,92,115,.4); color: var(--coral); border-radius: 9px; padding: 8px 14px; font: 600 13px var(--font-body); cursor: pointer; transition: .14s; }
.btn-danger:hover { background: rgba(255,92,115,.2); }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field > label { display: block; font: 600 12px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line-bright); color: var(--text);
  font: 400 14px var(--font-body); padding: 11px 13px; border-radius: 10px; outline: none; transition: border-color .14s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan); }
.field .hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .frow { grid-template-columns: 1fr; } }
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { display: none; }
.toggle .tk { width: 40px; height: 23px; border-radius: 999px; background: rgba(125,145,190,.25); position: relative; transition: background .15s; flex: 0 0 40px; }
.toggle .tk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input:checked + .tk { background: var(--cyan); }
.toggle input:checked + .tk::after { transform: translateX(17px); }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(4,6,12,.7); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-bg.open { display: flex; }
.modal { width: 100%; max-width: 520px; background: var(--surface-2); border: 1px solid var(--line-bright); border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); max-height: 90vh; overflow: auto; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-h h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.modal-h .x { background: none; border: 0; color: var(--text-dim); font-size: 20px; cursor: pointer; line-height: 1; }
.modal-h .x:hover { color: var(--text); }
.modal-b { padding: 22px; }
.modal-f { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 40px 20px; color: var(--text-dim); }
.empty svg { width: 34px; height: 34px; opacity: .4; margin-bottom: 10px; }
.note-box { background: rgba(69,226,234,.05); border: 1px solid rgba(69,226,234,.18); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.note-box b { color: var(--text); }
.note-box.warn { background: rgba(244,183,64,.06); border-color: rgba(244,183,64,.22); }
.chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.flag { font: 600 11px var(--font-mono); color: var(--text-dim); border: 1px solid var(--line-bright); border-radius: 6px; padding: 2px 7px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 300;
  background: var(--surface-3); border: 1px solid var(--line-bright); color: var(--text); padding: 11px 18px; border-radius: 10px;
  font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lic-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(125,145,190,.09); }
.lic-line:last-child { border-bottom: 0; }
.seat { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); margin-bottom: 8px; }
.seat .mono { font-family: var(--font-mono); }
.seat .rm { margin-left: auto; }

/* ---------- mobile sidebar ---------- */
.ax-scrim { display: none; position: fixed; inset: 0; background: rgba(4,6,12,.6); z-index: 39; }
@media (max-width: 940px) {
  .ax-side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .22s ease; }
  .ax.open .ax-side { transform: translateX(0); }
  .ax.open .ax-scrim { display: block; }
  .ax-burger { display: inline-flex; }
  .ax-search { display: none; }
}