/* ============================================================
   Fabric Console design system — shared foundation.

   Ships from Ember.Fabric.Console.Components at
   _content/Ember.Fabric.Console.Components/css/design-system.css and is linked
   AFTER tokens.css and BEFORE the consuming app's own stylesheet.

   Holds only what every Fabric surface shares: base element rules, the shell
   (top bar + sidebar + content frame, rendered by FabricTopBar / FabricSidebar),
   page head, buttons, the status-pill grammar, cards, the stat strip and dense
   list-table rows. Colour flows through tokens.css semantic aliases only — no
   literal colour in this file.
   ============================================================ */

* { box-sizing: border-box; }

html, body, #app { min-height: 100vh; }

body {
    margin: 0;
    font: 14px/1.5 var(--font);
    color: var(--text-body);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

h1, h2, h3, h4, h5, h6, b, strong { color: var(--text-primary); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* FocusOnNavigate moves programmatic focus to the page h1 (tabindex=-1) so screen
   readers announce the new page; the headline is not a control, so it draws no ring.
   Interactive controls keep the :focus-visible ring above. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

button, a, input, select { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--ink-3); }

/* ============ TOP BAR ============ */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 100;
    background: var(--chrome-bg); color: var(--chrome-text);
    display: flex; align-items: center; gap: 16px; padding: 0 16px;
    min-width: 0; overflow: visible;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; color: var(--chrome-text); letter-spacing: .2px; text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand .flame {
    width: 26px; height: 26px; border-radius: 7px; flex: none;
    background: linear-gradient(135deg, var(--ember-violet-500), var(--ember-magenta-500) 52%, var(--ember-pink-500));
    display: flex; align-items: center; justify-content: center;
}
.brand .flame svg { width: 15px; height: 15px; color: var(--text-on-brand); }
.brand small { font-weight: 400; color: var(--chrome-muted-ink); font-size: 12px; margin-left: 2px; }

/* App switcher: the wordmark as a menu of Fabric apps, for operators only. */
.app-switcher { position: relative; flex: none; }
.brand-switch { background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 3px 8px 3px 3px; cursor: pointer; font-family: inherit; }
.brand-switch:hover, .brand-switch[aria-expanded="true"] { background: var(--chrome-hover); border-color: var(--chrome-hairline); }
.brand-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-chev { display: flex; color: var(--chrome-muted); margin-left: 2px; }
.app-menu {
    position: absolute; left: 0; top: calc(100% + 8px); width: 300px; z-index: 230; padding: 6px;
    background: var(--surface-raised); color: var(--text-body); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-pop);
}
.app-menu-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); padding: 6px 8px 4px; }
.app-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; color: var(--text-primary); text-decoration: none; }
.app-menu-item:hover { background: var(--line-soft); text-decoration: none; }
.app-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.app-menu-item.on { background: var(--accent-soft); cursor: default; }
.app-menu-text { flex: 1; min-width: 0; }
.app-menu-text b { display: block; font-weight: 600; font-size: 13.5px; }
.app-menu-text small { display: block; color: var(--ink-3); font-size: 12px; }
.app-menu-check { display: flex; color: var(--accent); }
.app-mono { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--text-on-brand); }
.app-mono-console { background: linear-gradient(135deg, var(--ember-violet-500), var(--ember-magenta-500) 52%, var(--ember-pink-500)); }
.app-mono-admin { background: var(--chrome-bg); border: 1px solid var(--border); }

.omni { flex: 1 1 220px; min-width: 150px; max-width: 520px; margin: 0 auto; position: relative; }
.omni input {
    width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--chrome-hairline);
    background: var(--chrome-hover); color: var(--chrome-text); padding: 0 12px 0 34px; font-size: 13px; outline: none;
}
.omni input::placeholder { color: var(--chrome-muted-ink); }
.omni input:focus { background: var(--surface-raised); color: var(--text-primary); }
.omni .icon { position: absolute; left: 11px; top: 9px; display: flex; color: var(--chrome-muted); }
.omni kbd {
    position: absolute; right: 10px; top: 8px; font: 11px var(--mono); color: var(--chrome-muted-ink);
    border: 1px solid var(--chrome-hairline); border-radius: 4px; padding: 1px 5px;
}
.omni:focus-within input::placeholder,
.omni:focus-within kbd { color: var(--chrome-muted-focus); }
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

.top-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    color: var(--chrome-muted); cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.top-icon:hover { color: var(--chrome-text); background: var(--chrome-hover); }

/* ============ SIDEBAR ============ */
.sidebar {
    position: fixed; top: 56px; left: 0; bottom: 0; width: 232px; z-index: 50;
    background: var(--card); border-right: 1px solid var(--line);
    overflow-y: auto; padding: 14px 10px 20px;
}
.nav-group { margin-bottom: 6px; }
/* Sentence case, per the rubric: the label keeps its size, weight and colour but is no longer uppercased. */
.nav-label { font-size: 10.5px; letter-spacing: .8px; color: var(--ink-3); padding: 14px 12px 5px; font-weight: 600; }
.nav-label-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nav-item {
    display: flex; align-items: center; gap: 10px; padding: 7.5px 12px; border-radius: 7px;
    color: var(--ink-2); cursor: pointer; font-size: 13.5px; font-weight: 500; position: relative; text-decoration: none;
}
.nav-item:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-item.active::before {
    content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px;
    background: var(--accent); border-radius: 0 3px 3px 0;
}
.nav-item .n-icon { width: 18px; text-align: center; font-size: 14.5px; opacity: .85; flex: none; }
.nav-item .count {
    margin-left: auto; font-size: 11px; color: var(--ink-3); background: var(--line-soft);
    border-radius: 9px; padding: 1px 7px; font-weight: 600;
}
.nav-item.active .count { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); }

/* ============ CONTENT ============ */
.content {
    margin: 56px 0 0 232px; padding: 28px 36px 64px; max-width: 1180px;
    width: calc(100vw - 232px); box-sizing: border-box; overflow-x: hidden;
}
.crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ember); text-decoration: none; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.page-head h1 { font-size: 23px; font-weight: 700; letter-spacing: -.2px; margin: 0; }
.page-head .sub { color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; }

.btn {
    border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); font: 600 13px/1 var(--font);
    padding: 9px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.btn:hover { border-color: var(--accent); background: var(--surface-sunken); text-decoration: none; }
.btn.primary { background: var(--ember); border-color: var(--ember); color: var(--accent-contrast); }
.btn.primary:hover { background: var(--ember-dark); }
.btn.subtle { border: none; background: transparent; color: var(--accent); padding: 6px 8px; }
.btn.danger { color: var(--status-error-ink); }
.btn.danger:hover { border-color: var(--red); background: var(--red-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* status pill grammar */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.pill .pd { width: 7px; height: 7px; border-radius: 50%; }
.pill.ok    { background: var(--green-soft); color: var(--status-ok-pill-ink); }   .pill.ok .pd { background: var(--green); }
.pill.warn  { background: var(--amber-soft); color: var(--status-warn-ink); }   .pill.warn .pd { background: var(--amber); }
.pill.err   { background: var(--red-soft); color: var(--status-error-ink); }       .pill.err .pd { background: var(--red); }
.pill.off   { background: var(--grey-soft); color: var(--ink-3); }    .pill.off .pd { background: var(--ink-3); }
.pill.info  { background: var(--blue-soft); color: var(--status-info-ink); }     .pill.info .pd { background: var(--blue); }
.pill.live .pd { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.card .card-head { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; }
.card .card-head h3 { font-size: 14px; font-weight: 650; margin: 0; }
.card .card-head .more { margin-left: auto; font-size: 12.5px; }
.history-panel { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.history-panel summary { cursor: pointer; list-style: none; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; }
.history-panel summary::-webkit-details-marker { display: none; }
.history-panel summary::before { content: "▸"; color: var(--ink-3); transition: transform .15s ease; }
.history-panel[open] summary::before { transform: rotate(90deg); }
.history-panel summary .dim { margin-left: auto; font-size: 12.5px; font-weight: 400; }
.history-panel-body { border-top: 1px solid var(--line-soft); background: var(--surface-raised); }

/* stat row */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; cursor: pointer; box-shadow: var(--shadow); color: inherit; text-decoration: none; display: block; text-align: left; font: inherit; }
.stat:hover { border-color: var(--accent); text-decoration: none; }
.stat .s-top { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.stat .s-num { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -.5px; }
.stat .s-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.stat .s-sub .up { color: var(--status-ok-ink); font-weight: 600; }
.stat .s-sub .bad { color: var(--status-error-ink); font-weight: 600; }

/* tables */
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th { text-align: left; font-size: 11px; letter-spacing: .6px;
    color: var(--ink-3); font-weight: 600; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); }
table.list td { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list tbody tr.row-link { cursor: pointer; }
table.list tbody tr.row-link:hover { background: var(--surface-hover); }