/* ==============================================================
4C Health Solutions — UI Kit CSS
==============================================================
Version : v1.1.0 — July 2026 (adds dark mode)
Source : Clarity UI design tokens + 4C brand palette
Usage : .
============================================================== */
/* --------------------------------------------------------------
0. Color scheme switch
-------------------------------------------------------------- */
:root {
color-scheme: light;
}
:root[data-4c-theme="light"] { color-scheme: light; }
:root[data-4c-theme="dark"] { color-scheme: dark; }
:root[data-4c-theme="auto"] { color-scheme: light dark; }
/* --------------------------------------------------------------
1. Typography
-------------------------------------------------------------- */
:root {
--4c-font-family: "Lato", Roboto, "Segoe UI", Arial, sans-serif;
--4c-font-family-heading: "Merriweather", serif;
--4c-font-weight-heading: 900;
}
/* --------------------------------------------------------------
2. Brand palette — blues
-------------------------------------------------------------- */
:root {
--4c-blue-brand: #084ca1;
--4c-blue-symphony-start: #374492;
--4c-blue-symphony-end: #64a7de;
--4c-blue-dark-navy: #17478e;
--4c-blue-deep: #035595;
--4c-blue-medium: #335c8f;
--4c-blue-mid: #3c85c7;
--4c-blue-light: #6fa7da;
--4c-blue-pale: #a0c5e8;
--4c-blue-accent: #00afeb;
--4c-blue-card: #1e5aab;
--4c-blue-card-border: #2568c4;
}
/* --------------------------------------------------------------
3. Brand palette — neutrals
-------------------------------------------------------------- */
:root {
--4c-neutral-white: #ffffff;
--4c-neutral-ui-accent: #f1f2f2;
--4c-neutral-surface-light: #f1f6f6;
--4c-neutral-gray: #e5e6e6;
--4c-neutral-grid-alt2: #e6e7e8;
--4c-neutral-grid-alt1: #d1d3d4;
--4c-neutral-grid: #bcbec0;
--4c-neutral-border-dark: #414042;
}
/* --------------------------------------------------------------
4. Brand palette — charts & infographics
-------------------------------------------------------------- */
:root {
--4c-chart-teal: #2f9a9a;
--4c-chart-teal-light: #6dc8bf;
--4c-chart-green: #00a651;
--4c-chart-violet: #967797;
--4c-chart-indigo: #6168b0;
--4c-chart-purple: #662d91;
--4c-chart-alert-red: #ed1c24;
--4c-chart-pink: #ff7bac;
}
/* --------------------------------------------------------------
5. Brand palette — product lines
-------------------------------------------------------------- */
:root {
--4c-product-clarity: #6dc8bf;
--4c-product-cost: #5ba281;
--4c-product-control: #8a5f94;
--4c-product-compliance: #ec8773;
}
/* --------------------------------------------------------------
6. Semantic tokens — light-dark() pairs
--------------------------------------------------------------
Each token carries its light and dark value; the active one is
picked by the color-scheme switch in section 0. Components must
only reference these (never raw palette hex) so they re-theme
for free. Dark surfaces are navy-tinted slate to stay on-brand.
-------------------------------------------------------------- */
:root {
--4c-text-primary: light-dark(#1e293b, #e2e8f0);
--4c-text-secondary: light-dark(#475569, #b2bac5);
--4c-text-muted: light-dark(#94a3b8, #7f8894);
--4c-text-disabled: light-dark(#cbd5e1, #475569);
--4c-surface-app: light-dark(#ffffff, #151a24);
--4c-surface-raised: light-dark(#ffffff, #1e2430);
--4c-surface-hover: light-dark(#f1f6f6, #27303f);
/* Recessed backgrounds — page body, modal footers, preview wells */
--4c-surface-sunken: light-dark(#f1f6f6, #11151d);
--4c-border: light-dark(#e5e6e6, #313b4b);
--4c-border-strong: light-dark(#cbd5e1, #435065);
--4c-border-focus: light-dark(#17478e, #6fa7da);
--4c-link: light-dark(#084ca1, #6fa7da);
--4c-link-hover: light-dark(#035595, #a0c5e8);
/* Brand-blue accent for text/strokes that sit on the app surface
(tab underlines, stat values, active steps) — navy is too dark
to read on dark surfaces, so it lightens there. Filled navy
backgrounds (buttons, pagination) keep --4c-blue-dark-navy. */
--4c-brand-accent: light-dark(#17478e, #6fa7da);
/* Status text/tint pairs used by badges, alerts, error states */
--4c-danger-text: light-dark(#dc2626, #f87171);
--4c-danger-text-strong: light-dark(#991b1b, #fca5a5);
--4c-danger-tint: light-dark(#fff1f2, rgba(239, 68, 68, 0.14));
}
/* --------------------------------------------------------------
7. Spacing scale
-------------------------------------------------------------- */
:root {
--4c-space-1: 4px;
--4c-space-2: 8px;
--4c-space-3: 12px;
--4c-space-4: 16px;
--4c-space-5: 20px;
--4c-space-6: 24px;
--4c-space-8: 32px;
--4c-space-10: 40px;
--4c-space-12: 48px;
}
/* --------------------------------------------------------------
8. Buttons — shape & sizing
-------------------------------------------------------------- */
:root {
--4c-btn-radius: 6px;
--4c-btn-font-weight: 600;
--4c-btn-letter-spacing: 0.02em;
--4c-btn-transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
--4c-btn-disabled-opacity: 0.4;
--4c-btn-padding-sm: 5px 12px;
--4c-btn-font-size-sm: 11px;
--4c-btn-padding-md: 8px 16px;
--4c-btn-font-size-md: 13px;
--4c-btn-padding-lg: 11px 22px;
--4c-btn-font-size-lg: 15px;
}
/* --------------------------------------------------------------
9. Button variants
-------------------------------------------------------------- */
:root {
--4c-btn-primary-bg: light-dark(#17478e, #1e5aab);
--4c-btn-primary-bg-hover: light-dark(#035595, #2568c4);
--4c-btn-primary-text: #ffffff;
--4c-btn-secondary-bg: transparent;
--4c-btn-secondary-bg-hover: light-dark(#e5f0f8, rgba(111, 167, 218, 0.14));
--4c-btn-secondary-text: light-dark(#084ca1, #6fa7da);
--4c-btn-secondary-text-hover: light-dark(#035595, #a0c5e8);
--4c-btn-secondary-border: light-dark(#3c85c7, #3d5f8a);
--4c-btn-ghost-bg: transparent;
--4c-btn-ghost-bg-hover: light-dark(#e5f0f8, rgba(111, 167, 218, 0.14));
--4c-btn-ghost-text: light-dark(#335c8f, #a0c5e8);
--4c-btn-ghost-text-hover: light-dark(#035595, #ffffff);
--4c-btn-danger-bg: #dc2626;
--4c-btn-danger-bg-hover: #b91c1c;
--4c-btn-danger-text: #ffffff;
--4c-btn-link-text: light-dark(#084ca1, #6fa7da);
--4c-btn-link-text-hover: light-dark(#035595, #a0c5e8);
}
/* --------------------------------------------------------------
10. Form tokens
-------------------------------------------------------------- */
:root {
--4c-input-radius: 5px;
--4c-input-border: var(--4c-border-strong);
--4c-input-border-focus: var(--4c-border-focus);
--4c-input-bg: light-dark(#ffffff, #1e2430);
--4c-input-text: var(--4c-text-primary);
--4c-input-placeholder: var(--4c-text-muted);
--4c-input-padding: 8px 12px;
--4c-input-font-size: 13px;
--4c-input-transition: border-color 0.15s, box-shadow 0.15s;
--4c-input-shadow-focus: 0 0 0 3px light-dark(rgba(23, 71, 142, 0.15), rgba(111, 167, 218, 0.25));
}
/* --------------------------------------------------------------
11. Card tokens
-------------------------------------------------------------- */
:root {
--4c-card-radius: 8px;
--4c-card-border: var(--4c-border);
--4c-card-shadow: 0 1px 3px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35)), 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.25));
--4c-card-shadow-hover: 0 4px 12px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
--4c-card-padding: 20px;
}
/* --------------------------------------------------------------
12. Badge tokens
-------------------------------------------------------------- */
:root {
--4c-badge-radius: 9999px;
--4c-badge-font-size: 11px;
--4c-badge-font-weight: 600;
--4c-badge-padding: 2px 8px;
}
/* ==============================================================
BASE STYLES
============================================================== */
body {
font-family: var(--4c-font-family);
color: var(--4c-text-primary);
background-color: var(--4c-surface-app);
line-height: 1.5;
margin: 0;
}
/* Typography */
.heading-4c-display {
font-family: var(--4c-font-family-heading);
font-weight: var(--4c-font-weight-heading);
font-size: 72px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--4c-text-primary);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--4c-font-family);
color: var(--4c-text-primary);
margin: 0 0 var(--4c-space-4);
}
.h1-4c { font-size: 28px; font-weight: 700; }
.h2-4c { font-size: 22px; font-weight: 700; }
.h3-4c { font-size: 18px; font-weight: 600; }
.h4-4c { font-size: 15px; font-weight: 600; }
.text-secondary-4c { color: var(--4c-text-secondary); }
.text-muted-4c { color: var(--4c-text-muted); font-size: 12px; }
a {
color: var(--4c-link);
text-decoration: none;
}
a:hover {
color: var(--4c-link-hover);
text-decoration: underline;
}
/* ==============================================================
BUTTONS
============================================================== */
.btn-4c {
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--4c-btn-padding-md);
font-family: var(--4c-font-family);
font-size: var(--4c-btn-font-size-md);
font-weight: var(--4c-btn-font-weight);
letter-spacing: var(--4c-btn-letter-spacing);
border: 1px solid transparent;
border-radius: var(--4c-btn-radius);
transition: var(--4c-btn-transition);
cursor: pointer;
text-decoration: none;
line-height: 1.4;
white-space: nowrap;
}
.btn-4c:disabled,
.btn-4c.is-disabled {
opacity: var(--4c-btn-disabled-opacity);
cursor: not-allowed;
pointer-events: none;
}
.btn-4c:focus-visible {
outline: 2px solid var(--4c-border-focus);
outline-offset: 2px;
}
/* Sizes */
.btn-4c-sm { padding: var(--4c-btn-padding-sm); font-size: var(--4c-btn-font-size-sm); }
.btn-4c-lg { padding: var(--4c-btn-padding-lg); font-size: var(--4c-btn-font-size-lg); }
/* Primary */
.btn-4c-primary {
background: var(--4c-btn-primary-bg);
color: var(--4c-btn-primary-text);
}
.btn-4c-primary:hover:not(:disabled):not(.is-disabled) {
background: var(--4c-btn-primary-bg-hover);
color: var(--4c-btn-primary-text);
text-decoration: none;
}
/* Secondary */
.btn-4c-secondary {
background: var(--4c-btn-secondary-bg);
color: var(--4c-btn-secondary-text);
border-color: var(--4c-btn-secondary-border);
}
.btn-4c-secondary:hover:not(:disabled):not(.is-disabled) {
background: var(--4c-btn-secondary-bg-hover);
color: var(--4c-btn-secondary-text-hover);
text-decoration: none;
}
/* Ghost */
.btn-4c-ghost {
background: var(--4c-btn-ghost-bg);
color: var(--4c-btn-ghost-text);
}
.btn-4c-ghost:hover:not(:disabled):not(.is-disabled) {
background: var(--4c-btn-ghost-bg-hover);
color: var(--4c-btn-ghost-text-hover);
text-decoration: none;
}
/* Danger */
.btn-4c-danger {
background: var(--4c-btn-danger-bg);
color: var(--4c-btn-danger-text);
}
.btn-4c-danger:hover:not(:disabled):not(.is-disabled) {
background: var(--4c-btn-danger-bg-hover);
color: var(--4c-btn-danger-text);
text-decoration: none;
}
/* On-dark — for ghost buttons placed on the navy navbar/sidenav */
.btn-4c-on-dark {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.3);
}
.btn-4c-on-dark:hover:not(:disabled):not(.is-disabled) {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
/* Link-style */
.btn-4c-link {
background: transparent;
color: var(--4c-btn-link-text);
border-color: transparent;
padding-left: 0;
padding-right: 0;
}
.btn-4c-link:hover:not(:disabled):not(.is-disabled) {
color: var(--4c-btn-link-text-hover);
text-decoration: underline;
}
/* ==============================================================
FORMS
============================================================== */
.input-4c,
.select-4c,
.textarea-4c {
display: block;
width: 100%;
box-sizing: border-box;
padding: var(--4c-input-padding);
font-family: var(--4c-font-family);
font-size: var(--4c-input-font-size);
color: var(--4c-input-text);
background: var(--4c-input-bg);
border: 1px solid var(--4c-input-border);
border-radius: var(--4c-input-radius);
transition: var(--4c-input-transition);
outline: none;
-webkit-appearance: none;
appearance: none;
}
.input-4c::placeholder,
.textarea-4c::placeholder {
color: var(--4c-input-placeholder);
}
.input-4c:focus,
.select-4c:focus,
.textarea-4c:focus {
border-color: var(--4c-input-border-focus);
box-shadow: var(--4c-input-shadow-focus);
}
.input-4c:disabled,
.select-4c:disabled,
.textarea-4c:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--4c-surface-sunken);
}
/* Chevron stroke is mid-slate — legible on both light and dark input backgrounds */
.select-4c {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
.textarea-4c {
resize: vertical;
min-height: 80px;
}
/* Label */
.label-4c {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--4c-text-secondary);
margin-bottom: 5px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* Field group */
.field-4c {
margin-bottom: var(--4c-space-4);
}
/* Helper / error text */
.field-hint-4c {
font-size: 11px;
color: var(--4c-text-muted);
margin-top: 4px;
}
.field-error-4c {
font-size: 11px;
color: light-dark(#ed1c24, #ff8087);
margin-top: 4px;
}
.input-4c.is-error {
border-color: light-dark(#ed1c24, #ff8087);
}
.input-4c.is-error:focus {
box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.15);
}
/* Checkbox & radio */
.check-4c,
.radio-4c {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
cursor: pointer;
color: var(--4c-text-primary);
}
.check-4c input[type="checkbox"],
.radio-4c input[type="radio"] {
width: 15px;
height: 15px;
accent-color: light-dark(#17478e, #3c85c7);
cursor: pointer;
flex-shrink: 0;
}
/* ==============================================================
CARDS
============================================================== */
.card-4c {
background: var(--4c-surface-raised);
border: 1px solid var(--4c-card-border);
border-radius: var(--4c-card-radius);
box-shadow: var(--4c-card-shadow);
padding: var(--4c-card-padding);
}
/* Flush card — no padding; inner sections handle their own spacing */
.card-4c-flush {
padding: 0;
overflow: visible;
}
.card-4c-hover {
transition: box-shadow 0.2s, transform 0.2s;
cursor: pointer;
}
.card-4c-hover:hover {
box-shadow: var(--4c-card-shadow-hover);
transform: translateY(-1px);
}
.card-4c-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--4c-space-4);
padding-bottom: var(--4c-space-4);
border-bottom: 1px solid var(--4c-border);
}
.card-4c-title {
font-size: 14px;
font-weight: 600;
color: var(--4c-text-primary);
margin: 0;
}
/* Module card — navigation tile style */
.module-card-4c {
background: var(--4c-blue-card);
border: 1px solid var(--4c-blue-card-border);
border-radius: var(--4c-card-radius);
padding: var(--4c-space-6);
color: #ffffff;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
text-align: center;
}
.module-card-4c:hover {
background: var(--4c-blue-dark-navy);
transform: translateY(-2px);
}
.module-card-4c .module-icon {
font-size: 28px;
margin-bottom: var(--4c-space-2);
}
.module-card-4c .module-name {
font-size: 13px;
font-weight: 600;
opacity: 0.95;
}
/* ==============================================================
BADGES
============================================================== */
.badge-4c {
display: inline-flex;
align-items: center;
padding: var(--4c-badge-padding);
font-size: var(--4c-badge-font-size);
font-weight: var(--4c-badge-font-weight);
border-radius: var(--4c-badge-radius);
line-height: 1.4;
white-space: nowrap;
}
.badge-4c-blue { background: light-dark(#dbeafe, rgba(59, 130, 246, 0.2)); color: light-dark(#1e40af, #93c5fd); }
.badge-4c-green { background: light-dark(#dcfce7, rgba(34, 197, 94, 0.18)); color: light-dark(#166534, #86efac); }
.badge-4c-red { background: light-dark(#fee2e2, rgba(239, 68, 68, 0.18)); color: light-dark(#991b1b, #fca5a5); }
.badge-4c-yellow { background: light-dark(#fef9c3, rgba(245, 158, 11, 0.18)); color: light-dark(#854d0e, #fcd34d); }
.badge-4c-purple { background: light-dark(#f3e8ff, rgba(168, 85, 247, 0.2)); color: light-dark(#6b21a8, #d8b4fe); }
.badge-4c-gray { background: light-dark(#f1f2f2, rgba(148, 163, 184, 0.16)); color: light-dark(#414042, #cbd5e1); }
.badge-4c-teal { background: light-dark(#ccfbf1, rgba(45, 212, 191, 0.16)); color: light-dark(#115e59, #5eead4); }
/* ==============================================================
NAVBAR
============================================================== */
:root {
--4c-navbar-height: 56px;
}
.navbar-4c {
background: light-dark(#17478e, #16223a);
padding: 0 var(--4c-space-6);
height: var(--4c-navbar-height);
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
position: sticky;
top: 0;
z-index: 100;
}
/* Hamburger — only shown on mobile (see responsive app-shell block below).
Place it as the first child of .navbar-4c. */
.navbar-4c-toggle {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-right: 4px;
background: rgba(255, 255, 255, 0.12);
border: none;
border-radius: 6px;
color: #ffffff;
font-size: 18px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
transition: background 0.12s;
}
.navbar-4c-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.navbar-4c-brand {
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.navbar-4c-brand:hover { color: #ffffff; text-decoration: none; }
.navbar-4c-logo {
width: 28px;
height: 28px;
background: rgba(255,255,255,0.2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 13px;
}
.navbar-4c-nav {
display: flex;
align-items: center;
gap: var(--4c-space-1);
list-style: none;
margin: 0;
padding: 0;
}
.navbar-4c-nav a {
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
border-radius: 5px;
transition: background 0.15s, color 0.15s;
}
.navbar-4c-nav a:hover,
.navbar-4c-nav a.is-active {
background: rgba(255,255,255,0.15);
color: #ffffff;
text-decoration: none;
}
.navbar-4c-actions {
display: flex;
align-items: center;
gap: var(--4c-space-3);
}
/* ==============================================================
ALERTS / BANNERS
============================================================== */
.alert-4c {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: 6px;
font-size: 13px;
line-height: 1.5;
border-left: 3px solid transparent;
}
.alert-4c-info { background: light-dark(#eff6ff, rgba(59, 130, 246, 0.12)); border-color: #3b82f6; color: light-dark(#1e40af, #93c5fd); }
.alert-4c-success { background: light-dark(#f0fdf4, rgba(34, 197, 94, 0.1)); border-color: #22c55e; color: light-dark(#166534, #86efac); }
.alert-4c-warning { background: light-dark(#fffbeb, rgba(245, 158, 11, 0.1)); border-color: #f59e0b; color: light-dark(#92400e, #fcd34d); }
.alert-4c-danger { background: light-dark(#fff1f2, rgba(237, 28, 36, 0.12)); border-color: var(--4c-chart-alert-red); color: light-dark(#9f1239, #fda4af); }
/* ==============================================================
TABLE
============================================================== */
.table-4c {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.table-4c th {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--4c-text-secondary);
padding: 10px 14px;
border-bottom: 2px solid var(--4c-border);
white-space: nowrap;
}
.table-4c td {
padding: 10px 14px;
border-bottom: 1px solid var(--4c-border);
color: var(--4c-text-primary);
vertical-align: middle;
}
.table-4c tbody tr:hover td {
background: var(--4c-surface-hover);
}
.table-4c tbody tr:last-child td {
border-bottom: none;
}
/* ==============================================================
SIDENAV
============================================================== */
/*
Solid-blue left sidebar — matches the Clarity/Symphony light theme nav.
Background: --4c-blue-dark-navy (#17478e)
Markup pattern:
*/
:root {
/* Navy chrome deepens slightly in dark mode so it still reads as
elevated against the near-black page background */
--4c-sidenav-bg: light-dark(#17478e, #16223a);
--4c-sidenav-border: light-dark(#1e5aab, #25334c);
--4c-sidenav-text: #a0c5e8;
--4c-sidenav-text-active: #ffffff;
--4c-sidenav-hover-bg: rgba(255, 255, 255, 0.10);
--4c-sidenav-active-bg: rgba(255, 255, 255, 0.16);
--4c-sidenav-group-bg: light-dark(#163d85, #121b2c);
--4c-sidenav-sub-bg: var(--4c-sidenav-bg); /* flat — same blue as the sidebar, indented only */
--4c-sidenav-label-color: rgba(160, 197, 232, 0.55);
--4c-sidenav-width: 240px;
--4c-sidenav-width-collapsed: 60px;
}
.sidenav-4c {
display: flex;
flex-direction: column;
width: var(--4c-sidenav-width);
height: 100%;
background: var(--4c-sidenav-bg);
border-right: 1px solid var(--4c-sidenav-border);
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
}
.sidenav-4c::-webkit-scrollbar {
width: 4px;
}
.sidenav-4c::-webkit-scrollbar-track {
background: transparent;
}
.sidenav-4c::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
.sidenav-4c::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.28);
}
/* Brand / logo row */
.sidenav-4c-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 16px 14px;
border-bottom: 1px solid var(--4c-sidenav-border);
color: #ffffff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
flex-shrink: 0;
}
.sidenav-4c-brand:hover { color: #ffffff; text-decoration: none; }
.sidenav-4c-brand-logo {
width: 36px;
height: 36px;
flex-shrink: 0;
}
.sidenav-4c-brand-name {
line-height: 1.2;
}
.sidenav-4c-brand-sub {
display: block;
font-size: 10px;
font-weight: 400;
opacity: 0.7;
letter-spacing: 0.05em;
}
/* Section group */
.sidenav-4c-group {
padding: 16px 0 8px;
}
.sidenav-4c-group + .sidenav-4c-group {
border-top: 1px solid var(--4c-sidenav-border);
padding-top: 12px;
}
.sidenav-4c-group-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--4c-sidenav-label-color);
padding: 10px 16px 6px;
}
/* Collapsible group — add sidenav-4c-group-toggle to the label */
button.sidenav-4c-group-label {
display: flex;
align-items: center;
width: 100%;
background: transparent;
border: none;
cursor: pointer;
font-family: var(--4c-font-family);
text-align: left;
padding: 10px 16px;
transition: color 0.12s;
}
button.sidenav-4c-group-label:hover {
color: rgba(160, 197, 232, 0.9);
}
button.sidenav-4c-group-label .sidenav-4c-chevron {
margin-left: auto;
transition: transform 0.2s;
}
.sidenav-4c-group.is-open > button.sidenav-4c-group-label .sidenav-4c-chevron {
transform: rotate(90deg);
}
.sidenav-4c-group-items {
max-height: 0;
overflow: hidden;
transition: max-height 0.22s ease;
}
.sidenav-4c-group.is-open .sidenav-4c-group-items {
max-height: 600px;
}
/* Nav list */
.sidenav-4c-list {
list-style: none;
margin: 0;
padding: 0;
}
.sidenav-4c-item {
margin: 0;
}
/* Top-level link / toggle button */
.sidenav-4c-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
padding: 9px 16px;
font-size: 13px;
font-weight: 500;
color: var(--4c-sidenav-text);
background: transparent;
border: none;
border-radius: 0;
cursor: pointer;
text-decoration: none;
transition: background 0.12s, color 0.12s;
text-align: left;
font-family: var(--4c-font-family);
letter-spacing: 0;
line-height: 1.4;
}
.sidenav-4c-link:hover {
background: var(--4c-sidenav-hover-bg);
color: var(--4c-sidenav-text-active);
text-decoration: none;
}
.sidenav-4c-link.is-active {
background: var(--4c-sidenav-active-bg);
color: var(--4c-sidenav-text-active);
font-weight: 600;
}
.sidenav-4c-link-icon {
width: 18px;
text-align: center;
flex-shrink: 0;
opacity: 0.75;
font-size: 15px;
}
.sidenav-4c-link.is-active .sidenav-4c-link-icon {
opacity: 1;
}
/* Named icon classes — use on .sidenav-4c-link-icon to get a kit-defined glyph */
.icon-4c-search::before { content: '⌕'; }
.icon-4c-dollar::before { content: '$'; }
.icon-4c-diamond::before { content: '◈'; }
.icon-4c-check::before { content: '✓'; }
.icon-4c-list::before { content: '≣'; }
.icon-4c-alert::before { content: '◆'; }
.icon-4c-settings::before { content: '⚙'; }
.icon-4c-home::before { content: '⌂'; }
.icon-4c-user::before { content: '👤'; }
.icon-4c-chart::before { content: '📊'; }
.icon-4c-lock::before { content: '🔒'; }
/* Expand chevron */
.sidenav-4c-chevron {
margin-left: auto;
font-size: 11px;
opacity: 0.6;
transition: transform 0.2s;
}
.sidenav-4c-expandable.is-open > .sidenav-4c-link .sidenav-4c-chevron {
transform: rotate(90deg);
}
/* Sub-nav */
.sidenav-4c-sub {
list-style: none;
margin: 0;
padding: 0;
background: var(--4c-sidenav-sub-bg);
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease;
}
.sidenav-4c-expandable.is-open .sidenav-4c-sub {
max-height: 400px;
}
.sidenav-4c-sublink {
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
padding: 8px 16px 8px 44px;
font-size: 12px;
color: var(--4c-sidenav-text);
text-decoration: none;
transition: background 0.12s, color 0.12s;
}
.sidenav-4c-sublink:hover {
background: var(--4c-sidenav-hover-bg);
color: var(--4c-sidenav-text-active);
text-decoration: none;
}
.sidenav-4c-sublink.is-active {
color: var(--4c-sidenav-text-active);
font-weight: 600;
}
/* Footer row — margin-top:auto pins it when content is short;
sticky keeps it visible when content overflows and scrolls */
.sidenav-4c-footer {
margin-top: auto;
position: sticky;
bottom: 0;
padding: 12px 16px;
border-top: 1px solid var(--4c-sidenav-border);
background: var(--4c-sidenav-bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-shrink: 0;
}
.sidenav-4c-footer-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: var(--4c-sidenav-text);
background: var(--4c-sidenav-hover-bg);
border: 1px solid var(--4c-sidenav-border);
border-radius: 5px;
cursor: pointer;
font-family: var(--4c-font-family);
transition: background 0.12s, color 0.12s;
}
.sidenav-4c-footer-btn:hover {
background: var(--4c-sidenav-active-bg);
color: #ffffff;
}
.sidenav-4c:not(.has-expandable) .js-expand-all {
display: none;
}
/* Collapsed state */
.sidenav-4c.is-collapsed {
width: var(--4c-sidenav-width-collapsed);
}
.sidenav-4c.is-collapsed .sidenav-4c-group-label,
.sidenav-4c.is-collapsed .sidenav-4c-link span:not(.sidenav-4c-link-icon),
.sidenav-4c.is-collapsed .sidenav-4c-chevron,
.sidenav-4c.is-collapsed .sidenav-4c-brand-name,
.sidenav-4c.is-collapsed .sidenav-4c-footer-btn .btn-label {
display: none;
}
.sidenav-4c.is-collapsed .sidenav-4c-link {
justify-content: center;
padding: 10px;
gap: 0;
}
.sidenav-4c.is-collapsed .sidenav-4c-link-icon {
width: auto;
text-align: center;
}
/* Sub-items stay visible when parent was open — shown as centered dots */
.sidenav-4c.is-collapsed .sidenav-4c-sublink {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 10px;
font-size: 0;
color: transparent;
text-decoration: none;
}
.sidenav-4c.is-collapsed .sidenav-4c-sublink::before {
content: '•';
font-size: 14px;
color: var(--4c-sidenav-text);
opacity: 0.45;
display: block;
}
.sidenav-4c.is-collapsed .sidenav-4c-sublink:hover::before {
opacity: 0.9;
}
.sidenav-4c.is-collapsed .sidenav-4c-sublink.is-active::before {
opacity: 1;
color: var(--4c-sidenav-text-active);
}
.sidenav-4c.is-collapsed .sidenav-4c-group {
padding: 4px 0;
}
.sidenav-4c.is-collapsed .sidenav-4c-group + .sidenav-4c-group {
padding-top: 4px;
}
.sidenav-4c.is-collapsed .sidenav-4c-footer {
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 8px 4px;
gap: 4px;
}
.sidenav-4c.is-collapsed .sidenav-4c-footer-btn {
padding: 6px;
min-width: 32px;
justify-content: center;
}
/* --------------------------------------------------------------
App shell — responsive primary navigation (opt-in)
--------------------------------------------------------------
Add .sidenav-4c-app to the page's primary sidebar to get:
• desktop : sticky, full-height beneath the navbar
• mobile : off-canvas drawer, toggled by the .is-open class
Pair it with a .navbar-4c-toggle (hamburger) in the navbar and a
.sidenav-4c-scrim backdrop. A few lines of JS toggle .is-open on
the sidebar and the scrim together:
☰
…
-------------------------------------------------------------- */
/* Standalone sticky sidebar (e.g. design system showcase) */
/* --4c-sidenav-offset-top controls where the sidebar anchors from the top.
Defaults to the navbar height. Set to 0 if there is no top navbar. */
.sidenav-4c-app {
--4c-sidenav-offset-top: var(--4c-navbar-height, 56px);
position: sticky;
top: var(--4c-sidenav-offset-top);
height: calc(100vh - var(--4c-sidenav-offset-top));
}
/* Inside app-shell the shell itself handles the offset */
.app-shell-4c > .sidenav-4c-app {
position: sticky;
top: 0;
height: 100%;
}
.sidenav-4c-scrim { display: none; }
@media (max-width: 768px) {
.navbar-4c-toggle { display: inline-flex; }
.sidenav-4c-app {
position: fixed;
top: var(--4c-navbar-height);
left: 0;
z-index: 95;
transform: translateX(-100%);
transition: transform 0.2s ease;
box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
}
.sidenav-4c-app.is-open { transform: translateX(0); }
/* Higher-specificity rule from app-shell context must also be overridden */
.app-shell-4c > .sidenav-4c-app {
position: fixed;
top: var(--4c-navbar-height);
left: 0;
height: calc(100vh - var(--4c-navbar-height));
}
/* A collapsed icon-rail makes no sense in a drawer — restore full width */
.sidenav-4c-app.is-collapsed { width: var(--4c-sidenav-width); }
.sidenav-4c-scrim {
display: block;
position: fixed;
inset: var(--4c-navbar-height) 0 0 0;
z-index: 94;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.sidenav-4c-scrim.is-open { opacity: 1; pointer-events: auto; }
}
/* ==============================================================
ACCORDION
============================================================== */
/*
Markup:
Zero-config: 4c-ui-kit.js toggles items when a header is clicked.
(Do NOT add your own onclick toggle — it double-fires against the
kit handler and the item never opens.)
Variants: accordion-4c-bordered
*/
:root {
--4c-accordion-border: var(--4c-border);
--4c-accordion-header-bg: light-dark(#f1f6f6, #27303f);
--4c-accordion-header-bg-hover: light-dark(#e8f0f8, #2f3a4a);
--4c-accordion-header-bg-active: light-dark(#17478e, #1e5aab);
--4c-accordion-header-text: var(--4c-text-primary);
--4c-accordion-header-text-active: #ffffff;
--4c-accordion-body-bg: var(--4c-surface-raised);
--4c-accordion-body-padding: 16px 20px;
--4c-accordion-radius: 6px;
}
.accordion-4c {
border-radius: var(--4c-accordion-radius);
overflow: hidden;
}
.accordion-4c-item + .accordion-4c-item {
border-top: 1px solid var(--4c-accordion-border);
}
/* Header */
.accordion-4c-header {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 100%;
padding: 13px 20px;
font-family: var(--4c-font-family);
font-size: 13px;
font-weight: 600;
color: var(--4c-accordion-header-text);
background: var(--4c-accordion-header-bg);
border: none;
cursor: pointer;
text-align: left;
transition: background 0.15s, color 0.15s;
}
.accordion-4c-header:hover {
background: var(--4c-accordion-header-bg-hover);
}
.accordion-4c-item.is-open > .accordion-4c-header {
background: var(--4c-accordion-header-bg-active);
color: var(--4c-accordion-header-text-active);
}
/* Chevron */
.accordion-4c-icon {
flex-shrink: 0;
font-size: 12px;
transition: transform 0.2s;
opacity: 0.7;
}
.accordion-4c-item.is-open > .accordion-4c-header .accordion-4c-icon {
transform: rotate(90deg);
opacity: 1;
}
/* Body */
.accordion-4c-body {
max-height: 0;
overflow: hidden;
background: var(--4c-accordion-body-bg);
transition: max-height 0.25s ease, padding 0.2s ease;
padding: 0 20px;
font-size: 13px;
color: var(--4c-text-secondary);
line-height: 1.6;
}
.accordion-4c-body p {
margin: 0;
}
.accordion-4c-item.is-open > .accordion-4c-body {
max-height: 500px;
padding: var(--4c-accordion-body-padding);
}
/* ==============================================================
TABS
============================================================== */
/*
Markup:
Tab One
Tab Two
…
*/
.tabs-4c {
display: flex;
border-bottom: 2px solid var(--4c-border);
gap: 0;
margin-bottom: 0;
}
.tab-4c {
padding: 10px 18px;
font-family: var(--4c-font-family);
font-size: 13px;
font-weight: 600;
color: var(--4c-text-muted);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.tab-4c:hover {
color: var(--4c-text-secondary);
}
.tab-4c.is-active {
color: var(--4c-brand-accent);
border-bottom-color: var(--4c-brand-accent);
}
.tab-panel-4c {
display: none;
padding: var(--4c-space-5) 0;
}
.tab-panel-4c.is-active {
display: block;
}
/* ==============================================================
MODAL / DIALOG
============================================================== */
/*
Markup:
*/
.modal-4c-backdrop {
display: none;
position: fixed;
inset: 0;
background: light-dark(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65));
z-index: 1000;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal-4c-backdrop.is-open {
display: flex;
}
.modal-4c {
background: var(--4c-surface-raised);
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
width: 100%;
max-width: 520px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: modal-4c-in 0.18s ease;
}
@keyframes modal-4c-in {
from { opacity: 0; transform: translateY(-12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-4c-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 16px;
border-bottom: 1px solid var(--4c-border);
flex-shrink: 0;
}
.modal-4c-title {
font-size: 16px;
font-weight: 700;
color: var(--4c-text-primary);
}
.modal-4c-close {
background: transparent;
border: none;
cursor: pointer;
font-size: 16px;
color: var(--4c-text-muted);
line-height: 1;
padding: 4px;
border-radius: 4px;
transition: color 0.12s, background 0.12s;
}
.modal-4c-close:hover {
color: var(--4c-text-primary);
background: var(--4c-surface-hover);
}
.modal-4c-body {
padding: 22px;
overflow-y: auto;
font-size: 13px;
color: var(--4c-text-secondary);
line-height: 1.6;
flex: 1;
}
.modal-4c-footer {
padding: 14px 22px;
border-top: 1px solid var(--4c-border);
display: flex;
justify-content: flex-end;
gap: var(--4c-space-3);
flex-shrink: 0;
background: var(--4c-surface-sunken);
}
/* ==============================================================
TOAST NOTIFICATIONS
============================================================== */
/*
Toasts are appended to a .toast-4c-region container (position:fixed, bottom-right).
Add .is-visible to show; remove to dismiss.
Markup:
*/
.toast-4c-region {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast-4c {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
min-width: 260px;
max-width: 380px;
pointer-events: all;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.2s, transform 0.2s;
}
.toast-4c.is-visible {
opacity: 1;
transform: translateX(0);
}
.toast-4c-success { background: #166534; color: #ffffff; }
.toast-4c-info { background: var(--4c-blue-dark-navy); color: #ffffff; }
.toast-4c-warning { background: #92400e; color: #ffffff; }
.toast-4c-danger { background: #991b1b; color: #ffffff; }
.toast-4c-icon {
font-size: 15px;
flex-shrink: 0;
}
.toast-4c-msg {
flex: 1;
}
.toast-4c-dismiss {
background: transparent;
border: none;
color: rgba(255,255,255,0.7);
cursor: pointer;
font-size: 14px;
padding: 2px 4px;
line-height: 1;
border-radius: 3px;
flex-shrink: 0;
transition: color 0.12s;
}
.toast-4c-dismiss:hover { color: #ffffff; }
/* ==============================================================
TOGGLE SWITCH
============================================================== */
/*
Markup:
Enable feature
*/
.toggle-4c {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: var(--4c-text-primary);
}
.toggle-4c input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-4c-track {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
background: light-dark(#d1d3d4, #435065);
border-radius: 9999px;
transition: background 0.2s;
flex-shrink: 0;
}
.toggle-4c input:checked + .toggle-4c-track {
background: light-dark(#17478e, #3c85c7);
}
.toggle-4c-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.toggle-4c input:checked + .toggle-4c-track .toggle-4c-thumb {
transform: translateX(16px);
}
.toggle-4c input:disabled + .toggle-4c-track {
opacity: 0.4;
}
/* ==============================================================
BREADCRUMBS
============================================================== */
.breadcrumb-4c {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
}
.breadcrumb-4c li {
display: flex;
align-items: center;
}
.breadcrumb-4c li + li::before {
content: "/";
color: var(--4c-text-muted);
margin: 0 8px;
font-weight: 400;
}
.breadcrumb-4c a {
color: var(--4c-link);
text-decoration: none;
transition: color 0.12s;
}
.breadcrumb-4c a:hover {
color: var(--4c-link-hover);
text-decoration: underline;
}
.breadcrumb-4c li:last-child span {
color: var(--4c-text-muted);
font-weight: 500;
}
/* ==============================================================
PAGINATION
============================================================== */
.pagination-4c {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.pagination-4c a,
.pagination-4c button,
.pagination-4c span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 6px;
font-family: var(--4c-font-family);
font-size: 13px;
font-weight: 500;
color: var(--4c-text-secondary);
background: transparent;
border: 1px solid transparent;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pagination-4c a:hover,
.pagination-4c button:hover {
background: var(--4c-surface-hover);
color: var(--4c-text-primary);
text-decoration: none;
border-color: var(--4c-border);
}
.pagination-4c .is-active a,
.pagination-4c .is-active button {
background: var(--4c-blue-dark-navy);
color: #ffffff;
border-color: var(--4c-blue-dark-navy);
}
.pagination-4c .is-disabled a,
.pagination-4c .is-disabled button {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.pagination-4c span.ellipsis {
border-color: transparent;
cursor: default;
}
/* ==============================================================
PROGRESS BAR
============================================================== */
:root {
--4c-progress-height: 8px;
--4c-progress-radius: 9999px;
--4c-progress-bg: var(--4c-border);
--4c-progress-fill: light-dark(#17478e, #3c85c7);
}
.progress-4c {
width: 100%;
height: var(--4c-progress-height);
background: var(--4c-progress-bg);
border-radius: var(--4c-progress-radius);
overflow: hidden;
}
.progress-4c-fill {
height: 100%;
background: var(--4c-progress-fill);
border-radius: var(--4c-progress-radius);
transition: width 0.4s ease;
}
.progress-4c-fill.progress-4c-success { background: #16a34a; }
.progress-4c-fill.progress-4c-warning { background: #d97706; }
.progress-4c-fill.progress-4c-danger { background: #dc2626; }
/* Labeled progress row */
.progress-4c-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.progress-4c-row:last-child { margin-bottom: 0; }
.progress-4c-label {
font-size: 12px;
font-weight: 600;
color: var(--4c-text-secondary);
width: 120px;
flex-shrink: 0;
}
.progress-4c-value {
font-size: 12px;
font-weight: 600;
color: var(--4c-text-muted);
width: 36px;
text-align: right;
flex-shrink: 0;
}
/* ==============================================================
SPINNER / LOADER
============================================================== */
.spinner-4c {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--4c-border);
border-top-color: var(--4c-brand-accent);
border-radius: 50%;
animation: spin-4c 0.7s linear infinite;
flex-shrink: 0;
}
.spinner-4c-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-4c-lg { width: 32px; height: 32px; border-width: 3px; }
/* On-dark — for spinners inside a filled/primary button */
.spinner-4c-on-dark {
border-color: rgba(255, 255, 255, 0.35);
border-top-color: #ffffff;
}
@keyframes spin-4c {
to { transform: rotate(360deg); }
}
/* ==============================================================
AVATAR
============================================================== */
.avatar-4c {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 700;
font-family: var(--4c-font-family);
background: var(--4c-blue-dark-navy);
color: #ffffff;
flex-shrink: 0;
overflow: hidden;
font-size: 13px;
width: 36px;
height: 36px;
}
.avatar-4c img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.avatar-4c-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-4c-lg { width: 52px; height: 52px; font-size: 18px; }
.avatar-4c-green { background: #166534; }
.avatar-4c-teal { background: var(--4c-chart-teal); }
.avatar-4c-purple { background: var(--4c-chart-purple); }
.avatar-4c-orange { background: #c2410c; }
.avatar-4c-gray { background: var(--4c-neutral-grid); color: var(--4c-text-primary); }
/* Avatar stack */
.avatar-4c-stack {
display: flex;
}
.avatar-4c-stack .avatar-4c {
margin-left: -8px;
border: 2px solid var(--4c-surface-raised);
}
.avatar-4c-stack .avatar-4c:first-child {
margin-left: 0;
}
/* ==============================================================
EMPTY STATE
============================================================== */
.empty-4c {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
}
.empty-4c-icon {
font-size: 40px;
margin-bottom: 16px;
opacity: 0.4;
}
.empty-4c-title {
font-size: 16px;
font-weight: 700;
color: var(--4c-text-primary);
margin: 0 0 6px;
}
.empty-4c-desc {
font-size: 13px;
color: var(--4c-text-muted);
margin: 0 0 20px;
max-width: 320px;
line-height: 1.5;
}
/* ==============================================================
STEPPER / WIZARD
============================================================== */
/*
Markup:
…
…
…
*/
.stepper-4c {
display: flex;
align-items: flex-start;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.stepper-4c-step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
text-align: center;
}
.stepper-4c-step + .stepper-4c-step::before {
content: "";
position: absolute;
top: 14px;
right: 50%;
width: 100%;
height: 2px;
background: var(--4c-border);
z-index: 0;
}
.stepper-4c-step.is-done + .stepper-4c-step::before,
.stepper-4c-step.is-active + .stepper-4c-step::before {
background: var(--4c-blue-dark-navy);
}
.stepper-4c-node {
width: 28px;
height: 28px;
border-radius: 50%;
background: light-dark(#e5e6e6, #27303f);
border: 2px solid var(--4c-border);
color: var(--4c-text-muted);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.stepper-4c-step.is-done .stepper-4c-node {
background: var(--4c-blue-dark-navy);
border-color: var(--4c-blue-dark-navy);
color: #ffffff;
}
.stepper-4c-step.is-active .stepper-4c-node {
background: var(--4c-surface-raised);
border-color: var(--4c-brand-accent);
color: var(--4c-brand-accent);
box-shadow: 0 0 0 3px light-dark(rgba(23, 71, 142, 0.15), rgba(111, 167, 218, 0.25));
}
.stepper-4c-label {
font-size: 11px;
font-weight: 600;
color: var(--4c-text-muted);
margin-top: 6px;
line-height: 1.3;
}
.stepper-4c-step.is-active .stepper-4c-label {
color: var(--4c-brand-accent);
}
.stepper-4c-step.is-done .stepper-4c-label {
color: var(--4c-text-secondary);
}
/* ==============================================================
TOOLTIP
============================================================== */
/*
CSS-only tooltip via data-tip attribute.
Markup:
Hover me
*/
.tip-4c {
position: relative;
cursor: default;
}
.tip-4c::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: light-dark(#1e293b, #435065);
color: #ffffff;
font-family: var(--4c-font-family);
font-size: 11px;
font-weight: 500;
padding: 5px 10px;
border-radius: 5px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 500;
}
.tip-4c::before {
content: "";
position: absolute;
bottom: calc(100% + 3px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: light-dark(#1e293b, #435065);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 500;
}
.tip-4c:hover::after,
.tip-4c:hover::before {
opacity: 1;
}
/* Tooltip — bottom position */
.tip-4c-bottom::after {
top: calc(100% + 8px);
bottom: auto;
}
.tip-4c-bottom::before {
top: calc(100% + 3px);
bottom: auto;
border-top-color: transparent;
border-bottom-color: light-dark(#1e293b, #435065);
}
/* ==============================================================
SEARCH INPUT
============================================================== */
.search-4c {
position: relative;
display: block;
}
.search-4c-input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px 12px 8px 36px;
font-family: var(--4c-font-family);
font-size: 13px;
color: var(--4c-input-text);
background: var(--4c-input-bg);
border: 1px solid var(--4c-input-border);
border-radius: var(--4c-input-radius);
transition: var(--4c-input-transition);
outline: none;
-webkit-appearance: none;
appearance: none;
}
.search-4c-input::placeholder { color: var(--4c-input-placeholder); }
.search-4c-input:focus {
border-color: var(--4c-input-border-focus);
box-shadow: var(--4c-input-shadow-focus);
}
.search-4c::before {
content: "⌕";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--4c-text-muted);
pointer-events: none;
line-height: 1;
}
/* ==============================================================
DROPDOWN MENU
============================================================== */
/*
Markup (zero-config: 4c-ui-kit.js opens on trigger click and closes on
outside click — do NOT add your own onclick toggle, it double-fires
against the kit handler and the menu never opens):
Actions ▾
*/
.dropdown-4c {
position: relative;
display: inline-block;
}
.dropdown-4c-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 160px;
background: var(--4c-surface-raised);
border: 1px solid var(--4c-border);
border-radius: 7px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
list-style: none;
margin: 0;
padding: 4px;
z-index: 1000;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 0.15s, transform 0.15s;
}
/* Right-align menu for end-of-row dropdowns */
.dropdown-4c-menu-right { left: auto; right: 0; }
.dropdown-4c.is-open .dropdown-4c-menu {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.dropdown-4c-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
font-family: var(--4c-font-family);
font-size: 13px;
color: var(--4c-text-primary);
text-decoration: none;
border-radius: 5px;
cursor: pointer;
background: transparent;
border: none;
text-align: left;
transition: background 0.12s;
}
.dropdown-4c-item:hover {
background: var(--4c-surface-hover);
color: var(--4c-text-primary);
text-decoration: none;
}
.dropdown-4c-item-danger {
color: var(--4c-danger-text);
}
.dropdown-4c-item-danger:hover {
background: var(--4c-danger-tint);
color: var(--4c-danger-text-strong);
}
.dropdown-4c-divider {
height: 1px;
background: var(--4c-border);
margin: 4px 0;
}
/* Close dropdown when clicking outside — handled by JS */
/* ==============================================================
STAT / KPI BLOCK
============================================================== */
.stat-4c {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-4c-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--4c-text-muted);
}
.stat-4c-value {
font-size: 36px;
font-weight: 700;
line-height: 1;
color: var(--4c-brand-accent);
letter-spacing: -0.02em;
}
.stat-4c-value-sm {
font-size: 24px;
}
/* Unit suffix inside a value, e.g. the "%" or "days" — scales with the value */
.stat-4c-unit {
font-size: 0.5em;
font-weight: 400;
}
.stat-4c-delta {
font-size: 12px;
font-weight: 600;
color: var(--4c-text-muted);
display: flex;
align-items: center;
gap: 4px;
}
.stat-4c-delta.is-up { color: light-dark(#166534, #86efac); }
.stat-4c-delta.is-down { color: light-dark(#991b1b, #fca5a5); }
/* ==============================================================
DIVIDER / UTILITY
============================================================== */
.divider-4c {
border: none;
border-top: 1px solid var(--4c-border);
margin: var(--4c-space-6) 0;
}
.surface-4c { background: var(--4c-surface-app); }
.surface-4c-light { background: var(--4c-surface-sunken); }
/* Flex helpers */
.stack-4c { display: flex; flex-direction: column; gap: var(--4c-space-4); }
.row-4c { display: flex; flex-wrap: wrap; align-items: center; gap: var(--4c-space-3); }
.row-4c-end { justify-content: flex-end; }
.row-4c-between { justify-content: space-between; }
.flex-1-4c { flex: 1; min-width: 0; }
/* Grid helpers — collapse to one column on narrow viewports */
.grid-4c { display: grid; gap: var(--4c-space-4); }
.grid-4c-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4c-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4c-4 { grid-template-columns: repeat(4, 1fr); }
.grid-4c-auto { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* Content + fixed sidebar panel — main column takes remaining space */
.grid-4c-with-panel { grid-template-columns: 1fr 300px; }
@media (max-width: 640px) {
.grid-4c-2, .grid-4c-3, .grid-4c-4, .grid-4c-with-panel { grid-template-columns: 1fr; }
}
/* Gap overrides — apply alongside row/stack/grid */
.gap-4c-1 { gap: var(--4c-space-1); }
.gap-4c-2 { gap: var(--4c-space-2); }
.gap-4c-3 { gap: var(--4c-space-3); }
.gap-4c-4 { gap: var(--4c-space-4); }
.gap-4c-6 { gap: var(--4c-space-6); }
/* Width / height helpers */
.w-full-4c { width: 100%; }
.h-full-4c { height: 100%; }
.maxw-4c-sm { max-width: 400px; }
.maxw-4c-md { max-width: 480px; }
/* Margin helpers */
.m-0-4c { margin: 0; }
.mt-0-4c { margin-top: 0; }
.mb-0-4c { margin-bottom: 0; }
.pb-0-4c { padding-bottom: 0; }
.mt-4c-2 { margin-top: var(--4c-space-2); }
.mt-4c-4 { margin-top: var(--4c-space-4); }
.mt-4c-6 { margin-top: var(--4c-space-6); }
.mb-4c-3 { margin-bottom: var(--4c-space-3); }
.mb-4c-4 { margin-bottom: var(--4c-space-4); }
/* Text utilities */
.text-muted { color: var(--4c-text-muted); }
.text-sm { font-size: 12px; }
.text-center-4c { text-align: center; }
.text-mono-4c { font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace; font-size: 12px; }
.text-muted-on-dark-4c { color: rgba(255, 255, 255, 0.6); }
/* ==============================================================
Logo utility classes
Drop one of these divs anywhere. Asset paths are relative to
this CSS file — keep the images/ folder next to 4c-ui-kit.css
wherever you host or vendor the kit.
============================================================== */
/* Full wordmark — blue, for light / white backgrounds */
.logo-4c {
display: inline-block;
background: url('images/4C_Blue_Digital_Health.png') left center / contain no-repeat;
width: 180px;
height: 44px;
}
/* Full wordmark — white, for dark / navy backgrounds */
.logo-4c-white {
display: inline-block;
background: url('images/4C_White_Digital_Health.png') left center / contain no-repeat;
width: 180px;
height: 44px;
}
/* Square mark — blue, for favicons / small slots */
.logo-4c-mark {
display: inline-block;
background: url('images/4C_Logo_Blue_Square.png') center / contain no-repeat;
width: 36px;
height: 36px;
}
/* Square mark — white */
.logo-4c-mark-white {
display: inline-block;
background: url('images/4C_Logo_White_Square.png') center / contain no-repeat;
width: 36px;
height: 36px;
}
/* Benefits Assurance wordmark — blue */
.logo-4c-benefits {
display: inline-block;
background: url('images/4C_Blue_Benefits_Assurance.png') left center / contain no-repeat;
width: 180px;
height: 44px;
}
/* Benefits Assurance wordmark — white */
.logo-4c-benefits-white {
display: inline-block;
background: url('images/4C_White_Benefits_Assurance.png') left center / contain no-repeat;
width: 180px;
height: 44px;
}
/* Dark mode: the blue logo variants swap to their white assets
automatically. light-dark() only accepts values, so the
image swap needs explicit dark-theme selectors — the one place
in the kit that can't ride the color-scheme switch. */
:root[data-4c-theme="dark"] .logo-4c { background-image: url('images/4C_White_Digital_Health.png'); }
:root[data-4c-theme="dark"] .logo-4c-mark { background-image: url('images/4C_Logo_White_Square.png'); }
:root[data-4c-theme="dark"] .logo-4c-benefits { background-image: url('images/4C_White_Benefits_Assurance.png'); }
@media (prefers-color-scheme: dark) {
:root[data-4c-theme="auto"] .logo-4c { background-image: url('images/4C_White_Digital_Health.png'); }
:root[data-4c-theme="auto"] .logo-4c-mark { background-image: url('images/4C_Logo_White_Square.png'); }
:root[data-4c-theme="auto"] .logo-4c-benefits { background-image: url('images/4C_White_Benefits_Assurance.png'); }
}
/* ==============================================================
THEME TOGGLE
Drop