/* Spirit Sight — Premium Component Library
==========================================
Enterprise-grade .ss-* prefixed design system.
All components reference theme variables only — no hardcoded colors.
Stripe/Linear-grade polish for bourbon warehouse management. */
/* ==========================================
CARDS
========================================== */
.ss-card {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--transition-base), border-color var(--transition-base);
overflow: hidden;
}
.ss-card:hover {
box-shadow: var(--shadow-sm);
}
.ss-card--interactive {
cursor: pointer;
}
.ss-card--interactive:hover {
border-color: var(--color-border-hover);
box-shadow: var(--shadow-md);
}
.ss-card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-2-5) var(--spacing-4);
border-bottom: 1px solid var(--color-border-secondary);
background: var(--color-bg-secondary);
min-height: 38px;
}
.ss-card__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
line-height: var(--line-height-tight);
}
.ss-card__subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin-top: var(--spacing-0-5);
}
.ss-card__actions {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.ss-card__body {
padding: var(--spacing-4);
}
.ss-card__body--flush {
padding: 0;
}
.ss-card__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-5);
border-top: 1px solid var(--color-border-secondary);
background: var(--color-bg-secondary);
}
/* ==========================================
BUTTONS
========================================== */
.ss-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
user-select: none;
text-decoration: none;
}
.ss-btn:focus-visible {
box-shadow: var(--shadow-focus);
}
.ss-btn:disabled, .ss-btn--disabled {
opacity: 0.6;
background: var(--color-bg-tertiary);
color: var(--color-text-quaternary);
border-color: var(--color-border-secondary);
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
.ss-btn--primary {
background: var(--color-accent);
color: var(--color-text-inverse);
border-color: var(--color-accent);
}
.ss-btn--primary:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
.ss-btn--primary:active {
background: var(--color-accent-active);
}
.ss-btn--accent {
background: var(--color-accent);
color: var(--color-text-inverse);
border-color: var(--color-accent);
}
.ss-btn--accent:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
.ss-btn--accent:active {
background: var(--color-accent-active);
}
.ss-btn--secondary {
background: var(--color-bg-primary);
color: var(--color-text-primary);
border-color: var(--color-border-primary);
}
.ss-btn--secondary:hover {
background: var(--color-bg-hover);
border-color: var(--color-border-hover);
}
.ss-btn--danger {
background: var(--color-critical);
color: var(--color-text-inverse);
border-color: var(--color-critical);
}
.ss-btn--danger:hover {
background: var(--color-error-dark);
border-color: var(--color-error-dark);
}
/* Outlined danger: standard for destructive row/secondary actions.
Filled .ss-btn--danger is reserved for the single confirm step. */
.ss-btn--danger-outline {
background: transparent;
color: var(--color-critical);
border-color: var(--color-critical);
}
.ss-btn--danger-outline:hover {
background: var(--color-critical-bg);
color: var(--color-critical);
border-color: var(--color-critical);
}
.ss-btn--success {
background: var(--color-success);
color: var(--color-text-inverse);
border-color: var(--color-success);
}
.ss-btn--success:hover {
opacity: 0.9;
}
.ss-btn--ghost {
background: transparent;
color: var(--color-text-secondary);
border-color: transparent;
}
.ss-btn--ghost:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.ss-btn--xs {
padding: 2px var(--spacing-1-5);
font-size: var(--font-size-2xs);
line-height: var(--line-height-tight);
}
.ss-btn--sm {
padding: var(--spacing-1) var(--spacing-2-5);
font-size: var(--font-size-xs);
}
.ss-btn--lg {
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-lg);
}
.ss-btn--icon {
padding: var(--spacing-2);
width: 32px;
height: 32px;
}
.ss-btn--icon svg {
width: 16px;
height: 16px;
}
.ss-btn--full { width: 100%; }
.ss-btn--flex { flex: 1; }
.ss-btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.ss-btn--loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: currentColor;
border-radius: 50%;
animation: ss-spin 0.6s linear infinite;
}
@keyframes ss-spin {
to { transform: rotate(360deg); }
}
/* ==========================================
DATA TABLES
========================================== */
.ss-table-wrap {
overflow-x: auto;
min-width: 0; /* shrink inside flex parents so the table scrolls, not the page */
max-width: 100%;
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
background: var(--color-bg-primary);
}
.ss-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.ss-table thead {
background: var(--color-bg-tertiary);
position: sticky;
top: 0;
z-index: 1;
}
.ss-table th {
padding: var(--spacing-2) var(--spacing-3);
text-align: left;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-2xs);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
border-bottom: 1px solid var(--color-border-primary);
white-space: nowrap;
user-select: none;
}
/* Alignment utilities on a header must beat the base `.ss-table th`
left-align (same specificity, base wins by order otherwise), so a
right-aligned numeric column's header lines up over its values. */
.ss-table th.ss-text-right { text-align: right; }
.ss-table th.ss-text-center { text-align: center; }
.ss-table .th--sortable {
cursor: pointer;
}
.ss-table .th--sortable:hover {
color: var(--color-text-primary);
background: var(--color-bg-tertiary);
}
.ss-table th .sort-icon {
display: inline-block;
margin-left: var(--spacing-1);
opacity: 0.3;
font-size: 0.7em;
transition: opacity var(--transition-fast);
}
.ss-table .th--sorted .sort-icon {
opacity: 1;
color: var(--color-accent);
}
.ss-table td {
/* Mockup density: 32px rows at 6px/10px padding */
padding: var(--spacing-1-5) var(--spacing-2-5);
height: 32px;
border-bottom: 1px solid var(--color-border-secondary);
color: var(--color-text-primary);
vertical-align: middle;
}
/* Right-aligned tabular numerics (enterprise data-grid convention) */
.ss-table th.ss-num, .ss-table td.ss-num, .ss-num {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
/* Workbench standard: ruled 1px rows, no zebra striping */
.ss-table tbody tr {
transition: background-color var(--transition-fast);
}
.ss-table tbody tr:hover {
background: var(--color-bg-hover);
}
.ss-table tbody tr:last-child td {
border-bottom: none;
}
.ss-table tbody tr--selected {
background: var(--color-bg-selected);
}
.ss-table--compact th,
.ss-table--compact td {
padding: var(--spacing-2) var(--spacing-3);
}
/* --striped retired: the Workbench standard is ruled rows only. The
class remains in markup across ~15 modules but is intentionally inert. */
/* ── Global table baseline ──────────────────────────────────────────
Ensures ALL tables in the app get consistent styling,
even without .ss-table class. Uses #mainContent scope to
avoid affecting non-app tables (docs, admin, etc.). */
#mainContent table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
#mainContent table thead {
background: var(--color-bg-tertiary);
position: sticky;
top: 0;
z-index: 1;
}
#mainContent table th {
padding: var(--spacing-3) var(--spacing-4);
text-align: left;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
border-bottom: 1px solid var(--color-border-primary);
white-space: nowrap;
user-select: none;
}
#mainContent table td {
padding: var(--spacing-3) var(--spacing-4);
border-bottom: 1px solid var(--color-border-secondary);
color: var(--color-text-primary);
vertical-align: middle;
}
#mainContent table tbody tr {
transition: background-color var(--transition-fast);
}
#mainContent table tbody tr:hover {
background: var(--color-bg-hover);
}
#mainContent table tbody tr:last-child td {
border-bottom: none;
}
/* ==========================================
FORMS
========================================== */
.ss-form-group {
margin-bottom: var(--spacing-4);
}
.ss-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-1-5);
}
.ss-label--required::after {
content: ' *';
color: var(--color-critical);
}
.ss-input {
width: 100%;
padding: var(--spacing-2) var(--spacing-3);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
box-sizing: border-box;
}
.ss-input:hover {
border-color: var(--color-border-hover);
}
.ss-input:focus {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);
outline: none;
}
.ss-input--error {
border-color: var(--color-critical);
}
.ss-input--error:focus {
box-shadow: var(--shadow-focus-error);
}
.ss-input::placeholder {
color: var(--color-text-quaternary);
}
.ss-select {
width: 100%;
padding: var(--spacing-2) var(--spacing-3);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
box-sizing: border-box;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
cursor: pointer;
}
.ss-select:hover {
border-color: var(--color-border-hover);
}
.ss-select:focus {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);
outline: none;
}
/* ── Universal Select Styling ────────────────────────
Auto-styles ALL selects within the app to match
the .ss-select standard. Scoped to #mainContent.
Add class="no-auto-style" to opt out.
──────────────────────────────────────────────────── */
#mainContent select:not(.no-auto-style):not([multiple]) {
padding: var(--spacing-2) var(--spacing-3);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
box-sizing: border-box;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
cursor: pointer;
}
#mainContent select:not(.no-auto-style):not([multiple]):hover {
border-color: var(--color-border-hover);
}
#mainContent select:not(.no-auto-style):not([multiple]):focus {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);
outline: none;
}
#mainContent select:not(.no-auto-style):not([multiple]):disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--color-bg-tertiary);
}
.ss-textarea {
min-height: 80px;
resize: vertical;
}
/* ── .ss-form block ─────────────────────────────────
Stacked form pattern used by the EHS suite modules:
──────────────────────────────────────────────────── */
.ss-form {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
max-width: 560px;
}
.ss-form > label {
display: flex;
flex-direction: column;
gap: var(--spacing-1-5);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.ss-form input:not([type="checkbox"]):not([type="radio"]),
.ss-form textarea {
width: 100%;
padding: var(--spacing-2) var(--spacing-3);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
box-sizing: border-box;
}
.ss-form input:not([type="checkbox"]):not([type="radio"]):hover,
.ss-form textarea:hover {
border-color: var(--color-border-hover);
}
.ss-form input:not([type="checkbox"]):not([type="radio"]):focus,
.ss-form textarea:focus {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);
outline: none;
}
.ss-form__check {
flex-direction: row !important;
align-items: center;
gap: var(--spacing-2);
cursor: pointer;
}
.ss-form__actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-2);
margin-top: var(--spacing-2);
}
/* Two-pane module layout (form beside result panel). */
.ss-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-6);
align-items: start;
}
@media (max-width: 900px) {
.ss-split {
grid-template-columns: 1fr;
}
}
.ss-checkbox, .ss-radio {
display: flex;
align-items: center;
gap: var(--spacing-2);
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
}
.ss-checkbox input, .ss-radio input {
width: 16px;
height: 16px;
accent-color: var(--color-accent);
}
.ss-helper-text {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--spacing-1);
}
.ss-helper-text--error {
color: var(--color-critical);
}
/* ==========================================
BADGES & STATUS
========================================== */
.ss-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
padding: 1px var(--spacing-2);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04em;
line-height: var(--line-height-normal);
text-transform: uppercase;
border-radius: 0;
border: 1px solid currentColor;
background: transparent;
white-space: nowrap;
}
.ss-badge--default {
color: var(--color-text-secondary);
}
.ss-badge--success {
color: var(--color-success);
}
.ss-badge--warning {
color: var(--color-warning);
}
.ss-badge--critical {
color: var(--color-critical);
}
.ss-badge--info {
color: var(--color-info);
}
.ss-badge--accent {
color: var(--color-accent);
}
/* Copper is reserved for one semantic: spirit AT THE STILL. Applied to
distillation-status badges (tankfarm still cards, production and
fermentation DISTILLING states) and nothing else. */
.ss-badge--copper,
.ss-badge.distilling, .ss-badge.distilled, .ss-badge.collecting,
.ss-badge.charged, .ss-badge.stripping, .ss-badge.spirit-run, .ss-badge.spirit_run {
color: var(--color-brand-copper);
border-color: var(--color-brand-copper);
}
/* ============================================================
STATUS VOCABULARY (shared) - colors bare `ss-badge `
tags by meaning across every module. Many modules render
`ss-badge ${status.toLowerCase()}` (barrels: aging/filled/
dumped, work orders, etc.); without these rules those tags
fell through to the base muted outline with NO color. The
compound `.ss-badge.` selector (0,2,0) outranks the
base `.ss-badge` (0,1,0); both `-` and `_` word forms are
covered because toLowerCase() preserves the source separator.
Semantic tokens => correct in both themes. Ambiguous/neutral
states (draft, closed, archived, retired, unknown) are left
to the base grey on purpose.
============================================================ */
/* Good / normal / done-well -> green */
.ss-badge.available, .ss-badge.active, .ss-badge.completed, .ss-badge.complete,
.ss-badge.approved, .ss-badge.paid, .ss-badge.filled, .ss-badge.passed, .ss-badge.pass,
.ss-badge.resolved, .ss-badge.ok, .ss-badge.done, .ss-badge.aging, .ss-badge.matured,
.ss-badge.verified, .ss-badge.compliant, .ss-badge.reconciled, .ss-badge.posted,
.ss-badge.won, .ss-badge.enabled, .ss-badge.online, .ss-badge.live, .ss-badge.healthy,
.ss-badge.delivered, .ss-badge.fulfilled, .ss-badge.received, .ss-badge.cleared,
.ss-badge.released, .ss-badge.in-bond, .ss-badge.in_bond, .ss-badge.current {
color: var(--color-success);
}
/* In progress / informational / neutral-active -> blue */
.ss-badge.sampled, .ss-badge.in-progress, .ss-badge.in_progress, .ss-badge.in-transit,
.ss-badge.in_transit, .ss-badge.processing, .ss-badge.scheduled, .ss-badge.submitted,
.ss-badge.picking, .ss-badge.confirmed, .ss-badge.review, .ss-badge.in-review,
.ss-badge.in_review, .ss-badge.running, .ss-badge.syncing, .ss-badge.queued,
.ss-badge.new, .ss-badge.assigned, .ss-badge.invoiced, .ss-badge.sent, .ss-badge.shipped,
.ss-badge.open, .ss-badge.planned, .ss-badge.forecasted, .ss-badge.calibrating {
color: var(--color-info);
}
/* Needs attention / caution -> amber */
.ss-badge.pending, .ss-badge.regauge-due, .ss-badge.regauge_due, .ss-badge.on-hold,
.ss-badge.on_hold, .ss-badge.hold, .ss-badge.due, .ss-badge.due-soon, .ss-badge.low,
.ss-badge.warning, .ss-badge.attention, .ss-badge.partial, .ss-badge.unverified,
.ss-badge.provisional, .ss-badge.conditional, .ss-badge.maintenance, .ss-badge.backordered,
.ss-badge.awaiting, .ss-badge.expiring, .ss-badge.warn, .ss-badge.at-risk,
.ss-badge.at_risk, .ss-badge.needs-review {
color: var(--color-warning);
}
/* Bad / failed / terminal-negative -> red */
.ss-badge.dumped, .ss-badge.overdue, .ss-badge.failed, .ss-badge.fail, .ss-badge.rejected,
.ss-badge.void, .ss-badge.voided, .ss-badge.cancelled, .ss-badge.canceled, .ss-badge.error,
.ss-badge.expired, .ss-badge.blocked, .ss-badge.breach, .ss-badge.noncompliant,
.ss-badge.non-compliant, .ss-badge.non_compliant, .ss-badge.denied, .ss-badge.lost,
.ss-badge.suspended, .ss-badge.disabled, .ss-badge.offline, .ss-badge.critical,
.ss-badge.emergency, .ss-badge.terminated {
color: var(--color-critical);
}
/* Status dot */
.ss-status {
display: inline-flex;
align-items: center;
gap: var(--spacing-1-5);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.ss-status__dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.ss-status--active .ss-status__dot { background: var(--color-success); }
.ss-status--warning .ss-status__dot { background: var(--color-warning); }
.ss-status--critical .ss-status__dot { background: var(--color-critical); }
.ss-status--inactive .ss-status__dot { background: var(--color-text-quaternary); }
.ss-status--live .ss-status__dot,
.ss-status--active .ss-status__dot {
animation: ss-pulse 2s ease-in-out infinite;
}
@keyframes ss-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ==========================================
MODULE HEADER
========================================== */
.ss-module-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-6);
margin-bottom: var(--spacing-3);
}
.ss-module-header__content {
flex: 1;
min-width: 0;
}
.ss-module-title {
margin: 0;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
line-height: var(--line-height-tight);
}
.ss-module-subtitle {
margin: var(--spacing-1) 0 0;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.ss-module-header__actions {
display: flex;
gap: var(--spacing-2);
align-items: center;
flex-shrink: 0;
}
/* ==========================================
METRIC CARDS
========================================== */
/* Workbench (mockup parity): KPIs are ONE fused ruled strip, not
separated boxed cards. The strip carries the top and left rules;
each cell carries its right and bottom rule, so wrapped rows still
separate cleanly. */
.ss-metric-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0;
background: var(--color-bg-primary);
border-top: 1px solid var(--color-border-secondary);
border-left: 1px solid var(--color-border-secondary);
}
.ss-metric {
background: var(--color-bg-primary);
border: 0;
border-right: 1px solid var(--color-border-secondary);
border-bottom: 1px solid var(--color-border-secondary);
border-radius: 0;
padding: var(--spacing-2-5) var(--spacing-4);
min-width: 0;
}
.ss-metric__label {
display: block;
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--spacing-1-5);
}
.ss-metric__value {
display: block;
/* Fluid size: shrinks a big money/PG value to fit a narrow phone card
instead of breaking mid-number (e.g. "$30,735,52" / "7.16"). Caps at
3xl so desktop is unchanged. keep-all prevents digit-splitting. */
font-size: clamp(1rem, 4.2vw, var(--font-size-3xl));
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
line-height: var(--line-height-none);
font-family: var(--font-family-serif);
font-feature-settings: 'tnum' 1;
min-width: 0;
max-width: 100%;
overflow-wrap: normal;
word-break: keep-all;
}
.ss-metric__detail {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--spacing-1);
}
.ss-metric__trend {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
margin-top: var(--spacing-2);
}
.ss-metric__trend--up { color: var(--color-success); }
.ss-metric__trend--down { color: var(--color-critical); }
.ss-metric__trend--neutral { color: var(--color-text-tertiary); }
.ss-metric__sparkline {
height: 24px;
margin-top: var(--spacing-2);
}
/* Metric color variants — subtle value color only */
/* Workbench (consistency audit): stat VALUES are ink numerals in every
variant; the variant color moves to the trend/delta line only, per the
approved mockup. This single change de-colors KPI numerals app-wide. */
.ss-metric--info .ss-metric__value, .ss-metric--info .ss-metric-value,
.ss-metric--success .ss-metric__value, .ss-metric--success .ss-metric-value,
.ss-metric--accent .ss-metric__value, .ss-metric--accent .ss-metric-value,
.ss-metric--critical .ss-metric__value, .ss-metric--critical .ss-metric-value,
.ss-metric--warning .ss-metric__value, .ss-metric--warning .ss-metric-value,
.ss-metric--primary .ss-metric__value, .ss-metric--primary .ss-metric-value {
color: var(--color-text-primary);
}
.ss-metric--info .ss-metric__trend, .ss-metric--info .ss-metric-trend { color: var(--color-info); }
.ss-metric--success .ss-metric__trend, .ss-metric--success .ss-metric-trend { color: var(--color-success); }
.ss-metric--accent .ss-metric__trend, .ss-metric--accent .ss-metric-trend { color: var(--color-accent); }
.ss-metric--critical .ss-metric__trend, .ss-metric--critical .ss-metric-trend { color: var(--color-critical); }
.ss-metric--warning .ss-metric__trend, .ss-metric--warning .ss-metric-trend { color: var(--color-warning); }
.ss-metric--primary .ss-metric__trend, .ss-metric--primary .ss-metric-trend { color: var(--color-primary); }
/* ==========================================
TABS
========================================== */
.ss-tabs {
display: flex;
border-bottom: 1px solid var(--color-border-primary);
gap: 0;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ss-tabs::-webkit-scrollbar { display: none; }
.ss-tabs__item {
/* Keep full size and scroll (a right-edge fade hints more) rather than
cramming many tabs into a phone width. */
flex-shrink: 0;
white-space: nowrap;
scroll-snap-align: start;
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
background: none;
border-top: none;
border-left: none;
border-right: none;
font-family: var(--font-family-base);
}
.ss-tabs__item:hover {
color: var(--color-text-primary);
background: var(--color-bg-hover);
}
.ss-tabs__item--active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
.ss-tabs__badge {
font-size: var(--font-size-2xs);
background: var(--color-bg-tertiary);
color: var(--color-text-tertiary);
padding: 1px 6px;
border-radius: var(--radius-full);
}
.ss-tabs__item--active .ss-tabs__badge {
background: var(--color-accent-light);
color: var(--color-accent);
}
/* Shorthand tab class */
.ss-tab {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
background: none;
font-family: var(--font-family-base);
}
.ss-tab:hover {
color: var(--color-text-primary);
background: var(--color-bg-hover);
}
.ss-tab.active,
.ss-tab.ss-tab--active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
/* Modal styles are in modal.css */
/* ==========================================
TOAST NOTIFICATIONS (no border-left)
========================================== */
.ss-toast-container {
position: fixed;
top: var(--spacing-4);
right: var(--spacing-4);
z-index: var(--z-notification);
display: flex;
flex-direction: column;
gap: var(--spacing-2);
max-width: 400px;
}
.ss-toast {
display: flex;
align-items: flex-start;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
animation: ss-toast-in 0.3s ease-out;
}
.ss-toast--success { border-color: var(--color-success-border); background: var(--color-success-bg); }
.ss-toast--error { border-color: var(--color-critical-border); background: var(--color-critical-bg); }
.ss-toast--warning { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.ss-toast--info { border-color: var(--color-info-border); background: var(--color-info-bg); }
.ss-toast__icon {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
}
.ss-toast--success .ss-toast__icon { color: var(--color-success); }
.ss-toast--error .ss-toast__icon { color: var(--color-critical); }
.ss-toast--warning .ss-toast__icon { color: var(--color-warning); }
.ss-toast--info .ss-toast__icon { color: var(--color-info); }
.ss-toast__content {
flex: 1;
min-width: 0;
}
.ss-toast__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.ss-toast__message {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--spacing-0-5);
}
.ss-toast__dismiss {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--color-text-quaternary);
cursor: pointer;
border-radius: var(--radius-sm);
}
.ss-toast__dismiss:hover {
background: var(--color-bg-hover);
color: var(--color-text-secondary);
}
@keyframes ss-toast-in {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
.ss-toast--exit {
animation: ss-toast-out 0.2s ease-in forwards;
}
@keyframes ss-toast-out {
to { opacity: 0; transform: translateX(24px); }
}
/* ==========================================
CALLOUT / ALERT CARDS (full border, no border-left)
========================================== */
.ss-callout {
display: flex;
align-items: flex-start;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-primary);
background: var(--color-bg-secondary);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.ss-callout--info {
border-color: var(--color-info-border);
background: var(--color-info-bg);
}
.ss-callout--success {
border-color: var(--color-success-border);
background: var(--color-success-bg);
}
.ss-callout--warning {
border-color: var(--color-warning-border);
background: var(--color-warning-bg);
}
.ss-callout--critical {
border-color: var(--color-critical-border);
background: var(--color-critical-bg);
}
.ss-callout__icon {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
}
.ss-callout--info .ss-callout__icon { color: var(--color-info); }
.ss-callout--success .ss-callout__icon { color: var(--color-success); }
.ss-callout--warning .ss-callout__icon { color: var(--color-warning); }
.ss-callout--critical .ss-callout__icon { color: var(--color-critical); }
.ss-callout__content {
flex: 1;
}
.ss-callout__title {
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: var(--spacing-0-5);
}
/* ==========================================
DETAIL GRID
========================================== */
.ss-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-4);
}
.ss-detail-item {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.ss-detail-item--full {
grid-column: 1 / -1;
}
.ss-detail-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
}
.ss-detail-value {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
}
.ss-detail-value--highlight {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
/* ==========================================
ACTION CARD GRID
========================================== */
.ss-action-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-4);
}
.ss-action-card {
background: var(--color-bg-primary);
border-radius: var(--radius-md);
padding: var(--spacing-5);
border: 1px solid var(--color-border-primary);
cursor: pointer;
transition: all var(--transition-base);
display: flex;
align-items: center;
gap: var(--spacing-4);
}
.ss-action-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-hover);
}
.ss-action-card__icon {
font-size: 28px;
opacity: 0.8;
flex-shrink: 0;
}
.ss-action-card__content {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.ss-action-card__title {
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
color: var(--color-text-primary);
margin: 0;
}
.ss-action-card__description {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: 0;
}
/* ==========================================
DROPDOWN
========================================== */
.ss-dropdown {
position: relative;
display: inline-block;
}
.ss-dropdown__menu {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown);
padding: var(--spacing-1) 0;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.ss-dropdown--open .ss-dropdown__menu {
opacity: 1;
transform: translateY(4px);
pointer-events: auto;
}
.ss-dropdown__item {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
cursor: pointer;
transition: background var(--transition-fast);
border: none;
background: none;
width: 100%;
text-align: left;
font-family: var(--font-family-base);
}
.ss-dropdown__item:hover {
background: var(--color-bg-hover);
}
.ss-dropdown__item--danger {
color: var(--color-critical);
}
.ss-dropdown__divider {
height: 1px;
background: var(--color-border-secondary);
margin: var(--spacing-1) 0;
}
/* ==========================================
PAGINATION
========================================== */
.ss-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) var(--spacing-4);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.ss-pagination__info {
font-size: var(--font-size-sm);
}
.ss-pagination__controls {
display: flex;
align-items: center;
gap: var(--spacing-1);
}
.ss-pagination__btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
background: var(--color-bg-primary);
color: var(--color-text-secondary);
cursor: pointer;
font-size: var(--font-size-sm);
font-family: var(--font-family-base);
transition: all var(--transition-fast);
}
.ss-pagination__btn:hover:not(:disabled) {
border-color: var(--color-border-hover);
background: var(--color-bg-hover);
}
.ss-pagination__btn--active {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
.ss-pagination__btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* ==========================================
BREADCRUMBS
========================================== */
.ss-breadcrumb {
display: flex;
align-items: center;
gap: var(--spacing-1);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
padding: var(--spacing-2) 0;
}
.ss-breadcrumb__item {
color: var(--color-text-tertiary);
text-decoration: none;
transition: color var(--transition-fast);
}
.ss-breadcrumb__item:hover {
color: var(--color-accent);
}
.ss-breadcrumb__item--current {
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
pointer-events: none;
}
.ss-breadcrumb__separator {
color: var(--color-text-quaternary);
font-size: var(--font-size-xs);
}
/* ==========================================
SIDEBAR (detail panel)
========================================== */
.ss-sidebar {
position: fixed;
right: 0;
top: 0;
width: 400px;
height: 100vh;
background: var(--color-bg-primary);
border-left: 1px solid var(--color-border-primary);
box-shadow: var(--shadow-xl);
z-index: var(--z-modal);
transform: translateX(100%);
transition: transform var(--transition-panel);
display: flex;
flex-direction: column;
}
.ss-sidebar--open {
transform: translateX(0);
}
.ss-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-4) var(--spacing-5);
border-bottom: 1px solid var(--color-border-secondary);
min-height: 52px;
}
.ss-sidebar__body {
flex: 1;
overflow-y: auto;
padding: var(--spacing-5);
}
/* ==========================================
EMPTY STATE
========================================== */
.ss-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-12) var(--spacing-6);
text-align: center;
/* Oak seam 3 of 3: faint wood-grain wash (4% oak) so an empty surface
reads as bare shelf, not missing data. Fixed oak hue works on both
themes at this opacity. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140'%3E%3Cg stroke='%238B6F47' stroke-opacity='0.04' fill='none'%3E%3Cpath d='M0 18 Q 55 12, 110 18 T 220 18'/%3E%3Cpath d='M0 47 Q 60 42, 120 47 T 220 45'/%3E%3Cpath d='M0 76 Q 50 82, 105 76 T 220 78'/%3E%3Cpath d='M0 104 Q 65 99, 125 104 T 220 103'/%3E%3Cpath d='M0 130 Q 55 136, 110 130 T 220 131'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
}
.ss-empty-state__icon {
width: 48px;
height: 48px;
color: var(--color-text-quaternary);
margin-bottom: var(--spacing-4);
opacity: 0.5;
}
.ss-empty-state__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: var(--spacing-2);
}
.ss-empty-state__description {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
max-width: 360px;
margin-bottom: var(--spacing-6);
line-height: var(--line-height-relaxed);
}
.ss-empty-state__action {
margin-top: var(--spacing-2);
}
/* ==========================================
LOADING / SKELETON
========================================== */
.ss-skeleton {
background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-inset) 50%, var(--color-bg-tertiary) 75%);
background-size: 200% 100%;
animation: ss-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-sm);
}
.ss-skeleton--text {
height: 14px;
width: 80%;
margin-bottom: var(--spacing-2);
}
.ss-skeleton--circle {
border-radius: 50%;
}
.ss-skeleton--row {
height: 40px;
width: 100%;
margin-bottom: var(--spacing-2);
border-radius: var(--radius-md);
}
.ss-skel-table {
padding: var(--spacing-2) 0;
}
@keyframes ss-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ss-spinner {
width: 24px;
height: 24px;
border: 2px solid var(--color-border-primary);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: ss-spin 0.7s linear infinite;
}
.ss-spinner--sm { width: 16px; height: 16px; }
.ss-spinner--lg { width: 36px; height: 36px; border-width: 3px; }
/* ==========================================
SHARED ANIMATIONS
========================================== */
@keyframes ss-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ss-slide-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.ss-animate-fade-in { animation: ss-fade-in 0.3s ease; }
.ss-animate-slide-up { animation: ss-slide-up 0.3s ease; }
/* Module entrance: every module wrapper fades + lifts in on mount */
@keyframes ss-enter-anim {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.ss-enter { animation: ss-enter-anim 0.26s ease-out both; }
/* Honor reduced-motion preference app-wide */
@media (prefers-reduced-motion: reduce) {
.ss-enter,
.ss-animate-fade-in,
.ss-animate-slide-up { animation: none; }
* { scroll-behavior: auto !important; }
}
/* Consistent keyboard focus ring across interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ==========================================
SEARCH INPUT
========================================== */
.ss-search-input {
flex: 1;
padding: var(--spacing-3) var(--spacing-4);
border: 1.5px solid var(--color-border-primary);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-family: var(--font-family-base);
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-width: 300px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
box-shadow: var(--shadow-xs);
box-sizing: border-box;
}
.ss-search-input:hover {
border-color: var(--color-border-hover);
box-shadow: var(--shadow-sm);
}
.ss-search-input:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);
}
.ss-search-input::placeholder {
color: var(--color-text-quaternary);
}
/* ==========================================
PROGRESS BAR
========================================== */
.ss-progress {
height: 6px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-full);
overflow: hidden;
}
.ss-progress__bar {
height: 100%;
background: var(--color-accent);
border-radius: var(--radius-full);
transition: width var(--transition-slow);
}
.ss-progress--success .ss-progress__bar { background: var(--color-success); }
.ss-progress--warning .ss-progress__bar { background: var(--color-warning); }
.ss-progress--critical .ss-progress__bar { background: var(--color-critical); }
.ss-progress--info .ss-progress__bar { background: var(--color-info); }
.ss-progress--lg { height: 10px; }
.ss-progress--sm { height: 4px; }
/* Muted variants (for charts, sustainability, mashbills — less aggressive) */
.ss-progress--success-muted .ss-progress__bar { background: var(--color-success-muted); }
.ss-progress--warning-muted .ss-progress__bar { background: var(--color-warning-muted); }
.ss-progress--critical-muted .ss-progress__bar { background: var(--color-critical-muted); }
.ss-progress--info-muted .ss-progress__bar { background: var(--color-info-muted); }
/* ==========================================
FILTER BAR
========================================== */
.ss-filter-bar {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-4);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-4);
flex-wrap: wrap;
}
.ss-filter-bar__group {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.ss-filter-bar__label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
white-space: nowrap;
}
.ss-filter-bar__spacer {
flex: 1;
}
.ss-filter-bar .ss-input,
.ss-filter-bar .ss-select {
min-width: 140px;
height: 32px;
font-size: var(--font-size-sm);
}
.ss-filter-bar__search {
flex: 1;
min-width: 200px;
width: auto;
}
@media (max-width: 768px) {
.ss-filter-bar {
flex-direction: column;
align-items: stretch;
}
.ss-filter-bar__spacer {
display: none;
}
/* Let groups + controls shrink/wrap below their min-width so the bar never
overflows a phone (the 140/200px minimums otherwise force h-scroll). */
.ss-filter-bar__group {
flex-wrap: wrap;
width: 100%;
}
.ss-filter-bar__search,
.ss-filter-bar .ss-input,
.ss-filter-bar .ss-select {
min-width: 0;
width: 100%;
flex: 1 1 100%;
}
}
/* ==========================================
TOOLTIP
========================================== */
.ss-tooltip {
position: relative;
}
.ss-tooltip__content {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: var(--spacing-1-5) var(--spacing-2-5);
background: var(--color-bg-dark);
color: var(--color-text-inverse);
font-size: var(--font-size-xs);
border-radius: var(--radius-md);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition-fast);
z-index: var(--z-tooltip);
}
.ss-tooltip:hover .ss-tooltip__content {
opacity: 1;
}
.ss-tooltip__content::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--color-bg-dark);
}
/* ==========================================
DIVIDER
========================================== */
.ss-divider {
height: 1px;
background: var(--color-border-secondary);
border: none;
margin: var(--spacing-4) 0;
}
.ss-divider--lg {
margin: var(--spacing-6) 0;
}
/* ==========================================
SINGLE-DASH ALIASES (modules use these)
========================================== */
/* Metric aliases — modules use ss-metric-label instead of ss-metric__label */
.ss-metric-label {
display: block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--spacing-1);
}
.ss-metric-value {
display: block;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
line-height: var(--line-height-none);
font-family: var(--font-family-mono);
font-feature-settings: 'tnum' 1;
/* Guard: never let a long value (e.g. full-precision money) spill its box */
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.ss-metric-detail {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--spacing-1);
}
.ss-metric-trend {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
margin-top: var(--spacing-2);
}
.ss-metric-trend.up, .ss-metric-trend--up { color: var(--color-success); }
.ss-metric-trend.down, .ss-metric-trend--down { color: var(--color-critical); }
/* Empty state aliases */
.ss-empty-state-icon {
width: 48px;
height: 48px;
color: var(--color-text-quaternary);
margin-bottom: var(--spacing-4);
opacity: 0.5;
font-size: 48px;
text-align: center;
}
.ss-empty-state-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: var(--spacing-2);
}
.ss-empty-state-description,
.ss-empty-state-text {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
max-width: 360px;
margin-bottom: var(--spacing-6);
line-height: var(--line-height-relaxed);
}
/* Status dot alias */
.ss-status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-text-quaternary);
flex-shrink: 0;
}
.ss-status-dot.active, .ss-status-dot--active { background: var(--color-success); }
.ss-status-dot.warning, .ss-status-dot--warning { background: var(--color-warning); }
.ss-status-dot.critical, .ss-status-dot--critical { background: var(--color-critical); }
.ss-status-dot.inactive, .ss-status-dot--inactive { background: var(--color-text-quaternary); }
/* ==========================================
CONTROL / FILTER GROUPS (used by many modules)
========================================== */
.control-group,
.filter-group {
display: flex;
gap: var(--spacing-2);
align-items: center;
flex-wrap: wrap;
}
.control-group label,
.filter-group label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
white-space: nowrap;
}
.control-group select,
.filter-group select,
.filter-select {
padding: var(--spacing-1-5) var(--spacing-3);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 28px;
min-width: 120px;
}
.control-group select:hover,
.filter-group select:hover,
.filter-select:hover {
border-color: var(--color-border-hover);
}
.control-group select:focus,
.filter-group select:focus,
.filter-select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
}
.control-group input[type="text"],
.control-group input[type="search"],
.control-group input[type="number"],
.control-group input[type="date"],
.filter-group input[type="text"],
.filter-group input[type="search"],
.filter-group input[type="number"],
.filter-group input[type="date"] {
padding: var(--spacing-1-5) var(--spacing-3);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.control-group input:hover,
.filter-group input:hover {
border-color: var(--color-border-hover);
}
.control-group input:focus,
.filter-group input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
}
/* ==========================================
LEGACY CLASS ALIASES
Modules reference these non-prefixed names.
All point to the same ss-* canonical styles.
========================================== */
/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; user-select: none; text-decoration: none; background: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-border-primary); }
.btn:hover { background: var(--color-bg-hover); border-color: var(--color-border-hover); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-secondary { background: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-border-primary); }
.btn-secondary:hover { background: var(--color-bg-hover); border-color: var(--color-border-hover); }
.btn-danger { background: var(--color-critical); color: var(--color-text-inverse); border-color: var(--color-critical); }
.btn-danger:hover { background: var(--color-error-dark); border-color: var(--color-error-dark); }
.btn-success { background: var(--color-success); color: var(--color-text-inverse); border-color: var(--color-success); }
.btn-success:hover { opacity: 0.9; }
.btn-xs { padding: 2px var(--spacing-1-5); font-size: var(--font-size-2xs); line-height: var(--line-height-tight); }
.btn-sm { padding: var(--spacing-1) var(--spacing-2-5); font-size: var(--font-size-xs); }
.btn-lg { padding: var(--spacing-3) var(--spacing-6); font-size: var(--font-size-lg); }
.btn-icon { padding: var(--spacing-2); border: none; background: none; color: var(--color-text-secondary); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--transition-fast); }
.btn-icon:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
/* --- Legacy table aliases removed — global #mainContent table rule handles all tables --- */
/* --- Badges --- */
.badge { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: 2px var(--spacing-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); border-radius: var(--radius-full); white-space: nowrap; background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.badge-primary { background: var(--color-info-bg); color: var(--color-info); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger, .badge-error, .badge-critical { background: var(--color-critical-bg); color: var(--color-critical); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-secondary { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
/* --- Status Badges --- */
.status-badge { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: 2px var(--spacing-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); border-radius: var(--radius-full); white-space: nowrap; text-transform: capitalize; }
.status-badge.active, .status-active { background: var(--color-success-bg); color: var(--color-success); }
.status-badge.pending, .status-pending { background: var(--color-warning-bg); color: var(--color-warning); }
.status-badge.completed, .status-completed { background: var(--color-info-bg); color: var(--color-info); }
.status-badge.archived, .status-archived { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.status-badge.critical, .status-critical { background: var(--color-critical-bg); color: var(--color-critical); }
.status-badge.warning, .status-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.status-badge.inactive, .status-inactive { background: var(--color-bg-tertiary); color: var(--color-text-quaternary); }
.status-badge.overdue, .status-overdue { background: var(--color-critical-bg); color: var(--color-critical); }
/* --- Forms --- */
.form-group { margin-bottom: var(--spacing-4); }
.form-group label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--spacing-1-5); }
.form-control,
.form-input,
.form-select,
.form-textarea { width: 100%; padding: var(--spacing-2) var(--spacing-3); font-family: var(--font-family-base); font-size: var(--font-size-sm); color: var(--color-text-primary); background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); box-sizing: border-box; }
.form-control:hover, .form-input:hover, .form-select:hover { border-color: var(--color-border-hover); }
.form-control:focus, .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); outline: none; }
.form-control:disabled, .form-input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--color-bg-tertiary); }
.form-control::placeholder, .form-input::placeholder { color: var(--color-text-quaternary); }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.form-textarea { min-height: 80px; resize: vertical; }
.form-error, .invalid-feedback { display: block; font-size: var(--font-size-xs); color: var(--color-critical); margin-top: var(--spacing-1); }
.form-text { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: var(--spacing-1); }
.form-actions { display: flex; gap: var(--spacing-3); justify-content: flex-end; margin-top: var(--spacing-5); }
.form-row, .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-4); }
.form-group input, .form-group select, .form-group textarea { width: 100%; box-sizing: border-box; }
/* Modals: see modal.css */
/* --- Empty States --- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-12) var(--spacing-6); text-align: center; }
.empty-icon, .empty-state-icon { width: 48px; height: 48px; color: var(--color-text-quaternary); margin-bottom: var(--spacing-4); opacity: 0.5; font-size: 48px; }
.empty-state h3, .empty-title, .empty-state-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-2); }
.empty-state p, .empty-state-description { font-size: var(--font-size-sm); color: var(--color-text-tertiary); max-width: 360px; margin-bottom: var(--spacing-6); line-height: var(--line-height-relaxed); }
/* --- Loading Spinner --- */
.loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--color-border-primary); border-top-color: var(--color-accent); border-radius: 50%; animation: ss-spin 0.7s linear infinite; }
/* --- Pagination --- */
.pagination-container, .pagination-section { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-3) var(--spacing-4); border-top: 1px solid var(--color-border-secondary); background: var(--color-bg-secondary); }
.pagination-info { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.pagination-controls { display: flex; gap: var(--spacing-1); align-items: center; }
.btn-pagination, .btn-page { padding: var(--spacing-1-5) var(--spacing-2-5); border: 1px solid var(--color-border-primary); background: var(--color-bg-primary); border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-sm); transition: all var(--transition-fast); color: var(--color-text-primary); }
.btn-pagination:hover:not(:disabled), .btn-page:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-pagination:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-page.active { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
/* --- Module Header (legacy) --- */
.module-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-6); margin-bottom: var(--spacing-5); }
/* --- Loading Cell (tables) --- */
.loading-cell { text-align: center; padding: var(--spacing-8) !important; color: var(--color-text-tertiary); }
/* ==========================================
UTILITY CLASSES
========================================== */
.ss-text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.ss-flex { display: flex; }
.ss-flex--center { align-items: center; }
.ss-flex--between { justify-content: space-between; }
.ss-flex--gap-2 { gap: var(--spacing-2); }
.ss-flex--gap-4 { gap: var(--spacing-4); }
.ss-grid { display: grid; }
.ss-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ss-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ss-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Text Utilities */
.ss-text-secondary { color: var(--color-text-secondary); }
.ss-text-tertiary { color: var(--color-text-tertiary); }
.ss-text-success { color: var(--color-success); }
.ss-text-warning { color: var(--color-warning); }
.ss-text-error { color: var(--color-critical); }
.ss-text-accent { color: var(--color-accent); }
.ss-text-center { text-align: center; }
.ss-text-right { text-align: right; }
.ss-text-sm { font-size: var(--font-size-sm); }
.ss-text-xs { font-size: var(--font-size-xs); }
.ss-text-lg { font-size: var(--font-size-lg); }
.ss-text-bold { font-weight: var(--font-weight-semibold); }
/* Spacing Utilities */
.ss-mb-2 { margin-bottom: var(--spacing-2); }
.ss-mb-4 { margin-bottom: var(--spacing-4); }
.ss-mb-5 { margin-bottom: var(--spacing-5); }
.ss-mb-6 { margin-bottom: var(--spacing-6); }
.ss-mt-2 { margin-top: var(--spacing-2); }
.ss-mt-3 { margin-top: var(--spacing-3); }
.ss-mt-4 { margin-top: var(--spacing-4); }
.ss-mt-6 { margin-top: var(--spacing-6); }
.ss-clickable { cursor: pointer; }
.ss-p-4 { padding: var(--spacing-4); }
.ss-p-5 { padding: var(--spacing-5); }
.ss-p-6 { padding: var(--spacing-6); }
.ss-gap-2 { gap: var(--spacing-2); }
.ss-gap-4 { gap: var(--spacing-4); }
.ss-flex-2 { flex: 2; }
.ss-flex-none { flex: 0; }
.ss-w-9 { width: 9rem; }
.ss-list-row__end { float: right; }
.ss-metric__value--text { font-size: 1.1rem; }
/* Entity links: any id/name cell that drills through to its owning module. */
.ss-entity-link {
color: var(--color-accent);
text-decoration: none;
cursor: pointer;
}
.ss-entity-link:hover, .ss-entity-link:focus-visible { text-decoration: underline; }
/* Glossary terms: dotted underline + hover/focus tooltip. */
.ss-term {
text-decoration: underline dotted;
text-underline-offset: 2px;
cursor: help;
}
.ss-term-tip {
position: fixed;
z-index: 10050;
max-width: 320px;
padding: var(--spacing-3) var(--spacing-4);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.ss-term-tip__label {
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 2px;
}
/* Module header help affordance (injected by BaseModule). */
.ss-help-btn {
min-width: 28px;
padding: 2px 8px;
font-weight: 600;
}
/* Pre-render skeleton rows (BaseModule.mount): staggered widths via CSS. */
.ss-preskeleton__rows .ss-skeleton--text { width: 88%; }
.ss-preskeleton__rows .ss-skeleton--text:nth-child(2n) { width: 74%; }
.ss-preskeleton__rows .ss-skeleton--text:nth-child(3n) { width: 81%; }
/* Shared filter bar: search + facet selects in one row. */
.ss-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-2);
margin: var(--spacing-3) 0;
}
.ss-filter-bar .ss-input, .ss-filter-bar .ss-select { max-width: 220px; }
/* ==========================================
RESPONSIVE
========================================== */
@media (max-width: 1024px) {
.ss-grid--4 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.ss-metric-row {
grid-template-columns: repeat(2, 1fr);
}
.ss-grid--3, .ss-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
.ss-modal {
width: 95%;
max-height: 90vh;
}
.ss-sidebar {
width: 100%;
}
.ss-table-wrap {
border-radius: 0;
border-left: none;
border-right: none;
}
.ss-module-header {
flex-direction: column;
gap: var(--spacing-3);
}
.ss-module-header__actions {
width: 100%;
}
.ss-card__header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-2);
}
.ss-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ss-table th,
.ss-table td {
padding: var(--spacing-2) var(--spacing-3);
}
.ss-tab,
.ss-tabs__item {
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--font-size-xs);
}
.form-row,
.form-grid,
.ss-form-row,
.orders-form-row,
.tib-form-grid,
.dsp-form-row,
.rm-form-grid {
grid-template-columns: 1fr !important;
}
.module-content [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
.ss-action-grid {
grid-template-columns: 1fr;
}
.ss-detail-grid {
grid-template-columns: 1fr;
}
.ss-search-input {
min-width: 100%;
}
}
@media (max-width: 480px) {
.ss-metric-row {
grid-template-columns: 1fr;
}
.ss-grid--2, .ss-grid--3, .ss-grid--4 {
grid-template-columns: 1fr;
}
.ss-module-title {
font-size: var(--font-size-lg);
}
.ss-btn {
padding: var(--spacing-1-5) var(--spacing-3);
font-size: var(--font-size-xs);
}
.ss-btn--sm {
padding: var(--spacing-1) var(--spacing-2);
}
.ss-card__body {
padding: var(--spacing-3);
}
.ss-card__footer {
padding: var(--spacing-3) var(--spacing-4);
flex-wrap: wrap;
gap: var(--spacing-2);
}
.ss-table th,
.ss-table td {
padding: var(--spacing-1-5) var(--spacing-2);
font-size: var(--font-size-xs);
}
.ss-empty-state {
padding: var(--spacing-6) var(--spacing-3);
}
}
@media (max-width: 412px) {
.ss-modal {
width: 100vw;
max-width: 100vw;
max-height: 100vh;
border-radius: 0;
top: 0;
left: 0;
transform: none;
}
.ss-modal--visible {
transform: none;
}
.ss-modal__header {
padding: var(--spacing-3) var(--spacing-4);
}
.ss-modal__body {
padding: var(--spacing-4);
}
.ss-modal__footer {
padding: var(--spacing-3) var(--spacing-4);
}
.ss-card__header {
padding: var(--spacing-3) var(--spacing-4);
}
.ss-card__body {
padding: var(--spacing-4);
}
.ss-pagination {
flex-direction: column;
gap: var(--spacing-2);
text-align: center;
}
.ss-toast-container {
left: var(--spacing-2);
right: var(--spacing-2);
max-width: none;
}
}
@media (max-width: 480px) {
.ss-btn .btn-text { display: none; }
.ss-btn svg { margin: 0 !important; }
}
/* ==========================================================================
PREMIUM POLISH PASS
Shared, token-based refinements that uplift every module at once.
========================================================================== */
/* Metric class aliases: ~19 modules use the hyphen variant
(.ss-metric-label / .ss-metric-value); mirror the BEM base typography so
their metric cards render identically to the __ variant instead of unstyled. */
.ss-metric-label {
display: block;
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--spacing-1-5);
}
.ss-metric-value {
display: block;
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
line-height: var(--line-height-none);
font-family: var(--font-family-mono);
font-feature-settings: 'tnum' 1;
}
.ss-metric-detail,
.ss-metric-trend {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--spacing-1);
}
/* Tabular numerals for all metric values so figures align cleanly. */
.ss-metric__value, .ss-metric-value { font-variant-numeric: tabular-nums; }
/* Subtle, restrained elevation for clickable cards (premium, not flashy). */
.ss-card--interactive { transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); }
.ss-card--interactive:hover { transform: translateY(-1px); }
.ss-card--interactive:active { transform: translateY(0); }
/* Consistent keyboard-focus ring across interactive elements (accessibility + polish).
Uses a real outline (not just box-shadow) so the ring is never clipped by an
overflow:hidden ancestor (tab strips, tables, dropdowns, modals). */
.ss-tab:focus-visible,
.ss-table .th--sortable:focus-visible,
.ss-card--interactive:focus-visible,
.ss-table tbody tr[tabindex]:focus-visible,
.ss-table tbody tr[data-action]:focus-visible,
.ss-dropdown__item:focus-visible,
.ss-badge[role="button"]:focus-visible,
.ss-badge[data-action]:focus-visible,
.ss-modal__close:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-sm);
}
.ss-modal__body input[type="checkbox"]:focus-visible,
.ss-modal__body input[type="radio"]:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Slightly smoother default modal entrance is already handled by --visible in
modal.css; ensure backdrop blur is consistent for a more premium overlay. */
.ss-modal-backdrop { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
/* ── Export progress overlay (BaseModule.runExport) ──────────────────────
Blocking spinner shown while a (possibly large/slow) data export is being
prepared, so the user knows something is happening. */
.ss-export-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.ss-export-overlay__card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 28px 36px;
border-radius: 10px;
background: var(--color-bg-primary, #1f2430);
border: 1px solid var(--color-border-primary, rgba(255,255,255,0.08));
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
text-align: center;
max-width: 320px;
}
.ss-export-overlay__label {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary, #f2f2f2);
}
.ss-export-overlay__hint {
font-size: 12px;
color: var(--color-text-secondary, #9aa3b2);
}
/* ── Walk-the-floor HUD (first-person mode) ───────────────────────────── */
.walk-hud {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 30;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 18px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
color: #f2f2f2;
pointer-events: none;
text-align: center;
box-shadow: var(--shadow-lg);
}
.walk-hud strong { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent, #C17817); }
.walk-hud span { font-size: 12px; color: #c8cdd6; }
.walk-hud__keys { display: flex; align-items: center; gap: 4px; margin: 2px 0; }
.walk-hud__keys kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 5px;
font-family: var(--font-family-mono); font-size: 12px; font-weight: 600;
color: #f2f2f2; background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.walk-hud__or { font-size: 11px; color: #9aa3b2; margin: 0 2px; }
.walk-hud__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #c8cdd6; margin-left: 4px; }
.walk-hud__hint { font-size: 11px; color: #c8cdd6; }
.walk-hud__hint kbd {
font-family: var(--font-family-mono); font-size: 11px; padding: 0 4px;
background: rgba(255, 255, 255, 0.12); border-radius: 3px;
}
.presentation-btn.active { background: var(--color-accent, #C17817); color: #fff; }
/* ── Live activity feed (real-time operations) ───────────────────────── */
/* Live activity feed + weather — rendered inside the light context panel */
.rh-activity-feed {
width: 100%;
max-height: 260px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.rh-feed-header {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-xs);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--color-text-tertiary);
}
.rh-feed-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
box-shadow: 0 0 6px var(--color-success);
animation: rh-feed-pulse 2s ease-in-out infinite;
}
@keyframes rh-feed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.rh-feed-list { overflow-y: auto; }
.rh-feed-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
cursor: pointer;
border-bottom: 1px solid var(--color-border-secondary);
}
.rh-feed-row:hover { background: var(--color-bg-hover); }
.rh-feed-type {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
letter-spacing: 0.05em;
padding: 2px 6px;
border-radius: var(--radius-sm);
background: var(--color-accent-light);
color: var(--color-accent);
white-space: nowrap;
}
.rh-feed-type--movement { background: var(--color-info-bg); color: var(--color-info); }
.rh-feed-type--sample { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.rh-feed-type--fill { background: var(--color-success-bg); color: var(--color-success); }
.rh-feed-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-feed-time { font-size: var(--font-size-2xs); color: var(--color-text-tertiary); white-space: nowrap; }
.rh-weather { width: 100%; color: var(--color-text-secondary); }
.rh-wx-head {
font-size: var(--font-size-2xs);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--color-text-tertiary);
margin-bottom: var(--spacing-1);
}
.rh-wx-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-2); }
.rh-wx-temp { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-family: var(--font-family-mono); }
.rh-wx-meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.rh-wx-insight {
margin-top: var(--spacing-2);
font-size: var(--font-size-xs);
line-height: 1.35;
color: var(--color-accent);
}
.rh-wx-src { margin-top: var(--spacing-2); font-size: var(--font-size-2xs); color: var(--color-text-tertiary); }
/* ============================================================
Enterprise cockpit primitives — dense dashboard widgets
============================================================ */
/* Dashboard grid: dense, responsive widget canvas */
.ss-dash-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--spacing-3);
align-items: start;
}
/* Masonry packing (added by DashboardModule._packDashboard once row spans
are computed): fine row unit + dense flow so short cards backfill the
gaps under tall ones instead of leaving a lonely card + big void. */
.ss-dash-grid.is-packed {
grid-auto-rows: 8px;
grid-auto-flow: row dense;
}
/* default: full width unless a span helper overrides */
.ss-dash-grid > * { grid-column: span 12; }
/* span helpers — scoped to grid children so they outrank the default */
.ss-dash-grid > .ss-span-3 { grid-column: span 3; }
.ss-dash-grid > .ss-span-4 { grid-column: span 4; }
.ss-dash-grid > .ss-span-6 { grid-column: span 6; }
.ss-dash-grid > .ss-span-8 { grid-column: span 8; }
.ss-dash-grid > .ss-span-9 { grid-column: span 9; }
@media (max-width: 1100px) {
.ss-dash-grid > .ss-span-3, .ss-dash-grid > .ss-span-4 { grid-column: span 6; }
.ss-dash-grid > .ss-span-8, .ss-dash-grid > .ss-span-9 { grid-column: span 12; }
}
@media (max-width: 680px) {
.ss-dash-grid > * { grid-column: span 12 !important; }
}
/* Portlet: a dense widget with a tight header bar + body */
.ss-portlet {
display: flex;
flex-direction: column;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.ss-portlet__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-3);
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border-secondary);
}
.ss-portlet__title {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-secondary);
}
.ss-portlet__actions { display: flex; align-items: center; gap: var(--spacing-2); }
.ss-portlet__body { padding: var(--spacing-3); flex: 1; min-height: 0; }
.ss-portlet__body--flush { padding: 0; }
/* Chart PNG export: appears top-right on panel hover/focus-within. */
.ss-chart-export {
position: absolute;
top: 5px;
right: 6px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 2px;
color: var(--color-text-tertiary);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease, color 0.12s ease;
}
.ss-portlet:hover .ss-chart-export,
.ss-portlet:focus-within .ss-chart-export,
.ss-chart-export:focus-visible { opacity: 1; }
.ss-chart-export:hover { color: var(--color-primary); border-color: var(--color-border-hover); }
/* Dense KPI bar: a row of compact stats divided by hairlines */
.ss-kpi-bar {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
overflow: hidden;
}
.ss-kpi-bar__item {
padding: var(--spacing-2-5) var(--spacing-3);
border-left: 1px solid var(--color-border-secondary);
min-width: 0;
}
.ss-kpi-bar__item:first-child { border-left: none; }
.ss-kpi-bar__label {
display: block;
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: var(--color-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ss-kpi-bar__value {
display: block;
margin-top: 2px;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
font-family: var(--font-family-serif);
font-feature-settings: 'tnum' 1;
color: var(--color-text-primary);
line-height: var(--line-height-tight);
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.ss-kpi-bar__detail {
display: block;
font-size: var(--font-size-2xs);
color: var(--color-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* MoM delta chip: colored arrow + percent (semantic only on the delta). */
.ss-kpi-bar__delta {
font-family: var(--font-family-mono);
font-feature-settings: 'tnum' 1;
font-weight: var(--font-weight-semibold);
}
.ss-kpi-bar__delta--up { color: var(--color-success); }
.ss-kpi-bar__delta--down { color: var(--color-critical); }
.ss-kpi-bar__delta--flat { color: var(--color-text-tertiary); }
/* Inline sparkline under a KPI value */
.ss-kpi-bar__spark {
display: block;
height: 22px;
margin-top: var(--spacing-1);
}
.ss-kpi-bar__spark canvas { width: 100% !important; height: 22px !important; }
/* Workbench: KPI numerals are ink in every variant (mockup rule);
the variant tint moves to the detail/delta line beneath. */
.ss-kpi-bar__value--accent, .ss-kpi-bar__value--critical,
.ss-kpi-bar__value--success, .ss-kpi-bar__value--info,
.ss-kpi-bar__value--warning { color: var(--color-text-primary); }
/* Only true semantic states tint their delta line; informational
details ("estimated", "in storage") stay muted. */
.ss-kpi-bar__value--critical + .ss-kpi-bar__detail { color: var(--color-critical); }
.ss-kpi-bar__value--success + .ss-kpi-bar__detail { color: var(--color-success); }
@media (max-width: 900px) {
.ss-kpi-bar { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
.ss-kpi-bar__item:nth-child(odd) { border-left: none; }
.ss-kpi-bar__item { border-top: 1px solid var(--color-border-secondary); }
.ss-kpi-bar__item:nth-child(-n+2) { border-top: none; }
}
/* Gauge container: fixed-height canvas host for makeGauge() */
.ss-gauge {
position: relative;
height: 150px;
}
.ss-gauge-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--spacing-3);
}
/* Quick-action tiles (NetSuite-style) */
.ss-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-3);
}
.ss-tile {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
padding: var(--spacing-4);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-primary);
background: var(--color-bg-primary);
color: var(--color-text-primary);
cursor: pointer;
text-align: left;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.ss-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-hover); }
.ss-tile__icon { width: 24px; height: 24px; color: var(--color-accent); }
.ss-tile__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
/* ── Heatmap (CSS-grid, no Chart.js) ─────────────────────────────────── */
.ss-heatmap {
display: grid;
gap: 2px;
align-items: stretch;
/* Many-column heatmaps scroll within the card on phones instead of
forcing page overflow; cells stay at their 18px min. */
overflow-x: auto;
max-width: 100%;
}
.ss-heatmap__corner,
.ss-heatmap__col {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: var(--color-text-tertiary);
text-align: center;
padding: 2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ss-heatmap__row-label {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-tertiary);
text-align: right;
padding-right: var(--spacing-2);
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.ss-heatmap__cell {
min-height: 26px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xs);
font-family: var(--font-family-mono);
font-feature-settings: 'tnum' 1;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
transition: outline-color var(--transition-fast), transform var(--transition-fast);
outline: 2px solid transparent;
outline-offset: -2px;
}
.ss-heatmap__cell--empty {
background: var(--color-bg-inset);
color: transparent;
text-shadow: none;
}
.ss-heatmap--clickable .ss-heatmap__cell:not(.ss-heatmap__cell--empty) { cursor: pointer; }
.ss-heatmap--clickable .ss-heatmap__cell:not(.ss-heatmap__cell--empty):hover,
.ss-heatmap--clickable .ss-heatmap__cell:not(.ss-heatmap__cell--empty):focus-visible {
outline-color: var(--color-text-primary);
transform: scale(1.04);
z-index: 1;
}
.ss-heatmap__legend {
display: flex;
align-items: center;
gap: var(--spacing-2);
margin-top: var(--spacing-3);
}
.ss-heatmap__legend-label {
font-size: var(--font-size-2xs);
font-family: var(--font-family-mono);
color: var(--color-text-tertiary);
white-space: nowrap;
}
.ss-heatmap__legend-bar {
flex: 1;
height: 8px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, #3b82f6 0%, #10b981 25%, #fbbf24 50%, #f97316 75%, #ef4444 100%);
}
/* ========== TOUCH ERGONOMICS ==========
On coarse pointers (touch devices), small action buttons and the header
unit/demo toggles get a >= 44px tap target via padding/min-height.
Fine-pointer (desktop) rendering is untouched. */
@media (pointer: coarse) {
.ss-btn--sm,
.ss-btn--icon {
min-height: 44px;
padding-top: var(--spacing-2-5);
padding-bottom: var(--spacing-2-5);
}
.demo-mode-btn {
min-height: 44px;
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
}
}
/* Workbench: tabular numerals wherever data renders (columns must align) */
.ss-table td, .ss-table th,
.ss-metric-value, .ss-kpi-bar__value, td.num, .cell-num {
font-variant-numeric: tabular-nums;
}
/* ========== ENTITY PICKER (async combobox) ========== */
.ss-picker { position: relative; }
.ss-picker__list {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
max-height: 260px;
overflow-y: auto;
margin: 0;
padding: 0;
list-style: none;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown);
}
.ss-picker__item {
display: flex;
flex-direction: column;
gap: 1px;
padding: var(--spacing-2) var(--spacing-3);
cursor: pointer;
border-bottom: 1px solid var(--color-border-secondary);
}
.ss-picker__item:last-child { border-bottom: 0; }
.ss-picker__item:hover, .ss-picker__item--active {
background: var(--color-bg-selected);
}
.ss-picker__label { font-size: var(--font-size-sm); color: var(--color-text-primary); }
.ss-picker__sub { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.ss-picker__empty {
padding: var(--spacing-2) var(--spacing-3);
color: var(--color-text-quaternary);
font-size: var(--font-size-sm);
}
/* ========== ROW ACTION KEBAB MENU (shared) ==========
One "..." button per table row that opens a fixed-position menu of
actions, instead of a row of buttons that wraps and looks cramped. */
.ss-rowmenu {
position: fixed;
z-index: var(--z-dropdown);
display: flex;
flex-direction: column;
min-width: 160px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
box-shadow: var(--shadow-lg);
padding: var(--spacing-1) 0;
}
.ss-rowmenu[hidden] { display: none !important; }
.ss-rowmenu__item {
background: transparent;
border: 0;
text-align: left;
padding: var(--spacing-1-5) var(--spacing-3);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
cursor: pointer;
}
.ss-rowmenu__item:hover { background: var(--color-bg-hover); }
.ss-rowmenu__item--danger { color: var(--color-critical); }
.ss-kebab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-1);
color: var(--color-text-secondary);
}
.ss-kebab-btn:hover { color: var(--color-text-primary); }
/* ========== SERVER DATA GRID (Workbench) ========== */
.ss-grid { border: 1px solid var(--color-border-primary); background: var(--color-bg-primary); }
/* Toolbar row (mockup: filter chips left; Saved views / Columns /
Export / primary CTA right) */
.ss-grid__toolbar {
display: flex;
align-items: center;
height: 40px;
padding: 0 var(--spacing-2) 0 var(--spacing-4);
border-bottom: 1px solid var(--color-border-secondary);
gap: var(--spacing-2);
}
.ss-grid__filters {
display: flex;
align-items: center;
gap: 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
min-width: 0;
overflow: hidden;
}
.ss-grid__filters .ss-grid__filter {
padding: 0 var(--spacing-3);
border-right: 1px solid var(--color-border-secondary);
white-space: nowrap;
}
.ss-grid__filters .ss-grid__filter:first-child { padding-left: 0; }
.ss-grid__filters .ss-grid__filter b { color: var(--color-text-primary); margin-left: 4px; }
.ss-grid__tools { display: flex; align-items: center; gap: var(--spacing-1); }
.ss-grid__tbtn {
height: 28px;
padding: 0 var(--spacing-3);
background: transparent;
border: 1px solid var(--color-border-primary);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
cursor: pointer;
}
.ss-grid__tbtn:hover {
border-color: var(--color-border-hover);
color: var(--color-text-primary);
}
.ss-grid__tbtn--primary { height: 28px; }
.ss-grid__menuwrap { position: relative; }
.ss-grid__menu {
position: absolute;
right: 0;
top: calc(100% + 4px);
min-width: 200px;
max-height: 320px;
overflow-y: auto;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown);
padding: var(--spacing-1) 0;
}
.ss-grid__menu[hidden] { display: none !important; }
.ss-grid__menu-item {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-1-5) var(--spacing-3);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
cursor: pointer;
}
.ss-grid__menu-item:hover { background: var(--color-bg-hover); }
.ss-grid__menu-item--row { justify-content: space-between; padding: 0; }
.ss-grid__menu-apply {
flex: 1;
text-align: left;
background: transparent;
border: 0;
padding: var(--spacing-1-5) var(--spacing-3);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
cursor: pointer;
}
.ss-grid__menu-del {
background: transparent;
border: 0;
color: var(--color-text-quaternary);
padding: 0 var(--spacing-3);
cursor: pointer;
font-size: var(--font-size-lg);
}
.ss-grid__menu-del:hover { color: var(--color-critical); }
.ss-grid__menu-empty {
padding: var(--spacing-2) var(--spacing-3);
color: var(--color-text-quaternary);
font-size: var(--font-size-sm);
}
.ss-grid__menu-save {
display: flex;
gap: var(--spacing-1);
padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
border-top: 1px solid var(--color-border-secondary);
margin-top: var(--spacing-1);
}
.ss-grid__menu-name {
flex: 1;
min-width: 0;
height: 26px;
padding: 0 var(--spacing-2);
border: 1px solid var(--color-border-primary);
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
}
.ss-grid__menu-savebtn {
height: 26px;
padding: 0 var(--spacing-2);
border: 1px solid var(--color-border-primary);
background: transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
cursor: pointer;
white-space: nowrap;
}
.ss-grid__menu-savebtn:hover { color: var(--color-text-primary); border-color: var(--color-border-hover); }
.ss-grid__scroll { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
.ss-grid__table { width: 100%; border-collapse: collapse; }
.ss-grid__table thead th { position: sticky; top: 0; z-index: 2; }
.ss-grid__th { cursor: pointer; user-select: none; white-space: nowrap; }
.ss-grid__sort { color: var(--color-text-quaternary); font-size: 9px; margin-left: 4px; }
.ss-grid__check { width: 36px; text-align: center; }
.ss-grid__row--sel td { background: var(--color-bg-selected) !important; }
.ss-grid__loading { text-align: center; padding: var(--spacing-6) !important; color: var(--color-text-tertiary); }
.ss-grid__batch[hidden] { display: none !important; }
.ss-grid__batch {
display: flex;
align-items: center;
gap: var(--spacing-4);
padding: 0 var(--spacing-4);
height: 36px;
background: var(--color-primary);
color: var(--color-text-inverse);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
[data-theme="dark"] .ss-grid__batch { background: var(--color-bg-selected); color: var(--color-text-primary); }
.ss-grid__batch-spacer { flex: 1; }
.ss-grid__batch-btn {
background: transparent;
border: none;
color: inherit;
font: inherit;
cursor: pointer;
padding: var(--spacing-1) var(--spacing-2);
}
.ss-grid__batch-btn:hover { text-decoration: underline; }
.ss-grid__foot {
display: flex;
align-items: center;
gap: var(--spacing-4);
padding: var(--spacing-2) var(--spacing-4);
border-top: 1px solid var(--color-border-primary);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.ss-grid__range, .ss-grid__pageinfo { font-variant-numeric: tabular-nums; }
.ss-grid__psize select { font: inherit; border: 1px solid var(--color-border-secondary); background: var(--color-bg-primary); color: var(--color-text-primary); padding: 2px 6px; }
.ss-grid__nav { display: flex; gap: var(--spacing-1); align-items: center; }
.ss-grid__navbtn {
min-width: 26px;
padding: 3px 8px;
border: 1px solid var(--color-border-secondary);
background: var(--color-bg-primary);
color: var(--color-text-secondary);
cursor: pointer;
}
.ss-grid__jump {
width: 64px;
padding: 3px 6px;
border: 1px solid var(--color-border-secondary);
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
text-align: center;
}
/* ========== COMMAND PALETTE ========== */
.ss-palette-backdrop[hidden] { display: none; }
.ss-palette-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
}
.ss-palette {
width: 620px;
max-width: 92vw;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
box-shadow: var(--shadow-2xl);
display: flex;
flex-direction: column;
}
.ss-palette__input {
border: 0;
border-bottom: 1px solid var(--color-border-primary);
padding: var(--spacing-3) var(--spacing-4);
font: var(--font-weight-normal) var(--font-size-lg) var(--font-family-base);
background: var(--color-bg-primary);
color: var(--color-text-primary);
outline: none;
}
.ss-palette__list {
list-style: none;
margin: 0;
padding: var(--spacing-1) 0;
max-height: 46vh;
overflow-y: auto;
}
.ss-palette__item {
display: flex;
align-items: baseline;
gap: var(--spacing-3);
padding: var(--spacing-2) var(--spacing-4);
cursor: pointer;
font-size: var(--font-size-sm);
}
.ss-palette__item--active, .ss-palette__item:hover { background: var(--color-bg-selected); }
.ss-palette__icon { color: var(--color-text-quaternary); width: 16px; flex: none; }
.ss-palette__label { color: var(--color-text-primary); }
.ss-palette__sub { margin-left: auto; color: var(--color-text-tertiary); font-size: var(--font-size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ss-palette__empty { padding: var(--spacing-4); color: var(--color-text-quaternary); text-align: center; }
.ss-palette__hint {
display: flex;
gap: var(--spacing-4);
padding: var(--spacing-2) var(--spacing-4);
border-top: 1px solid var(--color-border-secondary);
color: var(--color-text-quaternary);
font-size: var(--font-size-xs);
}
.ss-palette__hint kbd {
font: 500 10px var(--font-family-mono);
border: 1px solid var(--color-border-secondary);
padding: 0 4px;
margin-right: 2px;
}
/* ========== FORM VALIDATION + UNDO TOAST ========== */
.ss-input--error { border-color: var(--color-critical) !important; }
.ss-field-error {
color: var(--color-critical);
font-size: var(--font-size-xs);
margin-top: 3px;
}
.ss-toast--undo { display: flex; align-items: center; gap: var(--spacing-3); }
.ss-toast__undo {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
border: none;
background: transparent;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
Activity feed table (the Workbench mockup's .feedt LED-dot event list).
LED dot classes live in app.css; this is the table chrome.
--------------------------------------------------------------------------- */
.feedt { width: 100%; border-collapse: collapse; }
.feedt td {
padding: 7px 16px 7px 0;
border-bottom: 1px solid var(--color-border);
font-size: var(--font-size-xs);
color: var(--color-text-primary);
}
.feedt td:first-child { padding-left: 16px; width: 20px; }
.feedt tr:last-child td { border-bottom: 0; }
.feedt__dim { color: var(--color-text-tertiary); }
.feedt__time {
text-align: right;
color: var(--color-text-tertiary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.feedt__empty {
text-align: center;
color: var(--color-text-tertiary);
padding: var(--spacing-6) !important;
}
@keyframes feedt-flash {
0% { background: var(--color-accent-bg, rgba(180, 112, 15, 0.12)); }
100% { background: transparent; }
}
.feedt__row--new td { animation: feedt-flash 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
.feedt__row--new td { animation: none; }
}
.ss-portlet__body--flush { padding: 0; }
/* Oak seam 2 of 3: printed pages carry an oak rule under the module header,
the official-document letterhead line. */
@media print {
.ss-module-header {
border-bottom: 2px solid var(--color-brand-oak, #8B6F47);
padding-bottom: 8px;
}
}
/* Activity feed: long notifications preview one line and open the reader */
.feedt__row--readable { cursor: pointer; }
.feedt__row--readable:hover td { background: var(--color-bg-hover); }
.feedt__more {
color: var(--color-primary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
margin-left: var(--spacing-1);
white-space: nowrap;
}