/* Aeon Hub — the crossing plane's pages (/admin/hub/*).

   This was a standalone sheet when the hub was a standalone app, and it styled bare elements and
   :root. Inside Aeon.Web every rule is scoped to .hub-page (applied by HubPageLayout) so it can
   never reach the rest of the workspace: the custom properties are declared on the container and
   inherit down, and the element rules only bite inside it. Still deliberately small — the hub's
   dark control-room look with the Workbench accent, without dragging app.css into a second life. */
.hub-page {
    --bg: #101318;
    --panel: #171c23;
    --line: #2a323d;
    --fg: #dfe5ea;
    --muted: #8b96a2;
    --accent: #0078d6;
    --ok: #5dd39e;
    --warn: #f2ad2e;
    --bad: #f27061;

    background: var(--bg);
    color: var(--fg);
    font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
    padding: 1.4rem;
    border-radius: 10px;
}
.hub-page * { box-sizing: border-box; }
.hub-page a { color: var(--accent); text-decoration: none; }

.hub-page h1 { font-size: 1.3rem; margin: 0 0 .3rem; }
.hub-page h2 { margin: 1.4rem 0 .5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.hub-page .lede { color: var(--muted); margin-top: 0; }

.hub-page .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; margin: .8rem 0; }
.hub-page .kpis { display: flex; gap: 1rem; flex-wrap: wrap; }
.hub-page .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .7rem 1.1rem; min-width: 140px; }
.hub-page .kpi strong { display: block; font-size: 1.5rem; }
.hub-page .kpi span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

.hub-page table { border-collapse: collapse; width: 100%; font-size: 13px; }
.hub-page th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
     border-bottom: 1px solid var(--line); padding: .4rem .6rem; }
.hub-page td { border-bottom: 1px solid #ffffff0a; padding: .45rem .6rem; vertical-align: top; }
.hub-page code, .hub-page .mono { font-family: Consolas, ui-monospace, monospace; font-size: 12px; }

/* Fleet registry (/admin/fleet/instances): the OpCo section header rows. OpCo is derived from
   each instance's pushed config snapshot, so the trailing "no OpCo reported yet" section is a
   real operational state — styled as a header, not as an error. */
.hub-page tr.opco-group td { background: #ffffff08; border-bottom: 1px solid var(--line); padding: .55rem .6rem .5rem; }
.hub-page .opco-group-name { font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.hub-page .opco-group-name.muted { color: var(--muted); font-weight: 500; }
.hub-page .opco-group-summary { margin-left: .7rem; }

.hub-page .chip { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: 11px; font-weight: 600; }
.hub-page .chip.ok { background: #5dd39e22; color: var(--ok); }
.hub-page .chip.warn { background: #f2ad2e22; color: var(--warn); }
.hub-page .chip.bad { background: #f2706122; color: var(--bad); }
.hub-page .chip.muted { background: #ffffff10; color: var(--muted); }

.hub-page input, .hub-page select, .hub-page textarea {
    background: #0d1015; color: var(--fg); border: 1px solid var(--line); border-radius: 6px;
    padding: .4rem .6rem; font: inherit; width: 100%;
}
.hub-page label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase;
        letter-spacing: .06em; margin: .6rem 0 .2rem; }
.hub-page button {
    background: var(--accent); color: white; border: none; border-radius: 6px;
    padding: .45rem .9rem; font: inherit; cursor: pointer;
}
.hub-page button.ghost { background: transparent; border: 1px solid var(--line); color: var(--fg); }
.hub-page button.danger { background: transparent; border: 1px solid var(--bad); color: var(--bad); }
.hub-page button:disabled { opacity: .45; cursor: default; }
.hub-page .row { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.hub-page .row > div { flex: 1; min-width: 140px; }
.hub-page .error { color: var(--bad); font-size: 13px; }
.hub-page .hint { color: var(--muted); font-size: 12px; }

/* A cell of several action buttons (Enrol/Withdraw, Block, Issue credential…) with no gap between
   them read as one fused control — each needs daylight, and room to wrap on a narrow table. */
.hub-page .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* The "what's next" narrative column — a short verdict, not a data dump; colour matches the
   severity so scanning the column alone tells you where to look first. */
.hub-page .next-step { font-size: 12.5px; max-width: 22rem; }
.hub-page .next-step.ok { color: var(--ok); }
.hub-page .next-step.warn { color: var(--warn); }
.hub-page .next-step.bad { color: var(--bad); }
.hub-page .next-step.info { color: var(--fg); }

/* The "N things need attention" checker banner — a calm .ok state when the list is empty is as
   important as the list itself: it is the direct answer to "I can't tell if there's a problem". */
.hub-page .checker { border-left: 3px solid var(--line); }
.hub-page .checker.has-issues { border-left-color: var(--warn); }
.hub-page .checker.all-clear { border-left-color: var(--ok); }
.hub-page .checker ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.hub-page .checker li { margin: .3rem 0; }
.hub-page .checker li.bad { color: var(--bad); }
.hub-page .checker li.warn { color: var(--warn); }
.hub-page .checker li.info { color: var(--fg); }

/* By-instance / by-market view toggle — same visual language as the OpCo filter panel beside it. */
.hub-page .view-toggle { display: flex; gap: .4rem; margin-bottom: .5rem; }
.hub-page .view-toggle button { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.hub-page .view-toggle button.on { background: var(--accent); border-color: var(--accent); color: white; }

/* Market view — one row per market code; a market held by >1 production claim is the exact
   split-brain the whole page exists to prevent, so it gets the loudest possible row treatment. */
.hub-page tr.market-conflict td { background: #f2706118; }
.hub-page .market-holder { display: block; margin: .15rem 0; }

.hub-page details.help { margin: .8rem 0; }
.hub-page details.help summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.hub-page details.help[open] summary { color: var(--fg); margin-bottom: .5rem; }
.hub-page details.help dt { font-weight: 600; margin-top: .6rem; }
.hub-page details.help dd { margin: .15rem 0 0; color: var(--muted); font-size: 12.5px; }
.hub-page .token-reveal { background: #0d1015; border: 1px dashed var(--warn); border-radius: 6px;
                padding: .7rem; font-family: Consolas, monospace; word-break: break-all; }

/* ---- API Manager ---- */
.hub-page .health-stripe { display: inline-block; width: 4px; height: 2.2rem; border-radius: 2px; }
.hub-page .health-stripe.ok { background: var(--ok); }
.hub-page .health-stripe.warn { background: var(--warn); }
.hub-page .health-stripe.bad { background: var(--bad); }
.hub-page .health-stripe.quiet { background: var(--line); }
.hub-page .health-stripe.off { background: transparent; border: 1px dashed var(--line); }

.hub-page .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .4rem 1.2rem; }
.hub-page .summary-grid label { margin: 0 0 .1rem; }

.hub-page .range-bar { display: flex; gap: .4rem; margin: .4rem 0 .8rem; }
.hub-page .range-bar button { padding: .3rem .7rem; font-size: 12px; }

.hub-page .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; }
.hub-page .chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem .5rem; }
.hub-page .chart-card svg { width: 100%; height: 96px; display: block; }
.hub-page .chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.hub-page .chart-title { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.hub-page .chart-total { font-size: 1.1rem; }
.hub-page .chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: .2rem; }
.hub-page .chart-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 2.2rem 0; }

.hub-page .policy-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.hub-page .policy-category { grid-column: 1 / -1; color: var(--muted); font-size: 11px; text-transform: uppercase;
                   letter-spacing: .08em; margin-top: .4rem; }
.hub-page .policy-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; }
.hub-page .policy-card p { color: var(--muted); font-size: 12px; margin: .3rem 0 .5rem; }
.hub-page .policy-card.applied { opacity: .55; }