/* ==========================================================================
   MyFleet UI — design system  (v1)
   --------------------------------------------------------------------------
   • Loaded on every page, but affects ONLY elements with mf- classes and
     pages whose <body> (or a wrapper) has the class "mf-ui". Old pages are
     untouched until they are moved over.
   • Tokens are CSS variables (--mf-*). Light theme is the product theme;
     dark values are laid down for later ([data-mf-theme="dark"]).
   • Fonts: Inter (UI, tabular numbers) + JetBrains Mono (VIN, plates, codes),
     self-hosted in /fonts/mf (SIL OFL 1.1).
   • Icons: Bootstrap Icons (<i class="bi bi-truck">), size via font-size.
   ========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/mf/inter-latin.woff2") format("woff2-variations"),
       url("../fonts/mf/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/mf/inter-latin-ext.woff2") format("woff2-variations"),
       url("../fonts/mf/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/mf/inter-cyrillic.woff2") format("woff2-variations"),
       url("../fonts/mf/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mf/jetbrains-mono-500.woff2") format("woff2");
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --mf-bg:              #F4F5F7;   /* page background */
  --mf-surface:         #FFFFFF;   /* cards, panels, inputs */
  --mf-surface-2:       #F7F8FA;   /* subtle fill: table head, map, inset rows */
  --mf-surface-3:       #F1F2F4;   /* tab track, neutral chips, placeholders */
  --mf-border:          #E5E7EB;   /* card and control borders */
  --mf-border-subtle:   #EEF0F3;   /* dividers inside cards */

  /* text */
  --mf-text:            #111827;   /* headings, numbers, primary text */
  --mf-text-2:          #374151;   /* body text, control labels */
  --mf-text-3:          #4B5563;   /* secondary text, inactive tabs */
  --mf-text-muted:      #5F6673;   /* captions, sub-labels (5.7:1 on white) */
  --mf-icon-muted:      #9AA1AC;   /* decorative icons, never text */

  /* brand */
  --mf-accent:          #0E7A53;   /* primary buttons, active state, selection */
  --mf-accent-hover:    #0B6544;
  --mf-accent-soft:     #E9F5EF;   /* active nav item, selected card fill */
  --mf-accent-text:     #0B6B47;   /* accent-coloured text on light fills */
  --mf-on-accent:       #FFFFFF;

  /* status — each: fill, text, dot. Told apart by lightness too, not hue alone */
  --mf-route-bg:  #E7F6EF;  --mf-route-fg:  #0B6B47;  --mf-route:  #12A06A;   /* on route / OK */
  --mf-idle-bg:   #F1F2F4;  --mf-idle-fg:   #4B5563;  --mf-idle:   #9AA1AC;   /* parked / idle */
  --mf-warn-bg:   #FEF3E2;  --mf-warn-fg:   #92400E;  --mf-warn:   #D97706;   /* attention */
  --mf-danger-bg: #FDECEC;  --mf-danger-fg: #B42318;  --mf-danger: #B42318;   /* problem */
  --mf-svc-bg:    #EEF0FF;  --mf-svc-fg:    #3730A3;  --mf-svc:    #4F46E5;   /* in service */
  --mf-info-bg:   #E8F0FB;  --mf-info-fg:   #1D4E89;  --mf-info:   #1D4E89;   /* money, neutral info */

  /* type */
  --mf-font:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mf-fs-xs:   11.5px;  /* captions, badges */
  --mf-fs-sm:   12px;    /* sub-labels, table head */
  --mf-fs-md:   13px;    /* body in dense UI, buttons, tables */
  --mf-fs-base: 14px;    /* default body */
  --mf-fs-lg:   17px;    /* card titles, panel headings */
  --mf-fs-xl:   20px;    /* KPI values */
  --mf-fs-2xl:  22px;    /* page title */
  --mf-fs-3xl:  28px;    /* hero greeting */

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

  /* radius */
  --mf-radius-sm: 6px;    /* pills, small badges */
  --mf-radius-md: 8px;    /* buttons, inputs, tabs */
  --mf-radius-lg: 10px;   /* list cards, inner tiles */
  --mf-radius-xl: 12px;   /* cards, panels */
  --mf-radius-2xl: 16px;  /* hero, modals */
  --mf-radius-pill: 999px;

  /* elevation */
  --mf-shadow-sm: 0 1px 2px rgba(17, 24, 39, .08);
  --mf-shadow-md: 0 6px 18px rgba(17, 24, 39, .06);
  --mf-shadow-lg: 0 16px 40px rgba(17, 24, 39, .18);
  --mf-focus: 0 0 0 3px rgba(14, 122, 83, .28);

  /* sizes */
  --mf-control-h: 38px;
  --mf-control-h-sm: 32px;
  --mf-rail-w: 76px;
}

/* Dark values — foundation only, not designed yet. */
[data-mf-theme="dark"] {
  --mf-bg: #0F141B;  --mf-surface: #161C24;  --mf-surface-2: #1B222C;  --mf-surface-3: #212A35;
  --mf-border: #2A3441;  --mf-border-subtle: #222B36;
  --mf-text: #F2F4F7;  --mf-text-2: #D0D5DD;  --mf-text-3: #AEB6C2;  --mf-text-muted: #98A2B3;  --mf-icon-muted: #667085;
  --mf-accent: #2FB37E;  --mf-accent-hover: #3CC48D;  --mf-accent-soft: #123327;  --mf-accent-text: #5FD3A2;  --mf-on-accent: #07150F;
}

/* ── Base (only inside .mf-ui) ─────────────────────────────────────────── */
/* Element rules use :where() — zero specificity — so component classes always win. */
.mf-ui {
  font-family: var(--mf-font);
  font-size: var(--mf-fs-base);
  line-height: 1.45;
  color: var(--mf-text);
  background: var(--mf-bg);
  font-feature-settings: "tnum" 1, "cv11" 1;   /* tabular numbers, single-storey a */
  -webkit-font-smoothing: antialiased;
}
:where(.mf-ui) *, :where(.mf-ui) *::before, :where(.mf-ui) *::after { box-sizing: border-box; }
:where(.mf-ui) :where(h1, h2, h3, h4) { margin: 0; color: var(--mf-text); letter-spacing: -0.2px; }
:where(.mf-ui) :where(h1) { font-size: var(--mf-fs-2xl); font-weight: 700; }
:where(.mf-ui) :where(h2) { font-size: var(--mf-fs-base); font-weight: 600; }
:where(.mf-ui) :where(h3) { font-size: var(--mf-fs-md); font-weight: 600; }
:where(.mf-ui) :where(p) { margin: 0; }
:where(.mf-ui) :where(a) { color: var(--mf-accent-text); text-decoration: none; }
:where(.mf-ui) :where(a:hover) { color: var(--mf-accent-hover); text-decoration: underline; }
:where(.mf-ui) :where(:focus-visible) { outline: 2px solid var(--mf-accent); outline-offset: 2px; }
:where(.mf-ui) :where(button) { font: inherit; }

/* utilities */
.mf-num   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mf-mono  { font-family: var(--mf-font-mono); font-size: .95em; letter-spacing: 0; font-feature-settings: "zero" 1; }
.mf-muted { color: var(--mf-text-muted); }
.mf-sub   { font-size: var(--mf-fs-sm); color: var(--mf-text-muted); }
.mf-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mf-row   { display: flex; align-items: center; gap: var(--mf-space-2); }
.mf-stack { display: flex; flex-direction: column; gap: var(--mf-space-3); }
.mf-grow  { flex: 1 1 auto; min-width: 0; }
.mf-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.mf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--mf-control-h); padding: 0 14px;
  border: 1px solid var(--mf-border); border-radius: var(--mf-radius-md);
  background: var(--mf-surface); color: var(--mf-text-2);
  font-family: var(--mf-font); font-size: var(--mf-fs-md); font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.mf-btn:hover { background: var(--mf-surface-2); text-decoration: none; color: var(--mf-text); }
.mf-btn:focus-visible { outline: none; box-shadow: var(--mf-focus); }
.mf-btn:disabled, .mf-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.mf-btn .bi { font-size: 15px; }
.mf-btn--primary { background: var(--mf-accent); border-color: var(--mf-accent); color: var(--mf-on-accent); font-weight: 600; }
.mf-btn--primary:hover { background: var(--mf-accent-hover); border-color: var(--mf-accent-hover); color: var(--mf-on-accent); }
.mf-btn--dark { background: var(--mf-text); border-color: var(--mf-text); color: #fff; font-weight: 600; }
.mf-btn--dark:hover { background: #1F2937; color: #fff; }
.mf-btn--ghost { background: transparent; border-color: transparent; }
.mf-btn--ghost:hover { background: var(--mf-surface-3); }
.mf-btn--danger { color: var(--mf-danger-fg); }
.mf-btn--danger:hover { background: var(--mf-danger-bg); border-color: #F5C2C0; color: var(--mf-danger-fg); }
.mf-btn--sm { height: var(--mf-control-h-sm); padding: 0 12px; }
.mf-btn--icon { width: var(--mf-control-h); padding: 0; position: relative; }
.mf-btn--icon.mf-btn--sm { width: var(--mf-control-h-sm); }
.mf-btn--block { width: 100%; }

/* ── Form controls ─────────────────────────────────────────────────────── */
.mf-field { display: flex; flex-direction: column; gap: 6px; }
.mf-label { font-size: var(--mf-fs-sm); font-weight: 500; color: var(--mf-text-3); }
.mf-input, .mf-select, .mf-textarea {
  width: 100%; height: var(--mf-control-h); padding: 0 12px;
  border: 1px solid var(--mf-border); border-radius: var(--mf-radius-md);
  background: var(--mf-surface); color: var(--mf-text);
  font-family: var(--mf-font); font-size: var(--mf-fs-md);
  transition: border-color .15s, box-shadow .15s;
}
.mf-textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.mf-input::placeholder, .mf-textarea::placeholder { color: var(--mf-text-muted); }
.mf-input:focus, .mf-select:focus, .mf-textarea:focus { outline: none; border-color: var(--mf-accent); box-shadow: var(--mf-focus); }
.mf-input[aria-invalid="true"] { border-color: var(--mf-danger); }
.mf-help  { font-size: var(--mf-fs-sm); color: var(--mf-text-muted); }
.mf-error { font-size: var(--mf-fs-sm); color: var(--mf-danger-fg); }

.mf-search {
  display: flex; align-items: center; gap: 8px;
  height: var(--mf-control-h); padding: 0 12px; width: 280px; max-width: 100%;
  border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); background: var(--mf-surface);
}
.mf-search .bi { color: var(--mf-text-muted); font-size: 15px; }
.mf-search input { flex: 1; min-width: 0; width: 100%; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--mf-fs-md); color: var(--mf-text); }
.mf-search:focus-within { border-color: var(--mf-accent); box-shadow: var(--mf-focus); }

.mf-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--mf-fs-md); color: var(--mf-text-2); cursor: pointer; }
.mf-check input { width: 16px; height: 16px; accent-color: var(--mf-accent); }

/* ── Cards & panels ────────────────────────────────────────────────────── */
.mf-card {
  background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-xl);
  min-width: 0;
}
.mf-card--pad { padding: var(--mf-space-4); }
.mf-card--raised { box-shadow: var(--mf-shadow-md); }
.mf-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mf-space-3);
  padding: 12px var(--mf-space-4); border-bottom: 1px solid var(--mf-border-subtle);
}
.mf-card__title { font-size: var(--mf-fs-base); font-weight: 600; color: var(--mf-text); }
.mf-card__title .mf-muted { font-weight: 500; }
.mf-card__body { padding: var(--mf-space-4); }
.mf-card__body--flush { padding: 0; }
.mf-tile { border: 1px solid var(--mf-border-subtle); border-radius: var(--mf-radius-lg); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.mf-tile__label { font-size: var(--mf-fs-sm); color: var(--mf-text-muted); display: flex; align-items: center; gap: 6px; }
.mf-tile__value { font-size: 18px; font-weight: 700; color: var(--mf-text); }
.mf-tile__value small { font-size: var(--mf-fs-sm); font-weight: 500; color: var(--mf-text-muted); }

/* stat with mini bars (week numbers) */
.mf-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-stat {
  flex: 1 1 180px; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--mf-border-subtle); border-radius: var(--mf-radius-lg); background: var(--mf-surface);
}
.mf-stat__body  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mf-stat__label { font-size: var(--mf-fs-sm); color: var(--mf-text-muted); white-space: nowrap; }
.mf-stat__value { font-size: 17px; font-weight: 700; color: var(--mf-text); white-space: nowrap; }
.mf-stat__sub   { font-size: var(--mf-fs-xs); color: var(--mf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* scrolling column inside a fixed-height layout */
.mf-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mf-panel__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── Icon tile + KPI ───────────────────────────────────────────────────── */
.mf-icon-tile {
  width: 36px; height: 36px; flex: none; border-radius: var(--mf-radius-lg);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--mf-surface-3); color: var(--mf-text-3);
}
.mf-icon-tile--lg { width: 42px; height: 42px; font-size: 20px; border-radius: 11px; }
.mf-icon-tile--route   { background: var(--mf-route-bg);  color: var(--mf-route-fg); }
.mf-icon-tile--idle    { background: var(--mf-idle-bg);   color: var(--mf-idle-fg); }
.mf-icon-tile--warn    { background: var(--mf-warn-bg);   color: #B45309; }
.mf-icon-tile--danger  { background: var(--mf-danger-bg); color: var(--mf-danger-fg); }
.mf-icon-tile--service { background: var(--mf-svc-bg);    color: var(--mf-svc-fg); }
.mf-icon-tile--info    { background: var(--mf-info-bg);   color: var(--mf-info-fg); }

.mf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.mf-kpi {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 12px; background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-xl);
}
.mf-kpi > div { min-width: 0; }
.mf-kpi__value { font-size: var(--mf-fs-xl); font-weight: 700; letter-spacing: -0.3px; color: var(--mf-text); }
.mf-kpi__label { font-size: var(--mf-fs-sm); font-weight: 500; color: var(--mf-text-3); white-space: nowrap; }
.mf-kpi__sub   { font-size: var(--mf-fs-xs); color: var(--mf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-kpi__line  { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }

/* ── Status: pill, dot, badge ──────────────────────────────────────────── */
.mf-pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--mf-radius-sm);
  font-size: 11px; font-weight: 600; line-height: 1.3;
  background: var(--mf-idle-bg); color: var(--mf-idle-fg);
}
.mf-pill--route   { background: var(--mf-route-bg);  color: var(--mf-route-fg); }
.mf-pill--idle    { background: var(--mf-idle-bg);   color: var(--mf-idle-fg); }
.mf-pill--warn    { background: var(--mf-warn-bg);   color: var(--mf-warn-fg); }
.mf-pill--danger  { background: var(--mf-danger-bg); color: var(--mf-danger-fg); }
.mf-pill--service { background: var(--mf-svc-bg);    color: var(--mf-svc-fg); }
.mf-pill--info    { background: var(--mf-info-bg);   color: var(--mf-info-fg); }

.mf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--mf-idle); }
.mf-dot--route { background: var(--mf-route); }  .mf-dot--warn { background: var(--mf-warn); }
.mf-dot--danger { background: var(--mf-danger); } .mf-dot--service { background: var(--mf-svc); }
.mf-dot--idle { background: var(--mf-idle); }

.mf-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: #E5E7EB; color: var(--mf-text-2);
}
.mf-badge--hot { background: var(--mf-danger); color: #fff; }
.mf-btn--icon .mf-badge-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mf-danger); }

.mf-tag-edited { font-size: 11px; color: var(--mf-warn-fg); background: var(--mf-warn-bg); padding: 1px 6px; border-radius: 5px; font-weight: 500; }

/* ── Tabs (segmented) & chips ──────────────────────────────────────────── */
.mf-tabs {
  display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
  background: var(--mf-surface-3); border-radius: var(--mf-radius-lg);
}
.mf-tabs::-webkit-scrollbar { display: none; }
.mf-tabs--fill { display: flex; width: 100%; }
.mf-tabs--fill .mf-tab { flex: 1 0 auto; justify-content: center; padding: 0 8px; }
.mf-tab {
  height: 32px; padding: 0 12px; border: 0; border-radius: var(--mf-radius-md);
  background: transparent; color: var(--mf-text-3);
  font-family: var(--mf-font); font-size: var(--mf-fs-md); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
.mf-tab:hover { color: var(--mf-text); }
.mf-tab[aria-selected="true"], .mf-tab.is-active {
  background: var(--mf-surface); color: var(--mf-text); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 24, 39, .10);
}
.mf-tab .bi { font-size: 14px; }

.mf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-chip {
  height: 28px; padding: 0 10px; border-radius: 14px;
  border: 1px solid var(--mf-border); background: var(--mf-surface); color: var(--mf-text-2);
  font-family: var(--mf-font); font-size: var(--mf-fs-sm); cursor: pointer;
}
.mf-chip:hover { border-color: #D1D5DB; }
.mf-chip[aria-pressed="true"], .mf-chip.is-active { background: var(--mf-text); border-color: var(--mf-text); color: #fff; font-weight: 500; }

/* ── Progress & mini bars ──────────────────────────────────────────────── */
.mf-progress { display: block; height: 5px; border-radius: 3px; background: var(--mf-border-subtle); overflow: hidden; }
.mf-progress > span { display: block; height: 100%; border-radius: 3px; background: var(--mf-accent); }
.mf-progress--route > span { background: var(--mf-route); }
.mf-progress--warn  > span { background: var(--mf-warn); }
.mf-progress--idle  > span { background: var(--mf-idle); }
.mf-progress--lg { height: 6px; }

.mf-bars { display: flex; align-items: flex-end; gap: 3px; height: 32px; }
.mf-bars > span { width: 7px; border-radius: 2px; background: #DDE3EA; }
.mf-bars > span.is-now { background: var(--mf-info); }

/* ── Truck list card ───────────────────────────────────────────────────── */
.mf-truck {
  display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left;
  padding: 12px; border: 1px solid var(--mf-border-subtle); border-radius: var(--mf-radius-lg);
  background: var(--mf-surface); color: var(--mf-text); font-family: var(--mf-font); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.mf-truck:hover { border-color: #D1D5DB; }
.mf-truck[aria-current="true"], .mf-truck.is-selected {
  background: #F3FAF6; border-color: var(--mf-accent); box-shadow: 0 0 0 3px rgba(14, 122, 83, .10);
}
.mf-truck__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mf-truck__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mf-truck__num { font-weight: 700; font-size: var(--mf-fs-base); }
.mf-truck__model { font-size: var(--mf-fs-sm); color: var(--mf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-truck__route { display: flex; justify-content: space-between; gap: 8px; font-size: var(--mf-fs-md); font-weight: 500; }
.mf-truck__meta { display: flex; justify-content: space-between; gap: 8px; font-size: var(--mf-fs-sm); color: var(--mf-text-muted); }

.mf-thumb { width: 56px; height: 42px; flex: none; border-radius: var(--mf-radius-md); object-fit: cover; background: var(--mf-surface-3); }
.mf-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--mf-text-muted); font-size: 20px; }
.mf-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: #DCE7F3; color: #1E3A5F; font-size: 12px; font-weight: 700;
}
.mf-avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* ── Table ─────────────────────────────────────────────────────────────── */
.mf-table-wrap { overflow-x: auto; }
.mf-table { width: 100%; border-collapse: collapse; font-size: var(--mf-fs-md); }
.mf-table th {
  text-align: left; font-weight: 500; font-size: var(--mf-fs-sm); color: var(--mf-text-muted);
  background: var(--mf-surface-2); padding: 10px 12px; white-space: nowrap;
}
.mf-table td { padding: 11px 12px; border-top: 1px solid var(--mf-border-subtle); color: var(--mf-text-2); vertical-align: middle; white-space: nowrap; }
.mf-table .is-wrap { white-space: normal; min-width: 200px; }
.mf-table th:first-child, .mf-table td:first-child { padding-left: var(--mf-space-4); }
.mf-table th:last-child,  .mf-table td:last-child  { padding-right: var(--mf-space-4); }
.mf-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-table .is-strong { font-weight: 600; color: var(--mf-text); }
.mf-table tbody tr:hover td { background: #FAFBFC; }
.mf-table--clickable tbody tr { cursor: pointer; }

/* ── List rows (alerts, requests) ──────────────────────────────────────── */
.mf-list-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 4px;
  border-bottom: 1px solid var(--mf-border-subtle); color: var(--mf-text);
}
.mf-list-row:last-child { border-bottom: 0; }
a.mf-list-row { color: var(--mf-text); }
a.mf-list-row:hover { text-decoration: none; background: var(--mf-surface-2); }
.mf-list-row__title { font-size: var(--mf-fs-md); font-weight: 600; }
.mf-list-row__sub { font-size: var(--mf-fs-sm); color: var(--mf-text-muted); }
.mf-list-row__chev { color: var(--mf-icon-muted); }

.mf-change { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--mf-border-subtle); border-radius: var(--mf-radius-lg); background: #FAFBFC; }
.mf-change__old { color: var(--mf-text-muted); text-decoration: line-through; }
.mf-change__new { font-weight: 600; color: var(--mf-text); }

/* ── Toast & modal ─────────────────────────────────────────────────────── */
.mf-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 1080;
  width: 360px; max-width: calc(100% - 40px); display: flex; gap: 12px;
  padding: 14px; background: var(--mf-surface); border: 1px solid var(--mf-border);
  border-radius: 14px; box-shadow: var(--mf-shadow-lg); font-family: var(--mf-font);
  animation: mf-toast-in .22s ease-out;
}
.mf-toast__kicker { font-size: var(--mf-fs-sm); font-weight: 600; color: #B45309; }
.mf-toast__title  { font-size: var(--mf-fs-base); font-weight: 600; color: var(--mf-text); }
.mf-toast__text   { font-size: 12.5px; color: var(--mf-text-3); }
.mf-toast__actions { display: flex; gap: 8px; margin-top: 8px; }
@keyframes mf-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.mf-modal-backdrop {
  position: fixed; inset: 0; z-index: 1070; background: rgba(17, 24, 39, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mf-modal {
  width: 420px; max-width: 100%; max-height: calc(100vh - 40px); overflow: auto;
  background: var(--mf-surface); border-radius: var(--mf-radius-2xl); box-shadow: var(--mf-shadow-lg);
  font-family: var(--mf-font); color: var(--mf-text);
}
.mf-modal__header { padding: 18px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mf-modal__title  { font-size: var(--mf-fs-lg); font-weight: 700; }
.mf-modal__body   { padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.mf-modal__footer { padding: 0 20px 18px; display: flex; justify-content: flex-end; gap: 8px; }

/* ── App layout: icon rail + one-screen workspace ──────────────────────── */
.mf-app { position: relative; display: flex; height: 100vh; min-height: 640px; overflow: hidden; background: var(--mf-bg); }
.mf-rail {
  flex: 0 0 var(--mf-rail-w); background: var(--mf-surface); border-right: 1px solid var(--mf-border);
  padding: 14px 6px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.mf-rail__logo { width: 38px; height: 38px; margin: 0 auto 10px; border-radius: var(--mf-radius-lg); background: var(--mf-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.mf-rail__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px; border-radius: var(--mf-radius-lg); color: var(--mf-text-3); font-size: 10.5px; text-align: center;
}
.mf-rail__item .bi { font-size: 20px; }
.mf-rail__item:hover { background: var(--mf-surface-2); color: var(--mf-text); text-decoration: none; }
.mf-rail__item[aria-current="page"] { background: var(--mf-accent-soft); color: var(--mf-accent-text); font-weight: 600; }
.mf-rail__item .mf-badge { position: absolute; top: 4px; right: 10px; height: 16px; min-width: 16px; font-size: 10px; }
.mf-rail__foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--mf-border); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--mf-text-3); }

.mf-main { flex: 1 1 300px; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.mf-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mf-workspace { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.mf-workspace > .mf-col-side   { flex: 0 1 300px; min-width: 260px; max-height: 100%; }
.mf-workspace > .mf-col-center { flex: 1 1 440px; min-width: 0;     max-height: 100%; }
.mf-workspace > .mf-col-detail { flex: 0 1 360px; min-width: 300px; max-height: 100%; }

@media (max-width: 760px) {
  .mf-app { height: auto; min-height: 100vh; overflow: visible; }
  .mf-rail { flex-basis: 64px; }
  .mf-main { padding: 12px 10px; }
  .mf-topbar > * { width: 100%; }
  .mf-topbar > * { flex-wrap: wrap; }
  .mf-topbar .mf-search { flex: 1 1 160px; width: auto; }
  .mf-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .mf-toast { right: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .mf-workspace > [class*="mf-col-"] { flex: 1 1 100%; min-width: 0; max-height: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mf-ui *, .mf-toast { animation: none !important; transition: none !important; }
}