/* ============================================================
   LeetFleet Design System — CSS Tokens
   Microsoft Dynamics 365 / Fluent Design Language
   Ref: fleet-design.zip/02_design_language.md
   ============================================================ */

:root {
  /* ---- Brand / Fluent Blue ---- */
  --lf-primary:            #0078D4;
  --lf-primary-hover:      #106EBE;
  --lf-primary-soft:       #eff6fc;
  --lf-primary-soft-border:#cfe4f7;
  --lf-primary-ink:        #0078D4;

  /* ---- Neutrals / Fluent Grays ---- */
  --lf-ink:                #323130;   /* primary text */
  --lf-text:               #323130;   /* body copy */
  --lf-muted:              #605e5c;   /* secondary text */
  --lf-subtle:             #605e5c;   /* labels */
  --lf-faint:              #a19f9d;   /* muted / captions */
  --lf-ghost:              #c8c6c4;   /* placeholder */

  /* ---- Surfaces & Lines ---- */
  --lf-canvas:             #faf9f8;   /* app background */
  --lf-surface:            #ffffff;   /* cards, panels */
  --lf-surface-alt:        #f3f2f1;   /* table headers, hover */
  --lf-line:               #edebe9;   /* hairline borders */
  --lf-line-soft:          #edebe9;   /* internal dividers */
  --lf-line-row:           #f3f2f1;   /* table row dividers */
  --lf-border-strong:      #c8c6c4;   /* scrollbar, strong borders */

  /* ---- App Shell (D365 style) ---- */
  --lf-header-bg:          #0078D4;   /* 48px blue suite header */
  --lf-header-height:      48px;
  --lf-sitemap-width:      228px;     /* white navigation sidebar */

  /* ---- Status Colours (semantic, never decoration) ---- */
  /* Healthy / Available / Done */
  --lf-active:             #0b6a0b;
  --lf-active-bg:          #dff6dd;

  /* In use / On-hire */
  --lf-rented:             #0E7C86;
  --lf-rented-bg:          #e0f2f1;

  /* Held / Reserved */
  --lf-reserved:           #742774;
  --lf-reserved-bg:        #f3e8f3;

  /* Warning / Due-soon / In-service */
  --lf-warn:               #7a5a00;
  --lf-warn-bg:            #fff4ce;

  /* Overdue / Error / Grounded */
  --lf-danger:             #a4262c;
  --lf-danger-bg:          #fde7e9;
  --lf-danger-border:      #f0c9c7;

  /* Neutral / Draft */
  --lf-neutral:            #605e5c;
  --lf-neutral-bg:         #f3f2f1;

  /* Priority squares */
  --lf-priority-critical:  #a4262c;
  --lf-priority-high:      #d83b01;
  --lf-priority-medium:    #0078D4;
  --lf-priority-low:       #0b6a0b;

  /* ---- Typography (Fluent) ---- */
  --lf-font-sans: "Segoe UI", -apple-system, system-ui, sans-serif;
  --lf-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --lf-fs-h1:        32px;
  --lf-fs-h2:        20px;
  --lf-fs-body:      13px;   /* dense enterprise default */
  --lf-fs-sm:        12px;
  --lf-fs-xs:        11px;
  --lf-fs-label:     10px;

  --lf-fw-regular:   400;
  --lf-fw-medium:    500;
  --lf-fw-semibold:  600;
  --lf-fw-bold:      700;

  /* ---- Radius (squared, not rounded) ---- */
  --lf-radius-sm:    2px;
  --lf-radius-md:    2px;
  --lf-radius-lg:    3px;
  --lf-radius-xl:    3px;
  --lf-radius-pill:  999px;

  /* ---- Spacing (4px base) ---- */
  --lf-space-1:  4px;
  --lf-space-2:  8px;
  --lf-space-3:  12px;
  --lf-space-4:  16px;
  --lf-space-5:  20px;
  --lf-space-6:  24px;
  --lf-space-8:  32px;

  /* ---- Grid rows ---- */
  --lf-row-height:   42px;   /* dense grid rows */

  /* ---- Shadows ---- */
  --lf-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --lf-shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

  /* ---- Selection ---- */
  --lf-selection-bg: var(--lf-primary);
  --lf-selection-fg: #ffffff;
}

/* ============================================================
   Base Resets
   ============================================================ */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--lf-font-sans);
  font-size: var(--lf-fs-body);
  line-height: 1.4;
  color: var(--lf-ink);
  background: var(--lf-canvas);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lf-selection-bg); color: var(--lf-selection-fg); }
a { color: inherit; text-decoration: none; }

/* Monospace for IDs, plates, amounts, timestamps */
.lf-mono, .lf-data {
  font-family: var(--lf-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Fluent scrollbar */
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-thumb {
  background: var(--lf-border-strong);
  border: 4px solid var(--lf-canvas);
  border-radius: 8px;
}

/* ============================================================
   Status Pills (7px dot + label, 2px radius)
   ============================================================ */
.lf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 2px;
  white-space: nowrap;
}
.lf-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}
.lf-pill--active   { color: var(--lf-active);   background: var(--lf-active-bg); }
.lf-pill--rented   { color: var(--lf-rented);   background: var(--lf-rented-bg); }
.lf-pill--reserved { color: var(--lf-reserved); background: var(--lf-reserved-bg); }
.lf-pill--warn     { color: var(--lf-warn);     background: var(--lf-warn-bg); }
.lf-pill--danger   { color: var(--lf-danger);   background: var(--lf-danger-bg); }
.lf-pill--neutral  { color: var(--lf-neutral);  background: var(--lf-neutral-bg); }

/* ============================================================
   SLA Chips (mono + icon)
   ============================================================ */
.lf-sla {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--lf-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 2px;
}
.lf-sla--breach  { color: var(--lf-danger); background: var(--lf-danger-bg); font-weight: 700; }
.lf-sla--soon    { color: var(--lf-warn);   background: var(--lf-warn-bg); }
.lf-sla--ok      { color: var(--lf-primary); background: var(--lf-primary-soft); }
.lf-sla--done    { color: var(--lf-active); background: var(--lf-active-bg); }

/* ============================================================
   Priority Markers (square swatch + label)
   ============================================================ */
.lf-priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.lf-priority::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.lf-priority--critical { color: var(--lf-priority-critical); }
.lf-priority--critical::before { background: var(--lf-priority-critical); }
.lf-priority--high { color: var(--lf-priority-high); }
.lf-priority--high::before { background: var(--lf-priority-high); }
.lf-priority--medium { color: var(--lf-priority-medium); }
.lf-priority--medium::before { background: var(--lf-priority-medium); }
.lf-priority--low { color: var(--lf-priority-low); }
.lf-priority--low::before { background: var(--lf-priority-low); }

/* ============================================================
   RACI Chips (A/R/C/I square letter)
   ============================================================ */
.lf-raci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
}
.lf-raci--a { color: var(--lf-danger);   background: var(--lf-danger-bg); }
.lf-raci--r { color: var(--lf-primary);  background: var(--lf-primary-soft); }
.lf-raci--c { color: var(--lf-warn);     background: var(--lf-warn-bg); }
.lf-raci--i { color: var(--lf-neutral);  background: var(--lf-neutral-bg); }

/* ============================================================
   Buttons (Fluent style)
   ============================================================ */
.lf-btn {
  font-family: var(--lf-font-sans);
  font-size: var(--lf-fs-sm);
  font-weight: var(--lf-fw-semibold);
  padding: 8px 16px;
  border-radius: var(--lf-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  line-height: 1;
}
.lf-btn.primary   { background: var(--lf-primary); color: #fff; }
.lf-btn.primary:hover { background: var(--lf-primary-hover); }
.lf-btn.secondary { background: var(--lf-surface); color: var(--lf-ink); border-color: var(--lf-border-strong); }
.lf-btn.secondary:hover { background: var(--lf-surface-alt); }
.lf-btn.danger    { background: var(--lf-surface); color: var(--lf-danger); border-color: var(--lf-danger-border); }

/* ============================================================
   Cards (3px radius, hairline border)
   ============================================================ */
.lf-card {
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
}

/* ============================================================
   Data Table (42px rows, dense)
   ============================================================ */
.lf-table-header {
  display: grid;
  background: var(--lf-surface-alt);
  font-family: var(--lf-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lf-faint);
  padding: 10px 16px;
  border-bottom: 1px solid var(--lf-line);
}
.lf-table-row {
  display: grid;
  align-items: center;
  padding: 0 16px;
  min-height: var(--lf-row-height);
  font-size: 13px;
  color: var(--lf-text);
  border-bottom: 1px solid var(--lf-line-row);
  cursor: pointer;
  transition: background .1s;
}
.lf-table-row:hover { background: var(--lf-surface-alt); }

/* ============================================================
   Dark Mode
   ============================================================ */
[data-theme="dark"] {
  --lf-canvas: #1b1a19;
  --lf-surface: #252423;
  --lf-surface-alt: #323130;
  --lf-line: #3b3a39;
  --lf-line-soft: #323130;
  --lf-line-row: #2d2c2b;
  --lf-border-strong: #484644;
  --lf-ink: #f3f2f1;
  --lf-text: #d2d0ce;
  --lf-muted: #a19f9d;
  --lf-faint: #797775;
  --lf-ghost: #605e5c;
  --lf-header-bg: #0078D4;
  --lf-active-bg: rgba(11, 106, 11, 0.25);
  --lf-warn-bg: rgba(122, 90, 0, 0.25);
  --lf-danger-bg: rgba(164, 38, 44, 0.25);
  --lf-rented-bg: rgba(14, 124, 134, 0.25);
  --lf-reserved-bg: rgba(116, 39, 116, 0.25);
  --lf-neutral-bg: rgba(96, 94, 92, 0.25);
  --lf-primary-soft: rgba(0, 120, 212, 0.25);
}

[data-theme="dark"]::-webkit-scrollbar-thumb {
  border-color: var(--lf-canvas);
}