/* ═══════════════════════════════════════════════════════════════════════════
   MONARCH DESIGN SYSTEM — plain-CSS port for the FieldOS static pages
   Source of truth: c:\repo\monarch-design-system.ts (MUI theme, not deployed).
   This file mirrors its tokens (colour scales, semantic palette, Inter type
   scale) as CSS custom properties + a few base components that follow MUI's
   look with the Monarch overrides (no uppercase buttons, small inputs).
   Link it BEFORE a page's own <style>:  <link rel="stylesheet" href="monarch.css">
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── colour scales ── */
  --ripe-100:#E8FAEF;--ripe-200:#C1E5D1;--ripe-300:#93CCB5;--ripe-400:#569C8B;--ripe-500:#397E77;--ripe-600:#246160;--ripe-700:#154344;--ripe-800:#122F39;--ripe-900:#0F1F2D;
  --parsnip-100:#F8F9FB;--parsnip-200:#F0F2F6;--parsnip-300:#E4E8EF;--parsnip-400:#D6DBE4;--parsnip-500:#C3C8D3;--parsnip-600:#9095A0;--parsnip-700:#5D636E;--parsnip-800:#31343A;--parsnip-900:#121316;
  --blueberry-100:#F0F8FF;--blueberry-200:#D4E9FF;--blueberry-300:#ABD2FF;--blueberry-400:#82B8FF;--blueberry-500:#5695F5;--blueberry-600:#2B6FE8;--blueberry-700:#1B53C2;--blueberry-800:#0E389C;--blueberry-900:#052375;
  --avocado-100:#E7FDF6;--avocado-200:#CAFBEC;--avocado-300:#67F4CA;--avocado-400:#10DA9C;--avocado-500:#0DAB7B;--avocado-600:#086E4F;--avocado-700:#06543D;--avocado-800:#054230;--avocado-900:#03251A;
  --pomegranate-100:#FDECEC;--pomegranate-200:#FCDADA;--pomegranate-300:#F8B6B5;--pomegranate-400:#F49190;--pomegranate-500:#EF6461;--pomegranate-600:#EB3633;--pomegranate-700:#CC1714;--pomegranate-800:#A71311;--pomegranate-900:#6F0D0B;
  --orange-100:#FFF6E0;--orange-200:#FFECC2;--orange-300:#FED990;--orange-400:#FEC55D;--orange-500:#FD9F10;--orange-600:#FD8402;--orange-700:#D46B02;--orange-800:#A24701;--orange-900:#6F350B;
  --banana-100:#FFF5D6;--banana-200:#FFEEB5;--banana-300:#FFE799;--banana-400:#FFE389;--banana-500:#FFDE70;--banana-600:#FFD240;--banana-700:#F5BC00;--banana-800:#CC8F00;--banana-900:#664400;
  /* ── semantic palette (paletteOptionsLight) ── */
  --m-primary:var(--ripe-600);--m-primary-dark:var(--ripe-700);--m-primary-light:var(--ripe-500);
  --m-secondary:var(--parsnip-700);
  --m-error:var(--pomegranate-700);--m-error-dark:var(--pomegranate-800);--m-error-light:var(--pomegranate-500);
  --m-warning:var(--orange-600);--m-warning-dark:var(--orange-800);
  --m-info:var(--blueberry-600);--m-info-dark:var(--blueberry-800);
  --m-success:var(--avocado-600);--m-success-dark:var(--avocado-800);--m-success-light:var(--avocado-500);
  --m-subtle-info-bg:var(--blueberry-200);--m-subtle-info-fg:var(--blueberry-900);
  --m-subtle-secondary-bg:var(--parsnip-200);--m-subtle-secondary-fg:var(--parsnip-800);
  --m-subtle-error-bg:var(--pomegranate-100);--m-subtle-error-fg:var(--pomegranate-900);
  --m-subtle-success-bg:var(--avocado-200);--m-subtle-success-fg:var(--avocado-900);
  --m-subtle-warning-bg:var(--orange-100);--m-subtle-warning-fg:var(--orange-800);
  --m-text:var(--parsnip-900);                 /* text.primary */
  --m-text-2:rgba(49,52,58,.8);                /* text.secondary = parsnip-800 @ 80% */
  --m-text-disabled:rgba(93,99,110,.4);
  --m-divider:rgba(5,35,117,.12);              /* blueberry-900 @ 12% */
  --m-hover:rgba(5,35,117,.04);                /* action.hover */
  --m-selected:rgba(5,35,117,.08);             /* action.selected */
  --m-focus:rgba(5,35,117,.12);
  --m-paper:#fff;--m-bg:var(--parsnip-100);
  --m-radius:4px;                              /* MUI default shape */
  --m-shadow-1:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
  --m-shadow-8:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
  --m-font:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
}
/* ── typography (typographyOptions) ── */
.m-h5{font:700 1.5rem/1.8rem var(--m-font)}
.m-h6{font:700 1.25rem/1.5rem var(--m-font)}
.m-h7{font:700 1.125rem/1.35rem var(--m-font)}
.m-h8{font:700 1rem/1.2rem var(--m-font)}
.m-body{font:400 1rem/1.5rem var(--m-font)}
.m-body-sm{font:400 .875rem/1.3125rem var(--m-font)}
.m-body-sm-sb{font:600 .875rem/1.3125rem var(--m-font)}
.m-caption{font:400 .75rem/1.125rem var(--m-font)}
.m-caption-sb{font:600 .75rem/1.125rem var(--m-font)}
.m-overline{font:500 .75rem/1.125rem var(--m-font);text-transform:uppercase;letter-spacing:.06rem}
.m-text-2{color:var(--m-text-2)}
/* ── base components (MUI look, Monarch overrides) ── */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:var(--m-radius);border:1px solid transparent;font:600 .875rem/1.3125rem var(--m-font);text-transform:none;cursor:pointer;background:transparent;color:var(--m-primary);transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.m-btn:hover{background:rgba(36,97,96,.06)}
.m-btn.contained{background:var(--m-primary);color:#fff;box-shadow:var(--m-shadow-1)}
.m-btn.contained:hover{background:var(--m-primary-dark)}
.m-btn.contained.success{background:var(--m-success)}.m-btn.contained.success:hover{background:var(--m-success-dark)}
.m-btn.contained.error{background:var(--m-error)}.m-btn.contained.error:hover{background:var(--m-error-dark)}
.m-btn.outlined{border-color:rgba(36,97,96,.5)}
.m-btn.outlined:hover{border-color:var(--m-primary);background:rgba(36,97,96,.04)}
.m-btn.secondary{color:var(--m-secondary)}.m-btn.secondary.outlined{border-color:var(--parsnip-400)}
.m-btn:disabled{opacity:.45;cursor:default}
.m-input{height:40px;border:1px solid rgba(0,0,0,.23);border-radius:var(--m-radius);padding:0 12px;font:400 .875rem var(--m-font);color:var(--m-text);background:#fff;outline:none}
.m-input:hover{border-color:var(--m-text)}
.m-input:focus{border-color:var(--m-primary);box-shadow:inset 0 0 0 1px var(--m-primary)}
.m-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:16px;font:400 .8125rem var(--m-font);background:var(--parsnip-200);color:var(--m-text);border:1px solid transparent;cursor:pointer;white-space:nowrap}
.m-chip.outlined{background:transparent;border-color:var(--parsnip-400)}
.m-chip.selected{background:var(--m-primary);color:#fff}
.m-paper{background:var(--m-paper);border:1px solid var(--m-divider);border-radius:8px}
.m-badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px;font:500 .75rem var(--m-font)}
.m-badge.success{background:var(--m-subtle-success-bg);color:var(--m-subtle-success-fg)}
.m-badge.error{background:var(--m-subtle-error-bg);color:var(--m-subtle-error-fg)}
.m-badge.warning{background:var(--m-subtle-warning-bg);color:var(--m-subtle-warning-fg)}
.m-badge.info{background:var(--m-subtle-info-bg);color:var(--m-subtle-info-fg)}
.m-badge.secondary{background:var(--m-subtle-secondary-bg);color:var(--m-subtle-secondary-fg)}
/* ═══ v1.1.130 — components learned from monarch-frontend-bundle (packages/ui-mui) ═══ */
:root{--m-radius-card:16px}                 /* Card: sx borderRadius 4 → 4 × 4px */
/* Card (MUI Card, elevation 1, radius 16) */
.m-card{background:var(--m-paper);border-radius:var(--m-radius-card);box-shadow:var(--m-shadow-1)}
/* Page header band (VisibilityPageContainer header: white, p:2, title row + Tabs) */
.m-pagehead{background:#fff;padding:16px 24px 0;border-bottom:2px solid var(--m-divider)}
/* Tabs / Tab (Tab.config: no uppercase, bodySmall regular, selected semibold; 2px indicator) */
.m-tabs{display:flex;gap:8px;overflow-x:auto}
.m-tab{position:relative;background:none;border:none;padding:12px 16px;font:400 .875rem/1.3125rem var(--m-font);color:var(--m-text-2);cursor:pointer;white-space:nowrap}
.m-tab:hover{background:var(--m-hover)}
.m-tab.on{font-weight:600;color:var(--m-primary)}
.m-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--m-primary)}
.m-tab .m-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;margin-left:6px;border-radius:10px;font:600 .75rem var(--m-font);background:var(--parsnip-200);color:var(--parsnip-800)}
.m-tab.on .m-count{background:var(--ripe-100);color:var(--ripe-700)}
/* Chip (Chip.tsx: label bodySmallSemibold) + subtle colours used for statuses */
.m-chip-sm{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font:600 .8125rem var(--m-font);white-space:nowrap;width:fit-content}
.m-chip-sm.subtle-success{background:var(--m-subtle-success-bg);color:var(--m-subtle-success-fg)}
.m-chip-sm.subtle-error{background:var(--m-subtle-error-bg);color:var(--m-subtle-error-fg)}
.m-chip-sm.subtle-warning{background:var(--m-subtle-warning-bg);color:var(--m-subtle-warning-fg)}
.m-chip-sm.subtle-info{background:var(--m-subtle-info-bg);color:var(--m-subtle-info-fg)}
.m-chip-sm.default{background:var(--parsnip-200);color:var(--parsnip-800)}
/* PercentageBar (segments in subtle colours, label inside when wide enough) */
.m-pbar{display:flex;width:100%;border-radius:var(--m-radius);overflow:hidden;font:600 .875rem/1.3125rem var(--m-font)}
.m-pbar>div{padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:clip;min-width:0}
.m-pbar .subtle-success{background:var(--m-subtle-success-bg);color:var(--m-subtle-success-fg)}
.m-pbar .subtle-error{background:var(--m-subtle-error-bg);color:var(--m-subtle-error-fg)}
.m-pbar .subtle-warning{background:var(--m-subtle-warning-bg);color:var(--m-subtle-warning-fg)}
/* DataGrid look (DataGrid.tsx sx): parsnip-400 border, 48px header on parsnip-100, header bodySmallSemibold,
   16px cell padding, bodyRegular cells, row hover parsnip-100, 4px left border for warning / error rows */
.m-grid{border:1px solid var(--parsnip-400);border-radius:var(--m-radius);overflow:hidden;background:#fff}
.m-grid table{width:100%;border-collapse:collapse}
.m-grid th{height:48px;padding:0 16px;background:var(--parsnip-100);font:600 .875rem/1.3125rem var(--m-font);color:var(--m-text);text-align:left;border-bottom:1px solid var(--parsnip-300);white-space:nowrap}
.m-grid td{padding:12px 16px;font:400 .9375rem/1.4rem var(--m-font);color:var(--m-text);background:#fff;border-bottom:1px solid var(--parsnip-300);vertical-align:middle}
.m-grid tbody tr:last-child td{border-bottom:none}
.m-grid tbody tr:hover td{background:var(--parsnip-100)}
.m-grid tr.row-error td:first-child{box-shadow:inset 4px 0 0 var(--m-error)}
.m-grid tr.row-warning td:first-child{box-shadow:inset 4px 0 0 var(--m-warning)}
/* DataGridEmptyState (centered text + text-button action) */
.m-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:170px;color:var(--m-text);font:400 1rem var(--m-font)}
/* QuickFilter (outlined search field with a start search icon) */
.m-search{position:relative;display:inline-flex;align-items:center}
.m-search svg{position:absolute;left:10px;width:20px;height:20px;fill:var(--parsnip-700);pointer-events:none}
.m-search input{padding-left:38px !important}