/* ==========================================================================
   02. SOURCE: design-system-v1.css
   ========================================================================== */
/* TDH Visual System Upgrade, Phase 1
   Foundation only: tokens, typography, controls, surfaces, tables, dialogs,
   alerts, focus states and automatic OS-level dark mode.
   No module logic or page structure is changed. */

:root {
  color-scheme: light;
  --tdh-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tdh-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --tdh-brand-950: #21042c;
  --tdh-brand-900: #31063f;
  --tdh-brand-800: #4f0b62;
  --tdh-brand-700: #6f1387;
  --tdh-brand-600: #8b1ca4;
  --tdh-brand-500: #a62ac1;
  --tdh-brand-400: #c857da;
  --tdh-brand-100: #f4e8f7;
  --tdh-brand-50: #fbf7fc;

  --tdh-accent: #8b1ca4;
  --tdh-accent-hover: #721389;
  --tdh-accent-soft: #f1e3f4;
  --tdh-accent-contrast: #ffffff;

  --tdh-bg: #f5f3f7;
  --tdh-surface: #ffffff;
  --tdh-surface-subtle: #faf9fb;
  --tdh-surface-muted: #f2eff4;
  --tdh-surface-raised: #ffffff;
  --tdh-line: #e3dde6;
  --tdh-line-strong: #cec4d2;
  --tdh-text: #2d2331;
  --tdh-text-secondary: #665b6b;
  --tdh-text-muted: #817686;
  --tdh-text-faint: #9e94a2;

  --tdh-success: #087a55;
  --tdh-success-bg: #edf8f2;
  --tdh-warning: #995d0a;
  --tdh-warning-bg: #fff7e8;
  --tdh-danger: #bf2644;
  --tdh-danger-bg: #fff0f3;
  --tdh-info: #315f9a;
  --tdh-info-bg: #eff5fc;

  --tdh-radius-xs: 6px;
  --tdh-radius-sm: 9px;
  --tdh-radius-md: 12px;
  --tdh-radius-lg: 16px;
  --tdh-radius-xl: 20px;
  --tdh-radius-pill: 999px;

  --tdh-shadow-xs: 0 1px 2px rgba(41, 18, 48, .04);
  --tdh-shadow-sm: 0 5px 16px rgba(41, 18, 48, .06);
  --tdh-shadow-md: 0 12px 34px rgba(41, 18, 48, .09);
  --tdh-shadow-lg: 0 24px 70px rgba(31, 8, 38, .16);
  --tdh-focus: 0 0 0 3px rgba(139, 28, 164, .18);

  --tdh-space-1: 4px;
  --tdh-space-2: 8px;
  --tdh-space-3: 12px;
  --tdh-space-4: 16px;
  --tdh-space-5: 20px;
  --tdh-space-6: 24px;
  --tdh-space-8: 32px;
  --tdh-space-10: 40px;

  --tdh-control-sm: 34px;
  --tdh-control-md: 40px;
  --tdh-control-lg: 46px;
  --tdh-transition: 150ms cubic-bezier(.2, .8, .2, 1);

  /* Compatibility mappings used throughout existing TDH CSS. */
  --bg: var(--tdh-bg);
  --border: var(--tdh-line);
  --muted: var(--tdh-text-muted);
  --dark: var(--tdh-text);
  --blue: var(--tdh-accent);
  --nav: var(--tdh-brand-950);
  --violet: var(--tdh-accent);
}

html { font-size: 16px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { background: var(--tdh-bg) !important; color: var(--tdh-text) !important; font-family: var(--tdh-font-sans) !important; font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
::selection { background: #dcb4e5; color: #29142f; }

h1, h2, h3, h4 { color: var(--tdh-text); font-weight: 780; letter-spacing: -.025em; line-height: 1.18; }
h1 { font-size: clamp(28px, 2.2vw, 36px) !important; }
h2 { font-size: clamp(21px, 1.65vw, 27px); }
h3 { font-size: 17px; }
h4 { font-size: 14px; }
p, li { line-height: 1.55; }
small { line-height: 1.35; }
.muted { color: var(--tdh-text-muted) !important; font-size: 13px !important; }
.label { color: var(--tdh-text-muted) !important; font-size: 10px !important; letter-spacing: .045em; }
.value { color: var(--tdh-text) !important; font-size: 12px !important; }

.main { padding: 30px 32px !important; }
.head { margin-bottom: 24px !important; }
.head h1 { margin: 0 0 3px !important; }

/* Controls */
.btn,
button.btn {
  min-height: var(--tdh-control-md);
  padding: 0 15px !important;
  border: 1px solid var(--tdh-line-strong) !important;
  border-radius: var(--tdh-radius-sm) !important;
  background: var(--tdh-surface) !important;
  color: var(--tdh-text) !important;
  box-shadow: var(--tdh-shadow-xs);
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1;
  transition: border-color var(--tdh-transition), background var(--tdh-transition), box-shadow var(--tdh-transition), transform var(--tdh-transition);
}
.btn:hover:not(:disabled) { border-color: #b99abf !important; background: var(--tdh-brand-50) !important; box-shadow: var(--tdh-shadow-sm); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn.primary,
button.btn.primary { border-color: var(--tdh-accent) !important; background: var(--tdh-accent) !important; color: var(--tdh-accent-contrast) !important; }
.btn.primary:hover:not(:disabled) { border-color: var(--tdh-accent-hover) !important; background: var(--tdh-accent-hover) !important; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.input,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  min-height: var(--tdh-control-md);
  border: 1px solid var(--tdh-line-strong) !important;
  border-radius: var(--tdh-radius-sm) !important;
  background-color: var(--tdh-surface) !important;
  color: var(--tdh-text) !important;
  font-size: 12px !important;
  transition: border-color var(--tdh-transition), box-shadow var(--tdh-transition), background var(--tdh-transition);
}
input::placeholder, textarea::placeholder { color: var(--tdh-text-faint); opacity: 1; }
.input:hover, input:hover, select:hover, textarea:hover { border-color: #bcaec0 !important; }
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--tdh-accent) !important; box-shadow: var(--tdh-focus) !important; outline: none !important; }
input:disabled, select:disabled, textarea:disabled { background: var(--tdh-surface-muted) !important; color: var(--tdh-text-muted) !important; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--tdh-accent); }

/* Foundation surfaces */
.panel, .card, .shortcut, .worklist-card, .kpi, .plan-kpi,
.chart-card, .dkpi, .dash46-card, .dash46-kpis article,
.adm-card, .adm-mapping, .dbt-table-frame,
.sms-wl-v514, .sms-mdu-group, .sms-preview-group {
  border: 1px solid var(--tdh-line) !important;
  background: var(--tdh-surface) !important;
  box-shadow: var(--tdh-shadow-xs) !important;
}
.panel, .card, .shortcut, .worklist-card, .chart-card, .dash46-card,
.adm-card, .adm-mapping { border-radius: var(--tdh-radius-lg) !important; }
.card:hover, .shortcut:hover { border-color: #ccb8d1 !important; box-shadow: var(--tdh-shadow-sm) !important; }

/* Badges and status treatments */
.badge, .ticket-chip, .plan-badge, .dash46-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px !important;
  border-radius: var(--tdh-radius-pill) !important;
  background: var(--tdh-surface-muted) !important;
  color: var(--tdh-text-secondary) !important;
  font-size: 9px !important;
  font-weight: 780 !important;
}
.badge.green { background: var(--tdh-success-bg) !important; color: var(--tdh-success) !important; }
.badge.amber { background: var(--tdh-warning-bg) !important; color: var(--tdh-warning) !important; }
.badge.red { background: var(--tdh-danger-bg) !important; color: var(--tdh-danger) !important; }
.badge.violet { background: var(--tdh-accent-soft) !important; color: var(--tdh-brand-700) !important; }

/* Tables */
table { border-color: var(--tdh-line); }
thead th {
  height: 42px;
  padding: 10px 12px !important;
  border-color: var(--tdh-line) !important;
  background: var(--tdh-surface-subtle) !important;
  color: var(--tdh-text-secondary) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .025em;
}
tbody td {
  height: 44px;
  padding: 10px 12px !important;
  border-color: var(--tdh-line) !important;
  color: var(--tdh-text) !important;
  font-size: 11px !important;
}
tbody tr { transition: background var(--tdh-transition); }
tbody tr:hover td { background: var(--tdh-brand-50) !important; }

/* Empty states, notifications and semantic messages */
.backlog-empty, .dbt-empty, .dbt-loading, .dbt-sql-empty {
  border-color: var(--tdh-line-strong) !important;
  color: var(--tdh-text-muted) !important;
}
.notify {
  min-height: 44px;
  padding: 12px 16px !important;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--tdh-radius-md) !important;
  background: var(--tdh-brand-950) !important;
  box-shadow: var(--tdh-shadow-lg);
  font-size: 12px;
}

/* Dialog system */
.modal, .modal-v452, .bulk-order-modal-v456,
.multi-plan-modal-v473, .dbt-drawer-backdrop,
.dbt-confirm-backdrop, .dbt-sql-backdrop {
  background: rgba(28, 10, 33, .62) !important;
  backdrop-filter: blur(8px) saturate(.9) !important;
}
.dialog, .delivery-dialog-v452, .delivery-edit-v452,
.bulk-order-modal-v456 > section, .multi-plan-dialog-v473,
.dbt-confirm-modal > section {
  border: 1px solid var(--tdh-line) !important;
  border-radius: var(--tdh-radius-xl) !important;
  background: var(--tdh-surface-raised) !important;
  box-shadow: var(--tdh-shadow-lg) !important;
}
.dh, .delivery-head-v452, .multi-plan-head-v473 { border-color: var(--tdh-line) !important; background: var(--tdh-surface) !important; }
.close, .multi-plan-close-v473 { background: var(--tdh-surface-muted) !important; color: var(--tdh-text-secondary) !important; }
.close:hover, .multi-plan-close-v473:hover { background: var(--tdh-accent-soft) !important; color: var(--tdh-accent-hover) !important; }

/* Focus visibility for keyboard users */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--tdh-accent) !important;
  outline-offset: 2px !important;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c7b8cc transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #c7b8cc; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #ad99b3; background-clip: padding-box; }

/* Automatic dark foundation. Manual switch belongs to Phase 2 navigation. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --tdh-bg: #121016;
    --tdh-surface: #1b171f;
    --tdh-surface-subtle: #211c25;
    --tdh-surface-muted: #2a232f;
    --tdh-surface-raised: #211b25;
    --tdh-line: #3a303f;
    --tdh-line-strong: #514357;
    --tdh-text: #f2edf4;
    --tdh-text-secondary: #c9becd;
    --tdh-text-muted: #a99daf;
    --tdh-text-faint: #867a8b;
    --tdh-accent: #c956de;
    --tdh-accent-hover: #d974e8;
    --tdh-accent-soft: #3a2340;
    --tdh-success-bg: #18372d;
    --tdh-warning-bg: #3b2c16;
    --tdh-danger-bg: #42202a;
    --tdh-info-bg: #1d2e43;
    --tdh-shadow-xs: 0 1px 2px rgba(0,0,0,.18);
    --tdh-shadow-sm: 0 7px 20px rgba(0,0,0,.22);
    --tdh-shadow-md: 0 16px 40px rgba(0,0,0,.28);
    --tdh-shadow-lg: 0 30px 90px rgba(0,0,0,.5);
    --tdh-focus: 0 0 0 3px rgba(201, 86, 222, .22);
  }
  body { background: var(--tdh-bg) !important; }
  .page, .main { color: var(--tdh-text); }
  .panel, .card, .shortcut, .worklist-card, .kpi, .plan-kpi,
  .chart-card, .dkpi, .dash46-card, .dash46-kpis article,
  .adm-card, .adm-mapping, .dbt-table-frame,
  .sms-wl-v514, .sms-mdu-group, .sms-preview-group,
  .task, .backlogrow, .planning-backlog, .plan-week { background: var(--tdh-surface) !important; color: var(--tdh-text) !important; }
  .ibox, .template-status, .ticket-column, .planning-backlog-head,
  .adm-shell > aside, .dbt-sidebar, .dbt-summary article { background: var(--tdh-surface-subtle) !important; }
  .homehero { background: linear-gradient(125deg, #4c0e62, #801b93) !important; }
  img { filter: none; }
}

@media (max-width: 900px) {
  .main { padding: 22px !important; }
  h1 { font-size: 28px !important; }
  .btn { min-height: 42px; }
}

@media (max-width: 600px) {
  .main { padding: 17px !important; }
  body { font-size: 14px; }
}