/* ==========================================================================
   mg-components.css — FLX Manage
   One stylesheet for every Manage screen.
   Order: 1 Tokens · 2 Base · 3 Layout · 4 Components · 5 Django layer
   Breakpoints (px): 1199 results table → cards · 1279 related rows → cards ·
   959 sidebar → phone header, login split → hero, picker stacks ·
   599 phone density (16px inputs, stacked rows, full-width buttons)
   ========================================================================== */

/* 1. TOKENS ================================================================ */

/* Figtree, SIL Open Font License 1.1 — static/fonts/figtree/license.txt */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../fonts/figtree/latin-ext.8811e895c448.woff2") format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../fonts/figtree/latin.392aed3eb142.woff2") format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Color · text */
  --mg-color-ink: #1b2230;
  --mg-color-ink-strong: #0b1a30;
  --mg-color-text-secondary: #3d4554;
  --mg-color-text-muted: #5a6372;
  --mg-color-separator: #9aa3b0;
  --mg-color-on-dark: #ffffff;
  --mg-color-on-navy-muted: #d7e3ee;
  --mg-color-on-art-muted: #d3e4f5;

  /* Color · surfaces and lines */
  --mg-color-surface: #ffffff;
  --mg-color-surface-sunken: #fafbfc;
  --mg-color-page: #f5f6f8;
  --mg-color-fill: #eef0f3;
  --mg-color-fill-strong: #e6e9ee;
  --mg-color-selected: #eef3f8;
  --mg-color-border: #e3e6eb;
  --mg-color-divider: #eef0f3;
  --mg-color-border-button: #c9cfd8;
  --mg-color-border-input: #878f9a;

  /* Color · brand and action */
  --mg-color-navy: #0e3a5f;
  --mg-color-primary: #1d5a8e;
  --mg-color-primary-hover: #174b77;
  --mg-color-link: #0a4f8a;
  --mg-color-link-hover: #073a66;
  --mg-color-focus: #1d4ed8;
  --mg-color-focus-gap: #ffffff;
  --mg-color-focus-halo: oklch(88.2% 0.059 254.128);

  /* Color · status */
  --mg-color-danger: #b42318;
  --mg-color-danger-hover: #8f1d14;
  --mg-color-error-text: oklch(50.5% 0.213 27.518);
  --mg-color-error-strong: #8f1d14;
  --mg-color-error-surface: #fceeec;
  --mg-color-error-border: #e9b7b1;
  --mg-color-negative-surface: #fce9e7;
  --mg-color-positive-text: #17663a;
  --mg-color-positive-surface: #e3f4ea;
  --mg-color-positive-border: #b5dec4;
  --mg-color-pending-text: #8a4b00;
  --mg-color-pending-surface: #fdf1d8;
  --mg-color-pending-border: #edcf8e;
  --mg-color-neutral-text: #4a5260;
  --mg-color-neutral-surface: #f1f2f4;
  --mg-color-info-text: #0a4f8a;
  --mg-color-info-surface: #e7eef6;

  /* Color · login art (wide = beside the form, compact = phone hero) */
  --mg-art-wide:
    linear-gradient(200deg, rgba(6, 19, 42, 0) 55%, rgba(6, 19, 42, 0.25) 100%),
    radial-gradient(
      150% 120% at 8% 108%,
      rgba(46, 128, 232, 0.34) 0%,
      rgba(46, 128, 232, 0) 68%
    ),
    radial-gradient(
      140% 110% at 72% 100%,
      rgba(23, 172, 255, 0.12) 0%,
      rgba(23, 172, 255, 0) 62%
    ),
    radial-gradient(
      150% 130% at 104% -8%,
      rgba(32, 80, 170, 0.42) 0%,
      rgba(32, 80, 170, 0) 68%
    ),
    radial-gradient(
      120% 100% at 35% 30%,
      rgba(110, 190, 255, 0.05) 0%,
      rgba(110, 190, 255, 0) 62%
    ),
    linear-gradient(160deg, #040c1c 0%, #06132b 55%, #050f22 100%);
  --mg-art-compact:
    linear-gradient(
      180deg,
      rgba(6, 19, 42, 0.15) 0%,
      rgba(6, 19, 42, 0) 35%,
      rgba(6, 19, 42, 0.5) 100%
    ),
    radial-gradient(
      150% 120% at 8% 108%,
      rgba(46, 128, 232, 0.55) 0%,
      rgba(46, 128, 232, 0) 68%
    ),
    radial-gradient(
      140% 110% at 72% 100%,
      rgba(23, 172, 255, 0.24) 0%,
      rgba(23, 172, 255, 0) 62%
    ),
    radial-gradient(
      150% 130% at 104% -8%,
      rgba(40, 96, 196, 0.6) 0%,
      rgba(40, 96, 196, 0) 68%
    ),
    radial-gradient(
      120% 100% at 35% 30%,
      rgba(110, 190, 255, 0.1) 0%,
      rgba(110, 190, 255, 0) 62%
    ),
    linear-gradient(160deg, #040c1c 0%, #06132b 55%, #050f22 100%);
  --mg-gradient-auth-button: linear-gradient(135deg, #0e4f8c 0%, #1b6fbf 100%);
  --mg-gradient-auth-button-hover: linear-gradient(
    135deg,
    #0b4277 0%,
    #165ea3 100%
  );

  /* Type */
  --mg-font-sans: 'Figtree', system-ui, sans-serif;
  --mg-font-size-12: 12px;
  --mg-font-size-13: 13px;
  --mg-font-size-14: 14px;
  --mg-font-size-15: 15px;
  --mg-font-size-16: 16px;
  --mg-font-size-17: 17px;
  --mg-font-size-28: 28px;
  --mg-font-size-32: 32px;
  --mg-font-size-36: 36px;
  --mg-font-size-44: 44px;
  --mg-font-weight-regular: 400;
  --mg-font-weight-medium: 500;
  --mg-font-weight-semibold: 600;
  --mg-font-weight-bold: 700;
  --mg-line-height-display: 1.05;
  --mg-line-height-count: 1.1;
  --mg-line-height-compact: 1.3;
  --mg-line-height-label: 1.35;
  --mg-line-height-body: 1.5;
  --mg-letter-spacing-display: -0.03em;
  --mg-letter-spacing-title: -0.02em;
  --mg-letter-spacing-caps: 0.06em;

  /* Space */
  --mg-space-2: 2px;
  --mg-space-3: 3px;
  --mg-space-4: 4px;
  --mg-space-6: 6px;
  --mg-space-8: 8px;
  --mg-space-10: 10px;
  --mg-space-12: 12px;
  --mg-space-16: 16px;
  --mg-space-20: 20px;
  --mg-space-24: 24px;
  --mg-space-28: 28px;
  --mg-space-32: 32px;
  --mg-space-40: 40px;
  --mg-space-48: 48px;
  --mg-space-56: 56px;
  --mg-space-96: 96px;

  /* Size */
  --mg-size-hidden: 1px;
  --mg-size-action-min: 160px;
  --mg-size-control-sm: 36px;
  --mg-size-control: 44px;
  --mg-size-control-lg: 48px;
  --mg-size-control-xl: 52px;
  --mg-size-search-button: 34px;
  --mg-size-search-button-touch: 40px;
  --mg-size-search: 340px;
  --mg-size-search-page: 560px;
  --mg-size-bulk-bar: 56px;
  --mg-size-sidebar: 272px;
  --mg-size-shell-brand: 104px;
  --mg-size-phone-header: 72px;
  --mg-size-avatar: 36px;
  --mg-size-icon-sm: 14px;
  --mg-size-icon: 16px;
  --mg-size-icon-md: 18px;
  --mg-size-icon-lg: 20px;
  --mg-size-checkbox: 18px;
  --mg-size-checkbox-touch: 20px;
  --mg-size-checkbox-column: 72px;
  --mg-size-name-column: 240px;
  --mg-size-checkbox-column-compact: 24px;
  --mg-size-badge-column: 84px;
  --mg-size-badge-column-compact: 72px;
  --mg-size-toolbar-divider: 28px;
  --mg-size-filter-menu: 240px;
  --mg-size-content-dashboard: 1176px;
  --mg-size-content-form: 896px;
  --mg-size-empty-text: 420px;
  --mg-size-auth-panel: 600px;
  --mg-size-auth-form: 400px;
  --mg-size-auth-hero: 300px;
  --mg-size-auth-logo: 200px;
  --mg-size-auth-logo-compact: 168px;
  --mg-size-flx-logo-small: 88px;
  --mg-size-raw-id: 160px;
  --mg-size-selector-list: 220px;
  --mg-size-inline-delete: 72px;

  /* Client logo presets */
  --mg-logo-wide-width: 224px;
  --mg-logo-wide-height: 64px;
  --mg-logo-compact-width: 224px;
  --mg-logo-compact-height: 104px;
  --mg-logo-wide-width-phone: 236px;
  --mg-logo-wide-height-phone: 44px;
  --mg-logo-compact-width-phone: 200px;
  --mg-logo-compact-height-phone: 64px;

  /* Border */
  --mg-border-width: 1px;
  --mg-border-width-strong: 1.5px;
  --mg-border-width-error: 2px;
  --mg-border-width-accent: 4px;
  --mg-focus-width: 3px;
  --mg-focus-offset: 3px;
  --mg-focus-gap: 2px;
  --mg-focus-halo: 4px;
  --mg-shadow-focus:
    0 0 0 var(--mg-focus-gap) var(--mg-color-focus-gap),
    0 0 0 var(--mg-focus-halo) var(--mg-color-focus-halo);

  /* Radius */
  --mg-radius-sm: 6px;
  --mg-radius-md: 8px;
  --mg-radius-lg: 10px;
  --mg-radius-xl: 12px;
  --mg-radius-sheet: 24px;
  --mg-radius-pill: 999px;
  --mg-radius-round: 50%;

  /* Shadow */
  --mg-shadow-menu: 0 8px 24px rgba(27, 34, 48, 0.12);
  --mg-shadow-auth-button:
    inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px rgba(14, 79, 140, 0.28);

  /* Motion */
  --mg-duration-fast: 120ms;
  --mg-easing: ease-out;

  /* Z-index */
  --mg-z-menu: 20;
  --mg-z-skip-link: 30;

  /* Icons drawn by CSS (masks take the text color) */
  --mg-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M10 6v4.5M10 13.5v.5' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --mg-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='m6.6 10.2 2.3 2.3 4.6-4.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mg-icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M6 12l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mg-icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 16V4M6 8l4-4 4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mg-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11.5M11 5.5 15.5 10 11 14.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mg-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16 10H4.5M9 5.5 4.5 10 9 14.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mg-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.5v11M4.5 10h11' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --mg-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='9' cy='9' r='5.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='m13.2 13.2 3.6 3.6' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --mg-image-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' fill='none' stroke='%231B2230' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mg-image-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.75' y='.75' width='18.5' height='18.5' rx='3.25' fill='white' stroke='%23767F8C' stroke-width='1.5'/%3E%3C/svg%3E");
  --mg-image-checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='4' fill='%231D5A8E'/%3E%3Cpath d='m5 10.4 3.3 3.3L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mg-image-checkbox-checked-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='4' fill='white'/%3E%3Cpath d='m5 10.4 3.3 3.3L15 7' fill='none' stroke='%230E3A5F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2. BASE ================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--mg-font-sans);
  color: var(--mg-color-ink);
  background: var(--mg-color-page);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
fieldset {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

a {
  color: var(--mg-color-link);
}

a:hover {
  color: var(--mg-color-link-hover);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button,
summary {
  user-select: none;
}

[hidden] {
  display: none;
}

/* Core's keyboard focus ring (docs/accessibility.md): a white gap, a soft
   halo, and a 3px blue outline that reads on light and navy alike. */
:focus-visible {
  outline: var(--mg-focus-width) solid var(--mg-color-focus);
  outline-offset: var(--mg-focus-offset);
  box-shadow: var(--mg-shadow-focus);
}

/* 3. LAYOUT ================================================================ */

/* App frame: sidebar column + main column; phone header above main below 960px */
.mg-app {
  display: grid;
  grid-template-columns: var(--mg-size-sidebar) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--mg-color-page);
}

.mg-app__main {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-24);
  min-width: 0;
  padding: var(--mg-space-48);
}

.mg-app__main--dashboard {
  gap: var(--mg-space-48);
  max-width: var(--mg-size-content-dashboard);
}

.mg-app__main--form {
  padding-top: var(--mg-space-32);
}

/* A form keeps a readable measure; the record's related lists run full width */
.mg-app__main--form > :not(.mg-related) {
  max-width: calc(var(--mg-size-content-form) - 2 * var(--mg-space-48));
}

@media (max-width: 959px) {
  .mg-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .mg-app__main {
    padding: var(--mg-space-32) var(--mg-space-24);
  }
}

@media (max-width: 599px) {
  .mg-app__main {
    gap: var(--mg-space-16);
    padding: var(--mg-space-24) var(--mg-space-16) var(--mg-space-32);
  }

  .mg-app__main--dashboard {
    gap: var(--mg-space-32);
    padding: var(--mg-space-32) var(--mg-space-16);
  }

  .mg-app__main--form {
    padding-top: var(--mg-space-16);
  }
}

/* Section: a titled group inside main */
.mg-section {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-16);
}

.mg-section__title {
  font-size: var(--mg-font-size-17);
  font-weight: var(--mg-font-weight-semibold);
}

@media (max-width: 599px) {
  .mg-section {
    gap: var(--mg-space-12);
  }

  .mg-section__title {
    padding: 0 calc(var(--mg-space-16) + var(--mg-border-width));
  }
}

/* 4. COMPONENTS ============================================================ */

/* Visually hidden: kept for screen readers */
.mg-visually-hidden {
  position: absolute;
  width: var(--mg-size-hidden);
  height: var(--mg-size-hidden);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link */
.mg-skip-link {
  position: absolute;
  top: calc(var(--mg-space-96) * -1);
  left: var(--mg-space-16);
  z-index: var(--mg-z-skip-link);
  padding: var(--mg-space-12) var(--mg-space-16);
  background: var(--mg-color-surface);
  border-radius: var(--mg-radius-md);
  box-shadow: var(--mg-shadow-menu);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-skip-link:focus {
  top: var(--mg-space-16);
}

/* Icon: inline SVG, stroke = currentColor */
.mg-icon {
  flex: none;
  width: var(--mg-size-icon);
  height: var(--mg-size-icon);
}

.mg-icon--md {
  width: var(--mg-size-icon-md);
  height: var(--mg-size-icon-md);
}

/* Brand: the logo link. Wide fits to width, Compact fits to height. */
.mg-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.mg-brand__logo {
  display: block;
  width: auto;
  height: auto;
}

.mg-brand--wide .mg-brand__logo {
  max-width: var(--mg-logo-wide-width);
  max-height: var(--mg-logo-wide-height);
}

.mg-brand--compact .mg-brand__logo {
  max-width: var(--mg-logo-compact-width);
  max-height: var(--mg-logo-compact-height);
}

@media (max-width: 959px) {
  .mg-brand--wide .mg-brand__logo {
    max-width: min(var(--mg-logo-wide-width-phone), 100%);
    max-height: var(--mg-logo-wide-height-phone);
  }

  .mg-brand--compact .mg-brand__logo {
    max-width: min(var(--mg-logo-compact-width-phone), 100%);
    max-height: var(--mg-logo-compact-height-phone);
  }
}

/* Avatar: initials */
.mg-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--mg-size-avatar);
  height: var(--mg-size-avatar);
  border-radius: var(--mg-radius-round);
  background: var(--mg-color-navy);
  color: var(--mg-color-on-dark);
  font-size: var(--mg-font-size-14);
  font-weight: var(--mg-font-weight-semibold);
}

/* Shell: sidebar on desktop, phone header below 960px */
.mg-shell {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  background: var(--mg-color-surface);
  border-right: var(--mg-border-width) solid var(--mg-color-border);
}

.mg-shell__brand {
  min-height: var(--mg-size-shell-brand);
  padding: var(--mg-space-24) var(--mg-space-24) var(--mg-space-16);
}

.mg-shell__nav {
  padding: var(--mg-space-8) var(--mg-space-16);
}

.mg-shell__account {
  margin-top: auto;
  padding: var(--mg-space-16);
  border-top: var(--mg-border-width) solid var(--mg-color-border);
}

.mg-shell__menu {
  display: none;
}

.mg-shell__menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-8);
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-16);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-button);
  border-radius: var(--mg-radius-md);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
  list-style: none;
  cursor: pointer;
}

.mg-shell__menu-toggle::-webkit-details-marker {
  display: none;
}

.mg-shell__menu[open] .mg-shell__menu-toggle {
  background: var(--mg-color-fill);
  border-color: var(--mg-color-ink);
}

.mg-shell__menu-label {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-8);
}

.mg-shell__menu[open] .mg-shell__menu-label--closed,
.mg-shell__menu:not([open]) .mg-shell__menu-label--open {
  display: none;
}

.mg-shell__menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: var(--mg-z-menu);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--mg-size-phone-header));
  background: var(--mg-color-surface);
  border-top: var(--mg-border-width) solid var(--mg-color-border);
}

.mg-shell__menu:not([open]) .mg-shell__menu-panel {
  display: none;
}

.mg-shell__menu-nav {
  padding: var(--mg-space-16);
}

.mg-shell__menu-account {
  margin-top: auto;
  padding: var(--mg-space-16);
  border-top: var(--mg-border-width) solid var(--mg-color-border);
}

@media (max-width: 959px) {
  .mg-shell {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-12);
    height: auto;
    min-height: var(--mg-size-phone-header);
    padding: var(--mg-space-12) var(--mg-space-16) var(--mg-space-12)
      var(--mg-space-20);
    overflow: visible;
    border-right: 0;
    border-bottom: var(--mg-border-width) solid var(--mg-color-border);
  }

  .mg-shell__brand {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
  }

  .mg-shell__menu {
    flex: none;
  }

  .mg-shell__search,
  .mg-shell__nav,
  .mg-shell__account {
    display: none;
  }

  .mg-shell__menu {
    display: block;
  }
}

/* Nav: section links in the sidebar and the phone menu */
.mg-nav {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
}

.mg-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
  list-style: none;
}

.mg-nav__heading {
  margin: var(--mg-space-16) var(--mg-space-12) var(--mg-space-4);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-13);
  font-weight: var(--mg-font-weight-semibold);
  letter-spacing: var(--mg-letter-spacing-caps);
  text-transform: uppercase;
}

.mg-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-8);
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-12);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-medium);
  text-decoration: none;
}

.mg-nav__link:hover {
  background: var(--mg-color-page);
  color: var(--mg-color-ink);
}

.mg-nav__link--current,
.mg-nav__link--current:hover {
  background: var(--mg-color-fill);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-nav__count {
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-13);
  font-weight: var(--mg-font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* A client in the operator admin, and its sections while it's open */
.mg-nav__chevron {
  flex: none;
  color: var(--mg-color-text-muted);
}

.mg-nav__link--open {
  font-weight: var(--mg-font-weight-semibold);
}

.mg-nav__list--sub {
  margin: var(--mg-space-4) 0 var(--mg-space-8) var(--mg-space-12);
  padding-left: var(--mg-space-8);
  border-left: var(--mg-border-width) solid var(--mg-color-border);
}

.mg-nav__link--sub {
  min-height: var(--mg-size-control-sm);
  padding-block: var(--mg-space-6);
  font-size: var(--mg-font-size-14);
}

.mg-nav--menu .mg-nav__link {
  min-height: var(--mg-size-control-lg);
  font-size: var(--mg-font-size-16);
}

.mg-nav--menu .mg-nav__count {
  font-size: var(--mg-font-size-14);
}

/* Account: who is logged in + their links. Popover in the sidebar, inline in the phone menu. */
.mg-account {
  position: relative;
}

.mg-account__toggle {
  display: flex;
  align-items: center;
  gap: var(--mg-space-12);
  padding: var(--mg-space-8);
  border-radius: var(--mg-radius-md);
  list-style: none;
  cursor: pointer;
}

.mg-account__toggle::-webkit-details-marker {
  display: none;
}

.mg-account__toggle:hover,
.mg-account[open] .mg-account__toggle {
  background: var(--mg-color-fill);
}

.mg-account__identity {
  display: flex;
  align-items: center;
  gap: var(--mg-space-12);
  padding: var(--mg-space-8) var(--mg-space-12) var(--mg-space-12);
}

.mg-account__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mg-account__name {
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-account__email {
  overflow: hidden;
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-13);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-account__chevron {
  transform: rotate(180deg);
}

.mg-account[open] .mg-account__chevron {
  transform: none;
}

.mg-account__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--mg-space-8));
  left: 0;
  z-index: var(--mg-z-menu);
  display: flex;
  flex-direction: column;
  padding: var(--mg-space-8);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border);
  border-radius: var(--mg-radius-xl);
  box-shadow: var(--mg-shadow-menu);
}

.mg-account:not([open]) .mg-account__menu {
  display: none;
}

.mg-account__links {
  display: flex;
  flex-direction: column;
}

.mg-account__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-12);
  background: none;
  border: 0;
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-medium);
  text-align: left;
  text-decoration: none;
}

.mg-account__item:hover {
  background: var(--mg-color-page);
  color: var(--mg-color-ink);
}

.mg-account__footer {
  display: flex;
  align-items: center;
  gap: var(--mg-space-8);
  margin: var(--mg-space-8) calc(var(--mg-space-8) * -1)
    calc(var(--mg-space-8) * -1);
  padding: var(--mg-space-12) var(--mg-space-20);
  border-top: var(--mg-border-width) solid var(--mg-color-divider);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-12);
}

.mg-account__flx {
  display: block;
  width: var(--mg-size-flx-logo-small);
  height: auto;
}

.mg-account--inline {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
}

.mg-account--inline .mg-account:not([open]) .mg-account__menu {
  display: none;
}

.mg-account__links {
  gap: var(--mg-space-4);
}

.mg-account--inline .mg-account__item {
  min-height: var(--mg-size-control-lg);
  font-size: var(--mg-font-size-16);
}

.mg-account--inline .mg-account__footer {
  margin: var(--mg-space-8) calc(var(--mg-space-16) * -1)
    calc(var(--mg-space-16) * -1);
  padding: var(--mg-space-16) var(--mg-space-28);
}

/* Back link: up one level */
.mg-back-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--mg-space-8);
  min-height: var(--mg-space-32);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
  text-decoration: none;
}

@media (max-width: 599px) {
  .mg-back-link {
    min-height: var(--mg-size-control);
    padding: 0 var(--mg-space-4);
  }
}

/* Page head: title, count, page actions */
.mg-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mg-space-24);
}

.mg-page-head__date {
  margin-bottom: var(--mg-space-8);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-15);
}

.mg-page-head__eyebrow {
  margin-bottom: var(--mg-space-4);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-15);
}

.mg-page-head__heading {
  min-width: 0;
}

.mg-page-head__title {
  overflow-wrap: anywhere;
  font-size: var(--mg-font-size-32);
  font-weight: var(--mg-font-weight-bold);
  letter-spacing: var(--mg-letter-spacing-title);
}

.mg-page-head__meta {
  margin-top: var(--mg-space-4);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-15);
}

.mg-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-8);
}

@media (max-width: 599px) {
  .mg-page-head {
    gap: var(--mg-space-12);
  }

  .mg-page-head__heading {
    padding: 0 var(--mg-space-4);
  }

  .mg-page-head__date {
    margin-bottom: var(--mg-space-4);
  }

  .mg-page-head__title {
    font-size: var(--mg-font-size-28);
  }

  .mg-page-head--list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mg-space-16);
  }

  .mg-page-head--list .mg-page-head__actions {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(var(--mg-size-action-min), 1fr)
    );
  }
}

/* Button */
.mg-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-8);
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-16);
  border: var(--mg-border-width) solid transparent;
  border-radius: var(--mg-radius-md);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mg-button--primary {
  background: var(--mg-color-primary);
  color: var(--mg-color-on-dark);
}

.mg-button--primary:hover {
  background: var(--mg-color-primary-hover);
  color: var(--mg-color-on-dark);
}

.mg-button--secondary {
  background: var(--mg-color-surface);
  border-color: var(--mg-color-border-button);
  color: var(--mg-color-ink);
}

.mg-button--secondary:hover {
  background: var(--mg-color-page);
  color: var(--mg-color-ink);
}

.mg-button--danger {
  background: var(--mg-color-danger);
  color: var(--mg-color-on-dark);
}

.mg-button--danger:hover {
  background: var(--mg-color-danger-hover);
  color: var(--mg-color-on-dark);
}

.mg-button--danger-inverse {
  background: var(--mg-color-surface);
  color: var(--mg-color-danger);
}

.mg-button--danger-inverse:hover {
  background: var(--mg-color-error-surface);
  color: var(--mg-color-danger-hover);
}

.mg-button--danger-quiet {
  padding: 0 var(--mg-space-12);
  background: transparent;
  color: var(--mg-color-danger);
}

.mg-button--danger-quiet:hover {
  background: var(--mg-color-error-surface);
  color: var(--mg-color-danger-hover);
}

.mg-button--auth {
  min-height: var(--mg-size-control-xl);
  padding: 0 var(--mg-space-40);
  border: 0;
  border-radius: var(--mg-radius-lg);
  background: var(--mg-gradient-auth-button);
  box-shadow: var(--mg-shadow-auth-button);
  color: var(--mg-color-on-dark);
  font-size: var(--mg-font-size-16);
}

.mg-button--auth:hover {
  background: var(--mg-gradient-auth-button-hover);
  color: var(--mg-color-on-dark);
}

.mg-button--small {
  min-height: var(--mg-size-control-sm);
  padding: 0 var(--mg-space-12);
}

.mg-button--wide {
  padding: 0 var(--mg-space-24);
}

@media (prefers-reduced-motion: no-preference) {
  .mg-button,
  .mg-nav__link,
  .mg-content-card,
  .mg-pagination__page {
    transition:
      background-color var(--mg-duration-fast) var(--mg-easing),
      border-color var(--mg-duration-fast) var(--mg-easing);
  }
}

/* Content cards: one per kind of content on the dashboard */
.mg-content-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mg-space-16);
  list-style: none;
}

.mg-content-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mg-space-16);
  height: 100%;
  padding: var(--mg-space-24);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border);
  border-radius: var(--mg-radius-xl);
  color: var(--mg-color-ink);
  text-decoration: none;
}

.mg-content-card:hover {
  border-color: var(--mg-color-border-button);
}

/* One link per card (docs/card.md): the ring wraps the card, not the title. */
.mg-content-card:has(.mg-content-card__name:focus-visible) {
  outline: var(--mg-focus-width) solid var(--mg-color-focus);
  outline-offset: var(--mg-focus-offset);
  box-shadow: var(--mg-shadow-focus);
}

.mg-content-card__name:focus-visible {
  outline: none;
  box-shadow: none;
}

.mg-content-card__title {
  font: inherit;
}

.mg-content-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
}

.mg-content-card__name {
  color: var(--mg-color-ink);
  text-decoration: none;
  font-size: var(--mg-font-size-17);
  font-weight: var(--mg-font-weight-semibold);
  line-height: var(--mg-line-height-label);
}

.mg-content-card__count {
  font-size: var(--mg-font-size-36);
  font-weight: var(--mg-font-weight-bold);
  line-height: var(--mg-line-height-count);
  letter-spacing: var(--mg-letter-spacing-title);
  font-variant-numeric: tabular-nums;
}

.mg-content-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-8);
  min-height: var(--mg-size-control-sm);
  padding: 0 var(--mg-space-12);
  border: var(--mg-border-width) solid var(--mg-color-border-button);
  border-radius: var(--mg-radius-md);
  font-size: var(--mg-font-size-14);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-content-card:hover .mg-content-card__cta {
  background: var(--mg-color-page);
}

.mg-content-card:hover .mg-content-card__name {
  color: var(--mg-color-ink);
  text-decoration: underline;
  text-underline-offset: var(--mg-space-3);
}

@media (min-width: 600px) {
  .mg-content-card__unit {
    position: absolute;
    width: var(--mg-size-hidden);
    height: var(--mg-size-hidden);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 599px) {
  .mg-content-cards {
    display: block;
    overflow: hidden;
    background: var(--mg-color-surface);
    border: var(--mg-border-width) solid var(--mg-color-border);
    border-radius: var(--mg-radius-xl);
  }

  .mg-content-cards__item {
    border-bottom: var(--mg-border-width) solid var(--mg-color-divider);
  }

  .mg-content-card {
    flex-direction: row;
    align-items: center;
    gap: var(--mg-space-12);
    height: auto;
    padding: var(--mg-space-16);
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .mg-content-card__heading {
    flex: 1;
  }

  .mg-content-card__name {
    font-size: var(--mg-font-size-16);
    line-height: var(--mg-line-height-compact);
  }

  .mg-content-card__count {
    color: var(--mg-color-text-muted);
    font-size: var(--mg-font-size-14);
    font-weight: var(--mg-font-weight-regular);
    line-height: var(--mg-line-height-compact);
    letter-spacing: normal;
  }

  .mg-content-card__cta {
    gap: var(--mg-space-6);
  }
}

/* Badge: status and activity pills (tone, never colour alone: the text says it) */
.mg-badge {
  display: inline;
  justify-self: start;
  padding: var(--mg-space-4) var(--mg-space-12);
  border-radius: var(--mg-radius-pill);
  font-size: var(--mg-font-size-13);
  font-weight: var(--mg-font-weight-semibold);
  white-space: nowrap;
}

.mg-badge--positive {
  background: var(--mg-color-positive-surface);
  color: var(--mg-color-positive-text);
}

.mg-badge--pending {
  background: var(--mg-color-pending-surface);
  color: var(--mg-color-pending-text);
}

.mg-badge--neutral {
  background: var(--mg-color-neutral-surface);
  color: var(--mg-color-neutral-text);
}

.mg-badge--info {
  background: var(--mg-color-info-surface);
  color: var(--mg-color-info-text);
}

.mg-badge--negative {
  background: var(--mg-color-negative-surface);
  color: var(--mg-color-error-text);
}

@media (max-width: 599px) {
  .mg-badge {
    padding: var(--mg-space-3) var(--mg-space-10);
    font-size: var(--mg-font-size-12);
  }
}

/* Activity: who changed what (dashboard) and a record's history.
   Every row shares one set of columns, so each kind of detail lines up. */
.mg-activity {
  padding: var(--mg-space-24);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border);
  border-radius: var(--mg-radius-xl);
}

.mg-activity__title {
  margin-bottom: var(--mg-space-8);
  font-size: var(--mg-font-size-17);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-activity__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  column-gap: var(--mg-space-24);
  list-style: none;
}

.mg-activity--history .mg-activity__list {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.mg-activity__item {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: var(--mg-space-16) 0;
  border-top: var(--mg-border-width) solid var(--mg-color-divider);
  font-size: var(--mg-font-size-15);
}

.mg-activity__object {
  min-width: 0;
  font-weight: var(--mg-font-weight-semibold);
  overflow-wrap: anywhere;
}

.mg-activity__type,
.mg-activity__who,
.mg-activity__when {
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-14);
  white-space: nowrap;
}

.mg-activity__when {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mg-activity__empty {
  padding: var(--mg-space-16) 0 var(--mg-space-8);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-15);
  line-height: var(--mg-line-height-body);
}

/* Narrower: the badge column holds; details stack in two aligned columns */
@media (max-width: 959px) {
  .mg-activity__list,
  .mg-activity--history .mg-activity__list {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .mg-activity__item {
    row-gap: var(--mg-space-4);
    align-items: start;
  }

  .mg-activity__change {
    grid-row: 1 / span 3;
    grid-column: 1;
  }

  .mg-activity__object {
    grid-row: 1;
    grid-column: 2 / -1;
  }

  .mg-activity__type,
  .mg-activity--history .mg-activity__who {
    grid-row: 2;
    grid-column: 2;
  }

  .mg-activity__when {
    grid-row: 2;
    grid-column: 3;
  }

  .mg-activity__who {
    grid-row: 3;
    grid-column: 2 / -1;
  }
}

@media (max-width: 599px) {
  .mg-activity {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-12);
    padding: 0;
    background: transparent;
    border: 0;
  }

  .mg-activity__title {
    margin: 0;
    padding: 0 calc(var(--mg-space-16) + var(--mg-border-width));
  }

  .mg-activity__list,
  .mg-activity--history .mg-activity__list {
    column-gap: var(--mg-space-12);
    padding: 0 var(--mg-space-16);
    background: var(--mg-color-surface);
    border: var(--mg-border-width) solid var(--mg-color-border);
    border-radius: var(--mg-radius-xl);
  }

  .mg-activity__item {
    border-top: 0;
    border-bottom: var(--mg-border-width) solid var(--mg-color-divider);
  }

  .mg-activity__item:last-child {
    border-bottom: 0;
  }

  .mg-activity__empty {
    padding: var(--mg-space-16);
    background: var(--mg-color-surface);
    border: var(--mg-border-width) solid var(--mg-color-border);
    border-radius: var(--mg-radius-xl);
  }
}

/* Toolbar: search, filters and the filtered count above a list */
.mg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-8);
}

.mg-toolbar__divider {
  width: var(--mg-border-width);
  height: var(--mg-size-toolbar-divider);
  margin: 0 var(--mg-space-8);
  background: var(--mg-color-border);
}

.mg-toolbar__clear {
  padding: 0 var(--mg-space-8);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-toolbar__help {
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-14);
}

@media (max-width: 599px) {
  .mg-toolbar {
    position: relative;
  }

  .mg-toolbar__divider {
    display: none;
  }

  .mg-toolbar__clear {
    padding: var(--mg-space-12) var(--mg-space-8);
  }
}

/* Search */
.mg-search {
  display: flex;
  align-items: center;
  gap: var(--mg-space-8);
  width: var(--mg-size-search);
  max-width: 100%;
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-4) 0 var(--mg-space-12);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-input);
  border-radius: var(--mg-radius-md);
}

/* The box wears the ring while its field is focused; the field draws none. */
.mg-search:has(.mg-search__input:focus-visible) {
  outline: var(--mg-focus-width) solid var(--mg-color-focus);
  outline-offset: var(--mg-focus-offset);
  box-shadow: var(--mg-shadow-focus);
}

.mg-search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.mg-search__icon {
  flex: none;
  width: var(--mg-size-icon-md);
  height: var(--mg-size-icon-md);
  background: var(--mg-color-text-muted);
  mask: var(--mg-icon-search) center / contain no-repeat;
}

.mg-search__input {
  flex: 1;
  align-self: stretch;
  width: 0;
  min-width: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-15);
}

.mg-search__button {
  min-height: var(--mg-size-search-button);
  padding: 0 var(--mg-space-12);
  background: var(--mg-color-fill);
  border: 0;
  border-radius: var(--mg-radius-sm);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-14);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-search__button:hover {
  background: var(--mg-color-fill-strong);
}

@media (max-width: 599px) {
  .mg-search {
    flex-basis: 100%;
    width: auto;
    margin-bottom: var(--mg-space-8);
    min-height: var(--mg-size-control-lg);
  }

  .mg-search__input {
    font-size: var(--mg-font-size-16);
  }

  .mg-search__button {
    min-height: var(--mg-size-search-button-touch);
    font-size: var(--mg-font-size-15);
  }
}

/* Site search: the box under the logo and atop the phone menu */
.mg-shell__search {
  padding: 0 var(--mg-space-16) var(--mg-space-8);
}

.mg-shell__menu-search {
  padding: var(--mg-space-16) var(--mg-space-16) 0;
}

.mg-search--sidebar {
  width: auto;
  margin-bottom: 0;
}

.mg-search__submit {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--mg-size-search-button);
  height: var(--mg-size-search-button);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--mg-radius-sm);
}

.mg-search__submit:hover {
  background: var(--mg-color-fill);
}

.mg-search__submit .mg-search__icon {
  background: var(--mg-color-ink);
}

/* The sidebar box holds the query on wide screens; phones keep this one */
.mg-search--page {
  flex: none;
  width: var(--mg-size-search-page);
}

@media (min-width: 960px) {
  .mg-search--page {
    display: none;
  }
}

/* Search results: one card of links per kind of record */
.mg-hits {
  list-style: none;
}

.mg-hits__item + .mg-hits__item {
  border-top: var(--mg-border-width) solid var(--mg-color-border);
}

.mg-hits__link {
  display: block;
  padding: var(--mg-space-12) var(--mg-space-20);
  overflow-wrap: anywhere;
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-medium);
}

.mg-hits__link:focus-visible {
  outline-offset: calc(var(--mg-focus-width) * -1);
  box-shadow: none;
}

@media (max-width: 599px) {
  .mg-search--sidebar {
    min-height: var(--mg-size-control-lg);
  }

  .mg-hits__link {
    padding: var(--mg-space-12) var(--mg-space-16);
  }
}

/* Filter: one menu of choices; the active one names its value */
.mg-filter {
  position: relative;
}

.mg-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-8);
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-12) 0 var(--mg-space-16);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-button);
  border-radius: var(--mg-radius-pill);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-medium);
  list-style: none;
  cursor: pointer;
}

.mg-filter__toggle::-webkit-details-marker {
  display: none;
}

.mg-filter__toggle:hover {
  border-color: var(--mg-color-border-input);
}

.mg-filter__value {
  font-weight: var(--mg-font-weight-bold);
}

.mg-filter--active .mg-filter__toggle {
  background: var(--mg-color-fill);
  border: var(--mg-border-width-strong) solid var(--mg-color-ink);
}

a.mg-filter__toggle {
  color: var(--mg-color-ink);
  text-decoration: none;
}

.mg-filter__menu {
  position: absolute;
  top: calc(100% + var(--mg-space-8));
  left: 0;
  z-index: var(--mg-z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
  min-width: var(--mg-size-filter-menu);
  padding: var(--mg-space-8);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border);
  border-radius: var(--mg-radius-xl);
  box-shadow: var(--mg-shadow-menu);
  list-style: none;
}

.mg-filter:not([open]) .mg-filter__menu {
  display: none;
}

.mg-filter__option {
  display: flex;
  align-items: center;
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-12);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-15);
  text-decoration: none;
  white-space: nowrap;
}

.mg-filter__option:hover {
  background: var(--mg-color-page);
  color: var(--mg-color-ink);
}

.mg-filter__option--current {
  background: var(--mg-color-fill);
  font-weight: var(--mg-font-weight-semibold);
}

@media (max-width: 599px) {
  .mg-filter {
    position: static;
  }

  .mg-filter__menu {
    right: 0;
    min-width: 0;
  }

  .mg-filter:not([open]) .mg-filter__menu {
    display: none;
  }

  .mg-filter__option {
    white-space: normal;
  }
}

/* Bulk bar: actions for the ticked rows */
.mg-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-16);
  min-height: var(--mg-size-bulk-bar);
  padding: 0 var(--mg-space-16) 0 var(--mg-space-20);
  background: var(--mg-color-navy);
  color: var(--mg-color-on-dark);
}

.mg-bulk-bar__count {
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-bulk-bar__label {
  color: var(--mg-color-on-navy-muted);
  font-size: var(--mg-font-size-15);
}

.mg-bulk-bar__actions {
  display: flex;
  gap: var(--mg-space-8);
}

.mg-bulk-bar__link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--mg-color-on-dark);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
  text-decoration: underline;
}

.mg-bulk-bar__link:hover {
  color: var(--mg-color-on-navy-muted);
}

.mg-bulk-bar__end {
  margin-left: auto;
}

@media (max-width: 599px) {
  .mg-bulk-bar {
    gap: var(--mg-space-12);
    padding: var(--mg-space-8) var(--mg-space-12) var(--mg-space-8)
      var(--mg-space-16);
  }

  .mg-bulk-bar__count {
    flex: 1;
  }

  .mg-bulk-bar__label {
    display: none;
  }

  .mg-bulk-bar__action {
    min-height: var(--mg-size-search-button-touch);
  }

  .mg-bulk-bar__end {
    display: none;
  }

  .mg-bulk-bar__link {
    flex-basis: 100%;
    min-height: var(--mg-size-control);
    text-align: left;
  }
}

/* Results: the white card around a list */
.mg-results {
  position: relative;
  overflow: hidden;
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border);
  border-radius: var(--mg-radius-xl);
}

/* A section's count beside its title */
.mg-section__count {
  margin-left: var(--mg-space-4);
  padding: var(--mg-space-2) var(--mg-space-8);
  background: var(--mg-color-fill);
  border-radius: var(--mg-radius-pill);
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-13);
}

/* Results footer: the way on from a short list (See all, Add) */
.mg-results__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-8);
  padding: var(--mg-space-12) var(--mg-space-20);
  background: var(--mg-color-surface-sunken);
  border-top: var(--mg-border-width) solid var(--mg-color-border);
}

.mg-results__empty {
  padding: var(--mg-space-16) var(--mg-space-20);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-15);
}

/* Related records below a record's form */
.mg-related {
  margin-top: var(--mg-space-16);
}

/* A related field's link to the record it points at */
.mg-record-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-4);
  margin-top: var(--mg-space-8);
  font-size: var(--mg-font-size-14);
  font-weight: var(--mg-font-weight-semibold);
}

@media (max-width: 599px) {
  .mg-results__footer,
  .mg-results__empty {
    padding: var(--mg-space-12) var(--mg-space-16);
  }
}

/* Pagination: page position and page links */
.mg-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-4);
  padding: var(--mg-space-16) var(--mg-space-20);
  font-size: var(--mg-font-size-15);
}

.mg-pagination__position {
  margin-right: auto;
  white-space: nowrap;
  color: var(--mg-color-text-muted);
}

.mg-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--mg-space-4);
  list-style: none;
}

.mg-pagination__page {
  display: grid;
  place-items: center;
  min-width: var(--mg-size-control-sm);
  height: var(--mg-size-control-sm);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  text-decoration: none;
}

.mg-pagination__page:hover {
  background: var(--mg-color-page);
  color: var(--mg-color-ink);
}

.mg-pagination__page--current,
.mg-pagination__page--current:hover {
  background: var(--mg-color-fill-strong);
  font-weight: var(--mg-font-weight-bold);
}

.mg-pagination__gap {
  min-width: var(--mg-space-24);
  color: var(--mg-color-text-muted);
  text-align: center;
}

.mg-pagination__step {
  display: inline-flex;
  align-items: center;
  min-height: var(--mg-size-control-sm);
  margin-left: var(--mg-space-8);
  padding: 0 var(--mg-space-12);
  border: var(--mg-border-width) solid var(--mg-color-border-button);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  font-weight: var(--mg-font-weight-semibold);
  text-decoration: none;
}

.mg-pagination__step:hover {
  background: var(--mg-color-page);
  color: var(--mg-color-ink);
}

@media (max-width: 599px) {
  .mg-pagination {
    column-gap: var(--mg-space-8);
    padding: var(--mg-space-12) var(--mg-space-16);
  }

  .mg-pagination__pages {
    display: none;
  }

  .mg-pagination__position {
    flex-basis: 100%;
    margin-bottom: var(--mg-space-4);
  }

  .mg-pagination__step {
    flex: 1;
    justify-content: center;
    min-height: var(--mg-size-control);
    margin-left: 0;
    padding: 0 var(--mg-space-16);
  }
}

/* Empty state */
.mg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mg-space-8);
  padding: var(--mg-space-48) var(--mg-space-24);
  text-align: center;
}

.mg-empty__title {
  font-size: var(--mg-font-size-17);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-empty__text {
  max-width: var(--mg-size-empty-text);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-15);
  line-height: var(--mg-line-height-body);
}

.mg-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mg-space-8);
  margin-top: var(--mg-space-16);
}

/* Panel: plain white card for one block of content */
.mg-panel {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-16);
  padding: var(--mg-space-24);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border);
  border-radius: var(--mg-radius-xl);
}

.mg-panel__text {
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-15);
  line-height: var(--mg-line-height-body);
}

@media (max-width: 599px) {
  .mg-panel {
    padding: var(--mg-space-16);
  }
}

/* Confirm: delete confirmation */
.mg-confirm__lead {
  font-size: var(--mg-font-size-17);
  line-height: var(--mg-line-height-body);
}

.mg-confirm__heading {
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-confirm__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-8);
  list-style: none;
}

.mg-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-8);
}

@media (max-width: 599px) {
  .mg-confirm__actions {
    flex-direction: column;
  }

  .mg-confirm__button {
    min-height: var(--mg-size-control-lg);
  }
}

/* Submit bar: save and delete at the foot of a form.
   DOM order puts Save first (Enter saves); the row reads Delete … Save. */
.mg-submit-bar {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-8);
  padding: var(--mg-space-16) var(--mg-space-24);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border);
  border-radius: var(--mg-radius-xl);
}

.mg-submit-bar__delete {
  margin-right: auto;
  margin-left: calc(var(--mg-space-12) * -1);
}

@media (min-width: 600px) {
  .mg-submit-bar__delete-object {
    position: absolute;
    width: var(--mg-size-hidden);
    height: var(--mg-size-hidden);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 599px) {
  .mg-submit-bar {
    flex-direction: column;
    align-items: stretch;
    padding: var(--mg-space-16);
  }

  .mg-submit-bar__button {
    min-height: var(--mg-size-control-lg);
  }

  .mg-submit-bar__delete {
    margin: var(--mg-space-8) 0 0;
    padding-top: var(--mg-space-8);
    border-top: var(--mg-border-width) solid var(--mg-color-divider);
    border-radius: 0;
  }
}

/* Field: our own labelled input (login and account pages) */
.mg-field {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-8);
}

.mg-field__label {
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-field input {
  min-height: var(--mg-size-control-xl);
  padding: 0 var(--mg-space-16);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-input);
  border-radius: var(--mg-radius-lg);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-16);
}

.mg-field__help {
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-14);
  line-height: var(--mg-line-height-body);
}

/* Auth: login and account screens. Split on desktop, hero + sheet below 960px. */
.mg-auth {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: var(--mg-size-auth-panel) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--mg-color-surface);
}

.mg-auth__art {
  grid-row: 1 / -1;
  grid-column: 2;
  background: var(--mg-art-wide);
}

.mg-auth__brand {
  grid-row: 1;
  grid-column: 1;
  padding: var(--mg-space-56) var(--mg-space-96) 0;
}

.mg-auth__logo {
  display: block;
  width: var(--mg-size-auth-logo);
  height: auto;
}

.mg-auth__logo--on-dark {
  display: none;
}

.mg-auth__main {
  display: flex;
  grid-row: 2;
  grid-column: 1;
  align-items: center;
  padding: 0 var(--mg-space-96);
}

.mg-auth__content {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-24);
  width: 100%;
  max-width: var(--mg-size-auth-form);
}

.mg-auth__title {
  margin-bottom: var(--mg-space-12);
  color: var(--mg-color-ink-strong);
  font-size: var(--mg-font-size-44);
  font-weight: var(--mg-font-weight-bold);
  line-height: var(--mg-line-height-display);
  letter-spacing: var(--mg-letter-spacing-display);
}

.mg-auth__lead {
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-17);
  line-height: var(--mg-line-height-body);
}

.mg-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-24);
}

.mg-auth__text {
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-16);
  line-height: var(--mg-line-height-body);
}

.mg-auth__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-16);
  margin-top: var(--mg-space-8);
}

.mg-auth__link {
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-auth__help {
  grid-row: 3;
  grid-column: 1;
  padding: 0 var(--mg-space-96) var(--mg-space-56);
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-14);
}

.mg-auth__help-link {
  font-weight: var(--mg-font-weight-semibold);
}

@media (max-width: 959px) {
  .mg-auth {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .mg-auth__art {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--mg-size-auth-hero);
    background: var(--mg-art-compact);
  }

  .mg-auth__brand {
    position: relative;
    height: calc(var(--mg-size-auth-hero) - var(--mg-radius-sheet));
    padding: var(--mg-space-32)
      max(var(--mg-space-24), calc((100% - var(--mg-size-auth-form)) / 2));
  }

  .mg-auth__logo {
    width: var(--mg-size-auth-logo-compact);
  }

  .mg-auth__logo--on-light {
    display: none;
  }

  .mg-auth__logo--on-dark {
    display: block;
  }

  .mg-auth__main {
    position: relative;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    padding: var(--mg-space-32) var(--mg-space-24) 0;
    background: var(--mg-color-surface);
    border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0;
  }

  .mg-auth__content {
    gap: var(--mg-space-20);
    margin: 0 auto;
  }

  .mg-auth__intro {
    position: absolute;
    right: max(var(--mg-space-24), calc((100% - var(--mg-size-auth-form)) / 2));
    bottom: calc(100% + var(--mg-space-32));
    left: max(var(--mg-space-24), calc((100% - var(--mg-size-auth-form)) / 2));
  }

  .mg-auth__title {
    margin-bottom: var(--mg-space-8);
    color: var(--mg-color-on-dark);
    font-size: var(--mg-font-size-36);
  }

  .mg-auth__lead {
    color: var(--mg-color-on-art-muted);
    font-size: var(--mg-font-size-16);
  }

  .mg-auth__form {
    gap: var(--mg-space-20);
  }

  .mg-auth__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mg-space-20);
    margin-top: var(--mg-space-4);
  }

  .mg-auth__link {
    align-self: center;
    padding: var(--mg-space-8) 0;
  }

  .mg-auth__help {
    position: relative;
    margin: var(--mg-space-24) var(--mg-space-24) 0;
    padding: var(--mg-space-20) 0 var(--mg-space-32);
    border-top: var(--mg-border-width) solid var(--mg-color-divider);
    line-height: var(--mg-line-height-body);
    text-align: center;
  }

  .mg-auth__help-line {
    display: block;
  }
}

/* Brand name: a client without a logo for light backgrounds */
.mg-brand__name {
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-17);
  font-weight: var(--mg-font-weight-bold);
  line-height: var(--mg-line-height-label);
}

/* Inverse button: a secondary action on the navy bulk bar */
.mg-button--inverse {
  background: var(--mg-color-surface);
  color: var(--mg-color-ink);
}

.mg-button--inverse:hover {
  background: var(--mg-color-page);
  color: var(--mg-color-ink);
}

/* Sort menu: only where rows are cards and the headers are hidden */
@media (min-width: 1200px) {
  .mg-filter--sort {
    display: none;
  }
}

/* Results save bar: Save for lists edited in place */
.mg-results__save {
  display: flex;
  justify-content: flex-end;
  padding: var(--mg-space-16) var(--mg-space-20);
  border-top: var(--mg-border-width) solid var(--mg-color-divider);
}

@media (max-width: 599px) {
  .mg-results__save {
    padding: var(--mg-space-12) var(--mg-space-16);
  }

  .mg-results__save .mg-button {
    flex: 1;
  }
}

/* Date bar: years, months or days to narrow a list by its date */
.mg-date-hierarchy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-8);
  list-style: none;
}

.mg-date-hierarchy__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-4);
  min-height: var(--mg-size-control-sm);
  padding: 0 var(--mg-space-12);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-button);
  border-radius: var(--mg-radius-pill);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-14);
  font-weight: var(--mg-font-weight-medium);
  text-decoration: none;
}

.mg-date-hierarchy__link:hover {
  background: var(--mg-color-page);
  color: var(--mg-color-ink);
}

.mg-date-hierarchy__link--current {
  background: var(--mg-color-fill);
  border-color: var(--mg-color-ink);
  font-weight: var(--mg-font-weight-semibold);
}

@media (max-width: 599px) {
  .mg-date-hierarchy__link {
    min-height: var(--mg-size-control);
  }
}

/* 5. DJANGO LAYER ==========================================================
   Markup Django generates. It can't carry our classes, so it is styled by
   Django's own elements and classes, always inside one of our blocks:
   .mg-app (skip link, visually-hidden),
   .mg-form (fieldsets, fields, errors, related rows, permission picker),
   .mg-auth (field errors), .mg-results (results table), .mg-confirm (deleted objects).
   ========================================================================== */

.mg-app .visually-hidden {
  position: absolute;
  width: var(--mg-size-hidden);
  height: var(--mg-size-hidden);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Form sections and fields ------------------------------------------------- */
.mg-form {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-24);
}

.mg-form fieldset.module {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-24);
  min-width: 0;
  padding: var(--mg-space-24);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border);
  border-radius: var(--mg-radius-xl);
}

.mg-form .fieldset-heading,
.mg-form .inline-related h2 {
  font-size: var(--mg-font-size-17);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-form .form-row:not(tr) {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-8);
}

.mg-form .form-row > div,
.mg-form .flex-container,
.mg-form .fieldBox {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-8);
}

.mg-form .flex-container:has(.readonly) {
  gap: var(--mg-space-4);
}

.mg-form .flex-container.form-multiline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mg-space-24);
}

.mg-form .flex-container.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: var(--mg-space-12);
}

.mg-form .errorlist {
  order: 1;
  color: var(--mg-color-error-text);
  font-size: var(--mg-font-size-14);
  line-height: var(--mg-line-height-body);
  list-style: none;
}

.mg-form .form-multiline > div {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-8);
}

.mg-form label {
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-form label.required::after,
.mg-form .inline-related th.required::after {
  content: '*' / '';
  margin-left: var(--mg-space-4);
  color: var(--mg-color-error-text);
}

.mg-form label.vCheckboxLabel {
  font-weight: var(--mg-font-weight-medium);
}

.mg-form .readonly {
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-15);
}

.mg-form .help {
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-14);
  line-height: var(--mg-line-height-body);
}

.mg-form input[type='text'],
.mg-form input[type='email'],
.mg-form input[type='password'],
.mg-form input[type='date'],
.mg-form input[type='time'],
.mg-form input[type='datetime-local'],
.mg-form input[type='number'],
.mg-form input[type='url'],
.mg-form input[type='tel'],
.mg-form input[type='search'],
.mg-form select,
.mg-form textarea {
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-12);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-input);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-15);
}

.mg-form select {
  padding-right: var(--mg-space-40);
  background: var(--mg-color-surface) var(--mg-image-select-chevron) no-repeat
    right var(--mg-space-12) center / var(--mg-size-icon);
  appearance: none;
}

.mg-form select[multiple] {
  height: auto;
  padding: var(--mg-space-8);
  background-image: none;
  appearance: auto;
}

.mg-form textarea {
  padding: var(--mg-space-12);
  line-height: var(--mg-line-height-body);
  resize: vertical;
}

.mg-form [aria-invalid='true'] {
  border: var(--mg-border-width-error) solid var(--mg-color-danger);
}

.mg-form input[type='checkbox'] {
  width: var(--mg-size-checkbox);
  height: var(--mg-size-checkbox);
  margin: 0;
  accent-color: var(--mg-color-primary);
}

@media (max-width: 599px) {
  .mg-form {
    gap: var(--mg-space-16);
  }

  .mg-form fieldset.module {
    gap: var(--mg-space-20);
    padding: var(--mg-space-16);
  }

  .mg-form .flex-container.form-multiline {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mg-space-20);
  }

  .mg-form input[type='text'],
  .mg-form input[type='email'],
  .mg-form input[type='password'],
  .mg-form input[type='date'],
  .mg-form input[type='time'],
  .mg-form input[type='datetime-local'],
  .mg-form input[type='number'],
  .mg-form input[type='url'],
  .mg-form input[type='tel'],
  .mg-form input[type='search'],
  .mg-form select,
  .mg-form textarea {
    min-height: var(--mg-size-control-lg);
    font-size: var(--mg-font-size-16);
  }

  .mg-form input[type='checkbox'] {
    width: var(--mg-size-control);
    height: var(--mg-size-control);
    margin: calc(var(--mg-space-12) * -1);
    background: var(--mg-image-checkbox) center / var(--mg-size-checkbox-touch)
      no-repeat;
    appearance: none;
  }

  .mg-form input[type='checkbox']:checked {
    background-image: var(--mg-image-checkbox-checked);
  }
}

/* Related-row cell labels: the column header shows them on wide screens */
.mg-cell-label {
  position: absolute;
  width: var(--mg-size-hidden);
  height: var(--mg-size-hidden);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Related rows (tabular inline) ------------------------------------------- */
.mg-form .inline-related table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mg-font-size-15);
}

.mg-form .inline-related th {
  padding: 0 var(--mg-space-8) var(--mg-space-8);
  border-bottom: var(--mg-border-width) solid var(--mg-color-border);
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-13);
  font-weight: var(--mg-font-weight-semibold);
  text-align: left;
}

.mg-form .inline-related td {
  padding: var(--mg-space-8);
  border-bottom: var(--mg-border-width) solid var(--mg-color-divider);
  vertical-align: top;
}

/* Cells are top-aligned; boxes and plain text sit level with the inputs */
.mg-form .inline-related td > input[type='checkbox'] {
  margin-top: calc((var(--mg-size-control) - var(--mg-size-checkbox)) / 2);
}

.mg-form .inline-related td > p {
  padding-top: calc((var(--mg-size-control) - 1lh) / 2);
}

.mg-form
  .inline-related
  td
  input:not([type='checkbox'], [type='radio'], [type='file']),
.mg-form .inline-related td select,
.mg-form .inline-related td textarea {
  width: 100%;
  min-width: 0;
}

.mg-form .inline-related td.original {
  width: 0;
  padding: 0;
}

.mg-form .inline-related td.original p {
  display: none;
}

.mg-form .inline-related th.original {
  width: 0;
  padding: 0;
}

.mg-form .inline-related td.delete {
  width: var(--mg-size-inline-delete);
}

.mg-form .inline-related tr.add-row td {
  padding: var(--mg-space-16) var(--mg-space-8) 0;
  border-bottom: 0;
}

.mg-form .inline-related tr.add-row a {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-8);
  min-height: var(--mg-size-control);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
  text-decoration: none;
}

.mg-form .inline-related tr.add-row a::before {
  content: '';
  width: var(--mg-size-icon);
  height: var(--mg-size-icon);
  background: currentColor;
  mask: var(--mg-icon-plus) center / contain no-repeat;
}

.mg-form .inline-related tr.empty-form {
  display: none;
}

@media (max-width: 1279px) {
  .mg-form .inline-related thead {
    display: none;
  }

  .mg-form .inline-related tbody,
  .mg-form .inline-related tr,
  .mg-form .inline-related td {
    display: block;
  }

  .mg-form .inline-related tr.form-row:not(.empty-form) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mg-space-12) var(--mg-space-16);
    padding: var(--mg-space-16) 0;
    border-bottom: var(--mg-border-width) solid var(--mg-color-divider);
  }

  .mg-form .inline-related tr.form-row td {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-6);
    padding: 0;
    border: 0;
  }

  .mg-form .inline-related tr.form-row td.original {
    display: none;
  }

  .mg-form .inline-related tr.form-row td.delete {
    flex-direction: row;
    align-items: center;
    gap: var(--mg-space-12);
    width: auto;
  }

  .mg-form .inline-related tr.form-row td:has(> input[type='checkbox']) {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: var(--mg-space-12);
  }

  .mg-form .mg-cell-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: var(--mg-color-text-secondary);
    font-size: var(--mg-font-size-13);
    font-weight: var(--mg-font-weight-semibold);
  }

  .mg-form .inline-related tr.add-row td {
    padding: var(--mg-space-12) 0 0;
  }
}

@media (max-width: 599px) {
  .mg-form .inline-related tr.form-row:not(.empty-form) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Permission picker (filter_horizontal) ------------------------------------ */
.mg-form .selector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--mg-space-16);
}

.mg-form .selector-available,
.mg-form .selector-chosen {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-input);
  border-radius: var(--mg-radius-xl);
}

.mg-form .selector-available-title,
.mg-form .selector-chosen-title {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
  padding: var(--mg-space-12) var(--mg-space-16);
  background: var(--mg-color-surface-sunken);
  border-bottom: var(--mg-border-width) solid var(--mg-color-border);
}

.mg-form .selector .helptext {
  color: var(--mg-color-text-muted);
  font-size: var(--mg-font-size-13);
  line-height: var(--mg-line-height-label);
}

.mg-form .selector-filter {
  display: flex;
  align-items: center;
  gap: var(--mg-space-8);
  padding: var(--mg-space-12) var(--mg-space-16);
  border-bottom: var(--mg-border-width) solid var(--mg-color-divider);
}

.mg-form .selector-filter label {
  flex: none;
  width: var(--mg-size-icon-lg);
  height: var(--mg-size-icon-lg);
  overflow: hidden;
  background: var(--mg-color-text-muted);
  color: transparent;
  mask: var(--mg-icon-search) center / contain no-repeat;
}

.mg-form .selector-filter input {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.mg-form .selector select[multiple] {
  height: var(--mg-size-selector-list);
  min-height: 0;
  padding: var(--mg-space-8);
  border: 0;
  border-radius: 0;
  background: var(--mg-color-surface);
  appearance: auto;
}

.mg-form .selector select[multiple] option {
  padding: var(--mg-space-8) var(--mg-space-12);
  border-radius: var(--mg-radius-sm);
}

.mg-form .selector-chooseall,
.mg-form .selector-clearall {
  min-height: var(--mg-size-control);
  margin-top: auto;
  padding: 0 var(--mg-space-16);
  background: var(--mg-color-surface-sunken);
  border: 0;
  border-top: var(--mg-border-width) solid var(--mg-color-border);
  color: var(--mg-color-link);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
  text-align: left;
}

.mg-form .selector-chooser {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mg-space-8);
  list-style: none;
}

.mg-form .selector-add,
.mg-form .selector-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-8);
  width: 100%;
  min-height: var(--mg-size-control);
  padding: 0 var(--mg-space-16);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-button);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-form .selector-add:hover,
.mg-form .selector-remove:hover {
  background: var(--mg-color-page);
}

.mg-form .selector-add::after,
.mg-form .selector-remove::before {
  content: '';
  width: var(--mg-size-icon);
  height: var(--mg-size-icon);
  background: currentColor;
}

.mg-form .selector-add::after {
  mask: var(--mg-icon-arrow-right) center / contain no-repeat;
}

.mg-form .selector-remove::before {
  mask: var(--mg-icon-arrow-left) center / contain no-repeat;
}

@media (max-width: 959px) {
  .mg-form .selector {
    grid-template-columns: minmax(0, 1fr);
  }

  .mg-form .selector-chooser {
    flex-direction: row;
  }

  .mg-form .selector-add::after {
    mask-image: var(--mg-icon-arrow-down);
  }

  .mg-form .selector-remove::before {
    mask-image: var(--mg-icon-arrow-up);
  }

  .mg-form .selector select[multiple] {
    font-size: var(--mg-font-size-16);
  }
}

/* Results table ------------------------------------------------------------ */
.mg-results .mg-result-list {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mg-font-size-15);
}

.mg-results .mg-result-list thead tr {
  height: var(--mg-size-bulk-bar);
  background: var(--mg-color-surface-sunken);
  border-bottom: var(--mg-border-width) solid var(--mg-color-border);
}

.mg-results .mg-result-list thead th {
  padding: var(--mg-space-16) var(--mg-space-12);
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-13);
  font-weight: var(--mg-font-weight-semibold);
  text-align: left;
  white-space: nowrap;
}

.mg-results .mg-result-list thead th a {
  color: inherit;
  text-decoration: none;
}

.mg-results .mg-result-list thead th.sortable a:hover {
  color: var(--mg-color-ink);
  text-decoration: underline;
  text-underline-offset: var(--mg-space-3);
}

.mg-results .mg-result-list thead th.sorted {
  color: var(--mg-color-ink);
  font-weight: var(--mg-font-weight-bold);
}

.mg-results .mg-result-list thead th.sorted .text a {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-4);
}

.mg-results .mg-result-list thead th.sorted .text a::after {
  content: '';
  width: var(--mg-size-icon-sm);
  height: var(--mg-size-icon-sm);
  background: currentColor;
  mask: var(--mg-icon-arrow-down) center / contain no-repeat;
}

.mg-results .mg-result-list thead th.sorted.ascending .text a::after {
  mask-image: var(--mg-icon-arrow-up);
}

.mg-results .mg-result-list .sortoptions {
  display: none;
}

.mg-results .mg-result-list th.action-checkbox-column,
.mg-results .mg-result-list td.action-checkbox {
  width: var(--mg-size-checkbox-column);
  padding: 0 0 0 var(--mg-space-20);
}

/* Rows are top-aligned; the box sits on the first line of text */
.mg-results .mg-result-list td.action-checkbox {
  padding-top: calc(var(--mg-space-16) + (1lh - var(--mg-size-checkbox)) / 2);
}

.mg-results .mg-result-list th:last-child,
.mg-results .mg-result-list td:last-child {
  padding-right: var(--mg-space-20);
}

.mg-results .mg-result-list input[type='checkbox'] {
  display: block;
  width: var(--mg-size-checkbox);
  height: var(--mg-size-checkbox);
  margin: 0;
  accent-color: var(--mg-color-primary);
}

.mg-results .mg-result-list tbody tr {
  background: var(--mg-color-surface);
  border-bottom: var(--mg-border-width) solid var(--mg-color-divider);
}

.mg-results .mg-result-list tbody tr.selected {
  background: var(--mg-color-selected);
}

.mg-results .mg-result-list tbody th,
.mg-results .mg-result-list tbody td {
  padding: var(--mg-space-16) var(--mg-space-12);
  text-align: left;
  vertical-align: top;
}

.mg-results .mg-result-list tbody th {
  font-weight: var(--mg-font-weight-semibold);
}

/* The record's name is what people scan for: a quarter of every list, never
   under 240px, and it stays in view, with the row's checkbox, when a wide list
   scrolls sideways. */
@media (min-width: 1200px) {
  .mg-results__scroll {
    overflow-x: auto;
  }

  .mg-results .mg-result-list th.action-checkbox-column,
  .mg-results .mg-result-list td.action-checkbox {
    position: sticky;
    left: 0;
    min-width: var(--mg-size-checkbox-column);
    background: inherit;
  }

  .mg-results .mg-result-list tbody th {
    width: 25%;
    min-width: var(--mg-size-name-column);
  }

  /* A list with only a name gives it the whole row */
  .mg-results .mg-result-list tbody th:last-child {
    width: auto;
  }

  .mg-results
    .mg-result-list
    thead
    tr
    > th:first-child:not(.action-checkbox-column),
  .mg-results .mg-result-list tbody tr > th:first-child {
    position: sticky;
    left: 0;
    background: inherit;
  }

  .mg-results .mg-result-list th.action-checkbox-column + th,
  .mg-results .mg-result-list td.action-checkbox + th {
    position: sticky;
    left: var(--mg-size-checkbox-column);
    background: inherit;
  }
}

.mg-results .mg-result-list td {
  font-variant-numeric: tabular-nums;
}

/* Below 1200px each row becomes a card built from the same table markup */
@media (max-width: 1199px) {
  .mg-results .mg-result-list,
  .mg-results .mg-result-list thead,
  .mg-results .mg-result-list tbody {
    display: block;
  }

  .mg-results .mg-result-list thead tr {
    display: flex;
  }

  .mg-results .mg-result-list thead th {
    display: none;
  }

  .mg-results .mg-result-list thead:not(:has(.action-checkbox-column)) {
    display: none;
  }

  .mg-results .mg-result-list thead th.action-checkbox-column {
    display: flex;
    align-items: center;
    gap: var(--mg-space-12);
    width: auto;
    padding: var(--mg-space-12) var(--mg-space-16);
    color: var(--mg-color-text-secondary);
    font-size: var(--mg-font-size-14);
  }

  .mg-results .mg-result-list thead th.action-checkbox-column::after {
    content: 'Select all on this page';
  }

  .mg-results .mg-result-list tbody tr {
    display: grid;
    grid-template-columns:
      var(--mg-size-checkbox-column-compact) auto minmax(0, 1fr)
      auto;
    grid-auto-flow: row dense;
    column-gap: 0;
    row-gap: var(--mg-space-3);
    padding: var(--mg-space-16);
  }

  .mg-results .mg-result-list tbody th,
  .mg-results .mg-result-list tbody td {
    display: block;
    grid-column: 2 / -1;
    padding: 0 0 0 var(--mg-space-12);
    color: var(--mg-color-text-secondary);
    font-size: var(--mg-font-size-14);
  }

  .mg-results .mg-result-list td.action-checkbox {
    grid-row: 1;
    grid-column: 1;
    width: auto;
    padding: 0;
  }

  .mg-results .mg-result-list tbody th {
    grid-column: 2 / 4;
    color: var(--mg-color-ink);
    font-size: var(--mg-font-size-16);
    white-space: normal;
  }

  .mg-results .mg-result-list th:last-child,
  .mg-results .mg-result-list td:last-child {
    padding-right: 0;
  }

  .mg-results .mg-result-list td:has(> .mg-badge) {
    grid-row: 1;
    grid-column: 4;
    align-self: center;
    padding-left: var(--mg-space-8);
  }

  .mg-results .mg-result-list td[data-empty] {
    display: none;
  }

  /* Lists without row selection, such as related records, drop that column */
  .mg-results .mg-result-list:not(:has(.action-checkbox-column)) tbody tr {
    grid-template-columns: 0 auto minmax(0, 1fr) auto;
  }

  .mg-results
    .mg-result-list:not(:has(.action-checkbox-column))
    :is(tbody th, tbody td:not(:has(> .mg-badge))) {
    padding-left: 0;
  }

  .mg-results .mg-result-list td[data-label]:not(:has(> .mg-badge))::before {
    content: attr(data-label) ': ';
    color: var(--mg-color-text-muted);
    font-weight: var(--mg-font-weight-semibold);
  }

  .mg-results .mg-result-list td {
    overflow-wrap: anywhere;
  }

  .mg-results .mg-result-list input[type='checkbox'] {
    width: var(--mg-size-control);
    height: var(--mg-size-control);
    margin: calc(var(--mg-space-12) * -1);
    background: var(--mg-image-checkbox) center / var(--mg-size-checkbox-touch)
      no-repeat;
    appearance: none;
  }

  .mg-results .mg-result-list input[type='checkbox']:checked {
    background-image: var(--mg-image-checkbox-checked);
  }
}

/* Deleted objects (delete confirmation) ------------------------------------ */
.mg-confirm #deleted-objects,
.mg-confirm #deleted-objects ul {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-6);
  padding-left: var(--mg-space-20);
  font-size: var(--mg-font-size-15);
  line-height: var(--mg-line-height-body);
}

.mg-confirm #deleted-objects ul {
  margin-top: var(--mg-space-6);
}

/* Hidden rows and fields ---------------------------------------------------- */
.mg-form .hidden,
.mg-form .empty-form,
.mg-results .hidden {
  display: none;
}

/* Section descriptions and collapsible sections ----------------------------- */
.mg-form fieldset.module .description {
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-15);
  line-height: var(--mg-line-height-body);
}

.mg-form fieldset.module details > summary {
  display: flex;
  align-items: center;
  gap: var(--mg-space-8);
  cursor: pointer;
  list-style: none;
}

.mg-form fieldset.module details > summary::-webkit-details-marker {
  display: none;
}

.mg-form fieldset.module details > summary::after {
  content: '';
  width: var(--mg-size-icon);
  height: var(--mg-size-icon);
  background: currentColor;
  mask: var(--mg-image-select-chevron) center / contain no-repeat;
}

.mg-form fieldset.module details[open] > summary::after {
  rotate: 180deg;
}

.mg-form fieldset.module details > :not(summary) {
  margin-top: var(--mg-space-24);
}

/* Fields with several inputs: a legend in place of a label ------------------ */
.mg-form .form-row fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-8);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mg-form .form-row fieldset > legend {
  float: left;
  width: 100%;
  margin-bottom: var(--mg-space-8);
  padding: 0;
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-form .form-row fieldset > legend.required::after {
  content: '*' / '';
  margin-left: var(--mg-space-4);
  color: var(--mg-color-error-text);
}

/* Radio buttons and checkbox lists ------------------------------------------ */
.mg-form
  .flex-container
  > div:has(> div > label > :is(input[type='radio'], input[type='checkbox'])) {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-8);
}

.mg-form .flex-container > .radiolist.inline {
  flex-flow: row wrap;
  column-gap: var(--mg-space-24);
}

.mg-form label:has(> :is(input[type='radio'], input[type='checkbox'])) {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-12);
  min-height: var(--mg-size-control-sm);
  font-weight: var(--mg-font-weight-medium);
  cursor: pointer;
}

.mg-form input[type='radio'] {
  width: var(--mg-size-checkbox);
  height: var(--mg-size-checkbox);
  margin: 0;
  accent-color: var(--mg-color-primary);
}

/* Files and links: the current value above the input ------------------------ */
.mg-form .file-upload,
.mg-form p.url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-8) var(--mg-space-12);
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-15);
  line-height: var(--mg-line-height-body);
}

.mg-form .file-upload a,
.mg-form p.url a {
  overflow-wrap: anywhere;
}

.mg-form .file-upload br,
.mg-form p.url br {
  display: none;
}

.mg-form p.url input,
.mg-form .file-upload input[type='file'] {
  flex: 1 1 100%;
}

.mg-form .clearable-file-input {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-8);
}

.mg-form .clearable-file-input label {
  font-weight: var(--mg-font-weight-medium);
}

.mg-form input[type='file'] {
  max-width: 100%;
  color: var(--mg-color-text-secondary);
  font-size: var(--mg-font-size-15);
}

.mg-form input[type='file']::file-selector-button {
  min-height: var(--mg-size-control);
  margin-right: var(--mg-space-12);
  padding: 0 var(--mg-space-16);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-button);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  font: inherit;
  font-weight: var(--mg-font-weight-semibold);
  cursor: pointer;
}

.mg-form input[type='file']::file-selector-button:hover {
  background: var(--mg-color-page);
}

.mg-form .readonly img,
.mg-results .mg-result-list img {
  vertical-align: middle;
}

/* Related records: a select, a lookup by ID, or a search box ---------------- */
.mg-form .related-widget-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-8);
}

.mg-form .related-widget-wrapper > select:not([multiple]) {
  flex: 1;
  min-width: 0;
}

.mg-form .related-widget-wrapper > select[multiple] {
  flex: 1 1 100%;
}

.mg-form .related-widget-wrapper > .selector {
  flex: 1 1 100%;
  min-width: 0;
}

.mg-form .vForeignKeyRawIdAdminField,
.mg-form .vManyToManyRawIdAdminField {
  width: var(--mg-size-raw-id);
  flex: 0 1 auto;
}

.mg-form .related-lookup {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--mg-size-control);
  height: var(--mg-size-control);
  border: var(--mg-border-width) solid var(--mg-color-border-button);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
}

.mg-form .related-lookup::before {
  content: '';
  width: var(--mg-size-icon-md);
  height: var(--mg-size-icon-md);
  background: currentColor;
  mask: var(--mg-icon-search) center / contain no-repeat;
}

.mg-form .related-lookup:hover {
  background: var(--mg-color-page);
}

/* Stacked related records: one block per record, inside the section --------- */
.mg-form fieldset.module .inline-related:not(.tabular, .empty-form) {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-20);
  padding-top: var(--mg-space-24);
  border-top: var(--mg-border-width) solid var(--mg-color-divider);
}

.mg-form .inline-heading {
  font-size: var(--mg-font-size-17);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-form .inline-related:not(.tabular) > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-8);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-form .inline-related:not(.tabular) > h3 b {
  color: var(--mg-color-text-muted);
  font-weight: var(--mg-font-weight-semibold);
}

.mg-form .inline-related:not(.tabular) > h3 .delete {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-8);
  margin-left: auto;
  font-weight: var(--mg-font-weight-medium);
}

.mg-form fieldset.module .inline-related fieldset.module {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.mg-form .inline-group div.add-row a,
.mg-form .inline-deletelink {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-8);
  min-height: var(--mg-size-control);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
  text-decoration: none;
}

.mg-form .inline-group div.add-row a::before {
  content: '';
  width: var(--mg-size-icon);
  height: var(--mg-size-icon);
  background: currentColor;
  mask: var(--mg-icon-plus) center / contain no-repeat;
}

.mg-form .inline-deletelink {
  color: var(--mg-color-danger);
}

.mg-form .inline-related th .help-tooltip {
  vertical-align: middle;
}

.mg-form .inlinechangelink,
.mg-form .inlineviewlink {
  margin-left: var(--mg-space-8);
  font-size: var(--mg-font-size-14);
}

/* Picker: a stacked one (filter_vertical) and the filtered-out warning ------ */
.mg-form .selector.stacked {
  grid-template-columns: minmax(0, 1fr);
}

.mg-form .selector.stacked .selector-chooser {
  flex-direction: row;
}

.mg-form .selector.stacked .selector-add::after {
  mask-image: var(--mg-icon-arrow-down);
}

.mg-form .selector.stacked .selector-remove::before {
  mask-image: var(--mg-icon-arrow-up);
}

.mg-form
  .selector-chosen:not(.selector-chosen--with-filtered)
  .list-footer-display {
  display: none;
}

.mg-form .list-footer-display {
  padding: var(--mg-space-8) var(--mg-space-12);
  color: var(--mg-color-pending-text);
  font-size: var(--mg-font-size-14);
  cursor: pointer;
}

/* Lists edited in place: inputs inside the results table ------------------- */
.mg-results .mg-result-list td input:not([type='checkbox']),
.mg-results .mg-result-list td select {
  width: 100%;
  min-width: 0;
  min-height: var(--mg-size-control-sm);
  padding: 0 var(--mg-space-8);
  background: var(--mg-color-surface);
  border: var(--mg-border-width) solid var(--mg-color-border-input);
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-ink);
  font-size: var(--mg-font-size-15);
}

.mg-results .mg-result-list .errorlist {
  color: var(--mg-color-error-text);
  font-size: var(--mg-font-size-14);
  font-weight: var(--mg-font-weight-semibold);
  list-style: none;
}

/* Login and account fields: errors and password rules ----------------------- */
.mg-auth .errorlist {
  color: var(--mg-color-error-text);
  font-size: var(--mg-font-size-15);
  font-weight: var(--mg-font-weight-semibold);
  list-style: none;
}

.mg-auth .mg-field__help ul {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
  padding-left: var(--mg-space-20);
}

/* Search-as-you-type selects (autocomplete_fields) -------------------------- */
:root {
  --body-fg: var(--mg-color-ink);
  --body-bg: var(--mg-color-surface);
  --body-quiet-color: var(--mg-color-text-muted);
  --border-color: var(--mg-color-border-input);
  --hairline-color: var(--mg-color-divider);
  --primary: var(--mg-color-primary);
  --primary-fg: var(--mg-color-on-dark);
  --selected-bg: var(--mg-color-selected);
  --selected-row: var(--mg-color-selected);
  --darkened-bg: var(--mg-color-surface-sunken);
  --object-tools-bg: var(--mg-color-text-muted);
  --close-button-bg: var(--mg-color-text-muted);
  --close-button-hover-bg: var(--mg-color-ink);
}

.mg-form .select2-container {
  flex: 1;
  min-width: 0;
  font-size: var(--mg-font-size-15);
}

.mg-form .select2-container .select2-selection--single,
.mg-form .select2-container .select2-selection--multiple {
  min-height: var(--mg-size-control);
  border-radius: var(--mg-radius-md);
}

.mg-form
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: calc(var(--mg-size-control) - var(--mg-border-width) * 2);
}

.mg-form
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  height: calc(var(--mg-size-control) - var(--mg-border-width) * 2);
}

/* Picker arrows: Django names each button in full; the arrow is the label --- */
.mg-form .selector-add,
.mg-form .selector-remove {
  width: var(--mg-size-control);
  padding: 0;
  font-size: 0;
}

/* Related rows: selects size to their longest choice ---------------------- */
.mg-form .inline-related td select {
  width: auto;
}

/* Bulk bar: the script hides it, and Select all, until they apply */
.mg-bulk-bar[hidden],
.mg-bulk-bar__link[hidden] {
  display: none;
}

/* Long unbroken values, such as a password hash summary */
.mg-form .form-row bdi {
  overflow-wrap: anywhere;
}

/* Help text that is a list, such as password rules */
.mg-form .help ul {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-4);
  padding-left: var(--mg-space-20);
}

@media (max-width: 599px) {
  .mg-form .select2-container {
    font-size: var(--mg-font-size-16);
  }
}

/* With the script, the bulk bar takes the header row's place: selecting rows
   never moves the table. The select-all box stays visible at the left. */
.mg-results--enhanced .mg-bulk-bar {
  position: absolute;
  inset: 0 0 auto var(--mg-size-checkbox-column);
  z-index: 1;
  flex-wrap: nowrap;
  height: var(--mg-size-bulk-bar);
  min-height: 0;
}

@media (max-width: 1199px) {
  .mg-results--enhanced .mg-bulk-bar {
    left: calc(
      var(--mg-space-16) + var(--mg-size-checkbox-touch) + var(--mg-space-6)
    );
  }
}

@media (max-width: 599px) {
  .mg-results--enhanced .mg-bulk-bar {
    padding: 0 var(--mg-space-8) 0 var(--mg-space-12);
  }

  .mg-results--enhanced .mg-bulk-bar__link {
    flex: 1;
    order: -1;
    min-height: 0;
  }

  .mg-results--enhanced
    .mg-bulk-bar:has(.mg-bulk-bar__link:not([hidden], .mg-bulk-bar__end))
    .mg-bulk-bar__count {
    display: none;
  }
}

/* Picker arrows: centered, and big enough for their buttons */
.mg-form .selector-add,
.mg-form .selector-remove {
  gap: 0;
}

.mg-form .selector-add::after,
.mg-form .selector-remove::before {
  width: var(--mg-size-icon-lg);
  height: var(--mg-size-icon-lg);
}

/* A field with several inputs keeps its help clear of them */
.mg-form .form-row fieldset > div {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-8);
}

/* A plain multiple select shows several choices at once */
.mg-form select[multiple]:not(.filtered) {
  min-height: var(--mg-size-selector-list);
}

/* A lookup button matches the height of its ID box */
.mg-form .related-lookup {
  align-self: stretch;
  height: auto;
  min-height: var(--mg-size-control);
}

/* The browser's date and time boxes focus a part inside them, which
   :focus-visible and :focus miss; they show the ring while focused within. */
.mg-form
  input:is([type='date'], [type='time'], [type='datetime-local']):focus-within {
  outline: var(--mg-focus-width) solid var(--mg-color-focus);
  outline-offset: var(--mg-focus-offset);
  box-shadow: var(--mg-shadow-focus);
}

/* While rows are selected, the select-all box sits in the navy bar too,
   drawn white so it stands out against it. */
.mg-results--enhanced:has(.mg-bulk-bar:not([hidden]))
  .mg-result-list
  thead
  th.action-checkbox-column {
  background: var(--mg-color-navy);
}

.mg-results--enhanced:has(.mg-bulk-bar:not([hidden])) #action-toggle {
  accent-color: var(--mg-color-on-dark);
}

.mg-results--enhanced:has(.mg-bulk-bar:not([hidden])) .mg-result-list thead tr {
  border-bottom-color: var(--mg-color-navy);
}

@media (max-width: 1199px) {
  .mg-results--enhanced:has(.mg-bulk-bar:not([hidden])) #action-toggle:checked {
    background-image: var(--mg-image-checkbox-checked-on-dark);
  }
}

/* Core's alert (static/css/alert.css) inside Manage: the layout owns the
   spacing around it, and its body is focused only to be announced. */
.mg-app .flux-alert,
.mg-auth .flux-alert {
  margin-block: 0;
}

.mg-app .flux-alert__body:focus-visible,
.mg-auth .flux-alert__body:focus-visible {
  box-shadow: none;
}