/*
* Stratamize back-office — dashboard layer (03-dashboard)
* -------------------------------------------------------
* Composes var(--stz-*) tokens ONLY (02-brand/dist/stratamize-tokens.css).
* No raw colours, radii, shadows, fonts or durations: `node 02-brand/tools/brand-lint.mjs 03-dashboard`.
*
* Load order (see templates/_shell.html):
* 02-brand/fonts/dm-sans.css -> 02-brand/dist/stratamize-tokens.css -> vendor/bootstrap/bootstrap.css
* -> vendor/icons/css/icon.min.css -> 02-brand/css/stratamize-core.css -> THIS FILE
*
* Naming: .stzd-* = dashboard layout + widgets (this file owns them).
* Bootstrap classes (.btn, .table, .form-control, .dropdown-menu, .modal, .nav-tabs ...) are
* re-skinned here through their --bs-* variables so Bootstrap's JS keeps working.
* --_stzd-* = private custom properties (the --stz- namespace belongs to the spine).
*
* Theme: tokens flip on [data-theme] / prefers-color-scheme. Every --bs-* mapping is declared on
* `:root, [data-theme]` so light/dark islands (sidebar, invoice paper) re-resolve correctly.
*
* Sections
* 0 Private theme props + Bootstrap variable bridge
* 1 Base (body, type, links, focus, selection, scrollbars, utilities)
* 2 Shell (app grid, sidebar, rail, drawer, topbar, page header, content, footer)
* 3 Cards, KPI cards, chart cards
* 4 Buttons
* 5 Badges, status pills, sample tag, counters
* 6 Tables, sorting, bulk select, pagination, empty state
* 7 Forms (inputs, select, textarea, check, radio, switch, groups, validation, dropzone)
* 8 Tabs, pills / segmented control
* 9 Dropdowns, modals, offcanvas, toasts, alerts, tooltips, popovers
* 10 Progress, avatars, list groups, timeline / activity, breadcrumbs
* 11 Motifs (dash heading, outline numeral, arc decor), skeleton + spinner
* 12 Kanban, invoice document, auth screens, error page
* 13 Motion (all transitions/animations live here, gated by prefers-reduced-motion)
* 14 Print
*/
/* ============================================================================
0. PRIVATE THEME PROPS + BOOTSTRAP BRIDGE
========================================================================= */
/* Theme-dependent private values (raster filters etc. that are not colours). */
:root,
[data-theme="dark"] {
--_stzd-close-filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="light"] {
--_stzd-close-filter: none;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--_stzd-close-filter: none;
}
}
/* Bootstrap 5.3 variable bridge — re-declared on every themed subtree. */
:root,
[data-theme] {
--bs-font-sans-serif: var(--stz-font-body);
--bs-font-monospace: var(--stz-font-utility);
--bs-body-font-family: var(--stz-font-body);
--bs-body-font-size: var(--stz-size-small);
--bs-body-font-weight: var(--stz-weight-regular);
--bs-body-line-height: var(--stz-leading-dense);
--bs-body-color: var(--stz-text-muted);
--bs-body-color-rgb: var(--stz-text-muted-rgb);
--bs-body-bg: var(--stz-surface-canvas);
--bs-body-bg-rgb: var(--stz-surface-canvas-rgb);
--bs-emphasis-color: var(--stz-text);
--bs-emphasis-color-rgb: var(--stz-text-rgb);
--bs-secondary-color: var(--stz-text-muted);
--bs-secondary-bg: var(--stz-surface-sunken);
--bs-tertiary-color: var(--stz-text-muted);
--bs-tertiary-bg: var(--stz-surface-sunken);
--bs-heading-color: var(--stz-text);
--bs-link-color: var(--stz-text);
--bs-link-hover-color: var(--stz-link-hover);
--bs-code-color: var(--stz-accent-text);
--bs-highlight-color: var(--stz-text);
--bs-highlight-bg: var(--stz-accent-subtle);
--bs-border-width: var(--stz-border-width-hairline);
--bs-border-color: var(--stz-border-hairline);
--bs-border-color-translucent: var(--stz-border-hairline);
--bs-border-radius: var(--stz-radius-control);
--bs-border-radius-sm: var(--stz-radius-tag);
--bs-border-radius-lg: var(--stz-radius-card);
--bs-border-radius-xl: var(--stz-radius-card);
--bs-border-radius-xxl: var(--stz-radius-card);
--bs-border-radius-pill: var(--stz-radius-pill);
--bs-box-shadow: var(--stz-shadow-md);
--bs-box-shadow-sm: var(--stz-shadow-sm);
--bs-box-shadow-lg: var(--stz-shadow-xl);
--bs-box-shadow-inset: none;
--bs-primary: var(--stz-action-primary);
--bs-primary-rgb: var(--stz-accent-600-rgb);
--bs-white-rgb: var(--stz-white-rgb);
--bs-black-rgb: var(--stz-black-rgb);
--bs-focus-ring-width: var(--stz-focus-width);
--bs-focus-ring-color: var(--stz-focus);
--bs-form-valid-color: var(--stz-status-success);
--bs-form-valid-border-color: var(--stz-status-success);
--bs-form-invalid-color: var(--stz-status-danger);
--bs-form-invalid-border-color: var(--stz-status-danger);
color-scheme: inherit;
}
/* ============================================================================
1. BASE
========================================================================= */
.stzd-body {
margin: 0;
min-height: 100vh;
background-color: var(--stz-surface-canvas);
color: var(--stz-text-muted);
font-family: var(--stz-font-body);
font-size: var(--stz-size-small);
font-weight: var(--stz-weight-regular);
line-height: var(--stz-leading-dense);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Guard dashboard headings against marketing-scale type from shared CSS. */
.stzd-body :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--stz-font-display);
font-weight: var(--stz-weight-medium);
color: var(--stz-text);
letter-spacing: var(--stz-tracking-normal);
line-height: var(--stz-leading-dense);
margin-block: 0;
}
.stzd-body :where(h1) { font-size: var(--stz-size-h6); letter-spacing: var(--stz-tracking-tight); }
.stzd-body :where(h2) { font-size: var(--stz-size-lead); letter-spacing: var(--stz-tracking-heading); }
.stzd-body :where(h3) { font-size: var(--stz-size-title); }
.stzd-body :where(h4) { font-size: var(--stz-size-body-lg); }
.stzd-body :where(h5) { font-size: var(--stz-size-body-sm); }
.stzd-body :where(h6) { font-size: var(--stz-size-label); }
.stzd-body :where(p) { margin-block: 0 var(--stz-space-2); }
.stzd-body :where(a:not([class])) {
color: var(--stz-text);
text-decoration-color: var(--stz-border-default);
text-underline-offset: 3px;
}
.stzd-body :where(a:not([class])):hover {
color: var(--stz-link-hover);
text-decoration-color: currentColor;
}
/* One focus ring for everything interactive. */
.stzd-body :where(a, button, input, select, textarea, summary, [tabindex], .btn, .nav-link,
.page-link, .dropdown-item, .list-group-item-action, .form-check-input, .btn-close):focus-visible {
outline: var(--stz-focus-ring);
outline-offset: var(--stz-focus-offset);
box-shadow: none;
}
.stzd-body :where(.form-control, .form-select):focus {
outline: var(--stz-focus-ring);
outline-offset: var(--stz-border-width-hairline);
border-color: var(--stz-focus);
box-shadow: none;
}
.stzd-body * {
scrollbar-width: thin;
scrollbar-color: var(--stz-border-default) transparent;
}
.stzd-skip {
position: absolute;
inset-inline-start: var(--stz-space-3);
inset-block-start: var(--stz-space-3);
z-index: var(--stz-z-toast);
padding: var(--stz-space-2) var(--stz-space-4);
border-radius: var(--stz-radius-control);
background-color: var(--stz-action-primary);
color: var(--stz-on-action-primary);
font-weight: var(--stz-weight-bold);
transform: translateY(-200%);
}
.stzd-skip:focus {
transform: none;
outline: var(--stz-focus-ring-on-brand);
outline-offset: calc(-1 * var(--stz-focus-offset));
}
.stzd-body a.stzd-skip,
.stzd-body a.stzd-skip:hover { color: var(--stz-on-action-primary); }
/* Utilities (use these instead of Bootstrap's .text-success etc., which carry Bootstrap hues). */
.stzd-text { color: var(--stz-text); }
.stzd-muted { color: var(--stz-text-muted); }
.stzd-accent { color: var(--stz-accent-text); }
.stzd-text-success { color: var(--stz-status-success); }
.stzd-text-info { color: var(--stz-status-info); }
.stzd-text-warning { color: var(--stz-status-warning); }
.stzd-text-danger { color: var(--stz-status-danger); }
.stzd-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stzd-mono { font-family: var(--stz-font-utility); font-size: var(--stz-size-caption); white-space: nowrap; }
.stzd-overline {
font-size: var(--stz-size-micro);
font-weight: var(--stz-weight-medium);
letter-spacing: var(--stz-tracking-overline);
text-transform: uppercase;
color: var(--stz-text-muted);
}
.stzd-divider {
border: 0;
border-block-start: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
margin-block: var(--stz-space-4);
opacity: 1;
}
/* ============================================================================
2. SHELL
========================================================================= */
.stzd-app {
--_stzd-sidebar-w: var(--stz-shell-sidebar-w);
display: grid;
grid-template-columns: var(--_stzd-sidebar-w) minmax(0, 1fr);
min-height: 100vh;
}
.stzd-rail .stzd-app { --_stzd-sidebar-w: var(--stz-shell-sidebar-w-collapsed); }
/* Paint the sidebar column the full page height (the sidebar itself is sticky, 100vh). */
@media (min-width: 992px) {
.stzd-app {
background-image: linear-gradient(90deg, var(--stz-surface-shell) 0, var(--stz-surface-shell) var(--_stzd-sidebar-w), transparent var(--_stzd-sidebar-w));
}
}
/* ---- Sidebar (always dark: carries data-theme="dark" in markup) ---- */
.stzd-sidebar {
position: sticky;
inset-block-start: 0;
z-index: var(--stz-z-fixed);
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
overflow: hidden;
background-color: var(--stz-surface-shell);
color: var(--stz-on-surface-shell-muted);
border-inline-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stzd-sidebar__brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-2);
flex: 0 0 auto;
min-height: var(--stz-shell-header-h);
padding-inline: var(--stz-space-5) var(--stz-space-3);
border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stzd-sidebar__scroll {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding-block: var(--stz-space-3) var(--stz-space-6);
}
.stzd-sidebar__foot {
flex: 0 0 auto;
padding: var(--stz-space-3) var(--stz-space-4);
border-block-start: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
font-size: var(--stz-size-micro);
color: var(--stz-on-surface-shell-muted);
}
/* Interim wordmark — NOT an approved mark (see 02-brand/BRAND.md). */
.stzd-wordmark {
display: inline-flex;
align-items: baseline;
gap: var(--stz-space-1);
font-family: var(--stz-font-display);
font-size: var(--stz-size-lead);
font-weight: var(--stz-weight-bold);
line-height: 1;
letter-spacing: var(--stz-tracking-tight);
color: var(--stz-on-surface-shell);
text-transform: lowercase;
text-decoration: none;
}
.stzd-wordmark::before {
content: "";
display: inline-block;
width: var(--stz-dash-w);
height: var(--stz-dash-h);
background-color: var(--stz-dash-color);
}
.stzd-body a.stzd-wordmark,
.stzd-body a.stzd-wordmark:hover { color: var(--stz-on-surface-shell); }
.stzd-wordmark__short { display: none; }
/* Nav */
.stzd-nav__title {
margin: var(--stz-space-4) 0 var(--stz-space-2);
padding-inline: var(--stz-space-5);
font-size: var(--stz-size-nano);
font-weight: var(--stz-weight-medium);
letter-spacing: var(--stz-tracking-overline-wide);
text-transform: uppercase;
color: var(--stz-on-surface-shell-muted);
}
.stzd-nav__list,
.stzd-nav__sub {
list-style: none;
margin: 0;
padding: 0;
}
.stzd-nav__list > li { padding-inline: var(--stz-space-3); }
.stzd-nav__link {
position: relative;
display: flex;
align-items: center;
gap: var(--stz-space-3);
width: 100%;
min-height: var(--stz-touch-target);
padding: 0 var(--stz-space-3);
border: 0;
border-radius: var(--stz-radius-control);
background: none;
color: var(--stz-on-surface-shell-muted);
font-family: var(--stz-font-body);
font-size: var(--stz-size-label);
font-weight: var(--stz-weight-medium);
text-align: start;
text-decoration: none;
cursor: pointer;
}
.stzd-body .stzd-nav__link { color: var(--stz-on-surface-shell-muted); text-decoration: none; }
.stzd-nav__link > .bi:first-child {
flex: 0 0 auto;
width: var(--stz-icon-md);
font-size: var(--stz-icon-sm);
text-align: center;
}
.stzd-nav__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stzd-nav__caret { font-size: var(--stz-size-micro); }
.stzd-nav__link[aria-expanded="true"] .stzd-nav__caret { transform: rotate(180deg); }
.stzd-body .stzd-nav__link:hover,
.stzd-body .stzd-nav__link[aria-expanded="true"] {
background-color: var(--stz-surface-hover);
color: var(--stz-on-surface-shell);
}
.stzd-body .stzd-nav__link.is-active,
.stzd-body .stzd-nav__link[aria-current="page"] {
background-color: var(--stz-surface-hover);
color: var(--stz-on-surface-shell);
}
.stzd-nav__link.is-active::before,
.stzd-nav__link[aria-current="page"]::before {
content: "";
position: absolute;
inset-inline-start: calc(-1 * var(--stz-space-3));
inset-block: var(--stz-space-2);
width: var(--stz-dash-h);
border-radius: 0 var(--stz-radius-tag) var(--stz-radius-tag) 0;
background-color: var(--stz-accent);
}
.stzd-nav__link.is-active > .bi:first-child,
.stzd-nav__link[aria-current="page"] > .bi:first-child { color: var(--stz-accent-text); }
.stzd-nav__link.is-disabled {
cursor: not-allowed;
opacity: 0.55;
}
.stzd-nav__soon {
flex: 0 0 auto;
padding: 0 var(--stz-space-1);
border: var(--stz-border-width-hairline) solid var(--stz-border-default);
border-radius: var(--stz-radius-tag);
font-size: var(--stz-size-nano);
letter-spacing: var(--stz-tracking-ui);
text-transform: uppercase;
}
.stzd-nav__sub { padding-block: var(--stz-space-1); }
.stzd-nav__sub[hidden] { display: none; }
.stzd-nav__sub .stzd-nav__link {
min-height: var(--stz-control-h-sm);
padding-inline-start: calc(var(--stz-space-3) + var(--stz-icon-md) + var(--stz-space-3));
font-weight: var(--stz-weight-regular);
}
.stzd-body .stzd-nav__sub .stzd-nav__link.is-active,
.stzd-body .stzd-nav__sub .stzd-nav__link[aria-current="page"] { background-color: transparent; }
.stzd-nav__sub .stzd-nav__link.is-active::before,
.stzd-nav__sub .stzd-nav__link[aria-current="page"]::before {
inset-inline-start: calc(var(--stz-space-3) + var(--stz-space-2));
inset-block: auto;
width: var(--stz-space-2);
height: var(--stz-border-width-strong);
border-radius: 0;
}
/* ---- Rail (collapsed sidebar) ---- */
.stzd-rail .stzd-sidebar__brand { justify-content: center; padding-inline: 0; }
.stzd-rail .stzd-wordmark__full { display: none; }
.stzd-rail .stzd-wordmark__short { display: inline; }
.stzd-rail .stzd-sidebar__brand .stzd-sidebar__collapse { display: none; }
.stzd-rail .stzd-nav__title,
.stzd-rail .stzd-nav__label,
.stzd-rail .stzd-nav__caret,
.stzd-rail .stzd-nav__soon,
.stzd-rail .stzd-sidebar__foot-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.stzd-rail .stzd-nav__sub { display: none; }
.stzd-rail .stzd-nav__link { justify-content: center; padding: 0; }
.stzd-rail .stzd-nav__list > li { padding-inline: var(--stz-space-3); }
/* ---- Scrim (drawer backdrop) ---- */
.stzd-scrim {
position: fixed;
inset: 0;
z-index: var(--stz-z-drawer-backdrop);
background-color: var(--stz-surface-scrim);
opacity: 0;
visibility: hidden;
}
.stzd-sidebar-open .stzd-scrim { opacity: 1; visibility: visible; }
/* 992–1199: rail in the grid; toggle opens the full sidebar as an overlay. */
@media (min-width: 992px) and (max-width: 1199.98px) {
.stzd-app { --_stzd-sidebar-w: var(--stz-shell-sidebar-w-collapsed); }
.stzd-sidebar-open .stzd-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
width: var(--stz-shell-sidebar-w);
z-index: var(--stz-z-drawer);
box-shadow: var(--stz-shadow-feature);
}
}
@media (min-width: 992px) {
.stzd-scrim { display: none; }
.stzd-sidebar-open .stzd-scrim { display: block; }
}
/* <992: off-canvas drawer. */
@media (max-width: 991.98px) {
.stzd-app { grid-template-columns: minmax(0, 1fr); }
.stzd-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
width: min(var(--stz-shell-sidebar-w), 85vw);
z-index: var(--stz-z-drawer);
transform: translateX(-100%);
visibility: hidden;
}
.stzd-sidebar-open .stzd-sidebar {
transform: none;
visibility: visible;
box-shadow: var(--stz-shadow-feature);
}
}
/* ---- Main column ---- */
.stzd-main {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100vh;
}
/* ---- Topbar ---- */
.stzd-topbar {
position: sticky;
inset-block-start: 0;
z-index: var(--stz-z-sticky);
display: flex;
align-items: center;
gap: var(--stz-space-3);
min-height: var(--stz-shell-header-h);
padding-inline: var(--stz-shell-gutter);
background-color: var(--stz-surface-canvas);
border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stzd-topbar__start,
.stzd-topbar__end {
display: flex;
align-items: center;
gap: var(--stz-space-2);
}
.stzd-topbar__start { flex: 1 1 auto; min-width: 0; }
.stzd-topbar__end { flex: 0 0 auto; }
.stzd-topbar__brand { display: none; }
.stzd-iconbtn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--stz-touch-target);
height: var(--stz-touch-target);
padding: 0;
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-radius: var(--stz-radius-round);
background-color: transparent;
color: var(--stz-text);
font-size: var(--stz-icon-sm);
line-height: 1;
cursor: pointer;
}
.stzd-iconbtn:hover { background-color: var(--stz-surface-hover); border-color: var(--stz-border-control); }
.stzd-iconbtn[aria-expanded="true"] { border-color: var(--stz-border-control); }
.stzd-iconbtn--square { border-radius: var(--stz-radius-control); }
.stzd-iconbtn--ghost { border-color: transparent; }
.stzd-sidebar .stzd-iconbtn { color: var(--stz-on-surface-shell); }
/* Theme toggle shows the icon for the mode you would switch TO. */
.stzd-theme-icon--sun { display: none; }
[data-stzd-theme-toggle][aria-pressed="true"] .stzd-theme-icon--sun { display: inline-block; }
[data-stzd-theme-toggle][aria-pressed="true"] .stzd-theme-icon--moon { display: none; }
.stzd-count {
position: absolute;
inset-block-start: calc(-1 * var(--stz-space-1));
inset-inline-end: calc(-1 * var(--stz-space-1));
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--stz-icon-sm);
height: var(--stz-icon-sm);
padding-inline: var(--stz-space-1);
border: var(--stz-border-width-strong) solid var(--stz-surface-canvas);
border-radius: var(--stz-radius-pill);
background-color: var(--stz-surface-brand);
color: var(--stz-on-surface-brand);
font-size: var(--stz-size-nano);
font-weight: var(--stz-weight-bold);
line-height: 1;
box-sizing: content-box;
}
/* Search */
.stzd-search {
position: relative;
flex: 0 1 380px;
min-width: 0;
}
.stzd-search > .bi {
position: absolute;
inset-inline-start: var(--stz-space-3);
inset-block-start: 50%;
transform: translateY(-50%);
color: var(--stz-text-muted);
pointer-events: none;
}
.stzd-body .stzd-search .form-control {
padding-inline-start: calc(var(--stz-space-3) + var(--stz-icon-sm) + var(--stz-space-2));
border-radius: var(--stz-radius-pill);
background-color: var(--stz-surface-panel);
}
.stzd-search__kbd {
position: absolute;
inset-inline-end: var(--stz-space-3);
inset-block-start: 50%;
transform: translateY(-50%);
padding: 0 var(--stz-space-1);
border: var(--stz-border-width-hairline) solid var(--stz-border-default);
border-radius: var(--stz-radius-tag);
font-family: var(--stz-font-utility);
font-size: var(--stz-size-nano);
color: var(--stz-text-muted);
pointer-events: none;
}
/* Profile chip in the topbar */
.stzd-profile {
display: inline-flex;
align-items: center;
gap: var(--stz-space-2);
min-height: var(--stz-touch-target);
padding: 0 var(--stz-space-2) 0 var(--stz-space-1);
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-radius: var(--stz-radius-pill);
background: none;
color: var(--stz-text);
text-align: start;
cursor: pointer;
}
.stzd-profile:hover { background-color: var(--stz-surface-hover); }
.stzd-profile__meta { display: flex; flex-direction: column; line-height: 1.2; }
.stzd-profile__name { font-size: var(--stz-size-label); font-weight: var(--stz-weight-medium); color: var(--stz-text); }
.stzd-profile__role { font-size: var(--stz-size-micro); color: var(--stz-text-muted); }
@media (max-width: 991.98px) {
.stzd-topbar__brand { display: inline-flex; }
.stzd-topbar__brand .stzd-wordmark { color: var(--stz-text); font-size: var(--stz-size-title); }
.stzd-body .stzd-topbar__brand a.stzd-wordmark,
.stzd-body .stzd-topbar__brand a.stzd-wordmark:hover { color: var(--stz-text); }
}
@media (max-width: 767.98px) {
.stzd-search, .stzd-profile__meta, .stzd-topbar__hide-sm { display: none; }
.stzd-topbar { padding-inline: var(--stz-space-3); gap: var(--stz-space-2); }
.stzd-topbar__end { gap: var(--stz-space-1); }
}
/* ---- Content + page header ---- */
.stzd-content {
flex: 1 1 auto;
width: 100%;
padding: var(--stz-space-6) var(--stz-shell-gutter) var(--stz-space-8);
}
.stzd-content > .row { --bs-gutter-x: var(--stz-shell-gutter); --bs-gutter-y: var(--stz-shell-gutter); }
.stzd-content .row { --bs-gutter-x: var(--stz-shell-gutter); }
.stzd-grid-gap { --bs-gutter-y: var(--stz-shell-gutter); }
.stzd-stack > * + * { margin-block-start: var(--stz-shell-gutter); }
.stzd-col-stack { display: flex; flex-direction: column; gap: var(--stz-shell-gutter); }
.stzd-col-stack > .stzd-card { height: auto; flex: 1 1 auto; }
.stzd-page-header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--stz-space-4);
margin-block-end: var(--stz-space-6);
}
.stzd-page-header__text { min-width: 0; }
.stzd-page-title {
margin: var(--stz-space-2) 0 0;
font-size: var(--stz-size-h6);
font-weight: var(--stz-weight-medium);
line-height: var(--stz-lh-h6);
letter-spacing: var(--stz-tracking-tight);
color: var(--stz-text);
}
.stzd-page-sub { margin: var(--stz-space-1) 0 0; color: var(--stz-text-muted); }
.stzd-page-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--stz-space-2);
}
.stzd-section-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--stz-space-3);
margin-block: var(--stz-space-8) var(--stz-space-4);
}
@media (max-width: 575.98px) {
.stzd-content { padding: var(--stz-space-4) var(--stz-space-3) var(--stz-space-6); }
.stzd-content > .row,
.stzd-content .row { --bs-gutter-x: var(--stz-space-3); --bs-gutter-y: var(--stz-space-3); }
.stzd-page-title { font-size: var(--stz-size-lead); line-height: var(--stz-lh-lead); }
.stzd-page-actions { width: 100%; }
}
/* ---- Footer ---- */
.stzd-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-2);
padding: var(--stz-space-4) var(--stz-shell-gutter);
border-block-start: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
font-size: var(--stz-size-caption);
color: var(--stz-text-muted);
}
.stzd-footer p { margin: 0; }
.stzd-footer__links { display: flex; flex-wrap: wrap; gap: var(--stz-space-4); list-style: none; margin: 0; padding: 0; }
.stzd-body .stzd-footer a { color: var(--stz-text-muted); }
.stzd-body .stzd-footer a:hover { color: var(--stz-link-hover); }
/* ============================================================================
3. CARDS
========================================================================= */
.stzd-card,
.stzd-body .card {
--bs-card-bg: var(--stz-surface-panel);
--bs-card-color: var(--stz-text-muted);
--bs-card-border-color: var(--stz-border-hairline);
--bs-card-border-radius: var(--stz-radius-card);
--bs-card-inner-border-radius: var(--stz-radius-card);
--bs-card-cap-bg: transparent;
--bs-card-cap-color: var(--stz-text);
--bs-card-spacer-x: var(--stz-shell-gutter);
--bs-card-spacer-y: var(--stz-space-4);
--bs-card-cap-padding-x: var(--stz-shell-gutter);
--bs-card-cap-padding-y: var(--stz-space-4);
--bs-card-title-color: var(--stz-text);
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
background-color: var(--stz-surface-panel);
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-radius: var(--stz-radius-card);
color: var(--stz-text-muted);
box-shadow: none;
}
.stzd-card--auto { height: auto; }
.stzd-card--clip { overflow: hidden; }
.stzd-card__header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--stz-space-3);
padding: var(--stz-space-4) var(--stz-shell-gutter) 0;
}
.stzd-card__header--rule {
padding-block-end: var(--stz-space-4);
border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stzd-card__heading { flex: 1 1 200px; min-width: 0; }
.stzd-card__title {
margin: 0;
font-size: var(--stz-size-body-lg);
font-weight: var(--stz-weight-medium);
line-height: var(--stz-lh-label);
color: var(--stz-text);
}
.stzd-card__sub {
margin: var(--stz-space-1) 0 0;
font-size: var(--stz-size-caption);
color: var(--stz-text-muted);
}
.stzd-card__tools { display: flex; align-items: center; gap: var(--stz-space-2); flex: 0 0 auto; }
.stzd-card__body { flex: 1 1 auto; padding: var(--stz-space-4) var(--stz-shell-gutter); }
.stzd-card__body--flush { padding: 0; }
.stzd-card__body--flush-x { padding-inline: 0; }
.stzd-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-3);
padding: var(--stz-space-3) var(--stz-shell-gutter);
border-block-start: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
font-size: var(--stz-size-caption);
}
.stzd-card--interactive:hover { border-color: var(--stz-border-default); }
/* Sunken mini-stat chip */
.stzd-chip-stat {
padding: var(--stz-space-3);
border-radius: var(--stz-radius-media);
background-color: var(--stz-surface-sunken);
}
.stzd-chip-stat__label { display: block; font-size: var(--stz-size-micro); letter-spacing: var(--stz-tracking-ui); text-transform: uppercase; color: var(--stz-text-muted); }
.stzd-chip-stat__value { display: block; margin-block-start: var(--stz-space-1); font-size: var(--stz-size-title); font-weight: var(--stz-weight-medium); color: var(--stz-text); font-variant-numeric: tabular-nums; }
/* ---- KPI card ---- */
.stzd-kpi { overflow: hidden; }
.stzd-kpi__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-2);
padding: var(--stz-space-4) var(--stz-space-4) 0;
}
.stzd-kpi__label {
margin: 0;
font-size: var(--stz-size-micro);
font-weight: var(--stz-weight-medium);
letter-spacing: var(--stz-tracking-overline);
text-transform: uppercase;
color: var(--stz-text-muted);
}
.stzd-kpi__main {
display: flex;
align-items: center;
gap: var(--stz-space-3);
padding: var(--stz-space-3) var(--stz-space-4) 0;
}
.stzd-kpi__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--stz-pictogram);
height: var(--stz-pictogram);
border: var(--stz-border-width-hairline) solid var(--stz-border-default);
border-radius: var(--stz-radius-round);
color: var(--stz-text);
font-size: var(--stz-icon-md);
}
.stzd-kpi__icon--sm {
width: var(--stz-control-h-sm);
height: var(--stz-control-h-sm);
font-size: var(--stz-icon-xs);
}
.stzd-kpi__icon--brand {
border-color: var(--stz-surface-brand);
background-color: var(--stz-surface-brand);
color: var(--stz-on-surface-brand);
}
.stzd-kpi__value {
margin: 0;
font-size: var(--stz-size-h5);
font-weight: var(--stz-weight-medium);
line-height: 1.1;
letter-spacing: var(--stz-tracking-tight);
color: var(--stz-text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.stzd-kpi__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--stz-space-1) var(--stz-space-2);
margin-block-start: var(--stz-space-1);
font-size: var(--stz-size-caption);
color: var(--stz-text-muted);
}
.stzd-kpi__spark { margin-block-start: var(--stz-space-2); min-height: var(--stz-chart-h-spark); }
.stzd-delta {
display: inline-flex;
align-items: center;
gap: var(--stz-space-1);
padding: 0 var(--stz-space-1);
border-radius: var(--stz-radius-control);
font-size: var(--stz-size-caption);
font-weight: var(--stz-weight-bold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.stzd-delta--up { background-color: var(--stz-status-success-subtle); color: var(--stz-status-success); }
.stzd-delta--down { background-color: var(--stz-status-danger-subtle); color: var(--stz-status-danger); }
.stzd-delta--flat { background-color: var(--stz-status-neutral-subtle); color: var(--stz-status-neutral); }
/* Hero KPI with outlined numeral */
.stzd-kpi__value--outline {
font-size: var(--stz-size-h3);
font-weight: var(--stz-weight-bold);
color: transparent;
-webkit-text-stroke: var(--stz-numeral-stroke-width) var(--stz-numeral-stroke);
}
/* ---- Chart card ---- */
.stzd-chart { position: relative; width: 100%; min-height: var(--stz-chart-h-md); }
.stzd-chart--spark { min-height: var(--stz-chart-h-spark); }
.stzd-chart--donut { min-height: var(--stz-chart-h-donut); }
.stzd-chart--lg { min-height: var(--stz-chart-h-lg); }
.stzd-chart-data { margin-block-start: var(--stz-space-2); font-size: var(--stz-size-caption); }
.stzd-chart-data > summary {
display: inline-flex;
align-items: center;
gap: var(--stz-space-1);
min-height: var(--stz-touch-target-min);
color: var(--stz-text-muted);
cursor: pointer;
}
.stzd-chart-data > summary:hover { color: var(--stz-text); }
.stzd-chart-data .table { margin-block-start: var(--stz-space-2); }
.stzd-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--stz-space-2); }
.stzd-legend__item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--stz-space-2);
font-size: var(--stz-size-label);
}
.stzd-legend__swatch {
width: var(--stz-space-2);
height: var(--stz-space-2);
border-radius: var(--stz-radius-tag);
background-color: var(--_stzd-swatch, var(--stz-chart-1));
}
.stzd-legend__swatch--dashed {
height: var(--stz-border-width-strong);
width: var(--stz-space-4);
border-radius: 0;
background: repeating-linear-gradient(90deg, var(--_stzd-swatch, var(--stz-chart-2)) 0 4px, transparent 4px 7px);
}
.stzd-swatch-1 { --_stzd-swatch: var(--stz-chart-1); }
.stzd-swatch-2 { --_stzd-swatch: var(--stz-chart-2); }
.stzd-swatch-3 { --_stzd-swatch: var(--stz-chart-3); }
.stzd-swatch-4 { --_stzd-swatch: var(--stz-chart-4); }
.stzd-swatch-5 { --_stzd-swatch: var(--stz-chart-5); }
.stzd-swatch-6 { --_stzd-swatch: var(--stz-chart-6); }
.stzd-legend__value { color: var(--stz-text); font-variant-numeric: tabular-nums; }
.stzd-legend--inline { display: flex; flex-wrap: wrap; gap: var(--stz-space-2) var(--stz-space-4); }
.stzd-legend--inline .stzd-legend__item { grid-template-columns: auto auto; font-size: var(--stz-size-caption); }
/* ApexCharts chrome (values resolved from tokens; JS passes resolved colours to the SVG). */
.stzd-body .apexcharts-tooltip {
border: var(--stz-border-width-hairline) solid var(--stz-border-default);
border-radius: var(--stz-radius-control);
background-color: var(--stz-surface-panel);
color: var(--stz-text);
box-shadow: var(--stz-shadow-menu);
font-family: var(--stz-font-body);
}
.stzd-body .apexcharts-tooltip.apexcharts-theme-dark,
.stzd-body .apexcharts-tooltip.apexcharts-theme-light {
background-color: var(--stz-surface-panel);
color: var(--stz-text);
border-color: var(--stz-border-default);
}
.stzd-body .apexcharts-tooltip-title,
.stzd-body .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title,
.stzd-body .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
background-color: var(--stz-surface-sunken);
border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
color: var(--stz-text);
font-family: var(--stz-font-body);
}
.stzd-body .apexcharts-xaxistooltip {
background-color: var(--stz-surface-panel);
border-color: var(--stz-border-default);
color: var(--stz-text);
}
.stzd-body .apexcharts-xaxistooltip::before,
.stzd-body .apexcharts-xaxistooltip::after { border-bottom-color: var(--stz-border-default); }
.stzd-body .apexcharts-legend-text { color: var(--stz-text-muted); }
/* ============================================================================
4. BUTTONS (Bootstrap .btn re-skinned: conference = small, uppercase, 4px radius)
========================================================================= */
.stzd-body .btn {
--bs-btn-font-family: var(--stz-font-body);
--bs-btn-font-size: var(--stz-size-btn-md);
--bs-btn-font-weight: var(--stz-weight-medium);
--bs-btn-line-height: var(--stz-lh-btn-md);
--bs-btn-padding-x: var(--stz-space-5);
--bs-btn-padding-y: var(--stz-space-2);
--bs-btn-border-width: var(--stz-border-width-hairline);
--bs-btn-border-radius: var(--stz-radius-control);
--bs-btn-box-shadow: none;
--bs-btn-focus-box-shadow: none;
--bs-btn-disabled-opacity: 0.5;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--stz-space-2);
min-height: var(--stz-touch-target);
letter-spacing: var(--stz-tracking-ui);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: var(--bs-btn-color);
}
.stzd-body .btn:hover { color: var(--bs-btn-hover-color); }
.stzd-body .btn:active,
.stzd-body .btn.active,
.stzd-body .btn.show { color: var(--bs-btn-active-color); }
.stzd-body .btn:disabled,
.stzd-body .btn.disabled { color: var(--bs-btn-disabled-color); }
.stzd-body .btn > .bi { font-size: var(--stz-icon-xs); }
.stzd-body .btn-sm {
--bs-btn-font-size: var(--stz-size-btn-sm);
--bs-btn-line-height: var(--stz-lh-btn-sm);
--bs-btn-padding-x: var(--stz-space-3);
--bs-btn-padding-y: var(--stz-space-1);
min-height: var(--stz-control-h-sm);
}
.stzd-body .btn-lg {
--bs-btn-font-size: var(--stz-size-btn-lg);
--bs-btn-line-height: var(--stz-lh-btn-lg);
--bs-btn-padding-x: var(--stz-space-8);
--bs-btn-padding-y: var(--stz-space-3);
min-height: var(--stz-control-h-lg);
}
.stzd-body .btn-pill { --bs-btn-border-radius: var(--stz-radius-pill); }
.stzd-body .btn-block { width: 100%; }
.stzd-body .btn-icon {
--bs-btn-padding-x: 0;
width: var(--stz-touch-target);
min-width: var(--stz-touch-target);
}
.stzd-body .btn-icon > .bi { font-size: var(--stz-icon-sm); }
.stzd-body .btn-icon.btn-link { text-decoration: none; color: var(--stz-text-muted); }
.stzd-body .btn-icon.btn-link:hover,
.stzd-body .btn-icon.btn-link[aria-expanded="true"] { color: var(--stz-text); background-color: var(--stz-surface-hover); }
.stzd-body .btn-icon.btn-sm { width: var(--stz-control-h-sm); min-width: var(--stz-control-h-sm); }
.stzd-body .btn-primary {
--bs-btn-color: var(--stz-on-action-primary);
--bs-btn-bg: var(--stz-action-primary);
--bs-btn-border-color: var(--stz-action-primary-border);
--bs-btn-hover-color: var(--stz-on-action-primary);
--bs-btn-hover-bg: var(--stz-action-primary-hover);
--bs-btn-hover-border-color: var(--stz-action-primary-hover);
--bs-btn-active-color: var(--stz-on-action-primary);
--bs-btn-active-bg: var(--stz-action-primary-active);
--bs-btn-active-border-color: var(--stz-action-primary-active);
--bs-btn-disabled-color: var(--stz-on-action-primary);
--bs-btn-disabled-bg: var(--stz-action-primary);
--bs-btn-disabled-border-color: var(--stz-action-primary);
box-shadow: var(--stz-shadow-btn);
}
.stzd-body .btn-primary:hover { box-shadow: var(--stz-shadow-btn-hover); }
/* Secondary = conference btn-dark-gray (neutral fill; label identifies it). */
.stzd-body .btn-secondary,
.stzd-body .btn-dark {
--bs-btn-color: var(--stz-on-action-neutral);
--bs-btn-bg: var(--stz-action-neutral);
--bs-btn-border-color: var(--stz-border-default);
--bs-btn-hover-color: var(--stz-on-action-neutral);
--bs-btn-hover-bg: var(--stz-action-neutral-hover);
--bs-btn-hover-border-color: var(--stz-border-control);
--bs-btn-active-color: var(--stz-on-action-neutral);
--bs-btn-active-bg: var(--stz-action-neutral-hover);
--bs-btn-active-border-color: var(--stz-border-control);
--bs-btn-disabled-color: var(--stz-on-action-neutral);
--bs-btn-disabled-bg: var(--stz-action-neutral);
--bs-btn-disabled-border-color: var(--stz-border-default);
}
/* Ghost / outline = conference transparent pill: fills inverse on hover. */
.stzd-body .btn-outline,
.stzd-body .btn-outline-secondary,
.stzd-body .btn-outline-light,
.stzd-body .btn-outline-dark,
.stzd-body .btn-light {
--bs-btn-color: var(--stz-text);
--bs-btn-bg: transparent;
--bs-btn-border-color: var(--stz-border-control);
--bs-btn-hover-color: var(--stz-on-action-ghost-hover);
--bs-btn-hover-bg: var(--stz-action-ghost-hover);
--bs-btn-hover-border-color: var(--stz-action-ghost-hover);
--bs-btn-active-color: var(--stz-on-action-ghost-hover);
--bs-btn-active-bg: var(--stz-action-ghost-hover);
--bs-btn-active-border-color: var(--stz-action-ghost-hover);
--bs-btn-disabled-color: var(--stz-text-muted);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--stz-border-default);
}
.stzd-body .btn-outline-primary {
--bs-btn-color: var(--stz-accent-text);
--bs-btn-bg: transparent;
--bs-btn-border-color: var(--stz-border-accent);
--bs-btn-hover-color: var(--stz-on-action-primary);
--bs-btn-hover-bg: var(--stz-action-primary);
--bs-btn-hover-border-color: var(--stz-action-primary);
--bs-btn-active-color: var(--stz-on-action-primary);
--bs-btn-active-bg: var(--stz-action-primary-active);
--bs-btn-active-border-color: var(--stz-action-primary-active);
--bs-btn-disabled-color: var(--stz-accent-text);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--stz-border-accent);
}
/* Destructive = outlined vermilion, never the crimson primary. */
.stzd-body .btn-danger,
.stzd-body .btn-outline-danger {
--bs-btn-color: var(--stz-status-danger);
--bs-btn-bg: transparent;
--bs-btn-border-color: var(--stz-status-danger);
--bs-btn-hover-color: var(--stz-status-danger);
--bs-btn-hover-bg: var(--stz-status-danger-subtle);
--bs-btn-hover-border-color: var(--stz-status-danger);
--bs-btn-active-color: var(--stz-status-danger);
--bs-btn-active-bg: var(--stz-status-danger-subtle);
--bs-btn-active-border-color: var(--stz-status-danger);
--bs-btn-disabled-color: var(--stz-status-danger);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--stz-status-danger);
}
.stzd-body .btn-link,
.stzd-body .btn-tertiary {
--bs-btn-color: var(--stz-text);
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-color: var(--stz-link-hover);
--bs-btn-hover-bg: transparent;
--bs-btn-hover-border-color: transparent;
--bs-btn-active-color: var(--stz-link-hover);
--bs-btn-active-border-color: transparent;
--bs-btn-disabled-color: var(--stz-text-muted);
--bs-btn-disabled-border-color: transparent;
text-decoration: underline;
text-decoration-color: var(--stz-border-default);
text-underline-offset: 4px;
}
.stzd-body .btn-link.btn-inline { min-height: 0; padding: 0; }
.stzd-body .btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.stzd-body .btn-group > .btn { min-height: var(--stz-control-h-sm); }
/* ============================================================================
5. BADGES, STATUS PILLS, SAMPLE TAG
========================================================================= */
.stzd-body .badge {
--bs-badge-font-size: var(--stz-size-nano);
--bs-badge-font-weight: var(--stz-weight-bold);
--bs-badge-color: var(--stz-on-surface-brand);
--bs-badge-border-radius: var(--stz-radius-control);
--bs-badge-padding-x: var(--stz-space-1);
--bs-badge-padding-y: var(--stz-space-1);
background-color: var(--stz-surface-brand);
letter-spacing: var(--stz-tracking-ui);
}
.stzd-body .badge.rounded-pill { --bs-badge-border-radius: var(--stz-radius-pill); }
/* Status pill: always colour + word (+ optional icon). */
.stzd-status {
display: inline-flex;
align-items: center;
gap: var(--stz-space-1);
padding: var(--stz-space-1) var(--stz-space-2);
border-radius: var(--stz-radius-control);
background-color: var(--stz-status-neutral-subtle);
color: var(--stz-status-neutral);
font-size: var(--stz-size-nano);
font-weight: var(--stz-weight-bold);
line-height: 1.3;
letter-spacing: var(--stz-tracking-ui);
text-transform: uppercase;
white-space: nowrap;
}
.stzd-status::before {
content: "";
width: var(--stz-space-1);
height: var(--stz-space-1);
border-radius: var(--stz-radius-round);
background-color: currentColor;
}
.stzd-status > .bi { font-size: var(--stz-size-micro); }
.stzd-status:has(> .bi)::before { display: none; }
.stzd-status--success { background-color: var(--stz-status-success-subtle); color: var(--stz-status-success); }
.stzd-status--info { background-color: var(--stz-status-info-subtle); color: var(--stz-status-info); }
.stzd-status--warning { background-color: var(--stz-status-warning-subtle); color: var(--stz-status-warning); }
.stzd-status--danger { background-color: var(--stz-status-danger-subtle); color: var(--stz-status-danger); }
.stzd-status--neutral { background-color: var(--stz-status-neutral-subtle); color: var(--stz-status-neutral); }
/* Conference "POPULAR" tag */
.stzd-status--brand { background-color: var(--stz-surface-brand); color: var(--stz-on-surface-brand); }
.stzd-status--brand::before { display: none; }
/* Tag / chip (neutral outline) */
.stzd-tag {
display: inline-flex;
align-items: center;
gap: var(--stz-space-1);
padding: 0 var(--stz-space-2);
min-height: var(--stz-touch-target-min);
border: var(--stz-border-width-hairline) solid var(--stz-border-default);
border-radius: var(--stz-radius-tag);
color: var(--stz-text-muted);
font-size: var(--stz-size-micro);
white-space: nowrap;
}
/* Rule 7: sample content is visibly marked. */
.stzd-sample {
display: inline-flex;
align-items: center;
padding: 0 var(--stz-space-1);
border: var(--stz-border-width-hairline) dashed var(--stz-border-control);
border-radius: var(--stz-radius-tag);
color: var(--stz-text-muted);
font-family: var(--stz-font-utility);
font-size: var(--stz-size-nano);
letter-spacing: var(--stz-tracking-normal);
text-transform: none;
white-space: nowrap;
vertical-align: middle;
}
/* ============================================================================
6. TABLES
========================================================================= */
.stzd-body .table {
--bs-table-color: var(--stz-text);
--bs-table-bg: transparent;
--bs-table-border-color: var(--stz-border-hairline);
--bs-table-striped-color: var(--stz-text);
--bs-table-striped-bg: var(--stz-surface-sunken);
--bs-table-active-color: var(--stz-text);
--bs-table-active-bg: var(--stz-accent-subtle);
--bs-table-hover-color: var(--stz-text);
--bs-table-hover-bg: var(--stz-surface-hover);
margin-block-end: 0;
font-size: var(--stz-size-label);
vertical-align: middle;
}
.stzd-body .table > :not(caption) > * > * {
padding: var(--stz-table-cell-y) var(--stz-table-cell-x);
border-block-end-color: var(--stz-border-hairline);
}
.stzd-body .table-sm > :not(caption) > * > *,
.stzd-table--dense > :not(caption) > * > * {
padding: var(--stz-table-cell-y-dense) var(--stz-table-cell-x-dense);
}
.stzd-body .table > thead {
--bs-table-bg: var(--stz-surface-sunken);
--bs-table-color: var(--stz-text-muted);
}
.stzd-body .table > thead th {
font-size: var(--stz-size-micro);
font-weight: var(--stz-weight-medium);
letter-spacing: var(--stz-tracking-overline);
text-transform: uppercase;
white-space: nowrap;
color: var(--stz-text-muted);
border-block-end-color: var(--stz-border-hairline);
}
.stzd-body .table > :not(:first-child) { border-block-start: 0; }
.stzd-body .table > tbody > tr:last-child > * { border-block-end: 0; }
.stzd-body .table td .stzd-muted,
.stzd-body .table .stzd-cell-sub { color: var(--stz-text-muted); font-size: var(--stz-size-caption); }
.stzd-cell-sub { display: block; }
.stzd-body .table.stzd-table--nowrap > tbody > tr > * { white-space: nowrap; }
.stzd-body .table .text-end,
.stzd-body .table .stzd-num { text-align: end; }
.stzd-cell-check { width: calc(var(--stz-touch-target) + var(--stz-table-cell-x)); }
.stzd-cell-actions { width: 1%; white-space: nowrap; text-align: end; }
.stzd-cell-media { display: flex; align-items: center; gap: var(--stz-space-2); min-width: 0; }
.stzd-table-wrap {
position: relative; /* contain absolutely-positioned .visually-hidden labels so the scroller clips them */
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.stzd-table-wrap:focus-visible { outline: var(--stz-focus-ring); outline-offset: calc(-1 * var(--stz-focus-width)); }
.stzd-body .table > tbody > tr.is-selected > * {
--bs-table-bg-state: var(--stz-accent-subtle);
color: var(--stz-text);
}
/* Sortable header: | */
.stzd-sort {
display: inline-flex;
align-items: center;
gap: var(--stz-space-1);
min-height: var(--stz-touch-target-min);
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
}
.stzd-sort:hover { color: var(--stz-text); }
.stzd-sort > .bi { opacity: 0.45; font-size: var(--stz-size-micro); }
.stzd-sort > .bi::before { content: "\f127"; }
th[aria-sort="ascending"] .stzd-sort,
th[aria-sort="descending"] .stzd-sort { color: var(--stz-text); }
th[aria-sort="ascending"] .stzd-sort > .bi,
th[aria-sort="descending"] .stzd-sort > .bi { opacity: 1; color: var(--stz-accent-text); }
th[aria-sort="ascending"] .stzd-sort > .bi::before { content: "\f148"; }
th[aria-sort="descending"] .stzd-sort > .bi::before { content: "\f128"; }
.stzd-body .table > thead th.text-end .stzd-sort { flex-direction: row-reverse; }
/* Table toolbar + bulk bar */
.stzd-table-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-2);
padding: var(--stz-space-3) var(--stz-shell-gutter);
}
.stzd-bulkbar {
display: flex;
align-items: center;
gap: var(--stz-space-3);
padding: var(--stz-space-2) var(--stz-shell-gutter);
background-color: var(--stz-accent-subtle);
color: var(--stz-text);
font-size: var(--stz-size-label);
}
.stzd-bulkbar[hidden] { display: none; }
/* Pagination */
.stzd-body .pagination {
--bs-pagination-padding-x: var(--stz-space-2);
--bs-pagination-padding-y: var(--stz-space-1);
--bs-pagination-font-size: var(--stz-size-label);
--bs-pagination-color: var(--stz-text-muted);
--bs-pagination-bg: transparent;
--bs-pagination-border-width: var(--stz-border-width-hairline);
--bs-pagination-border-color: var(--stz-border-hairline);
--bs-pagination-border-radius: var(--stz-radius-control);
--bs-pagination-hover-color: var(--stz-text);
--bs-pagination-hover-bg: var(--stz-surface-hover);
--bs-pagination-hover-border-color: var(--stz-border-default);
--bs-pagination-focus-color: var(--stz-text);
--bs-pagination-focus-bg: var(--stz-surface-hover);
--bs-pagination-focus-box-shadow: none;
--bs-pagination-active-color: var(--stz-on-action-primary);
--bs-pagination-active-bg: var(--stz-action-primary);
--bs-pagination-active-border-color: var(--stz-action-primary);
--bs-pagination-disabled-color: var(--stz-text-subtle);
--bs-pagination-disabled-bg: transparent;
--bs-pagination-disabled-border-color: var(--stz-border-hairline);
gap: var(--stz-space-1);
margin: 0;
}
.stzd-body .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--stz-control-h-sm);
min-height: var(--stz-control-h-sm);
border-radius: var(--stz-radius-control);
font-variant-numeric: tabular-nums;
text-decoration: none;
}
.stzd-body .page-item .page-link { border-radius: var(--stz-radius-control); }
.stzd-body .page-item:not(:first-child) .page-link { margin-inline-start: 0; }
.stzd-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-3);
padding: var(--stz-space-3) var(--stz-shell-gutter);
border-block-start: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
font-size: var(--stz-size-caption);
}
/* Empty state */
.stzd-empty {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--stz-space-2);
padding: var(--stz-space-10) var(--stz-space-6);
text-align: center;
}
.stzd-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--stz-pictogram-lg);
height: var(--stz-pictogram-lg);
margin-block-end: var(--stz-space-2);
border: var(--stz-border-width-hairline) solid var(--stz-border-default);
border-radius: var(--stz-radius-round);
color: var(--stz-accent-text);
font-size: var(--stz-icon-lg);
}
.stzd-empty__title { margin: 0; font-size: var(--stz-size-body-lg); color: var(--stz-text); }
.stzd-empty__text { max-width: 42ch; margin: 0 0 var(--stz-space-2); color: var(--stz-text-muted); }
/* ============================================================================
7. FORMS
========================================================================= */
.stzd-body .form-label,
.stzd-body .col-form-label {
margin-block-end: var(--stz-space-1);
font-size: var(--stz-size-label);
font-weight: var(--stz-weight-medium);
color: var(--stz-text);
}
.stzd-body .form-text,
.stzd-help {
margin-block-start: var(--stz-space-1);
font-size: var(--stz-size-caption);
color: var(--stz-text-muted);
}
.stzd-required::after { content: " *"; color: var(--stz-status-danger); }
.stzd-body .form-control,
.stzd-body .form-select {
min-height: var(--stz-touch-target);
padding: var(--stz-space-2) var(--stz-space-3);
border: var(--stz-border-width-hairline) solid var(--stz-border-control);
border-radius: var(--stz-radius-control);
background-color: var(--stz-surface-sunken);
color: var(--stz-text);
font-family: var(--stz-font-body);
font-size: var(--stz-size-label);
line-height: var(--stz-lh-label);
}
.stzd-body .form-select {
padding-inline-end: calc(var(--stz-space-3) * 2 + var(--stz-icon-xs));
/* stz-lint-allow data-uri */ --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a888d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-position: right var(--stz-space-3) center;
}
.stzd-body .form-control::placeholder { color: var(--stz-text-muted); opacity: 1; }
.stzd-body .form-control:hover:not(:disabled):not([readonly]),
.stzd-body .form-select:hover:not(:disabled) { border-color: var(--stz-text-muted); }
.stzd-body .form-control:disabled,
.stzd-body .form-select:disabled {
background-color: var(--stz-surface-canvas);
border-color: var(--stz-border-default);
color: var(--stz-text-muted);
opacity: 1;
cursor: not-allowed;
}
.stzd-body .form-control[readonly] {
background-color: transparent;
border-style: dashed;
}
.stzd-body .form-control-sm,
.stzd-body .form-select-sm {
min-height: var(--stz-control-h-sm);
padding-block: var(--stz-space-1);
font-size: var(--stz-size-caption);
}
.stzd-body .form-control-lg,
.stzd-body .form-select-lg {
min-height: var(--stz-control-h-lg);
padding-inline: var(--stz-space-4);
font-size: var(--stz-size-body-sm);
}
.stzd-body textarea.form-control { min-height: calc(var(--stz-control-h-lg) * 2); resize: vertical; }
.stzd-body .form-control[type="date"],
.stzd-body .form-control[type="time"],
.stzd-body .form-control[type="datetime-local"],
.stzd-body .form-control[type="month"] { font-variant-numeric: tabular-nums; }
.stzd-body .form-control[type="file"] { padding-block: var(--stz-space-2); }
.stzd-body .form-control::file-selector-button {
margin-block: calc(-1 * var(--stz-space-2));
margin-inline: calc(-1 * var(--stz-space-3)) var(--stz-space-3);
padding: var(--stz-space-2) var(--stz-space-3);
border: 0;
border-inline-end: var(--stz-border-width-hairline) solid var(--stz-border-control);
background-color: var(--stz-surface-raised);
color: var(--stz-text);
}
/* Input group */
.stzd-body .input-group-text {
min-height: var(--stz-touch-target);
padding-inline: var(--stz-space-3);
border: var(--stz-border-width-hairline) solid var(--stz-border-control);
border-radius: var(--stz-radius-control);
background-color: var(--stz-surface-raised);
color: var(--stz-text-muted);
font-size: var(--stz-size-label);
}
.stzd-body .input-group > .btn { min-height: var(--stz-touch-target); }
.stzd-body .input-group-sm > .input-group-text,
.stzd-body .input-group-sm > .form-control,
.stzd-body .input-group-sm > .btn { min-height: var(--stz-control-h-sm); }
/* Validation — border + message (the message carries the meaning, not colour). */
.stzd-body .form-control.is-invalid,
.stzd-body .was-validated .form-control:invalid,
.stzd-body .form-select.is-invalid,
.stzd-body .was-validated .form-select:invalid {
border-color: var(--stz-status-danger);
background-image: none;
padding-inline-end: var(--stz-space-3);
}
.stzd-body .form-select.is-invalid,
.stzd-body .was-validated .form-select:invalid {
background-image: var(--bs-form-select-bg-img);
padding-inline-end: calc(var(--stz-space-3) * 2 + var(--stz-icon-xs));
}
.stzd-body .form-control.is-valid,
.stzd-body .was-validated .form-control:valid,
.stzd-body .form-select.is-valid,
.stzd-body .was-validated .form-select:valid {
border-color: var(--stz-status-success);
background-image: none;
padding-inline-end: var(--stz-space-3);
}
.stzd-body .form-select.is-valid,
.stzd-body .was-validated .form-select:valid {
background-image: var(--bs-form-select-bg-img);
padding-inline-end: calc(var(--stz-space-3) * 2 + var(--stz-icon-xs));
}
.stzd-body .invalid-feedback,
.stzd-body .valid-feedback {
margin-block-start: var(--stz-space-1);
font-size: var(--stz-size-caption);
font-weight: var(--stz-weight-medium);
}
.stzd-body .invalid-feedback { color: var(--stz-status-danger); }
.stzd-body .valid-feedback { color: var(--stz-status-success); }
/* Check / radio / switch */
.stzd-body .form-check {
display: flex;
align-items: flex-start;
gap: var(--stz-space-2);
min-height: var(--stz-touch-target-min);
margin-block-end: var(--stz-space-2);
padding-inline-start: 0;
}
.stzd-body .form-check .form-check-input { float: none; margin: 0; margin-block-start: calc(var(--stz-space-1) * 0.4); flex: 0 0 auto; }
.stzd-body .form-check-label { color: var(--stz-text); font-size: var(--stz-size-label); cursor: pointer; }
.stzd-body .form-check-inline { display: inline-flex; margin-inline-end: var(--stz-space-4); }
.stzd-body .form-check-input {
--bs-form-check-bg: var(--stz-surface-sunken);
width: var(--stz-icon-sm);
height: var(--stz-icon-sm);
border: var(--stz-border-width-hairline) solid var(--stz-border-control);
cursor: pointer;
}
.stzd-body .form-check-input[type="checkbox"] { border-radius: var(--stz-radius-control); }
.stzd-body .form-check-input:checked,
.stzd-body .form-check-input[type="checkbox"]:indeterminate {
background-color: var(--stz-action-primary);
border-color: var(--stz-action-primary);
}
.stzd-body .form-check-input:disabled { opacity: 0.45; cursor: not-allowed; }
.stzd-body .form-check-input:disabled ~ .form-check-label { color: var(--stz-text-muted); opacity: 1; }
.stzd-body .form-check-input.is-invalid,
.stzd-body .was-validated .form-check-input:invalid { border-color: var(--stz-status-danger); }
.stzd-body .form-check-input.is-invalid ~ .form-check-label,
.stzd-body .was-validated .form-check-input:invalid ~ .form-check-label { color: var(--stz-status-danger); }
.stzd-check-only { display: inline-flex; align-items: center; justify-content: center; min-width: var(--stz-touch-target-min); min-height: var(--stz-touch-target-min); margin: 0; }
.stzd-check-only .form-check-input { margin: 0; }
.stzd-body .form-switch .form-check-input {
/* stz-lint-allow data-uri */ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238a888d'/%3e%3c/svg%3e");
width: calc(var(--stz-icon-sm) * 2);
height: var(--stz-icon-sm);
border-radius: var(--stz-radius-pill);
}
.stzd-body .form-switch .form-check-input:focus {
/* stz-lint-allow data-uri */ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238a888d'/%3e%3c/svg%3e");
}
.stzd-body .form-switch .form-check-input:checked {
/* stz-lint-allow data-uri */ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.stzd-body .form-switch { gap: var(--stz-space-3); }
/* Settings row: label/help on the left, control on the right */
.stzd-setting {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-4);
padding-block: var(--stz-space-3);
border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stzd-setting:last-child { border-block-end: 0; }
.stzd-setting__label { margin: 0; color: var(--stz-text); font-weight: var(--stz-weight-medium); }
.stzd-setting__help { margin: 0; font-size: var(--stz-size-caption); color: var(--stz-text-muted); }
/* Password field with show/hide button */
.stzd-password { position: relative; }
.stzd-password .form-control { padding-inline-end: calc(var(--stz-touch-target) + var(--stz-space-1)); }
.stzd-password__toggle {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
width: var(--stz-touch-target);
border: 0;
border-radius: 0 var(--stz-radius-control) var(--stz-radius-control) 0;
background: none;
color: var(--stz-text-muted);
cursor: pointer;
}
.stzd-password__toggle:hover { color: var(--stz-text); }
.stzd-password__toggle .stzd-eye-off { display: none; }
.stzd-password__toggle[aria-pressed="true"] .stzd-eye-off { display: inline-block; }
.stzd-password__toggle[aria-pressed="true"] .stzd-eye-on { display: none; }
/* Filter bar */
.stzd-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--stz-space-3);
align-items: end;
}
/* File dropzone: */
.stzd-dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--stz-space-2);
min-height: calc(var(--stz-control-h-lg) * 3);
padding: var(--stz-space-6);
border: var(--stz-border-width-hairline) dashed var(--stz-border-control);
border-radius: var(--stz-radius-card);
background-color: var(--stz-surface-sunken);
color: var(--stz-text-muted);
text-align: center;
cursor: pointer;
}
.stzd-dropzone > .bi { font-size: var(--stz-icon-xl); color: var(--stz-accent-text); }
.stzd-dropzone__title { color: var(--stz-text); font-weight: var(--stz-weight-medium); }
.stzd-dropzone:hover,
.stzd-dropzone.is-dragover { border-color: var(--stz-border-accent); border-style: solid; }
.stzd-dropzone:focus-within { outline: var(--stz-focus-ring); outline-offset: var(--stz-focus-offset); }
.stzd-dropzone__files { list-style: none; margin: var(--stz-space-2) 0 0; padding: 0; font-size: var(--stz-size-caption); color: var(--stz-text); }
/* ============================================================================
8. TABS + SEGMENTED CONTROL
========================================================================= */
.stzd-body .nav-tabs {
--bs-nav-tabs-border-width: var(--stz-border-width-hairline);
--bs-nav-tabs-border-color: var(--stz-border-hairline);
--bs-nav-tabs-border-radius: 0;
--bs-nav-tabs-link-hover-border-color: transparent;
--bs-nav-tabs-link-active-color: var(--stz-text);
--bs-nav-tabs-link-active-bg: transparent;
--bs-nav-tabs-link-active-border-color: transparent;
--bs-nav-link-padding-x: 0;
--bs-nav-link-padding-y: var(--stz-space-3);
--bs-nav-link-color: var(--stz-text-muted);
--bs-nav-link-hover-color: var(--stz-text);
--bs-nav-link-font-weight: var(--stz-weight-medium);
gap: var(--stz-space-6);
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.stzd-body .nav-tabs .nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--stz-space-2);
min-height: var(--stz-touch-target);
margin-block-end: 0;
border: 0;
font-size: var(--stz-size-label);
white-space: nowrap;
}
.stzd-body .nav-tabs .nav-link.active::after,
.stzd-body .nav-tabs .nav-link[aria-selected="true"]::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: calc(-1 * var(--stz-border-width-hairline));
height: var(--stz-border-width-strong);
background-color: var(--stz-accent);
}
.stzd-body .tab-content { padding-block-start: var(--stz-space-4); }
/* Vertical tabs (settings) */
.stzd-body .nav-pills.flex-column,
.stzd-vtabs {
--bs-nav-link-color: var(--stz-text-muted);
--bs-nav-link-hover-color: var(--stz-text);
--bs-nav-pills-link-active-color: var(--stz-text);
--bs-nav-pills-link-active-bg: var(--stz-surface-hover);
--bs-nav-pills-border-radius: var(--stz-radius-control);
gap: var(--stz-space-1);
}
.stzd-body .nav-pills.flex-column .nav-link,
.stzd-vtabs .nav-link {
position: relative;
display: flex;
align-items: center;
gap: var(--stz-space-2);
min-height: var(--stz-touch-target);
padding-inline: var(--stz-space-3);
font-weight: var(--stz-weight-medium);
text-align: start;
}
.stzd-body .nav-pills.flex-column .nav-link.active::before,
.stzd-vtabs .nav-link.active::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block: var(--stz-space-2);
width: var(--stz-dash-h);
background-color: var(--stz-accent);
}
/* Segmented control (Day / Week / Month): .stzd-segmented > button[aria-pressed] */
.stzd-segmented {
display: inline-flex;
align-items: center;
gap: var(--stz-space-1);
padding: var(--stz-space-1);
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-radius: var(--stz-radius-control);
background-color: var(--stz-surface-sunken);
}
.stzd-segmented > button,
.stzd-segmented > .nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--stz-control-h-sm);
min-width: var(--stz-control-h-sm);
padding: 0 var(--stz-space-3);
border: var(--stz-border-width-hairline) solid transparent;
border-radius: var(--stz-radius-tag);
background: none;
color: var(--stz-text-muted);
font-size: var(--stz-size-btn-sm);
font-weight: var(--stz-weight-medium);
letter-spacing: var(--stz-tracking-ui);
text-transform: uppercase;
cursor: pointer;
}
.stzd-segmented > button:hover { color: var(--stz-text); }
.stzd-segmented > [aria-pressed="true"],
.stzd-segmented > .active {
border-color: var(--stz-border-default);
background-color: var(--stz-surface-raised);
color: var(--stz-text);
}
/* ============================================================================
9. OVERLAYS: dropdowns, modals, offcanvas, toasts, alerts, tooltips, popovers
========================================================================= */
.stzd-body .dropdown-menu {
--bs-dropdown-zindex: var(--stz-z-dropdown);
--bs-dropdown-min-width: 200px;
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: var(--stz-space-1);
--bs-dropdown-font-size: var(--stz-size-label);
--bs-dropdown-color: var(--stz-text);
--bs-dropdown-bg: var(--stz-surface-panel);
--bs-dropdown-border-color: var(--stz-border-default);
--bs-dropdown-border-radius: var(--stz-radius-card);
--bs-dropdown-border-width: var(--stz-border-width-hairline);
--bs-dropdown-inner-border-radius: var(--stz-radius-card);
--bs-dropdown-divider-bg: var(--stz-border-hairline);
--bs-dropdown-divider-margin-y: var(--stz-space-1);
--bs-dropdown-box-shadow: var(--stz-shadow-menu);
--bs-dropdown-link-color: var(--stz-text);
--bs-dropdown-link-hover-color: var(--stz-text);
--bs-dropdown-link-hover-bg: var(--stz-surface-hover);
--bs-dropdown-link-active-color: var(--stz-text);
--bs-dropdown-link-active-bg: var(--stz-surface-hover);
--bs-dropdown-link-disabled-color: var(--stz-text-muted);
--bs-dropdown-item-padding-x: var(--stz-space-4);
--bs-dropdown-item-padding-y: var(--stz-space-2);
--bs-dropdown-header-color: var(--stz-text-muted);
--bs-dropdown-header-padding-x: var(--stz-space-4);
--bs-dropdown-header-padding-y: var(--stz-space-2);
box-shadow: var(--stz-shadow-menu);
}
.stzd-body .dropdown-item {
display: flex;
align-items: center;
gap: var(--stz-space-2);
min-height: var(--stz-control-h-sm);
text-decoration: none;
}
.stzd-body .dropdown-item > .bi { width: var(--stz-icon-sm); color: var(--stz-text-muted); }
.stzd-body .dropdown-item.is-danger,
.stzd-body .dropdown-item.is-danger > .bi { color: var(--stz-status-danger); }
.stzd-body .dropdown-item.active,
.stzd-body .dropdown-item:active { font-weight: var(--stz-weight-medium); }
.stzd-body .dropdown-header {
font-size: var(--stz-size-nano);
letter-spacing: var(--stz-tracking-overline);
text-transform: uppercase;
}
.stzd-body .dropdown-toggle.stzd-no-caret::after,
.stzd-body .stzd-iconbtn.dropdown-toggle::after,
.stzd-body .stzd-profile.dropdown-toggle::after,
.stzd-body .btn-icon.dropdown-toggle::after { display: none; }
/* Notification dropdown */
.stzd-notify { width: min(360px, calc(100vw - var(--stz-space-6))); padding: 0; }
.stzd-notify__head,
.stzd-notify__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-2);
padding: var(--stz-space-3) var(--stz-space-4);
}
.stzd-notify__head { border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzd-notify__foot { border-block-start: var(--stz-border-width-hairline) solid var(--stz-border-hairline); font-size: var(--stz-size-caption); }
.stzd-notify__list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.stzd-notify__list .dropdown-item { align-items: flex-start; white-space: normal; padding-block: var(--stz-space-3); }
/* Modal */
.stzd-body .modal {
--bs-modal-zindex: var(--stz-z-modal);
--bs-modal-padding: var(--stz-shell-gutter);
--bs-modal-color: var(--stz-text-muted);
--bs-modal-bg: var(--stz-surface-panel);
--bs-modal-border-color: var(--stz-border-default);
--bs-modal-border-width: var(--stz-border-width-hairline);
--bs-modal-border-radius: var(--stz-radius-card);
--bs-modal-inner-border-radius: var(--stz-radius-card);
--bs-modal-box-shadow: var(--stz-shadow-feature);
--bs-modal-header-padding: var(--stz-space-4) var(--stz-shell-gutter);
--bs-modal-header-border-color: var(--stz-border-hairline);
--bs-modal-footer-border-color: var(--stz-border-hairline);
--bs-modal-footer-gap: var(--stz-space-2);
--bs-modal-title-line-height: var(--stz-lh-label);
}
.stzd-body .modal-content { box-shadow: var(--stz-shadow-feature); }
.stzd-body .modal-title { font-size: var(--stz-size-title); color: var(--stz-text); }
.stzd-body .modal-backdrop {
--bs-backdrop-zindex: var(--stz-z-modal-backdrop);
--bs-backdrop-bg: var(--stz-midnight-950);
--bs-backdrop-opacity: 0.8;
}
/* Offcanvas (detail drawer) */
.stzd-body .offcanvas {
--bs-offcanvas-zindex: var(--stz-z-drawer);
--bs-offcanvas-width: min(var(--stz-drawer-w), 100vw);
--bs-offcanvas-padding-x: var(--stz-shell-gutter);
--bs-offcanvas-padding-y: var(--stz-space-4);
--bs-offcanvas-color: var(--stz-text-muted);
--bs-offcanvas-bg: var(--stz-surface-panel);
--bs-offcanvas-border-width: var(--stz-border-width-hairline);
--bs-offcanvas-border-color: var(--stz-border-default);
--bs-offcanvas-box-shadow: var(--stz-shadow-feature);
--bs-offcanvas-title-line-height: var(--stz-lh-label);
}
.stzd-body .offcanvas-header { border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline); }
.stzd-body .offcanvas-title { font-size: var(--stz-size-title); color: var(--stz-text); }
.stzd-body .offcanvas-backdrop { --bs-backdrop-bg: var(--stz-midnight-950); --bs-backdrop-opacity: 0.7; }
/* Close button (Bootstrap SVG; inverted on dark) */
.stzd-body .btn-close {
--bs-btn-close-opacity: 0.75;
--bs-btn-close-hover-opacity: 1;
--bs-btn-close-focus-shadow: none;
--bs-btn-close-focus-opacity: 1;
width: var(--stz-icon-xs);
height: var(--stz-icon-xs);
padding: var(--stz-space-2);
box-sizing: content-box;
filter: var(--_stzd-close-filter);
}
/* Toasts */
.stzd-body .toast-container { --bs-toast-zindex: var(--stz-z-toast); }
.stzd-body .toast {
--bs-toast-max-width: 380px;
--bs-toast-padding-x: var(--stz-space-4);
--bs-toast-padding-y: var(--stz-space-3);
--bs-toast-spacing: var(--stz-space-3);
--bs-toast-font-size: var(--stz-size-label);
--bs-toast-color: var(--stz-text);
--bs-toast-bg: var(--stz-surface-panel);
--bs-toast-border-width: var(--stz-border-width-hairline);
--bs-toast-border-color: var(--stz-border-default);
--bs-toast-border-radius: var(--stz-radius-card);
--bs-toast-box-shadow: var(--stz-shadow-menu);
--bs-toast-header-color: var(--stz-text);
--bs-toast-header-bg: transparent;
--bs-toast-header-border-color: var(--stz-border-hairline);
border-inline-start: var(--stz-dash-h) solid var(--_stzd-tone, var(--stz-border-default));
box-shadow: var(--stz-shadow-menu);
}
.stzd-body .toast .toast-body { display: flex; align-items: flex-start; gap: var(--stz-space-2); }
.stzd-body .toast .toast-body > .bi { color: var(--_stzd-tone, var(--stz-text-muted)); font-size: var(--stz-icon-sm); }
/* Tone modifiers shared by toasts, alerts, timeline nodes */
.stzd-tone-success { --_stzd-tone: var(--stz-status-success); }
.stzd-tone-info { --_stzd-tone: var(--stz-status-info); }
.stzd-tone-warning { --_stzd-tone: var(--stz-status-warning); }
.stzd-tone-danger { --_stzd-tone: var(--stz-status-danger); }
.stzd-tone-brand { --_stzd-tone: var(--stz-accent-text); }
.stzd-tone-neutral { --_stzd-tone: var(--stz-text-muted); }
/* Alert = left-rule on a sunken surface */
.stzd-body .alert,
.stzd-alert {
--bs-alert-bg: var(--stz-surface-sunken);
--bs-alert-color: var(--stz-text-muted);
--bs-alert-border-color: var(--stz-border-hairline);
--bs-alert-border-radius: var(--stz-radius-control);
--bs-alert-padding-x: var(--stz-space-4);
--bs-alert-padding-y: var(--stz-space-3);
--bs-alert-link-color: var(--stz-text);
display: flex;
align-items: flex-start;
gap: var(--stz-space-3);
margin-block-end: var(--stz-space-4);
background-color: var(--stz-surface-sunken);
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-inline-start: var(--stz-dash-h) solid var(--_stzd-tone, var(--stz-border-control));
border-radius: var(--stz-radius-control);
color: var(--stz-text-muted);
font-size: var(--stz-size-label);
}
.stzd-alert { padding: var(--stz-space-3) var(--stz-space-4); }
.stzd-body .alert > .bi:first-child,
.stzd-alert > .bi:first-child { flex: 0 0 auto; font-size: var(--stz-icon-sm); color: var(--_stzd-tone, var(--stz-text)); line-height: var(--stz-lh-label); }
.stzd-alert__body { flex: 1 1 auto; min-width: 0; }
.stzd-alert__title { display: block; margin-block-end: var(--stz-space-1); color: var(--stz-text); font-weight: var(--stz-weight-medium); }
.stzd-body .alert p:last-child,
.stzd-alert p:last-child { margin-block-end: 0; }
.stzd-body .alert-dismissible { padding-inline-end: var(--stz-space-4); }
.stzd-body .alert-dismissible .btn-close { position: static; flex: 0 0 auto; margin-inline-start: auto; }
/* Tooltip (light island on dark, dark island on light) + popover */
.stzd-body .tooltip {
--bs-tooltip-zindex: var(--stz-z-tooltip);
--bs-tooltip-max-width: 260px;
--bs-tooltip-padding-x: var(--stz-space-2);
--bs-tooltip-padding-y: var(--stz-space-1);
--bs-tooltip-font-size: var(--stz-size-caption);
--bs-tooltip-color: var(--stz-on-surface-inverse);
--bs-tooltip-bg: var(--stz-surface-inverse);
--bs-tooltip-border-radius: var(--stz-radius-control);
--bs-tooltip-opacity: 1;
font-family: var(--stz-font-body);
}
.stzd-body .popover {
--bs-popover-zindex: var(--stz-z-popover);
--bs-popover-max-width: 300px;
--bs-popover-font-size: var(--stz-size-label);
--bs-popover-bg: var(--stz-surface-panel);
--bs-popover-border-width: var(--stz-border-width-hairline);
--bs-popover-border-color: var(--stz-border-default);
--bs-popover-border-radius: var(--stz-radius-card);
--bs-popover-inner-border-radius: var(--stz-radius-card);
--bs-popover-box-shadow: var(--stz-shadow-menu);
--bs-popover-header-padding-x: var(--stz-space-4);
--bs-popover-header-padding-y: var(--stz-space-2);
--bs-popover-header-font-size: var(--stz-size-label);
--bs-popover-header-color: var(--stz-text);
--bs-popover-header-bg: var(--stz-surface-sunken);
--bs-popover-body-padding-x: var(--stz-space-4);
--bs-popover-body-padding-y: var(--stz-space-3);
--bs-popover-body-color: var(--stz-text-muted);
font-family: var(--stz-font-body);
box-shadow: var(--stz-shadow-menu);
}
.stzd-help-tip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--stz-touch-target-min);
min-height: var(--stz-touch-target-min);
padding: 0;
border: 0;
background: none;
color: var(--stz-text-muted);
cursor: help;
}
.stzd-help-tip:hover { color: var(--stz-text); }
/* ============================================================================
10. PROGRESS, AVATARS, LIST GROUPS, TIMELINE, BREADCRUMBS
========================================================================= */
.stzd-body .progress,
.stzd-body .progress-stacked {
--bs-progress-height: var(--stz-space-2);
--bs-progress-bg: var(--stz-chart-track);
--bs-progress-border-radius: var(--stz-radius-pill);
--bs-progress-bar-color: var(--stz-on-action-primary);
--bs-progress-bar-bg: var(--stz-action-primary);
--bs-progress-box-shadow: none;
}
.stzd-body .progress-bar { transition: none; }
.stzd-body .progress--sm { --bs-progress-height: var(--stz-space-1); }
.stzd-body .progress-bar.is-success { background-color: var(--stz-status-success); }
.stzd-body .progress-bar.is-warning { background-color: var(--stz-status-warning); }
.stzd-body .progress-bar.is-danger { background-color: var(--stz-status-danger); }
.stzd-body .progress-bar.is-neutral { background-color: var(--stz-chart-2); }
.stzd-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--stz-space-2) var(--stz-space-3); }
.stzd-meter__label { font-size: var(--stz-size-caption); color: var(--stz-text-muted); }
.stzd-meter__value { font-size: var(--stz-size-caption); color: var(--stz-text); font-variant-numeric: tabular-nums; text-align: end; }
.stzd-meter .progress { grid-column: 1 / -1; }
/* Avatars: initials by default (no stock people photos). */
.stzd-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--stz-avatar-xs);
height: var(--stz-avatar-xs);
border: var(--stz-border-width-hairline) solid var(--stz-border-default);
border-radius: var(--stz-radius-round);
background-color: var(--stz-surface-raised);
color: var(--stz-text);
font-size: var(--stz-size-micro);
font-weight: var(--stz-weight-bold);
letter-spacing: var(--stz-tracking-ui);
text-transform: uppercase;
line-height: 1;
user-select: none;
}
.stzd-avatar > img { width: 100%; height: 100%; border-radius: var(--stz-radius-round); object-fit: cover; }
.stzd-avatar--sm { width: var(--stz-avatar-sm); height: var(--stz-avatar-sm); font-size: var(--stz-size-label); }
.stzd-avatar--md { width: var(--stz-avatar-md); height: var(--stz-avatar-md); font-size: var(--stz-size-title); }
.stzd-avatar--lg { width: var(--stz-avatar-lg); height: var(--stz-avatar-lg); font-size: var(--stz-size-title-lg); }
.stzd-avatar--brand { border-color: var(--stz-surface-brand); background-color: var(--stz-surface-brand); color: var(--stz-on-surface-brand); }
.stzd-avatar--me { border: var(--stz-border-width-strong) solid var(--stz-border-accent); }
.stzd-avatar__status {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
width: var(--stz-space-2);
height: var(--stz-space-2);
border: var(--stz-border-width-strong) solid var(--stz-surface-panel);
border-radius: var(--stz-radius-round);
background-color: var(--_stzd-tone, var(--stz-status-neutral));
box-sizing: content-box;
}
.stzd-avatar-group { display: inline-flex; align-items: center; }
.stzd-avatar-group > .stzd-avatar {
border: var(--stz-border-width-strong) solid var(--stz-surface-panel);
box-sizing: content-box;
}
.stzd-avatar-group > .stzd-avatar + .stzd-avatar { margin-inline-start: calc(-1 * var(--stz-space-2)); }
/* List group */
.stzd-body .list-group {
--bs-list-group-color: var(--stz-text);
--bs-list-group-bg: transparent;
--bs-list-group-border-color: var(--stz-border-hairline);
--bs-list-group-border-width: var(--stz-border-width-hairline);
--bs-list-group-border-radius: var(--stz-radius-card);
--bs-list-group-item-padding-x: var(--stz-shell-gutter);
--bs-list-group-item-padding-y: var(--stz-space-3);
--bs-list-group-action-color: var(--stz-text);
--bs-list-group-action-hover-color: var(--stz-text);
--bs-list-group-action-hover-bg: var(--stz-surface-hover);
--bs-list-group-action-active-color: var(--stz-text);
--bs-list-group-action-active-bg: var(--stz-surface-hover);
--bs-list-group-disabled-color: var(--stz-text-muted);
--bs-list-group-disabled-bg: transparent;
--bs-list-group-active-color: var(--stz-text);
--bs-list-group-active-bg: var(--stz-accent-subtle);
--bs-list-group-active-border-color: var(--stz-border-hairline);
}
.stzd-body .list-group-item { display: flex; align-items: center; gap: var(--stz-space-3); font-size: var(--stz-size-label); }
.stzd-body .list-group-item-action { text-decoration: none; }
.stzd-list-item__main { flex: 1 1 auto; min-width: 0; }
.stzd-list-item__title { display: block; color: var(--stz-text); font-weight: var(--stz-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stzd-list-item__sub { display: block; font-size: var(--stz-size-caption); color: var(--stz-text-muted); }
.stzd-list-item__end { flex: 0 0 auto; text-align: end; }
/* Ranked list with outlined numerals (conference 01/02/03 motif) */
.stzd-ranked { list-style: none; margin: 0; padding: 0; }
.stzd-ranked > li {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--stz-space-2) var(--stz-space-4);
padding-block: var(--stz-space-3);
border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stzd-ranked > li:last-child { border-block-end: 0; }
.stzd-ranked__num {
min-width: var(--stz-pictogram);
font-size: var(--stz-size-h5);
font-weight: var(--stz-weight-bold);
line-height: var(--stz-leading-numeral);
letter-spacing: var(--stz-tracking-tight);
color: transparent;
-webkit-text-stroke: var(--stz-border-width-hairline) var(--stz-numeral-stroke);
font-variant-numeric: tabular-nums;
}
.stzd-ranked__bar { grid-column: 2 / -1; }
/* Timeline / activity feed */
.stzd-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.stzd-timeline > li {
position: relative;
display: grid;
grid-template-columns: var(--stz-avatar-xs) minmax(0, 1fr) auto;
gap: var(--stz-space-3);
padding-block-end: var(--stz-space-5);
}
.stzd-timeline > li:last-child { padding-block-end: 0; }
.stzd-timeline > li::before {
content: "";
position: absolute;
inset-block: var(--stz-avatar-xs) 0;
inset-inline-start: calc(var(--stz-avatar-xs) / 2);
width: var(--stz-border-width-hairline);
background-color: var(--stz-border-hairline);
}
.stzd-timeline > li:last-child::before { display: none; }
.stzd-timeline__node {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--stz-avatar-xs);
height: var(--stz-avatar-xs);
border: var(--stz-border-width-hairline) solid var(--stz-border-default);
border-radius: var(--stz-radius-round);
background-color: var(--stz-surface-panel);
color: var(--_stzd-tone, var(--stz-text-muted));
font-size: var(--stz-icon-xs);
}
.stzd-timeline__title { margin: 0; color: var(--stz-text); font-size: var(--stz-size-label); font-weight: var(--stz-weight-medium); }
.stzd-timeline__text { margin: var(--stz-space-1) 0 0; font-size: var(--stz-size-caption); color: var(--stz-text-muted); }
.stzd-timeline__time { font-size: var(--stz-size-micro); color: var(--stz-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Breadcrumb */
.stzd-body .breadcrumb {
--bs-breadcrumb-margin-bottom: 0;
--bs-breadcrumb-font-size: var(--stz-size-caption);
--bs-breadcrumb-divider-color: var(--stz-text-muted);
--bs-breadcrumb-item-active-color: var(--stz-text);
--bs-breadcrumb-item-padding-x: var(--stz-space-2);
align-items: center;
}
.stzd-body .breadcrumb-item a { color: var(--stz-text-muted); text-decoration: none; }
.stzd-body .breadcrumb-item a:hover { color: var(--stz-link-hover); text-decoration: underline; }
.stzd-body .breadcrumb-item.active { font-weight: var(--stz-weight-medium); }
/* Definition list (detail panels, invoice meta) */
.stzd-dl { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: var(--stz-space-2) var(--stz-space-4); margin: 0; font-size: var(--stz-size-label); }
.stzd-dl dt { font-weight: var(--stz-weight-regular); color: var(--stz-text-muted); }
.stzd-dl dd { margin: 0; color: var(--stz-text); }
/* ============================================================================
11. MOTIFS + LOADERS
========================================================================= */
/* Crimson "_" dash before a heading (conference motif). */
.stzd-dash::before {
content: "";
display: inline-block;
width: var(--stz-dash-w);
height: var(--stz-dash-h);
margin-inline-end: var(--stz-dash-gap);
background-color: var(--stz-dash-color);
vertical-align: baseline;
}
.stzd-dash--sm::before { width: calc(var(--stz-dash-w) * 0.6); height: calc(var(--stz-dash-h) * 0.75); margin-inline-end: var(--stz-space-2); }
/* Outline numeral (decorative: aria-hidden="true") */
.stzd-numeral {
display: inline-block;
font-family: var(--stz-font-display);
font-size: var(--stz-size-numeral);
font-weight: var(--stz-weight-medium);
line-height: var(--stz-leading-numeral);
letter-spacing: var(--stz-tracking-display);
color: transparent;
-webkit-text-stroke: var(--stz-numeral-stroke-width) var(--stz-numeral-stroke);
user-select: none;
}
.stzd-numeral--stat { font-size: var(--stz-size-display-stat); }
.stzd-numeral--sm { font-size: var(--stz-size-h3); letter-spacing: var(--stz-tracking-tight); }
/* Crimson arc / ring decor (decorative: aria-hidden="true"; parent needs position+overflow hidden) */
.stzd-decor-host { position: relative; overflow: hidden; isolation: isolate; }
.stzd-arc {
position: absolute;
z-index: -1;
width: calc(var(--stz-arc-radius) * 2);
height: calc(var(--stz-arc-radius) * 2);
border: var(--stz-arc-band) solid var(--stz-arc-color);
border-radius: var(--stz-radius-round);
pointer-events: none;
}
.stzd-arc--sm {
width: calc(var(--stz-arc-radius) * 0.9);
height: calc(var(--stz-arc-radius) * 0.9);
border-width: var(--stz-arc-band-sm);
}
.stzd-arc--xs {
width: calc(var(--stz-arc-radius) * 0.5);
height: calc(var(--stz-arc-radius) * 0.5);
border-width: calc(var(--stz-arc-band-sm) * 0.5);
}
.stzd-arc--faint { opacity: 0.18; }
.stzd-arc--tr { inset-block-start: 0; inset-inline-end: 0; transform: translate(45%, -55%); }
.stzd-arc--bl { inset-block-end: 0; inset-inline-start: 0; transform: translate(-45%, 55%); }
.stzd-arc--br { inset-block-end: 0; inset-inline-end: 0; transform: translate(45%, 55%); }
.stzd-arc--tl { inset-block-start: 0; inset-inline-start: 0; transform: translate(-45%, -55%); }
/* Brand hero card (crimson field: use on-surface-brand text + focus-ring-on-brand) */
.stzd-card--brand {
background-color: var(--stz-surface-brand);
border-color: var(--stz-surface-brand);
color: var(--stz-on-surface-brand);
}
.stzd-card--brand :where(h1, h2, h3, h4, h5, h6, p, span, dt, dd, .stzd-card__title, .stzd-card__sub, .stzd-overline) { color: var(--stz-on-surface-brand); }
.stzd-card--brand :where(a, button, .btn):focus-visible { outline: var(--stz-focus-ring-on-brand); }
.stzd-card--brand .stzd-arc { border-color: var(--stz-on-surface-brand); opacity: 0.12; }
.stzd-body .stzd-card--brand .btn-light,
.stzd-body .stzd-card--brand .btn-outline {
--bs-btn-color: var(--stz-on-surface-brand);
--bs-btn-border-color: var(--stz-on-surface-brand);
--bs-btn-hover-color: var(--stz-surface-brand);
--bs-btn-hover-bg: var(--stz-on-surface-brand);
--bs-btn-hover-border-color: var(--stz-on-surface-brand);
--bs-btn-active-color: var(--stz-surface-brand);
--bs-btn-active-bg: var(--stz-on-surface-brand);
}
/* Shell hero card: always-dark panel with crimson arc (mark the element data-theme="dark"). */
.stzd-card--shell { background-color: var(--stz-surface-shell); color: var(--stz-on-surface-shell-muted); }
/* Skeleton */
.stzd-skeleton {
display: block;
min-height: var(--stz-space-3);
border-radius: var(--stz-radius-control);
background-color: var(--stz-surface-hover);
background-image: linear-gradient(90deg, transparent 0%, var(--stz-border-hairline) 50%, transparent 100%);
background-size: 200% 100%;
background-position: 100% 0;
background-repeat: no-repeat;
}
.stzd-skeleton--text { height: var(--stz-space-3); margin-block: var(--stz-space-1); }
.stzd-skeleton--title { height: var(--stz-space-5); width: 50%; }
.stzd-skeleton--block { height: var(--stz-chart-h-spark); }
.stzd-skeleton--circle { width: var(--stz-avatar-xs); height: var(--stz-avatar-xs); border-radius: var(--stz-radius-round); }
.stzd-body .placeholder { background-color: var(--stz-surface-hover); opacity: 1; border-radius: var(--stz-radius-tag); }
.stzd-body .spinner-border { --bs-spinner-border-width: var(--stz-border-width-strong); color: currentColor; }
/* ============================================================================
12. KANBAN, INVOICE, AUTH, ERROR
========================================================================= */
.stzd-kanban {
display: flex;
align-items: flex-start;
gap: var(--stz-shell-gutter);
overflow-x: auto;
padding-block-end: var(--stz-space-3);
}
.stzd-kanban__col {
display: flex;
flex-direction: column;
flex: 0 0 var(--stz-kanban-col-w);
max-width: 85vw;
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-radius: var(--stz-radius-card);
background-color: var(--stz-surface-sunken);
}
.stzd-kanban__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--stz-space-2);
padding: var(--stz-space-3) var(--stz-space-4);
border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stzd-kanban__title { margin: 0; font-size: var(--stz-size-label); color: var(--stz-text); }
.stzd-kanban__list { display: grid; gap: var(--stz-space-2); list-style: none; margin: 0; padding: var(--stz-space-3); min-height: var(--stz-chart-h-spark); }
.stzd-kanban__card {
display: grid;
gap: var(--stz-space-2);
padding: var(--stz-space-3);
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-inline-start: var(--stz-border-width-strong) solid var(--_stzd-tone, var(--stz-border-default));
border-radius: var(--stz-radius-control);
background-color: var(--stz-surface-panel);
font-size: var(--stz-size-caption);
}
.stzd-kanban__card:hover { border-color: var(--stz-border-default); border-inline-start-color: var(--_stzd-tone, var(--stz-border-control)); }
.stzd-kanban__card-title { margin: 0; color: var(--stz-text); font-size: var(--stz-size-label); font-weight: var(--stz-weight-medium); }
/* Invoice document — mark .stzd-invoice with data-theme="light" for the paper look in both themes. */
.stzd-invoice {
position: relative;
overflow: hidden;
isolation: isolate;
padding: var(--stz-space-10);
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-radius: var(--stz-radius-card);
background-color: var(--stz-surface-panel);
color: var(--stz-text-muted);
font-size: var(--stz-size-label);
}
.stzd-invoice__head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--stz-space-6);
padding-block-end: var(--stz-space-6);
border-block-end: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
}
.stzd-invoice .stzd-wordmark { color: var(--stz-text); }
.stzd-invoice__title { margin: 0; font-size: var(--stz-size-h5); font-weight: var(--stz-weight-medium); letter-spacing: var(--stz-tracking-tight); color: var(--stz-text); }
.stzd-invoice__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--stz-space-4) var(--stz-space-6);
padding-block: var(--stz-space-6);
}
.stzd-invoice__meta dt { font-size: var(--stz-size-micro); letter-spacing: var(--stz-tracking-overline); text-transform: uppercase; color: var(--stz-text-muted); }
.stzd-invoice__meta dd { margin: var(--stz-space-1) 0 0; color: var(--stz-text); }
.stzd-invoice__due { font-size: var(--stz-size-h6); font-weight: var(--stz-weight-medium); font-variant-numeric: tabular-nums; }
.stzd-invoice__totals { display: grid; justify-content: end; margin-block-start: var(--stz-space-4); }
.stzd-invoice__totals .stzd-dl { grid-template-columns: auto minmax(120px, auto); text-align: end; }
.stzd-invoice__totals .stzd-dl dd { font-variant-numeric: tabular-nums; }
.stzd-invoice__grand { padding-block-start: var(--stz-space-2); border-block-start: var(--stz-border-width-hairline) solid var(--stz-border-hairline); font-size: var(--stz-size-body-lg); font-weight: var(--stz-weight-bold); }
.stzd-invoice__foot { margin-block-start: var(--stz-space-8); padding-block-start: var(--stz-space-4); border-block-start: var(--stz-border-width-hairline) solid var(--stz-border-hairline); font-size: var(--stz-size-caption); }
@media (max-width: 575.98px) {
.stzd-invoice { padding: var(--stz-space-4); }
}
/* Auth screens (no shell) */
.stzd-auth {
position: relative;
overflow: hidden;
isolation: isolate;
display: grid;
place-items: center;
min-height: 100vh;
min-height: 100dvh;
padding: var(--stz-space-8) var(--stz-space-3);
background-color: var(--stz-surface-canvas);
}
.stzd-auth__inner { width: 100%; max-width: var(--stz-auth-card-w); }
.stzd-auth__brand { display: flex; justify-content: center; margin-block-end: var(--stz-space-6); }
.stzd-auth__brand .stzd-wordmark { color: var(--stz-text); font-size: var(--stz-size-h6); }
.stzd-body .stzd-auth__brand a.stzd-wordmark,
.stzd-body .stzd-auth__brand a.stzd-wordmark:hover { color: var(--stz-text); }
.stzd-auth__card {
padding: var(--stz-space-8);
border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
border-radius: var(--stz-radius-card);
background-color: var(--stz-surface-panel);
box-shadow: var(--stz-shadow-card);
}
.stzd-auth__title { margin: 0; font-size: var(--stz-size-h6); letter-spacing: var(--stz-tracking-tight); color: var(--stz-text); }
.stzd-auth__lead { margin: var(--stz-space-2) 0 var(--stz-space-6); color: var(--stz-text-muted); }
.stzd-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--stz-space-2); margin-block: var(--stz-space-3) var(--stz-space-5); }
.stzd-auth__alt { margin: var(--stz-space-5) 0 0; text-align: center; font-size: var(--stz-size-label); }
.stzd-auth__legal { margin: var(--stz-space-6) 0 0; text-align: center; font-size: var(--stz-size-caption); color: var(--stz-text-muted); }
.stzd-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--stz-space-2); }
.stzd-otp .form-control { text-align: center; font-size: var(--stz-size-title); font-variant-numeric: tabular-nums; padding-inline: 0; }
@media (max-width: 575.98px) {
.stzd-auth__card { padding: var(--stz-space-5) var(--stz-space-4); }
}
/* Error page */
.stzd-error {
position: relative;
overflow: hidden;
isolation: isolate;
display: grid;
place-items: center;
min-height: 100vh;
min-height: 100dvh;
padding: var(--stz-space-8) var(--stz-space-3);
background-color: var(--stz-surface-canvas);
text-align: center;
}
.stzd-error__inner { max-width: 560px; }
.stzd-error .stzd-numeral { font-size: clamp(var(--stz-size-h1), 22vw, var(--stz-size-display-hero-solid)); }
.stzd-error__title { margin: var(--stz-space-4) 0 var(--stz-space-2); font-size: var(--stz-size-h6); letter-spacing: var(--stz-tracking-tight); color: var(--stz-text); }
.stzd-error__text { margin: 0 auto var(--stz-space-6); max-width: 44ch; color: var(--stz-text-muted); }
.stzd-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--stz-space-2); }
/* ============================================================================
13. MOTION — kill Bootstrap's colour/size transitions, then re-add allowed ones
========================================================================= */
.stzd-body .btn,
.stzd-body .form-control,
.stzd-body .form-select,
.stzd-body .form-check-input,
.stzd-body .form-switch .form-check-input,
.stzd-body .nav-link,
.stzd-body .page-link,
.stzd-body .list-group-item,
.stzd-body .accordion-button,
.stzd-body .navbar-toggler,
.stzd-body .form-range::-webkit-slider-thumb {
transition: none;
}
@media (prefers-reduced-motion: no-preference) {
.stzd-body .btn-primary {
transition: transform var(--stz-duration-standard) var(--stz-ease-lift);
}
.stzd-body .btn-primary:hover:not(:disabled) { transform: translateY(var(--stz-btn-lift)); }
.stzd-body .form-switch .form-check-input {
transition: background-position var(--stz-duration-fast) var(--stz-ease-in-out);
}
.stzd-nav__caret,
.stzd-sort > .bi {
transition: transform var(--stz-duration-quick) var(--stz-ease-in-out);
}
.stzd-scrim {
transition: opacity var(--stz-duration-standard) var(--stz-ease-in-out),
visibility var(--stz-duration-standard) var(--stz-ease-in-out);
}
.stzd-skip { transition: transform var(--stz-duration-quick) var(--stz-ease-out-cubic); }
.stzd-skeleton { animation: stzd-shimmer var(--stz-duration-ambient) var(--stz-ease-linear) infinite; }
.stzd-kpi__icon--sm {
width: var(--stz-control-h-sm);
height: var(--stz-control-h-sm);
font-size: var(--stz-icon-xs);
}
.stzd-kpi__icon--brand { transition: transform var(--stz-duration-emphasis) var(--stz-ease-standard); }
.stzd-kpi:hover .stzd-kpi__icon--sm {
width: var(--stz-control-h-sm);
height: var(--stz-control-h-sm);
font-size: var(--stz-icon-xs);
}
.stzd-kpi__icon--brand { transform: rotate(-8deg); }
.stzd-arc--spin { animation: stzd-spin var(--stz-duration-rotation) var(--stz-ease-linear) infinite; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 991.98px) {
.stzd-sidebar {
transition: transform var(--stz-duration-standard) var(--stz-ease-out-cubic),
visibility var(--stz-duration-standard) var(--stz-ease-linear);
}
/* opening: become visible (and focusable) immediately, then slide */
.stzd-sidebar-open .stzd-sidebar {
transition: transform var(--stz-duration-standard) var(--stz-ease-out-cubic), visibility 0s linear;
}
}
@keyframes stzd-shimmer {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
@keyframes stzd-spin {
to { transform: rotate(360deg); }
}
/* ============================================================================
14. PRINT
========================================================================= */
@media print {
.stzd-sidebar,
.stzd-topbar,
.stzd-footer,
.stzd-page-actions,
.stzd-scrim,
.stzd-no-print,
.toast-container { display: none; }
.stzd-app { display: block; }
.stzd-content { padding: 0; }
.stzd-card,
.stzd-invoice { border: 0; box-shadow: none; }
.stzd-invoice { padding: 0; }
.stzd-arc { display: none; }
}