:root {
  /* 2026-08-11 SAP-blue box system: --app-* base values aligned to the --tbl-* system
     (blue primary, cool-gray borders, sharp corners) so cards/panels/modals/nav all
     read as one product. Old values kept in comments for rollback. */
  --app-bg: #f0f2f5;              /* was #f7f8fa */
  --app-surface: #ffffff;
  --app-surface-muted: #f0f2f5;   /* was #f3f4f6 */
  --app-border: #bcc3cd;          /* was #d9dde3 */
  --app-border-strong: #8f9aa8;   /* was #b8c0cc */
  --app-text: #1a2026;            /* was #1f2937 */
  --app-text-muted: #6b7a8a;      /* was #6b7280 */
  --app-primary: #005c9e;         /* was #714b67 (aubergine) */
  --app-primary-hover: #004b82;   /* was #5d3d55 */
  --app-danger: #b42318;
  --app-success: #067647;
  --app-warning: #b54708;
  --app-info: #175cd3;
  --app-radius-sm: 2px;           /* was 4px */
  --app-radius-md: 4px;           /* was 8px */
  --app-radius-lg: 4px;           /* was 12px */
  --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --app-shadow-md: 0 8px 24px rgba(16, 24, 40, .12);
  --ui-scale: 1;
  --ui-font-size: 14px;
  --ui-small-font-size: 12px;
  --ui-line-height: 1.45;
  --ui-space-2xs: 4px;
  --ui-space-xs: 6px;
  --ui-space-sm: 8px;
  --ui-space-md: 12px;
  --ui-space-lg: 16px;
  --ui-space-xl: 20px;
  --ui-control-height: 34px;
  --ui-control-height-sm: 28px;
  --ui-control-padding-x: 12px;
  --ui-card-padding: 16px;
  --ui-card-gap: 12px;
  --ui-table-font-size: 12px;
  --ui-table-row-height: 34px;
  --ui-table-cell-padding-y: 7px;
  --ui-table-cell-padding-x: 10px;
  --ui-header-height: 52px;
  --ui-toolbar-height: 42px;
  /* 2026-08-21: was 8px. The 2026-08-11 box system moved to sharp corners
     (--app-radius-md went 8px -> 4px, --tbl-radius is 4px) but --ui-radius was not
     updated -- and core/ui-scale.css is the LAST stylesheet head.php loads, so its
     border-radius: var(--ui-radius) won on every .app-input, .app-select,
     .app-textarea, .btn and dropdown in the app. That is why controls carried 8px
     corners while everything built on the box system carried 2-4px. */
  --ui-radius: 4px;
  --ui-icon-size: 16px;
  --app-header-height: var(--ui-header-height);
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-drawer: 1200;
  --z-action-menu: 1500;
  --z-modal: 1300;
  --z-toast: 1400;
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-ui-scale="90"] {
  --ui-scale: .9;
  --ui-font-size: 13px;
  --ui-small-font-size: 11.5px;
  --ui-line-height: 1.38;
  --ui-space-2xs: 3px;
  --ui-space-xs: 5px;
  --ui-space-sm: 7px;
  --ui-space-md: 10px;
  --ui-space-lg: 14px;
  --ui-space-xl: 18px;
  --ui-control-height: 31px;
  --ui-control-height-sm: 26px;
  --ui-control-padding-x: 10px;
  --ui-card-padding: 14px;
  --ui-card-gap: 10px;
  --ui-table-font-size: 11.5px;
  --ui-table-row-height: 31px;
  --ui-table-cell-padding-y: 6px;
  --ui-table-cell-padding-x: 9px;
  --ui-header-height: 48px;
  --ui-toolbar-height: 38px;
  --ui-radius: 4px;
  --ui-icon-size: 15px;
}

html[data-ui-scale="80"] {
  --ui-scale: .8;
  --ui-font-size: 12px;
  --ui-small-font-size: 11px;
  --ui-line-height: 1.32;
  --ui-space-2xs: 3px;
  --ui-space-xs: 4px;
  --ui-space-sm: 6px;
  --ui-space-md: 8px;
  --ui-space-lg: 12px;
  --ui-space-xl: 16px;
  --ui-control-height: 28px;
  --ui-control-height-sm: 24px;
  --ui-control-padding-x: 9px;
  --ui-card-padding: 12px;
  --ui-card-gap: 8px;
  --ui-table-font-size: 11px;
  --ui-table-row-height: 28px;
  --ui-table-cell-padding-y: 5px;
  --ui-table-cell-padding-x: 8px;
  --ui-header-height: 44px;
  --ui-toolbar-height: 34px;
  --ui-radius: 3px;
  --ui-icon-size: 14px;
}

/* ============================================================
   Data-table design tokens (--tbl-*) — SAP-blue table system
   Adopted 2026-08-11 (DeepSeek mockup, approved). Single source
   for components/tables.css and module list-shell layers.
   ============================================================ */
:root {
  --tbl-brand: #005c9e;
  --tbl-brand-hover: #004b82;
  --tbl-brand-light: #e5f0fa;
  --tbl-brand-selected: #d4e6f7;

  --tbl-success: #107c41;
  --tbl-success-bg: #e6f2ea;
  --tbl-danger: #b1302a;
  --tbl-danger-bg: #f7e8e7;
  --tbl-warning: #b25900;
  --tbl-warning-bg: #fcf0e0;
  --tbl-info: #1a5c8a;
  --tbl-info-bg: #e3edf5;
  --tbl-muted: #5a6a7a;
  --tbl-muted-bg: #eef1f4;

  /* Header/footer treatment: "solid brand blue" (DeepSeek treatment 2, approved 2026-08-11) */
  --tbl-head-bg: #005c9e;
  --tbl-head-text: #ffffff;
  --tbl-head-rule: #003f6e;
  --tbl-head-sort-bg: #004b82;
  --tbl-foot-bg: #d4e2f0;
  --tbl-foot-text: #002b4f;
  --tbl-foot-rule: #005c9e;
  --tbl-surface: #ffffff;
  --tbl-border: #bcc3cd;
  --tbl-border-strong: #8f9aa8;
  --tbl-row-line: #d8dde4;
  --tbl-group-bg: #e6e9ed;
  --tbl-text: #1a2026;
  --tbl-text-secondary: #3d4a5a;
  --tbl-text-muted: #6b7a8a;

  --tbl-radius: 4px;
  --tbl-radius-sm: 2px;
  --tbl-control-bg: #f0f2f5;   /* toolbar buttons/inputs (SAP flat controls) */

  /* Legacy token family (--color-* / --radius-* / --shadow-xs) was referenced by
     components (cards, panels, kpi-card, metric-panel, forms, tables overrides)
     but NEVER defined — every file silently used its literal fallbacks. Defining
     them here, pointed at the box system, unifies all those components at once. */
  --color-surface: var(--tbl-surface);
  --color-surface-muted: var(--tbl-control-bg);
  --color-border: var(--tbl-border);
  --color-border-subtle: #dfe3e9;
  --color-table-head: var(--tbl-head-bg);
  --color-text: var(--tbl-text);
  --color-muted: var(--tbl-text-muted);
  --radius-sm: var(--tbl-radius-sm);
  --radius-md: var(--tbl-radius);
  --radius-lg: var(--tbl-radius);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, .05);

  /* 2026-08-21: the same audit again, for the seven the first pass missed. Counted
     across assets/css: --color-text-muted is referenced 118 times, --color-primary
     38, --color-danger 20, --color-success 8. All were undefined, so every one of
     those call sites was running on its literal fallback -- and the fallbacks are
     pre-SAP: components/forms.css focuses on #6f4268, the old aubergine, which is
     why every .app-input in the app still had a purple focus ring after the blue
     adoption. Others fall back to #2563eb or #667085, neither of which is in any
     palette here. */
  --color-primary: var(--tbl-brand);
  --color-primary-strong: var(--tbl-brand-hover);
  --color-danger: var(--tbl-danger);
  --color-success: var(--tbl-success);
  --color-text-muted: var(--tbl-text-muted);
  --color-link: var(--tbl-brand);
  --shadow-xl: var(--app-shadow-md);

  /* App header skin: "solid brand blue" (DeepSeek header direction 2, approved 2026-08-11) */
  --hdr-bg: #005c9e;
  --hdr-text: #ffffff;
  --hdr-text-secondary: #d0e4f5;
  --hdr-border: #003f6e;
  --hdr-hover: rgba(255, 255, 255, .12);
  --hdr-active: rgba(255, 255, 255, .18);
}