/* ==========================================================================
   MFS SHARED UI KIT  ·  v1
   --------------------------------------------------------------------------
   One visual language for forms, inputs and buttons in every module
   (MM1, MM2, MM4 and the React workspace).

   How it works
   ------------
   Every module already defines the same design tokens (--line, --surface,
   --ink, --muted, --steel, --paper, ...) including its own dark-mode values.
   This file only *normalises* the control shapes and interaction states and
   reads the module's tokens, so it looks native everywhere and follows each
   module's dark mode automatically.

   Rules of engagement
   -------------------
   * Core geometry and states are !important so they win over the ~19
     hand-written stylesheets without editing every module.
   * Layout properties (width, margin, position) are deliberately NOT
     overridden, so existing grids and toolbars keep their structure.
   * Load this file LAST (after the module's own <style> blocks).
   * Escape hatch: add class="mfs-raw" to any control that must keep its
     original look.
   * Per-context sizing: set --mfs-control-h on a container (see LOGIN below).

   Contents
   -------
   1. Tokens            5. Buttons
   2. Base controls     6. Field / label / help / error
   3. Focus & states    7. Form layout utilities
   4. Select chevron    8. Responsive, touch, motion, print
   ========================================================================== */

/* ---------------------------------------------------------------- 1.TOKENS */
:root {
  /* geometry */
  --mfs-control-h: 40px;
  --mfs-control-h-sm: 32px;
  --mfs-radius: 8px;
  --mfs-radius-sm: 7px;
  --mfs-fs: 14px;
  --mfs-fs-sm: 12.5px;
  --mfs-gap: 10px;
  --mfs-textarea-min: 92px;

  /* colour — resolved from the host module, with safe fallbacks */
  --mfs-border: var(--line, #d8dee4);
  --mfs-surface: var(--surface, #ffffff);
  --mfs-ink: var(--ink, #17212c);
  --mfs-muted: var(--muted, #5e6b78);
  --mfs-faint: var(--faint, #8a96a3);
  --mfs-paper: var(--paper, #f2f4f6);
  --mfs-accent: var(--steel, #23507a);
  --mfs-accent-hi: var(--steel-d, #1a3d5e);
  --mfs-accent-ink: var(--on-steel, #ffffff);
  --mfs-accent-soft: var(--steel-l, #e6eef5);
  --mfs-danger: var(--red, #b42318);
  --mfs-danger-soft: var(--red-l, #fdecea);

  /* interaction chrome */
  --mfs-hover: #f4f7fa;
  --mfs-ring: 0 0 0 3px rgba(35, 80, 122, 0.20);
  --mfs-ring-danger: 0 0 0 3px rgba(180, 35, 24, 0.16);
  --mfs-shadow: 0 1px 2px rgba(15, 30, 45, 0.06);
  --mfs-shadow-hi: 0 2px 6px rgba(15, 30, 45, 0.10);

  /* opt-out switch used by :not(.mfs-raw) below */
  color-scheme: light dark;
}

/* dark surfaces need a lighter ring and deeper shadow */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mfs-hover: #1e2e3d;
    --mfs-ring: 0 0 0 3px rgba(111, 163, 214, 0.28);
    --mfs-ring-danger: 0 0 0 3px rgba(240, 122, 108, 0.26);
    --mfs-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --mfs-shadow-hi: 0 2px 8px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --mfs-hover: #1e2e3d;
  --mfs-ring: 0 0 0 3px rgba(111, 163, 214, 0.28);
  --mfs-ring-danger: 0 0 0 3px rgba(240, 122, 108, 0.26);
  --mfs-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --mfs-shadow-hi: 0 2px 8px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] {
  --mfs-hover: #f4f7fa;
  --mfs-ring: 0 0 0 3px rgba(35, 80, 122, 0.20);
  --mfs-shadow: 0 1px 2px rgba(15, 30, 45, 0.06);
}

/* Sign-in screens read better with taller, calmer controls. Setting the
   variable on the container re-sizes every child control at once.
   `:is()` (not `:where()`) is required so it outranks the `:root` defaults. */
:is(#login, .login-form, .mm2-login-shell, .mm2-login-card, .mm2-login-form, .as-login, .pss-login) {
  --mfs-control-h: 46px;
  --mfs-fs: 15px;
}

/* -------------------------------------------------------- 2.BASE CONTROLS */
/* Text-like inputs, selects and the legacy `.i` class all share one shape. */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  select,
  textarea,
  .i
):not(.mfs-raw) {
  box-sizing: border-box !important;
  width: 100%;
  max-width: 100%;
  height: var(--mfs-control-h) !important;
  min-height: var(--mfs-control-h) !important;
  padding: 0 11px !important;
  border: 1px solid var(--mfs-border) !important;
  border-radius: var(--mfs-radius) !important;
  background-color: var(--mfs-surface) !important;
  color: var(--mfs-ink) !important;
  font-family: inherit !important;
  font-size: var(--mfs-fs) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

/* Multi-line fields grow instead of being clipped by a fixed height. */
:where(textarea, textarea.i):not(.mfs-raw) {
  height: auto !important;
  min-height: var(--mfs-textarea-min) !important;
  padding: 9px 11px !important;
  line-height: 1.5 !important;
  resize: vertical;
  overflow: auto;
}

/* Checkboxes / radios: keep native behaviour, align with the accent colour. */
:where(input[type="checkbox"], input[type="radio"]):not(.mfs-raw) {
  accent-color: var(--mfs-accent);
  cursor: pointer;
}

/* ------------------------------------------------------ 3.FOCUS & STATES */
:where(input, select, textarea, .i):not(.mfs-raw):focus,
:where(input, select, textarea, .i):not(.mfs-raw):focus-visible {
  outline: none !important;
  border-color: var(--mfs-accent) !important;
  background-color: var(--mfs-surface) !important;
  box-shadow: var(--mfs-ring) !important;
}

:where(input, select, textarea, .i):not(.mfs-raw):disabled {
  background-color: var(--mfs-paper) !important;
  color: var(--mfs-muted) !important;
  border-color: var(--mfs-border) !important;
  cursor: not-allowed !important;
  opacity: .85;
  box-shadow: none !important;
}

:where(input, textarea, .i):not(.mfs-raw)[readonly] {
  background-color: var(--mfs-paper) !important;
  color: var(--mfs-ink) !important;
}

/* Invalid state — set aria-invalid="true" or class="is-invalid" */
:where(input, select, textarea, .i):not(.mfs-raw)[aria-invalid="true"],
:where(input, select, textarea, .i):not(.mfs-raw).is-invalid {
  border-color: var(--mfs-danger) !important;
  box-shadow: var(--mfs-ring-danger) !important;
}

:where(input, textarea):not(.mfs-raw)::placeholder {
  color: var(--mfs-faint) !important;
  opacity: 1;
}

/* ----------------------------------------------------- 4.SELECT CHEVRON */
/* One consistent arrow everywhere, instead of each OS deciding. */
:where(select):not([multiple]):not([size]):not(.mfs-raw) {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7B8A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 14px 14px !important;
  cursor: pointer;
}
:where(select)[multiple], :where(select)[size] {
  height: auto !important;
  padding: 6px 8px !important;
}
:where(select):not(.mfs-raw):disabled {
  cursor: not-allowed !important;
}

/* ------------------------------------------------------------ 5.BUTTONS */
/* One button colour system for every module and the React screens.
   Colours are fixed tokens (not per-module accents) so a button looks the same
   in MM1, MM2, MM4 and the workspace, and only the surrounding layout varies.

   Roles:
     default / secondary  soft slate fill, dark ink    (Cancel, Export, filters)
     primary              solid steel blue             (Save, Add, Sign in)
     danger               soft red that fills on hover  (Delete, Remove) */

:root {
  --mfs-btn-bg: #e7eef5;
  --mfs-btn-border: #c3d4e2;
  --mfs-btn-fg: #1b3a52;
  --mfs-btn-hover-bg: #dae7f1;
  --mfs-btn-hover-border: #8fb4ce;

  --mfs-btn-primary-bg: #1d5a8c;
  --mfs-btn-primary-border: #1a517f;
  --mfs-btn-primary-fg: #ffffff;
  --mfs-btn-primary-hover: #164a76;

  --mfs-btn-danger-bg: #fdecea;
  --mfs-btn-danger-border: #e8b4ae;
  --mfs-btn-danger-fg: #a9291f;
  --mfs-btn-danger-hover-bg: #a9291f;
  --mfs-btn-danger-hover-fg: #ffffff;

  --mfs-btn-disabled-bg: #eef2f5;
  --mfs-btn-disabled-fg: #93a2ae;

  --mfs-btn-shadow: 0 1px 2px rgba(16, 36, 54, .10), inset 0 1px 0 rgba(255, 255, 255, .65);
  --mfs-btn-shadow-hi: 0 3px 8px rgba(16, 36, 54, .16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mfs-btn-bg: #1e2e3d;
    --mfs-btn-border: #33495c;
    --mfs-btn-fg: #dce7f0;
    --mfs-btn-hover-bg: #26394b;
    --mfs-btn-hover-border: #4c6b85;

    --mfs-btn-primary-bg: #4f8fc0;
    --mfs-btn-primary-border: #4f8fc0;
    --mfs-btn-primary-fg: #0b1016;
    --mfs-btn-primary-hover: #6ca4cf;

    --mfs-btn-danger-bg: #3a1a16;
    --mfs-btn-danger-border: #6b2a22;
    --mfs-btn-danger-fg: #f08b7f;
    --mfs-btn-danger-hover-bg: #b4231a;
    --mfs-btn-danger-hover-fg: #ffffff;

    --mfs-btn-disabled-bg: #1a2531;
    --mfs-btn-disabled-fg: #6b7c8a;

    --mfs-btn-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    --mfs-btn-shadow-hi: 0 3px 10px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --mfs-btn-bg: #1e2e3d;
  --mfs-btn-border: #33495c;
  --mfs-btn-fg: #dce7f0;
  --mfs-btn-hover-bg: #26394b;
  --mfs-btn-hover-border: #4c6b85;

  --mfs-btn-primary-bg: #4f8fc0;
  --mfs-btn-primary-border: #4f8fc0;
  --mfs-btn-primary-fg: #0b1016;
  --mfs-btn-primary-hover: #6ca4cf;

  --mfs-btn-danger-bg: #3a1a16;
  --mfs-btn-danger-border: #6b2a22;
  --mfs-btn-danger-fg: #f08b7f;
  --mfs-btn-danger-hover-bg: #b4231a;
  --mfs-btn-danger-hover-fg: #ffffff;

  --mfs-btn-disabled-bg: #1a2531;
  --mfs-btn-disabled-fg: #6b7c8a;

  --mfs-btn-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  --mfs-btn-shadow-hi: 0 3px 10px rgba(0, 0, 0, .55);
}

/* Covers the legacy `.btn` family and the React classes used by the native
   MM2/MM4 screens (.mm2-button, .as-file-button, .primary-button). */
:where(.btn, .mm2-button, .as-file-button, .primary-button, button.mfs-btn, input[type="submit"], input[type="button"]):not(.mfs-raw) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  box-sizing: border-box !important;
  min-height: var(--mfs-control-h) !important;
  height: var(--mfs-control-h) !important;
  padding: 0 14px !important;
  border: 1px solid var(--mfs-btn-border) !important;
  border-radius: var(--mfs-radius) !important;
  background-color: var(--mfs-btn-bg) !important;
  background-image: none !important;
  color: var(--mfs-btn-fg) !important;
  font-family: inherit !important;
  font-size: var(--mfs-fs-sm) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: var(--mfs-btn-shadow);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .06s ease;
}

:where(.btn, .mm2-button, .as-file-button, .primary-button, button.mfs-btn, input[type="submit"]):not(.mfs-raw):hover:not(:disabled) {
  background-color: var(--mfs-btn-hover-bg) !important;
  border-color: var(--mfs-btn-hover-border) !important;
  color: var(--mfs-btn-fg) !important;
  box-shadow: var(--mfs-btn-shadow-hi);
}

:where(.btn, .mm2-button, .as-file-button, .primary-button, button.mfs-btn, input[type="submit"]):not(.mfs-raw):active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

:where(.btn, .mm2-button, .as-file-button, .primary-button, button.mfs-btn, input[type="submit"]):not(.mfs-raw):focus-visible {
  outline: none !important;
  border-color: var(--mfs-btn-primary-bg) !important;
  box-shadow: var(--mfs-ring) !important;
}

:where(.btn, .mm2-button, .as-file-button, .primary-button, button.mfs-btn, input[type="submit"]):not(.mfs-raw):disabled,
:where(.btn, .mm2-button):not(.mfs-raw)[aria-disabled="true"] {
  background-color: var(--mfs-btn-disabled-bg) !important;
  border-color: var(--mfs-btn-border) !important;
  color: var(--mfs-btn-disabled-fg) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .75;
  transform: none;
}

/* --- primary ------------------------------------------------------------ */
:where(.btn.pri, .btn.primary, .primary-button, .mm2-button.primary, button.mfs-btn--primary):not(.mfs-raw) {
  background-color: var(--mfs-btn-primary-bg) !important;
  border-color: var(--mfs-btn-primary-border) !important;
  color: var(--mfs-btn-primary-fg) !important;
  box-shadow: var(--mfs-btn-shadow-hi);
}
:where(.btn.pri, .btn.primary, .primary-button, .mm2-button.primary, button.mfs-btn--primary):not(.mfs-raw):hover:not(:disabled) {
  background-color: var(--mfs-btn-primary-hover) !important;
  border-color: var(--mfs-btn-primary-hover) !important;
  color: var(--mfs-btn-primary-fg) !important;
}
:where(.btn.pri, .btn.primary, .primary-button, .mm2-button.primary):not(.mfs-raw):focus-visible {
  box-shadow: var(--mfs-ring) !important;
}
:where(.btn.pri, .btn.primary, .primary-button, .mm2-button.primary):not(.mfs-raw):disabled {
  background-color: var(--mfs-btn-primary-bg) !important;
  border-color: var(--mfs-btn-primary-border) !important;
  color: var(--mfs-btn-primary-fg) !important;
  opacity: .55;
}

/* --- destructive -------------------------------------------------------- */
:where(.btn.danger, .btn.destructive, .mm2-button.danger, .mm2-button.destructive, button.mfs-btn--danger):not(.mfs-raw) {
  background-color: var(--mfs-btn-danger-bg) !important;
  border-color: var(--mfs-btn-danger-border) !important;
  color: var(--mfs-btn-danger-fg) !important;
}
:where(.btn.danger, .btn.destructive, .mm2-button.danger, .mm2-button.destructive):not(.mfs-raw):hover:not(:disabled) {
  background-color: var(--mfs-btn-danger-hover-bg) !important;
  border-color: var(--mfs-btn-danger-hover-bg) !important;
  color: var(--mfs-btn-danger-hover-fg) !important;
  box-shadow: var(--mfs-btn-shadow-hi);
}

/* --- small / compact ---------------------------------------------------- */
:where(.btn.sm, .btn.small, .mm2-button.sm, .mm2-button.small, button.mfs-btn--sm):not(.mfs-raw) {
  min-height: var(--mfs-control-h-sm) !important;
  height: var(--mfs-control-h-sm) !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  gap: 5px;
}

/* --- icon-only ---------------------------------------------------------- */
:where(.btn.icon, .btn.icon-only, .mfs-icon-btn) {
  padding-inline: 0 !important;
  width: var(--mfs-control-h) !important;
}

/* --- segmented group ---------------------------------------------------- */
.mfs-btn-group {
  display: inline-flex;
  gap: 0;
  border-radius: var(--mfs-radius);
  overflow: hidden;
}
.mfs-btn-group > .btn {
  border-radius: 0 !important;
  margin-left: -1px;
}
.mfs-btn-group > .btn:first-child { border-radius: var(--mfs-radius) 0 0 var(--mfs-radius) !important; margin-left: 0; }
.mfs-btn-group > .btn:last-child  { border-radius: 0 var(--mfs-radius) var(--mfs-radius) 0 !important; }

/* ------------------------------------------- 6.FIELD / LABEL / HELP / ERR */
/* `.f` is the label wrapper used by every legacy module. */
:where(.f, .mfs-field) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--mfs-muted);
}
:where(.f, .mfs-field) > :where(input, select, textarea, .i) {
  font-weight: 400;
}
:where(.f, .mfs-field):focus-within {
  color: var(--mfs-accent);
}

/* Required marker: <label class="f mfs-required">.
   The label's caption is a bare text node in every module, so the marker is
   pinned to the field's top-right corner instead of becoming a flex row. */
:where(.f, .mfs-field).mfs-required {
  position: relative;
}
.mfs-required::after {
  content: "*";
  position: absolute;
  top: -1px;
  right: 0;
  color: var(--mfs-danger);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* Helper + error copy under a control */
:where(.hint, .mfs-hint) {
  font-size: 12px;
  font-weight: 400;
  color: var(--mfs-muted);
  line-height: 1.45;
}
:where(.err, .mfs-error) {
  font-size: 12px;
  font-weight: 500;
  color: var(--mfs-danger);
  line-height: 1.45;
}
.mfs-hint { margin: 0; }
.mfs-error { margin: 0; }

/* ----------------------------------------------- 7.FORM LAYOUT UTILITIES */
/* Auto-fit grid: 2 columns on desktop, 1 on narrow screens. */
.mfs-form {
  display: grid;
  gap: 14px 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}
.mfs-form > .mfs-span-2 { grid-column: 1 / -1; }
.mfs-form > .mfs-field-full { grid-column: 1 / -1; }

/* Action row: right-aligned on wide screens, full-width buttons on phones. */
.mfs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mfs-gap);
  align-items: center;
  justify-content: flex-end;
}
.mfs-actions .mfs-spacer { margin-left: auto; }

/* Inline search / filter bar */
.mfs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mfs-gap);
  align-items: flex-end;
}

/* ------------------------------------- 8.RESPONSIVE / TOUCH / MOTION */
/* Touch devices get 44px hit targets (WCAG 2.5.5 friendly). */
@media (pointer: coarse) {
  :root { --mfs-control-h: 44px; --mfs-control-h-sm: 38px; }
  :where(.btn):not(.mfs-raw) { min-height: 44px !important; }
  :where(.btn.sm):not(.mfs-raw) { min-height: 38px !important; }
}

@media (max-width: 560px) {
  .mfs-form { grid-template-columns: 1fr; gap: 12px; }
  .mfs-actions { justify-content: stretch; }
  .mfs-actions > .btn { flex: 1 1 auto; }
}

/* The CPA nav entry is an <a>, not a <button>; without this it renders ~20px
   tall next to 38px sibling chips at every width. */
#app > aside nav > a {
  display: flex;
  align-items: center;
  min-height: 38px;
}
/* ------------------------------------------- 9.MODULE SHELL (ALL MODULES) */
/* Every legacy module uses the same shell: <div id="app"><aside/><main/></div>
   with #app as a grid. Its phone breakpoint switched to `1fr`, which means
   minmax(auto, 1fr) — `auto` refuses to shrink below the sidebar's min-content
   (all nav labels laid out in a row), so the whole page grew ~2500px wide.
   minmax(0, 1fr) plus min-width:0 lets the shell fit the screen and makes the
   nav itself the horizontal scroller. */
@media (max-width: 860px) {
  #app { grid-template-columns: minmax(0, 1fr) !important; }
  #app > aside { min-width: 0 !important; max-width: 100% !important; }
  #app > main  { min-width: 0 !important; max-width: 100% !important; }
  #app > aside nav {
    min-width: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* Chips keep their natural width and scroll; shrinking them to fit
     would crush the labels on top of each other. */
  #app > aside nav > * { flex: 0 0 auto; min-width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  :where(input, select, textarea, .btn, button.mfs-btn) {
    transition: none !important;
  }
  :where(.btn):not(.mfs-raw):active:not(:disabled) { transform: none; }
}

@media (forced-colors: active) {
  :where(input, select, textarea, .btn, button.mfs-btn):not(.mfs-raw) {
    border: 1px solid ButtonBorder !important;
  }
  :where(input, select, textarea):not(.mfs-raw):focus,
  :where(.btn):not(.mfs-raw):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}
/* ------------------------------------------------ 10.TABLE PAGINATION */
/* One bar under every table in every module. Reads the module's own tokens so
   it inherits that module's palette and dark mode.

   Geometry is !important on purpose: modules ship broad selectors such as
   `nav{...}` / `button{...}` that would otherwise restyle the injected bar.
   The host element is a <div role="navigation"> for the same reason. */
.mfs-pager {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 16px !important;
  margin: 0 !important;
  padding: 12px 2px 2px !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--mfs-muted) !important;
  text-align: left !important;
}
.mfs-pager__summary {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mfs-pager__controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mfs-pager__size {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--mfs-muted) !important;
  white-space: nowrap;
}
.mfs-pager__size select {
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 26px 0 8px !important;
  font-size: 13px !important;
}
.mfs-pager__pages {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mfs-pager__pages button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid var(--mfs-border) !important;
  border-radius: 7px !important;
  background: var(--mfs-surface) !important;
  color: var(--mfs-ink) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.mfs-pager__pages button:hover:not(:disabled):not([aria-current="page"]) {
  border-color: var(--mfs-accent) !important;
  background: var(--mfs-hover) !important;
}
.mfs-pager__pages button:focus-visible {
  outline: 2px solid var(--mfs-accent) !important;
  outline-offset: 2px;
}
.mfs-pager__pages button[aria-current="page"] {
  background: var(--mfs-accent) !important;
  border-color: var(--mfs-accent) !important;
  color: var(--mfs-accent-ink) !important;
  font-weight: 700 !important;
  cursor: default !important;
}
.mfs-pager__pages button:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}
.mfs-pager__gap {
  padding: 0 2px !important;
  color: var(--mfs-faint) !important;
}
.mfs-pager__status {
  display: none;
  font-size: 12.5px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .mfs-pager {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .mfs-pager__controls {
    justify-content: space-between !important;
    gap: 8px !important;
  }
  /* Phones get prev/next plus a page indicator, not a row of numbers. */
  .mfs-pager__pages button[data-action="first"],
  .mfs-pager__pages button[data-action="last"],
  .mfs-pager__pages button[data-action="page"] {
    display: none !important;
  }
  .mfs-pager__pages button[data-action] {
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .mfs-pager__status {
    display: inline !important;
  }
}

/* ---------------------------------------------- 11.LOADING PROGRESS BAR */
/* Thin bar pinned to the top of every document (workspace and each module).
   Colours come from the host module's tokens, so it matches each theme. */
.mfs-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.mfs-progress.is-visible {
  opacity: 1;
}
.mfs-progress > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, var(--mfs-accent, #23507a), #6fa3d6);
  box-shadow: 0 0 10px rgba(111, 163, 214, .7);
  transition: width .18s ease;
}
.mfs-progress.is-error > i {
  background: var(--mfs-danger, #b42318);
  box-shadow: 0 0 10px rgba(180, 35, 24, .6);
}
@media (prefers-reduced-motion: reduce) {
  .mfs-progress,
  .mfs-progress > i {
    transition: none;
  }
}

/* ------------------------------------------------------------------ 12.DESIGN SYSTEM
   Extends the kit with a complete token layer and the component set the
   modules and the workspace shell both consume. Everything here is additive:
   earlier sections keep working, these rules only add new options.

   Naming: --mfs-*  tokens, .mfs-*  components.
   Brand values are the ones already in use (navy #132230, steel #1D5A8C). */

:root {
  /* --- brand ------------------------------------------------------------ */
  --mfs-brand-navy: #132230;
  --mfs-brand-steel: #1d5a8c;
  --mfs-brand-steel-hi: #164a76;
  --mfs-accent: var(--mfs-brand-steel);

  /* --- surfaces --------------------------------------------------------- */
  --mfs-bg: #f4f7fa;
  --mfs-surface: #ffffff;
  --mfs-surface-2: #eef3f8;
  --mfs-surface-3: #e3ebf3;

  /* --- text ------------------------------------------------------------- */
  --mfs-ink: #16232e;
  --mfs-ink-2: #3d4f5f;
  --mfs-muted: #5b6b79;
  --mfs-faint: #8695a1;
  --mfs-on-accent: #ffffff;

  /* --- lines ------------------------------------------------------------ */
  --mfs-border: #d3dfe9;
  --mfs-border-strong: #b8c9d8;
  --mfs-divider: #e6edf3;

  /* --- states ----------------------------------------------------------- */
  --mfs-success: #0f7b4f;
  --mfs-success-soft: #e6f4ed;
  --mfs-success-border: #b6ddc9;
  --mfs-warning: #9c5a09;
  --mfs-warning-soft: #fdf3e3;
  --mfs-warning-border: #eccf9e;
  --mfs-danger: #b42318;
  --mfs-danger-soft: #fdecea;
  --mfs-danger-border: #f0bdb7;
  --mfs-info: #1d5a8c;
  --mfs-info-soft: #e8f0f8;
  --mfs-info-border: #b6cee3;

  /* --- interaction ------------------------------------------------------ */
  --mfs-hover: #eef3f8;
  --mfs-active: #e2eaf2;
  --mfs-selected: #e3eef8;
  --mfs-focus: #1d5a8c;
  --mfs-ring: 0 0 0 3px rgba(29, 90, 140, .28);
  --mfs-disabled-bg: #eef2f5;
  --mfs-disabled-fg: #93a2ae;

  /* --- spacing scale (4px base) ----------------------------------------- */
  --mfs-s1: 4px;
  --mfs-s2: 8px;
  --mfs-s3: 12px;
  --mfs-s4: 16px;
  --mfs-s5: 20px;
  --mfs-s6: 24px;
  --mfs-s7: 32px;
  --mfs-s8: 40px;
  --mfs-s9: 48px;
  --mfs-s10: 64px;

  /* --- radius ----------------------------------------------------------- */
  --mfs-r-sm: 6px;
  --mfs-r: 10px;
  --mfs-r-lg: 14px;
  --mfs-r-pill: 999px;

  /* --- elevation -------------------------------------------------------- */
  --mfs-shadow-sm: 0 1px 2px rgba(16, 36, 54, .08);
  --mfs-shadow: 0 1px 3px rgba(16, 36, 54, .10), 0 1px 2px rgba(16, 36, 54, .06);
  --mfs-shadow-md: 0 4px 12px rgba(16, 36, 54, .12);
  --mfs-shadow-lg: 0 12px 32px rgba(16, 36, 54, .18);
  --mfs-shadow-xl: 0 24px 60px rgba(16, 36, 54, .24);

  /* --- type ------------------------------------------------------------- */
  --mfs-font: "DM Sans", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mfs-mono: "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
  --mfs-fs-xs: 11.5px;
  --mfs-fs-sm: 12.5px;
  --mfs-fs-base: 13.5px;
  --mfs-fs-md: 14.5px;
  --mfs-fs-lg: 16px;
  --mfs-fs-xl: 18px;
  --mfs-fs-2xl: 21px;
  --mfs-fs-3xl: 26px;
  --mfs-fs-4xl: 32px;
  --mfs-lh-tight: 1.2;
  --mfs-lh: 1.45;
  --mfs-lh-loose: 1.65;
  --mfs-ls-tight: -.01em;
  --mfs-ls-wide: .06em;

  /* --- controls --------------------------------------------------------- */
  --mfs-control-h-xs: 26px;
  --mfs-control-h-sm: 30px;
  --mfs-control-h: 36px;
  --mfs-control-h-lg: 44px;
  --mfs-control-h-xl: 52px;

  /* --- motion ----------------------------------------------------------- */
  --mfs-t-fast: 120ms;
  --mfs-t: 180ms;
  --mfs-t-slow: 260ms;
  --mfs-ease: cubic-bezier(.2, .7, .3, 1);

  /* --- layers ----------------------------------------------------------- */
  --mfs-z-sticky: 900;
  --mfs-z-dropdown: 1000;
  --mfs-z-overlay: 1100;
  --mfs-z-modal: 1200;
  --mfs-z-toast: 1300;

  /* --- layout ----------------------------------------------------------- */
  --mfs-container: 1280px;
  --mfs-container-wide: 1520px;
  --mfs-page-pad: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mfs-bg: #0e161d;
    --mfs-surface: #16212b;
    --mfs-surface-2: #1b2833;
    --mfs-surface-3: #223140;
    --mfs-ink: #e8f0f6;
    --mfs-ink-2: #c3d2dd;
    --mfs-muted: #93a5b3;
    --mfs-faint: #6f8494;
    --mfs-border: #2a3a47;
    --mfs-border-strong: #3a4d5d;
    --mfs-divider: #22313d;
    --mfs-success: #4cc38a;
    --mfs-success-soft: #12291f;
    --mfs-success-border: #24503c;
    --mfs-warning: #e0a458;
    --mfs-warning-soft: #2c2113;
    --mfs-warning-border: #4d3a1c;
    --mfs-danger: #f08b7f;
    --mfs-danger-soft: #2e1714;
    --mfs-danger-border: #5b2b24;
    --mfs-info: #6aa9dd;
    --mfs-info-soft: #14232f;
    --mfs-info-border: #26445c;
    --mfs-hover: #1e2c38;
    --mfs-active: #243441;
    --mfs-selected: #1d3245;
    --mfs-ring: 0 0 0 3px rgba(106, 169, 221, .35);
    --mfs-disabled-bg: #1a242e;
    --mfs-disabled-fg: #6b7c8a;
    --mfs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --mfs-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    --mfs-shadow-md: 0 4px 14px rgba(0, 0, 0, .6);
    --mfs-shadow-lg: 0 14px 36px rgba(0, 0, 0, .65);
    --mfs-shadow-xl: 0 26px 64px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  --mfs-bg: #0e161d;
  --mfs-surface: #16212b;
  --mfs-surface-2: #1b2833;
  --mfs-surface-3: #223140;
  --mfs-ink: #e8f0f6;
  --mfs-ink-2: #c3d2dd;
  --mfs-muted: #93a5b3;
  --mfs-faint: #6f8494;
  --mfs-border: #2a3a47;
  --mfs-border-strong: #3a4d5d;
  --mfs-divider: #22313d;
  --mfs-success: #4cc38a;
  --mfs-success-soft: #12291f;
  --mfs-success-border: #24503c;
  --mfs-warning: #e0a458;
  --mfs-warning-soft: #2c2113;
  --mfs-warning-border: #4d3a1c;
  --mfs-danger: #f08b7f;
  --mfs-danger-soft: #2e1714;
  --mfs-danger-border: #5b2b24;
  --mfs-info: #6aa9dd;
  --mfs-info-soft: #14232f;
  --mfs-info-border: #26445c;
  --mfs-hover: #1e2c38;
  --mfs-active: #243441;
  --mfs-selected: #1d3245;
  --mfs-ring: 0 0 0 3px rgba(106, 169, 221, .35);
  --mfs-disabled-bg: #1a242e;
  --mfs-disabled-fg: #6b7c8a;
}

/* ------------------------------------------------------------------ 13.TYPOGRAPHY UTILITIES */
.mfs-h1, .mfs-h2, .mfs-h3, .mfs-h4, .mfs-h5, .mfs-h6 { margin: 0; font-family: var(--mfs-font); color: var(--mfs-ink); letter-spacing: var(--mfs-ls-tight); }
.mfs-h1 { font-size: clamp(26px, 2.4vw, var(--mfs-fs-4xl)); line-height: var(--mfs-lh-tight); font-weight: 700; }
.mfs-h2 { font-size: clamp(22px, 1.9vw, var(--mfs-fs-3xl)); line-height: var(--mfs-lh-tight); font-weight: 700; }
.mfs-h3 { font-size: var(--mfs-fs-2xl); line-height: 1.3; font-weight: 700; }
.mfs-h4 { font-size: var(--mfs-fs-xl); line-height: 1.35; font-weight: 650; }
.mfs-h5 { font-size: var(--mfs-fs-lg); line-height: 1.4; font-weight: 650; }
.mfs-h6 { font-size: var(--mfs-fs-md); line-height: 1.4; font-weight: 700; }
.mfs-body { font-size: var(--mfs-fs-base); line-height: var(--mfs-lh); color: var(--mfs-ink-2); }
.mfs-text-sm { font-size: var(--mfs-fs-sm); line-height: var(--mfs-lh); color: var(--mfs-muted); }
.mfs-caption { font-size: var(--mfs-fs-xs); line-height: 1.5; color: var(--mfs-faint); }
.mfs-label { font-size: var(--mfs-fs-xs); font-weight: 700; letter-spacing: var(--mfs-ls-wide); text-transform: uppercase; color: var(--mfs-muted); }
.mfs-mono { font-family: var(--mfs-mono); font-variant-numeric: tabular-nums; }
.mfs-num { font-variant-numeric: tabular-nums; }
.mfs-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfs-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------------ 14.BUTTON SIZES & VARIANTS */
:where(.btn, .mm2-button, .primary-button, button.mfs-btn):not(.mfs-raw).xs,
:where(button.mfs-btn).mfs-btn--xs { min-height: var(--mfs-control-h-xs) !important; height: var(--mfs-control-h-xs) !important; padding: 0 9px !important; font-size: 11.5px !important; border-radius: var(--mfs-r-sm) !important; gap: 5px; }
:where(.btn, .mm2-button, .primary-button, button.mfs-btn):not(.mfs-raw).sm,
:where(button.mfs-btn).mfs-btn--sm { min-height: var(--mfs-control-h-sm) !important; height: var(--mfs-control-h-sm) !important; padding: 0 11px !important; font-size: 12px !important; gap: 6px; }
:where(.btn, .mm2-button, .primary-button, button.mfs-btn):not(.mfs-raw).lg,
:where(button.mfs-btn).mfs-btn--lg { min-height: var(--mfs-control-h-lg) !important; height: var(--mfs-control-h-lg) !important; padding: 0 20px !important; font-size: 15px !important; }
:where(.btn, .mm2-button, .primary-button, button.mfs-btn):not(.mfs-raw).xl,
:where(button.mfs-btn).mfs-btn--xl { min-height: var(--mfs-control-h-xl) !important; height: var(--mfs-control-h-xl) !important; padding: 0 26px !important; font-size: 16px !important; border-radius: var(--mfs-r-lg) !important; }

/* outline */
:where(.btn.outline, .btn.ghost-outline, .mm2-button.outline, button.mfs-btn--outline):not(.mfs-raw) {
  background: transparent !important; background-color: transparent !important;
  border-color: var(--mfs-border-strong) !important; color: var(--mfs-ink) !important; box-shadow: none;
}
:where(.btn.outline, .mm2-button.outline, button.mfs-btn--outline):not(.mfs-raw):hover:not(:disabled) {
  border-color: var(--mfs-brand-steel) !important; color: var(--mfs-brand-steel) !important; background-color: var(--mfs-info-soft) !important;
}
/* ghost */
:where(.btn.ghost, .mm2-button.ghost, button.mfs-btn--ghost):not(.mfs-raw) {
  background: transparent !important; background-color: transparent !important;
  border-color: transparent !important; color: var(--mfs-ink-2) !important; box-shadow: none;
}
:where(.btn.ghost, .mm2-button.ghost, button.mfs-btn--ghost):not(.mfs-raw):hover:not(:disabled) {
  background-color: var(--mfs-hover) !important; color: var(--mfs-ink) !important;
}
/* text / link */
:where(.btn.text, .btn.link, .mfs-linkbtn):not(.mfs-raw) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  color: var(--mfs-brand-steel) !important; padding: 0 4px !important; height: auto !important; min-height: 0 !important;
  text-decoration: none; font-weight: 600;
}
:where(.btn.text, .btn.link, .mfs-linkbtn):not(.mfs-raw):hover:not(:disabled) { text-decoration: underline; color: var(--mfs-brand-steel-hi) !important; }
/* success */
:where(.btn.success, .mm2-button.success, button.mfs-btn--success):not(.mfs-raw) {
  background-color: var(--mfs-success) !important; border-color: var(--mfs-success) !important; color: #fff !important;
}
:where(.btn.success, .mm2-button.success, button.mfs-btn--success):not(.mfs-raw):hover:not(:disabled) {
  filter: brightness(.94); color: #fff !important;
}
/* warning */
:where(.btn.warning, button.mfs-btn--warning):not(.mfs-raw) {
  background-color: var(--mfs-warning-soft) !important; border-color: var(--mfs-warning-border) !important; color: var(--mfs-warning) !important;
}
/* icon-only */
:where(.btn.icon, .btn.icon-only, .mfs-icon-btn) { width: var(--mfs-control-h) !important; padding: 0 !important; }
:where(.btn.icon.sm) { width: var(--mfs-control-h-sm) !important; }
:where(.btn.icon.lg) { width: var(--mfs-control-h-lg) !important; }

/* loading */
:where(.btn, .mm2-button, .primary-button, button.mfs-btn).is-loading,
:where(.btn, .mm2-button)[aria-busy="true"] {
  position: relative; color: transparent !important; pointer-events: none;
}
:where(.btn, .mm2-button, .primary-button, button.mfs-btn).is-loading::after,
:where(.btn, .mm2-button)[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
  color: var(--mfs-on-accent); animation: mfs-spin .7s linear infinite;
}
:where(.btn, .mm2-button).is-loading.secondary::after { color: var(--mfs-muted); }
@keyframes mfs-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ 15.FIELD STATES */
.mfs-field { display: flex; flex-direction: column; gap: var(--mfs-s1); }
.mfs-field > label, .mfs-field-label { font-size: var(--mfs-fs-sm); font-weight: 600; color: var(--mfs-ink-2); }
.mfs-field-required { color: var(--mfs-danger); margin-left: 2px; }
.mfs-help { font-size: var(--mfs-fs-xs); color: var(--mfs-muted); }
.mfs-error { font-size: var(--mfs-fs-xs); color: var(--mfs-danger); display: flex; gap: 4px; align-items: center; }
.mfs-success-text { font-size: var(--mfs-fs-xs); color: var(--mfs-success); }

input.mfs-invalid, select.mfs-invalid, textarea.mfs-invalid,
.mfs-field.is-invalid :where(input, select, textarea) {
  border-color: var(--mfs-danger) !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .14) !important;
}
input.mfs-valid, select.mfs-valid, textarea.mfs-valid {
  border-color: var(--mfs-success) !important;
}
input.mfs-input, select.mfs-input, textarea.mfs-input {
  width: 100%; min-height: var(--mfs-control-h); box-sizing: border-box;
  padding: 0 11px; border: 1px solid var(--mfs-border); border-radius: var(--mfs-r-sm);
  background: var(--mfs-surface); color: var(--mfs-ink); font: inherit; font-size: var(--mfs-fs-base);
  transition: border-color var(--mfs-t) var(--mfs-ease), box-shadow var(--mfs-t) var(--mfs-ease);
}
textarea.mfs-input { padding: 9px 11px; min-height: 84px; line-height: var(--mfs-lh); resize: vertical; }
input.mfs-input:hover, select.mfs-input:hover, textarea.mfs-input:hover { border-color: var(--mfs-border-strong); }
input.mfs-input:focus, select.mfs-input:focus, textarea.mfs-input:focus {
  outline: none; border-color: var(--mfs-brand-steel); box-shadow: var(--mfs-ring);
}
input.mfs-input:disabled, select.mfs-input:disabled, textarea.mfs-input:disabled {
  background: var(--mfs-disabled-bg); color: var(--mfs-disabled-fg); cursor: not-allowed;
}

/* checkbox / radio / switch */
.mfs-check { display: inline-flex; align-items: center; gap: var(--mfs-s2); font-size: var(--mfs-fs-base); color: var(--mfs-ink-2); cursor: pointer; }
.mfs-check input[type="checkbox"], .mfs-check input[type="radio"] {
  width: 16px; height: 16px; accent-color: var(--mfs-brand-steel); cursor: pointer;
}
.mfs-switch { display: inline-flex; align-items: center; gap: var(--mfs-s2); cursor: pointer; font-size: var(--mfs-fs-base); }
.mfs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mfs-switch .track {
  width: 38px; height: 22px; border-radius: var(--mfs-r-pill); background: var(--mfs-border-strong);
  position: relative; transition: background var(--mfs-t) var(--mfs-ease);
}
.mfs-switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--mfs-shadow-sm); transition: transform var(--mfs-t) var(--mfs-ease);
}
.mfs-switch input:checked + .track { background: var(--mfs-brand-steel); }
.mfs-switch input:checked + .track::after { transform: translateX(16px); }
.mfs-switch input:focus-visible + .track { box-shadow: var(--mfs-ring); }

/* file input */
.mfs-file { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mfs-s3); padding: var(--mfs-s3); border: 1px dashed var(--mfs-border-strong); border-radius: var(--mfs-r); background: var(--mfs-surface-2); }
.mfs-file input[type="file"] { font-size: var(--mfs-fs-sm); color: var(--mfs-muted); min-width: 0; max-width: 100%; }
.mfs-file .mfs-caption { flex: 1 1 120px; min-width: 0; white-space: normal; }

/* ------------------------------------------------------------------ 16.CARDS */
.mfs-card {
  background: var(--mfs-surface); border: 1px solid var(--mfs-border); border-radius: var(--mfs-r-lg);
  box-shadow: var(--mfs-shadow-sm); overflow: hidden;
  transition: box-shadow var(--mfs-t) var(--mfs-ease), border-color var(--mfs-t) var(--mfs-ease), transform var(--mfs-t) var(--mfs-ease);
}
.mfs-card.is-interactive { cursor: pointer; }
.mfs-card.is-interactive:hover { box-shadow: var(--mfs-shadow-md); border-color: var(--mfs-border-strong); transform: translateY(-1px); }
.mfs-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--mfs-s3); padding: var(--mfs-s4) var(--mfs-s5); border-bottom: 1px solid var(--mfs-divider); }
.mfs-card-title { font-size: var(--mfs-fs-lg); font-weight: 650; color: var(--mfs-ink); margin: 0; }
.mfs-card-body { padding: var(--mfs-s5); }
.mfs-card-footer { padding: var(--mfs-s3) var(--mfs-s5); border-top: 1px solid var(--mfs-divider); background: var(--mfs-surface-2); display: flex; gap: var(--mfs-s2); justify-content: flex-end; }
.mfs-stat { padding: var(--mfs-s5); }
.mfs-stat .k { font-size: var(--mfs-fs-xs); font-weight: 700; letter-spacing: var(--mfs-ls-wide); text-transform: uppercase; color: var(--mfs-muted); }
.mfs-stat .v { font-size: var(--mfs-fs-3xl); font-weight: 700; color: var(--mfs-ink); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }
.mfs-stat .m { font-size: var(--mfs-fs-sm); color: var(--mfs-muted); margin-top: var(--mfs-s1); }

/* ------------------------------------------------------------------ 17.TABLES */
.mfs-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--mfs-border); border-radius: var(--mfs-r); background: var(--mfs-surface); }
.mfs-table { width: 100%; border-collapse: collapse; font-size: var(--mfs-fs-sm); }
.mfs-table thead th {
  position: sticky; top: 0; z-index: 1; text-align: left; padding: 10px 12px;
  background: var(--mfs-surface-2); color: var(--mfs-muted);
  font-size: var(--mfs-fs-xs); font-weight: 700; letter-spacing: var(--mfs-ls-wide); text-transform: uppercase;
  border-bottom: 1px solid var(--mfs-border);
}
.mfs-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--mfs-divider); color: var(--mfs-ink-2); vertical-align: middle; }
.mfs-table tbody tr:hover td { background: var(--mfs-hover); }
.mfs-table tbody tr:last-child td { border-bottom: none; }
.mfs-table.is-compact tbody td, .mfs-table.is-compact thead th { padding: 6px 10px; }
.mfs-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 18.BADGES & ALERTS */
.mfs-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--mfs-r-pill);
  font-size: var(--mfs-fs-xs); font-weight: 650; line-height: 1.7; border: 1px solid transparent; white-space: nowrap;
}
.mfs-badge.is-neutral { background: var(--mfs-surface-2); color: var(--mfs-muted); border-color: var(--mfs-border); }
.mfs-badge.is-success { background: var(--mfs-success-soft); color: var(--mfs-success); border-color: var(--mfs-success-border); }
.mfs-badge.is-warning { background: var(--mfs-warning-soft); color: var(--mfs-warning); border-color: var(--mfs-warning-border); }
.mfs-badge.is-danger { background: var(--mfs-danger-soft); color: var(--mfs-danger); border-color: var(--mfs-danger-border); }
.mfs-badge.is-info { background: var(--mfs-info-soft); color: var(--mfs-info); border-color: var(--mfs-info-border); }
.mfs-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.mfs-alert { display: flex; gap: var(--mfs-s3); padding: var(--mfs-s3) var(--mfs-s4); border-radius: var(--mfs-r); border: 1px solid; font-size: var(--mfs-fs-base); }
.mfs-alert .t { font-weight: 650; }
.mfs-alert.is-info { background: var(--mfs-info-soft); border-color: var(--mfs-info-border); color: var(--mfs-info); }
.mfs-alert.is-success { background: var(--mfs-success-soft); border-color: var(--mfs-success-border); color: var(--mfs-success); }
.mfs-alert.is-warning { background: var(--mfs-warning-soft); border-color: var(--mfs-warning-border); color: var(--mfs-warning); }
.mfs-alert.is-danger { background: var(--mfs-danger-soft); border-color: var(--mfs-danger-border); color: var(--mfs-danger); }
.mfs-alert .mfs-alert-body { color: var(--mfs-ink-2); }

/* ------------------------------------------------------------------ 19.OVERLAYS */
.mfs-modal-scrim {
  position: fixed; inset: 0; z-index: var(--mfs-z-modal); background: rgba(10, 20, 30, .55);
  display: grid; place-items: center; padding: var(--mfs-s5); animation: mfs-fade var(--mfs-t) var(--mfs-ease);
}
.mfs-modal {
  width: min(680px, 100%); max-height: 90vh; overflow: auto; background: var(--mfs-surface);
  border-radius: var(--mfs-r-lg); box-shadow: var(--mfs-shadow-xl); border: 1px solid var(--mfs-border);
  animation: mfs-pop var(--mfs-t-slow) var(--mfs-ease);
}
.mfs-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--mfs-s4) var(--mfs-s5); border-bottom: 1px solid var(--mfs-divider); }
.mfs-modal-body { padding: var(--mfs-s5); }
.mfs-modal-footer { display: flex; justify-content: flex-end; gap: var(--mfs-s2); padding: var(--mfs-s4) var(--mfs-s5); border-top: 1px solid var(--mfs-divider); background: var(--mfs-surface-2); }
@keyframes mfs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mfs-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

.mfs-toast {
  display: flex; align-items: flex-start; gap: var(--mfs-s3); padding: var(--mfs-s3) var(--mfs-s4);
  background: var(--mfs-surface); border: 1px solid var(--mfs-border); border-left: 4px solid var(--mfs-info);
  border-radius: var(--mfs-r); box-shadow: var(--mfs-shadow-lg); font-size: var(--mfs-fs-base); color: var(--mfs-ink);
}
.mfs-toast.is-success { border-left-color: var(--mfs-success); }
.mfs-toast.is-warning { border-left-color: var(--mfs-warning); }
.mfs-toast.is-danger { border-left-color: var(--mfs-danger); }

/* skeleton + empty */
.mfs-skeleton {
  border-radius: var(--mfs-r-sm); background: linear-gradient(90deg, var(--mfs-surface-2) 25%, var(--mfs-surface-3) 37%, var(--mfs-surface-2) 63%);
  background-size: 400% 100%; animation: mfs-shimmer 1.4s ease infinite; min-height: 12px;
}
@keyframes mfs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.mfs-empty { display: grid; place-items: center; gap: var(--mfs-s2); padding: var(--mfs-s9) var(--mfs-s5); text-align: center; color: var(--mfs-muted); }
.mfs-empty .mfs-empty-title { font-size: var(--mfs-fs-lg); font-weight: 650; color: var(--mfs-ink-2); }

/* ------------------------------------------------------------------ 20.LAYOUT PRIMITIVES */
.mfs-page { padding: var(--mfs-page-pad); max-width: var(--mfs-container); margin: 0 auto; }
.mfs-page.is-wide { max-width: var(--mfs-container-wide); }
.mfs-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mfs-s4); flex-wrap: wrap; margin-bottom: var(--mfs-s5); }
.mfs-page-title { font-size: var(--mfs-fs-2xl); font-weight: 700; color: var(--mfs-ink); margin: 0; letter-spacing: var(--mfs-ls-tight); }
.mfs-page-sub { font-size: var(--mfs-fs-base); color: var(--mfs-muted); margin: 2px 0 0; }
.mfs-toolbar { display: flex; align-items: center; gap: var(--mfs-s2); flex-wrap: wrap; }
.mfs-toolbar .spacer { flex: 1; }
.mfs-grid { display: grid; gap: var(--mfs-s4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mfs-stack { display: flex; flex-direction: column; gap: var(--mfs-s4); }
.mfs-row { display: flex; align-items: center; gap: var(--mfs-s3); flex-wrap: wrap; }
.mfs-divider { height: 1px; background: var(--mfs-divider); border: 0; margin: var(--mfs-s4) 0; }
.mfs-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ 21.ACCESSIBILITY & MOTION */
@media (prefers-reduced-motion: reduce) {
  .mfs-card, .mfs-toast, .mfs-modal, .mfs-skeleton, .mfs-spinner { animation: none !important; transition: none !important; }
  :where(.btn, .mm2-button, .primary-button):hover { transform: none !important; }
}

@media (max-width: 860px) {
  :root { --mfs-page-pad: 16px; }
  .mfs-page-header { flex-direction: column; align-items: stretch; }
  .mfs-grid { grid-template-columns: 1fr; }
  .mfs-modal { width: 100%; max-height: 92vh; }
}

/* ------------------------------------------------------------------ 22.MODULE LAYER
   Applies the design system inside every module screen. The low-specificity
   :where() wrapper means a module's own class rules always win — this layer
   only standardises what a module left unstyled (focus rings, scrollbars,
   table rims, form corners, empty text) and the React MM2 screens. */

/* One typeface for the whole product. The modules each declared their own
   family; this normalises them to the shared stack without touching layout. */
#mfs-module-root,
.micro-app-root {
  font-family: var(--mfs-font) !important;
  color: var(--mfs-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#mfs-module-root body,
#mfs-module-root button,
#mfs-module-root input,
#mfs-module-root select,
#mfs-module-root textarea,
#mfs-module-root table {
  font-family: var(--mfs-font) !important;
}
/* a shared heading rhythm inside module content */
#mfs-module-root :is(h1, .h1, #pageTitle) { letter-spacing: var(--mfs-ls-tight); font-weight: 700; }
#mfs-module-root :is(h2, .h2) { letter-spacing: var(--mfs-ls-tight); font-weight: 700; }
#mfs-module-root :is(h3, .h3) { font-weight: 650; }
/* numerals line up in every register */
#mfs-module-root table { font-variant-numeric: tabular-nums; }

/* focus + selection, everywhere inside a module */
:where(#mfs-module-root, .micro-app-root) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mfs-focus);
  outline-offset: 2px;
  border-radius: var(--mfs-r-sm);
}
:where(#mfs-module-root, .micro-app-root) ::selection {
  background: color-mix(in srgb, var(--mfs-brand-steel) 24%, transparent);
}

/* thin, token-coloured scrollbars inside module content */
:where(#mfs-module-root, .micro-app-root) * {
  scrollbar-width: thin;
  scrollbar-color: var(--mfs-border-strong) transparent;
}
:where(#mfs-module-root, .micro-app-root) ::-webkit-scrollbar { width: 10px; height: 10px; }
:where(#mfs-module-root, .micro-app-root) ::-webkit-scrollbar-thumb {
  background: var(--mfs-border-strong); border-radius: var(--mfs-r-pill);
  border: 2px solid transparent; background-clip: content-box;
}

/* form controls get the same corners and focus treatment */
:where(#mfs-module-root, .micro-app-root) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: var(--mfs-r-sm);
  transition: border-color var(--mfs-t) var(--mfs-ease), box-shadow var(--mfs-t) var(--mfs-ease), background var(--mfs-t) var(--mfs-ease);
}
:where(#mfs-module-root, .micro-app-root) :is(input, select, textarea):focus-visible {
  box-shadow: var(--mfs-ring);
}
:where(#mfs-module-root, .micro-app-root) :is(input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .75;
}
:where(#mfs-module-root, .micro-app-root) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--mfs-brand-steel);
  cursor: pointer;
}

/* tables: consistent rims, header rhythm and hover — only where the module
   has not defined its own (its class rules outrank this) */
:where(#mfs-module-root, .micro-app-root) table { border-collapse: separate; border-spacing: 0; }
:where(#mfs-module-root, .micro-app-root) thead th {
  font-size: var(--mfs-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mfs-ls-wide);
  text-transform: uppercase;
  color: var(--mfs-muted);
}
:where(#mfs-module-root, .micro-app-root) tbody tr { transition: background var(--mfs-t-fast) var(--mfs-ease); }
:where(#mfs-module-root, .micro-app-root) tbody tr:hover { background: var(--mfs-hover); }
:where(#mfs-module-root, .micro-app-root) :is(td, th).num,
:where(#mfs-module-root, .micro-app-root) :is(td, th)[data-num] { font-variant-numeric: tabular-nums; }

/* empty states and quiet helper text read consistently */
:where(#mfs-module-root, .micro-app-root) .empty,
:where(#mfs-module-root, .micro-app-root) .no-rows {
  color: var(--mfs-muted);
  font-size: var(--mfs-fs-base);
}

/* ---- native MM2 / MM4 React screens ------------------------------------ */
:where(.as-page, .pss-page, .mm2-page, .native-module-page) {
  font-family: var(--mfs-font);
  color: var(--mfs-ink);
}
:where(.as-page, .pss-page, .mm2-page) :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--mfs-focus);
  outline-offset: 2px;
  border-radius: var(--mfs-r-sm);
}
:where(.as-page, .pss-page, .mm2-page) :is(input, select, textarea) { border-radius: var(--mfs-r-sm); }
:where(.as-page, .pss-page, .mm2-page) :is(input, select, textarea):focus-visible { box-shadow: var(--mfs-ring); }
:where(.as-page, .pss-page, .mm2-page) tbody tr { transition: background var(--mfs-t-fast) var(--mfs-ease); }
:where(.as-page, .pss-page, .mm2-page) tbody tr:hover { background: var(--mfs-hover); }
:where(.as-page, .pss-page, .mm2-page) thead th {
  font-size: var(--mfs-fs-xs); font-weight: 700;
  letter-spacing: var(--mfs-ls-wide); text-transform: uppercase; color: var(--mfs-muted);
}

/* reduced motion applies to module content too */
@media (prefers-reduced-motion: reduce) {
  :where(#mfs-module-root, .micro-app-root, .as-page, .pss-page, .mm2-page) * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}