/* Operational authorisation queue prototype. Self-contained: the site build
 * publishes it with the other prototypes, so there is no import to wire.
 *
 * The design tokens are the application's own, copied from
 * projects/ores.web/packages/web/src/styles.css, so the screen reads in the
 * colours the real one uses. The prototype's own chrome -- the banner and the
 * variant bar -- is deliberately unlike the design on trial. */

:root {
    --bg: #121214;
    --panel: #1a1a1e;
    --panel-2: #26262b;
    --line: #30363d;
    --line-soft: #21262d;
    --line-strong: #4a5568;
    --ink: #e3e3e6;
    --ink-dim: #a1a1aa;
    --ink-faint: #71717a;
    --accent: #58a6ff;
    --accent-bright: #8ab4f8;
    --accent-dim: #21262d;
    --ok: #3fb950;
    --warn: #d29922;
    --bad: #f85149;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --radius: 0.5rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; }

.mono { font-family: var(--mono); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.hint { color: var(--ink-faint); font-size: 12px; }

/* -------------------------------------------------------------- chrome */

.proto-note {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding: 6px 14px;
    background: #1f2a37;
    border-bottom: 1px solid var(--line);
    color: var(--ink-dim);
    font-size: 12px;
}
.proto-note b { color: var(--warn); font-weight: 600; }

.proto-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    padding: 6px 14px;
    background: var(--panel);
    border-top: 1px solid var(--line);
    font: 11px/1.4 var(--mono);
    color: var(--ink-faint);
}
.proto-bar a { color: var(--accent); }

body { padding: 26px 0 34px; }

/* -------------------------------------------------------------- shell */

.shell { display: flex; flex-direction: column; min-height: calc(100vh - 60px); }

.crumbs { padding: 10px 20px 0; font-size: 12px; color: var(--ink-faint); }
.crumbs a { color: var(--ink-dim); }

.head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; padding: 8px 20px 16px;
    border-bottom: 1px solid var(--line);
}
.head h1 { font-size: 20px; }
.head .sub { color: var(--ink-dim); font-size: 13px; margin-top: 2px; }
.head .figures { display: flex; gap: 18px; align-items: baseline; }
.figure { text-align: right; }
.figure .n { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.figure .l { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.body { display: flex; flex: 1; min-height: 0; }

/* -------------------------------------------------------------- rail */

.rail {
    width: 232px; flex: none;
    border-right: 1px solid var(--line);
    padding: 12px 8px;
    overflow-y: auto;
}
.rail h2 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-faint); padding: 6px 10px;
}
.rail .node {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
    width: 100%; padding: 6px 10px; border: 0; border-radius: 6px;
    background: none; color: var(--ink-dim); font: inherit; font-size: 13px;
    text-align: left; cursor: pointer;
}
.rail .node:hover { background: var(--panel-2); color: var(--ink); }
.rail .node.on { background: var(--accent-dim); color: var(--ink); }
.rail .node.on::before,
.rail .node::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--line-strong); flex: none; }
.rail .node.on::before { background: var(--accent); }
.rail .node .n { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 12px; }
.rail .group { margin-left: 14px; border-left: 1px solid var(--line-soft); padding-left: 4px; }
.rail .group .node { font-size: 12.5px; padding: 4px 10px; }
.rail .group .node::before { display: none; }
.rail .sep { height: 1px; background: var(--line-soft); margin: 10px 10px; }

/* -------------------------------------------------------------- list */

.list { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.banner {
    display: flex; gap: 10px; align-items: center;
    margin: 12px 20px 0; padding: 8px 12px;
    border: 1px solid var(--bad); border-radius: var(--radius);
    background: rgba(248, 81, 73, 0.08); color: var(--ink);
    font-size: 13px;
}
.banner .tag-bad { color: var(--bad); border: 1px solid var(--bad); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
    position: sticky; top: 0; background: var(--bg);
    text-align: left; font-weight: 500; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint);
    padding: 9px 8px; border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
tbody td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:hover { background: var(--panel); }
tbody tr.on { background: var(--accent-dim); }
tbody tr.expiring td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
tbody tr.expiring .ref { color: var(--bad); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.tight { white-space: nowrap; }

.chip {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--line-strong); font-size: 11px; color: var(--ink-dim);
    white-space: nowrap;
}
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.bad { border-color: var(--bad); color: var(--bad); }
.chip.info { border-color: var(--accent); color: var(--accent); }
.flag { font-size: 11px; color: var(--warn); }
.flag.bad { color: var(--bad); }
.ref { font-family: var(--mono); font-size: 12.5px; }

/* -------------------------------------------------------------- detail */

.detail {
    width: 400px; flex: none; border-left: 1px solid var(--line);
    background: var(--panel); overflow-y: auto;
}
.detail .inner { padding: 14px 16px 24px; display: flex; gap: 12px; flex-direction: column; }
.detail .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.detail h2 { font-size: 15px; }
.detail .facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; font-size: 13px; }
.detail .facts dt { color: var(--ink-faint); }
.detail .facts dd { margin: 0; }
.changed { background: rgba(210, 153, 34, 0.12); border-bottom: 1px dashed var(--warn); }
.legs { border: 1px solid var(--line-soft); border-radius: var(--radius); }
.legs .leg { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; display: flex; justify-content: space-between; gap: 8px; }
.legs .leg:last-child { border-bottom: 0; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
textarea, select, input[type="text"] {
    width: 100%; background: var(--bg); color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px;
    font: inherit; font-size: 13px;
}
textarea { min-height: 62px; resize: vertical; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
button.act {
    padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line-strong);
    background: var(--panel-2); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
button.act:disabled { opacity: 0.45; cursor: not-allowed; }
button.act.primary { border-color: var(--ok); color: var(--ok); }
button.act.primary:hover:not(:disabled) { background: rgba(63, 185, 80, 0.12); }
button.act.danger { border-color: var(--bad); color: var(--bad); }
button.act.danger:hover:not(:disabled) { background: rgba(248, 81, 73, 0.12); }
button.act.quiet { border-color: transparent; color: var(--ink-dim); }

.notice {
    border-left: 3px solid var(--warn); background: rgba(210, 153, 34, 0.08);
    padding: 8px 10px; font-size: 12.5px; color: var(--ink-dim); border-radius: 4px;
}
.notice.bad { border-color: var(--bad); background: rgba(248, 81, 73, 0.08); }
.notice.info { border-color: var(--accent); background: rgba(88, 166, 255, 0.08); }

.empty { padding: 40px 20px; color: var(--ink-faint); }

/* -------------------------------------------------------------- tabs variant */

.tabs { display: flex; gap: 6px; align-items: center; padding: 12px 20px 0; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; background: none; color: var(--ink-dim); font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer; }
.seg button.on { background: var(--accent-dim); color: var(--ink); }
.tabbar { display: flex; gap: 18px; padding: 12px 20px 0; border-bottom: 1px solid var(--line); }
.tabbar button {
    border: 0; background: none; color: var(--ink-dim); font: inherit; font-size: 13px;
    padding: 6px 0 8px; cursor: pointer; border-bottom: 2px solid transparent;
}
.tabbar button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabbar .n { color: var(--ink-faint); font-size: 12px; margin-left: 4px; }

.drawer-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 40; }
.drawer {
    position: fixed; top: 26px; right: 0; bottom: 34px; width: 440px; z-index: 41;
    background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto;
}
.drawer .inner { padding: 16px 18px 24px; display: flex; gap: 12px; flex-direction: column; }

.wrap { padding: 0 20px 20px; overflow: auto; flex: 1; }

@media (max-width: 1100px) {
    .detail { width: 340px; }
    .rail { width: 200px; }
}