/* ============================================================
   TIA Logic Portal — License Admin console
   Dark-first operations UI. No webfont, no external asset.
   ============================================================ */

/* The HTML `hidden` attribute works only through the browser's own
   `[hidden]{display:none}` rule, which ANY author rule setting `display`
   outranks. Both `.modal-root` and `.shell` set `display:grid`, so they
   rendered even while marked hidden — the action modal appeared, empty and
   unprompted, over the sign-in screen, and the whole signed-in shell drew
   behind the gate. This is the one place `!important` is correct: `hidden`
   must beat every layout rule, including ones added later. */
[hidden]{ display:none !important; }

:root{
  /* ground */
  --bg:        #0d1116;
  --bg-panel:  #131a22;
  --bg-raise:  #18212b;
  --bg-hover:  #1c2734;
  --bg-input:  #0f151c;

  /* structure */
  --line:      #222d3a;
  --line-soft: #1a232d;

  /* type */
  --fg:        #e6edf3;
  --fg-dim:    #94a3b1;
  --fg-faint:  #6b7a89;

  /* one accent — never used to mean a state */
  --accent:      #a371f7;
  --accent-hi:   #b98cff;
  --accent-ink:  #14091f;
  --accent-soft: rgba(163,113,247,.14);

  /* semantic state colours */
  --s-active:    #3fb950;
  --s-pending:   #58a6ff;
  --s-hold:      #d29922;
  --s-suspended: #f85149;
  --s-denied:    #db6d5f;
  --s-off:       #7d8b99;

  --danger:      #f85149;
  --danger-soft: rgba(248,81,73,.12);

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-hi);

  --r:   8px;
  --r-s: 6px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --side-w: 212px;
  --top-h:  50px;
}

*,*::before,*::after{ box-sizing:border-box }

html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:13.5px/1.45 var(--font);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow:hidden;
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-s) }

.num, td.num, .mono{ font-variant-numeric:tabular-nums }
.mono{ font-family:var(--mono); font-size:12px }
.spacer{ flex:1 }
.hint{ color:var(--fg-dim); font-size:12px; margin:6px 0 }
.dim{ color:var(--fg-dim) }
.faint{ color:var(--fg-faint) }
.nowrap{ white-space:nowrap }
.trunc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ───────────── signed out ───────────── */
.gate{
  position:fixed; inset:0; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(163,113,247,.13), transparent 62%),
    var(--bg);
}
.gate-card{
  width:min(420px,100%);
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px 28px 22px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.gate-mark{ margin-bottom:14px }
.gate-card h1{ font-size:19px }
.gate-sub{ margin:6px 0 22px; color:var(--fg-dim); font-size:13px }
.gsi-slot{ display:flex; justify-content:center; min-height:44px }
.gate-msg{ min-height:18px; margin:14px 0 4px; font-size:12.5px; color:var(--s-suspended) }
.gate-msg.ok{ color:var(--fg-dim) }
.gate-fallback{ margin-top:12px; text-align:left; border-top:1px solid var(--line-soft); padding-top:12px }
.gate-fallback summary{ cursor:pointer; font-size:12px; color:var(--fg-dim) }
.gate-fallback summary:hover{ color:var(--fg) }
.gate-fallback textarea{ width:100%; margin:8px 0 }
.gate-foot{ margin:16px 0 0; font-size:11.5px; color:var(--fg-faint) }

/* ───────────── shell ───────────── */
.shell{ display:grid; grid-template-columns:var(--side-w) 1fr; height:100vh }

.side{
  display:flex; flex-direction:column;
  background:#0b0f14;
  border-right:1px solid var(--line);
  min-height:0;
}
.brand{
  display:flex; align-items:center; gap:9px;
  height:var(--top-h); padding:0 14px;
  border-bottom:1px solid var(--line);
  font-weight:650; font-size:13.5px; letter-spacing:-.01em;
}
.nav{ padding:10px 8px; display:flex; flex-direction:column; gap:1px; overflow:auto }
.nav-item{
  display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:var(--r-s);
  color:var(--fg-dim); font-size:13px; font-weight:500;
  border:1px solid transparent;
}
.nav-item:hover{ background:var(--bg-hover); color:var(--fg) }
.nav-item.on{ background:var(--accent-soft); color:var(--fg); border-color:rgba(163,113,247,.28) }
.nav-ico{ width:15px; text-align:center; color:var(--fg-faint); font-size:12px }
.nav-item.on .nav-ico{ color:var(--accent-hi) }
.nav-badge{
  margin-left:auto; min-width:19px; text-align:center;
  background:var(--s-pending); color:#04121f; font-size:11px; font-weight:700;
  border-radius:9px; padding:1px 6px;
}
.side-foot{
  margin-top:auto; padding:11px 12px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:8px;
}
.who{ min-width:0; flex:1 }
.who-email{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.who-role{ margin-top:3px }
.role-tag{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--accent-hi); background:var(--accent-soft);
  border:1px solid rgba(163,113,247,.3); border-radius:4px; padding:1px 5px;
}

.main{ display:flex; flex-direction:column; min-width:0; min-height:0 }

.topbar{
  height:var(--top-h); flex:0 0 var(--top-h);
  display:flex; align-items:center; gap:12px;
  padding:0 14px; border-bottom:1px solid var(--line);
  background:var(--bg);
}
.search-wrap{ position:relative; flex:1; max-width:460px }
.search-ico{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  color:var(--fg-faint); font-size:14px; pointer-events:none;
}
#search{ width:100%; padding-left:27px; padding-right:30px; height:31px }
.search-kbd{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  font:11px/1 var(--mono); color:var(--fg-faint);
  border:1px solid var(--line); border-radius:4px; padding:3px 5px; background:var(--bg-raise);
}
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px }
.conn{ font-size:11.5px; color:var(--fg-faint) }
.conn.bad{ color:var(--s-suspended) }

.view{ flex:1; overflow:auto; padding:16px 18px 40px; min-height:0 }
.view:focus{ outline:none }

/* ───────────── generic bits ───────────── */
.page-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap }
.page-head h1{ font-size:17px }
.page-head .sub{ color:var(--fg-dim); font-size:12.5px }
.page-head .tools{ margin-left:auto; display:flex; gap:8px; align-items:center }

.panel{
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:16px;
}
.panel-head{
  display:flex; align-items:center; gap:10px;
  padding:9px 13px; border-bottom:1px solid var(--line);
  background:var(--bg-raise);
}
.panel-head h2{ font-size:13px; letter-spacing:.01em }
.panel-head .count{ color:var(--fg-faint); font-size:12px }
.panel-body{ padding:13px }

.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; align-items:start }

/* stat cards */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; margin-bottom:16px }
.stat{
  background:var(--bg-panel); border:1px solid var(--line); border-left:3px solid var(--s-off);
  border-radius:var(--r); padding:11px 13px; min-height:76px;
}
.stat.pending{ border-left-color:var(--s-pending) }
.stat.active{ border-left-color:var(--s-active) }
.stat.on_hold{ border-left-color:var(--s-hold) }
.stat.suspended{ border-left-color:var(--s-suspended) }
.stat.neutral{ border-left-color:var(--fg-faint) }
.stat-k{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-dim) }
.stat-v{ font-size:27px; font-weight:650; line-height:1.15; margin-top:5px; font-variant-numeric:tabular-nums }
.stat-n{ font-size:11.5px; color:var(--fg-faint); margin-top:2px }
a.stat{ display:block }
a.stat:hover{ background:var(--bg-raise) }

/* tables */
.table-wrap{ overflow-x:auto }
table{ width:100%; border-collapse:collapse; font-size:12.8px }
thead th{
  position:sticky; top:0; z-index:1;
  background:var(--bg-raise); color:var(--fg-dim);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  text-align:left; padding:7px 11px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:8px 11px; border-bottom:1px solid var(--line-soft); vertical-align:middle }
tbody tr:last-child td{ border-bottom:0 }
tbody tr{ height:38px }
tbody tr:hover{ background:var(--bg-hover) }
tbody tr.clickable{ cursor:pointer }
td.actions{ text-align:right; white-space:nowrap }
td.actions .btn{ margin-left:5px }
.empty{ padding:26px 13px; text-align:center; color:var(--fg-faint); font-size:12.5px }

/* chips */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px 2px 7px; border-radius:20px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
  border:1px solid var(--line); background:var(--bg-raise); color:var(--fg-dim);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none }
.chip.active     { color:var(--s-active);    border-color:rgba(63,185,80,.34);  background:rgba(63,185,80,.11) }
.chip.pending    { color:var(--s-pending);   border-color:rgba(88,166,255,.34); background:rgba(88,166,255,.11) }
.chip.registered { color:var(--fg-dim);      border-color:var(--line);          background:var(--bg-raise) }
.chip.on_hold    { color:var(--s-hold);      border-color:rgba(210,153,34,.36); background:rgba(210,153,34,.11) }
.chip.suspended  { color:var(--s-suspended); border-color:rgba(248,81,73,.36);  background:rgba(248,81,73,.11) }
.chip.denied     { color:var(--s-denied);    border-color:rgba(219,109,95,.34); background:rgba(219,109,95,.10) }
.chip.deactivated{ color:var(--s-off);       border-color:var(--line);          background:rgba(125,139,153,.10) }
.chip.blocked    { color:var(--s-suspended); border-color:rgba(248,81,73,.36);  background:rgba(248,81,73,.11) }
.chip.retired    { color:var(--s-off);       border-color:var(--line);          background:rgba(125,139,153,.10) }
.chip.live       { color:var(--s-active);    border-color:rgba(63,185,80,.34);  background:rgba(63,185,80,.11) }
.chip.stale      { color:var(--s-hold);      border-color:rgba(210,153,34,.36); background:rgba(210,153,34,.11) }
.chip.expired    { color:var(--s-suspended); border-color:rgba(248,81,73,.36);  background:rgba(248,81,73,.11) }
.chip.ok         { color:var(--s-active);    border-color:rgba(63,185,80,.34);  background:rgba(63,185,80,.11) }
.chip.bad        { color:var(--s-suspended); border-color:rgba(248,81,73,.36);  background:rgba(248,81,73,.11) }
.chip-sm{ font-size:10.5px; padding:1px 7px 1px 6px }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  font:600 12.5px/1 var(--font);
  padding:7px 11px; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--bg-raise); color:var(--fg);
  cursor:pointer; white-space:nowrap;
}
.btn:hover:not(:disabled){ background:var(--bg-hover); border-color:#31404f }
.btn:disabled{ opacity:.42; cursor:not-allowed }
.btn-sm{ padding:5px 9px; font-size:12px }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.btn-accent:hover:not(:disabled){ background:var(--accent-hi); border-color:var(--accent-hi) }
.btn-ghost{ background:transparent }
.btn-danger{ color:var(--danger); border-color:rgba(248,81,73,.42); background:var(--danger-soft) }
.btn-danger:hover:not(:disabled){ background:rgba(248,81,73,.2); border-color:var(--danger) }
.btn-danger-solid{ background:var(--danger); border-color:var(--danger); color:#1b0605 }
.btn-danger-solid:hover:not(:disabled){ background:#ff6a63; border-color:#ff6a63 }
.btn-good{ color:var(--s-active); border-color:rgba(63,185,80,.4); background:rgba(63,185,80,.1) }
.btn-good:hover:not(:disabled){ background:rgba(63,185,80,.2) }

/* form controls */
input[type=text],input[type=search],input[type=number],input[type=datetime-local],select,textarea{
  font:13px/1.4 var(--font);
  color:var(--fg); background:var(--bg-input);
  border:1px solid var(--line); border-radius:var(--r-s);
  padding:6px 9px;
}
textarea{ resize:vertical; min-height:64px; width:100% }
select{ cursor:pointer }
input::placeholder,textarea::placeholder{ color:var(--fg-faint) }
input:focus-visible,select:focus-visible,textarea:focus-visible{ border-color:var(--accent) }

.filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px }
.filters label{ font-size:11.5px; color:var(--fg-dim); display:flex; align-items:center; gap:6px }

/* action bar */
.actionbar{ display:flex; flex-wrap:wrap; gap:7px; padding:11px 13px; border-top:1px solid var(--line); background:var(--bg-raise) }
.actionbar .sep{ width:1px; background:var(--line); margin:2px 5px }
.act-note{
  flex-basis:100%; font-size:11.5px; color:var(--fg-faint);
  border-left:2px solid var(--line); padding-left:8px; margin-top:2px;
}

/* key/value */
.kv{ display:grid; grid-template-columns:130px 1fr; gap:5px 12px; font-size:12.8px }
.kv dt{ color:var(--fg-dim) }
.kv dd{ margin:0; word-break:break-word }

/* timeline */
.timeline{ list-style:none; margin:0; padding:0 }
.timeline li{ position:relative; padding:8px 0 8px 20px; border-bottom:1px solid var(--line-soft) }
.timeline li:last-child{ border-bottom:0 }
.timeline li::before{
  content:""; position:absolute; left:4px; top:14px;
  width:7px; height:7px; border-radius:50%; background:var(--fg-faint);
}
.timeline li::after{
  content:""; position:absolute; left:7px; top:21px; bottom:-8px; width:1px; background:var(--line);
}
.timeline li:last-child::after{ display:none }
.timeline .t-act{ font-weight:600 }
.timeline .t-meta{ color:var(--fg-faint); font-size:11.5px; margin-top:2px }
.timeline .t-reason{ color:var(--fg-dim); font-size:12px; margin-top:3px }

/* versions */
.ver{ border:1px solid var(--line); border-radius:var(--r-s); margin-bottom:7px; background:var(--bg-raise) }
.ver > summary{ cursor:pointer; padding:7px 10px; font-size:12.5px; display:flex; gap:8px; align-items:center }
.ver > summary::marker{ color:var(--fg-faint) }
.ver .ver-body{ padding:10px; border-top:1px solid var(--line) }

/* pagination */
.pager{ display:flex; align-items:center; gap:9px; padding:9px 13px; border-top:1px solid var(--line); font-size:12px; color:var(--fg-dim) }

/* skeletons — reserve height so nothing jumps */
.sk{ background:linear-gradient(90deg,#182029 25%,#212c37 37%,#182029 63%); background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:4px }
@keyframes sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.sk-line{ height:11px; margin:5px 0 }
.sk-row td{ padding:8px 11px }
@media (prefers-reduced-motion:reduce){ .sk{ animation:none } }

/* banners */
.banner{ border:1px solid var(--line); border-left:3px solid var(--s-pending); background:var(--bg-panel); border-radius:var(--r); padding:10px 13px; font-size:12.5px; margin-bottom:14px }
.banner.err{ border-left-color:var(--danger); color:#ffb4af }
.banner.warn{ border-left-color:var(--s-hold) }

/* ───────────── modal ───────────── */
.modal-root{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px }
.modal-backdrop{ position:absolute; inset:0; background:rgba(3,6,10,.66); backdrop-filter:blur(2px) }
.modal{
  position:relative; width:min(520px,100%);
  background:var(--bg-panel); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 24px 70px rgba(0,0,0,.6); max-height:88vh; display:flex; flex-direction:column;
}
.modal-head{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line) }
.modal-head h2{ font-size:14.5px }
.modal-x{ margin-left:auto; background:none; border:0; color:var(--fg-faint); cursor:pointer; font-size:14px; padding:4px 6px; border-radius:4px }
.modal-x:hover{ color:var(--fg); background:var(--bg-hover) }
.modal-body{ padding:15px; overflow:auto }
.modal-foot{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-top:1px solid var(--line); background:var(--bg-raise); border-radius:0 0 11px 11px }
.modal-hint{ font-size:11.5px; color:var(--fg-faint) }
.modal-hint.warn{ color:var(--s-hold) }
.field{ margin-bottom:12px }
.field > label{ display:block; font-size:11.5px; color:var(--fg-dim); margin-bottom:5px; font-weight:600; letter-spacing:.02em }
.field input[type=text],.field input[type=number],.field input[type=datetime-local]{ width:100% }
.danger-box{
  border:1px solid rgba(248,81,73,.4); background:var(--danger-soft);
  border-radius:var(--r-s); padding:10px 11px; margin-bottom:12px; font-size:12.5px;
}
.danger-box strong{ color:#ffb4af }
.confirm-row{ display:flex; gap:8px; align-items:flex-start; margin-top:9px; font-size:12.5px }
.confirm-row input{ margin-top:2px; accent-color:var(--danger) }

/* ───────────── toasts ───────────── */
.toasts{ position:fixed; right:14px; bottom:14px; z-index:80; display:flex; flex-direction:column; gap:8px; max-width:min(400px,90vw) }
.toast{
  background:var(--bg-raise); border:1px solid var(--line); border-left:3px solid var(--fg-faint);
  border-radius:var(--r); padding:9px 12px; font-size:12.5px; box-shadow:0 10px 30px rgba(0,0,0,.45);
  display:flex; gap:9px; align-items:flex-start;
}
.toast.ok{ border-left-color:var(--s-active) }
.toast.err{ border-left-color:var(--danger) }
.toast.warn{ border-left-color:var(--s-hold) }
.toast .t-title{ font-weight:650 }
.toast .t-msg{ color:var(--fg-dim); margin-top:2px }
.toast .t-x{ margin-left:auto; background:none; border:0; color:var(--fg-faint); cursor:pointer; font-size:12px }

@media (max-width:860px){
  :root{ --side-w:60px }
  .brand span, .nav-item span:not(.nav-ico):not(.nav-badge), .side-foot .who{ display:none }
  .nav-item{ justify-content:center }
  .side-foot{ justify-content:center }
}