/* ─────────────────────────────────────────────────────────────────────────
* Diverse CTI · Component Stylesheet
* Reads from tokens.css. All classes are namespaced `dcti-*` so they can
* sit alongside any other framework without collision.
*
* Usage:
*
*
*
*
*
* Components in this file:
* layout .dcti-app, .dcti-sidebar, .dcti-topbar, .dcti-content
* text .dcti-eyebrow, .dcti-mono
* button .dcti-btn (+ --primary/--secondary/--ghost/--danger, --sm/--lg)
* form .dcti-input, .dcti-select, .dcti-search, .dcti-toggle, .dcti-check
* surface .dcti-card, .dcti-card__head, .dcti-card__body, .dcti-card__foot
* data .dcti-kpi, .dcti-table
* status .dcti-pill (+ --success/--warn/--danger/--accent), .dcti-banner
* nav .dcti-nav, .dcti-nav__item, .dcti-nav__group
* misc .dcti-icon, .dcti-divider, .dcti-kbd, .dcti-avatar
* ───────────────────────────────────────────────────────────────────────── */
/* ─── Reset (minimal) ───────────────────────────────────────────────── */
.dcti-reset *,
.dcti-reset *::before,
.dcti-reset *::after { box-sizing: border-box; }
.dcti-reset { margin: 0; }
html, body {
background: var(--dcti-bg);
color: var(--dcti-text);
font-family: var(--dcti-font-sans);
font-size: var(--dcti-text-md);
line-height: var(--dcti-leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: var(--dcti-accent-muted);
color: var(--dcti-text);
}
/* ─── Text utilities ────────────────────────────────────────────────── */
.dcti-eyebrow {
font-family: var(--dcti-font-mono);
font-size: var(--dcti-text-xs);
font-weight: 600;
letter-spacing: var(--dcti-tracking-wide);
text-transform: uppercase;
color: var(--dcti-text-faint);
}
.dcti-mono {
font-family: var(--dcti-font-mono);
font-variant-numeric: tabular-nums;
}
.dcti-muted { color: var(--dcti-text-muted); }
.dcti-faint { color: var(--dcti-text-faint); }
h1.dcti, .dcti-h1 {
font-size: var(--dcti-text-2xl);
font-weight: 700;
letter-spacing: var(--dcti-tracking-tight);
line-height: var(--dcti-leading-tight);
color: var(--dcti-text);
margin: 0;
}
h2.dcti, .dcti-h2 {
font-size: var(--dcti-text-xl);
font-weight: 600;
letter-spacing: -0.01em;
line-height: var(--dcti-leading-snug);
color: var(--dcti-text);
margin: 0;
}
h3.dcti, .dcti-h3 {
font-size: var(--dcti-text-lg);
font-weight: 600;
line-height: var(--dcti-leading-snug);
color: var(--dcti-text);
margin: 0;
}
/* ─── Buttons ───────────────────────────────────────────────────────── */
.dcti-btn {
--_h: var(--dcti-control-md);
--_pad: var(--dcti-space-3);
--_fs: var(--dcti-text-sm);
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--dcti-space-2);
height: var(--_h);
padding: 0 var(--_pad);
border: 1px solid transparent;
border-radius: var(--dcti-radius-md);
font-family: inherit;
font-size: var(--_fs);
font-weight: 600;
line-height: 1;
letter-spacing: -0.005em;
cursor: pointer;
white-space: nowrap;
user-select: none;
transition:
background var(--dcti-duration-fast) var(--dcti-ease),
border-color var(--dcti-duration-fast) var(--dcti-ease),
color var(--dcti-duration-fast) var(--dcti-ease),
box-shadow var(--dcti-duration-fast) var(--dcti-ease);
}
.dcti-btn:focus-visible { outline: none; box-shadow: var(--dcti-focus-ring); }
.dcti-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dcti-btn--sm { --_h: var(--dcti-control-sm); --_pad: var(--dcti-space-2); --_fs: var(--dcti-text-xs); }
.dcti-btn--lg { --_h: var(--dcti-control-lg); --_pad: var(--dcti-space-4); --_fs: var(--dcti-text-md); }
.dcti-btn--primary {
background: var(--dcti-accent);
color: var(--dcti-on-accent);
}
.dcti-btn--primary:hover:not(:disabled) { background: var(--dcti-accent-hover); }
.dcti-btn--secondary {
background: var(--dcti-surface);
color: var(--dcti-text);
border-color: var(--dcti-border-strong);
}
.dcti-btn--secondary:hover:not(:disabled) { background: var(--dcti-surface-2); }
.dcti-btn--ghost {
background: transparent;
color: var(--dcti-text);
}
.dcti-btn--ghost:hover:not(:disabled) { background: var(--dcti-surface-2); }
.dcti-btn--danger {
background: var(--dcti-danger);
color: #FFFFFF;
}
.dcti-btn--danger:hover:not(:disabled) { filter: brightness(0.94); }
/* ─── Form controls ────────────────────────────────────────────────── */
.dcti-input,
.dcti-select {
appearance: none;
display: inline-flex;
align-items: center;
width: 100%;
height: var(--dcti-control-md);
padding: 0 var(--dcti-space-3);
background: var(--dcti-surface);
color: var(--dcti-text);
border: 1px solid var(--dcti-border-strong);
border-radius: var(--dcti-radius-md);
font-family: inherit;
font-size: var(--dcti-text-sm);
line-height: 1;
outline: none;
transition: border-color var(--dcti-duration-fast) var(--dcti-ease),
box-shadow var(--dcti-duration-fast) var(--dcti-ease);
}
.dcti-input::placeholder { color: var(--dcti-text-faint); }
.dcti-input:focus,
.dcti-select:focus { border-color: var(--dcti-accent); box-shadow: var(--dcti-focus-ring); }
.dcti-input:disabled,
.dcti-select:disabled { background: var(--dcti-surface-2); color: var(--dcti-text-faint); cursor: not-allowed; }
.dcti-select {
padding-right: 28px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
.dcti-search {
display: flex;
align-items: center;
gap: var(--dcti-space-2);
width: 100%;
height: var(--dcti-control-md);
padding: 0 var(--dcti-space-3);
background: var(--dcti-surface);
color: var(--dcti-text-faint);
border: 1px solid var(--dcti-border-strong);
border-radius: var(--dcti-radius-md);
font-size: var(--dcti-text-sm);
}
.dcti-search input {
flex: 1;
background: transparent;
border: 0;
outline: none;
color: var(--dcti-text);
font: inherit;
min-width: 0;
}
.dcti-search input::placeholder { color: var(--dcti-text-faint); }
.dcti-label {
display: block;
font-size: var(--dcti-text-sm);
font-weight: 500;
color: var(--dcti-text-muted);
margin-bottom: var(--dcti-space-1);
}
.dcti-field {
display: flex;
flex-direction: column;
gap: var(--dcti-space-1);
}
.dcti-field__help {
font-size: var(--dcti-text-xs);
color: var(--dcti-text-faint);
}
.dcti-field--error .dcti-input,
.dcti-field--error .dcti-select { border-color: var(--dcti-danger); }
.dcti-field--error .dcti-field__help { color: var(--dcti-danger); }
/* Toggle (binary on/off switch) */
.dcti-toggle {
--_w: 32px;
--_h: 18px;
--_pad: 1px;
appearance: none;
position: relative;
width: var(--_w);
height: var(--_h);
padding: 0;
border: 1px solid var(--dcti-border-strong);
border-radius: var(--dcti-radius-pill);
background: var(--dcti-surface-2);
cursor: pointer;
transition: background var(--dcti-duration-fast) var(--dcti-ease),
border-color var(--dcti-duration-fast) var(--dcti-ease);
}
.dcti-toggle::after {
content: "";
position: absolute;
top: var(--_pad);
left: var(--_pad);
width: calc(var(--_h) - 2 * var(--_pad) - 2px);
height: calc(var(--_h) - 2 * var(--_pad) - 2px);
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform var(--dcti-duration-fast) var(--dcti-ease);
}
.dcti-toggle[aria-checked="true"],
.dcti-toggle:checked {
background: var(--dcti-accent);
border-color: var(--dcti-accent);
}
.dcti-toggle[aria-checked="true"]::after,
.dcti-toggle:checked::after {
transform: translateX(calc(var(--_w) - var(--_h)));
}
.dcti-toggle:focus-visible { outline: none; box-shadow: var(--dcti-focus-ring); }
/* Checkbox */
.dcti-check {
--_s: 16px;
appearance: none;
width: var(--_s);
height: var(--_s);
border: 1px solid var(--dcti-border-strong);
border-radius: var(--dcti-radius-sm);
background: var(--dcti-surface);
cursor: pointer;
display: inline-grid;
place-items: center;
transition: background var(--dcti-duration-fast) var(--dcti-ease),
border-color var(--dcti-duration-fast) var(--dcti-ease);
position: relative;
}
.dcti-check:checked,
.dcti-check[aria-checked="true"] {
background: var(--dcti-accent);
border-color: var(--dcti-accent);
}
.dcti-check:checked::after,
.dcti-check[aria-checked="true"]::after {
content: "";
width: 9px;
height: 5px;
border-left: 2px solid var(--dcti-on-accent);
border-bottom: 2px solid var(--dcti-on-accent);
transform: translateY(-1px) rotate(-45deg);
}
.dcti-check:focus-visible { outline: none; box-shadow: var(--dcti-focus-ring); }
/* Inline option row — used to wrap toggles + checkboxes with their label */
.dcti-option {
display: inline-flex;
align-items: center;
gap: var(--dcti-space-2);
font-size: var(--dcti-text-sm);
color: var(--dcti-text-muted);
cursor: pointer;
user-select: none;
}
/* ─── Surfaces ──────────────────────────────────────────────────────── */
.dcti-card {
background: var(--dcti-surface);
border: 1px solid var(--dcti-border);
border-radius: var(--dcti-radius-lg);
overflow: hidden;
}
.dcti-card--quiet { background: var(--dcti-surface-2); }
.dcti-card--elevated { box-shadow: var(--dcti-shadow-md); }
.dcti-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dcti-space-3);
padding: var(--dcti-space-4);
border-bottom: 1px solid var(--dcti-border);
}
.dcti-card__head h3 {
margin: 0;
font-size: var(--dcti-text-md);
font-weight: 600;
color: var(--dcti-text);
}
.dcti-card__body { padding: var(--dcti-space-4); }
.dcti-card__foot {
padding: var(--dcti-space-3) var(--dcti-space-4);
border-top: 1px solid var(--dcti-border);
background: var(--dcti-surface-2);
display: flex;
gap: var(--dcti-space-2);
justify-content: flex-end;
}
/* KPI card — metric + delta */
.dcti-kpi {
background: var(--dcti-surface);
border: 1px solid var(--dcti-border);
border-radius: var(--dcti-radius-lg);
padding: var(--dcti-space-4);
}
.dcti-kpi__label {
font-family: var(--dcti-font-mono);
font-size: var(--dcti-text-xs);
font-weight: 600;
letter-spacing: var(--dcti-tracking-wide);
text-transform: uppercase;
color: var(--dcti-text-faint);
}
.dcti-kpi__value {
display: flex;
align-items: baseline;
gap: var(--dcti-space-2);
margin-top: var(--dcti-space-1);
}
.dcti-kpi__value strong {
font-size: var(--dcti-text-2xl);
font-weight: 700;
letter-spacing: var(--dcti-tracking-tight);
color: var(--dcti-text);
font-variant-numeric: tabular-nums;
}
.dcti-kpi__delta {
font-family: var(--dcti-font-mono);
font-size: var(--dcti-text-xs);
font-weight: 600;
}
.dcti-kpi__delta--up { color: var(--dcti-success); }
.dcti-kpi__delta--down { color: var(--dcti-danger); }
.dcti-kpi__delta--good { color: var(--dcti-success); }
/* ─── Status ────────────────────────────────────────────────────────── */
.dcti-pill {
display: inline-flex;
align-items: center;
gap: var(--dcti-space-1);
padding: 3px 9px;
background: var(--dcti-surface-2);
color: var(--dcti-text-muted);
border: 1px solid var(--dcti-border);
border-radius: var(--dcti-radius-pill);
font-size: var(--dcti-text-xs);
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.dcti-pill__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
display: inline-block;
flex-shrink: 0;
}
.dcti-pill--accent { background: var(--dcti-accent-muted); color: var(--dcti-accent); border-color: var(--dcti-accent-border); }
.dcti-pill--success { background: var(--dcti-success-muted); color: var(--dcti-success); border-color: var(--dcti-success-border); }
.dcti-pill--warn { background: var(--dcti-warn-muted); color: var(--dcti-warn); border-color: var(--dcti-warn-border); }
.dcti-pill--danger { background: var(--dcti-danger-muted); color: var(--dcti-danger); border-color: var(--dcti-danger-border); }
.dcti-pill--info { background: var(--dcti-info-muted); color: var(--dcti-info); border-color: var(--dcti-info-border); }
.dcti-banner {
display: flex;
align-items: center;
gap: var(--dcti-space-3);
padding: var(--dcti-space-3) var(--dcti-space-4);
background: var(--dcti-surface);
color: var(--dcti-text);
border: 1px solid var(--dcti-border);
border-radius: var(--dcti-radius-md);
font-size: var(--dcti-text-sm);
}
.dcti-banner__icon { color: var(--dcti-text-faint); display: inline-flex; flex-shrink: 0; }
.dcti-banner__body { flex: 1; min-width: 0; }
.dcti-banner__actions { display: flex; gap: var(--dcti-space-2); }
.dcti-banner--accent { background: var(--dcti-accent-muted); border-color: var(--dcti-accent-border); }
.dcti-banner--accent .dcti-banner__icon { color: var(--dcti-accent); }
.dcti-banner--success { background: var(--dcti-success-muted); border-color: var(--dcti-success-border); }
.dcti-banner--success .dcti-banner__icon { color: var(--dcti-success); }
.dcti-banner--warn { background: var(--dcti-warn-muted); border-color: var(--dcti-warn-border); }
.dcti-banner--warn .dcti-banner__icon { color: var(--dcti-warn); }
.dcti-banner--danger { background: var(--dcti-danger-muted); border-color: var(--dcti-danger-border); }
.dcti-banner--danger .dcti-banner__icon { color: var(--dcti-danger); }
/* ─── Tables ────────────────────────────────────────────────────────── */
.dcti-table {
width: 100%;
border-collapse: collapse;
font-size: var(--dcti-text-sm);
}
.dcti-table th,
.dcti-table td {
text-align: left;
padding: var(--dcti-space-2) var(--dcti-space-3);
border-bottom: 1px solid var(--dcti-border);
vertical-align: middle;
}
.dcti-table th {
font-family: var(--dcti-font-mono);
font-size: var(--dcti-text-xs);
font-weight: 600;
letter-spacing: var(--dcti-tracking-wide);
text-transform: uppercase;
color: var(--dcti-text-faint);
background: var(--dcti-surface-2);
}
.dcti-table tbody tr:hover { background: var(--dcti-surface-2); }
.dcti-table td.dcti-mono { font-variant-numeric: tabular-nums; }
/* ─── Navigation ────────────────────────────────────────────────────── */
.dcti-app {
display: grid;
grid-template-columns: var(--dcti-sidebar-w) 1fr;
min-height: 100vh;
background: var(--dcti-bg);
}
.dcti-sidebar {
display: flex;
flex-direction: column;
background: var(--dcti-surface);
border-right: 1px solid var(--dcti-border);
padding: var(--dcti-space-4);
gap: var(--dcti-space-2);
position: sticky;
top: 0;
height: 100vh;
}
.dcti-sidebar__brand {
display: flex;
align-items: center;
gap: var(--dcti-space-3);
padding: var(--dcti-space-2) var(--dcti-space-2) var(--dcti-space-4);
}
.dcti-sidebar__brand img { height: 28px; width: auto; }
.dcti-nav { display: flex; flex-direction: column; gap: 1px; }
.dcti-nav__group {
font-family: var(--dcti-font-mono);
font-size: var(--dcti-text-xs);
font-weight: 600;
letter-spacing: var(--dcti-tracking-wide);
text-transform: uppercase;
color: var(--dcti-text-faint);
padding: var(--dcti-space-3) var(--dcti-space-2) var(--dcti-space-1);
}
.dcti-nav__item {
display: flex;
align-items: center;
gap: var(--dcti-space-2);
padding: var(--dcti-space-2) var(--dcti-space-3);
border-radius: var(--dcti-radius-sm);
color: var(--dcti-text-muted);
font-size: var(--dcti-text-sm);
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background var(--dcti-duration-fast) var(--dcti-ease),
color var(--dcti-duration-fast) var(--dcti-ease);
}
.dcti-nav__item:hover { background: var(--dcti-surface-2); color: var(--dcti-text); }
.dcti-nav__item--active {
background: var(--dcti-accent-muted);
color: var(--dcti-accent);
font-weight: 600;
}
.dcti-nav__item__icon { flex-shrink: 0; display: inline-flex; }
.dcti-nav__item__label { flex: 1; }
.dcti-nav__item__badge {
font-family: var(--dcti-font-mono);
font-size: 10px;
font-weight: 700;
background: var(--dcti-danger);
color: #FFFFFF;
padding: 1px 6px;
border-radius: var(--dcti-radius-pill);
}
.dcti-topbar {
display: flex;
align-items: center;
gap: var(--dcti-space-3);
height: var(--dcti-topbar-h);
padding: 0 var(--dcti-space-4);
background: var(--dcti-surface);
border-bottom: 1px solid var(--dcti-border);
position: sticky;
top: 0;
z-index: var(--dcti-z-sticky);
}
.dcti-topbar__crumbs {
display: flex;
align-items: center;
gap: var(--dcti-space-2);
font-size: var(--dcti-text-sm);
color: var(--dcti-text-muted);
}
.dcti-topbar__crumbs strong { color: var(--dcti-text); font-weight: 600; }
.dcti-topbar__spacer { flex: 1; }
.dcti-content {
padding: var(--dcti-space-6);
display: flex;
flex-direction: column;
gap: var(--dcti-space-6);
}
/* ─── Misc primitives ───────────────────────────────────────────────── */
.dcti-divider {
height: 1px;
background: var(--dcti-border);
border: 0;
margin: var(--dcti-space-4) 0;
}
.dcti-kbd {
display: inline-flex;
align-items: center;
padding: 2px 6px;
font-family: var(--dcti-font-mono);
font-size: 10px;
border: 1px solid var(--dcti-border);
border-radius: var(--dcti-radius-sm);
background: var(--dcti-surface-2);
color: var(--dcti-text-muted);
}
.dcti-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--dcti-radius-pill);
background: var(--dcti-accent);
color: var(--dcti-on-accent);
font-size: var(--dcti-text-xs);
font-weight: 700;
letter-spacing: 0.02em;
}
.dcti-icon {
display: inline-flex;
width: 16px;
height: 16px;
flex-shrink: 0;
color: currentColor;
}
.dcti-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }