/* radeeo console — components layered over the marketing site's
   style.css. Reads ONLY its tokens, so both themes come for free. */

.console { padding: 42px 24px 80px; }
.console h1 { font-family: var(--font-display); font-size: 1.7rem; margin: 4px 0 20px; letter-spacing: 0.01em; }
.console h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 12px; }
.console h3 { font-size: 0.95rem; font-weight: 650; margin: 20px 0 8px; }
.console a { color: var(--accent); }
.muted { color: var(--ink-muted); }
.hint { display: block; color: var(--ink-muted); font-size: 0.78rem; margin-top: 4px; }

.nav-who { color: var(--ink-muted); font-size: 0.8rem; }
.nav-out { margin: 0; }

/* Panels: the console's card — quiet, bordered, roomy. */
.panel { background: var(--bg-raise); border: 1px solid var(--line); padding: 22px 24px 24px; margin: 22px 0; }
.station-grid { margin: 0 0 8px; }
.station-grid .card { border: 1px solid var(--line); }

/* Forms. */
.stack { display: grid; gap: 14px; max-width: 460px; }
.stack.narrow { max-width: 380px; }
.stack label { display: grid; gap: 5px; font-size: 0.9rem; }
.stack input, .row-form input, .row-form select {
  font: 0.95rem var(--font-mono); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); padding: 9px 11px;
}
.stack input:focus, .row-form input:focus, .row-form select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.stack .btn, .row-form .btn { justify-self: start; cursor: pointer; font-size: 0.9rem; }
.row-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; }
.row-form label { display: grid; gap: 5px; font-size: 0.8rem; color: var(--ink-muted); }
.row-form.inline { margin: 0; }
button.btn { cursor: pointer; font-family: inherit; }
.btn-danger { border-color: var(--onair); color: var(--onair); }
.btn-danger:hover { background: var(--onair); border-color: var(--onair); color: #fff; }

/* Auth cards: centered single-purpose pages. */
.auth-card { max-width: 440px; margin: 48px auto 0; background: var(--bg-raise); border: 1px solid var(--line); padding: 34px 36px 30px; }
.auth-card h1 { margin-top: 6px; }
.auth-alt { margin-top: 18px; font-size: 0.85rem; color: var(--ink-muted); }

/* Outcome lines: green = worked, red = error. Never mixed. */
.form-err { color: var(--onair); background: var(--onair-soft); border-left: 3px solid var(--onair); padding: 8px 12px; font-size: 0.9rem; }
.form-ok { color: var(--ok); border-left: 3px solid var(--ok); padding: 8px 12px; font-size: 0.9rem; }

/* Tables. */
.console-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 6px 0 4px; }
.console-table th { text-align: left; font: 500 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line-strong); }
.console-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.console-table tr.revoked td { color: var(--ink-muted); text-decoration: line-through; }
.console-table tr.revoked td .chip { text-decoration: none; }
.console-table .btn { padding: 5px 12px; font-size: 0.8rem; }

/* State chips: licence and gateway health at a glance. */
.chip { display: inline-block; font: 500 0.72rem var(--font-mono); letter-spacing: 0.05em; padding: 3px 9px; border: 1px solid var(--line); color: var(--ink-muted); }
.chip-active, .chip-ok { border-color: var(--ok); color: var(--ok); }
.chip-grace, .chip-warn { border-color: var(--accent); color: var(--accent); }
.chip-expired, .chip-down, .chip-suspended, .chip-revoked { border-color: var(--onair); color: var(--onair); }
.chip-none { border-style: dashed; }

/* The per-licence key sub-table sits inside the licences panel — the
   keys ARE the licence's, so they live with the entitlements. */
.key-subtable { margin: 8px 0 2px 14px; width: calc(100% - 14px); font-size: 0.82rem; }
.key-subtable th { font-size: 0.66rem; }

/* Entitlement rows: quiet detail under each licence line. */
.ent-row td { font-size: 0.82rem; border-bottom-style: dashed; }
.ent-form { margin: 4px 0 10px; }
.ent-form input { width: 4.5em; }
/* The free-form extras pair needs room for "key=n, key=n" — the
   numeric width squashed it into an unreadable stub. */
.ent-form input[name="extra"] { width: 12em; }

.scroll-x { overflow-x: auto; }
.copy-btn { background: none; border: 1px solid var(--line); color: var(--ink-muted); border-radius: 2px; padding: 0 5px; font-size: 0.75rem; cursor: pointer; vertical-align: 1px; }
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
/* The component edit modal. */
.comp-modal { background: var(--bg-raise); color: var(--ink); border: 1px solid var(--line-strong); padding: 26px 30px; max-width: 460px; }
.comp-modal::backdrop { background: rgba(0, 0, 0, 0.55); }
.comp-modal h3 { margin: 0 0 10px; font-weight: 650; }
.comp-modal label { display: grid; gap: 5px; font-size: 0.9rem; margin-top: 14px; }
.comp-modal input[name="name"] { font: 0.95rem var(--font-mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); padding: 9px 11px; }
.comp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.comp-cog { padding: 4px 10px; }

.cf-check { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-muted); align-self: center; }

/* The one-time key reveal: unmissable, and obviously ephemeral. */
.minted { border: 1px solid var(--accent); background: var(--accent-soft); padding: 18px 22px; margin: 18px 0; }
.minted h2 { margin-bottom: 6px; }
.key-plain { display: block; margin-top: 10px; padding: 12px 14px; background: var(--panel); border: 1px dashed var(--accent); font-size: 0.95rem; word-break: break-all; user-select: all; }