/* ============================================================
   FELIX DESIGN SYSTEM — CSS Custom Properties
   /web/src/main/resources/static/css/design-system.css
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BRAND COLORS (Pantone source values)
     ---------------------------------------------------------- */
  --color-pantone-301:  #0057A8;  /* Pantone 301 C  — navy blue  */
  --color-pantone-7474: #006D6F;  /* Pantone 7474 C — deep teal  */
  --color-pantone-3405: #00A651;  /* Pantone 3405 C — vivid green*/

  /* ----------------------------------------------------------
     PRIMITIVE PALETTE — BLUE
     ---------------------------------------------------------- */
  --blue-950: #001E3C;
  --blue-900: #002D5C;
  --blue-800: #003D7A;
  --blue-700: #004D99;
  --blue-600: #0057A8;
  --blue-500: #1A6FBA;
  --blue-400: #3D87CC;
  --blue-300: #7AB0DE;
  --blue-200: #B0CDE9;
  --blue-100: #D9E8F5;
  --blue-050: #EEF4FB;

  /* ----------------------------------------------------------
     PRIMITIVE PALETTE — TEAL
     ---------------------------------------------------------- */
  --teal-900: #002929;
  --teal-800: #004040;
  --teal-700: #005557;
  --teal-600: #006D6F;
  --teal-500: #008284;
  --teal-400: #2D9B9D;
  --teal-300: #6BBCBD;
  --teal-200: #A8D8D9;
  --teal-100: #D4ECEC;
  --teal-050: #EBF6F6;

  /* ----------------------------------------------------------
     PRIMITIVE PALETTE — GREEN
     ---------------------------------------------------------- */
  --green-900: #003318;
  --green-800: #005225;
  --green-700: #007A38;
  --green-600: #008F47;
  --green-500: #00A651;
  --green-400: #1DBD6A;
  --green-300: #5DD494;
  --green-200: #9DE8BF;
  --green-100: #CDF3DF;
  --green-050: #E8FAF1;

  /* ----------------------------------------------------------
     PRIMITIVE PALETTE — AMBER
     ---------------------------------------------------------- */
  --amber-700: #B45309;
  --amber-050: #FEF3C7;

  /* ----------------------------------------------------------
     PRIMITIVE PALETTE — NEUTRAL
     ---------------------------------------------------------- */
  --neutral-950: #111111;
  --neutral-900: #1A1A1A;
  --neutral-800: #2D2D2D;
  --neutral-700: #404040;
  --neutral-600: #595959;
  --neutral-500: #737373;
  --neutral-400: #9C9C9C;
  --neutral-300: #C4C4C4;
  --neutral-200: #E0E0E0;
  --neutral-100: #F0F0F0;
  --neutral-050: #F5F5F4;
  --neutral-000: #FFFFFF;

  /* ----------------------------------------------------------
     SEMANTIC — BRAND / ACTION
     ---------------------------------------------------------- */
  --color-brand-primary:        var(--blue-600);
  --color-brand-primary-hover:  var(--blue-700);
  --color-brand-primary-active: var(--blue-800);
  --color-brand-primary-subtle: var(--blue-100);
  --color-brand-teal:           var(--teal-600);
  --color-brand-teal-hover:     var(--teal-700);
  --color-brand-teal-subtle:    var(--teal-100);
  --color-brand-green:          var(--green-500);
  --color-brand-green-hover:    var(--green-600);
  --color-brand-green-subtle:   var(--green-100);

  /* ----------------------------------------------------------
     SEMANTIC — SURFACE & BACKGROUND
     ---------------------------------------------------------- */
  --color-bg-page:           var(--neutral-050);  /* #F5F5F4 */
  --color-bg-surface:        var(--neutral-000);  /* #FFFFFF */
  --color-bg-surface-raised: var(--neutral-000);
  --color-bg-surface-sunken: var(--neutral-100);  /* #F0F0F0 */
  --color-bg-app:            var(--neutral-050);  /* login/auth page backgrounds */
  --color-bg-overlay:        rgba(17, 17, 17, 0.45);
  --color-bg-nav:            transparent;
  --color-bg-nav-scrolled:   var(--neutral-000);

  /* Surface utility aliases */
  --color-surface-hover:    var(--color-bg-surface-sunken);  /* item hover bg */
  --color-surface-tertiary: var(--neutral-100);              /* infobox tinted bg */

  /* ----------------------------------------------------------
     SEMANTIC — TEXT
     ---------------------------------------------------------- */
  --color-text-primary:   var(--neutral-900);  /* #1A1A1A */
  --color-text-secondary: var(--neutral-700);  /* #404040 */
  --color-text-muted:     var(--neutral-600);  /* #595959 */
  --color-text-tertiary:  var(--neutral-500);  /* #737373 — dimmer than muted */
  --color-text-disabled:  var(--neutral-400);  /* #9C9C9C */
  --color-text-inverse:   var(--neutral-000);
  --color-text-link:      var(--blue-600);
  --color-text-link-hover:var(--blue-700);

  /* ----------------------------------------------------------
     SEMANTIC — BORDER
     ---------------------------------------------------------- */
  --color-border-default:  var(--neutral-200); /* #E0E0E0 */
  --color-border-strong:   var(--neutral-300); /* #C4C4C4 */
  --color-border-subtle:   var(--neutral-100); /* #F0F0F0 */
  --color-border-brand:    var(--blue-600);
  --color-border-nav:      var(--neutral-200);

  /* ----------------------------------------------------------
     SEMANTIC — STATUS
     ---------------------------------------------------------- */
  --color-success-default: var(--green-500);
  --color-success-hover:   var(--green-600);
  --color-success-subtle:  var(--green-100);
  --color-success-text:    var(--green-800);

  --color-warning-default: #D97706;
  --color-warning-hover:   #B45309;
  --color-warning-subtle:  #FEF3C7;
  --color-warning-text:    #92400E;

  --color-error-default:   #DC2626;
  --color-error-hover:     #B91C1C;
  --color-error-subtle:    #FEE2E2;
  --color-error-text:      #991B1B;
  --color-error-bg:        var(--color-error-subtle);  /* danger hover background */

  --color-info-default:    var(--teal-600);
  --color-info-hover:      var(--teal-700);
  --color-info-subtle:     var(--teal-100);
  --color-info-text:       var(--teal-800);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-sans:   'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-serif:  'Source Serif 4', Georgia, serif;   /* amounts & financial figures */
  --font-mono:   'Source Code Pro', monospace;        /* IDs, RFCs, CLABEs, codes */

  --text-xs:          0.6875rem;  /* 11px */
  --text-sm:          0.8125rem;  /* 13px */
  --text-base:        0.9375rem;  /* 15px */
  --text-md:          1rem;       /* 16px */
  --text-lg:          1.125rem;   /* 18px */
  --text-xl:          1.25rem;    /* 20px */
  --text-2xl:         1.5rem;     /* 24px */
  --text-3xl:         1.875rem;   /* 30px */
  --text-4xl:         2.25rem;    /* 36px */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --leading-tight:    1.25;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;

  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-1-5: 6px;
  --space-2:  8px;
  --space-2-5: 10px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-nav:  0 1px 0 var(--color-border-nav);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --nav-height:        64px;
  --sidebar-width:     240px;
  --sidebar-collapsed: 64px;
  --content-max-width: 1440px;
  --content-padding:   var(--space-8);  /* 32px horizontal page padding */

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast:   100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
}

/* ============================================================
   BASE RESETS & GLOBAL STYLES
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
}

/* Monospace utility */
.font-mono { font-family: var(--font-mono); }

/* ============================================================
   TOP NAVIGATION
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-bg-nav);
  display: flex;
  align-items: center;
  padding: 0 var(--content-padding);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.nav.nav-scrolled {
  background: var(--color-bg-nav-scrolled);
  box-shadow: var(--shadow-nav);
}

.nav__logo {
  flex-shrink: 0;
  height: 32px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav__logo img, .nav__logo svg {
  height: 32px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: var(--space-10);
  flex: 1;
  list-style: none;
}

.nav__link {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-text-primary);
}

.nav__link.active {
  color: var(--color-brand-primary);
  border-bottom-color: var(--color-brand-primary);
}

.nav__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav__user:hover {
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-primary);
}

.nav__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary-subtle);
  color: var(--color-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */

.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--content-padding);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.page-header__content {}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.breadcrumb__separator { color: var(--color-border-strong); }

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--color-text-primary); }

/* ============================================================
   CARD
   ============================================================ */

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
}

.card--flat     { box-shadow: var(--shadow-none); }
.card--raised   { box-shadow: var(--shadow-md); }
.card--interactive {
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.card--interactive:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-strong);
}

.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Stat card */
.stat-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
}

.stat-card__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.stat-card__value {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  font-family: var(--font-serif);
}

.stat-card__delta {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.stat-card__delta--up   { color: var(--color-success-text); }
.stat-card__delta--down { color: var(--color-error-text); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.btn:disabled, .btn[aria-disabled="true"], .btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--md { height: 40px; padding: 0 var(--space-4); font-size: var(--text-base); }
.btn--lg { height: 48px; padding: 0 var(--space-5); font-size: var(--text-base); }

/* Variants */
.btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
}
.btn--primary:hover  { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); }
.btn--primary:active { background: var(--color-brand-primary-active); border-color: var(--color-brand-primary-active); }

.btn--secondary {
  background: var(--color-bg-surface);
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.btn--secondary:hover  { background: var(--color-brand-primary-subtle); }
.btn--secondary:active { background: var(--blue-100); }

.btn--ghost {
  background: transparent;
  color: var(--color-brand-primary);
  border-color: transparent;
}
.btn--ghost:hover  { background: var(--color-brand-primary-subtle); }
.btn--ghost:active { background: var(--blue-100); }

.btn--danger {
  background: var(--color-error-default);
  color: var(--color-text-inverse);
  border-color: var(--color-error-default);
}
.btn--danger:hover  { background: var(--color-error-hover); border-color: var(--color-error-hover); }

.btn--success {
  background: var(--color-brand-green);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-green);
}
.btn--success:hover  { background: var(--color-brand-green-hover); border-color: var(--color-brand-green-hover); }

/* Icon-only button */
.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}
.btn--icon.btn--sm { width: 32px; height: 32px; }
.btn--icon.btn--lg { width: 48px; height: 48px; }

/* ============================================================
   FORMS
   ============================================================ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field + .form-field {
  margin-top: var(--space-6);
}

.form-section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.form-label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-label--required::after {
  content: ' *';
  color: var(--color-error-default);
}

.form-label--clickable { cursor: pointer; }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 40px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  outline: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-border-strong);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-border-brand);
  box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.15);
}

.form-input--error,
.form-select--error,
.form-textarea--error {
  border-color: var(--color-error-default);
}

.form-input--error:focus,
.form-textarea--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.form-textarea {
  height: auto;
  min-height: 80px;
  resize: vertical;
}

.form-helper {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-error {
  font-size: var(--text-sm);
  color: var(--color-error-text);
}

.form-warning {
  font-size: var(--text-sm);
  color: var(--color-warning-text);
}

/* Monospaced inputs for RFCs, CLABEs, IDs */
.form-input--mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* Narrow inputs (e.g. short numeric fields) */
.form-input--narrow { width: 5rem; }

/* Short inputs — integer counts, installment terms (~120px) */
.form-input--short { width: 7.5rem; }

/* Medium inputs — monetary amounts, short text fields (~160px) */
.form-input--medium { width: 10rem; }

/* Read-only display — looks like an input but signals the value is locked */
.form-input--readonly {
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-muted);
  cursor: default;
  user-select: text;
}

/* Highlighted changed value in diff tables */
.text--highlight { color: var(--color-brand-primary); font-weight: var(--font-weight-medium); }

/* Amount inputs */
.form-input--amount {
  font-family: var(--font-mono);
  text-align: right;
}

/* ============================================================
   DATA TABLES
   ============================================================ */

.table-container {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.table-toolbar__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.table-toolbar__actions { margin-left: auto; display: flex; gap: var(--space-2); }

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.filter-bar__search {
  width: 280px;
  height: 36px;
  padding: 0 var(--space-3) 0 36px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-surface-sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 10px center / 16px no-repeat;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-bar__search:focus {
  border-color: var(--color-border-brand);
  box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.15);
}

.filter-bar__actions { margin-left: auto; display: flex; gap: var(--space-2); }

/* Table itself */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-bg-page);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-default);
  user-select: none;
}

.table th.sortable { cursor: pointer; }
.table th.sortable a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  white-space: nowrap;
}
.table th.sortable a:hover { color: var(--color-text-primary); }
.sort-icon { font-size: 0.75em; opacity: 0.35; }
.table th.sortable--asc .sort-icon,
.table th.sortable--desc .sort-icon { opacity: 0.85; }

.table td {
  height: 48px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

/* Compact row density */
.table--compact td { height: 40px; }

/* Editable form rows — taller cells, paired date + flags sub-rows */
.table--form tr.row--data td {
  height: 60px;
  padding: 0 var(--space-3);
  border-bottom: none;
}
.table--form tr.row--flags td {
  height: auto;
  padding: var(--space-1) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.table--form tr.row--flags:last-child td { border-bottom: none; }
.row-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
}
.row-flags label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.table td.cell--mono {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

.table td.cell--amount {
  font-family: var(--font-mono);
  text-align: right;
  font-size: var(--text-sm);
}

.table th.col--amount,
.table td.col--amount { text-align: right; }
.table th.col--center,
.table td.col--center { text-align: center; }

.table tbody tr:hover { background: var(--neutral-050); }

.table tbody tr.selected { background: var(--color-brand-primary-subtle); }

.table tbody tr:last-child td { border-bottom: none; }

/* Empty state */
.table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  gap: var(--space-3);
  padding: var(--space-10);
  color: var(--color-text-muted);
}

.table-empty__icon { width: 48px; height: 48px; opacity: 0.4; }
.table-empty__heading { font-size: var(--text-lg); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.table-empty__description { font-size: var(--text-base); text-align: center; max-width: 360px; }

/* Table footer / pagination */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.table-footer__info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pagination__btn:hover        { background: var(--color-bg-surface-sunken); color: var(--color-text-primary); }
.pagination__btn.active       { background: var(--color-brand-primary); color: var(--color-text-inverse); }
.pagination__btn.active:hover { background: var(--color-brand-primary-hover); }
.pagination__btn:disabled     { opacity: 0.4; cursor: not-allowed; }

.pagination__ellipsis {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pagination__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  height: 36px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pagination__nav:hover     { background: var(--color-bg-surface-sunken); color: var(--color-text-primary); }
.pagination__nav:disabled  { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   STATUS BADGES / CHIPS
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
}

.badge__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* Status variants */
.badge--draft       { background: #F0F0F0; color: #404040; border-color: #C4C4C4; }
.badge--awaiting    { background: #FEF3C7; color: #92400E; border-color: #D97706; }
.badge--active      { background: #E8FAF1; color: #005225; border-color: #00A651; }
.badge--suspended   { background: #FEE2E2; color: #991B1B; border-color: #DC2626; }
.badge--cancelled   { background: #F0F0F0; color: #595959; border-color: #C4C4C4; }
.badge--completed   { background: #EEF4FB; color: #003D7A; border-color: #0057A8; }
.badge--pending     { background: #EBF6F6; color: #004040; border-color: #006D6F; }
.badge--paid        { background: #E8FAF1; color: #005225; border-color: #00A651; }
.badge--overdue     { background: #FEE2E2; color: #991B1B; border-color: #DC2626; }
.badge--waived      { background: #F0F0F0; color: #595959; border-color: #C4C4C4; }
.badge--flag        { background: #EEF4FB; color: #003D7A; border-color: #B3CDED; font-size: 10px; padding: 1px 5px; font-weight: 600; letter-spacing: .03em; }
.badge--flag-warn   { background: #FEF3C7; color: #92400E; border-color: #D97706; font-size: 10px; padding: 1px 5px; font-weight: 600; letter-spacing: .03em; }
.flag-cells         { display: flex; flex-wrap: wrap; gap: 3px; }

/* Size variants */
.badge--lg {
  padding: 6px 12px;
  font-size: var(--text-base);
}

/* ============================================================
   MODAL
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-height: calc(100vh - var(--space-12));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal--sm { max-width: 400px; }
.modal--md { max-width: 560px; }
.modal--lg { max-width: 720px; }
.modal--xl { max-width: 960px; }
.modal--fullscreen {
  max-width: 100%;
  max-height: 100vh;
  border-radius: 0;
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.modal__close:hover { background: var(--color-bg-surface-sunken); color: var(--color-text-primary); }

.modal__body {
  padding: var(--space-6);
  flex: 1;
  overflow-y: auto;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast-region {
  position: fixed;
  top: calc(var(--nav-height) + var(--space-4));
  right: var(--space-6);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 360px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-left: 4px solid;
  pointer-events: all;
}

.toast--success { border-left-color: var(--color-success-default); }
.toast--error   { border-left-color: var(--color-error-default); }
.toast--warning { border-left-color: var(--color-warning-default); }
.toast--info    { border-left-color: var(--color-info-default); }

.toast__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.toast--success .toast__icon { color: var(--color-success-default); }
.toast--error   .toast__icon { color: var(--color-error-default); }
.toast--warning .toast__icon { color: var(--color-warning-default); }
.toast--info    .toast__icon { color: var(--color-info-default); }

.toast__content { flex: 1; }

.toast__message {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.toast__detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.toast__dismiss {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.toast__dismiss:hover { color: var(--color-text-primary); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* --- Layout --- */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { display: flex; flex-wrap: wrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.d-inline      { display: inline; }
.d-contents    { display: contents; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-end   { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* --- Grid --- */
.grid-2        { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3        { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
.grid-auto-md  { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.grid-auto-lg  { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }

.grid-2 .form-field + .form-field,
.grid-3 .form-field + .form-field,
.grid-auto-sm .form-field + .form-field,
.grid-auto-md .form-field + .form-field,
.grid-auto-sp .form-field + .form-field,
.grid-auto-lg .form-field + .form-field,
.grid-auto-xl .form-field + .form-field { margin-top: 0; }

/* --- Spacing --- */
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.m-0   { margin: 0; }
.p-0   { padding: 0; }
.pl-5  { padding-left: var(--space-5); }

/* --- Sizing --- */
.w-full    { width: 100%; }
.max-w-480 { max-width: 480px; width: 100%; }
.max-w-640 { max-width: 640px; }
.max-w-720 { max-width: 720px; }
.max-w-960 { max-width: 960px; }

/* --- Typography --- */
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.leading-relaxed { line-height: 1.7; }

/* --- Compound components --- */

/* Form action row: right-aligned button group below a form */
.form-actions {
  margin-top: var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Dashed file-drop / upload area */
.drop-zone {
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
  cursor: pointer;
}

/* Danger alert bar */
.alert--error {
  background: var(--color-error-subtle);
  border: 1px solid var(--color-error-default);
  border-left: 4px solid var(--color-error-default);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}

.alert--error p {
  color: var(--color-error-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
}

.alert--error p::before {
  content: "⚠";
  flex-shrink: 0;
  line-height: 1.5;
}

/* Success alert bar */
.alert--success {
  background: var(--color-success-subtle);
  border: 1px solid var(--color-success-default);
  border-left: 4px solid var(--color-success-default);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}

.alert--success p {
  color: var(--color-success-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
}

.alert--success p::before {
  content: "✓";
  flex-shrink: 0;
  line-height: 1.5;
}

/* Misc */
.position-relative    { position: relative; }
.text-decoration-none { text-decoration: none; }
.min-h-400 { min-height: 400px; }

/* --- Additional grid sizes --- */
.grid-auto-sm  { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.grid-auto-sp  { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.grid-auto-xl  { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }

/* --- Filter select widths (table toolbar) --- */
.form-select--xs { width: 120px; height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.form-select--sm { width: 140px; height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.form-select--md { width: 160px; height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.form-select--lg { width: 180px; height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.form-select--xl { width: 200px; height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }

/* --- Status delta colours (margin history) --- */
.text-delta-positive { color: var(--color-status-success, #16a34a); }
.text-delta-negative { color: var(--color-status-danger, #dc2626); }

/* --- Session / auth page layout --- */
.session-layout {
  background: linear-gradient(135deg, var(--color-pantone-301), var(--color-pantone-7474));
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.session-card { padding: var(--space-8); }

.session-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

/* --- Inline alert box (error / warning) --- */
.alert-box {
  background: var(--color-error-subtle);
  border: 1px solid var(--color-error-default);
  border-left: 4px solid var(--color-error-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.alert-box__message {
  color: var(--color-error-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
}

.alert-box__message::before {
  content: "⚠";
  flex-shrink: 0;
  line-height: 1.5;
}

/* --- Loading / empty state padding area --- */
.section-loader { padding: var(--space-8); }

/* --- HTMX dialog panel (rendered inside <dialog> host) --- */
.dialog-panel {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  max-width: 420px;
  width: 100%;
  margin: auto;
}

.dialog-panel__title {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.dialog-panel__body {
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}

/* --- Selectable group / company card rows --- */
.btn-select {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.group-card {
  padding: var(--space-4);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.group-card--selected {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary-subtle);
}

.group-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-brand-primary-subtle);
  color: var(--color-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

/* --- Summary infobox (tinted background panel) --- */
.infobox {
  padding: var(--space-4);
  background: var(--color-surface-tertiary);
  border-radius: var(--radius-md);
}

/* --- Placeholder area (chart / content not yet loaded) --- */
.placeholder-area {
  height: 400px;
  background: var(--color-bg-surface-sunken);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   ROW ACTIONS
   Inline action buttons + overflow ⋯ menu for table rows.
   Usage:
     <td class="table__actions">
       <div class="row-actions">
         <a class="btn btn--sm btn--ghost">View</a>
         <details class="row-actions__overflow">
           <summary class="btn btn--sm btn--icon btn--ghost">⋯</summary>
           <div class="row-actions__dropdown">
             <a class="row-actions__item">Edit</a>
             <button class="row-actions__item row-actions__item--danger">Delete</button>
           </div>
         </details>
       </div>
     </td>
   ============================================================ */

.table__actions { width: 1%; white-space: nowrap; text-align: right; }

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.row-actions__overflow { position: relative; list-style: none; }

/* Remove default <details> marker */
.row-actions__overflow > summary { list-style: none; }
.row-actions__overflow > summary::-webkit-details-marker { display: none; }

.row-actions__dropdown {
  /* position/top/right/z-index are set by JS to 'fixed' so the menu escapes overflow:hidden containers */
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 500;
  min-width: 160px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
  display: flex;
  flex-direction: column;
}

.row-actions__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.row-actions__item:hover { background: var(--color-surface-hover, var(--color-bg-surface-sunken)); }

.row-actions__item--danger { color: var(--color-error-text); }
.row-actions__item--danger:hover { background: var(--color-error-bg); }

.row-actions__separator { height: 1px; background: var(--color-border-subtle, var(--color-border)); margin: var(--space-1) 0; }

.row-actions__dropdown form { margin: 0; padding: 0; }
.row-actions__dropdown form button.row-actions__item { width: 100%; text-align: left; background: none; border: none; cursor: pointer; }

/* --- Status transition arrow in history tables --- */
.status-arrow { margin: 0 var(--space-2); color: var(--color-text-muted); }

/* --- Error page icon colour variants --- */
.error-page__icon--error    { color: var(--color-error-default); }
.error-page__icon--disabled { color: var(--color-text-disabled); }

/* --- Responsive grid breakdowns --- */
@media (max-width: 640px) {
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
  .grid-auto-sm,
  .grid-auto-md,
  .grid-auto-sp,
  .grid-auto-lg,
  .grid-auto-xl { grid-template-columns: 1fr; }
}

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-brand     { color: var(--color-brand-primary); }
.text-success   { color: var(--color-success-text); }
.text-error     { color: var(--color-error-text); }
.text-warning   { color: var(--color-warning-text); }

.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-6) 0;
}

/* ============================================================
   HTMX LOADING STATES
   ============================================================ */

/* While an HTMX request is in-flight, the triggering element gets htmx-request */
.htmx-request .btn--primary,
.btn--primary.htmx-request {
  position: relative;
  color: transparent;
}

.htmx-request .btn--primary::after,
.btn--primary.htmx-request::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #FFFFFF;
  border-radius: var(--radius-full);
  animation: spin 600ms linear infinite;
}

/* Table row fade during HTMX partial refresh */
.htmx-swapping { opacity: 0; transition: opacity 200ms ease; }
.htmx-settling  { opacity: 0; }
.htmx-settling  { opacity: 1; transition: opacity 300ms ease; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Command Palette ─────────────────────────────────────────────────────── */

.command-palette {
  position: fixed;
  inset: 0;
  margin: auto;
  top: 15vh;
  width: min(640px, calc(100vw - var(--space-8)));
  max-height: 70vh;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 0;
  overflow: hidden;
}

.command-palette[open] {
  display: flex;
  flex-direction: column;
}

.command-palette::backdrop {
  background: var(--color-bg-overlay);
  backdrop-filter: blur(2px);
}

.command-palette__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.command-palette__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.command-palette__search-icon {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.command-palette__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  font-family: inherit;
}

.command-palette__input::placeholder {
  color: var(--color-text-tertiary);
}

.command-palette__input::-webkit-search-cancel-button {
  display: none;
}

.command-palette__esc {
  font-size: var(--text-xs);
  padding: 2px var(--space-1-5);
  background: var(--color-bg-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.command-palette__results {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-2) 0;
}

.command-palette__hint,
.command-palette__empty {
  padding: var(--space-4) var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  margin: 0;
  text-align: center;
}

.command-palette__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.command-palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-4);
  cursor: pointer;
  text-decoration: none;
  transition: background 100ms ease;
}

.command-palette__item:hover,
.command-palette__item.is-active {
  background: var(--color-bg-surface-sunken);
}

.command-palette__item:hover .command-palette__item-arrow,
.command-palette__item.is-active .command-palette__item-arrow {
  opacity: 1;
}

.command-palette__type-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px var(--space-1-5);
  border-radius: var(--radius-sm);
  background: var(--neutral-100);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.command-palette__type-badge--company   { background: var(--color-brand-primary-subtle); color: var(--color-brand-primary); }
.command-palette__type-badge--division  { background: var(--blue-050); color: var(--blue-700); }
.command-palette__type-badge--sp        { background: var(--teal-050); color: var(--teal-700); }
.command-palette__type-badge--user      { background: var(--green-050); color: var(--green-700); }
.command-palette__type-badge--action    { background: var(--amber-050); color: var(--amber-700); }

.command-palette__item-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette__item-sublabel {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.command-palette__item-arrow {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 100ms ease;
}

/* Nav search button */
.nav-kbd {
  font-size: var(--text-xs);
  padding: 1px var(--space-1-5);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
}

/* Permissions grid (group create/edit) */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: var(--space-1) var(--space-1);
}

.checkbox-label:hover {
  color: var(--color-text-primary);
}

.checkbox-label--disabled {
  opacity: 0.4;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brand-primary);
  cursor: pointer;
}

.permissions-category-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brand-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
}

/* ============================================================
   ALERT — base class + additional variants
   ============================================================ */

.alert {
  border-left: 4px solid;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}

.alert p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
}

.alert--danger {
  background: var(--color-error-subtle);
  border-color: var(--color-error-default);
  border-left-color: var(--color-error-default);
}

.alert--danger p { color: var(--color-error-text); }
.alert--danger p::before { content: "⚠"; flex-shrink: 0; line-height: 1.5; }

.alert--warning {
  background: var(--color-warning-subtle);
  border-color: var(--color-warning-default);
  border-left-color: var(--color-warning-default);
}

.alert--warning p { color: var(--color-warning-text); }
.alert--warning p::before { content: "⚠"; flex-shrink: 0; line-height: 1.5; }

.alert--info {
  background: var(--color-info-subtle);
  border-color: var(--color-info-default);
  border-left-color: var(--color-info-default);
}

.alert--info p { color: var(--color-info-text); }
.alert--info p::before { content: "ℹ"; flex-shrink: 0; line-height: 1.5; }

/* ============================================================
   PAGE HEADER ACTIONS — right-side button cluster
   ============================================================ */

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ============================================================
   FORM SECTION — titled form subsection divider
   ============================================================ */

.form-section {
  margin-top: var(--space-8);
}

.form-section__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.form-section__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
}

/* ============================================================
   FORM UTILITIES
   ============================================================ */

/* Compact input height (short numeric / filter inputs) */
.form-input--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

/* Below-field helper hint text */
.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Grow a form-field to fill available flex space */
.form-field--grow { flex: 1; }

/* Narrow a form-field to a fixed min-width */
.form-field--narrow { flex: 0 0 auto; min-width: 140px; }

/* Radio group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  cursor: pointer;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

/* Serif font (amounts, financial figures) */
.font-serif { font-family: var(--font-serif); }

/* Compound type utilities (size + weight) */
.text-sm-medium { font-size: var(--text-sm); font-weight: var(--font-weight-medium); }

/* Danger text (alias for .text-error) */
.text-danger { color: var(--color-error-text); }

/* ============================================================
   SPACING UTILITIES
   ============================================================ */

.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }

/* ============================================================
   BADGE — additional variants
   ============================================================ */

.badge--neutral  { background: #F0F0F0; color: #595959; border-color: #C4C4C4; }
.badge--inactive { background: #F0F0F0; color: #595959; border-color: #C4C4C4; }
.badge--info     { background: #EBF6F6; color: #004040; border-color: #006D6F; }

/* ============================================================
   CARD — section and footer variants
   ============================================================ */

.card__section {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.card__section--bordered {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* ============================================================
   TABLE UTILITIES
   ============================================================ */

/* Horizontal scroll wrapper for wide tables */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Empty state (alternate casing alias) */
.table__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  gap: var(--space-3);
  padding: var(--space-10);
  color: var(--color-text-muted);
}

/* ============================================================
   DROPDOWN ITEMS — overflow menu items (not row-actions context)
   ============================================================ */

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.dropdown-item:hover { background: var(--color-surface-hover); }

.dropdown-item--danger { color: var(--color-error-text); }
.dropdown-item--danger:hover { background: var(--color-error-bg); }

/* ============================================================
   BANNERS — full-width top-of-page status banners
   ============================================================ */

.banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--content-padding);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.banner__icon { flex-shrink: 0; }

.banner--support {
  background: var(--color-warning-subtle);
  color: var(--color-warning-text);
  border-bottom: 1px solid var(--color-warning-default);
}

.banner--escalation {
  background: var(--color-error-subtle);
  color: var(--color-error-text);
  border-bottom: 1px solid var(--color-error-default);
}

/* ============================================================
   TIMELINE — entity audit log display
   ============================================================ */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline__item {
  display: flex;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-6);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  margin-top: 5px;
  position: relative;
  z-index: 1;
}

.timeline__item:not(:last-child) .timeline__dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--color-border-default);
  height: calc(100% + var(--space-6) - 10px);
}

.timeline__content { flex: 1; min-width: 0; }

.timeline__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.timeline__actor {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

.timeline__notes {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ============================================================
   WIZARD STEPS — multi-step form progress indicator
   ============================================================ */

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-8);
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
  position: relative;
}

.wizard-step::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--color-border-default);
  margin: 0 var(--space-3);
}

.wizard-step:last-child::after { display: none; }

.wizard-step--done {
  color: var(--color-brand-primary);
}

.wizard-step--done::after { background: var(--color-brand-primary); }

/* ============================================================
   CONFIRM CARD — step-N review panel
   ============================================================ */

.confirm-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.confirm-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.confirm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.confirm-item {}

.confirm-item__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.confirm-item__value {
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.confirm-item__value--highlight {
  font-size: var(--text-base);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   Utility
   ============================================================ */

/* Hide an element without JS; toggleMarginDivisionField() removes/adds this class */
.hidden { display: none !important; }