/* ============================================================================
   BISONA ERP — DESIGN SYSTEM
   Brand palette: #7296A4 / #9EBECB / #CDDEE5 / #E6F0F2 / #EFEFEF
   Do NOT modify existing JS or HTML. This file adds the system on top.
   ============================================================================ */

/* ============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================ */
:root {

  /* --- Brand / Primary --- */
  --color-primary-700:    #4d7282;   /* deep pressed */
  --color-primary-600:    #7296A4;   /* primary base */
  --color-primary-400:    #9EBECB;   /* medium */
  --color-primary-200:    #CDDEE5;   /* soft */
  --color-primary-100:    #E6F0F2;   /* pale tint */
  --color-primary-50:     #f4f9fb;   /* near-white */

  /* --- Neutral --- */
  --color-neutral-900:    #0f172a;
  --color-neutral-800:    #1e293b;
  --color-neutral-700:    #334155;
  --color-neutral-600:    #475569;
  --color-neutral-500:    #64748b;
  --color-neutral-400:    #94a3b8;
  --color-neutral-300:    #cbd5e1;
  --color-neutral-200:    #e2e8f0;
  --color-neutral-100:    #EFEFEF;
  --color-neutral-50:     #f8fafc;
  --color-white:          #ffffff;

  /* --- Semantic: Success --- */
  --color-success-700:    #166534;
  --color-success-600:    #16a34a;
  --color-success-200:    #bbf7d0;
  --color-success-100:    #dcfce7;
  --color-success-50:     #f0fdf4;
  --color-success-border: #86efac;

  /* --- Semantic: Warning --- */
  --color-warning-700:    #92400e;
  --color-warning-600:    #d97706;
  --color-warning-500:    #f59e0b;
  --color-warning-200:    #fde68a;
  --color-warning-100:    #fef3c7;
  --color-warning-50:     #fffbeb;
  --color-warning-border: #fbbf24;

  /* --- Semantic: Danger --- */
  --color-danger-700:     #991b1b;
  --color-danger-600:     #dc2626;
  --color-danger-200:     #fecaca;
  --color-danger-100:     #fee2e2;
  --color-danger-50:      #fef2f2;
  --color-danger-border:  #fca5a5;

  /* --- Semantic: Info (brand-aligned) --- */
  --color-info-700:       #4d7282;
  --color-info-600:       #7296A4;
  --color-info-200:       #CDDEE5;
  --color-info-100:       #E6F0F2;
  --color-info-50:        #f4f9fb;
  --color-info-border:    #9EBECB;

  /* --- Spacing Scale (4px base) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);

  /* --- Typography --- */
  --font-family:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  20px;
  --font-size-3xl:  24px;
  --font-size-4xl:  28px;

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

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.03em;
  --letter-spacing-wider:   0.05em;

  /* --- Transitions --- */
  --transition-fast:   all 0.1s ease;
  --transition-base:   all 0.15s ease;
  --transition-slow:   all 0.25s ease;

  /* --- Z-index scale --- */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    2000;
  --z-toast:    9999;
}


/* ============================================================================
   2. TYPOGRAPHY UTILITIES
   ============================================================================ */

.ds-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-500);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-tight);
}

.ds-value-lg {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
  line-height: var(--line-height-tight);
  margin-top: var(--space-1);
}

.ds-value-md {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
  line-height: var(--line-height-tight);
}

.ds-section-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-700);
  margin: var(--space-4) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-neutral-200);
}
.ds-section-title:first-child { margin-top: 0; }

.ds-helper {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-500);
  line-height: var(--line-height-normal);
}

.ds-muted {
  color: var(--color-neutral-400);
  font-size: var(--font-size-base);
}

.ds-success-text { color: var(--color-success-600); }
.ds-warning-text { color: var(--color-warning-600); }
.ds-danger-text  { color: var(--color-danger-600);  }
.ds-info-text    { color: var(--color-info-600);    }

.ds-border-blue    { border-bottom: 2px solid #3b82f6; }
.ds-border-warning { border-bottom: 2px solid var(--color-warning-500); }
.ds-border-purple  { border-bottom: 2px solid #8b5cf6; }


/* ============================================================================
   3. CARD SYSTEM
   ============================================================================ */

/* Base card */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

/* Compact card variant */
.card-sm {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

/* Sub-card: nested item row inside a form (tighter, no shadow, neutral bg) */
.card-sub {
  background: var(--color-neutral-50);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  box-shadow: none;
}

/* Card header bar */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}

.card-header h3,
.card-header .card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
  margin: 0;
}

/* Semantic card variants */
.card-info {
  background: var(--color-info-100);
  border-color: var(--color-info-border);
}

.card-info .ds-label { color: var(--color-info-700); }

.card-success {
  background: var(--color-success-50);
  border-color: var(--color-success-border);
}

.card-success .ds-label { color: var(--color-success-700); }

.card-warning {
  background: var(--color-warning-50);
  border-color: var(--color-warning-border);
}

.card-warning .ds-label { color: var(--color-warning-700); }

.card-danger {
  background: var(--color-danger-50);
  border-color: var(--color-danger-border);
}

.card-danger .ds-label { color: var(--color-danger-700); }

.card-neutral {
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-300);
}


/* ============================================================================
   4. ALERT / BANNER SYSTEM
   ============================================================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-width: 1px;
  border-style: solid;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-3);
}

.alert-info {
  background: var(--color-info-100);
  border-color: var(--color-info-border);
  color: var(--color-info-700);
}

.alert-success {
  background: var(--color-success-100);
  border-color: var(--color-success-border);
  color: var(--color-success-700);
}

.alert-warning {
  background: var(--color-warning-100);
  border-color: var(--color-warning-border);
  color: var(--color-warning-700);
  font-weight: var(--font-weight-semibold);
}

.alert-danger {
  background: var(--color-danger-100);
  border-color: var(--color-danger-border);
  color: var(--color-danger-700);
}


/* ============================================================================
   5. GRID SYSTEM
   ============================================================================ */

/* Auto-fit responsive grid — cards auto-wrap */
.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.grid-auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Fixed column grids */
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Gap variants */
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }

/* Flex row */
.ds-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ds-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* ============================================================================
   6. TABLE SYSTEM
   ============================================================================ */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  -webkit-overflow-scrolling: touch;
}

.table-clean {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.table-clean thead {
  background: var(--color-neutral-50);
  position: sticky;
  top: 0;
  z-index: var(--z-base);
}

.table-clean th {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-500);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  border-bottom: 2px solid var(--color-neutral-200);
  white-space: nowrap;
  user-select: none;
}

.table-clean th:hover {
  color: var(--color-primary-600);
  background: var(--color-primary-50);
}

.table-clean td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-100);
  color: var(--color-neutral-700);
  white-space: nowrap;
}

.table-clean tbody tr:hover {
  background: var(--color-primary-50);
}

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

/* Total / summary row */
.table-clean .row-total td {
  border-top: 2px solid var(--color-neutral-700);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
  background: var(--color-neutral-50);
}

/* Indented rows (tracker hierarchy) */
.table-clean .row-indent-1 td:first-child { padding-left: var(--space-8); }
.table-clean .row-indent-2 td:first-child { padding-left: 52px; }

/* Locked rows */
.table-clean .row-locked td {
  color: var(--color-neutral-400);
  background: var(--color-neutral-50);
}

/* Empty state cell */
.table-clean .cell-empty {
  text-align: center;
  color: var(--color-neutral-400);
  padding: var(--space-8);
  font-size: var(--font-size-base);
}

/* Truncated cell */
.cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ============================================================================
   7. FORM SYSTEM
   ============================================================================ */

.form-group {
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-group label,
.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-600);
  display: block;
}

/* Base input — applies to any element given this class */
.input {
  width: 100%;
  padding: 7px var(--space-3);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-neutral-700);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  line-height: var(--line-height-normal);
  outline: none;
  -webkit-appearance: none;
}

.input:focus {
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 3px rgba(114, 150, 164, 0.18);
}

.input:disabled,
.input[readonly] {
  background: var(--color-neutral-100);
  color: var(--color-neutral-400);
  cursor: not-allowed;
}

.input-sm {
  padding: 5px var(--space-2);
  font-size: var(--font-size-sm);
}

.input-inline {
  border: 2px solid var(--color-primary-600);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* Textarea */
.textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 72px;
  transition: var(--transition-base);
  outline: none;
}

.textarea:focus {
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 3px rgba(114, 150, 164, 0.18);
}


/* ============================================================================
   8. BUTTON SYSTEM
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 7px var(--space-4);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-neutral-700);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-base);
  min-height: 34px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-300);
}

.btn:active {
  transform: translateY(1px);
}

/* Primary */
.btn-primary {
  background: var(--color-primary-600);
  color: var(--color-white);
  border-color: var(--color-primary-600);
  font-weight: var(--font-weight-semibold);
}

.btn-primary:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

/* Success */
.btn-success {
  background: var(--color-success-600);
  color: var(--color-white);
  border-color: var(--color-success-600);
}

.btn-success:hover {
  background: var(--color-success-700);
}

/* Danger */
.btn-danger {
  background: var(--color-danger-600);
  color: var(--color-white);
  border-color: var(--color-danger-600);
}

.btn-danger:hover {
  background: var(--color-danger-700);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-neutral-600);
}

.btn-ghost:hover {
  background: var(--color-neutral-100);
  border-color: transparent;
}

/* Icon button (square) */
.btn-icon {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--radius-md);
}

/* Size variants */
.btn-xs {
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  min-height: 22px;
  border-radius: var(--radius-sm);
}

.btn-sm {
  padding: 5px var(--space-3);
  font-size: var(--font-size-sm);
  min-height: 28px;
}

.btn-lg {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-md);
  min-height: 42px;
}

/* Full width */
.btn-block {
  width: 100%;
}


/* ============================================================================
   9. BADGE / STATUS SYSTEM
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
  white-space: nowrap;
  line-height: 1.4;
}

/* Semantic badge colors */
.badge-success  { background: var(--color-success-100);  color: var(--color-success-700); }
.badge-warning  { background: var(--color-warning-100);  color: var(--color-warning-700); }
.badge-danger   { background: var(--color-danger-100);   color: var(--color-danger-700);  }
.badge-info     { background: var(--color-info-100);     color: var(--color-info-700);    }
.badge-neutral  { background: var(--color-neutral-100);  color: var(--color-neutral-600); }
.badge-dark     { background: var(--color-neutral-200);  color: var(--color-neutral-700); }

/* Dot badge (count bubble — for tab pills) */
.badge-dot {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1.4;
  min-width: 18px;
  text-align: center;
}

.badge-dot-danger  { background: var(--color-danger-600);  }
.badge-dot-info    { background: var(--color-primary-600);  }
.badge-dot-warning { background: var(--color-warning-600); }


/* ============================================================================
   10. SECTION / DIVIDER
   ============================================================================ */

.ds-section {
  margin-bottom: var(--space-5);
}

.ds-section + .ds-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-neutral-200);
}

.ds-divider {
  height: 0;
  border: none;
  border-top: 1px solid var(--color-neutral-200);
  margin: var(--space-5) 0;
}


/* ============================================================================
   11. EMPTY STATE
   ============================================================================ */

.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-neutral-400);
  text-align: center;
  font-size: var(--font-size-base);
  gap: var(--space-2);
}

.ds-empty svg,
.ds-empty .ds-empty-icon {
  opacity: 0.35;
  margin-bottom: var(--space-2);
}


/* ============================================================================
   12. LOADING SPINNER
   ============================================================================ */

.ds-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  color: var(--color-neutral-400);
  font-size: var(--font-size-base);
  gap: var(--space-2);
}

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

.ds-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: ds-spin 0.6s linear infinite;
  flex-shrink: 0;
}


/* ============================================================================
   13. DROPDOWN MENU (tracker inline editor)
   ============================================================================ */

.ds-dropdown {
  position: absolute;
  z-index: var(--z-dropdown);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 150px;
  padding: var(--space-1) 0;
  overflow: hidden;
}

.ds-dropdown-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s ease;
}

.ds-dropdown-item:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.ds-dropdown-item.is-selected {
  background: var(--color-primary-100);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-700);
}


/* ============================================================================
   14. SCROLLABLE CONTAINER
   ============================================================================ */

.ds-scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ds-scroll-y::-webkit-scrollbar { width: 4px; }
.ds-scroll-y::-webkit-scrollbar-track { background: transparent; }
.ds-scroll-y::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
}

.ds-max-h-60 { max-height: 240px; }
.ds-max-h-80 { max-height: 320px; }


/* ============================================================================
   15. SPACING UTILITIES
   ============================================================================ */

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }

.mt-1  { margin-top: var(--space-1); }
.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); }

.ml-auto { margin-left: auto; }
.ml-2    { margin-left: var(--space-2); }
.ml-3    { margin-left: var(--space-3); }

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

.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }

.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }

/* Font weight utilities */
.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-bold     { font-weight: var(--font-weight-bold); }
.fw-medium   { font-weight: var(--font-weight-medium); }

/* Text alignment */
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* Table cell utilities */
.td-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Form select sizing */
.select-lg { min-width: 260px; }


/* ============================================================================
   16. WELCOME SCREEN + MODAL VARIANTS
   ============================================================================ */

.welcome-screen  { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.welcome-content { text-align: center; max-width: 480px; }
.welcome-icon    { width: 64px; height: 64px; background: var(--color-primary-50); border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); }

/* Smaller modal for prompts / confirmations */
.modal-sm { max-width: 420px !important; }
.modal-md { max-width: 560px !important; }
.modal-lg { max-width: 800px !important; }

/* Required field asterisk */
.required { color: var(--color-danger-600); }

/* Item card row (order create / edit forms) */
.item-row-card {
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-50);
}
.item-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

/* Readonly / computed input field */
.input-readonly {
  background: var(--color-neutral-100) !important;
  color: var(--color-neutral-500);
  cursor: not-allowed !important;
}

/* Inline field-level validation feedback */
.field-error           { color: var(--color-danger-600); font-size: var(--font-size-xs); margin-top: var(--space-1); min-height: 16px; }
.field-valid           { border: 1px solid var(--color-success-600) !important; }
.field-error-highlight { outline: 2px solid var(--color-danger-600); }

/* Validation error panels */
.val-section-title {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--color-danger-700); margin-bottom: var(--space-1);
}
.val-error-list    { margin: var(--space-1) 0 0 var(--space-4); padding: 0; }
.val-error-list li { margin-bottom: var(--space-1); font-size: var(--font-size-sm); }


/* ============================================================================
   17. DASHBOARD COMPONENTS
   Progress bars, zone bars, focus rows, detail modal, clickable rows
   ============================================================================ */

/* --- Grid: 2fr 1fr for Today's Focus panel --- */
.grid-focus { grid-template-columns: 2fr 1fr; }

/* --- Progress bar (pipeline table) --- */
.progress-row     { display: flex; align-items: center; gap: var(--space-2); }
.progress-track   { flex: 1; background: var(--color-neutral-100); height: 6px; border-radius: var(--radius-full); overflow: hidden; }
.progress-bar     { height: 6px; border-radius: var(--radius-full); }
.progress-success { background: var(--color-success-600); }
.progress-warning { background: var(--color-warning-500); }
.progress-info    { background: var(--color-primary-600); }
.td-progress      { min-width: 130px; }

/* --- Zone bars (zone status panel) --- */
.zone-bar-label   { width: 88px; font-size: var(--font-size-sm); flex-shrink: 0; font-weight: var(--font-weight-medium); color: var(--color-neutral-600); }
.zone-bar-track   { flex: 1; background: var(--color-neutral-100); height: 22px; border-radius: var(--radius-md); overflow: hidden; }
.zone-bar-fill    { height: 22px; border-radius: var(--radius-md); transition: width 0.3s; }
.zone-bar-count   { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); width: 32px; text-align: right; color: var(--color-neutral-900); }
.zone-fill-todo       { background: var(--color-neutral-400); }
.zone-fill-carpentry  { background: var(--color-warning-500); }
.zone-fill-polishing  { background: #f97316; }
.zone-fill-cushioning { background: #6366f1; }
.zone-fill-ready      { background: var(--color-success-600); }

/* --- Clickable table rows --- */
.row-clickable         { cursor: pointer; }
.row-warn              { background: var(--color-warning-50); }
.row-warn:hover        { background: var(--color-warning-100) !important; }
.row-info              { background: var(--color-info-50); }
.row-info:hover        { background: var(--color-info-100) !important; }
.clickable             { cursor: pointer; }
.row-danger            { background: var(--color-danger-50); }
.row-danger:hover      { background: var(--color-danger-100) !important; }

/* --- Today's Focus inner rows --- */
.focus-row             { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-danger-200); cursor: pointer; }
.focus-row:hover       { background: var(--color-danger-50); }
.focus-row:last-child  { border-bottom: none; }
.zone-row              { display: flex; justify-content: space-between; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-neutral-200); }
.zone-row:last-child   { border-bottom: none; }

/* --- Detail modal table --- */
.detail-label { padding: var(--space-1) 0; color: var(--color-neutral-500); width: 120px; vertical-align: top; font-size: var(--font-size-base); }
.detail-value { padding: var(--space-1) 0; font-size: var(--font-size-base); }
.modal-action { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-neutral-200); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Expandable row arrow */
.dash-expand-arrow { display: inline-block; transition: transform 0.2s; margin-right: var(--space-1); }
.dash-expand-arrow.arrow-expanded { transform: rotate(90deg); }

/* Expandable hierarchy rows — generic 3-level system */
.table-clean .row-group td { background: var(--color-neutral-200); font-weight: var(--font-weight-semibold); }
.table-clean .row-group:hover td { background: var(--color-neutral-300) !important; }
.table-clean .row-sub td { background: var(--color-neutral-50); }
.table-clean .row-sub td:first-child { padding-left: var(--space-8); }
.table-clean .row-sub:hover td { background: var(--color-neutral-100) !important; }
.table-clean .row-nested td { background: var(--color-neutral-100); }
.table-clean .row-nested:hover td { background: var(--color-neutral-200) !important; }

/* Hierarchy indentation (applied to <tr>, affects td:first-child) */
.table-clean .row-indent-3 td:first-child { padding-left: 72px; }

/* Tracker: order group header row */
.table-clean .order-group-header td {
  background: var(--color-neutral-100);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.table-clean .order-group-header:hover td { background: var(--color-neutral-200) !important; }

/* Tracker: child item rows under a group */
.table-clean .row-child td { background: var(--color-primary-50); }
.table-clean .row-child:hover td { background: var(--color-primary-100) !important; }

/* Tracker: indent arrow cell */
.tracker-indent-arrow { padding-left: var(--space-7) !important; }

/* Tracker: clickable zone cell */
.zone-edit-cell {
  cursor: pointer;
  padding: 6px 8px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Tracker: small dropdown indicator arrow */
.zone-arrow-icon {
  font-size: 10px;
  margin-left: var(--space-1);
  opacity: 0.5;
}

/* Utility: horizontal margin */
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }

/* CRM tab bar */
.crm-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-neutral-200);
  flex-wrap: wrap;
}
.crm-tab {
  padding: var(--space-2) var(--space-4);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  background: transparent;
  color: var(--color-neutral-600);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-weight: 400;
  transition: color 0.15s, border-color 0.15s;
}
.crm-tab:hover { color: var(--color-primary-600); }
.crm-tab.crm-tab-active {
  background: var(--color-primary-600);
  color: var(--color-white);
  border-bottom-color: var(--color-primary-600);
  font-weight: 600;
}
.crm-tab-count {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: var(--font-size-xs);
  margin-left: var(--space-1);
  background: rgba(0,0,0,0.12);
}
.crm-tab-active .crm-tab-count { background: rgba(255,255,255,0.3); }

/* Modal scroll container */
.modal-scroll { max-height: 70vh; overflow-y: auto; }

/* Quick Actions modal layout */
.crm-qa-body    { display: flex; flex-direction: column; gap: var(--space-4); }
.crm-qa-btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Priority selector buttons */
.crm-priority-btn {
  flex: 1; padding: var(--space-3);
  border: 2px solid var(--color-neutral-200); background: var(--color-white);
  cursor: pointer; border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold);
  transition: border-color 0.15s, background 0.15s;
}
.crm-priority-btn.hot          { color: var(--color-danger-600); }
.crm-priority-btn.hot.active   { border-color: var(--color-danger-600); background: var(--color-danger-50); }
.crm-priority-btn.warm         { color: var(--color-warning-600); }
.crm-priority-btn.warm.active  { border-color: var(--color-warning-600); background: var(--color-warning-50); }
.crm-priority-btn.cold         { color: var(--color-primary-600); }
.crm-priority-btn.cold.active  { border-color: var(--color-primary-400); background: var(--color-primary-50); }

/* Lead item table cells & inputs */
.li-td                { padding: var(--space-1); vertical-align: middle; }
input.li-code         { width: 50px; }
input.li-qty          { width: 60px; }
input.li-price        { width: 90px; }
input.li-discount     { width: 80px; }
input.li-name,
input.li-notes,
select.li-category    { width: 100%; }

/* Row remove button (item rows) */
.btn-remove {
  background: none; border: none; cursor: pointer;
  color: var(--color-danger-600); font-size: var(--font-size-lg);
  padding: var(--space-1); line-height: 1;
}
.btn-remove:hover { color: var(--color-danger-700); }

/* ============================================================================
   LEAD DETAIL PANEL
   ============================================================================ */

.lead-panel-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 999;
  opacity: 0; transition: opacity 0.25s ease;
  pointer-events: none; /* never block clicks while invisible */
}
.lead-panel-backdrop.show { opacity: 1; pointer-events: auto; }

.lead-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 80%; max-width: 720px;
  background: var(--color-white); z-index: 1000;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none; /* never intercept clicks while off-screen */
}
.lead-panel.show { transform: translateX(0); pointer-events: auto; }

/* When a modal is open: lock body scroll, disable interaction with panel behind */
body.modal-open {
  overflow: hidden;
}
body.modal-open .lead-panel,
body.modal-open .lead-panel-backdrop {
  pointer-events: none;
}

.lead-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
}
.lead-panel-header h3      { margin: 0 0 var(--space-1); font-size: var(--font-size-lg); color: var(--color-neutral-800); }
.lead-panel-header .lp-phone  { font-size: var(--font-size-sm); color: var(--color-neutral-500); }
.lead-panel-header .lp-badges { display: flex; gap: var(--space-1); margin-top: var(--space-1); }
.lead-panel-close {
  background: none; border: none; font-size: 24px; cursor: pointer;
  color: var(--color-neutral-400); padding: 0 var(--space-1); line-height: 1;
}
.lead-panel-close:hover { color: var(--color-neutral-700); }

.lead-panel-body { flex: 1; overflow-y: auto; padding: 0; }

.lp-section       { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-100); }
.lp-section-title {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--color-neutral-400); margin: 0 0 var(--space-2);
}

.lp-pipeline {
  display: flex; padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-neutral-100);
  background: var(--color-neutral-50);
}
.lp-pipeline-stage {
  flex: 1; text-align: center; padding: var(--space-2) var(--space-1);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-400); background: var(--color-neutral-100);
  border-right: 2px solid var(--color-white); position: relative; transition: all 0.2s;
}
.lp-pipeline-stage:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.lp-pipeline-stage:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right: none; }
.lp-pipeline-stage.active      { background: var(--color-primary-600); color: var(--color-white); }
.lp-pipeline-stage.done        { background: var(--color-success-100); color: var(--color-success-700); }
.lp-pipeline-stage.lost-stage  { background: var(--color-danger-100);  color: var(--color-danger-700); }

.lp-actions     { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lp-action-btn  {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-200); background: var(--color-white);
  cursor: pointer; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  display: flex; align-items: center; gap: var(--space-1); transition: all 0.15s;
}
.lp-action-btn:hover   { background: var(--color-neutral-100); border-color: var(--color-neutral-300); }
.lp-action-btn.primary { background: var(--color-primary-100);  border-color: var(--color-primary-400);      color: var(--color-primary-700); }
.lp-action-btn.success { background: var(--color-success-100); border-color: var(--color-success-border);  color: var(--color-success-700); }
.lp-action-btn.danger  { background: var(--color-danger-50);   border-color: var(--color-danger-200);       color: var(--color-danger-700); }
.lp-action-btn.warn    { background: var(--color-warning-50);  border-color: var(--color-warning-200);      color: var(--color-warning-700); }

.lp-items-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.lp-items-table th {
  text-align: left; padding: var(--space-1) var(--space-2);
  background: var(--color-neutral-100); border-bottom: 2px solid var(--color-neutral-200);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-500); text-transform: uppercase;
}
.lp-items-table td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-neutral-100); }
.lp-items-table tfoot td { font-weight: var(--font-weight-bold); border-top: 2px solid var(--color-neutral-300); }

.lp-detail-row   { display: flex; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--font-size-sm); }
.lp-detail-label { color: var(--color-neutral-500); }
.lp-detail-value { color: var(--color-neutral-800); font-weight: var(--font-weight-medium); text-align: right; max-width: 60%; }

.lp-timeline-item         { display: flex; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--font-size-xs); color: var(--color-neutral-600); }
.lp-timeline-dot          { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-300); margin-top: 4px; flex-shrink: 0; }
.lp-timeline-dot.dot-success { background: var(--color-success-600); }
.lp-timeline-dot.dot-info    { background: var(--color-primary-600); }
.lp-timeline-item .lp-tl-date { color: var(--color-neutral-400); }
.lp-overdue { color: var(--color-danger-600); font-weight: var(--font-weight-semibold); }

/* Panel tab navigation */
.lp-tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 0 var(--space-3);
  overflow-x: auto;
  background: var(--color-white);
  flex-shrink: 0;
}
.lp-tab-btn {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  color: var(--color-neutral-500);
  transition: color 0.15s, border-color 0.15s;
}
.lp-tab-btn:hover { color: var(--color-neutral-700); }
.lp-tab-btn.active {
  border-bottom-color: var(--color-primary-600);
  color: var(--color-primary-700);
  font-weight: var(--font-weight-semibold);
}

/* ── Order Management panel: chart layout ──────────────────────────────────── */
.om-chart-box {
  position: relative;
  height: 180px;
  max-height: 180px;
  margin-bottom: 12px;
}
.om-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .om-top-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .lead-panel { width: 100%; max-width: 100%; }
  .lp-pipeline-stage { font-size: 9px; padding: var(--space-1) 2px; }
  .lp-mobile-sticky-actions {
    position: sticky; bottom: 0; background: var(--color-white);
    border-top: 1px solid var(--color-neutral-200);
    padding: var(--space-3) var(--space-6); z-index: 1;
  }
}


/* ============================================================================
   17. TABLET RESPONSIVE  (768px – 1024px)
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

  :root {
    --font-size-3xl: 20px;   /* slightly smaller stat values on tablet */
    --font-size-2xl: 18px;
  }

  /* Grid: force max 2 columns on tablet */
  .grid-auto    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .grid-auto-lg { grid-template-columns: repeat(2, 1fr); }
  .grid-3       { grid-template-columns: 1fr 1fr; }
  .grid-4       { grid-template-columns: 1fr 1fr; }

  /* Cards: tighter padding */
  .card   { padding: var(--space-4); }

  /* Table: allow horizontal scroll on tablet */
  .table-clean { min-width: 640px; }

  /* Buttons: slightly taller touch targets */
  .btn    { min-height: 38px; }

  /* Forms: full width fields on tablet */
  .form-group .input,
  .form-group select,
  .form-group textarea { font-size: var(--font-size-base); }
}


/* ============================================================================
   17. MOBILE RESPONSIVE  (< 768px)
   ============================================================================ */

@media (max-width: 767px) {

  :root {
    --font-size-3xl:  20px;
    --font-size-2xl:  18px;
    --font-size-xl:   16px;
    --space-4:        14px;
    --space-5:        16px;
    --space-6:        20px;
  }

  /* --- Grid: single column on small screens --- */
  .grid-auto,
  .grid-auto-sm,
  .grid-auto-lg,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-focus {
    grid-template-columns: 1fr !important;
  }

  /* --- Cards --- */
  .card    { padding: var(--space-3) var(--space-4); }
  .card-sm { padding: var(--space-2) var(--space-3); }

  /* --- Table scroll --- */
  .table-wrap   { border-radius: var(--radius-sm); }
  .table-clean  { min-width: 600px; }

  .table-clean th,
  .table-clean td { padding: var(--space-2) var(--space-2); font-size: 12px; }

  /* --- Buttons: touch-friendly --- */
  .btn {
    min-height: 44px;
    font-size: var(--font-size-md);
    padding: var(--space-2) var(--space-4);
  }

  .btn-sm {
    min-height: 36px;
    font-size: var(--font-size-base);
  }

  .btn-block { width: 100%; }

  /* --- Form inputs: prevent iOS zoom (font-size must be ≥16px) --- */
  .input,
  .textarea,
  .form-group select,
  .form-group input,
  .form-group textarea {
    font-size: 16px !important;
    padding: var(--space-3) var(--space-3);
    min-height: 44px;
  }

  .form-group { margin-bottom: var(--space-4); }

  /* --- ds-row: stack vertically on mobile --- */
  .ds-row,
  .ds-row-between {
    flex-direction: column;
    align-items: stretch;
  }

  /* --- Dropdown: full-width on mobile --- */
  .ds-dropdown { min-width: 0; width: 100%; left: 0 !important; }

  /* --- Spacing --- */
  .mb-6 { margin-bottom: var(--space-4); }
  .mb-5 { margin-bottom: var(--space-3); }
}


/* ============================================================================
   18. DARK MODE
   Triggered automatically by OS preference.
   Uses soft dark surfaces — no harsh pure blacks.
   Overrides both CSS variables (DS classes) and base selectors from index.html.
   ============================================================================ */

@media (prefers-color-scheme: dark) {

  /* ------------------------------------------------------------------
     18a. Variable overrides — flips the entire DS token system
     ------------------------------------------------------------------ */
  :root {

    /* Primary brand — stays recognisable, brightens slightly */
    --color-primary-700:    #b8d4de;
    --color-primary-600:    #9EBECB;
    --color-primary-400:    #7296A4;
    --color-primary-200:    #1f3a4a;
    --color-primary-100:    #122433;
    --color-primary-50:     #0c1a25;

    /* Neutral scale — inverted so 900=lightest text, 50=darkest surface */
    --color-neutral-900:    #e2e8f0;   /* primary text */
    --color-neutral-800:    #cbd5e1;   /* strong text */
    --color-neutral-700:    #94a3b8;   /* body text */
    --color-neutral-600:    #7a8fa4;   /* secondary text */
    --color-neutral-500:    #617383;   /* labels / muted */
    --color-neutral-400:    #3d5168;   /* disabled / placeholder */
    --color-neutral-300:    #2a3a4d;   /* strong borders */
    --color-neutral-200:    #213044;   /* default borders */
    --color-neutral-100:    #1c2840;   /* subtle fills */
    --color-neutral-50:     #192336;   /* surface / thead bg */
    --color-white:          #1e2d3d;   /* card / input / header bg */

    /* Success — dark green tint, bright text */
    --color-success-700:    #4ade80;
    --color-success-600:    #4ade80;
    --color-success-200:    #14532d;
    --color-success-100:    #0d2016;
    --color-success-50:     #081510;
    --color-success-border: #166534;

    /* Warning — dark amber tint, bright text */
    --color-warning-700:    #fbbf24;
    --color-warning-600:    #fbbf24;
    --color-warning-500:    #f59e0b;
    --color-warning-200:    #6b3500;
    --color-warning-100:    #1c1405;
    --color-warning-50:     #120e03;
    --color-warning-border: #92400e;

    /* Danger — dark red tint, bright text */
    --color-danger-700:     #f87171;
    --color-danger-600:     #f87171;
    --color-danger-200:     #7f1d1d;
    --color-danger-100:     #1e0c0c;
    --color-danger-50:      #130808;
    --color-danger-border:  #991b1b;

    /* Info (brand-aligned) — dark teal tint */
    --color-info-700:       #9EBECB;
    --color-info-600:       #9EBECB;
    --color-info-200:       #1a3a4d;
    --color-info-100:       #0e1e2b;
    --color-info-50:        #091420;
    --color-info-border:    #4d7282;

    /* Shadows — deeper in dark to separate surfaces */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 6px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35);
    --shadow-lg:  0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.4);
  }

  /* ------------------------------------------------------------------
     18b. Page shell — overrides hardcoded colours in index.html
     ------------------------------------------------------------------ */

  body {
    background: #131c29;
    color: #e2e8f0;
  }

  /* Header */
  .header {
    background: #1e2d3d;
    border-bottom-color: #213044;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  }

  .header-title { color: #e2e8f0; }
  .header-user  { color: #94a3b8; }

  .header-user a {
    color: #9EBECB;
    border-color: #2a3a4d;
  }

  .header-user a:hover {
    background: #213044;
    border-color: #7296A4;
  }

  /* Main content area */
  .content {
    background: #131c29;
  }

  .content h2 { color: #e2e8f0; }

  /* Sidebar — already dark (#0f172a), keep it. Adjust item colours only. */
  .sidebar-section-title { color: #7a8fa4; }

  .sidebar-item { color: #7a8fa4; }

  .sidebar-item:hover {
    background: #213044;
    color: #cbd5e1;
  }

  .sidebar-item.active {
    background: #213044;
    color: #e2e8f0;
    border-left-color: #9EBECB;
  }

  /* Filters bar */
  .filters {
    background: #1e2d3d;
    border-color: #213044;
  }

  .filter-group label { color: #7a8fa4; }

  /* ------------------------------------------------------------------
     18c. Form elements — inputs, selects, textareas, buttons
     ------------------------------------------------------------------ */

  input[type="text"],
  input[type="date"],
  input[type="month"],
  input[type="number"],
  select,
  textarea {
    background: #192336;
    border-color: #2a3a4d;
    color: #e2e8f0;
  }

  input[type="text"]:focus,
  input[type="date"]:focus,
  input[type="month"]:focus,
  input[type="number"]:focus,
  select:focus,
  textarea:focus {
    border-color: #9EBECB;
    box-shadow: 0 0 0 3px rgba(158, 190, 203, 0.15);
  }

  button,
  .btn {
    background: #1e2d3d;
    border-color: #2a3a4d;
    color: #cbd5e1;
  }

  button:hover,
  .btn:hover {
    background: #213044;
    border-color: #3d5168;
  }

  button.primary {
    background: #4d7282;
    border-color: #4d7282;
    color: #ffffff;
  }

  button.primary:hover {
    background: #7296A4;
    border-color: #7296A4;
  }

  button.success {
    background: #166534;
    border-color: #166534;
    color: #ffffff;
  }

  button.danger {
    background: #991b1b;
    border-color: #991b1b;
    color: #ffffff;
  }

  /* ------------------------------------------------------------------
     18d. Tables — base (index.html) and DS table-clean
     ------------------------------------------------------------------ */

  thead {
    background: #192336;
  }

  th {
    color: #617383;
    border-bottom-color: #213044;
  }

  th:hover {
    color: #9EBECB;
    background: #1a2f40;
  }

  td {
    color: #94a3b8;
    border-bottom-color: #1c2840;
  }

  tbody tr:hover {
    background: #1a2f40;
  }

  /* Old .table-container (used by non-refactored modules) */
  .table-container {
    background: #1e2d3d;
    border-color: #213044;
  }

  /* Locked rows */
  .locked-row,
  .row-locked        { background: #192336; }
  .locked-row td,
  .row-locked td     { color: #3d5168; }

  /* Editable cell hover */
  td.editable:hover  { background: #1a2f2a; }

  /* ------------------------------------------------------------------
     18e. Status badges — soften for dark backgrounds
     ------------------------------------------------------------------ */

  .status-pending, .status-submitted  { background: #1c1405; color: #fbbf24; }
  .status-active, .status-approved    { background: #0d2016; color: #4ade80; }
  .status-rejected                    { background: #1e0c0c; color: #f87171; }
  .status-draft, .status-locked,
  .status-to-do                       { background: #1c2840; color: #7a8fa4; }
  .status-ready, .status-green        { background: #0d2016; color: #4ade80; }
  .status-dry                         { background: #1c1405; color: #fbbf24; }
  .status-carpentry                   { background: #1c1405; color: #fbbf24; }
  .status-polishing                   { background: #1c1405; color: #f59e0b; }
  .status-cushioning                  { background: #131828; color: #a5b4fc; }
  .status-needs-clarification         { background: #1c1405; color: #fbbf24; }

  /* ------------------------------------------------------------------
     18f. Modal
     ------------------------------------------------------------------ */

  .modal {
    background: #1e2d3d;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

  .modal-header {
    border-bottom-color: #213044;
    color: #e2e8f0;
  }

  .modal-header button {
    background: #192336;
    color: #94a3b8;
  }

  .modal-header button:hover {
    background: #213044;
    color: #e2e8f0;
  }

  .modal-footer {
    border-top-color: #213044;
  }

  .modal-overlay {
    background: rgba(8, 14, 22, 0.7);
  }

  /* ------------------------------------------------------------------
     18g. DS component overrides (variables handle most, these catch edge cases)
     ------------------------------------------------------------------ */

  /* DS label inside semantic cards — variables handle colour, keep override clean */
  .card-neutral { background: #192336; border-color: #2a3a4d; }

  /* Card header border */
  .card-header  { border-bottom-color: #213044; }

  /* Section divider between ds-section blocks */
  .ds-section + .ds-section { border-top-color: #213044; }

  /* Table total row border */
  .table-clean .row-total td {
    border-top-color: #3d5168;
    background: #192336;
  }

  /* Scrollbar thumb */
  .ds-scroll-y::-webkit-scrollbar-thumb { background: #2a3a4d; }

  /* ------------------------------------------------------------------
     18h. Typography gap fills — muted text readability on dark surfaces
     Variable overrides push --color-neutral-400 to #3d5168 (contrast ~1.5:1
     against card bg). These explicit rules restore legibility.
     ------------------------------------------------------------------ */

  /* Muted / helper text — lifted to #7a8fa4 (~4.3:1 on card bg) */
  .ds-muted  { color: #7a8fa4; }
  .ds-helper { color: #7a8fa4; }

  /* Empty-state cell text — same lift */
  .table-clean .cell-empty { color: #7a8fa4; }

  /* Strong text inside table cells — slightly brighter than body text */
  .table-clean td strong { color: #cbd5e1; }

  /* Section headings not covered by .content h2 rule */
  .content h3,
  .content h4 { color: #cbd5e1; }

  /* ------------------------------------------------------------------
     18i. Table-wrap — explicit dark surface (belt-and-suspenders;
     variables already map --color-white and --color-neutral-200 correctly,
     but an explicit rule ensures no fallback to browser defaults)
     ------------------------------------------------------------------ */

  .table-wrap {
    background: #1e2d3d;
    border-color: #213044;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
}