/* * iciem-theme.css * ICIEM Platform — Shared Design System * Provides design tokens, form components, buttons, cards, * and accessibility utilities for use across all pages. * * Class prefix: ic- * All CSS variables: --ic-* ******************************************************************************/ /* ══ 1. DESIGN TOKENS ════════════════════════════════════════════════════════ */ :root { /* Brand */ --ic-brand: #0F172A; --ic-brand-mid: #1E293B; --ic-cta: #0369A1; --ic-cta-hover: #0284C7; --ic-accent: #38BDF8; /* Surface */ --ic-bg: #F8FAFC; --ic-surface: #FFFFFF; /* Panels that sit ON TOP of a map canvas rather than on a card. The canvas never follows the theme, so these need their own tokens — a plain rgba(255,255,255,…) turns into a white flash in dark mode. */ --ic-surface-float: rgba(255, 255, 255, 0.94); /* legends, floating chips */ --ic-surface-scrim: rgba(255, 255, 255, 0.7); /* loading veil over a map */ /* Text */ --ic-text: #020617; --ic-muted: #334155; --ic-subtle: #64748B; --ic-placeholder: #94A3B8; /* Readable ink for anything filled with --ic-cta (buttons, skip link). commonMaster recomputes both per tenant via a WCAG contrast check, so a light brand colour gets dark ink instead of unreadable white. */ --ic-on-primary: #FFFFFF; --ic-on-primary-hover: #FFFFFF; /* Borders */ --ic-border: #E2E8F0; --ic-border-focus: #0369A1; /* States */ --ic-error: #B91C1C; --ic-success: #15803D; --ic-warning: #B45309; /* Focus rings */ --ic-ring: 0 0 0 3px rgba(3, 105, 161, 0.35); --ic-ring-err: 0 0 0 3px rgba(185, 28, 28, 0.25); /* Typography */ --ic-font-head: 'Inter', system-ui, sans-serif; --ic-font-body: 'Inter', system-ui, sans-serif; /* Shape */ --ic-radius: 4px; --ic-radius-lg: 6px; /* Touch target */ --ic-touch: 44px; } /* ══ 1b. DARK MODE TOKEN OVERRIDES ═══════════════════════════════════════════ */ /* The template puts `dark-style` on and swaps in Bootstrap's core-dark.css. Redefine only the surface/ink/border tokens here — brand, CTA, ring, state and typography tokens stay as-is so accents and focus rings are unchanged. Because the component rules below all consume these tokens, this cascades app-wide. */ html.dark-style { --ic-bg: #232b3a; /* table-light header, subtle fills — a touch lighter than card */ --ic-surface: #283144; /* card-header/footer — matches Bootstrap dark card body */ --ic-text: #e2e8f0; --ic-muted: #a8b3c4; --ic-subtle: #8b98ab; --ic-placeholder: #6b7890; --ic-border: #3a4356; /* light hairline for dark surfaces */ --ic-surface-float: rgba(40, 49, 68, 0.94); --ic-surface-scrim: rgba(35, 43, 58, 0.7); } /* ══ 2. ACCESSIBILITY ════════════════════════════════════════════════════════ */ /* Skip to main content — keyboard only */ .ic-skip { position: absolute; top: -999px; left: 1rem; z-index: 9999; padding: 0.5rem 1.25rem; background: var(--ic-cta); color: var(--ic-on-primary); font-size: 0.875rem; font-weight: 600; border-radius: 0 0 var(--ic-radius) var(--ic-radius); text-decoration: none; } .ic-skip:focus { top: 0; } /* ══ 3. TYPOGRAPHY ═══════════════════════════════════════════════════════════ */ .ic-font-head { font-family: var(--ic-font-head); } .ic-font-body { font-family: var(--ic-font-body); } .ic-heading { font-family: var(--ic-font-head); font-size: 1.75rem; font-weight: 600; color: var(--ic-text); line-height: 1.25; } .ic-subheading { font-size: 0.875rem; color: var(--ic-muted); line-height: 1.6; } .ic-label-caps { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-text); } /* Colour utilities */ .ic-text-brand { color: var(--ic-brand) !important; } .ic-text-cta { color: var(--ic-cta) !important; } .ic-text-muted { color: var(--ic-muted) !important; } .ic-text-subtle { color: var(--ic-subtle) !important; } .ic-text-error { color: var(--ic-error) !important; } /* ══ 4. LAYOUT PRIMITIVES ════════════════════════════════════════════════════ */ /* Flex/grid children refuse to shrink below their content's intrinsic width, because min-width defaults to `auto`. That is why `text-truncate` inside a flex child does nothing until min-width is zeroed — the ellipsis never gets a chance because the box never gets narrower than the text. This class is used in 31 views across the app (including the shared ic-stat-strip KPI tiles and the System Health cards) but was never defined: Bootstrap 5.1 ships min-vw-100/min-vh-100 and no min-width scale, and the utility was presumably assumed from a later version or from Tailwind. Every one of those truncations has been silently inert. Defining it here fixes them all at once. !important matches Bootstrap's utility convention, so it wins against the component rules it is applied alongside. */ .min-w-0 { min-width: 0 !important; } .ic-divider { border: none; border-top: 1px solid var(--ic-border); margin-top: 0; margin-bottom: 0; } /* White surface card */ .ic-card { background: var(--ic-surface); border: 1px solid var(--ic-border); border-radius: var(--ic-radius-lg); padding: 2rem 2.25rem 1.75rem; } @media (max-width: 575.98px) { .ic-card { border: none; background: transparent; padding: 0; } } /* ══ 5. FORM COMPONENTS ══════════════════════════════════════════════════════ */ /* Field wrapper */ .ic-field { margin-bottom: 1.1rem; } /* Label */ .ic-label { display: block; font-family: var(--ic-font-body); font-size: 0.7rem; font-weight: 700; color: var(--ic-text); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; } /* Input */ .ic-input { display: block; width: 100%; min-height: var(--ic-touch); padding: 0.55rem 0.875rem; font-family: var(--ic-font-body); font-size: 0.9rem; color: var(--ic-text); background: var(--ic-surface); border: 1.5px solid var(--ic-border); border-radius: var(--ic-radius); outline: none; line-height: 1.5; } .ic-input::placeholder { color: var(--ic-placeholder); } .ic-input:focus { border-color: var(--ic-border-focus); box-shadow: var(--ic-ring); } .ic-input.is-invalid { border-color: var(--ic-error); } .ic-input.is-invalid:focus { box-shadow: var(--ic-ring-err); } /* Password visibility wrapper */ .ic-pw-wrap { position: relative; } .ic-pw-wrap .ic-input { padding-right: 2.75rem; } .ic-pw-btn { position: absolute; top: 0; right: 0; bottom: 0; width: var(--ic-touch); background: none; border: none; cursor: pointer; color: var(--ic-placeholder); display: flex; align-items: center; justify-content: center; border-radius: 0 var(--ic-radius) var(--ic-radius) 0; } .ic-pw-btn:hover { color: var(--ic-muted); } .ic-pw-btn:focus-visible { outline: none; box-shadow: var(--ic-ring); } /* Inline error message (use role="alert") */ .ic-field-error { display: flex; align-items: flex-start; gap: 0.35rem; font-family: var(--ic-font-body); font-size: 0.775rem; color: var(--ic-error); margin-top: 0.35rem; line-height: 1.4; } .ic-field-error > svg { flex-shrink: 0; margin-top: 1px; } /* Remember / checkbox row */ .ic-remember { display: flex; align-items: center; gap: 0.5rem; } .ic-check { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; accent-color: var(--ic-cta); border-radius: 2px; } .ic-check-label { font-family: var(--ic-font-body); font-size: 0.82rem; color: var(--ic-muted); cursor: pointer; user-select: none; line-height: 1; } /* ══ 6. BUTTON ═══════════════════════════════════════════════════════════════ */ .ic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--ic-touch); padding: 0.6rem 1.25rem; font-family: var(--ic-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--ic-radius); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.4; } .ic-btn:focus-visible { outline: none; box-shadow: var(--ic-ring); } .ic-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Filled — primary action */ .ic-btn-primary { background: var(--ic-cta); color: var(--ic-on-primary); border-color: var(--ic-cta); width: 100%; } .ic-btn-primary:hover, .ic-btn-primary:focus, .ic-btn-primary:active { background: var(--ic-cta-hover); border-color: var(--ic-cta-hover); color: var(--ic-on-primary-hover); } /* Links styled as buttons: keep the button ink whatever the surrounding link styling (template defaults, tenant brand rules) tries to apply. */ a.ic-btn-primary, a.ic-btn-primary:hover, a.ic-btn-primary:focus, a.ic-btn-primary:visited { text-decoration: none; } /* Disabled: dim the fill, not the whole element. A blanket opacity fades the label along with the background and drops it under 3:1 — the submit button spends its whole "Activating…" state here. */ .ic-btn-primary:disabled, .ic-btn-primary[disabled] { opacity: 1; background: var(--ic-cta); border-color: var(--ic-cta); color: var(--ic-on-primary); filter: grayscale(0.4) brightness(0.92); } /* Outline — secondary action */ .ic-btn-outline { background: transparent; color: var(--ic-cta); border-color: var(--ic-cta); } .ic-btn-outline:hover { background: var(--ic-cta); color: var(--ic-on-primary); } /* Ghost — tertiary / text-link action */ .ic-btn-ghost { background: transparent; color: var(--ic-cta); border-color: transparent; padding-left: 0; padding-right: 0; min-height: auto; font-size: 0.82rem; letter-spacing: 0; text-transform: none; font-weight: 400; } .ic-btn-ghost:hover { color: var(--ic-cta-hover); text-decoration: underline; } /* ══ 7. TRUST / STATUS BADGE ═════════════════════════════════════════════════ */ .ic-trust-list { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; } .ic-trust-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--ic-radius); } .ic-trust-item--light { background: var(--ic-bg); border-color: var(--ic-border); } .ic-trust-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--ic-accent); } .ic-trust-item--light .ic-trust-icon { color: var(--ic-cta); } .ic-trust-text { font-family: var(--ic-font-body); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); line-height: 1.3; } .ic-trust-item--light .ic-trust-text { color: var(--ic-muted); } /* ══ 8. SECURITY NOTE ════════════════════════════════════════════════════════ */ .ic-security-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--ic-font-body); font-size: 0.72rem; color: var(--ic-subtle); letter-spacing: 0.02em; line-height: 1.5; } .ic-security-note svg { flex-shrink: 0; color: var(--ic-subtle); } /* ══ 9. INLINE ALERT BANNER ══════════════════════════════════════════════════ */ .ic-alert { display: flex; gap: 0.65rem; padding: 0.75rem 1rem; border-radius: var(--ic-radius); font-family: var(--ic-font-body); font-size: 0.84rem; line-height: 1.5; border: 1px solid transparent; } .ic-alert svg { flex-shrink: 0; margin-top: 2px; } .ic-alert-error { background: #FEF2F2; border-color: #FECACA; color: var(--ic-error); } .ic-alert-success { background: #F0FDF4; border-color: #BBF7D0; color: var(--ic-success); } .ic-alert-warning { background: #FFFBEB; border-color: #FDE68A; color: var(--ic-warning); } .ic-alert-info { background: #F0F9FF; border-color: #BAE6FD; color: var(--ic-cta); } /* ══ 10. REDUCED MOTION ═══════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ══ 11. DASHBOARD — BOOTSTRAP OVERRIDES ═════════════════════════════════════ * Scoped to .content-wrapper so the sidebar, navbar, and vendor UI are * unaffected. Every Bootstrap component inside the content area picks up * the ICIEM brand tokens automatically — no blade file changes required. ******************************************************************************/ /* ── Page header banner ─────────────────────────────── */ .ic-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ic-border); } .ic-page-header-left { flex: 1 1 0; min-width: 0; } .ic-page-title { font-family: var(--ic-font-head); font-size: 1.6rem; font-weight: 600; color: var(--ic-text); line-height: 1.25; margin: 0 0 0.2rem; /* Organization names are free text up to 255 chars. Break one that has no spaces rather than letting it push the header wider than the viewport. */ overflow-wrap: break-word; } .ic-page-subtitle { font-size: 0.82rem; color: var(--ic-subtle); margin: 0; line-height: 1.5; overflow-wrap: break-word; } .ic-page-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; /* Wrap, because these headers carry more than a single button: the tenant analytics header holds a four-chip range selector, an export dropdown, a refresh form and a link. Without this they sit on one unshrinkable row and overflow the page at every width between 576px and roughly 1100px — the column switch below only rescues phones. */ flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 575.98px) { .ic-page-header { flex-direction: column; } .ic-page-header-actions { width: 100%; justify-content: flex-start; } } /* ── Card: consistent border, left accent, headings ──── */ .content-wrapper .card { border-color: var(--ic-border); border-radius: var(--ic-radius-lg); } .content-wrapper .card-header { background: var(--ic-surface); border-bottom-color: var(--ic-border); border-left: 3px solid var(--ic-cta); padding-left: calc(1.25rem - 3px); } .content-wrapper .card-footer { background: var(--ic-surface); border-top-color: var(--ic-border); } .content-wrapper .card-title, .content-wrapper h5.card-title, .content-wrapper h6.card-title, .content-wrapper .card-header > h4, .content-wrapper .card-header > h5, .content-wrapper .card-header > h6 { font-family: var(--ic-font-head); font-size: 1.05rem; font-weight: 600; color: var(--ic-text); letter-spacing: 0.01em; } /* Stat card numbers */ .content-wrapper .card-body > h4, .content-wrapper .card-body > h5 { font-family: var(--ic-font-head); color: var(--ic-text); } /* ── Form labels ─────────────────────────────────────── */ .content-wrapper .form-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ic-text); margin-bottom: 0.4rem; } /* ── Form controls & selects ─────────────────────────── */ .content-wrapper .form-control, .content-wrapper .form-select { border-color: var(--ic-border); color: var(--ic-text); min-height: var(--ic-touch); font-size: 0.9rem; } .content-wrapper .form-control::placeholder { color: var(--ic-placeholder); } .content-wrapper .form-control:focus, .content-wrapper .form-select:focus { border-color: var(--ic-border-focus); box-shadow: var(--ic-ring); } .content-wrapper .form-control.is-invalid:focus, .content-wrapper .form-select.is-invalid:focus { box-shadow: var(--ic-ring-err); } /* sm size variants stay compact */ .content-wrapper .form-control-sm, .content-wrapper .form-select-sm { font-size: 0.85rem; min-height: 36px; } /* ── Alerts ──────────────────────────────────────────── */ .content-wrapper .alert { border-radius: var(--ic-radius); font-size: 0.875rem; border-width: 1px; } .content-wrapper .alert-success { background: #F0FDF4; border-color: #BBF7D0; color: var(--ic-success); } .content-wrapper .alert-danger { background: #FEF2F2; border-color: #FECACA; color: var(--ic-error); } .content-wrapper .alert-warning { background: #FFFBEB; border-color: #FDE68A; color: var(--ic-warning); } .content-wrapper .alert-info { background: #F0F9FF; border-color: #BAE6FD; color: var(--ic-cta); } /* Alert backgrounds hard-code light hex, so they don't follow the tokens — give them dark counterparts for dark mode. */ html.dark-style .content-wrapper .alert-success { background: #12241a; border-color: #1e4d31; color: #4ade80; } html.dark-style .content-wrapper .alert-danger { background: #2a1616; border-color: #5c2626; color: #f87171; } html.dark-style .content-wrapper .alert-warning { background: #2a2210; border-color: #5c4a1e; color: #fbbf24; } html.dark-style .content-wrapper .alert-info { background: #0f2233; border-color: #1e4a66; color: #38bdf8; } /* ── btn-primary ─────────────────────────────────────── */ .content-wrapper .btn-primary { background-color: var(--ic-cta) !important; border-color: var(--ic-cta) !important; color: #ffffff !important; } .content-wrapper .btn-primary:hover, .content-wrapper .btn-primary:active { background-color: var(--ic-cta-hover) !important; border-color: var(--ic-cta-hover) !important; } .content-wrapper .btn-primary:focus-visible { box-shadow: var(--ic-ring) !important; } /* ── btn-outline-primary ─────────────────────────────── */ .content-wrapper .btn-outline-primary { color: var(--ic-cta) !important; border-color: var(--ic-cta) !important; } .content-wrapper .btn-outline-primary:hover { background-color: var(--ic-cta) !important; color: #fff !important; } /* ── Icon buttons (edit/delete) ─────────────────────── */ .content-wrapper .btn-icon.text-primary { color: var(--ic-cta) !important; } /* ── Table headers ───────────────────────────────────── */ .content-wrapper .table > thead th, .content-wrapper .table > thead > tr > th { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-muted); border-bottom-color: var(--ic-border); } .content-wrapper .table-light, .content-wrapper thead.table-light > tr > th { --bs-table-bg: var(--ic-bg); background-color: var(--ic-bg) !important; } .content-wrapper .table-hover > tbody > tr:hover > * { background-color: rgba(3, 105, 161, 0.04); color: inherit; } /* ── Pagination ──────────────────────────────────────── */ .content-wrapper .page-link { color: var(--ic-cta); border-color: var(--ic-border); } .content-wrapper .page-link:hover { background: var(--ic-bg); border-color: var(--ic-border-focus); color: var(--ic-cta-hover); } .content-wrapper .page-item.active .page-link { background-color: var(--ic-cta); border-color: var(--ic-cta); color: #fff; } .content-wrapper .page-item.disabled .page-link { color: var(--ic-subtle); } /* ── Modal: keep card-header accent bar out of modals ── */ .modal .card-header { border-left: none !important; } /* ── Section group headings (h6 used as dividers in forms) */ .content-wrapper .text-muted.mb-1, .content-wrapper h6.text-muted { font-family: var(--ic-font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-subtle) !important; padding-bottom: 0.35rem; border-bottom: 1px solid var(--ic-border); margin-bottom: 0.75rem !important; } /* ── Badge bg-label-primary pull to brand colour ─────── */ .content-wrapper .bg-label-primary { background-color: rgba(3, 105, 161, 0.12) !important; color: var(--ic-cta) !important; } /* ══ 12. LIST PAGES — ICON BADGE, BREADCRUMB, STATS STRIP, PILLS, TABLE ══════ */ /* Page header icon badge */ .ic-page-icon { flex-shrink: 0; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(3, 105, 161, 0.1); color: var(--ic-cta); font-size: 1.45rem; } /* Breadcrumb (page header, right side) */ .content-wrapper .breadcrumb { margin: 0; font-size: 0.8rem; } .content-wrapper .breadcrumb-item a { color: var(--ic-subtle); text-decoration: none; } .content-wrapper .breadcrumb-item a:hover { color: var(--ic-cta); } .content-wrapper .breadcrumb-item.active { color: var(--ic-text); font-weight: 500; } /* Stats strip — row of key counts above a list table */ .ic-stat { display: flex; align-items: center; gap: 0.85rem; min-width: 0; } @media (min-width: 1200px) { /* Card tiles carry their own border, so they skip the divider. */ .ic-stats-strip > [class*="col"] + [class*="col"] .ic-stat:not(.ic-stat--card) { border-left: 1px solid var(--ic-border); padding-left: 1.5rem; } } /* Card variant — a self-contained tile. Used where a stat is also a control (clickable status filters) or where tiles wrap onto several rows. */ .ic-stat--card { display: block; background: var(--ic-surface); border: 1px solid var(--ic-border); border-radius: var(--ic-radius-lg); padding: 0.8rem 0.9rem; color: inherit; transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; /* Nothing may escape a tile. The icon is flex-shrink:0, so if the text column ever fails to shrink the icon is pushed past the card edge and paints over the neighbouring tile's label — which is precisely what happened while the min-w-0 utility below was undefined. This is the belt to that braces. */ overflow: hidden; } /* The text column, restated here rather than trusted to the min-w-0 class in the markup: that class went undefined for a long time and the failure was silent and ugly. A tile must degrade by ellipsising its own caption, never by spilling into its neighbour. */ .ic-stat--card > div > .min-w-0, .ic-stat > .min-w-0 { min-width: 0; } a.ic-stat--card:hover { box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.07); transform: translateY(-2px); } .ic-stat--card .ic-stat-label { font-size: 0.68rem; letter-spacing: 0.04em; font-weight: 600; } .ic-stat--card .ic-stat-value { font-size: 1.35rem; margin-top: 0.1rem; } .ic-stat-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; } .ic-stat-icon--primary { background: rgba(3, 105, 161, 0.12); color: var(--ic-cta); } .ic-stat-icon--success { background: rgba(21, 128, 61, 0.12); color: var(--ic-success); } .ic-stat-icon--warning { background: rgba(180, 83, 9, 0.12); color: var(--ic-warning); } .ic-stat-icon--purple { background: rgba(109, 40, 217, 0.12); color: #6D28D9; } .ic-stat-icon--secondary { background: var(--ic-bg); color: var(--ic-subtle); } .ic-stat-icon--danger { background: rgba(220, 38, 38, 0.12); color: var(--ic-error); } .ic-stat-label { font-size: 0.75rem; color: var(--ic-subtle); line-height: 1.3; } .ic-stat-value { font-family: var(--ic-font-head); font-size: 1.4rem; font-weight: 700; color: var(--ic-text); line-height: 1.25; /* A grouped figure like 12,345,678 has no natural break opportunity, and the six-across strip leaves each tile ~140px at 1200px. Break rather than spill into the neighbouring tile. */ overflow-wrap: break-word; } .ic-stat-sub { font-size: 0.72rem; color: var(--ic-subtle); line-height: 1.3; } .ic-stat-pct--success { color: var(--ic-success); font-weight: 600; } .ic-stat-pct--warning { color: var(--ic-warning); font-weight: 600; } .ic-stat-pct--purple { color: #6D28D9; font-weight: 600; } /* Status pills — dot + label */ .ic-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; border-radius: 50rem; font-size: 0.72rem; font-weight: 600; line-height: 1; white-space: nowrap; } .ic-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .ic-pill--success { background: #F0FDF4; color: var(--ic-success); } .ic-pill--warning { background: #FFFBEB; color: var(--ic-warning); } .ic-pill--danger { background: #FEF2F2; color: var(--ic-error); } .ic-pill--secondary { background: var(--ic-bg); color: var(--ic-subtle); } .ic-pill--primary { background: #EFF6FF; color: var(--ic-cta); } .ic-pill--info { background: #ECFEFF; color: #0E7490; } /* Dark mode: the tints above are light-theme washes, so on a dark card they read as bright chips punched out of the surface. Same treatment already applied to .ic-sev below — a deep tint of the hue with a light foreground. */ html.dark-style .ic-pill--success { background: #12241a; color: #4ade80; } html.dark-style .ic-pill--warning { background: #2a2210; color: #fbbf24; } html.dark-style .ic-pill--danger { background: #2a1616; color: #f87171; } html.dark-style .ic-pill--primary { background: #0f2233; color: #38bdf8; } html.dark-style .ic-pill--info { background: #0d2529; color: #22d3ee; } html.dark-style .ic-pill--secondary { background: #232b3a; color: #a8b3c4; } /* ── Workflow stepper ─────────────────────────────────── A linear "where is this record in its lifecycle" indicator: numbered nodes joined by a rail, each done / active / upcoming. This exists because the campaign detail page drew its own with hardcoded hex values (#71dd37, #696cff, #e8e8e8, #aaa) baked into inline styles. Those are Sneat's light-theme colours, so on html.dark-style the rail and the upcoming nodes rendered as near-white blocks on a dark card and the muted labels fell below any readable contrast. Tokens fix that for free, and the component is reusable by any other multi-step record (bulk imports, member batches). ------------------------------------------------------ */ .ic-steps { display: flex; align-items: flex-start; gap: 0; } .ic-step { display: flex; align-items: flex-start; flex: 1 1 0; min-width: 0; } .ic-step:last-child { flex: 0 0 auto; } .ic-step-node { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex-shrink: 0; width: 5.5rem; } .ic-step-dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; line-height: 1; background: var(--ic-bg); color: var(--ic-placeholder); border: 1px solid var(--ic-border); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .ic-step-label { font-size: 0.72rem; color: var(--ic-subtle); text-align: center; line-height: 1.2; /* The labels sit under fixed-width nodes; a long one must wrap inside its own column rather than widening the node and skewing the rail. */ overflow-wrap: break-word; } /* The connecting rail. margin-top centres it against the 32px dot. */ .ic-step-rail { flex: 1 1 auto; height: 2px; margin-top: 15px; background: var(--ic-border); border-radius: 1px; min-width: 0.75rem; } .ic-step--done .ic-step-dot { background: var(--ic-success); border-color: var(--ic-success); color: #fff; } .ic-step--done .ic-step-label { color: var(--ic-success); } .ic-step--done .ic-step-rail { background: var(--ic-success); } .ic-step--active .ic-step-dot { background: var(--ic-cta); border-color: var(--ic-cta); color: #fff; /* Ring rather than a scale transform: the row is a fixed rail, and growing the dot would nudge every label after it. */ box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.18); } .ic-step--active .ic-step-label { color: var(--ic-cta); font-weight: 600; } @media (max-width: 575.98px) { .ic-step-node { width: 4.25rem; } .ic-step-label { font-size: 0.66rem; } } /* Next-action strip under the stepper — the one thing to do next. */ .ic-next-action { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--ic-border); font-size: 0.82rem; color: var(--ic-muted); } /* DataTables footer — "Showing X to Y of Z" + per-page select + pager */ .content-wrapper .ic-dt-footer { border-top: 1px solid var(--ic-border); } .content-wrapper .dataTables_info { padding: 0 !important; font-size: 0.8rem; color: var(--ic-subtle); } .content-wrapper .dataTables_length label { margin: 0; } .content-wrapper .dataTables_length .form-select, .content-wrapper .dataTables_length select { min-height: 36px; font-size: 0.85rem; width: auto; padding-right: 2rem; } .content-wrapper .dataTables_paginate .pagination { margin: 0; } .content-wrapper .dataTables_paginate .page-link { font-size: 0.82rem; } /* ============================================================= Sidebar theme — deep ICPC blue (matches reference dashboard) ============================================================= */ :root { --ic-sidebar-bg: #06477B; --ic-sidebar-active: #1145B7; --ic-sidebar-text: rgba(255, 255, 255, 0.85); --ic-sidebar-text-dim: rgba(255, 255, 255, 0.55); --ic-sidebar-hover: rgba(255, 255, 255, 0.08); /* Foregrounds are tokens too, so tenant branding can swap them for dark ink when a tenant picks a light sidebar/active colour. */ --ic-sidebar-active-fg: #FFFFFF; --ic-sidebar-hover-fg: #FFFFFF; --ic-sidebar-heading: rgba(255, 255, 255, 0.92); } #layout-menu.bg-menu-theme { background-color: var(--ic-sidebar-bg) !important; color: var(--ic-sidebar-text); } #layout-menu.bg-menu-theme .menu-divider { border-color: rgba(255, 255, 255, 0.12) !important; } #layout-menu.bg-menu-theme .app-brand-text { color: var(--ic-sidebar-text) !important; } #layout-menu.bg-menu-theme .menu-inner-shadow { background: linear-gradient(var(--ic-sidebar-bg) 41%, rgba(6, 71, 123, 0.11) 95%, rgba(6, 71, 123, 0)) !important; } /* Section headers — bright, bold, uppercase */ #layout-menu.bg-menu-theme .menu-inner > .menu-header { color: var(--ic-sidebar-heading); } #layout-menu.bg-menu-theme .menu-inner > .menu-header .menu-header-text { color: var(--ic-sidebar-heading); font-weight: 700; letter-spacing: 0.06em; } #layout-menu.bg-menu-theme .menu-inner > .menu-header::before { background-color: var(--ic-sidebar-text-dim) !important; } /* Links + icons */ #layout-menu.bg-menu-theme .menu-link, #layout-menu.bg-menu-theme .menu-horizontal-prev, #layout-menu.bg-menu-theme .menu-horizontal-next { color: var(--ic-sidebar-text) !important; } #layout-menu.bg-menu-theme .menu-link .menu-icon, #layout-menu.bg-menu-theme .menu-item > .menu-link i { color: var(--ic-sidebar-text) !important; } /* Hover / focus */ #layout-menu.bg-menu-theme .menu-item .menu-link:hover, #layout-menu.bg-menu-theme .menu-item .menu-link:focus, #layout-menu.bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle { background-color: var(--ic-sidebar-hover) !important; color: var(--ic-sidebar-hover-fg) !important; } #layout-menu.bg-menu-theme .menu-item .menu-link:hover i, #layout-menu.bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle i { color: var(--ic-sidebar-hover-fg) !important; } /* Active item — solid bright blue pill */ #layout-menu.bg-menu-theme .menu-item.active > .menu-link { background: var(--ic-sidebar-active) !important; box-shadow: none !important; color: var(--ic-sidebar-active-fg) !important; } #layout-menu.bg-menu-theme .menu-item.active > .menu-link i { color: var(--ic-sidebar-active-fg) !important; } /* Expanded (open) parent group: keep transparent so the branded blue shows through. The stock theme paints this group grey (#eceded light / #252b37 !important dark), which clashes with the sidebar — most visibly in dark mode where a grey block appears behind the open submenu. */ #layout-menu.bg-menu-theme .menu-inner > .menu-item.open, #layout-menu.bg-menu-theme .menu-inner > .menu-item.active, #layout-menu.bg-menu-theme .menu-sub { background: transparent !important; } /* Submenu */ #layout-menu.bg-menu-theme .menu-sub .menu-link { color: var(--ic-sidebar-text) !important; background: transparent !important; } #layout-menu.bg-menu-theme .menu-sub .menu-link::before { color: var(--ic-sidebar-text-dim) !important; } #layout-menu.bg-menu-theme .menu-sub .menu-item.active > .menu-link { background: var(--ic-sidebar-active) !important; color: var(--ic-sidebar-active-fg) !important; } #layout-menu.bg-menu-theme .menu-sub .menu-item.active > .menu-link::before { color: var(--ic-sidebar-active-fg) !important; } /* Collapse / toggle chrome */ #layout-menu.bg-menu-theme .layout-menu-toggle { color: var(--ic-sidebar-text) !important; } #layout-menu.bg-menu-theme .menu-toggle::after { color: var(--ic-sidebar-text) !important; } /* Scrollbar */ #layout-menu.bg-menu-theme .ps__thumb-y { background-color: rgba(255, 255, 255, 0.35) !important; } /* ── Avatar icon centering fix ───────────────────────────────────── Sneat/Vuexy's .avatar only centers its content when the glyph is wrapped in .avatar-initial. Many stat cards across the app place a bare directly inside .avatar (e.g.
), which left the icon stuck in the top-left corner of the coloured box. Center bare direct-child icons; .avatar-initial markup is unaffected. */ .avatar > i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* ───────────────────────────────────────────────────────────────────────── Severity rows — a finding with a level, a count and a link to its source. Lifted out of the system-overview page so the election integrity pages, the overview teaser and the declaration queue share one appearance. ───────────────────────────────────────────────────────────────────────── */ .ic-alert-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ic-border); border-radius: var(--ic-radius-lg); background: var(--ic-surface); color: var(--ic-text); font-size: 0.85rem; transition: box-shadow 0.15s ease, border-color 0.15s ease; } a.ic-alert-row:hover { box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.07); border-color: var(--ic-cta); } .ic-alert-icon { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--ic-bg); color: var(--ic-subtle); font-size: 1rem; } .ic-alert-title { font-weight: 500; } .ic-alert-count { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; } .ic-sev { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; border-radius: 5px; padding: 0.1rem 0.4rem; letter-spacing: 0.02em; } .ic-sev.high { background: #fde8e4; color: #d9381e; } .ic-sev.medium { background: #fff2dd; color: #b9770f; } .ic-sev.low { background: #eef1f4; color: #69788a; } .ic-alert-row.high .ic-alert-icon { background: #fde8e4; color: #d9381e; } .ic-alert-row.medium .ic-alert-icon { background: #fff2dd; color: #b9770f; } /* Coverage cell — badge over a thin bar, the 80/50 convention. */ .ic-progress-cell { min-width: 130px; } html.dark-style .ic-sev.high { background: #3b1a15; color: #f87171; } html.dark-style .ic-sev.medium { background: #33280f; color: #fbbf24; } html.dark-style .ic-sev.low { background: #232b3a; color: #a8b3c4; } html.dark-style .ic-alert-row.high .ic-alert-icon { background: #3b1a15; color: #f87171; } html.dark-style .ic-alert-row.medium .ic-alert-icon { background: #33280f; color: #fbbf24; } /* The election map panels were light-only; keep them legible in dark mode. */ html.dark-style #eo-map-legend, html.dark-style #er-map-legend { background: rgba(40, 49, 68, 0.94); color: var(--ic-text); } html.dark-style #eo-map-loading, html.dark-style #er-map-loading { background: rgba(35, 43, 58, 0.7); }