/*
 * MontyGuard design system: tokens + components.
 * ==============================================
 * One stylesheet shared by the landing page, the login page, the app and (inlined) the client reports.
 * Rules (docs/DESIGN.md has the long version):
 *   - White, professional, light only. There is deliberately NO dark-mode block: do not add one.
 *   - One brand colour, Monty Green #0E6E52. Its tints/shades (--mg-green-*) are for hover, active and subtle
 *     backgrounds only. Success uses the brand green.
 *   - Semantic colours only where meaning requires it: --mg-danger (failures, production down) and
 *     --mg-warning (warnings, needs attention). No other accent colours.
 *   - Neutrals come from the single --mg-n-* scale. Text is --mg-text (#16181D).
 *   - 8px grid (--mg-space-*), radius 6px (controls) / 8px (cards), hairline borders, subtle shadows at most.
 *   - System UI font stack; nothing is loaded from a CDN (CSP is 'self').
 *   - No inline style attributes anywhere (CSP has no 'unsafe-inline' for the app): use classes from here.
 *
 * Naming: plain BEM-ish classes (.btn, .btn--primary, .card__header). State via ARIA attributes where one exists
 * (aria-current, aria-selected, aria-expanded, aria-invalid, aria-busy) and .is-* classes otherwise.
 *
 * Sections:
 *   1. Tokens            2. Base & accessibility   3. Layout helpers   4. Typography helpers
 *   5. Buttons           6. Forms                  7. Badges & dots    8. Cards & KPI tiles
 *   9. Tables           10. Alerts & banners      11. Tabs & segmented 12. Menus
 *  13. Dialog & drawer  14. Toasts                15. Empty states, skeletons, spinner
 *  16. Code & diff      17. Timeline, description list, progress   18. App shell   19. Print
 */

/* 1. Tokens ------------------------------------------------------------------------------------------------ */
:root {
  /* Brand: Monty Green and tints/shades derived from it (hover / active / subtle backgrounds only). */
  --mg-green: #0E6E52;
  --mg-green-700: #0B5A43;   /* hover on solid green */
  --mg-green-800: #094A37;   /* active on solid green */
  --mg-green-600: #12805F;
  --mg-green-200: #B5DACC;
  --mg-green-100: #D7ECE4;
  --mg-green-50: #EDF6F2;    /* subtle brand background */
  --mg-green-25: #F6FBF9;

  /* Neutrals: one scale. */
  --mg-n-0: #FFFFFF;
  --mg-n-25: #FBFBFC;
  --mg-n-50: #F6F7F8;
  --mg-n-100: #EFF0F2;
  --mg-n-200: #E3E5E8;
  --mg-n-300: #D0D3D8;
  --mg-n-400: #A8ADB4;
  --mg-n-500: #7B818A;
  --mg-n-600: #5A6069;
  --mg-n-700: #40454D;
  --mg-n-800: #2A2E34;
  --mg-n-900: #16181D;

  /* Semantic (only where meaning requires). */
  --mg-danger: #B42318;
  --mg-danger-700: #912018;
  --mg-danger-bg: #FEF3F2;
  --mg-danger-border: #F9C9C4;
  --mg-warning: #8A5A00;     /* amber text, 5.6:1 on white */
  --mg-warning-strong: #B97A00;
  --mg-warning-bg: #FFF8E5;
  --mg-warning-border: #F1D58C;
  --mg-success: var(--mg-green);
  --mg-success-bg: var(--mg-green-50);
  --mg-success-border: var(--mg-green-200);

  /* Roles. Use these in components, not the raw scale. */
  --mg-text: var(--mg-n-900);
  --mg-text-muted: var(--mg-n-600);      /* 6.4:1 on white */
  --mg-text-subtle: var(--mg-n-500);     /* 4.0:1: large text, icons and placeholders only */
  --mg-text-inverse: #FFFFFF;
  --mg-surface: #FFFFFF;
  --mg-surface-subtle: var(--mg-n-50);
  --mg-surface-sunken: var(--mg-n-100);
  --mg-border: var(--mg-n-200);
  --mg-border-strong: var(--mg-n-300);
  --mg-link: var(--mg-green);
  --mg-focus: rgba(14, 110, 82, 0.45);

  /* Diff colours (syntax-neutral: only added / removed / hunk). */
  --mg-diff-add-bg: #E9F5EF;
  --mg-diff-add-mark: #0E6E52;
  --mg-diff-del-bg: #FDEEEC;
  --mg-diff-del-mark: #B42318;
  --mg-diff-hunk-bg: var(--mg-n-100);

  /* Typography. */
  --mg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --mg-fs-12: 0.75rem;
  --mg-fs-13: 0.8125rem;
  --mg-fs-14: 0.875rem;
  --mg-fs-16: 1rem;
  --mg-fs-18: 1.125rem;
  --mg-fs-20: 1.25rem;
  --mg-fs-24: 1.5rem;
  --mg-fs-30: 1.875rem;
  --mg-fs-36: 2.25rem;
  --mg-fs-48: 3rem;
  --mg-lh-tight: 1.2;
  --mg-lh: 1.5;
  --mg-fw-regular: 400;
  --mg-fw-medium: 500;
  --mg-fw-semibold: 600;
  --mg-fw-bold: 700;

  /* Spacing: 8px grid (4px half-steps allowed for tight UI). */
  --mg-space-1: 4px;
  --mg-space-2: 8px;
  --mg-space-3: 12px;
  --mg-space-4: 16px;
  --mg-space-5: 24px;
  --mg-space-6: 32px;
  --mg-space-7: 40px;
  --mg-space-8: 48px;
  --mg-space-9: 64px;
  --mg-space-10: 80px;
  --mg-space-11: 96px;

  /* Shape and depth. */
  --mg-radius-sm: 4px;
  --mg-radius: 6px;
  --mg-radius-lg: 8px;
  --mg-radius-pill: 999px;
  --mg-shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.06);
  --mg-shadow: 0 1px 3px rgba(22, 24, 29, 0.06), 0 4px 12px rgba(22, 24, 29, 0.05);
  --mg-shadow-overlay: 0 12px 32px rgba(22, 24, 29, 0.16), 0 2px 6px rgba(22, 24, 29, 0.08);

  /* Layout. */
  --mg-sidebar-w: 240px;
  --mg-topbar-h: 56px;
  --mg-content-max: 1280px;
  --mg-transition: 120ms ease;

  color-scheme: light;
}

/* 2. Base & accessibility ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--mg-surface);
  color: var(--mg-text);
  font-family: var(--mg-font);
  font-size: var(--mg-fs-14);
  line-height: var(--mg-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--mg-lh-tight); font-weight: var(--mg-fw-semibold); color: var(--mg-text); }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--mg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mg-green-700); }
code, kbd, samp, pre { font-family: var(--mg-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--mg-border); margin: var(--mg-space-5) 0; }
::selection { background: var(--mg-green-100); color: var(--mg-text); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--mg-green); outline-offset: 2px; border-radius: var(--mg-radius-sm); }

.skip-link {
  position: absolute; left: var(--mg-space-4); top: -100px; z-index: 1000;
  background: var(--mg-green); color: var(--mg-text-inverse); padding: var(--mg-space-2) var(--mg-space-4);
  border-radius: var(--mg-radius); font-weight: var(--mg-fw-semibold); text-decoration: none;
}
.skip-link:focus { top: var(--mg-space-2); color: var(--mg-text-inverse); }
.visually-hidden, .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;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 3. Layout helpers ---------------------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--mg-content-max); margin: 0 auto; padding: 0 var(--mg-space-5); }
.stack { display: flex; flex-direction: column; gap: var(--mg-space-4); }
.stack--xs { gap: var(--mg-space-1); }
.stack--sm { gap: var(--mg-space-2); }
.stack--lg { gap: var(--mg-space-5); }
.stack--xl { gap: var(--mg-space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
.cluster--lg { gap: var(--mg-space-4); }
.cluster--end { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }
.cluster--nowrap { flex-wrap: nowrap; }
.spacer { flex: 1 1 auto; }
.grid { display: grid; gap: var(--mg-space-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--mg-space-5); }
.grid--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--mg-space-5); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--sidebar, .grid--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--mg-space-2); } .mt-4 { margin-top: var(--mg-space-4); } .mt-5 { margin-top: var(--mg-space-5); } .mt-6 { margin-top: var(--mg-space-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--mg-space-2); } .mb-4 { margin-bottom: var(--mg-space-4); } .mb-5 { margin-bottom: var(--mg-space-5); }

/* 4. Typography helpers ------------------------------------------------------------------------------------ */
.text-muted { color: var(--mg-text-muted); }
.text-subtle { color: var(--mg-text-subtle); }
.text-danger { color: var(--mg-danger); }
.text-warning { color: var(--mg-warning); }
.text-success, .text-brand { color: var(--mg-green); }
.text-sm { font-size: var(--mg-fs-13); }
.text-xs { font-size: var(--mg-fs-12); }
.text-lg { font-size: var(--mg-fs-16); }
.text-strong { font-weight: var(--mg-fw-semibold); }
.text-mono, .mono { font-family: var(--mg-mono); font-size: var(--mg-fs-13); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.break-all { word-break: break-all; }
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--mg-fs-12); font-weight: var(--mg-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mg-text-muted); }
.h1 { font-size: var(--mg-fs-24); font-weight: var(--mg-fw-semibold); letter-spacing: -0.01em; }
.h2 { font-size: var(--mg-fs-18); font-weight: var(--mg-fw-semibold); }
.h3 { font-size: var(--mg-fs-16); font-weight: var(--mg-fw-semibold); }
.h4 { font-size: var(--mg-fs-14); font-weight: var(--mg-fw-semibold); }
.lead { font-size: var(--mg-fs-16); color: var(--mg-text-muted); }
.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--mg-space-3); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--mg-link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { color: var(--mg-green); text-decoration: underline; }
kbd { border: 1px solid var(--mg-border-strong); border-bottom-width: 2px; border-radius: var(--mg-radius-sm); padding: 0 4px; font-size: var(--mg-fs-12); background: var(--mg-surface-subtle); }

/* 5. Buttons ----------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mg-space-2);
  min-height: 36px; padding: 0 var(--mg-space-4);
  font: inherit; font-size: var(--mg-fs-14); font-weight: var(--mg-fw-medium); line-height: 1.2; white-space: nowrap;
  color: var(--mg-text); background: var(--mg-surface); border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius); box-shadow: var(--mg-shadow-sm);
  cursor: pointer; text-decoration: none; user-select: none;
  transition: background var(--mg-transition), border-color var(--mg-transition), color var(--mg-transition);
}
.btn:hover { background: var(--mg-surface-subtle); border-color: var(--mg-n-400); color: var(--mg-text); }
.btn:active { background: var(--mg-surface-sunken); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--mg-green); border-color: var(--mg-green); color: var(--mg-text-inverse); }
.btn--primary:hover { background: var(--mg-green-700); border-color: var(--mg-green-700); color: var(--mg-text-inverse); }
.btn--primary:active { background: var(--mg-green-800); border-color: var(--mg-green-800); }
.btn--danger { background: var(--mg-danger); border-color: var(--mg-danger); color: var(--mg-text-inverse); }
.btn--danger:hover { background: var(--mg-danger-700); border-color: var(--mg-danger-700); color: var(--mg-text-inverse); }
.btn--danger-outline { color: var(--mg-danger); border-color: var(--mg-danger-border); }
.btn--danger-outline:hover { background: var(--mg-danger-bg); border-color: var(--mg-danger); color: var(--mg-danger-700); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--mg-surface-sunken); border-color: transparent; }
.btn--sm { min-height: 28px; padding: 0 var(--mg-space-3); font-size: var(--mg-fs-13); }
.btn--lg { min-height: 44px; padding: 0 var(--mg-space-5); font-size: var(--mg-fs-16); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 36px; }
.btn--icon.btn--sm { width: 28px; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--mg-n-400); border-right-color: transparent;
  animation: mg-spin 0.7s linear infinite;
}
.btn--primary.is-loading::after, .btn--danger.is-loading::after { border-color: rgba(255, 255, 255, 0.8); border-right-color: transparent; }
.btn-group { display: inline-flex; gap: var(--mg-space-2); flex-wrap: wrap; }

/* 6. Forms ------------------------------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field + .field { margin-top: var(--mg-space-4); }
.label { font-size: var(--mg-fs-13); font-weight: var(--mg-fw-semibold); color: var(--mg-text); }
.label .optional { font-weight: var(--mg-fw-regular); color: var(--mg-text-muted); }
.help { font-size: var(--mg-fs-13); color: var(--mg-text-muted); }
.error-text { font-size: var(--mg-fs-13); color: var(--mg-danger); }
.input, .select, .textarea {
  width: 100%; min-height: 36px; padding: 7px var(--mg-space-3);
  font: inherit; font-size: var(--mg-fs-14); color: var(--mg-text);
  background: var(--mg-surface); border: 1px solid var(--mg-border-strong); border-radius: var(--mg-radius);
  transition: border-color var(--mg-transition), box-shadow var(--mg-transition);
}
.input::placeholder, .textarea::placeholder { color: var(--mg-text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--mg-n-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--mg-green); box-shadow: 0 0 0 3px var(--mg-focus); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--mg-danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.25); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--mg-surface-subtle); color: var(--mg-text-muted); cursor: not-allowed; }
.input--sm, .select--sm { min-height: 30px; padding: 4px var(--mg-space-2); font-size: var(--mg-fs-13); }
.input--mono { font-family: var(--mg-mono); font-size: var(--mg-fs-13); }
.textarea { min-height: 96px; resize: vertical; line-height: var(--mg-lh); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%235A6069' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.check { display: inline-flex; align-items: flex-start; gap: var(--mg-space-2); cursor: pointer; font-size: var(--mg-fs-14); }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--mg-green); flex: none; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-4); }
.form-row + .form-row, .form-row + .field, .field + .form-row { margin-top: var(--mg-space-4); }
.form-row > .field + .field { margin-top: 0; }
@media (max-width: 640px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.form-actions { display: flex; gap: var(--mg-space-2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--mg-space-5); }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: var(--mg-space-2); }
.filters { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); align-items: flex-end; }
.filters .field { min-width: 160px; }
.filters .field + .field { margin-top: 0; }

/* Choice cards (radio cards, e.g. host profile in onboarding). */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--mg-space-3); }
.choice {
  position: relative; display: flex; flex-direction: column; gap: var(--mg-space-1);
  padding: var(--mg-space-4); border: 1px solid var(--mg-border-strong); border-radius: var(--mg-radius-lg);
  background: var(--mg-surface); cursor: pointer; transition: border-color var(--mg-transition), background var(--mg-transition);
}
.choice:hover { border-color: var(--mg-n-400); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked), .choice.is-selected { border-color: var(--mg-green); background: var(--mg-green-25); box-shadow: 0 0 0 1px var(--mg-green); }
.choice:has(input:focus-visible) { outline: 2px solid var(--mg-green); outline-offset: 2px; }
.choice__title { font-weight: var(--mg-fw-semibold); }
.choice__text { font-size: var(--mg-fs-13); color: var(--mg-text-muted); }

/* 7. Badges & status dots ---------------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 2px var(--mg-space-2); min-height: 22px;
  font-size: var(--mg-fs-12); font-weight: var(--mg-fw-medium); line-height: 1.3; white-space: nowrap;
  color: var(--mg-n-700); background: var(--mg-n-100); border: 1px solid var(--mg-n-200); border-radius: var(--mg-radius-pill);
}
.badge--success, .badge--brand { color: var(--mg-green-700); background: var(--mg-green-50); border-color: var(--mg-green-100); }
.badge--warning { color: var(--mg-warning); background: var(--mg-warning-bg); border-color: var(--mg-warning-border); }
.badge--danger { color: var(--mg-danger); background: var(--mg-danger-bg); border-color: var(--mg-danger-border); }
.badge--solid-danger { color: #fff; background: var(--mg-danger); border-color: var(--mg-danger); }
.badge--outline { background: var(--mg-surface); }
.badge--square { border-radius: var(--mg-radius-sm); }
.badge__dot, .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dot--success { background: var(--mg-green); }
.dot--warning { background: var(--mg-warning-strong); }
.dot--danger { background: var(--mg-danger); }
.dot--neutral { background: var(--mg-n-400); }
.dot--pulse, .badge--live .badge__dot { animation: mg-pulse 1.4s ease-in-out infinite; }
.count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  font-size: var(--mg-fs-12); font-weight: var(--mg-fw-semibold); border-radius: var(--mg-radius-pill);
  background: var(--mg-n-100); color: var(--mg-n-700);
}
.count--attention { background: var(--mg-warning-bg); color: var(--mg-warning); }
.count--danger { background: var(--mg-danger); color: #fff; }
@keyframes mg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* 8. Cards & KPI tiles ------------------------------------------------------------------------------------- */
.card { background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); box-shadow: var(--mg-shadow-sm); min-width: 0; }
.card--flat { box-shadow: none; }
.card--subtle { background: var(--mg-surface-subtle); box-shadow: none; }
.card--brand { background: var(--mg-green-50); border-color: var(--mg-green-100); box-shadow: none; }
.card__header { display: flex; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-4) var(--mg-space-5); border-bottom: 1px solid var(--mg-border); min-height: 56px; }
.card__header .card__title { font-size: var(--mg-fs-14); font-weight: var(--mg-fw-semibold); }
.card__header .card__actions { margin-left: auto; display: flex; gap: var(--mg-space-2); align-items: center; }
.card__body { padding: var(--mg-space-5); }
.card__body--flush { padding: 0; }
.card__body--tight { padding: var(--mg-space-4); }
.card__footer { padding: var(--mg-space-3) var(--mg-space-5); border-top: 1px solid var(--mg-border); background: var(--mg-surface-subtle); border-radius: 0 0 var(--mg-radius-lg) var(--mg-radius-lg); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mg-space-4); }
@media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: var(--mg-space-1); padding: var(--mg-space-4) var(--mg-space-5); background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); min-width: 0; }
.kpi__label { font-size: var(--mg-fs-13); color: var(--mg-text-muted); font-weight: var(--mg-fw-medium); }
.kpi__value { font-size: var(--mg-fs-30); font-weight: var(--mg-fw-semibold); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi__note { font-size: var(--mg-fs-12); color: var(--mg-text-muted); }
.kpi__value--success { color: var(--mg-green); }
.kpi__value--warning { color: var(--mg-warning); }
.kpi__value--danger { color: var(--mg-danger); }
.kpi--feature { grid-column: span 2; background: var(--mg-green-50); border-color: var(--mg-green-100); }
.kpi--feature .kpi__value { font-size: var(--mg-fs-36); color: var(--mg-green); }
.kpi--feature .kpi__label { color: var(--mg-text); font-weight: var(--mg-fw-semibold); }
a.kpi { color: inherit; text-decoration: none; transition: border-color var(--mg-transition); }
a.kpi:hover { border-color: var(--mg-n-400); }

/* 9. Tables ------------------------------------------------------------------------------------------------ */
.table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--mg-fs-14); }
.table th {
  text-align: left; font-size: var(--mg-fs-12); font-weight: var(--mg-fw-semibold); color: var(--mg-text-muted);
  padding: 10px var(--mg-space-4); border-bottom: 1px solid var(--mg-border); background: var(--mg-surface-subtle); white-space: nowrap;
}
.table td { padding: var(--mg-space-3) var(--mg-space-4); border-bottom: 1px solid var(--mg-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table--hover tbody tr:hover td { background: var(--mg-n-25); }
.table--clickable tbody tr { cursor: pointer; }
.table--compact th, .table--compact td { padding: var(--mg-space-2) var(--mg-space-3); }
.table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }
.table .row-title { font-weight: var(--mg-fw-semibold); color: var(--mg-text); text-decoration: none; }
.table .row-title:hover { color: var(--mg-green); text-decoration: underline; }
.table .row-sub { font-size: var(--mg-fs-13); color: var(--mg-text-muted); }
.table th[aria-sort] { cursor: pointer; }
.table th[aria-sort="ascending"]::after { content: " \2191"; }
.table th[aria-sort="descending"]::after { content: " \2193"; }
.card > .table-wrap:last-child .table tbody tr:last-child td { border-bottom: 0; }

/* 10. Alerts & banners ------------------------------------------------------------------------------------- */
.alert {
  display: flex; gap: var(--mg-space-3); align-items: flex-start;
  padding: var(--mg-space-3) var(--mg-space-4); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg);
  background: var(--mg-surface-subtle); color: var(--mg-text); font-size: var(--mg-fs-14);
}
.alert__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.alert__body { flex: 1 1 auto; min-width: 0; }
.alert__title { font-weight: var(--mg-fw-semibold); }
.alert__title + * { margin-top: 2px; }
.alert--success { background: var(--mg-success-bg); border-color: var(--mg-success-border); }
.alert--success .alert__icon, .alert--success .alert__title { color: var(--mg-green-700); }
.alert--warning { background: var(--mg-warning-bg); border-color: var(--mg-warning-border); }
.alert--warning .alert__icon, .alert--warning .alert__title { color: var(--mg-warning); }
.alert--danger { background: var(--mg-danger-bg); border-color: var(--mg-danger-border); }
.alert--danger .alert__icon, .alert--danger .alert__title { color: var(--mg-danger); }

.banner { display: flex; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-2) var(--mg-space-5); font-size: var(--mg-fs-14); border-bottom: 1px solid var(--mg-border); }
.banner--warning { background: var(--mg-warning-bg); border-bottom-color: var(--mg-warning-border); color: var(--mg-n-900); }
.banner--warning .banner__icon { color: var(--mg-warning); }
.banner--danger { background: var(--mg-danger); color: #fff; border-bottom-color: var(--mg-danger-700); }
.banner--danger a, .banner--danger .link-button { color: #fff; }
.banner__icon { width: 18px; height: 18px; flex: none; }
.banner__actions { margin-left: auto; display: flex; gap: var(--mg-space-2); }

/* 11. Tabs & segmented control ----------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--mg-space-1); border-bottom: 1px solid var(--mg-border); overflow-x: auto; }
.tab {
  position: relative; padding: var(--mg-space-3) var(--mg-space-3); margin-bottom: -1px;
  font: inherit; font-weight: var(--mg-fw-medium); color: var(--mg-text-muted); white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none;
}
.tab:hover { color: var(--mg-text); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--mg-text); border-bottom-color: var(--mg-green); }
.tab .count { margin-left: 6px; }
.tab-panel { padding-top: var(--mg-space-5); }

.segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--mg-surface-sunken); border: 1px solid var(--mg-border); border-radius: var(--mg-radius); flex-wrap: wrap; }
.segmented__option {
  padding: 5px var(--mg-space-3); font: inherit; font-size: var(--mg-fs-13); font-weight: var(--mg-fw-medium);
  color: var(--mg-text-muted); background: transparent; border: 0; border-radius: var(--mg-radius-sm); cursor: pointer;
}
.segmented__option:hover { color: var(--mg-text); }
.segmented__option[aria-pressed="true"], .segmented__option[aria-checked="true"] { background: var(--mg-surface); color: var(--mg-text); box-shadow: var(--mg-shadow-sm); }
.segmented__option:disabled { cursor: not-allowed; opacity: 0.6; }

/* 12. Menus (user menu, org switcher, row actions) --------------------------------------------------------- */
.menu-anchor { position: relative; display: inline-flex; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; padding: var(--mg-space-1);
  background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); box-shadow: var(--mg-shadow-overlay);
}
.menu--left { right: auto; left: 0; }
.menu__header { padding: var(--mg-space-2) var(--mg-space-3); font-size: var(--mg-fs-13); color: var(--mg-text-muted); border-bottom: 1px solid var(--mg-border); margin-bottom: var(--mg-space-1); }
.menu__item {
  display: flex; align-items: center; gap: var(--mg-space-2); width: 100%; padding: var(--mg-space-2) var(--mg-space-3);
  font: inherit; font-size: var(--mg-fs-14); color: var(--mg-text); text-align: left; text-decoration: none;
  background: none; border: 0; border-radius: var(--mg-radius-sm); cursor: pointer;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--mg-surface-sunken); color: var(--mg-text); outline: none; }
.menu__item[aria-checked="true"], .menu__item[aria-current="true"] { font-weight: var(--mg-fw-semibold); color: var(--mg-green); }
.menu__item--danger { color: var(--mg-danger); }
.menu__sep { height: 1px; margin: var(--mg-space-1) 0; background: var(--mg-border); }

/* 13. Dialog & drawer -------------------------------------------------------------------------------------- */
/* Uses the native <dialog> element (showModal gives focus trapping and Esc). */
.dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0;
  color: var(--mg-text); background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg);
  box-shadow: var(--mg-shadow-overlay);
}
.dialog--wide { width: min(760px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(22, 24, 29, 0.4); }
.dialog__header { padding: var(--mg-space-5) var(--mg-space-5) 0; }
.dialog__title { font-size: var(--mg-fs-18); font-weight: var(--mg-fw-semibold); }
.dialog__body { padding: var(--mg-space-3) var(--mg-space-5) var(--mg-space-5); color: var(--mg-text-muted); }
.dialog__body > * + * { margin-top: var(--mg-space-3); }
.dialog__footer { display: flex; justify-content: flex-end; gap: var(--mg-space-2); padding: var(--mg-space-4) var(--mg-space-5); border-top: 1px solid var(--mg-border); background: var(--mg-surface-subtle); border-radius: 0 0 var(--mg-radius-lg) var(--mg-radius-lg); }

.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(640px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0 0 0 auto; padding: 0; display: flex; flex-direction: column;
  background: var(--mg-surface); border: 0; border-left: 1px solid var(--mg-border); box-shadow: var(--mg-shadow-overlay);
}
.drawer:not([open]) { display: none; }
.drawer::backdrop { background: rgba(22, 24, 29, 0.32); }
.drawer--wide { width: min(960px, 100vw); }
.drawer__header { display: flex; align-items: flex-start; gap: var(--mg-space-3); padding: var(--mg-space-4) var(--mg-space-5); border-bottom: 1px solid var(--mg-border); }
.drawer__title { font-size: var(--mg-fs-18); font-weight: var(--mg-fw-semibold); }
.drawer__body { flex: 1 1 auto; overflow: auto; padding: var(--mg-space-5); }
.drawer__footer { display: flex; justify-content: flex-end; gap: var(--mg-space-2); padding: var(--mg-space-3) var(--mg-space-5); border-top: 1px solid var(--mg-border); background: var(--mg-surface-subtle); }

/* Inline confirmation strip (an alternative to a modal for row-level confirmations). */
.confirm-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); padding: var(--mg-space-3) var(--mg-space-4); background: var(--mg-surface-subtle); border: 1px solid var(--mg-border-strong); border-radius: var(--mg-radius-lg); }

/* 14. Toasts ----------------------------------------------------------------------------------------------- */
.toast-region { position: fixed; right: var(--mg-space-5); bottom: var(--mg-space-5); z-index: 200; display: flex; flex-direction: column; gap: var(--mg-space-2); max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  display: flex; gap: var(--mg-space-3); align-items: flex-start; padding: var(--mg-space-3) var(--mg-space-4);
  background: var(--mg-n-900); color: #fff; border-radius: var(--mg-radius-lg); box-shadow: var(--mg-shadow-overlay);
  font-size: var(--mg-fs-14); pointer-events: auto; animation: mg-toast-in 160ms ease-out;
}
.toast--success { border-left: 4px solid #3FB28A; }
.toast--danger { border-left: 4px solid #F97066; }
.toast--warning { border-left: 4px solid #F5C451; }
.toast a { color: var(--mg-text-inverse); font-weight: var(--mg-fw-semibold); }
.toast a:hover { color: var(--mg-green-100); }
.toast__close { margin-left: auto; background: none; border: 0; color: #fff; opacity: 0.7; cursor: pointer; font: inherit; padding: 0 2px; }
.toast__close:hover { opacity: 1; }
@keyframes mg-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 15. Empty states, skeletons, spinner --------------------------------------------------------------------- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--mg-space-2); padding: var(--mg-space-8) var(--mg-space-5); color: var(--mg-text-muted); }
.empty-state__icon { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--mg-green-50); color: var(--mg-green); margin-bottom: var(--mg-space-2); }
.empty-state__title { font-size: var(--mg-fs-16); font-weight: var(--mg-fw-semibold); color: var(--mg-text); }
.empty-state__text { max-width: 44ch; }
.empty-state .btn { margin-top: var(--mg-space-3); }
.empty-state--compact { padding: var(--mg-space-5); }

.skeleton { display: block; background: linear-gradient(90deg, var(--mg-n-100) 0%, var(--mg-n-50) 50%, var(--mg-n-100) 100%); background-size: 200% 100%; border-radius: var(--mg-radius-sm); animation: mg-shimmer 1.4s ease-in-out infinite; }
.skeleton--text { height: 12px; margin: 6px 0; }
.skeleton--title { height: 20px; width: 40%; margin: 4px 0 12px; }
.skeleton--block { height: 96px; border-radius: var(--mg-radius-lg); }
.skeleton--w-25 { width: 25%; } .skeleton--w-50 { width: 50%; } .skeleton--w-75 { width: 75%; }
@keyframes mg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--mg-n-300); border-right-color: var(--mg-green); animation: mg-spin 0.7s linear infinite; vertical-align: -3px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes mg-spin { to { transform: rotate(360deg); } }

.loading-block { display: flex; align-items: center; justify-content: center; gap: var(--mg-space-2); padding: var(--mg-space-8); color: var(--mg-text-muted); }

/* 16. Code & diff ------------------------------------------------------------------------------------------ */
.code { margin: 0; padding: var(--mg-space-3) var(--mg-space-4); background: var(--mg-surface-subtle); border: 1px solid var(--mg-border); border-radius: var(--mg-radius); font-family: var(--mg-mono); font-size: var(--mg-fs-13); line-height: 1.55; overflow: auto; white-space: pre; color: var(--mg-n-800); }
.code--wrap { white-space: pre-wrap; word-break: break-word; }
.inline-code { padding: 1px 5px; background: var(--mg-surface-sunken); border-radius: var(--mg-radius-sm); font-family: var(--mg-mono); font-size: 0.88em; }
.secret-box { display: flex; align-items: center; gap: var(--mg-space-2); padding: var(--mg-space-2) var(--mg-space-3); background: var(--mg-green-25); border: 1px dashed var(--mg-green-200); border-radius: var(--mg-radius); font-family: var(--mg-mono); font-size: var(--mg-fs-13); word-break: break-all; }

.diff-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); overflow: hidden; background: var(--mg-surface); min-height: 320px; }
@media (max-width: 1024px) { .diff-layout { grid-template-columns: minmax(0, 1fr); } }
.file-tree { border-right: 1px solid var(--mg-border); background: var(--mg-surface-subtle); padding: var(--mg-space-2); overflow: auto; max-height: 70vh; font-size: var(--mg-fs-13); }
@media (max-width: 1024px) { .file-tree { border-right: 0; border-bottom: 1px solid var(--mg-border); max-height: 240px; } }
.file-tree ul { list-style: none; margin: 0; padding: 0 0 0 var(--mg-space-3); }
.file-tree > ul { padding-left: 0; }
.file-tree__dir { padding: 3px var(--mg-space-2); color: var(--mg-text-muted); font-weight: var(--mg-fw-medium); }
.file-tree__file {
  display: flex; align-items: center; gap: var(--mg-space-2); width: 100%; padding: 4px var(--mg-space-2);
  font: inherit; font-family: var(--mg-mono); font-size: var(--mg-fs-12); color: var(--mg-text); text-align: left;
  background: none; border: 0; border-radius: var(--mg-radius-sm); cursor: pointer;
}
.file-tree__file:hover { background: var(--mg-surface-sunken); }
.file-tree__file[aria-current="true"] { background: var(--mg-green-50); color: var(--mg-green-700); font-weight: var(--mg-fw-semibold); }
.file-tree__stat { margin-left: auto; font-size: var(--mg-fs-12); white-space: nowrap; }
.file-tree__stat .add { color: var(--mg-green); }
.file-tree__stat .del { color: var(--mg-danger); }

.diff { overflow: auto; max-height: 70vh; font-family: var(--mg-mono); font-size: var(--mg-fs-12); line-height: 1.6; }
.diff__file + .diff__file { border-top: 1px solid var(--mg-border); }
.diff__file-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--mg-space-2); padding: var(--mg-space-2) var(--mg-space-3); background: var(--mg-surface); border-bottom: 1px solid var(--mg-border); font-weight: var(--mg-fw-semibold); }
.diff table { border-collapse: collapse; width: 100%; }
.diff td { padding: 0 var(--mg-space-3); white-space: pre; vertical-align: top; }
.diff .ln { width: 1%; min-width: 44px; text-align: right; color: var(--mg-text-muted); user-select: none; border-right: 1px solid var(--mg-border); padding: 0 var(--mg-space-2); }
.diff .mk { width: 1%; padding: 0 0 0 var(--mg-space-2); user-select: none; color: var(--mg-text-muted); }
.diff tr.add td { background: var(--mg-diff-add-bg); }
.diff tr.add .mk { color: var(--mg-diff-add-mark); font-weight: var(--mg-fw-bold); }
.diff tr.del td { background: var(--mg-diff-del-bg); }
.diff tr.del .mk { color: var(--mg-diff-del-mark); font-weight: var(--mg-fw-bold); }
.diff tr.hunk td { background: var(--mg-diff-hunk-bg); color: var(--mg-text-muted); padding-top: 2px; padding-bottom: 2px; }
.diff tr.flagged td:first-child { box-shadow: inset 3px 0 0 var(--mg-warning-strong); }
.diff tr.flagged.block td:first-child { box-shadow: inset 3px 0 0 var(--mg-danger); }
.diff .flag-row td { white-space: normal; font-family: var(--mg-font); font-size: var(--mg-fs-13); background: var(--mg-warning-bg); color: var(--mg-n-900); padding: var(--mg-space-2) var(--mg-space-3); border-top: 1px solid var(--mg-warning-border); border-bottom: 1px solid var(--mg-warning-border); }
.diff .flag-row.block td { background: var(--mg-danger-bg); border-color: var(--mg-danger-border); }

/* 17. Timeline, description list, progress, steps, sparkline ---------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline__item { position: relative; display: grid; grid-template-columns: 72px 16px minmax(0, 1fr); gap: var(--mg-space-3); padding: 6px 0; font-size: var(--mg-fs-13); }
.timeline__time { color: var(--mg-text-muted); font-family: var(--mg-mono); font-size: var(--mg-fs-12); text-align: right; padding-top: 1px; }
.timeline__marker { position: relative; display: flex; justify-content: center; }
.timeline__marker::before { content: ""; position: absolute; top: 0; bottom: -12px; width: 1px; background: var(--mg-border); }
.timeline__item:last-child .timeline__marker::before { display: none; }
.timeline__marker .dot { position: relative; margin-top: 5px; box-shadow: 0 0 0 3px var(--mg-surface); }
.timeline__step { font-weight: var(--mg-fw-semibold); margin-right: var(--mg-space-2); }
.timeline__item--error .timeline__message { color: var(--mg-danger); }

.dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--mg-space-2) var(--mg-space-5); margin: 0; font-size: var(--mg-fs-14); }
.dl dt { color: var(--mg-text-muted); }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .dl dd { margin-bottom: var(--mg-space-2); } }

.progress { height: 6px; background: var(--mg-n-100); border-radius: var(--mg-radius-pill); overflow: hidden; }
.progress__bar { height: 100%; background: var(--mg-green); border-radius: inherit; }

.steps { display: flex; gap: var(--mg-space-2); list-style: none; padding: 0; margin: 0; counter-reset: step; flex-wrap: wrap; }
.steps__item { display: flex; align-items: center; gap: var(--mg-space-2); font-size: var(--mg-fs-13); color: var(--mg-text-muted); counter-increment: step; }
.steps__item::before {
  content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--mg-border-strong); background: var(--mg-surface); font-weight: var(--mg-fw-semibold); font-size: var(--mg-fs-12);
}
.steps__item + .steps__item::after { order: -1; content: ""; width: 24px; height: 1px; background: var(--mg-border-strong); }
.steps__item[aria-current="step"] { color: var(--mg-text); font-weight: var(--mg-fw-semibold); }
.steps__item[aria-current="step"]::before { border-color: var(--mg-green); background: var(--mg-green); color: #fff; }
.steps__item.is-done::before { content: "\2713"; border-color: var(--mg-green-200); background: var(--mg-green-50); color: var(--mg-green); }

.sparkline { display: block; width: 100%; height: 32px; }
.sparkline__line { fill: none; stroke: var(--mg-green); stroke-width: 1.5; }
.sparkline__area { fill: var(--mg-green-50); }
.uptime-bar { display: flex; gap: 2px; height: 28px; align-items: stretch; }
.uptime-bar__cell { flex: 1 1 0; min-width: 2px; border-radius: 1px; background: var(--mg-green-200); }
.uptime-bar__cell--down { background: var(--mg-danger); }
.uptime-bar__cell--partial { background: var(--mg-warning-strong); }
.uptime-bar__cell--unknown { background: var(--mg-n-200); }

/* 18. App shell -------------------------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--mg-green); text-decoration: none; font-weight: var(--mg-fw-bold); font-size: var(--mg-fs-18); letter-spacing: -0.01em; }
.brand:hover { color: var(--mg-green); }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__name { color: var(--mg-green); }

.app { display: grid; grid-template-columns: var(--mg-sidebar-w) minmax(0, 1fr); min-height: 100vh; background: var(--mg-surface-subtle); }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--mg-space-4);
  padding: var(--mg-space-4) var(--mg-space-3); background: var(--mg-surface); border-right: 1px solid var(--mg-border); overflow-y: auto;
}
.sidebar__brand { padding: var(--mg-space-1) var(--mg-space-2) var(--mg-space-2); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__section { margin-top: var(--mg-space-3); padding: 0 var(--mg-space-3) var(--mg-space-1); font-size: var(--mg-fs-12); font-weight: var(--mg-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mg-text-muted); }
.nav__item {
  display: flex; align-items: center; gap: var(--mg-space-3); padding: 7px var(--mg-space-3);
  font-size: var(--mg-fs-14); font-weight: var(--mg-fw-medium); color: var(--mg-n-700); text-decoration: none;
  border-radius: var(--mg-radius);
}
.nav__item:hover { background: var(--mg-surface-sunken); color: var(--mg-text); }
.nav__item[aria-current="page"] { background: var(--mg-green-50); color: var(--mg-green-700); font-weight: var(--mg-fw-semibold); }
.nav__item[aria-current="page"] .nav__icon { color: var(--mg-green); }
.nav__icon { width: 18px; height: 18px; flex: none; color: var(--mg-n-500); }
.nav__item .count { margin-left: auto; }
.sidebar__footer { margin-top: auto; padding: var(--mg-space-2) var(--mg-space-3); font-size: var(--mg-fs-12); color: var(--mg-text-muted); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--mg-space-3);
  height: var(--mg-topbar-h); padding: 0 var(--mg-space-5); background: var(--mg-surface); border-bottom: 1px solid var(--mg-border);
}
.topbar__menu-btn { display: none; }
.topbar__brand { display: none; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--mg-space-2); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mg-green-50); color: var(--mg-green-700); font-size: var(--mg-fs-12); font-weight: var(--mg-fw-semibold); flex: none; }
.user-button { display: inline-flex; align-items: center; gap: var(--mg-space-2); padding: 4px var(--mg-space-2); font: inherit; color: var(--mg-text); background: none; border: 1px solid transparent; border-radius: var(--mg-radius); cursor: pointer; }
.user-button:hover { background: var(--mg-surface-sunken); }
.org-switch { display: inline-flex; align-items: center; gap: var(--mg-space-2); }

.page { width: 100%; max-width: var(--mg-content-max); margin: 0 auto; padding: var(--mg-space-5) var(--mg-space-6) var(--mg-space-9); }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--mg-space-3) var(--mg-space-4); margin-bottom: var(--mg-space-5); }
.page-header__titles { min-width: 0; flex: 1 1 320px; }
.page-header__title { font-size: var(--mg-fs-24); font-weight: var(--mg-fw-semibold); letter-spacing: -0.01em; }
.page-header__subtitle { margin-top: var(--mg-space-1); color: var(--mg-text-muted); }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); align-items: center; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); align-items: center; font-size: var(--mg-fs-13); color: var(--mg-text-muted); margin-bottom: var(--mg-space-2); list-style: none; padding: 0; }
.breadcrumb a { color: var(--mg-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--mg-green); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--mg-space-1); color: var(--mg-n-400); }
.section { margin-top: var(--mg-space-6); }
.section__title { font-size: var(--mg-fs-16); font-weight: var(--mg-fw-semibold); margin-bottom: var(--mg-space-3); }
.list { list-style: none; margin: 0; padding: 0; }
.list__item { display: flex; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-3) var(--mg-space-5); border-bottom: 1px solid var(--mg-border); min-width: 0; }
.list__item:last-child { border-bottom: 0; }
.list__item--link { color: inherit; text-decoration: none; }
.list__item--link:hover { background: var(--mg-n-25); color: inherit; }
.list__main { flex: 1 1 auto; min-width: 0; }
.list__title { font-weight: var(--mg-fw-semibold); }
.list__meta { font-size: var(--mg-fs-13); color: var(--mg-text-muted); }

.sidebar-backdrop { display: none; }
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* Closed drawer: off-screen AND hidden, so keyboard users don't tab through invisible links. */
  .sidebar { position: fixed; z-index: 80; left: 0; top: 0; width: var(--mg-sidebar-w); transform: translateX(-100%); visibility: hidden; transition: transform 160ms ease, visibility 0s linear 160ms; box-shadow: none; }
  .app.is-nav-open .sidebar { transform: none; visibility: visible; transition: transform 160ms ease; box-shadow: var(--mg-shadow-overlay); }
  .app.is-nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(22, 24, 29, 0.32); }
  .topbar__menu-btn { display: inline-flex; }
  .topbar__brand { display: inline-flex; }
  .page { padding: var(--mg-space-5) var(--mg-space-5) var(--mg-space-8); }
}
@media (max-width: 640px) {
  .page { padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-8); }
  .topbar { padding: 0 var(--mg-space-4); }
  .kpi--feature { grid-column: span 1; }
}

/* Auth pages (login / invite). */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--mg-space-6) var(--mg-space-4); background: var(--mg-surface-subtle); }
.auth__card { width: 100%; max-width: 400px; padding: var(--mg-space-6); background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); box-shadow: var(--mg-shadow); }
.auth__brand { display: flex; justify-content: center; margin-bottom: var(--mg-space-5); }
.auth__title { font-size: var(--mg-fs-20); font-weight: var(--mg-fw-semibold); text-align: center; }
.auth__subtitle { margin-top: var(--mg-space-1); color: var(--mg-text-muted); text-align: center; }
.auth__footer { margin-top: var(--mg-space-5); font-size: var(--mg-fs-13); color: var(--mg-text-muted); text-align: center; }

/* 19. Print ------------------------------------------------------------------------------------------------ */
@media print {
  .sidebar, .topbar, .banner, .toast-region, .no-print { display: none !important; }
  .app { display: block; background: #fff; }
  .page { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}