/* My Maktab modern look (Spec E, U1): design tokens and the app shell.
   Our own design; Bootstrap (self-hosted) stays as the base. Light and dark mode;
   motion respects "reduce motion". Loaded only when the modern look is on. */
:root, [data-theme="light"] {
  --mm-accent: #0f7a52;          /* one accent colour (brand green) */
  --mm-accent-strong: #0a5c3d;
  --mm-accent-soft: #e3f4ec;
  --mm-accent-ink: #ffffff;
  --mm-bg: #f4f6f8;
  --mm-surface: #ffffff;
  --mm-surface-2: #f8faf9;
  --mm-ink: #14211b;
  --mm-ink-muted: #56645d;       /* 6.1:1 on white */
  --mm-line: #dde4e0;
  --mm-focus: #1c64f2;
  --mm-warn-bg: #fff6e0; --mm-warn-ink: #6b4a00;
  --mm-danger-bg: #fdecec; --mm-danger-ink: #8a1c1c;
  --mm-ok-bg: #e6f6ee; --mm-ok-ink: #0b5a37;
  --mm-shadow: 0 1px 2px rgba(16,24,20,.06), 0 4px 16px rgba(16,24,20,.06);
  --mm-shadow-lift: 0 2px 4px rgba(16,24,20,.08), 0 12px 28px rgba(16,24,20,.10);
  --mm-radius: 14px; --mm-radius-sm: 10px; --mm-radius-pill: 999px;
  --mm-topbar-h: 60px; --mm-nav-w: 264px; --mm-nav-w-collapsed: 72px;
  --mm-font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mm-gradient: linear-gradient(120deg, #e6f5ee 0%, #eef3fb 55%, #f6f0fb 100%);
  color-scheme: light;
}
[data-theme="dark"] {
  --mm-accent: #3ccf91; --mm-accent-strong: #6fe0b0; --mm-accent-soft: #123828; --mm-accent-ink: #062016;
  --mm-bg: #0f1513; --mm-surface: #161e1b; --mm-surface-2: #1b2521; --mm-ink: #e7efeb; --mm-ink-muted: #a5b4ad;
  --mm-line: #2a3631; --mm-focus: #7aa7ff;
  --mm-warn-bg: #3a2e10; --mm-warn-ink: #ffdf99; --mm-danger-bg: #3d1717; --mm-danger-ink: #ffb4b4; --mm-ok-bg: #12301f; --mm-ok-ink: #9be6c0;
  --mm-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); --mm-shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.4);
  --mm-gradient: linear-gradient(120deg, #12291f 0%, #15202e 55%, #221a2b 100%);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --mm-accent: #3ccf91; --mm-accent-strong: #6fe0b0; --mm-accent-soft: #123828; --mm-accent-ink: #062016;
    --mm-bg: #0f1513; --mm-surface: #161e1b; --mm-surface-2: #1b2521; --mm-ink: #e7efeb; --mm-ink-muted: #a5b4ad;
    --mm-line: #2a3631; --mm-focus: #7aa7ff;
    --mm-warn-bg: #3a2e10; --mm-warn-ink: #ffdf99; --mm-danger-bg: #3d1717; --mm-danger-ink: #ffb4b4; --mm-ok-bg: #12301f; --mm-ok-ink: #9be6c0;
    --mm-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); --mm-shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.4);
    --mm-gradient: linear-gradient(120deg, #12291f 0%, #15202e 55%, #221a2b 100%);
    color-scheme: dark;
  }
}

/* Bootstrap bridges: existing pages pick up the tokens without rewrites (U4 restyles further). */
body.mm-modern {
  --bs-body-bg: var(--mm-bg); --bs-body-color: var(--mm-ink); --bs-border-color: var(--mm-line);
  --bs-secondary-color: var(--mm-ink-muted); --bs-link-color: var(--mm-accent-strong); --bs-link-hover-color: var(--mm-accent);
  --bs-table-bg: transparent; --bs-table-color: var(--mm-ink);
  --brand: var(--mm-accent); --brand-dark: var(--mm-accent-strong); --brand-soft: var(--mm-accent-soft); --ink-muted: var(--mm-ink-muted); --line: var(--mm-line);
  margin: 0; background: var(--mm-bg); color: var(--mm-ink); font-family: var(--mm-font); font-size: 1rem; line-height: 1.55;
}
body.mm-modern .table { color: var(--mm-ink); }
body.mm-modern .form-control, body.mm-modern .form-select, body.mm-modern input, body.mm-modern select, body.mm-modern textarea {
  background-color: var(--mm-surface); color: var(--mm-ink); border-color: var(--mm-line); border-radius: var(--mm-radius-sm); }
body.mm-modern .text-muted { color: var(--mm-ink-muted) !important; }
body.mm-modern .text-dark { color: var(--mm-ink) !important; }
body.mm-modern .alert { border-radius: var(--mm-radius-sm); border: 0; }
body.mm-modern .alert-warning { background: var(--mm-warn-bg); color: var(--mm-warn-ink); }
body.mm-modern .alert-danger { background: var(--mm-danger-bg); color: var(--mm-danger-ink); }
body.mm-modern .alert-success { background: var(--mm-ok-bg); color: var(--mm-ok-ink); }
body.mm-modern .alert a { color: inherit; font-weight: 700; }

/* Skip link and focus: keyboard first (WCAG 2.2 AA). */
.mm-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--mm-surface); color: var(--mm-ink); padding: .5rem .9rem; border-radius: var(--mm-radius-sm); box-shadow: var(--mm-shadow-lift); }
.mm-skip:focus { left: 8px; }
body.mm-modern :focus-visible { outline: 3px solid var(--mm-focus); outline-offset: 2px; border-radius: 6px; }

/* Icons from the self-hosted sprite. */
.mm-icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.mm-icon-sm { width: 16px; height: 16px; }

/* Top bar */
.mm-topbar { position: sticky; top: 0; z-index: 40; height: var(--mm-topbar-h); display: flex; align-items: center; gap: .5rem;
  padding: 0 .75rem; background: var(--mm-surface); border-bottom: 1px solid var(--mm-line); }
.mm-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--mm-radius-sm);
  background: transparent; color: var(--mm-ink); cursor: pointer; text-decoration: none; }
.mm-iconbtn:hover { background: var(--mm-surface-2); color: var(--mm-ink); }
.mm-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; color: var(--mm-ink); text-decoration: none; font-weight: 700; }
.mm-brand:hover { color: var(--mm-ink); }
.mm-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--mm-accent), var(--mm-accent-strong)); color: var(--mm-accent-ink); font-weight: 800; }
.mm-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mm-brand-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.mm-brand-text small { color: var(--mm-ink-muted); font-weight: 500; font-size: .875rem; }
.mm-topbar-spacer { flex: 1; }
.mm-area-pill { font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem;
  border-radius: var(--mm-radius-pill); background: var(--mm-accent-soft); color: var(--mm-accent-strong); }

/* Menus (app launcher, help, user): native <details>, no script needed to open. */
.mm-menu { position: relative; }
.mm-menu > summary { list-style: none; }
.mm-menu > summary::-webkit-details-marker { display: none; }
.mm-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; padding: .4rem; z-index: 60;
  background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-lift); }
.mm-menu-panel.mm-left { left: 0; right: auto; }
.mm-menu-panel a, .mm-menu-panel button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 0; background: none;
  border-radius: var(--mm-radius-sm); color: var(--mm-ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.mm-menu-panel a:hover, .mm-menu-panel button:hover { background: var(--mm-surface-2); }
.mm-menu-label { padding: .5rem .7rem .2rem; color: var(--mm-ink-muted); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mm-launcher { display: grid; grid-template-columns: repeat(3, 96px); gap: .25rem; padding: .3rem; }
.mm-launcher a { flex-direction: column; justify-content: center; gap: .35rem; text-align: center; font-size: .875rem; padding: .8rem .3rem; }
.mm-launcher .mm-icon { width: 24px; height: 24px; color: var(--mm-accent); }
.mm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mm-accent-soft); color: var(--mm-accent-strong); font-weight: 800; font-size: .875rem; }
.mm-theme-choice { display: flex; gap: .25rem; padding: .2rem .4rem .4rem; }
.mm-theme-choice button { justify-content: center; flex: 1; border: 1px solid var(--mm-line); }
.mm-theme-choice button[aria-pressed="true"] { border-color: var(--mm-accent); background: var(--mm-accent-soft); color: var(--mm-accent-strong); }

/* Layout: left navigation + content */
.mm-shell { display: grid; grid-template-columns: var(--mm-nav-w) minmax(0, 1fr); min-height: calc(100vh - var(--mm-topbar-h)); }
.mm-shell.mm-collapsed { grid-template-columns: var(--mm-nav-w-collapsed) minmax(0, 1fr); }
.mm-nav { position: sticky; top: var(--mm-topbar-h); height: calc(100vh - var(--mm-topbar-h)); overflow-y: auto; padding: .75rem .6rem 1.5rem;
  background: var(--mm-surface); border-right: 1px solid var(--mm-line); }
.mm-nav-group + .mm-nav-group { margin-top: .6rem; }
.mm-nav-group > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer;
  padding: .45rem .65rem; color: var(--mm-ink-muted); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 8px; }
.mm-nav-group > summary::-webkit-details-marker { display: none; }
.mm-nav-group > summary .mm-icon { transition: transform .15s ease; }
.mm-nav-group:not([open]) > summary .mm-icon { transform: rotate(-90deg); }
.mm-nav ul { list-style: none; margin: 0; padding: 0; }
.mm-nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; margin: 1px 0; border-radius: var(--mm-radius-sm);
  color: var(--mm-ink); text-decoration: none; font-weight: 550; }
.mm-nav a:hover { background: var(--mm-surface-2); }
.mm-nav a[aria-current="page"] { background: var(--mm-accent-soft); color: var(--mm-accent-strong); box-shadow: inset 3px 0 0 var(--mm-accent); }
.mm-nav a .mm-icon { color: var(--mm-ink-muted); }
.mm-nav a[aria-current="page"] .mm-icon { color: var(--mm-accent); }
.mm-planned { margin-left: auto; font-size: .875rem; font-weight: 700; padding: .05rem .45rem; border-radius: var(--mm-radius-pill); border: 1px solid var(--mm-line); color: var(--mm-ink-muted); }
.mm-nav-foot { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--mm-line); }
.mm-collapsed .mm-nav a span:not(.mm-nav-chip), .mm-collapsed .mm-nav-group > summary span, .mm-collapsed .mm-planned { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mm-collapsed .mm-nav a { justify-content: center; }
.mm-collapsed .mm-nav-group > summary { justify-content: center; }
.mm-main { min-width: 0; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem; }
.mm-main > main { max-width: 1280px; margin: 0 auto; }
.mm-footer { max-width: 1280px; margin: 2.5rem auto 0; color: var(--mm-ink-muted); font-size: .875rem; }

/* Mobile and tablet: the navigation becomes a drawer. */
.mm-nav-toggle { display: none; }
@media (max-width: 960px) {
  .mm-nav-toggle { display: inline-flex; }
  .mm-collapse-btn { display: none; }
  .mm-shell, .mm-shell.mm-collapsed { grid-template-columns: minmax(0, 1fr); }
  .mm-nav { position: fixed; left: 0; top: var(--mm-topbar-h); width: min(86vw, 320px); z-index: 50; transform: translateX(-105%);
    transition: transform .2s ease; box-shadow: var(--mm-shadow-lift); }
  .mm-shell.mm-nav-open .mm-nav { transform: none; }
  .mm-collapsed .mm-nav a span:not(.mm-nav-chip), .mm-collapsed .mm-nav-group > summary span, .mm-collapsed .mm-planned { position: static; width: auto; height: auto; clip: auto; }
  .mm-brand-text small, .mm-area-pill { display: none; }
}

/* Cards, headings and buttons: rounded, soft shadows, calm palette. */
body.mm-modern .page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-end;
  padding: 1.5rem 1.6rem; margin-bottom: 1.5rem; border-radius: var(--mm-radius); background: var(--mm-gradient); border: 1px solid var(--mm-line); }
body.mm-modern .page-heading h1 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 750; margin: .1rem 0 .3rem; letter-spacing: -.01em; }
body.mm-modern .page-heading p { color: var(--mm-ink-muted); margin: 0; max-width: 72ch; }
body.mm-modern .eyebrow { color: var(--mm-accent-strong); font-size: .875rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
body.mm-modern .content-card, body.mm-modern .metric-card, body.mm-modern .administration-group {
  background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow); }
body.mm-modern .content-card { padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; }
body.mm-modern .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
body.mm-modern .metric-card { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; transition: box-shadow .15s ease, transform .15s ease; }
body.mm-modern .metric-card:hover { box-shadow: var(--mm-shadow-lift); transform: translateY(-1px); }
body.mm-modern .metric-card span { color: var(--mm-ink-muted); font-weight: 650; font-size: .875rem; }
body.mm-modern .metric-card strong { font-size: 2rem; font-weight: 750; line-height: 1.1; }
body.mm-modern .metric-card small { color: var(--mm-ink-muted); }
body.mm-modern .btn { border-radius: var(--mm-radius-pill); font-weight: 650; padding: .45rem 1rem; }
body.mm-modern .btn-brand { background: var(--mm-accent); border-color: var(--mm-accent); color: var(--mm-accent-ink); }
body.mm-modern .btn-brand:hover { background: var(--mm-accent-strong); border-color: var(--mm-accent-strong); color: var(--mm-accent-ink); }
body.mm-modern .btn-outline-brand { border: 1px solid var(--mm-accent); color: var(--mm-accent-strong); background: transparent; }
body.mm-modern .btn-outline-brand:hover { background: var(--mm-accent-soft); }
body.mm-modern .status-pill { border-radius: var(--mm-radius-pill); background: var(--mm-accent-soft); color: var(--mm-accent-strong); padding: .3rem .8rem; font-weight: 700; }
body.mm-modern .administration-group { background: var(--mm-surface); }
body.mm-modern .administration-group a { color: var(--mm-accent-strong); }
body.mm-modern .module-icon { background: var(--mm-accent-soft); color: var(--mm-accent-strong); }
body.mm-modern .back-link { color: var(--mm-ink-muted); text-decoration: none; font-weight: 600; font-size: .9rem; }
body.mm-modern h2 { font-size: 1.2rem; font-weight: 720; }

/* Preview banner (U1 only) */
.mm-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .55rem 1rem; margin-bottom: 1rem;
  border-radius: var(--mm-radius-sm); background: var(--mm-accent-soft); color: var(--mm-accent-strong); font-weight: 600; }
.mm-preview form { margin: 0; }
.mm-preview button { border: 0; background: none; color: inherit; text-decoration: underline; font-weight: 700; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  body.mm-modern *, body.mm-modern *::before, body.mm-modern *::after { transition: none !important; animation: none !important; }
}
.mm-shell.mm-no-nav { grid-template-columns: minmax(0, 1fr); }
/* Filled buttons keep readable text inside cards and menus. */
body.mm-modern a.btn-brand, body.mm-modern .administration-group a.btn-brand, body.mm-modern .licensed-module-card a.btn-brand { color: var(--mm-accent-ink); }
body.mm-modern .administration-group a.btn-outline-brand { color: var(--mm-accent-strong); }

/* U2 home dashboards: top-action pills, card grid and count lists. */
.mm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: -0.5rem 0 1.25rem; }
.mm-action { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: var(--mm-radius-pill);
  background: var(--mm-surface); border: 1px solid var(--mm-line); color: var(--mm-ink); font-weight: 650; text-decoration: none; box-shadow: var(--mm-shadow); }
.mm-action:hover { border-color: var(--mm-accent); color: var(--mm-accent-strong); }
.mm-action .mm-icon { color: var(--mm-accent); }
.mm-section-title { font-size: 1.05rem; font-weight: 720; margin: .5rem 0 .75rem; }
.mm-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.mm-card-grid > .content-card { margin-bottom: 0; }
.mm-count-list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.mm-count-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--mm-line); }
.mm-count-list li:last-child { border-bottom: 0; }
.mm-count-list strong { font-size: 1.1rem; }
.mm-note { color: var(--mm-ink-muted); font-size: .9rem; }
body.mm-modern .metric-card a { margin-top: .35rem; font-weight: 650; font-size: .88rem; text-decoration: none; color: var(--mm-accent-strong); }
.mm-health { display: inline-flex; gap: .4rem; padding: .35rem .8rem; border-radius: var(--mm-radius-pill); background: var(--mm-ok-bg); color: var(--mm-ok-ink); }
.mm-health-maintenance, .mm-health-degraded { background: var(--mm-warn-bg); color: var(--mm-warn-ink); }
.mm-health-outage { background: var(--mm-danger-bg); color: var(--mm-danger-ink); }
.mm-count-list a { color: var(--mm-accent-strong); font-weight: 650; text-decoration: none; }
.mm-count-list a:hover { text-decoration: underline; }

/* U4: every existing page in the new style without rewriting its markup. Plain headings,
   forms, tables, buttons and link rows inside <main> get the same tokens as the cards. */
body.mm-modern main > h1:first-child, body.mm-modern main > h1:first-of-type {
  font-size: clamp(1.5rem, 2.2vw, 1.75rem); font-weight: 750; letter-spacing: -.01em; margin: 0 0 .4rem;
  padding: 1.2rem 1.4rem; border-radius: var(--mm-radius); background: var(--mm-gradient); border: 1px solid var(--mm-line); }
body.mm-modern main > h1 + p { color: var(--mm-ink-muted); margin: .6rem 0 1rem; max-width: 80ch; }
body.mm-modern main > h2, body.mm-modern main > section > h2 { margin-top: 1.5rem; }
body.mm-modern main > form, body.mm-modern main > fieldset, body.mm-modern main > section:not(.content-card):not(.page-heading) {
  background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow);
  padding: 1.1rem 1.25rem; margin: 0 0 1rem; }
body.mm-modern main form label { display: block; font-weight: 600; margin: .55rem 0 .25rem; }
body.mm-modern main form label:has(> input[type="checkbox"]), body.mm-modern main form label:has(> input[type="radio"]) { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
body.mm-modern main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), body.mm-modern main select, body.mm-modern main textarea {
  display: block; width: 100%; max-width: 32rem; padding: .5rem .7rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm);
  background: var(--mm-surface); color: var(--mm-ink); font: inherit; }
body.mm-modern main label > input:not([type="checkbox"]):not([type="radio"]), body.mm-modern main label > select { margin-top: .25rem; }
body.mm-modern main input[type="checkbox"], body.mm-modern main input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--mm-accent); }
body.mm-modern main button:not(.btn):not(.mm-iconbtn) {
  display: inline-flex; align-items: center; gap: .4rem; margin: .5rem .35rem .25rem 0; padding: .45rem 1rem; border-radius: var(--mm-radius-pill);
  border: 1px solid var(--mm-accent); background: var(--mm-surface); color: var(--mm-accent-strong); font-weight: 650; cursor: pointer; }
body.mm-modern main button[type="submit"]:not(.btn):not(.mm-iconbtn) { background: var(--mm-accent); color: var(--mm-accent-ink); }
body.mm-modern main button:not(.btn):not(.mm-iconbtn):hover { filter: brightness(1.05); box-shadow: var(--mm-shadow); }
body.mm-modern main fieldset { border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); padding: .75rem 1rem; margin: .75rem 0; }
body.mm-modern main legend { float: none; width: auto; font-size: 1rem; font-weight: 700; padding: 0 .35rem; }
body.mm-modern main table:not(.table) { width: 100%; border-collapse: collapse; margin: 0 0 1rem; background: var(--mm-surface);
  border: 1px solid var(--mm-line); border-radius: var(--mm-radius); }
@media (max-width: 760px) { body.mm-modern main table:not(.table) { display: block; overflow-x: auto; } }
body.mm-modern main table th, body.mm-modern main table td { padding: .6rem .8rem; border-bottom: 1px solid var(--mm-line); text-align: left; vertical-align: top; }
body.mm-modern main table thead th { background: var(--mm-surface-2); color: var(--mm-ink); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
body.mm-modern main table caption { caption-side: top; color: var(--mm-ink-muted); padding: .6rem .8rem; font-size: .88rem; }
body.mm-modern main table tbody tr:hover { background: var(--mm-surface-2); }
body.mm-modern main table form { display: inline; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
body.mm-modern main > nav:not(.mm-tabs):not(.mm-submenu):not(.mm-links), body.mm-modern main > p > nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
body.mm-modern main > nav:not(.mm-tabs):not(.mm-submenu):not(.mm-links) a { padding: .35rem .85rem; border-radius: var(--mm-radius-pill); border: 1px solid var(--mm-line); background: var(--mm-surface);
  color: var(--mm-ink); text-decoration: none; font-weight: 600; }
body.mm-modern main > nav:not(.mm-tabs):not(.mm-submenu):not(.mm-links) a:hover, body.mm-modern main > nav:not(.mm-tabs):not(.mm-submenu):not(.mm-links) a[aria-current] { border-color: var(--mm-accent); color: var(--mm-accent-strong); background: var(--mm-accent-soft); }
body.mm-modern main > a { display: inline-flex; margin: 0 .9rem .6rem 0; font-weight: 650; color: var(--mm-accent-strong); }
body.mm-modern main p[role="status"] { padding: .6rem .9rem; border-radius: var(--mm-radius-sm); background: var(--mm-ok-bg); color: var(--mm-ok-ink); }
body.mm-modern main .text-danger, body.mm-modern main .field-validation-error, body.mm-modern main .validation-summary-errors { color: var(--mm-danger-ink) !important; }
body.mm-modern main .validation-summary-errors { background: var(--mm-danger-bg); padding: .6rem .9rem; border-radius: var(--mm-radius-sm); }
body.mm-modern main .validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
body.mm-modern main details:not(.administration-group):not(.mm-menu) { background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); padding: .6rem .9rem; margin: .5rem 0; }
body.mm-modern main details > summary { cursor: pointer; font-weight: 650; }
body.mm-modern main code { color: var(--mm-accent-strong); background: var(--mm-accent-soft); padding: .05rem .35rem; border-radius: 6px; }
body.mm-modern .table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--mm-surface-2); border-color: var(--mm-line); }
body.mm-modern .table thead th { color: var(--mm-ink); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--mm-line); }
body.mm-modern .empty-state { padding: 2rem 1rem; text-align: center; color: var(--mm-ink-muted); }
/* Sign-in and account pages (no school context): a centred card. */
body.mm-modern .mm-shell.mm-no-nav main { max-width: 640px; }

/* U5: global search in the top bar. */
.mm-search { display: flex; align-items: center; gap: .4rem; flex: 0 1 380px; margin: 0 .5rem; padding: 0 .75rem; height: 38px;
  border: 1px solid var(--mm-line); border-radius: var(--mm-radius-pill); background: var(--mm-surface-2); color: var(--mm-ink-muted); }
.mm-search:focus-within { border-color: var(--mm-accent); background: var(--mm-surface); }
.mm-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--mm-ink); font: inherit; outline: none; }
@media (max-width: 960px) { .mm-search { flex-basis: 40px; } .mm-search input::placeholder { color: transparent; } }

/* U9 (owner, 15 Oct): the look switch, top-right on every page, next to the account avatar. */
.mm-look-switch { margin: 0; }
.mm-look-btn { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .8rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-pill);
  background: var(--mm-surface); color: var(--mm-ink); font: inherit; font-size: .875rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.mm-look-btn:hover { border-color: var(--mm-accent); color: var(--mm-accent-strong); }
@media (max-width: 600px) { .mm-look-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .mm-look-btn { width: 36px; padding: 0; justify-content: center; } }