/* SnitchOS brand overrides on top of Paces compiled CSS.
   Keep this file small — most styling should come from the SCSS build.
   Palette + type per docs/brand/brand-profile.md (v1.0, July 2026):
   Ink Navy #0F1B2D carries the UI; Signal Deep #0E9E60 (light surfaces) /
   Signal Green #4CE38D (dark surfaces) is a signal, not a theme. */

/* Self-hosted brand fonts (Google Fonts, latin subset). No external CDN —
   supply-chain + privacy stance for a security/monitoring product. */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("./fonts/space-grotesk-var.woff2") format("woff2-variations");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("./fonts/ibm-plex-mono-500.woff2") format("woff2");
}
/* html[data-skin=...] font declarations in app.min.css outrank :root, so pin
   the brand faces at the same specificity plus :root for safety. */
html[data-skin], :root {
    --theme-font-sans-serif: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --theme-font-monospace: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    --bs-body-font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --bs-font-monospace: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* Brand palette override. The compiled vendors.min.css still ships Paces'
   indigo primary, so we re-paint the CSS custom properties at :root + the
   dark-mode equivalent. Light surfaces get Signal Deep (AA as link/text
   accent); dark surfaces get Signal Green. */
:root {
  --bs-primary: #0E9E60;
  --bs-primary-rgb: 14, 158, 96;
  --bs-primary-text-emphasis: #0C7A4C;
  --bs-primary-bg-subtle: #E3F7EC;
  --bs-primary-border-subtle: #B9EBD1;
  --theme-primary: #0E9E60;
  --theme-primary-rgb: 14, 158, 96;
  --theme-link-color: #0E9E60;
  --theme-link-hover-color: #0C7A4C;
  /* Used by .btn-primary, badges, focus rings, navlink-active, etc. */
  --bs-link-color: #0E9E60;
  --bs-link-hover-color: #0C7A4C;
  --bs-focus-ring-color: rgba(14, 158, 96, 0.35);
}
[data-bs-theme="dark"] {
  --bs-primary: #4CE38D;
  --bs-primary-rgb: 76, 227, 141;
  --theme-primary: #4CE38D;
  --theme-primary-rgb: 76, 227, 141;
  --bs-link-color: #4CE38D;
  --bs-link-hover-color: #6FEAA4;
}
.btn-primary {
  /* Primary CTA on light surfaces is Ink Navy (green stays a signal — white
     on Signal Deep would also fail AA at ~3:1). Paper label clears AA on all
     three navy shades. */
  --bs-btn-color: #F5F8FC;
  --bs-btn-hover-color: #F5F8FC;
  --bs-btn-active-color: #F5F8FC;
  --bs-btn-disabled-color: #F5F8FC;
  --bs-btn-bg: #0F1B2D;
  --bs-btn-border-color: #0F1B2D;
  --bs-btn-hover-bg: #1B2C47;
  --bs-btn-hover-border-color: #1B2C47;
  --bs-btn-active-bg: #24384F;
  --bs-btn-active-border-color: #24384F;
  --bs-btn-disabled-bg: #0F1B2D;
  --bs-btn-disabled-border-color: #0F1B2D;
}
[data-bs-theme="dark"] .btn-primary {
  /* On dark surfaces the one green CTA is Signal Green with ink text (~12:1). */
  --bs-btn-color: #0F1B2D;
  --bs-btn-hover-color: #0F1B2D;
  --bs-btn-active-color: #0F1B2D;
  --bs-btn-disabled-color: #0F1B2D;
  --bs-btn-bg: #4CE38D;
  --bs-btn-border-color: #4CE38D;
  --bs-btn-hover-bg: #6FEAA4;
  --bs-btn-hover-border-color: #6FEAA4;
  --bs-btn-active-bg: #2BD478;
  --bs-btn-active-border-color: #2BD478;
  --bs-btn-disabled-bg: #4CE38D;
  --bs-btn-disabled-border-color: #4CE38D;
}
.text-primary { color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }

/* Productivity category badges (used in classification + activity views).
   Productive rides the signal-green family; neutral/unproductive stay
   functional amber/red (they are semantics, not brand). */
.badge-productive   { background:#E3F7EC; color:#0B6B43; }
.badge-neutral      { background:#FEF3C7; color:#92400E; }
.badge-unproductive { background:#FEE2E2; color:#991B1B; }
[data-bs-theme="dark"] .badge-productive   { background:#0B3B26; color:#7FEDB0; }
[data-bs-theme="dark"] .badge-neutral      { background:#78350F; color:#FDE68A; }
[data-bs-theme="dark"] .badge-unproductive { background:#7F1D1D; color:#FECACA; }

/* Audit-row outcome tints */
.audit-row.audit-failure td { background: rgba(239, 68, 68, 0.05); }
.audit-row.audit-denied  td { background: rgba(245, 158, 11, 0.05); }
[data-bs-theme="dark"] .audit-row.audit-failure td { background: rgba(239, 68, 68, 0.12); }
[data-bs-theme="dark"] .audit-row.audit-denied  td { background: rgba(245, 158, 11, 0.12); }

/* RMM-bundle callout card uses brand-primary side-stripe */
.card.rmm-card { border-left: 3px solid var(--theme-primary); }

/* Tight key-value layout for tenant details */
dl.kv { display: grid; grid-template-columns: 11rem 1fr; column-gap: 1rem; row-gap: 0.4rem; margin-bottom: 0; }
dl.kv dt { color: var(--theme-secondary-color); font-weight: 500; }
dl.kv dd { margin: 0; }

/* Make the topbar logo line up with the sidenav width. Mirror the rail token
   (was a stale 220px vs the 245px rail) so the logo column tracks the rail. */
.logo-topbar { min-width: var(--sn-rail-width, 245px); }
@media (max-width: 991px) { .logo-topbar { min-width: auto; } }

/* ---------------------------------------------------------------------
   Real-time visibility widget
   --------------------------------------------------------------------- */

.rt-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
}
.rt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rt-active  { background:#E3F7EC; color:#0B6B43; }
.rt-active  .rt-dot { background:#0E9E60; animation: rt-pulse 1.4s ease-in-out infinite; box-shadow:0 0 0 0 rgba(14,158,96,0.6); }
.rt-idle    { background:#FEF3C7; color:#92400E; }
.rt-idle    .rt-dot { background:#F59E0B; }
.rt-away    { background:#E2E8F0; color:#475569; }
.rt-away    .rt-dot { background:#94A3B8; }
.rt-offline { background:#F1F5F9; color:#64748B; }
.rt-offline .rt-dot { background:#CBD5E1; }
[data-bs-theme="dark"] .rt-active  { background:#0B3B26; color:#7FEDB0; }
[data-bs-theme="dark"] .rt-idle    { background:#78350F; color:#FDE68A; }
[data-bs-theme="dark"] .rt-away    { background:#1E293B; color:#94A3B8; }
[data-bs-theme="dark"] .rt-offline { background:#0F172A; color:#64748B; }

@keyframes rt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(14,158,96,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(14,158,96,0); }
    100% { box-shadow: 0 0 0 0 rgba(14,158,96,0); }
}

/* Respect reduced-motion: kill the infinite live-pulse ring on the status dot
   and the refresh indicator. The colour/state still reads without the throb. */
@media (prefers-reduced-motion: reduce) {
    .rt-active .rt-dot,
    .rt-refresh-dot {
        animation: none;
    }
}

.rt-cat-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
}
.rt-cat-productive   { background:#0E9E60; }
.rt-cat-neutral      { background:#F59E0B; }
.rt-cat-unproductive { background:#EF4444; }

.rt-refresh-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-green, #0E9E60);
    margin-left: 0.3rem;
    animation: rt-pulse 1.4s ease-in-out infinite;
    vertical-align: middle;
}

.rt-table td { vertical-align: middle; }

.rt-schedule-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}
.rt-in-schedule     { background:#E3F7EC; color:#0C7A4C; }
.rt-out-of-schedule { background:#F1F5F9; color:#64748B; }
[data-bs-theme="dark"] .rt-in-schedule     { background:rgba(76,227,141,0.18); color:#7FEDB0; }
[data-bs-theme="dark"] .rt-out-of-schedule { background:#1E293B; color:#94A3B8; }

.rt-adh-good { color:#0B6B43; font-weight:700; }
.rt-adh-warn { color:#92400E; font-weight:700; }
.rt-adh-bad  { color:#991B1B; font-weight:700; }
[data-bs-theme="dark"] .rt-adh-good { color:#7FEDB0; }
[data-bs-theme="dark"] .rt-adh-warn { color:#FDE68A; }
[data-bs-theme="dark"] .rt-adh-bad  { color:#FECACA; }
.rt-summary { font-size: 0.92rem; }