/* Orbit Monitor — shared patterns on top of Orbit's own tokens, base and components: AI sidebar, charts, metric cards, gauge, settings layout, brief. Page-specific rules live in the per-page CSS files. */

:root { --ai-w: 420px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.93em; }
.os-chip--debian { color: #d70751; } .os-chip--almalinux { color: #38a3d8; } .os-chip--ubuntu { color: #e95420; }
[data-theme="dark"] .os-chip--debian { color: #ff5c8a; } [data-theme="dark"] .os-chip--almalinux { color: #64c2f0; }
.pill--crit, .pill--critical { background: var(--danger-soft); color: var(--danger-text); } .pill--crit::before, .pill--critical::before { background: var(--danger-dot); }
.pill--unk::before { background: transparent; border: 1.5px dashed var(--neutral-dot); }
.pill--off::before { background: transparent; border: 2px solid var(--neutral-dot); }

/* ---------- AI panel: right sidebar, full height, available on every page ---------- */
@media (min-width: 1181px) {
  html[data-ai="open"] .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--ai-w); }
  html[data-ai="open"][data-sidebar="collapsed"] .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr) var(--ai-w); }
}
.ai-panel { display: none; position: sticky; top: 0; height: 100vh; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); min-width: 0; }
html[data-ai="open"] .ai-panel { display: flex; }
.ai-head { display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar-h); padding: 0 var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--border); flex: none; }
.ai-head__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.ai-head__text { min-width: 0; flex: 1; line-height: 1.2; } .ai-head__title { font-weight: 650; } .ai-head__sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ctx { display: flex; gap: 6px; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none; align-items: center; font-size: 12px; color: var(--text-3); }
.ai-ctx .tag { background: var(--surface); }
.ai-feed { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); min-height: 0; scrollbar-width: thin; }
.ai-empty { margin: auto; text-align: center; max-width: 330px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) 0; }
.ai-empty__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-border); }
.ai-empty__mark .icon { width: 26px; height: 26px; }
.ai-empty h2 { font-size: var(--fs-lg); } .ai-empty p { color: var(--text-3); font-size: var(--fs-sm); }
.ai-msg { max-width: 94%; font-size: var(--fs-base); line-height: 1.55; }
.ai-msg--user { align-self: flex-end; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 12px 12px 3px 12px; max-width: 86%; }
.ai-msg--ai { align-self: stretch; max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.ai-msg__who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); } .ai-msg__who .icon { color: var(--accent-text); }
.ai-msg__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.ai-msg__body p { margin: 0; } .ai-msg__body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; } .ai-msg__body li::marker { color: var(--text-3); }
.ai-msg__body strong { font-weight: 650; }
.ai-cmd { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); overflow: hidden; }
.ai-cmd__label { padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 8px; }
.ai-cmd pre { margin: 0; padding: 10px; font-family: var(--font-mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.ai-cmd__foot { display: flex; gap: var(--sp-2); padding: 8px; border-top: 1px solid var(--border); align-items: center; flex-wrap: wrap; }
.ai-cmd__note { font-size: 11.5px; color: var(--text-3); }
.ai-typing { display: inline-flex; gap: 4px; padding: 6px 0; } .ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: ai-dot 1.1s infinite ease-in-out; } .ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--sp-3) var(--sp-4) 0; flex: none; }
.ai-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border: 1px solid var(--border-strong); border-radius: 15px; background: var(--surface); color: var(--text-2); font-size: 12.5px; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.ai-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.ai-compose { padding: var(--sp-3) var(--sp-4) var(--sp-2); flex: none; display: flex; gap: var(--sp-2); align-items: flex-end; }
.ai-compose textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 11px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font: inherit; line-height: 1.4; }
.ai-compose textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-border); }
.ai-compose .btn { height: 44px; width: 44px; padding: 0; }
.ai-foot { padding: 0 var(--sp-4) var(--sp-3); font-size: 11.5px; color: var(--text-3); flex: none; display: flex; gap: 6px; align-items: flex-start; } .ai-foot .icon { margin-top: 2px; flex: none; width: 13px; height: 13px; }
.btn--ai { border-color: var(--accent-soft-border); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.btn--ai:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--ai[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.topbar .btn--ai { height: 34px; }
.ai-scrim { display: none; }
@media (max-width: 1180px) {
  html[data-ai="open"] .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  html[data-ai="open"][data-sidebar="collapsed"] .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  html[data-ai="open"] .ai-panel { position: fixed; right: 0; top: 0; z-index: 70; width: min(440px, 100vw); box-shadow: var(--shadow-lg); }
  html[data-ai="open"] .ai-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(8, 12, 21, 0.45); }
}
@media (max-width: 860px) { html[data-ai="open"] .app { grid-template-columns: minmax(0, 1fr); } .topbar .btn--ai .btn__label { display: none; } }

/* ---------- charts ---------- */
.tsc { position: relative; width: 100%; } .tsc svg { display: block; width: 100%; height: auto; overflow: visible; }
.tsc__grid { stroke: var(--chart-grid); stroke-width: 1; } .tsc__axis { font-size: 11px; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.tsc__alert { stroke: var(--chart-ref); stroke-width: 1; stroke-dasharray: 4 4; } .tsc__alert-label { font-size: 10.5px; fill: var(--text-3); }
.tsc__cross { stroke: var(--text-3); stroke-width: 1; opacity: 0; } .tsc__dot { fill: var(--surface); stroke-width: 2; opacity: 0; }
.tsc__tip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: 12px; opacity: 0; transition: opacity var(--dur-fast); }
.tsc__tip[data-on="true"] { opacity: 1; } .tsc__tip-time { color: var(--text-3); margin-bottom: 4px; } .tsc__tip-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .tsc__tip-row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; } .tsc__tip b { font-variant-numeric: tabular-nums; }
.tsc__bar:focus-visible rect, .tsc__bar:hover rect { filter: brightness(1.15); } .tsc__bar:focus { outline: none; }
.strip { display: flex; gap: 2px; height: 26px; } .strip--tall { height: 34px; gap: 3px; }
.strip__c { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--meter-track); }
.strip__c--ok { background: var(--ok); } .strip__c--warn { background: var(--warn-dot); } .strip__c--down { background: var(--danger-dot); } .strip__c--none { background: var(--meter-track); opacity: .7; }
.strip__c:hover { filter: brightness(1.2); }
.ring { position: relative; width: var(--rs, 84px); height: var(--rs, 84px); flex: none; } .ring svg { width: 100%; height: 100%; display: block; }
.ring__bg { fill: none; stroke: var(--meter-track); stroke-width: 7; } .ring__fg { fill: none; stroke-width: 7; stroke-linecap: round; stroke: var(--ok); }
.ring--warn .ring__fg { stroke: var(--warn-dot); } .ring--crit .ring__fg { stroke: var(--danger-dot); } .ring--none .ring__fg { stroke: var(--neutral-dot); }
.ring__t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; } .ring__t b { font-size: calc(var(--rs, 84px) * 0.32); font-weight: 650; } .ring__t small { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* utilisation bar used in tables and cards */
.ubar { display: flex; align-items: center; gap: 8px; min-width: 110px; } .ubar__t { flex: 1; height: 6px; border-radius: 3px; background: var(--meter-track); overflow: hidden; min-width: 44px; }
.ubar__f { display: block; height: 100%; border-radius: 3px; background: var(--ok); } .ubar[data-level="warn"] .ubar__f { background: var(--warn-dot); } .ubar[data-level="crit"] .ubar__f { background: var(--danger-dot); } .ubar[data-level="na"] .ubar__f { background: var(--border-strong); }
.ubar__v { min-width: 34px; text-align: right; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text-2); } .ubar[data-level="crit"] .ubar__v { color: var(--danger-text); font-weight: 600; } .ubar[data-level="warn"] .ubar__v { color: var(--warn-text); }

/* shared dialogs / forms used for popup edits */
dialog.modal .field + .field { margin-top: var(--sp-3); }
.modal__body .help { margin-top: 4px; }
.sr-live { position: absolute; left: -9999px; }

/* topbar stays readable when the AI panel takes the right column */
html[data-ai="open"] .user-btn__text { display: none; }
.search-trigger__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .search-trigger { min-width: 0; }

/* Guard's "soon" tag was 10px; keep functional text at 11px or more */
.nav__soon, .nav__badge { font-size: 11px; }

/* ---------- metric card (Beszel/Netdata-style: number first, chart under it) ---------- */
.mcard { display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-5) var(--sp-4); gap: 4px; overflow: hidden; }
.mcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .mcard__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } .mcard__label .icon { color: var(--text-3); }
.mcard__value { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; } .mcard__value b { font-size: 38px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; } .mcard__value small { font-size: var(--fs-md); color: var(--text-3); font-weight: 500; }
.mcard__sub { font-size: var(--fs-sm); color: var(--text-3); } .mcard__stats { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; flex-wrap: wrap; } .mcard__stats b { color: var(--text); font-weight: 600; }
.mcard__chart { margin: var(--sp-3) calc(var(--sp-5) * -1) 0; min-height: 72px; } .mcard__foot { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.mcard--warn .mcard__value b { color: var(--warn-text); } .mcard--crit .mcard__value b { color: var(--danger-text); }
.gauge { position: relative; width: 96px; height: 96px; flex: none; } .gauge--72 { width: 72px; height: 72px; } .gauge--88 { width: 88px; height: 88px; } .gauge--120 { width: 120px; height: 120px; } .gauge--120 .gauge__t b { font-size: 36px; } .gauge--72 .gauge__t b { font-size: 21px; } .gauge svg { width: 100%; height: 100%; display: block; }
.gauge__bg, .gauge__fg { fill: none; stroke-width: 8; stroke-linecap: round; } .gauge__bg { stroke: var(--meter-track); } .gauge__fg { stroke: var(--ok); } .gauge--warn .gauge__fg { stroke: var(--warn-dot); } .gauge--crit .gauge__fg { stroke: var(--danger-dot); } .gauge--none .gauge__fg { stroke: var(--neutral-dot); }
.gauge__t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding-top: 6px; } .gauge__t b { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; } .gauge__t small { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.mcard__chart.tsc { width: auto; }

/* ======================= Demo 3 shared patterns ======================= */
/* role preview: Super Admin sees everything; Manager loses [data-perm=super]; Customer gets the client nav only */
.nav--client { display: none; } html[data-role="customer"] .nav--admin { display: none; } html[data-role="customer"] .nav--client, body[data-area="client"] .nav--client { display: block; } body[data-area="client"] .nav--admin { display: none; }
html[data-role="manager"] [data-perm="super"] { display: none; } html[data-role="customer"] [data-admin-only] { display: none; }
.menu__item--check .menu__check { display: none; } .menu__item--check[aria-checked="true"] .menu__check { display: block; }
.fleetcard { display: flex; align-items: center; gap: 10px; margin: var(--sp-1) var(--sp-3) var(--sp-3); padding: 10px 12px; border: 1px solid var(--nav-border); border-radius: 12px; background: var(--surface-2); color: var(--text); } .fleetcard:hover { text-decoration: none; border-color: var(--border-strong); }
.fleetcard__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 4px var(--ok-soft); } .fleetcard--warn .fleetcard__dot { background: var(--warn-dot); box-shadow: 0 0 0 4px var(--warn-soft); }
.fleetcard__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .fleetcard__text b { font-size: var(--fs-sm); font-weight: 600; } .fleetcard__text small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-sidebar="collapsed"] .fleetcard__text { display: none; } html[data-sidebar="collapsed"] .fleetcard { justify-content: center; padding: 10px 0; }

/* "brief": one plain sentence with linked figures, then the things that need you (idea: summary-first dashboards) */
.brief { padding: 28px 32px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.brief__text { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.32; font-weight: 600; letter-spacing: -0.028em; max-width: 64ch; text-wrap: pretty; }
.brief__text a.fig { color: var(--text); background: var(--accent-soft); border-radius: 7px; padding: 0 7px; margin: 0 -2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; text-decoration: none; transition: background var(--dur-fast); } .brief__text a.fig:hover { background: var(--accent-soft-border); text-decoration: none; }
.brief__text a.fig--warn { background: var(--warn-soft); } .brief__text a.fig--crit { background: var(--danger-soft); }
.needs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.need { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 13px; border-radius: 11px; font-size: var(--fs-sm); font-weight: 550; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); } .need:hover { text-decoration: none; border-color: var(--border-strong); }
.need--crit { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger-dot) 28%, var(--border)); color: var(--danger-text); } .need--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-dot) 30%, var(--border)); color: var(--warn-text); } .need--info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, var(--border)); }
.brief__meta { margin-top: 16px; font-size: var(--fs-xs); color: var(--text-3); }
@media (max-width: 720px) { .brief { padding: 20px; } }

/* settings pages: left sub-navigation + stacked cards; label-left form rows */
.settings { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.subnav { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 2px; } .subnav__label { padding: 0 12px 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.subnav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: 10px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; } .subnav a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .subnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .subnav a .icon { width: 16px; height: 16px; }
.formrow { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-5) 0; border-bottom: 1px solid var(--border); align-items: start; } .formrow:last-child { border-bottom: 0; }
.formrow__label { font-weight: 600; font-size: var(--fs-sm); } .formrow__hint { margin-top: 3px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; line-height: 1.5; } .formrow__control { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.savebar { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); align-items: center; }
@media (max-width: 960px) { .settings { grid-template-columns: minmax(0, 1fr); } .subnav { position: static; flex-direction: row; overflow-x: auto; } .subnav__label { display: none; } .subnav a { white-space: nowrap; } .formrow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } }
/* detail pages: header card then tabs/sections */
.stack-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-4); align-items: start; } @media (max-width: 1180px) { .split { grid-template-columns: minmax(0, 1fr); } }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.statline { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.statchip { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: var(--fs-sm); color: var(--text-3); } .statchip b { font-size: var(--fs-lg); font-weight: 650; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.ring--s64 { --rs: 64px; } .ring--s72 { --rs: 72px; } .ring--s84 { --rs: 84px; } .ring--s96 { --rs: 96px; } .ring--s120 { --rs: 120px; }
.tz-btn { gap: 6px; font-variant-numeric: tabular-nums; } .tz-btn .icon { width: 14px; height: 14px; }
@media (max-width: 860px) { .tz-btn [data-tz-label] { display: none; } }