/* ═══════════════════════════════════════════════════════════════════════════
   TFM UI — global design system
   ───────────────────────────────────────────────────────────────────────────
   One visual standard for every CRM page. Presentation only: nothing here
   changes what a control does, only how it looks.

   1. Tokens        — type, spacing, radius, elevation, semantic colours
   2. Base          — font, body, headings, form controls, tables
   3. Components    — .ds-* classes for new/refactored UI (buttons, badges…)
   4. Normalisation — maps the app's inline React styles onto the scale above

   Theme colours stay in the --tfm-* variables (THEMES in js/shared_ui.js and
   the FOUC block in index.php). This file only reads them, always with the
   default light-theme fallback, so all themes keep working.

   Section 4 works by matching the browser-serialised inline style attribute
   (React writes `fontWeight: 800` as `font-weight: 800;`). Author !important
   beats a non-important inline declaration, so these rules can normalise
   values without editing the component that set them. The login screen
   (.tl-page) is its own brand surface and is excluded throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Type */
  --ds-font: 'Inter Variable', 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ds-fs-2xs: 11px;   /* captions, badges          */
  --ds-fs-xs: 12px;    /* labels, table headers     */
  --ds-fs-sm: 13px;    /* body, table cells, inputs */
  --ds-fs-md: 14px;    /* emphasised body           */
  --ds-fs-lg: 16px;    /* section titles            */
  --ds-fs-xl: 20px;    /* page titles               */
  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-lh: 1.5;
  --ds-lh-tight: 1.25;

  /* Spacing — 4px grid */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  /* Shape */
  --ds-radius-sm: 4px;   /* chips, small tags          */
  --ds-radius: 6px;      /* buttons, inputs, menus     */
  --ds-radius-lg: 8px;   /* cards, panels, modals      */
  --ds-radius-pill: 999px;

  /* Controls */
  --ds-control-h: 32px;
  --ds-control-h-sm: 28px;

  /* Elevation — borders do the work; shadows stay faint */
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --ds-shadow-md: 0 4px 16px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
  --ds-shadow-lg: 0 16px 40px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
  --ds-backdrop: rgba(15, 23, 42, .45);

  /* Neutral surfaces (theme-aware) */
  --ds-bg: var(--tfm-page-bg, #f8fafc);
  --ds-surface: var(--tfm-card-bg, #ffffff);
  --ds-surface-muted: var(--tfm-table-row-alt, #f8fafc);
  --ds-border: var(--tfm-card-border, #e2e8f0);
  --ds-border-strong: var(--tfm-input-border, #cbd5e1);
  --ds-text: var(--tfm-text, #0f172a);
  --ds-text-sub: var(--tfm-text-sub, #334155);
  --ds-text-muted: var(--tfm-text-muted, #526071);
  --ds-primary: var(--tfm-primary, #0d9488);
  --ds-primary-hover: var(--tfm-primary-dark, #0f766e);
  --ds-primary-soft: var(--tfm-accent-light, #e2f2f0);

  /* Table header — a light blue-grey band, darker than the page (#f5f8fc) and
     the rows so the header reads as a header. Themes may set --tfm-th-bg. */
  --ds-th-bg: var(--tfm-th-bg, #e6ecf4);
  --ds-th-text: var(--tfm-th-text, var(--tfm-text, #1e293b));

  /* Semantic status colours — text / background / border */
  --ds-success: #15803d;  --ds-success-bg: #f0fdf4;  --ds-success-border: #bbf7d0;
  --ds-warning: #b45309;  --ds-warning-bg: #fffbeb;  --ds-warning-border: #fde68a;
  --ds-danger: #b91c1c;   --ds-danger-bg: #fef2f2;   --ds-danger-border: #fecaca;
  --ds-info: #1d4ed8;     --ds-info-bg: #eff6ff;     --ds-info-border: #bfdbfe;
  --ds-neutral: #334155;  --ds-neutral-bg: #f1f5f9;  --ds-neutral-border: #e2e8f0;

  --ds-transition: .15s ease;
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--ds-font);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh);
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea, optgroup { font-family: inherit; }
::placeholder { color: var(--ds-text-muted); opacity: .88; }
::selection { background: var(--ds-primary-soft); color: var(--ds-text); }

#root h1 { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-semibold); line-height: var(--ds-lh-tight); letter-spacing: -.01em; }
#root h2 { font-weight: var(--ds-fw-semibold); line-height: var(--ds-lh-tight); }
#root h3, #root h4 { font-weight: var(--ds-fw-semibold); line-height: var(--ds-lh-tight); }
#root b, #root strong { font-weight: var(--ds-fw-semibold); }

/* Numbers line up in every table and numeric field */
#root table, #root input[type=number] { font-variant-numeric: tabular-nums; }
#root table { border-color: var(--ds-border); }

/* Form controls: one border, one radius, one placeholder colour */
#root select { cursor: pointer; }
#root input[type=checkbox], #root input[type=radio] { accent-color: var(--ds-primary); }
#root textarea { line-height: var(--ds-lh); }

/* Calm interaction feedback — no bounce or scale */
#root button:active:not(:disabled):not(.tl-page *) { transform: none; }

/* ── 3. Components (.ds-*) ─────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ds-control-h); padding: 0 14px;
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius);
  background: var(--ds-surface); color: var(--ds-text);
  font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--ds-transition), border-color var(--ds-transition), color var(--ds-transition);
}
.ds-btn:hover:not(:disabled) { background: var(--ds-surface-muted); filter: none; }
.ds-btn--primary { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; }
.ds-btn--primary:hover:not(:disabled) { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.ds-btn--danger { background: var(--ds-surface); border-color: var(--ds-danger-border); color: var(--ds-danger); }
.ds-btn--danger:hover:not(:disabled) { background: var(--ds-danger-bg); }
.ds-btn--ghost { background: transparent; border-color: transparent; color: var(--ds-text-sub); }
.ds-btn--sm { height: var(--ds-control-h-sm); padding: 0 10px; font-size: var(--ds-fs-xs); }

.ds-input {
  height: var(--ds-control-h); padding: 0 10px; width: 100%;
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius);
  background: var(--ds-surface); color: var(--ds-text);
  font: inherit; font-size: var(--ds-fs-sm);
}
.ds-label { display: block; margin-bottom: 4px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); color: var(--ds-text-sub); }

.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); padding: var(--ds-space-4);
}

.ds-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: var(--ds-radius-pill);
  font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-medium); line-height: 1; white-space: nowrap;
  background: var(--ds-neutral-bg); color: var(--ds-neutral); border: 1px solid var(--ds-neutral-border);
}
.ds-badge--success { background: var(--ds-success-bg); color: var(--ds-success); border-color: var(--ds-success-border); }
.ds-badge--warning { background: var(--ds-warning-bg); color: var(--ds-warning); border-color: var(--ds-warning-border); }
.ds-badge--danger  { background: var(--ds-danger-bg);  color: var(--ds-danger);  border-color: var(--ds-danger-border); }
.ds-badge--info    { background: var(--ds-info-bg);    color: var(--ds-info);    border-color: var(--ds-info-border); }

.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.ds-table th { text-align: left; padding: 8px 12px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); color: var(--ds-th-text); background: var(--ds-th-bg); border-bottom: 1px solid var(--ds-border); white-space: nowrap; }
.ds-table td { padding: 8px 12px; border-bottom: 1px solid var(--ds-border); color: var(--ds-text); }
.ds-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 4. Normalisation of inline styles ─────────────────────────────────────── */

/* 4a. Weight — the app used 700/800/900 for almost every label. One semibold
       step reads as emphasis again instead of shouting. */
#root [style*="font-weight: 700"]:not(.tl-page *),
#root [style*="font-weight: 800"]:not(.tl-page *),
#root [style*="font-weight: 900"]:not(.tl-page *),
#root [style*="font-weight: 950"]:not(.tl-page *),
#root [style*="font-weight: bold"]:not(.tl-page *),
#root [style*="font-weight: bolder"]:not(.tl-page *) {
  font-weight: var(--ds-fw-semibold) !important;
}

/* 4b. Minimum readable size — 9–10px text is lifted to clear readability. */
#root [style*="font-size: 8px"]:not(.tl-page *),
#root [style*="font-size: 8.5px"]:not(.tl-page *),
#root [style*="font-size: 9px"]:not(.tl-page *),
#root [style*="font-size: 9.5px"]:not(.tl-page *) { font-size: 11px !important; }
#root [style*="font-size: 10px"]:not(.tl-page *),
#root [style*="font-size: 10.5px"]:not(.tl-page *) { font-size: 11.5px !important; }

/* 4c. No decorative ALL CAPS or wide tracking (inputs keep theirs — some
       display codes uppercased). Negative tracking on large titles is kept. */
#root [style*="text-transform: uppercase"]:not(input):not(textarea):not(.tl-page *) {
  text-transform: none !important;
}
#root [style*="letter-spacing: 0."]:not(input):not(.tl-page *),
#root [style*="letter-spacing: 1"]:not(input):not(.tl-page *),
#root [style*="letter-spacing: 2"]:not(input):not(.tl-page *),
#root [style*="letter-spacing: 3"]:not(input):not(.tl-page *) {
  letter-spacing: normal !important;
}

/* 4d. Numbers: the old monospace data columns become the UI font with
       tabular figures — still aligned, far easier to read. Code stays mono. */
#root [style*="font-family: monospace"]:not(pre):not(code):not(textarea):not(.tl-page *),
#root [style*="font-family: ui-monospace"]:not(pre):not(code):not(textarea):not(.tl-page *),
#root [style*="font-family: \"Courier"]:not(pre):not(code):not(textarea):not(.tl-page *),
#root [style*="font-family: Courier"]:not(pre):not(code):not(textarea):not(.tl-page *),
#root [style*="font-family: Georgia"]:not(.tl-page *) {
  font-family: var(--ds-font) !important;
  font-variant-numeric: tabular-nums;
}

/* 4e. Radius scale — controls 6px, containers 8px. Pills (≥20px, 50%, 999px)
       and hairline radii (≤4px) are left as designed. Matching the trailing
       ';' keeps single-value rules from catching per-corner ones. Elements
       with a fixed width AND height are skipped: those are avatars, dots and
       switch tracks whose radius is half their size, i.e. circles/pills. */
#root [style*="border-radius: 5px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 7px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *) { border-radius: var(--ds-radius) !important; }
#root [style*="border-radius: 9px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 10px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 11px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 12px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 13px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 14px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 15px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 16px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *),
#root [style*="border-radius: 18px;"]:not([style*=" width: "][style*=" height: "]):not([style^="width: "][style*=" height: "]):not([style^="height: "][style*=" width: "]):not(.tl-page *) { border-radius: var(--ds-radius-lg) !important; }
/* …and the per-corner variants used on card headers/footers */
#root [style*="border-radius: 10px 10px 0px 0px;"],
#root [style*="border-radius: 12px 12px 0px 0px;"],
#root [style*="border-radius: 14px 14px 0px 0px;"],
#root [style*="border-radius: 16px 16px 0px 0px;"] { border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0 !important; }
#root [style*="border-radius: 0px 0px 10px 10px;"],
#root [style*="border-radius: 0px 0px 12px 12px;"],
#root [style*="border-radius: 0px 0px 14px 14px;"],
#root [style*="border-radius: 0px 0px 16px 16px;"] { border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg) !important; }
#root [style*="border-radius: 10px 0px 0px;"],
#root [style*="border-radius: 10px 0px 0px 0px;"] { border-radius: var(--ds-radius-lg) 0 0 0 !important; }
#root [style*="border-radius: 0px 10px 0px 0px;"] { border-radius: 0 var(--ds-radius-lg) 0 0 !important; }

/* 4f. Elevation — cards are defined by a border, not a shadow. Rings
       (0 0 0 Npx) and inset shadows are state indicators and are kept.
       Floating layers (popovers, menus, toasts) keep a soft lift, and a
       dialog sitting on a fixed backdrop gets the modal elevation. */
#root [style*="box-shadow"]:not([style*="box-shadow: none"]):not([style*="inset"]):not([style*="0px 0px 0px"]):not(.tl-page *) {
  box-shadow: var(--ds-shadow-sm) !important;
}
#root [style*="position: absolute"][style*="box-shadow"]:not([style*="box-shadow: none"]):not([style*="inset"]):not([style*="0px 0px 0px"]):not(.tl-page *),
#root [style*="position: fixed"][style*="box-shadow"]:not([style*="box-shadow: none"]):not([style*="inset"]):not([style*="0px 0px 0px"]):not(.tl-page *) {
  box-shadow: var(--ds-shadow-md) !important;
}
#root [style*="position: fixed"] > [style*="box-shadow"]:not([style*="box-shadow: none"]):not([style*="inset"]):not([style*="0px 0px 0px"]):not(.tl-page *) {
  box-shadow: var(--ds-shadow-lg) !important;
}
/* No hover "lift" on cards and tiles. */
#root [style*="translateY(-1px)"]:not(.tl-page *),
#root [style*="translateY(-2px)"]:not(.tl-page *),
#root [style*="translateY(-3px)"]:not(.tl-page *) { transform: none !important; }

/* 4g. No glass — backdrops are a flat dim, chips on coloured headers flat. */
#root [style*="backdrop-filter"]:not(.tl-page *) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#root [style*="position: fixed"][style*="inset: 0px"][style*="backdrop-filter"]:not(.tl-page *),
#root [style*="position: fixed"][style*="rgba(0, 0, 0, 0.4"]:not(.tl-page *),
#root [style*="position: fixed"][style*="rgba(0, 0, 0, 0.5"]:not(.tl-page *),
#root [style*="position: fixed"][style*="rgba(15, 23, 42, 0."]:not(.tl-page *) {
  background-color: var(--ds-backdrop) !important;
}

/* 4h. Gradient-filled title text becomes plain heading text. */
#root [style*="background-clip: text"]:not(.tl-page *) {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ds-text) !important;
}

/* 4i. Tables — one header style everywhere: light neutral band, muted
       semibold label, hairline rule. Dark/colour-filled header rows used to
       vary page by page; their text and child elements are brought back to
       the header colour so nothing turns white-on-light. */
#root thead tr:not(.tl-page *) { background: var(--ds-th-bg) !important; color: var(--ds-th-text) !important; }
#root th:not(.tl-page *),
#root thead td:not(.tl-page *) {
  background: var(--ds-th-bg) !important;
  color: var(--ds-th-text) !important;
  font-weight: var(--ds-fw-semibold) !important;
  border-color: var(--ds-border) !important;
}
#root th :is(span, div, b, strong, small, i, em, label, a, abbr):not([style*="background"]),
#root thead td :is(span, div, b, strong, small, i, em, label, a, abbr):not([style*="background"]) {
  color: inherit !important;
}
#root th svg, #root thead td svg { color: inherit; }
#root tbody tr { transition: background-color .1s ease; }

/* 4j. Primary actions are flat. A gradient button keeps its first colour
       stop's role through the theme primary. */
#root button[style*="linear-gradient"]:not(.tl-page *) {
  background: var(--ds-primary) !important;
  border-color: var(--ds-primary) !important;
}

/* 4k. Darker, readable text — wash-out / low-contrast inline greys
       are mapped onto the readable token scale so all text has crisp,
       comfortable contrast without eye strain. */
#root [style*="color: #94a3b8"]:not(.tl-page *),
#root [style*="color:#94a3b8"]:not(.tl-page *),
#root [style*="color: #9ca3af"]:not(.tl-page *),
#root [style*="color:#9ca3af"]:not(.tl-page *),
#root [style*="color: #a0aec0"]:not(.tl-page *),
#root [style*="color:#a0aec0"]:not(.tl-page *),
#root [style*="color: #a1a1aa"]:not(.tl-page *),
#root [style*="color:#a1a1aa"]:not(.tl-page *),
#root [style*="color: #888"]:not(.tl-page *),
#root [style*="color:#888"]:not(.tl-page *),
#root [style*="color: #999"]:not(.tl-page *),
#root [style*="color:#999"]:not(.tl-page *),
#root [style*="color: #aaa"]:not(.tl-page *),
#root [style*="color:#aaa"]:not(.tl-page *),
#root [style*="color: #888888"]:not(.tl-page *),
#root [style*="color:#888888"]:not(.tl-page *),
#root [style*="color: #999999"]:not(.tl-page *),
#root [style*="color:#999999"]:not(.tl-page *),
#root [style*="color: #aaaaaa"]:not(.tl-page *),
#root [style*="color:#aaaaaa"]:not(.tl-page *),
#root [style*="color: rgb(148, 163, 184)"]:not(.tl-page *),
#root [style*="color: rgb(156, 163, 175)"]:not(.tl-page *),
#root [style*="color: rgb(160, 174, 192)"]:not(.tl-page *),
#root [style*="color: rgb(161, 161, 170)"]:not(.tl-page *),
#root [style*="color: rgb(136, 136, 136)"]:not(.tl-page *),
#root [style*="color: rgb(153, 153, 153)"]:not(.tl-page *),
#root [style*="color: rgb(170, 170, 170)"]:not(.tl-page *) {
  color: var(--ds-text-muted) !important;
}

#root [style*="color: #6b7280"]:not(.tl-page *),
#root [style*="color:#6b7280"]:not(.tl-page *),
#root [style*="color: #71717a"]:not(.tl-page *),
#root [style*="color:#71717a"]:not(.tl-page *),
#root [style*="color: #64748b"]:not(.tl-page *),
#root [style*="color:#64748b"]:not(.tl-page *),
#root [style*="color: #475569"]:not(.tl-page *),
#root [style*="color:#475569"]:not(.tl-page *),
#root [style*="color: #666"]:not(.tl-page *),
#root [style*="color:#666"]:not(.tl-page *),
#root [style*="color: #777"]:not(.tl-page *),
#root [style*="color:#777"]:not(.tl-page *),
#root [style*="color: #666666"]:not(.tl-page *),
#root [style*="color:#666666"]:not(.tl-page *),
#root [style*="color: #777777"]:not(.tl-page *),
#root [style*="color:#777777"]:not(.tl-page *),
#root [style*="color: rgb(107, 114, 128)"]:not(.tl-page *),
#root [style*="color: rgb(113, 113, 122)"]:not(.tl-page *),
#root [style*="color: rgb(100, 116, 139)"]:not(.tl-page *),
#root [style*="color: rgb(71, 85, 105)"]:not(.tl-page *),
#root [style*="color: rgb(102, 102, 102)"]:not(.tl-page *),
#root [style*="color: rgb(119, 119, 119)"]:not(.tl-page *) {
  color: var(--ds-text-sub) !important;
}