/* =============================================================================
 * spectrum-components.css  —  SMKK Spectrum-inspired Component Layer
 * -----------------------------------------------------------------------------
 * OPT-IN COMPONENT CLASSES. ADDITIVE ONLY. DOES NOT RESTYLE EXISTING ELEMENTS.
 *
 * Every selector in this file is namespaced with the `spx-` prefix and is a
 * NEW class that does not exist anywhere else in the codebase. These rules
 * never match existing markup, existing class names, or bare element tags, so
 * linking this file changes nothing until you explicitly add an `spx-` class
 * to an element.
 *
 * All values are read from the design tokens in spectrum-tokens.css
 * (`--smkk-spx-*`). spectrum-tokens.css MUST be linked before this file.
 *
 * Design inspiration: Adobe Spectrum. NO Adobe branding / logos / Stock.
 *
 * Accessibility commitments:
 *   - Visible, high-contrast keyboard focus rings on every interactive class
 *     (:focus-visible), never removed.
 *   - Medium/large controls meet the 44px touch-target minimum.
 *   - Status is conveyed with TEXT + ICON slot, not color alone
 *     (see .spx-status-badge / .spx-badge structure).
 *   - Respects prefers-reduced-motion.
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * Shared focus treatment helper (applied per-component via :focus-visible)
 * --------------------------------------------------------------------------- */
.spx-button:focus-visible,
.spx-icon-button:focus-visible,
.spx-input:focus-visible,
.spx-select:focus-visible,
.spx-checkbox-control:focus-visible,
.spx-radio-control:focus-visible,
.spx-toggle:focus-visible,
.spx-tab:focus-visible,
.spx-sidebar-item:focus-visible {
  outline: var(--smkk-spx-focus-ring-width) solid var(--smkk-spx-focus-ring);
  outline-offset: var(--smkk-spx-focus-ring-offset);
}

/* =============================================================================
 * APP SHELL  —  .spx-app-shell / .spx-sidebar / .spx-topbar / .spx-main
 * ============================================================================= */
.spx-app-shell {
  display: grid;
  grid-template-columns: var(--smkk-spx-sidebar-width) 1fr;
  grid-template-rows: var(--smkk-spx-topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
  background: var(--smkk-spx-bg);
  color: var(--smkk-spx-text);
  font-family: var(--smkk-spx-font-ui);
  font-size: var(--smkk-spx-font-size-100);
  line-height: var(--smkk-spx-line-height-default);
}
.spx-app-shell.spx-app-shell--collapsed {
  grid-template-columns: var(--smkk-spx-sidebar-width-collapsed) 1fr;
}

.spx-sidebar {
  grid-area: sidebar;
  background: var(--smkk-spx-surface);
  border-right: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  padding: var(--smkk-spx-space-200) var(--smkk-spx-space-100);
  display: flex;
  flex-direction: column;
  gap: var(--smkk-spx-space-75);
  overflow-y: auto;
}
.spx-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--smkk-spx-space-150);
  min-height: var(--smkk-spx-touch-target-min);
  padding: var(--smkk-spx-space-100) var(--smkk-spx-space-150);
  border-radius: var(--smkk-spx-radius-200);
  color: var(--smkk-spx-text);
  text-decoration: none;
  font-weight: var(--smkk-spx-font-weight-medium);
  cursor: pointer;
  transition: background var(--smkk-spx-transition-fast);
}
.spx-sidebar-item:hover { background: var(--smkk-spx-surface-hover); }
.spx-sidebar-item.spx-is-active {
  background: var(--smkk-spx-primary-surface);
  color: var(--smkk-spx-primary-text);
}

.spx-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--smkk-spx-space-200);
  height: var(--smkk-spx-topbar-height);
  padding: 0 var(--smkk-spx-space-300);
  background: var(--smkk-spx-surface);
  border-bottom: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
}

.spx-main {
  grid-area: main;
  padding: var(--smkk-spx-space-300);
  overflow-y: auto;
}

/* =============================================================================
 * PAGE HEADER  —  .spx-page-header
 * ============================================================================= */
.spx-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--smkk-spx-space-200);
  margin-bottom: var(--smkk-spx-space-300);
}
.spx-page-header__title {
  margin: 0;
  font-size: var(--smkk-spx-font-size-500);
  font-weight: var(--smkk-spx-font-weight-bold);
  line-height: var(--smkk-spx-line-height-tight);
  color: var(--smkk-spx-text-strong);
}
.spx-page-header__subtitle {
  margin: var(--smkk-spx-space-75) 0 0;
  font-size: var(--smkk-spx-font-size-100);
  color: var(--smkk-spx-text-muted);
}
.spx-page-header__actions {
  display: flex;
  gap: var(--smkk-spx-space-100);
  flex-wrap: wrap;
}

/* =============================================================================
 * TOOLBAR  —  .spx-toolbar
 * ============================================================================= */
.spx-toolbar {
  display: flex;
  align-items: center;
  gap: var(--smkk-spx-space-100);
  flex-wrap: wrap;
  padding: var(--smkk-spx-space-100) var(--smkk-spx-space-150);
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-radius: var(--smkk-spx-radius-300);
}
.spx-toolbar__spacer { flex: 1 1 auto; }

/* =============================================================================
 * BUTTON  —  .spx-button (+ variants and sizes)
 * ============================================================================= */
.spx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--smkk-spx-space-100);
  min-height: var(--smkk-spx-control-height-md);
  min-width: var(--smkk-spx-touch-target-min);
  padding: 0 var(--smkk-spx-control-pad-x-md);
  border: var(--smkk-spx-border-width) solid transparent;
  border-radius: var(--smkk-spx-radius-200);
  font-family: var(--smkk-spx-font-ui);
  font-size: var(--smkk-spx-font-size-100);
  font-weight: var(--smkk-spx-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--smkk-spx-transition-fast),
              border-color var(--smkk-spx-transition-fast),
              color var(--smkk-spx-transition-fast);
}
.spx-button.spx-button--sm { min-height: var(--smkk-spx-control-height-sm); padding: 0 var(--smkk-spx-control-pad-x-sm); }
.spx-button.spx-button--lg { min-height: var(--smkk-spx-control-height-lg); padding: 0 var(--smkk-spx-control-pad-x-lg); font-size: var(--smkk-spx-font-size-200); }

/* Primary (filled accent) */
.spx-button--primary {
  background: var(--smkk-spx-primary);
  border-color: var(--smkk-spx-primary);
  color: var(--smkk-spx-text-on-accent);
}
.spx-button--primary:hover  { background: var(--smkk-spx-primary-hover);  border-color: var(--smkk-spx-primary-hover); }
.spx-button--primary:active { background: var(--smkk-spx-primary-active); border-color: var(--smkk-spx-primary-active); }

/* Secondary (outline) */
.spx-button--secondary {
  background: var(--smkk-spx-surface);
  border-color: var(--smkk-spx-border-strong);
  color: var(--smkk-spx-text);
}
.spx-button--secondary:hover { background: var(--smkk-spx-surface-hover); }

/* Quiet (text-only) */
.spx-button--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--smkk-spx-primary-text);
}
.spx-button--quiet:hover { background: var(--smkk-spx-primary-surface); }

/* Danger */
.spx-button--danger {
  background: var(--smkk-spx-danger);
  border-color: var(--smkk-spx-danger);
  color: var(--smkk-spx-text-on-accent);
}
.spx-button--danger:hover  { background: var(--smkk-spx-danger-hover);  border-color: var(--smkk-spx-danger-hover); }
.spx-button--danger:active { background: var(--smkk-spx-danger-active); border-color: var(--smkk-spx-danger-active); }

.spx-button[disabled],
.spx-button.spx-is-disabled {
  background: var(--smkk-spx-disabled-bg);
  border-color: var(--smkk-spx-disabled-border);
  color: var(--smkk-spx-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================================
 * ICON BUTTON  —  .spx-icon-button
 * ============================================================================= */
.spx-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--smkk-spx-touch-target-min);
  height: var(--smkk-spx-touch-target-min);
  padding: 0;
  background: transparent;
  border: var(--smkk-spx-border-width) solid transparent;
  border-radius: var(--smkk-spx-radius-200);
  color: var(--smkk-spx-text);
  cursor: pointer;
  transition: background var(--smkk-spx-transition-fast);
}
.spx-icon-button:hover { background: var(--smkk-spx-surface-hover); }
.spx-icon-button[disabled],
.spx-icon-button.spx-is-disabled {
  color: var(--smkk-spx-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================================
 * FORM FIELD  —  .spx-form-field / label / hint / error
 * ============================================================================= */
.spx-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--smkk-spx-space-75);
  margin-bottom: var(--smkk-spx-space-200);
}
.spx-form-field__label {
  font-size: var(--smkk-spx-font-size-100);
  font-weight: var(--smkk-spx-font-weight-semibold);
  color: var(--smkk-spx-text);
}
.spx-form-field__hint {
  font-size: var(--smkk-spx-font-size-75);
  color: var(--smkk-spx-text-muted);
}
.spx-form-field__error {
  font-size: var(--smkk-spx-font-size-75);
  font-weight: var(--smkk-spx-font-weight-medium);
  color: var(--smkk-spx-danger-text);
}

/* =============================================================================
 * INPUT / SELECT  —  .spx-input / .spx-select
 * ============================================================================= */
.spx-input,
.spx-select {
  display: block;
  width: 100%;
  min-height: var(--smkk-spx-control-height-md);
  padding: 0 var(--smkk-spx-control-pad-x-md);
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border-strong);
  border-radius: var(--smkk-spx-radius-200);
  color: var(--smkk-spx-text);
  font-family: var(--smkk-spx-font-ui);
  font-size: var(--smkk-spx-font-size-100);
  line-height: var(--smkk-spx-line-height-default);
  transition: border-color var(--smkk-spx-transition-fast);
}
.spx-input::placeholder { color: var(--smkk-spx-text-muted); }
.spx-input:hover,
.spx-select:hover { border-color: var(--smkk-spx-text-muted); }
.spx-input.spx-is-invalid,
.spx-select.spx-is-invalid { border-color: var(--smkk-spx-danger); }
.spx-input[disabled],
.spx-select[disabled] {
  background: var(--smkk-spx-disabled-bg);
  border-color: var(--smkk-spx-disabled-border);
  color: var(--smkk-spx-disabled-text);
  cursor: not-allowed;
}
/* Multi-line text */
.spx-input.spx-input--textarea {
  min-height: calc(var(--smkk-spx-control-height-md) * 2.5);
  padding: var(--smkk-spx-space-100) var(--smkk-spx-control-pad-x-md);
  resize: vertical;
}

/* =============================================================================
 * CHECKBOX / RADIO  —  .spx-checkbox / .spx-radio (wrapper + control)
 * ============================================================================= */
.spx-checkbox,
.spx-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--smkk-spx-space-100);
  min-height: var(--smkk-spx-touch-target-min);
  cursor: pointer;
  color: var(--smkk-spx-text);
  font-size: var(--smkk-spx-font-size-100);
}
.spx-checkbox-control,
.spx-radio-control {
  appearance: none;
  -webkit-appearance: none;
  width: var(--smkk-spx-icon-size-md);
  height: var(--smkk-spx-icon-size-md);
  margin: 0;
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border-strong);
  cursor: pointer;
  transition: background var(--smkk-spx-transition-fast),
              border-color var(--smkk-spx-transition-fast);
}
.spx-checkbox-control { border-radius: var(--smkk-spx-radius-50); }
.spx-radio-control    { border-radius: var(--smkk-spx-radius-full); }
.spx-checkbox-control:checked,
.spx-radio-control:checked {
  background: var(--smkk-spx-primary);
  border-color: var(--smkk-spx-primary);
}

/* =============================================================================
 * TOGGLE / SWITCH  —  .spx-toggle
 * ============================================================================= */
.spx-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  background: var(--smkk-spx-border-strong);
  border-radius: var(--smkk-spx-radius-full);
  cursor: pointer;
  transition: background var(--smkk-spx-transition-base);
}
.spx-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: var(--smkk-spx-radius-full);
  box-shadow: var(--smkk-spx-shadow-100);
  transition: transform var(--smkk-spx-transition-base);
}
.spx-toggle:checked { background: var(--smkk-spx-primary); }
.spx-toggle:checked::after { transform: translateX(20px); }

/* =============================================================================
 * CARD / PANEL  —  .spx-card / .spx-panel
 * ============================================================================= */
.spx-card {
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-radius: var(--smkk-spx-radius-300);
  box-shadow: var(--smkk-spx-shadow-100);
  padding: var(--smkk-spx-space-300);
}
.spx-card__header {
  margin-bottom: var(--smkk-spx-space-200);
  font-size: var(--smkk-spx-font-size-300);
  font-weight: var(--smkk-spx-font-weight-semibold);
  color: var(--smkk-spx-text-strong);
}
.spx-panel {
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-radius: var(--smkk-spx-radius-300);
}
.spx-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--smkk-spx-space-200);
  padding: var(--smkk-spx-space-150) var(--smkk-spx-space-200);
  border-bottom: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  font-weight: var(--smkk-spx-font-weight-semibold);
  color: var(--smkk-spx-text-strong);
}
.spx-panel__body { padding: var(--smkk-spx-space-200); }

/* =============================================================================
 * BADGE / STATUS BADGE  —  .spx-badge / .spx-status-badge
 * Status is conveyed with TEXT (and an optional dot/icon slot), never by
 * color alone. The colored dot is supplementary, not the sole signal.
 * ============================================================================= */
.spx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--smkk-spx-space-75);
  padding: var(--smkk-spx-space-50) var(--smkk-spx-space-100);
  border-radius: var(--smkk-spx-radius-full);
  font-size: var(--smkk-spx-font-size-75);
  font-weight: var(--smkk-spx-font-weight-semibold);
  line-height: 1.4;
  background: var(--smkk-spx-surface-subtle);
  color: var(--smkk-spx-text);
}

.spx-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--smkk-spx-space-75);
  padding: var(--smkk-spx-space-50) var(--smkk-spx-space-100);
  border: var(--smkk-spx-border-width) solid transparent;
  border-radius: var(--smkk-spx-radius-full);
  font-size: var(--smkk-spx-font-size-75);
  font-weight: var(--smkk-spx-font-weight-semibold);
  line-height: 1.4;
}
/* Supplementary status dot — paired with required visible text */
.spx-status-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--smkk-spx-radius-full);
  background: currentColor;
  flex: 0 0 auto;
}
.spx-status-badge--success { background: var(--smkk-spx-success-surface); color: var(--smkk-spx-success-text); border-color: var(--smkk-spx-success); }
.spx-status-badge--danger  { background: var(--smkk-spx-danger-surface);  color: var(--smkk-spx-danger-text);  border-color: var(--smkk-spx-danger); }
.spx-status-badge--warning { background: var(--smkk-spx-warning-surface); color: var(--smkk-spx-warning-text); border-color: var(--smkk-spx-warning); }
.spx-status-badge--info    { background: var(--smkk-spx-info-surface);    color: var(--smkk-spx-info-text);    border-color: var(--smkk-spx-info); }
.spx-status-badge--neutral { background: var(--smkk-spx-surface-subtle);  color: var(--smkk-spx-text-muted);   border-color: var(--smkk-spx-border); }

/* =============================================================================
 * DATA TABLE  —  .spx-table
 * ============================================================================= */
.spx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--smkk-spx-font-size-100);
  color: var(--smkk-spx-text);
}
.spx-table th,
.spx-table td {
  padding: var(--smkk-spx-space-100) var(--smkk-spx-space-150);
  text-align: left;
  border-bottom: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  vertical-align: middle;
}
.spx-table thead th {
  font-weight: var(--smkk-spx-font-weight-semibold);
  color: var(--smkk-spx-text-strong);
  background: var(--smkk-spx-surface-subtle);
  position: sticky;
  top: 0;
}
.spx-table tbody tr:hover { background: var(--smkk-spx-surface-hover); }
.spx-table.spx-table--striped tbody tr:nth-child(even) { background: var(--smkk-spx-surface-subtle); }

/* =============================================================================
 * EMPTY STATE  —  .spx-empty-state
 * ============================================================================= */
.spx-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--smkk-spx-space-150);
  padding: var(--smkk-spx-space-600) var(--smkk-spx-space-300);
  color: var(--smkk-spx-text-muted);
}
.spx-empty-state__title {
  font-size: var(--smkk-spx-font-size-300);
  font-weight: var(--smkk-spx-font-weight-semibold);
  color: var(--smkk-spx-text-strong);
}

/* =============================================================================
 * TABS  —  .spx-tabs / .spx-tab
 * ============================================================================= */
.spx-tabs {
  display: flex;
  gap: var(--smkk-spx-space-100);
  border-bottom: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
}
.spx-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--smkk-spx-touch-target-min);
  padding: 0 var(--smkk-spx-space-150);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--smkk-spx-text-muted);
  font-family: var(--smkk-spx-font-ui);
  font-size: var(--smkk-spx-font-size-100);
  font-weight: var(--smkk-spx-font-weight-medium);
  cursor: pointer;
  transition: color var(--smkk-spx-transition-fast),
              border-color var(--smkk-spx-transition-fast);
}
.spx-tab:hover { color: var(--smkk-spx-text); }
.spx-tab.spx-is-active {
  color: var(--smkk-spx-primary-text);
  border-bottom-color: var(--smkk-spx-primary);
}

/* =============================================================================
 * TOAST  —  .spx-toast (+ container)
 * ============================================================================= */
.spx-toast-region {
  position: fixed;
  bottom: var(--smkk-spx-space-300);
  right: var(--smkk-spx-space-300);
  display: flex;
  flex-direction: column;
  gap: var(--smkk-spx-space-100);
  z-index: 1080;
}
.spx-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--smkk-spx-space-150);
  min-width: 280px;
  max-width: 420px;
  padding: var(--smkk-spx-space-150) var(--smkk-spx-space-200);
  background: var(--smkk-spx-surface-elevated);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-left: 4px solid var(--smkk-spx-info);
  border-radius: var(--smkk-spx-radius-300);
  box-shadow: var(--smkk-spx-shadow-300);
  color: var(--smkk-spx-text);
  font-size: var(--smkk-spx-font-size-100);
}
.spx-toast--success { border-left-color: var(--smkk-spx-success); }
.spx-toast--danger  { border-left-color: var(--smkk-spx-danger); }
.spx-toast--warning { border-left-color: var(--smkk-spx-warning); }

/* =============================================================================
 * MODAL  —  .spx-modal (overlay + dialog)
 * ============================================================================= */
.spx-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--smkk-spx-space-300);
  background: rgba(15, 18, 22, 0.45);
  z-index: 1070;
}
.spx-modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--smkk-spx-surface-elevated);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-radius: var(--smkk-spx-radius-400);
  box-shadow: var(--smkk-spx-shadow-400);
  overflow: hidden;
}
.spx-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--smkk-spx-space-200);
  padding: var(--smkk-spx-space-200) var(--smkk-spx-space-300);
  border-bottom: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  font-size: var(--smkk-spx-font-size-300);
  font-weight: var(--smkk-spx-font-weight-semibold);
  color: var(--smkk-spx-text-strong);
}
.spx-modal__body { padding: var(--smkk-spx-space-300); overflow-y: auto; }
.spx-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--smkk-spx-space-100);
  padding: var(--smkk-spx-space-200) var(--smkk-spx-space-300);
  border-top: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
}

/* =============================================================================
 * UTILITY: monospace text region  —  .spx-mono
 * ============================================================================= */
.spx-mono {
  font-family: var(--smkk-spx-font-mono);
  font-size: var(--smkk-spx-font-size-100);
}

/* =============================================================================
 * WORKSPACE LAYOUT  —  .spx-workspace + master/detail panes + worklist
 * -----------------------------------------------------------------------------
 * INTENT (the governing UX standard for SMKK daily-use pages):
 *   A daily-use page is a WORKSPACE an employee USES to do the Keith's Kitchens
 *   workflow — NOT a wall of explanatory cards and NOT a full-page scrolling
 *   nightmare. Therefore:
 *     - The workspace fills the remaining viewport height under the app chrome.
 *     - The PAGE does not scroll. Scrolling happens INSIDE the list/detail panes
 *       (overflow:auto), so the toolbar and primary actions stay visible.
 *     - Actions are toolbar-first + inline; work happens in-context, not by
 *       navigating away or reading feature explainers.
 *     - Layout is master–detail: a dense worklist pane + a detail/action pane.
 *
 * HEIGHT MATH (no hardcoded pixel chrome):
 *   These pages render inside the existing app-shell chrome (a `main` with
 *   padding + an `.app-shell` card with its own padding + an `.app-header`).
 *   Rather than hardcode that chrome height (brittle), the workspace uses a
 *   single tunable offset var `--smkk-spx-ws-chrome` (default 220px, an
 *   intentional over-estimate so it never overflows the window) and a flex
 *   column so the body row absorbs whatever space is left. If a page needs a
 *   tighter fit it can set `--smkk-spx-ws-chrome` inline on `.spx-workspace`.
 *   The flex approach means the exact value is non-critical: the toolbar takes
 *   its natural height and the body fills the rest with min-height:0 so its
 *   children can scroll.
 * --------------------------------------------------------------------------- */
.spx-workspace {
  /* Tunable chrome offset — overridable inline per page. Over-estimates so the
   * workspace never forces the WINDOW to scroll; the slack lives at the bottom. */
  --smkk-spx-ws-chrome: 220px;
  --smkk-spx-ws-list-width: 360px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Fill the viewport remainder. calc keeps a floor; flex children do the rest. */
  height: calc(100vh - var(--smkk-spx-ws-chrome));
  min-height: 480px;
  max-height: calc(100vh - var(--smkk-spx-ws-chrome));
  gap: var(--smkk-spx-space-150);
}

/* Sticky primary-action toolbar — the worker's actions stay on screen. */
.spx-workspace__toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--smkk-spx-space-100);
  flex-wrap: wrap;
  padding: var(--smkk-spx-space-100) var(--smkk-spx-space-150);
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-radius: var(--smkk-spx-radius-300);
}
.spx-workspace__toolbar-spacer { flex: 1 1 auto; }
.spx-workspace__title {
  margin: 0;
  font-size: var(--smkk-spx-font-size-300);
  font-weight: var(--smkk-spx-font-weight-bold);
  color: var(--smkk-spx-text-strong);
  line-height: 1.1;
}
/* Filter pills inside the toolbar (all / blocked / new + counts). */
.spx-workspace__filters { display: flex; gap: var(--smkk-spx-space-75); flex-wrap: wrap; }
.spx-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--smkk-spx-space-75);
  min-height: var(--smkk-spx-touch-target-min);
  padding: 0 var(--smkk-spx-space-150);
  background: transparent;
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border-strong);
  border-radius: var(--smkk-spx-radius-full);
  color: var(--smkk-spx-text);
  font-family: var(--smkk-spx-font-ui);
  font-size: var(--smkk-spx-font-size-100);
  font-weight: var(--smkk-spx-font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--smkk-spx-transition-fast), border-color var(--smkk-spx-transition-fast);
}
.spx-filter-pill:hover { background: var(--smkk-spx-surface-hover); }
.spx-filter-pill.spx-is-active {
  /* Eye-care hard-paired selected chip: fill + its own text token together (R2).
     Falls back to the primary-surface pair for any theme without chip tokens. */
  background: var(--smkk-spx-chip-selected-bg, var(--smkk-spx-primary-surface));
  border-color: var(--smkk-spx-chip-selected-border, var(--smkk-spx-primary));
  color: var(--smkk-spx-chip-selected-text, var(--smkk-spx-primary-text));
}
.spx-filter-pill:focus-visible {
  outline: var(--smkk-spx-focus-ring-width) solid var(--smkk-spx-focus-ring);
  outline-offset: var(--smkk-spx-focus-ring-offset);
}
.spx-filter-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 var(--smkk-spx-space-50);
  border-radius: var(--smkk-spx-radius-full);
  background: var(--smkk-spx-surface-subtle);
  font-size: var(--smkk-spx-font-size-75);
  font-weight: var(--smkk-spx-font-weight-semibold);
}

/* Body row — the 2-pane split. Fills the space left by the toolbar; itself
 * does NOT page-scroll (min-height:0 lets the panes own the overflow). */
.spx-workspace__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--smkk-spx-ws-list-width) minmax(0, 1fr);
  gap: var(--smkk-spx-space-150);
}
/* Single-pane variant (e.g. command center / capture) — no fixed list rail. */
.spx-workspace__body--single { grid-template-columns: minmax(0, 1fr); }

/* The dense list/worklist pane — scrolls internally. */
.spx-workspace__list {
  min-height: 0;
  overflow: auto;
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-radius: var(--smkk-spx-radius-300);
}
/* The detail / action pane — scrolls internally, independent of the list. */
.spx-workspace__detail {
  min-height: 0;
  overflow: auto;
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-radius: var(--smkk-spx-radius-300);
  padding: var(--smkk-spx-space-200);
}

/* =============================================================================
 * WORKLIST  —  .spx-worklist / .spx-worklist__item (dense selectable rows)
 * Dense rows with a status + a primary inline action. No big cards.
 * ============================================================================= */
.spx-worklist { display: flex; flex-direction: column; }
.spx-worklist__group-label {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--smkk-spx-space-75) var(--smkk-spx-space-150);
  background: var(--smkk-spx-surface-subtle);
  border-bottom: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  font-size: var(--smkk-spx-font-size-75);
  font-weight: var(--smkk-spx-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--smkk-spx-text-muted);
}
.spx-worklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--smkk-spx-space-100);
  width: 100%;
  text-align: left;
  padding: var(--smkk-spx-space-100) var(--smkk-spx-space-150);
  min-height: var(--smkk-spx-touch-target-min);
  background: transparent;
  border: none;
  border-bottom: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-left: 3px solid transparent;
  color: var(--smkk-spx-text);
  font-family: var(--smkk-spx-font-ui);
  font-size: var(--smkk-spx-font-size-100);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--smkk-spx-transition-fast);
}
.spx-worklist__item:hover { background: var(--smkk-spx-surface-hover); }
.spx-worklist__item.spx-is-active {
  background: var(--smkk-spx-primary-surface);
  border-left-color: var(--smkk-spx-primary);
}
.spx-worklist__item:focus-visible {
  outline: var(--smkk-spx-focus-ring-width) solid var(--smkk-spx-focus-ring);
  outline-offset: calc(var(--smkk-spx-focus-ring-offset) * -1);
}
.spx-worklist__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spx-worklist__title {
  font-weight: var(--smkk-spx-font-weight-semibold);
  color: var(--smkk-spx-text-strong);
  line-height: 1.25;
  /* Keep rows dense: clamp the title to a single line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spx-worklist__meta {
  font-size: var(--smkk-spx-font-size-75);
  color: var(--smkk-spx-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spx-worklist__aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--smkk-spx-space-50); }

/* =============================================================================
 * DETAIL PANEL  —  .spx-detail (in-context work surface, no navigate-away)
 * ============================================================================= */
.spx-detail { display: flex; flex-direction: column; gap: var(--smkk-spx-space-200); }
.spx-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--smkk-spx-space-150);
}
.spx-detail__title {
  margin: 0;
  font-size: var(--smkk-spx-font-size-400);
  font-weight: var(--smkk-spx-font-weight-bold);
  color: var(--smkk-spx-text-strong);
  line-height: 1.2;
}
.spx-detail__badges { display: flex; flex-wrap: wrap; gap: var(--smkk-spx-space-75); }
/* Dense key/value facts — replaces the "explain in cards" pattern. */
.spx-detail__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--smkk-spx-space-75) var(--smkk-spx-space-150); margin: 0; }
.spx-detail__facts dt { font-size: var(--smkk-spx-font-size-75); font-weight: var(--smkk-spx-font-weight-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--smkk-spx-text-muted); }
.spx-detail__facts dd { margin: 0; color: var(--smkk-spx-text); }
.spx-detail__note {
  padding: var(--smkk-spx-space-150);
  border-radius: var(--smkk-spx-radius-200);
  background: var(--smkk-spx-surface-subtle);
  color: var(--smkk-spx-text);
  font-size: var(--smkk-spx-font-size-100);
  line-height: 1.45;
}
.spx-detail__note--danger { background: var(--smkk-spx-danger-surface); color: var(--smkk-spx-danger-text); }

/* =============================================================================
 * ACTION BAR  —  .spx-actionbar (inline action row in the detail pane)
 * ============================================================================= */
.spx-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--smkk-spx-space-100);
  align-items: center;
}
.spx-actionbar form { margin: 0; }
.spx-actionbar .spx-button { min-height: var(--smkk-spx-touch-target-min); }

/* =============================================================================
 * COMPACT DATA TABLE  —  .spx-data-table--compact
 * A denser variant of .spx-table for worklist/detail tables. Header sticks so
 * the table can scroll inside a pane without losing its column labels.
 * ============================================================================= */
.spx-data-table--compact { width: 100%; border-collapse: collapse; font-size: var(--smkk-spx-font-size-75); color: var(--smkk-spx-text); }
.spx-data-table--compact th,
.spx-data-table--compact td {
  padding: var(--smkk-spx-space-50) var(--smkk-spx-space-100);
  text-align: left;
  border-bottom: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  vertical-align: middle;
  white-space: nowrap;
}
.spx-data-table--compact thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: var(--smkk-spx-font-weight-semibold);
  color: var(--smkk-spx-text-strong);
  background: var(--smkk-spx-surface-subtle);
}
.spx-data-table--compact tbody tr:hover { background: var(--smkk-spx-surface-hover); }

/* =============================================================================
 * COMMAND-CENTER METRIC STRIP  —  .spx-metric-strip / .spx-metric
 * A tight horizontal row of metrics for compact command-center pages. NOT a
 * grid of big cards — a single dense strip that does not push content offscreen.
 * ============================================================================= */
.spx-metric-strip {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--smkk-spx-space-150);
  padding: var(--smkk-spx-space-150);
  background: var(--smkk-spx-surface);
  border: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
  border-radius: var(--smkk-spx-radius-300);
}
.spx-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  padding-right: var(--smkk-spx-space-150);
  border-right: var(--smkk-spx-border-width) solid var(--smkk-spx-border);
}
.spx-metric:last-child { border-right: none; padding-right: 0; }
.spx-metric__value { font-size: var(--smkk-spx-font-size-500); font-weight: var(--smkk-spx-font-weight-bold); line-height: 1; color: var(--smkk-spx-text-strong); }
.spx-metric__label { font-size: var(--smkk-spx-font-size-75); font-weight: var(--smkk-spx-font-weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--smkk-spx-text-muted); }

/* Shortcut/jump-in lane — compact inline buttons, not a card wall. */
.spx-lane {
  display: flex;
  flex-wrap: wrap;
  gap: var(--smkk-spx-space-100);
  align-items: center;
}
.spx-lane__label {
  font-size: var(--smkk-spx-font-size-75);
  font-weight: var(--smkk-spx-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--smkk-spx-text-muted);
  margin-right: var(--smkk-spx-space-100);
}

/* =============================================================================
 * RESPONSIVE  —  panes stack on small screens; list collapses to a drawer.
 * On narrow viewports the page is allowed to grow (height:auto) so a phone can
 * scroll the whole surface — the no-page-scroll rule is a DESKTOP workspace
 * rule; on a phone a single-column flow is the correct, usable fallback.
 * ============================================================================= */
@media (max-width: 900px) {
  .spx-workspace {
    height: auto;
    max-height: none;
    min-height: 0;
  }
  .spx-workspace__body { grid-template-columns: minmax(0, 1fr); }
  /* List becomes a bounded, collapsible drawer above the detail. */
  .spx-workspace__list { max-height: 45vh; }
  .spx-workspace__list--drawer[hidden] { display: none; }
}

/* PHONE (<=760px): release the list pane from the 45vh nested-scroller cap.
 * On a real phone, trapping the whole ticket list inside a ~45vh internal
 * scroll box means an employee sees barely one or two tickets and has to
 * scroll inside a tiny box to find work — the "see my tickets sucks" failure.
 * The workspace already switches to height:auto here (single-column flow per
 * the responsive intent above), so the list should simply flow with the page
 * and be reached by normal page scroll. The 45vh drawer behavior is kept for
 * tablets/landscape (761-900px) where the master/detail split still helps.
 * Detail pane likewise flows instead of owning a second nested scroll. */
@media (max-width: 760px) {
  .spx-workspace__list,
  .spx-workspace__detail {
    max-height: none;
    overflow: visible;
  }
}

/* =============================================================================
 * MOTION PREFERENCE
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .spx-button,
  .spx-icon-button,
  .spx-input,
  .spx-select,
  .spx-checkbox-control,
  .spx-radio-control,
  .spx-toggle,
  .spx-toggle::after,
  .spx-tab,
  .spx-sidebar-item,
  .spx-filter-pill,
  .spx-worklist__item {
    transition: none;
  }
}

/* Touch devices: every interactive Spectrum control meets the 44px minimum tap target
   so buttons/tabs/pills are comfortably tappable on phones and tablets. Scoped to coarse
   pointers so desktop density is unaffected. */
@media (pointer: coarse) {
  .spx-button,
  .spx-tab,
  .spx-sidebar-item,
  .spx-filter-pill,
  .spx-chip,
  .spx-icon-button {
    min-height: 44px;
  }

  .spx-icon-button {
    min-width: 44px;
  }
}

/* 2026-06-18: selected/highlighted control contrast safety net.
   Employees reported selected buttons across SMKK becoming highlighted with
   unreadable text. Keep this scoped to interactive controls so it does not
   recolor active layout containers. */
body:is(.kk-brand, .app-mode, .kk-site) :is(
  button[aria-pressed="true"],
  button[aria-selected="true"],
  [role="tab"][aria-selected="true"],
  .btn-check:checked + .btn,
  a.active,
  button.active,
  [role="button"].active,
  [role="tab"].active,
  .app-btn.primary,
  .app-btn.active,
  .btn-primary,
  .btn.active,
  .pill.active,
  .chip.active,
  .tag.active,
  .badge.active,
  .status-pill.active,
  .filter-pill.active,
  .filter-button.active,
  .desktop-range-quick.active,
  .inventory-action-btn.active,
  .inventory-filter-btn.active,
  .sales-stage-step.active,
  .sales-lead-board-filter.active,
  .installer-field-filter.active,
  .kk-app-common-link.active,
  .kk-operations-command-link.active,
  .smkk-more-sheet__link.active,
  .spx-button[aria-pressed="true"],
  .spx-button.is-selected,
  .spx-tab[aria-selected="true"],
  .spx-tab.is-selected,
  .spx-filter-pill[aria-pressed="true"],
  .spx-filter-pill.is-selected,
  .spx-chip.is-selected
) {
  background: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
  border-color: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
  color: var(--smkk-spx-text-on-accent, var(--smkk-theme-action-text, #ffffff)) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

body:is(.kk-brand, .app-mode, .kk-site) :is(
  button[aria-pressed="true"],
  button[aria-selected="true"],
  [role="tab"][aria-selected="true"],
  .btn-check:checked + .btn,
  a.active,
  button.active,
  [role="button"].active,
  [role="tab"].active,
  .app-btn.primary,
  .app-btn.active,
  .btn-primary,
  .btn.active,
  .pill.active,
  .chip.active,
  .tag.active,
  .badge.active,
  .status-pill.active,
  .filter-pill.active,
  .filter-button.active,
  .desktop-range-quick.active,
  .inventory-action-btn.active,
  .inventory-filter-btn.active,
  .sales-stage-step.active,
  .sales-lead-board-filter.active,
  .installer-field-filter.active,
  .kk-app-common-link.active,
  .kk-operations-command-link.active,
  .smkk-more-sheet__link.active,
  .spx-button[aria-pressed="true"],
  .spx-button.is-selected,
  .spx-tab[aria-selected="true"],
  .spx-tab.is-selected,
  .spx-filter-pill[aria-pressed="true"],
  .spx-filter-pill.is-selected,
  .spx-chip.is-selected
) :is(span, small, strong, em, b, svg) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor;
}

/* 2026-06-19: broaden the selected-control contrast net so it catches ALL pill/chip/tab/
   filter/toggle/segment variants (incl. .desktop-pill.active on the Scheduling dashboard) —
   current and future — instead of an enumerated class list that keeps missing new ones.
   Scoped to control-like class patterns so it never recolors layout containers. */
body:is(.kk-brand, .app-mode, .kk-site) :is(
  [class*="pill"].active, [class*="pill"][aria-pressed="true"], [class*="pill"][aria-selected="true"], [class*="pill"].is-selected, [class*="pill"].selected,
  [class*="chip"].active, [class*="chip"][aria-pressed="true"], [class*="chip"][aria-selected="true"], [class*="chip"].is-selected, [class*="chip"].selected,
  [class*="tab"].active, [class*="tab"][aria-selected="true"], [class*="tab"].is-selected,
  [class*="filter"].active, [class*="filter"][aria-pressed="true"], [class*="filter"].is-selected,
  [class*="toggle"].active, [class*="toggle"][aria-pressed="true"], [class*="toggle"].is-selected,
  [class*="segment"].active, [class*="segment"][aria-selected="true"], [class*="seg-"].active,
  [class*="-btn"].active, [class*="-button"].active, [class*="quick"].active,
  [class*="view"].active, [class*="range"].active, [class*="stage"].active, [class*="step"].active
) {
  background: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
  border-color: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
  color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  text-shadow: none !important;
}
body:is(.kk-brand, .app-mode, .kk-site) :is(
  [class*="pill"].active, [class*="chip"].active, [class*="tab"].active, [class*="filter"].active,
  [class*="toggle"].active, [class*="segment"].active, [class*="-btn"].active, [class*="-button"].active,
  [class*="pill"][aria-pressed="true"], [class*="pill"][aria-selected="true"], [class*="tab"][aria-selected="true"],
  [class*="chip"][aria-selected="true"], [class*="chip"].is-selected, [class*="pill"].is-selected, [class*="filter"].is-selected
) :is(span, small, strong, em, b, i, svg, a, label, time) {
  color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  stroke: var(--smkk-spx-text-on-accent, #ffffff) !important;
}

/* 2026-06-19: site-wide mobile-text-safety net. ~50 SMKK pages had content text (route notes,
   addresses, copy, descriptions) that didn't wrap on phones -> "awkward super long text" / overflow.
   SCOPED to content text + table wrappers only. Buttons/pills/tabs/chips/nav are deliberately NOT
   targeted (they stay nowrap so labels don't break). overflow-wrap can't un-truncate intentional
   nowrap+ellipsis cells, so those are safe too. */
@media (max-width: 640px) {
  body:is(.kk-brand, .app-mode, .kk-site) :is(
    p, li, dd, blockquote,
    .reception-route-note, .reception-address-stage-copy, .reception-overflow-note,
    [class*="-note"], [class*="-copy"], [class*="-desc"], [class*="-summary"],
    [class*="-address"], [class*="-detail-text"], [class*="-message"], [class*="-subtitle"]
  ) {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* wide data tables: scroll inside their wrapper instead of stretching the page */
  body:is(.kk-brand, .app-mode, .kk-site) :is(
    .table-wrap, [class*="table-wrap"], .data-card .table-wrap, .dash-table-wrap, .responsive-card-table
  ) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}

/* 2026-06-19: the spectrum framework toggles ".spx-is-active" (NOT .active) via JS for selected
   pills/tabs/chips — e.g. the Inventory dashboard lane filter pills that stayed unreadable
   blue/green. The contrast net missed this class. Force readable dark-bg/white-text here too. */
body:is(.kk-brand, .app-mode, .kk-site) :is(
  [class*="pill"].spx-is-active, [class*="filter"].spx-is-active, [class*="chip"].spx-is-active,
  [class*="tab"].spx-is-active, [class*="toggle"].spx-is-active, [class*="seg"].spx-is-active,
  [class*="-btn"].spx-is-active, .spx-button.spx-is-active, .spx-filter-pill.spx-is-active,
  .spx-tab.spx-is-active, .spx-chip.spx-is-active, .inventory-filter-btn.spx-is-active
) {
  background: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
  border-color: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
  color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  text-shadow: none !important;
}
body:is(.kk-brand, .app-mode, .kk-site) :is(
  [class*="pill"].spx-is-active, [class*="filter"].spx-is-active, [class*="chip"].spx-is-active,
  [class*="tab"].spx-is-active, .spx-filter-pill.spx-is-active, .inventory-filter-btn.spx-is-active
) :is(span, small, strong, em, b, i, svg, a, label, time) {
  color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  stroke: var(--smkk-spx-text-on-accent, #ffffff) !important;
}

/* 2026-06-19: third convention — bare ".is-active" (NOT .active / .spx-is-active) on selected
   control chips/pills/switches (Dashboard range pills, Inbox view/scope/focus chips, shop-segmented).
   Scoped to control patterns + the specific known ones, so it never recolors layout cards. */
body:is(.kk-brand, .app-mode, .kk-site) :is(
  [class*="pill"].is-active, [class*="chip"].is-active, [class*="filter"].is-active,
  [class*="tab"].is-active, [class*="toggle"].is-active, [class*="switch"].is-active,
  [class*="-btn"].is-active, [class*="segment"] a.is-active,
  .dashboard-range-pill.is-active, .inbox-saved-view-chip.is-active, .inbox-scope-switch.is-active,
  .inbox-focus-chip.is-active, .shop-segmented a.is-active
) {
  background: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
  border-color: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
  color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  text-shadow: none !important;
}
body:is(.kk-brand, .app-mode, .kk-site) :is(
  [class*="pill"].is-active, [class*="chip"].is-active, [class*="filter"].is-active,
  [class*="tab"].is-active, [class*="switch"].is-active, .dashboard-range-pill.is-active,
  .inbox-saved-view-chip.is-active, .inbox-focus-chip.is-active, .shop-segmented a.is-active
) :is(span, small, strong, em, b, i, svg, a, label, time) {
  color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--smkk-spx-text-on-accent, #ffffff) !important;
  stroke: var(--smkk-spx-text-on-accent, #ffffff) !important;
}

/* 2026-06-19: app-mode top command/utility row clipped on phones (OR/Orders, SC/Scheduling,
   Search, Tickets cut off on Network/Reception/etc). flex-wrap lets it wrap to a 2nd line instead
   of clipping — graceful: helps if it's a flex row, harmless no-op otherwise, never clips dropdowns. */
@media (max-width: 640px) {
  body:is(.kk-brand, .app-mode):not(.ai-helper-page) .kk-app-utility-row {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    row-gap: 6px !important;
  }
  body:is(.kk-brand, .app-mode):not(.ai-helper-page) .kk-app-utility-row > * {
    min-width: 0 !important;
  }
}