/* Go.AI License Manager - v4 restyle to the house design language:
   - canvas and cards follow the cloud console (light cool gray canvas,
     white cards with hairline borders, solid brand-purple primaries)
   - the rail and lockup follow the brand site and the Hub (near-black
     surface, "Go.AI | product" lockup with the purple dot, pill buttons,
     uppercase letterspaced eyebrow labels)
   Prebuilt static asset: no build system, no CDN, system type stack. */

:root {
  --accent: #675dff;
  --accent-dim: rgba(103, 93, 255, 0.3);
  --accent-deep: #5348e8;
  --ink: #17171c;
  --ink-2: #44444c;
  --ink-3: #7c7c86;
  --ok: #1d7a37;
  --warn: #9a6e00;
  --fail: #d12b2b;
  --canvas: #f5f6fa;
  --card: #ffffff;
  --rail-bg: #0e0e11;
  --hairline: rgba(16, 16, 32, 0.1);
  --card-radius: 14px;
  --ctl-radius: 9px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* the hidden attribute always wins, even over explicit display rules
   (role gating and the auth gate both rely on it) */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* the console's light cool-gray canvas */
body { background: var(--canvas); }

.shell {
  display: grid;
  grid-template-columns: 252px 1fr;
  min-height: 100vh;
}

/* ── Brand lockup: "Go.AI | License Manager" (hub grammar) ────────────── */
.brand.lockup { display: flex; align-items: center; gap: 12px; }
.brand-name {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -0.03em;
  color: #fff; line-height: 1;
}
.brand-name .dot { color: var(--accent); }
.brand-name.dark { color: var(--ink); }
.brand-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.25);
  flex: none; }
.brand-product {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
  line-height: 1.3;
}
.brand-product.dark { color: var(--ink-3); }
.brand.lockup.dark .brand-divider { background: var(--hairline); }

/* ── Left rail: near-black, brand/hub surface ─────────────────────────── */
.rail {
  padding: 30px 18px 24px 24px;
  display: flex;
  flex-direction: column;
  background: var(--rail-bg);
  color: rgba(255, 255, 255, 0.92);
  position: sticky; top: 0; height: 100vh;
}
.rail .brand { margin-bottom: 34px; }
.rail ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.rail li {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55); cursor: pointer; user-select: none;
}
.rail li:hover { color: rgba(255, 255, 255, 0.85); }
.rail li .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28); flex-shrink: 0;
}
.rail li.active { color: #fff; background: rgba(255, 255, 255, 0.09);
  font-weight: 600; }
.rail li.active .dot { background: var(--accent); }
.rail .rail-foot { margin-top: 14px; font-size: 11px;
  color: rgba(255, 255, 255, 0.38); line-height: 1.5; }

.rail-user {
  margin-top: auto; padding: 12px 12px 0; border-top: 1px solid
  rgba(255, 255, 255, 0.12); font-size: 12px;
  color: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column;
  gap: 8px; align-items: flex-start;
}
.rail-user b { color: #fff; }
.rail-user .btn.secondary {
  background: transparent; color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.rail-user .btn.secondary:hover { border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06); }

/* ── Stage + card: console-style white card on the gray canvas ────────── */
.stage { display: flex; justify-content: center; padding: 30px 40px;
  min-width: 0; }
.card {
  width: 100%; max-width: 920px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(16, 16, 32, 0.04),
              0 8px 28px rgba(16, 16, 32, 0.05);
  padding: 30px 36px 38px;
  align-self: flex-start;
}

h1 { font-size: 23px; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sub { color: var(--ink-3); font-size: 13.5px; line-height: 1.55;
  margin-bottom: 20px; }

/* brand-site eyebrow grammar for section headings */
h2 {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 28px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
h2:first-of-type { border-top: none; padding-top: 0; }

/* ── Signing-key banner ───────────────────────────────────────────────── */
.banner {
  border-radius: 10px; padding: 12px 16px; font-size: 13px; line-height: 1.5;
  margin-bottom: 24px; border: 1px solid var(--hairline);
  background: var(--canvas); color: var(--ink-2);
}
.banner.ok { background: rgba(29, 122, 55, 0.06);
  border-color: rgba(29, 122, 55, 0.25); }
.banner.missing { background: rgba(154, 110, 0, 0.07);
  border-color: rgba(154, 110, 0, 0.3); }
.banner .warnline { color: var(--fail); font-weight: 600; margin-top: 4px; }
.banner code { font-size: 12px; }

/* ── Forms ────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; max-width: 540px; }
.form label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.form input, .form select, .form textarea {
  font: inherit; font-size: 13.5px; padding: 9px 11px;
  border: 1px solid rgba(16, 16, 32, 0.18); border-radius: var(--ctl-radius);
  background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form textarea { resize: vertical; font-family: inherit; }
#verify-form textarea, #import-form textarea[name="key"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  word-break: break-all;
}
.row { display: flex; gap: 10px; align-items: center; }

/* brand/hub pill buttons; console's solid purple primary */
.btn {
  font: inherit; font-size: 13.5px; font-weight: 600;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  align-self: flex-start; text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.secondary { background: #fff; color: var(--ink);
  border: 1px solid rgba(16, 16, 32, 0.2); }
.btn.secondary:hover { background: var(--canvas); border-color:
  rgba(16, 16, 32, 0.35); }
.btn.danger { background: #fff; color: var(--fail);
  border: 1px solid rgba(209, 43, 43, 0.45); }
.btn.danger:hover { background: rgba(209, 43, 43, 0.06);
  border-color: var(--fail); }
.btn.small { padding: 5px 13px; font-size: 12px; }

.linklike {
  background: none; border: none; font: inherit; font-size: 12.5px;
  color: var(--accent); cursor: pointer; text-align: left; padding: 0;
  align-self: flex-start;
}
.linklike:hover { text-decoration: underline; }

/* ── Notices + results ────────────────────────────────────────────────── */
.notice { border-radius: 10px; padding: 12px 15px; font-size: 13px;
  line-height: 1.5; margin: 14px 0; border: 1px solid transparent; }
.notice.ok { background: rgba(29, 122, 55, 0.07); color: var(--ok);
  border-color: rgba(29, 122, 55, 0.2); }
.notice.warn { background: rgba(154, 110, 0, 0.07); color: var(--warn);
  border-color: rgba(154, 110, 0, 0.22); }
.notice.fail { background: rgba(209, 43, 43, 0.06); color: var(--fail);
  border-color: rgba(209, 43, 43, 0.22); }

.reset-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  background: #fff; border: 1px dashed rgba(154, 110, 0, 0.5);
  border-radius: 6px; padding: 2px 8px;
}

.keybox {
  margin-top: 16px; padding: 14px 16px; border-radius: 10px;
  background: var(--canvas); border: 1px solid var(--hairline);
}
.keybox .keytext {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; word-break: break-all; line-height: 1.6;
  color: var(--ink); margin-bottom: 10px; user-select: all;
}
.claims { font-size: 13px; line-height: 1.7; margin-top: 10px; }
.claims b { display: inline-block; min-width: 110px; color: var(--ink-3);
  font-weight: 600; }

/* ── License list ─────────────────────────────────────────────────────── */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
  align-items: center; }
.toolbar input[type="search"] {
  flex: 1; min-width: 200px; font: inherit; font-size: 13px;
  padding: 8px 12px; border: 1px solid rgba(16, 16, 32, 0.18);
  border-radius: var(--ctl-radius); background: #fff;
}
.toolbar select, .toolbar input[type="date"] {
  font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid rgba(16, 16, 32, 0.18);
  border-radius: var(--ctl-radius); background: #fff; color: var(--ink); }
.toolbar input[type="number"] {
  width: 110px; font: inherit; font-size: 13px; padding: 8px 12px;
  border: 1px solid rgba(16, 16, 32, 0.18); border-radius: var(--ctl-radius);
}

.list { display: flex; flex-direction: column; gap: 10px; }
.lic {
  border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px;
  background: #fff;
}
.lic .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lic .name { font-weight: 600; font-size: 14.5px; flex: 1; }
.lic .meta { color: var(--ink-3); font-size: 12.5px; margin-top: 4px;
  line-height: 1.6; }
.lic .actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.lic .fullkey { display: none; }
.lic.open .fullkey { display: block; margin-top: 10px; }

.chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.chip.active      { background: rgba(29, 122, 55, 0.1);   color: var(--ok); }
.chip.expiring    { background: rgba(154, 110, 0, 0.12);  color: var(--warn); }
.chip.expired     { background: rgba(209, 43, 43, 0.1);   color: var(--fail); }
.chip.superseded  { background: #ececf1; color: var(--ink-3); }
.chip.renewed     { background: rgba(103, 93, 255, 0.12); color: var(--accent); }
.chip.revoked     { background: rgba(209, 43, 43, 0.12);  color: var(--fail); }
.chip.compromised { background: #2b2b31; color: #ffb3b3; }
.chip.origin      { background: rgba(103, 93, 255, 0.1);  color: var(--accent);
  text-transform: none; letter-spacing: 0; font-weight: 600; }

.empty { color: var(--ink-3); font-size: 13.5px; padding: 26px 0;
  text-align: center; }

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; background: rgba(14, 14, 17, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.modal[hidden] { display: none; }
.modal-card {
  background: #fff; border-radius: 16px; padding: 26px 30px;
  width: min(480px, 92vw); border: 1px solid var(--hairline);
  box-shadow: 0 30px 80px rgba(14, 14, 17, 0.4);
}
.modal-card h2 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  text-transform: none; color: var(--ink); margin: 0 0 6px;
  border-top: none; padding-top: 0;
}

/* ── Badge, detail, timeline, lineage, audit, notices ─────────────────── */
.badge {
  background: var(--fail); color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 10px; padding: 1px 7px; margin-left: auto;
}

.form.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
  max-width: 640px; }
.form.grid2 .span2 { grid-column: 1 / -1; }
.form.grid2 .btn { grid-column: 1 / -1; justify-self: start; }

.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }

.lineage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px; margin: 8px 0 4px; }
.lineage-node {
  border: 1px solid var(--hairline); border-radius: 9px; padding: 6px 11px;
  background: var(--canvas); color: var(--ink-2);
}
.lineage-node.current { border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim); color: var(--ink);
  font-weight: 600; background: #fff; }
.lineage .arrow { color: var(--ink-3); font-weight: 700; }

.timeline, .audit-table { display: flex; flex-direction: column; gap: 8px; }
.event {
  border-left: 3px solid var(--accent-dim); padding: 6px 12px;
  background: #fafafc; border-radius: 0 8px 8px 0; font-size: 12.5px;
}
.event-head { color: var(--ink-2); line-height: 1.6; }
.chip.action { background: rgba(103, 93, 255, 0.1); color: var(--accent);
  text-transform: none; letter-spacing: 0; }
.audit-diff {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--ink-3); margin-top: 3px;
  word-break: break-all; line-height: 1.6;
}

.notes-history { font-size: 13px; line-height: 1.7; color: var(--ink-2);
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 12px 15px; }

.lic .dep { color: var(--accent); font-weight: 600; }

.inline-check, .form label.inline-check {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2); }

/* ── Company sign-in gate: TRUE BLACK, Foundry's design language -
   black canvas, hairline-bordered panel, single calm accent ──────────── */
#auth-gate {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: #000;
}
.gate-card {
  width: min(430px, 94vw); text-align: center;
  background: #0a0a0c; border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px; padding: 44px 42px 30px;
}
.gate-logo {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 34px; font-weight: 700; letter-spacing: -0.035em;
  color: #fff; margin-bottom: 18px;
}
.gate-logo .dot { color: var(--accent); }
.gate-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}
.gate-sub {
  color: rgba(255, 255, 255, 0.62); font-size: 13.5px; line-height: 1.6;
  margin-bottom: 14px;
}
.btn.gate-signin {
  width: 100%; margin-top: 12px; padding: 12px 18px; font-size: 15px;
}
.gate-wait {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: rgba(255, 255, 255, 0.72); font-size: 13.5px; margin-top: 16px;
}
.gate-wait .btn.secondary {
  background: transparent; color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--accent);
  animation: gate-spin 0.9s linear infinite;
}
@keyframes gate-spin { to { transform: rotate(360deg); } }
.gate-error {
  margin-top: 18px; padding: 10px 14px; border-radius: 10px;
  background: rgba(209, 43, 43, 0.14); border: 1px solid rgba(209, 43, 43, 0.4);
  color: #ff9d9d; font-size: 13px; line-height: 1.5; text-align: left;
}
.gate-foot {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35); font-size: 12px;
}

.chip.req-pending  { background: rgba(154, 110, 0, 0.12);  color: var(--warn); }
.chip.req-approved { background: rgba(29, 122, 55, 0.1);   color: var(--ok); }
.chip.req-denied   { background: rgba(209, 43, 43, 0.1);   color: var(--fail); }
.chip.req-expired  { background: #ececf1; color: var(--ink-3); }

/* tickets (support intake, v5) */
.chip.tkt-new         { background: rgba(154, 110, 0, 0.12); color: var(--warn); }
.chip.tkt-in-progress { background: rgba(103, 93, 255, 0.12); color: var(--accent); }
.chip.tkt-closed      { background: rgba(29, 122, 55, 0.1); color: var(--ok); }
.chip.sev-low      { background: #ececf1; color: var(--ink-3); }
.chip.sev-normal   { background: rgba(103, 93, 255, 0.1); color: var(--accent); }
.chip.sev-high     { background: rgba(154, 110, 0, 0.12); color: var(--warn); }
.chip.sev-critical { background: rgba(209, 43, 43, 0.12); color: var(--fail); }

/* ── v4 dashboard ─────────────────────────────────────────────────────── */
.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 24px;
}
.stat {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: #fff; padding: 16px 18px;
}
.stat-value { font-size: 30px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.stat.ok .stat-value { color: var(--ok); }
.stat.warn .stat-value { color: var(--warn); }
.stat.fail .stat-value { color: var(--fail); }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.dash-row { cursor: pointer; }
.dash-row:hover { border-color: var(--accent-dim); }

@media (max-width: 980px) {
  .dash-cols { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}