/* ============================================================================ * HostStatus — Design System (Bootstrap 5.3.x dual-theme) * Active theme is controlled by `data-bs-theme="light|dark"` on . * Theme-init script in fragments :: head sets this BEFORE first paint, so * there is no flash of unstyled content. * * Tokens are organised top-down: * 1. Light theme (default) * 2. Dark theme overrides * 3. Bootstrap variable mapping (shared) * 4. Components (.ds-*) — theme-aware via the tokens above * ========================================================================== */ /* ─── 1. Light theme (default) ─────────────────────────────────────────────── */ :root, [data-bs-theme="light"] { /* Brand (per-tenant; overridden in fragments :: head) */ --brand-primary: #2563EB; --brand-primary-hover: #1D4ED8; --brand-secondary: #0F172A; /* Surfaces */ --ds-bg: #F8FAFC; --ds-bg-elev: #FFFFFF; --ds-surface: #FFFFFF; --ds-surface-2: #F1F5F9; --ds-surface-3: #E2E8F0; --ds-surface-hover: #F8FAFC; --ds-glass: rgba(255, 255, 255, 0.82); --ds-glass-strong:rgba(255, 255, 255, 0.96); --ds-sidebar: #FFFFFF; --ds-topbar: #FFFFFF; /* Borders */ --ds-border: #E2E8F0; --ds-border-2: #CBD5E1; --ds-border-soft: rgba(15, 23, 42, 0.06); /* Type */ --ds-text: #0F172A; --ds-text-2: #475569; --ds-subtle: #64748B; --ds-muted: #94A3B8; --ds-on-accent: #FFFFFF; /* Semantic */ --ds-up: #10B981; --ds-up-text: #065F46; --ds-up-bg: #D1FAE5; --ds-up-soft: rgba(16, 185, 129, 0.10); --ds-down: #EF4444; --ds-down-text: #991B1B; --ds-down-bg: #FEE2E2; --ds-down-soft: rgba(239, 68, 68, 0.10); --ds-warn: #F59E0B; --ds-warn-text: #92400E; --ds-warn-bg: #FEF3C7; --ds-warn-soft: rgba(245, 158, 11, 0.10); --ds-info: #2563EB; --ds-info-text: #1E40AF; --ds-info-bg: #EFF6FF; --ds-info-soft: rgba(37, 99, 235, 0.10); --ds-paused: #94A3B8; --ds-paused-text: #475569; --ds-paused-bg: #E2E8F0; --ds-paused-soft: rgba(148, 163, 184, 0.10); --ds-purple: #7C3AED; --ds-purple-soft: rgba(124, 58, 237, 0.10); /* Chart palette */ --ds-chart-grid: rgba(15, 23, 42, 0.06); --ds-chart-axis: #94A3B8; /* Shadows */ --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --ds-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08); --ds-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12); --ds-ring: 0 0 0 3px rgba(37, 99, 235, 0.15); color-scheme: light; } /* ─── 2. Dark theme overrides ──────────────────────────────────────────────── */ [data-bs-theme="dark"] { --brand-primary: #3B82F6; --brand-primary-hover: #60A5FA; --brand-secondary: #0F172A; --ds-bg: #0F172A; --ds-bg-elev: #172033; --ds-surface: #1E293B; --ds-surface-2: #172033; --ds-surface-3: #283648; --ds-surface-hover: #243044; --ds-glass: rgba(30, 41, 59, 0.72); --ds-glass-strong:rgba(15, 23, 42, 0.92); --ds-sidebar: #1E293B; --ds-topbar: #0F172A; --ds-border: #1E293B; --ds-border-2: #334155; --ds-border-soft: rgba(148, 163, 184, 0.10); --ds-text: #F1F5F9; --ds-text-2: #CBD5E1; --ds-subtle: #94A3B8; --ds-muted: #64748B; --ds-on-accent: #FFFFFF; --ds-up: #10B981; --ds-up-text: #6EE7B7; --ds-up-bg: rgba(16, 185, 129, 0.16); --ds-up-soft: rgba(16, 185, 129, 0.14); --ds-down: #EF4444; --ds-down-text: #FCA5A5; --ds-down-bg: rgba(239, 68, 68, 0.18); --ds-down-soft: rgba(239, 68, 68, 0.14); --ds-warn: #F59E0B; --ds-warn-text: #FCD34D; --ds-warn-bg: rgba(245, 158, 11, 0.18); --ds-warn-soft: rgba(245, 158, 11, 0.14); --ds-info: #3B82F6; --ds-info-text: #93C5FD; --ds-info-bg: rgba(59, 130, 246, 0.18); --ds-info-soft: rgba(59, 130, 246, 0.14); --ds-paused: #64748B; --ds-paused-text: #CBD5E1; --ds-paused-bg: rgba(100, 116, 139, 0.20); --ds-paused-soft: rgba(100, 116, 139, 0.14); --ds-purple: #A78BFA; --ds-purple-soft: rgba(167, 139, 250, 0.14); --ds-chart-grid: rgba(148, 163, 184, 0.10); --ds-chart-axis: #64748B; --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --ds-shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.45); --ds-ring: 0 0 0 3px rgba(59, 130, 246, 0.25); color-scheme: dark; } /* ─── 3. Bootstrap variable mapping (shared) ───────────────────────────────── */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--ds-bg); --bs-body-color: var(--ds-text); --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif; --ds-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --bs-body-font-size: 14px; --bs-body-line-height: 1.5; --bs-secondary-color: var(--ds-subtle); --bs-tertiary-color: var(--ds-muted); --bs-tertiary-bg: var(--ds-surface-2); --bs-border-color: var(--ds-border); --bs-border-color-translucent: var(--ds-border-soft); --bs-link-color: var(--brand-primary); --bs-link-color-rgb: 37, 99, 235; --bs-link-hover-color: var(--brand-primary-hover); --bs-primary: var(--brand-primary); --bs-primary-rgb: 37, 99, 235; --bs-success: var(--ds-up); --bs-success-rgb: 16, 185, 129; --bs-danger: var(--ds-down); --bs-danger-rgb: 239, 68, 68; --bs-warning: var(--ds-warn); --bs-warning-rgb: 245, 158, 11; --bs-info: var(--ds-info); --bs-info-rgb: 37, 99, 235; --bs-code-color: var(--ds-purple); } /* ─── 4. Base ──────────────────────────────────────────────────────────────── */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { height: 100%; } body { background: var(--ds-bg); min-height: 100vh; color: var(--ds-text); letter-spacing: -0.005em; transition: background-color .25s ease, color .25s ease; } /* ── Typography: Space Grotesk display headings vs Inter body ─────────────── * Gives the UI typographic contrast instead of one flat Inter weight. Body * copy stays Inter (set via --bs-body-font-family). Headings + key display * numbers/titles pick up the display family with tighter tracking. * ------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .app-topbar__title, .ds-stat__value, .hs-logo__wordmark { font-family: var(--ds-font-display); letter-spacing: -0.02em; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ds-border-2); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--ds-subtle); } a { color: var(--brand-primary); text-decoration: none; } a:hover { color: var(--brand-primary-hover); } .font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; font-feature-settings: 'tnum' 1, 'zero' 1; } /* ─── 5. App shell layout ──────────────────────────────────────────────────── */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w, 240px) 1fr; min-height: 100vh; transition: grid-template-columns .2s ease; } .app-shell.is-collapsed { --sidebar-w: 72px; } .app-sidebar { position: sticky; top: 0; height: 100vh; background: var(--ds-sidebar); border-right: 1px solid var(--ds-border); display: flex; flex-direction: column; overflow: hidden; z-index: 30; } .app-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--ds-border); min-height: 64px; } .app-sidebar__brand-name { font-weight: 800; font-size: 15px; color: var(--ds-text); white-space: nowrap; overflow: hidden; } .is-collapsed .app-sidebar__brand-name { display: none; } /* ── Brand logo (shared) ────────────────────────────────────────────────── * 40×40 rounded-square icon (inline SVG, recoloured per theme) + wordmark. * Dark theme : white icon bg, navy "HS" letters. * Light theme : navy icon bg, white "HS" letters. * Pulse line + ".io" suffix are always the brand green (#22D65F). * Under 640px (and when the sidebar is collapsed) only the icon shows. * ------------------------------------------------------------------------ */ .hs-logo__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: #132342; color: #ffffff; /* default = light look */ } .hs-logo__icon svg { width: 92%; height: 92%; display: block; } .hs-logo__icon--lg { width: 56px; height: 56px; border-radius: 14px; } [data-bs-theme="light"] .hs-logo__icon { background: #132342; color: #ffffff; } [data-bs-theme="dark"] .hs-logo__icon { background: #ffffff; color: #132342; } .hs-logo__wordmark { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; white-space: nowrap; color: #0F172A; } [data-bs-theme="light"] .hs-logo__wordmark { color: #0F172A; } [data-bs-theme="dark"] .hs-logo__wordmark { color: #ffffff; } .hs-tld { color: #22D65F; } @media (max-width: 639.98px) { .hs-logo__wordmark { display: none; } } .is-collapsed .hs-logo__wordmark { display: none; } /* Collapsed rail is 72px wide — centre the 40px icon and tighten padding so it fits. */ .is-collapsed .app-sidebar__brand { justify-content: center; padding-left: 12px; padding-right: 12px; } .app-sidebar__nav { flex: 1; padding: 12px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .app-sidebar__nav-section { font-size: 10px; font-weight: 700; color: var(--ds-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 12px 8px; } .is-collapsed .app-sidebar__nav-section { display: none; } .app-sidebar__link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ds-text-2); font-size: 13px; font-weight: 500; position: relative; transition: background .15s ease, color .15s ease; white-space: nowrap; overflow: hidden; } .app-sidebar__link:hover { background: var(--ds-surface-2); color: var(--ds-text); } .app-sidebar__link i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; } .app-sidebar__link-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .is-collapsed .app-sidebar__link-label, .is-collapsed .app-sidebar__link-badge { display: none; } .app-sidebar__link.is-active { background: var(--ds-info-bg); color: var(--ds-info); } .app-sidebar__link.is-active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--brand-primary); } .app-sidebar__link.is-active i { color: var(--brand-primary); } .app-sidebar__link-badge { margin-left: auto; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--ds-up); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; } .app-sidebar__link-badge--down { background: var(--ds-down); } .app-sidebar__link-badge--warn { background: var(--ds-warn); color: #1F2937; } .app-sidebar__user { margin: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ds-surface-2); display: flex; align-items: center; gap: 10px; } .app-sidebar__user-avatar { width: 32px; height: 32px; border-radius: 50%; /* Use the theme-aware --ds-info token (NOT --brand-primary): the avatar is identity, not branding. If a tenant saves a near-white primaryColor the brand-primary route makes the avatar invisible in light theme. */ background-color: var(--ds-info, #2563EB); color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; } .app-sidebar__user-meta { line-height: 1.2; overflow: hidden; } .app-sidebar__user-name { font-size: 12px; font-weight: 600; color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sidebar__user-plan { font-size: 10px; color: var(--ds-subtle); } .is-collapsed .app-sidebar__user-meta { display: none; } /* ─── 6. Top bar ───────────────────────────────────────────────────────────── */ .app-main { display: flex; flex-direction: column; min-width: 0; } .app-topbar { position: sticky; top: 0; z-index: 20; background: var(--ds-topbar); border-bottom: 1px solid var(--ds-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .app-topbar__inner { display: flex; align-items: center; gap: 12px; padding: 0 24px; min-height: 64px; } .app-topbar__title { font-size: 18px; font-weight: 700; color: var(--ds-text); flex-shrink: 0; } .app-topbar__sidebar-toggle { border: 1px solid var(--ds-border); background: transparent; color: var(--ds-text-2); width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .app-topbar__sidebar-toggle:hover { background: var(--ds-surface-2); color: var(--ds-text); } .app-topbar__search { flex: 1; max-width: 360px; margin-left: auto; position: relative; } .app-topbar__search input { width: 100%; height: 36px; border-radius: 9px; background: var(--ds-surface-2); border: 1px solid transparent; color: var(--ds-text); padding: 0 12px 0 36px; font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .app-topbar__search input::placeholder { color: var(--ds-muted); } .app-topbar__search input:focus { outline: none; background: var(--ds-bg-elev); border-color: var(--brand-primary); box-shadow: var(--ds-ring); } .app-topbar__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ds-muted); pointer-events: none; } .app-topbar__actions { display: flex; align-items: center; gap: 8px; } .app-topbar__icon-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--ds-surface-2); border: 1px solid var(--ds-border); color: var(--ds-text-2); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; } .app-topbar__icon-btn:hover { background: var(--ds-surface-3); color: var(--ds-text); } .app-topbar__icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-down); border: 2px solid var(--ds-topbar); } .app-topbar__theme-toggle { width: 56px; height: 30px; border-radius: 999px; background: var(--ds-surface-2); border: 1px solid var(--ds-border); position: relative; cursor: pointer; padding: 0; transition: background .25s ease; } .app-topbar__theme-toggle::before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ds-bg-elev); box-shadow: var(--ds-shadow-sm); transition: transform .25s ease, background .25s ease; } [data-bs-theme="dark"] .app-topbar__theme-toggle::before { transform: translateX(26px); } .app-topbar__theme-toggle i { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; transition: opacity .2s ease; } .app-topbar__theme-toggle .bi-sun-fill { left: 9px; color: #FBBF24; } .app-topbar__theme-toggle .bi-moon-fill { right: 9px; color: #818CF8; } [data-bs-theme="light"] .app-topbar__theme-toggle .bi-moon-fill { opacity: 0.35; } [data-bs-theme="dark"] .app-topbar__theme-toggle .bi-sun-fill { opacity: 0.35; } /* ── Organization switcher ───────────────────────────────────────────────── */ .hs-org-switch__btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--ds-surface-2); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .hs-org-switch__btn:hover { background: var(--ds-surface); border-color: var(--ds-border-2); } .hs-org-switch__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hs-org-switch__caret { font-size: 11px; color: var(--ds-muted); } .hs-org-switch .dropdown-item.active, .hs-org-switch .dropdown-item.active:focus { background: var(--brand-primary); color: var(--ds-on-accent); } .hs-org-switch form { margin: 0; } /* ── Active-org / read-only pill ─────────────────────────────────────────── */ .hs-org-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; background: var(--ds-info-bg); color: var(--ds-info-text); border: 1px solid var(--ds-info-soft, var(--ds-border)); border-radius: 999px; font-size: 12px; font-weight: 600; max-width: 280px; overflow: hidden; white-space: nowrap; } .hs-org-pill__ro { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--ds-surface); color: var(--ds-subtle); border-radius: 6px; padding: 1px 6px; } .app-topbar__avatar { width: 36px; height: 36px; border-radius: 50%; /* Use the theme-aware --ds-info token (NOT --brand-primary): the avatar is identity, not branding. If a tenant saves a near-white primaryColor the brand-primary route makes the avatar invisible in light theme. */ background-color: var(--ds-info, #2563EB); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; transition: border-color .15s ease, box-shadow .15s ease; /* Button reset — the avatar is a