/*
 * MARS/WARS shared app styles (Bootstrap 5.3 + Bootstrap Icons).
 *
 * Dark by default; light when theme.js sets data-bs-theme="light" on <html>
 * (from the shared mw_theme cookie). Use the --mw-* tokens, never hex values,
 * so both themes work.
 *
 * Canonical copy: apps-infra/design/marswars.css. Every Jinja app vendors this
 * file unchanged as static/css/marswars.css - edit it HERE, then run
 * apps-infra/design/sync.sh to copy it out (sync.sh --check reports drift).
 * App-specific rules belong in that app's own <style> block, after the link.
 *
 * Reference: Legion, Tempus, and Munus. See apps-infra/design/README.md.
 */

/* The brand red and its shades: set once, in brand.css. */
@import url("brand.css");

/* ---------- Palette ---------- */
:root,
[data-bs-theme="dark"] {
  --mw-bg: #0a0a0a;             /* page */
  --mw-surface: #111111;        /* cards, sidebar, navbar */
  --mw-surface-raised: #1a0f0f; /* card headers, table headers, hover rows */
  --mw-input-bg: #0d0d0d;
  --mw-border: #2a1a1a;
  --mw-row-border: #1e1010;
  --mw-text: #f0e8e8;
  --mw-muted: #9a7878;
  /* --mw-red, --mw-red-hover, --mw-red-active come from brand.css. */
  --mw-link: var(--mw-red-bright);
  --mw-link-hover: var(--mw-red-bright-hover);
  --mw-text-strong: #ffffff;    /* emphasis: hovered tiles, active nav, table cells */
  --mw-red-tint: color-mix(in srgb, var(--mw-red) 12%, transparent);  /* badge / pill fill */
  --mw-red-edge: color-mix(in srgb, var(--mw-red) 40%, transparent);   /* accent borders */
  --mw-red-nav: color-mix(in srgb, var(--mw-red) 18%, transparent);   /* hovered / active nav link */

  /* Status tones (chips, score scales, legends): -bg fill, -fg text, -edge border.
     Not for buttons or alerts; those use Bootstrap's own success/warning/danger. */
  --mw-tone-red-bg: #3d1510;    --mw-tone-red-fg: #f6795e;    --mw-tone-red-edge: #5c2018;
  --mw-tone-orange-bg: #3d2708; --mw-tone-orange-fg: #f0a848; --mw-tone-orange-edge: #5c3a10;
  --mw-tone-yellow-bg: #39350a; --mw-tone-yellow-fg: #e6d24a; --mw-tone-yellow-edge: #565012;
  --mw-tone-amber-bg: #3d2a08;  --mw-tone-amber-fg: #f0b429;  --mw-tone-amber-edge: #5c3f10;
  --mw-tone-green-bg: #14361f;  --mw-tone-green-fg: #6ee7a0;  --mw-tone-green-edge: #1f5030;
  --mw-tone-blue-bg: #0f2a3d;   --mw-tone-blue-fg: #5cc8f0;   --mw-tone-blue-edge: #184a5c;
  --mw-tone-purple: #7b6cf6;    /* projected-hours bar and text */
  --mw-track-bg: #241818;       /* empty part of a progress bar */
  --mw-track-edge: #5c4444;

  /* Bootstrap retheme: primary is the MARS/WARS red. */
  --bs-primary: var(--mw-red);
  --bs-primary-rgb: var(--mw-brand-rgb);
  --bs-link-color: var(--mw-link);
  --bs-link-color-rgb: var(--mw-brand-rgb);  /* underline tints only; links: see `a` below */
  --bs-link-hover-color: var(--mw-link-hover);
  --bs-focus-ring-color: color-mix(in srgb, var(--mw-red) 25%, transparent);
}

[data-bs-theme="light"] {
  --mw-bg: #f6f2f1;
  --mw-surface: #ffffff;
  --mw-surface-raised: #f8ecea;
  --mw-input-bg: #ffffff;
  --mw-border: #e2d2cf;
  --mw-row-border: #efe4e2;
  --mw-text: #1f1414;
  --mw-muted: #6e5656;
  --mw-link: var(--mw-red-deep);
  --mw-link-hover: var(--mw-red-deep-hover);
  --mw-text-strong: #000000;
  --mw-red-tint: color-mix(in srgb, var(--mw-red) 8%, transparent);
  --mw-red-edge: color-mix(in srgb, var(--mw-red) 35%, transparent);
  --mw-red-nav: color-mix(in srgb, var(--mw-red) 10%, transparent);

  --mw-tone-red-bg: #fde4df;    --mw-tone-red-fg: #a52a12;    --mw-tone-red-edge: #f0b5a8;
  --mw-tone-orange-bg: #fdead5; --mw-tone-orange-fg: #94500a; --mw-tone-orange-edge: #efc595;
  --mw-tone-yellow-bg: #faf2c4; --mw-tone-yellow-fg: #6f5c00; --mw-tone-yellow-edge: #e2d283;
  --mw-tone-amber-bg: #fdefcc;  --mw-tone-amber-fg: #7d5a00;  --mw-tone-amber-edge: #ecd08a;
  --mw-tone-green-bg: #dbf2e3;  --mw-tone-green-fg: #17693b;  --mw-tone-green-edge: #a5d9b8;
  --mw-tone-blue-bg: #daeef8;   --mw-tone-blue-fg: #0c5e80;   --mw-tone-blue-edge: #a3d1e8;
  --mw-tone-purple: #5b4ad6;
  --mw-track-bg: #f1e6e4;
  --mw-track-edge: #dcc9c5;

  --bs-primary: var(--mw-red);
  --bs-primary-rgb: var(--mw-brand-rgb);
  --bs-link-color: var(--mw-link);
  --bs-link-color-rgb: var(--mw-brand-rgb);
  --bs-link-hover-color: var(--mw-link-hover);
  --bs-focus-ring-color: color-mix(in srgb, var(--mw-red) 25%, transparent);
}

body {
  background: var(--mw-bg);
  color: var(--mw-text);
}
/* Bootstrap colors links from --bs-link-color-rgb, a bare r, g, b that can't be
   mixed from the brand red, so set the color here instead. Same selectors as
   Bootstrap's own rule, so anything that styles its links by class still wins. */
a { --mw-a: var(--mw-link); color: var(--mw-a); }
a:hover { --mw-a: var(--mw-link-hover); }
.text-muted { color: var(--mw-muted) !important; }

/* ---------- Buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--mw-red);
  --bs-btn-border-color: var(--mw-red);
  --bs-btn-hover-bg: var(--mw-red-hover);
  --bs-btn-hover-border-color: var(--mw-red-hover);
  --bs-btn-active-bg: var(--mw-red-active);
  --bs-btn-active-border-color: var(--mw-red-active);
  --bs-btn-disabled-bg: var(--mw-red);   /* Bootstrap's default is its own blue */
  --bs-btn-disabled-border-color: var(--mw-red);
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--mw-brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--mw-link);
  --bs-btn-border-color: var(--mw-red);
  --bs-btn-hover-bg: var(--mw-red);
  --bs-btn-hover-border-color: var(--mw-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mw-red-active);
  --bs-btn-active-border-color: var(--mw-red-active);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--mw-brand-rgb);
  --bs-btn-disabled-color: var(--mw-link);
  --bs-btn-disabled-border-color: var(--mw-red);
}

/* Yellow/cyan outline buttons (Yearly Grade Increase, Sync to Slack...) are
   tinted in both themes: a soft fill with matching text, so they read on any
   surface without competing with the red primary button. */
.btn-outline-warning {
  --bs-btn-color: #ffc94d;
  --bs-btn-bg: rgba(255, 193, 7, 0.14);
  --bs-btn-border-color: rgba(255, 193, 7, 0.5);
  --bs-btn-hover-color: #ffd970;
  --bs-btn-hover-bg: rgba(255, 193, 7, 0.26);
  --bs-btn-hover-border-color: rgba(255, 193, 7, 0.7);
  --bs-btn-active-color: #ffd970;
  --bs-btn-active-bg: rgba(255, 193, 7, 0.34);
  --bs-btn-active-border-color: rgba(255, 193, 7, 0.7);
}
.btn-outline-info {
  --bs-btn-color: #5fdcf5;
  --bs-btn-bg: rgba(13, 202, 240, 0.12);
  --bs-btn-border-color: rgba(13, 202, 240, 0.45);
  --bs-btn-hover-color: #8ae6f8;
  --bs-btn-hover-bg: rgba(13, 202, 240, 0.24);
  --bs-btn-hover-border-color: rgba(13, 202, 240, 0.7);
  --bs-btn-active-color: #8ae6f8;
  --bs-btn-active-bg: rgba(13, 202, 240, 0.32);
  --bs-btn-active-border-color: rgba(13, 202, 240, 0.7);
}
[data-bs-theme="light"] .btn-outline-warning {
  --bs-btn-color: #6e5000;
  --bs-btn-bg: rgba(255, 193, 7, 0.22);
  --bs-btn-border-color: rgba(204, 150, 0, 0.6);
  --bs-btn-hover-color: #5a4100;
  --bs-btn-hover-bg: rgba(255, 193, 7, 0.38);
  --bs-btn-hover-border-color: rgba(204, 150, 0, 0.8);
  --bs-btn-active-color: #5a4100;
  --bs-btn-active-bg: rgba(255, 193, 7, 0.5);
  --bs-btn-active-border-color: rgba(204, 150, 0, 0.8);
}
[data-bs-theme="light"] .btn-outline-info {
  --bs-btn-color: #055c6e;
  --bs-btn-bg: rgba(13, 202, 240, 0.14);
  --bs-btn-border-color: rgba(8, 145, 172, 0.5);
  --bs-btn-hover-color: #044a58;
  --bs-btn-hover-bg: rgba(13, 202, 240, 0.28);
  --bs-btn-hover-border-color: rgba(8, 145, 172, 0.75);
  --bs-btn-active-color: #044a58;
  --bs-btn-active-bg: rgba(13, 202, 240, 0.4);
  --bs-btn-active-border-color: rgba(8, 145, 172, 0.75);
}
/* Light theme: btn-outline-light is white-on-white; Bootstrap's yellow/cyan
   text is too pale to read on white. */
[data-bs-theme="light"] .btn-outline-light {
  --bs-btn-color: var(--mw-muted);
  --bs-btn-border-color: var(--mw-border);
  --bs-btn-hover-color: var(--mw-text);
  --bs-btn-hover-bg: var(--mw-surface-raised);
  --bs-btn-hover-border-color: var(--mw-border);
  --bs-btn-active-color: var(--mw-text);
  --bs-btn-active-bg: var(--mw-surface-raised);
  --bs-btn-active-border-color: var(--mw-border);
}
/* Bootstrap's bg-info badge keeps white text, which is hard to read on cyan. */
.badge.bg-info { color: #000; }
/* Grey notices: warm them to the palette in light (dark already fits). */
[data-bs-theme="light"] .alert-secondary {
  --bs-alert-bg: var(--mw-surface-raised);
  --bs-alert-border-color: var(--mw-border);
  --bs-alert-color: var(--mw-text);
}
[data-bs-theme="light"] .text-warning { color: #946c00 !important; }
[data-bs-theme="light"] .text-info { color: #087990 !important; }

/* ---------- Cards ---------- */
.card {
  /* Set through Bootstrap's own variables, not just border-radius, so the
     pieces Bootstrap rounds for us (first header, last footer, flush list
     groups) use the same curve as the card's border. */
  --bs-card-border-radius: 10px;
  --bs-card-inner-border-radius: 9px;   /* 10px minus the 1px border */
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--bs-card-border-radius);
  box-shadow: none !important;
}
/* Whatever sits at a card's top or bottom edge paints its own background
   (.card-body below, the raised table header, a scrolling .table-responsive).
   A square child corner covers the card's rounded border there, so the corner
   loses its line. Round the edge children to the card's inner curve.
   "Edge" means the first/last child that takes up space: children that are
   out of flow or not rendered are skipped, so a corner badge placed before the
   body (give it .position-absolute), a closed .collapse, a .d-none empty state
   or a modal at the end doesn't leave the real edge child square (issue #198).
   The table rules below use the same list. */
.card > :nth-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > :nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) {
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}
.card-header {
  background: var(--mw-surface-raised);
  border-bottom: 1px solid var(--mw-border);
  color: var(--mw-red);
  font-weight: 600;
}
.card-body { background: var(--mw-surface); }
/* .card-body paints over a .text-bg-* card's fill, so its forced white text
   would vanish on a light surface; keep it readable in both themes. */
.card[class*="text-bg-"] { color: var(--mw-text-strong) !important; }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--mw-surface-raised);
  --bs-table-border-color: var(--mw-row-border);
  --bs-table-color: var(--mw-text-strong);
  --bs-table-hover-color: var(--mw-text-strong);
  color: var(--mw-text-strong);
}
.table thead th,
.table-light {
  background: var(--mw-surface-raised) !important;
  color: var(--mw-muted) !important;
  border-color: var(--mw-border) !important;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.table > :not(caption) > * > * { border-bottom-color: var(--mw-row-border); }

/* A table flush with a card's edge: directly in the card, or wrapped in
   .card-body.p-0 and/or .table-responsive. Its corner cells paint the header
   fill and the hover fill, so they need the card's curve too; and the last
   row's divider would run square through the bottom corners (the card's own
   border already closes the box there). Cells only take a radius in the
   separate-borders model; with no spacing and Bootstrap's bottom-only cell
   borders it looks the same as collapse. Bordered tables keep collapse
   (their grid lines would double up). "Last row" skips rows hidden with
   .d-none (table-filter-sort.js's filtered rows and empty-state row), and is
   the header row when the body has no rows at all. The
   table is matched with :first-of-type/:last-of-type, not :first-child,
   because hidden siblings can sit beside it (a modal written inside a <td>
   is moved out in front of the table by the HTML parser). */
:is(.card > .table, .card > :is(.card-body.p-0, .table-responsive) > .table,
    .card > :is(.card-body.p-0, .table-responsive) > .table-responsive > .table):not(.table-bordered) {
  border-collapse: separate;
  border-spacing: 0;
}
:is(.card > .table:first-of-type,
    .card > :is(.card-body.p-0, .table-responsive):nth-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:first-of-type,
    .card > :is(.card-body.p-0, .table-responsive):nth-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:first-child > .table:first-of-type)
  > :first-child > tr:first-child > :first-child {
  border-top-left-radius: var(--bs-card-inner-border-radius);
}
:is(.card > .table:first-of-type,
    .card > :is(.card-body.p-0, .table-responsive):nth-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:first-of-type,
    .card > :is(.card-body.p-0, .table-responsive):nth-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:first-child > .table:first-of-type)
  > :first-child > tr:first-child > :last-child {
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
/* <thead class="table-light"> paints its own square fill behind the cells;
   the header cells already carry the same fill (.table thead th above). */
:is(.card > .table:first-of-type,
    .card > :is(.card-body.p-0, .table-responsive):nth-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:first-of-type,
    .card > :is(.card-body.p-0, .table-responsive):nth-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:first-child > .table:first-of-type)
  > thead.table-light:first-child {
  background: transparent !important;
}
:is(:is(.card > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:last-child > .table:last-of-type) > :last-child > :is(tr:last-child, tr:nth-last-child(1 of :not(.d-none))),
    :is(.card > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:last-child > .table:last-of-type):not(:has(> tbody > tr:not(.d-none))) > thead > tr:last-child)
  > * {
  border-bottom-width: 0;
}
:is(:is(.card > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:last-child > .table:last-of-type) > :last-child > :is(tr:last-child, tr:nth-last-child(1 of :not(.d-none))),
    :is(.card > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:last-child > .table:last-of-type):not(:has(> tbody > tr:not(.d-none))) > thead > tr:last-child)
  > :first-child {
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
:is(:is(.card > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:last-child > .table:last-of-type) > :last-child > :is(tr:last-child, tr:nth-last-child(1 of :not(.d-none))),
    :is(.card > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table:last-of-type,
      .card > :is(.card-body.p-0, .table-responsive):nth-last-child(1 of :not(.position-absolute, .position-fixed, .d-none, [hidden], .collapse:not(.show), .modal, script, template, input[type="hidden"])) > .table-responsive:last-child > .table:last-of-type):not(:has(> tbody > tr:not(.d-none))) > thead > tr:last-child)
  > :last-child {
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
  /* background-color, not the background shorthand: that would also wipe the
     chevron Bootstrap draws on .form-select as a background-image. */
  background-color: var(--mw-input-bg);
  border-color: var(--mw-border);
  color: var(--mw-text);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--mw-input-bg);
  border-color: var(--mw-red);
  color: var(--mw-text);
  box-shadow: none;
}
/* Checkboxes, radios and switches: brand red, not Bootstrap's compiled-in blue. */
.form-check-input:checked {
  background-color: var(--mw-red);
  border-color: var(--mw-red);
}
.form-check-input:focus {
  border-color: var(--mw-red-edge);
  box-shadow: 0 0 0 0.25rem var(--mw-red-tint);
}
/* Bootstrap's pale grey edge vanishes on the light page background. */
[data-bs-theme="light"] .form-check-input:not(:checked) { border-color: var(--mw-muted); }

/* ---------- table-filter-sort.js: sort carets and filter funnels ---------- */
/* The markup the script adds to a `data-filter-sort` table (see its header comment).
   Until 2026-10 every app copied these rules into its own page <style>; they live here now. */
.fs-th { white-space: nowrap; }
.fs-th .th-inner { gap: .35rem; }
.fs-count { color: var(--mw-muted); font-weight: normal; }
.sort-icon { font-size: .75rem; cursor: pointer; }
.filter-funnel-btn {
  border: none;
  background: none;
  padding: 0 .15rem;
  line-height: 1;
  min-width: 1em;
  min-height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mw-muted);
  cursor: pointer;
}
.filter-funnel-btn:hover,
.filter-funnel-btn.active { color: var(--mw-link); }
.filter-dropdown-menu {
  min-width: 220px;
  max-width: 280px;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  /* It opens inside a header cell; don't inherit the header's uppercase label style. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
  font-size: .875rem;
}
.filter-checkbox-list {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: .25rem;
}
.filter-dropdown-menu .form-check-label { color: var(--mw-text); }
.filter-dropdown-menu a.small { color: var(--mw-link); text-decoration: none; }
.filter-dropdown-menu a.small:hover { text-decoration: underline; }

/* ---------- Lists inside cards, modals ---------- */
.list-group-item {
  background: transparent;
  border-color: var(--mw-row-border);
  color: var(--mw-text);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--mw-surface-raised);
  color: var(--mw-text);
}
.list-group-item.active {
  background: var(--mw-red-tint);
  border-color: var(--mw-border);
  color: var(--mw-text);
}
.modal-content {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: 10px;
}
.modal-header,
.modal-footer { border-color: var(--mw-border); }

/* ---------- Admin shell: left sidebar (off-canvas drawer on mobile) ---------- */
.sidebar {
  min-height: 100vh;
  background: var(--mw-surface);
  border-right: 1px solid var(--mw-border);
  --bs-offcanvas-width: 260px;
  --bs-offcanvas-bg: var(--mw-surface);
}
.sidebar .nav-link { color: var(--mw-muted); }
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: var(--mw-text);
  background: var(--mw-red-nav);
  border-radius: 6px;
}
.sidebar .nav-link.active { color: var(--mw-text-strong); }
.sidebar-brand {
  color: var(--mw-red);
  font-weight: 700;
  font-size: 1.1rem;
  font-style: italic;
  text-decoration: none;
}

/* ---------- Top bar: portal navbar, and the admin shell's mobile bar ---------- */
.navbar {
  background: var(--mw-surface);
  border-bottom: 1px solid var(--mw-border);
}
.navbar-brand {
  color: var(--mw-red) !important;
  font-weight: 700;
  font-style: italic;
}
.navbar .nav-link { color: var(--mw-muted); }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--mw-text); }

/* ---------- "Limited mode" bar: a Slack quick-link session, offer a full sign-in ---------- */
.stepup-bar {
  background: var(--mw-surface-raised);
  border: 1px solid var(--mw-red-edge);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.stepup-bar .stepup-msg { color: var(--mw-muted); font-size: 0.9rem; flex: 1 1 240px; }
.stepup-bar > .bi { color: var(--mw-link); }

/* ---------- Sign-in / notice card (sign-in page, "sign-in unavailable") ---------- */
.mw-signin {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mw-signin-card { width: 360px; max-width: 100%; }
.mw-app-title {
  color: var(--mw-red);
  font-style: italic;
  font-weight: 700;
}

/* ---------- Light/dark toggle (theme.js) ---------- */
.mw-when-light { display: none !important; }
[data-bs-theme="light"] .mw-when-light { display: inline !important; }
[data-bs-theme="light"] .mw-when-dark { display: none !important; }
.mw-theme-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--mw-muted);
  cursor: pointer;
}
.mw-theme-toggle:hover { color: var(--mw-text); }
/* Sidebar row: same padding as the nav links around it */
.sidebar .mw-theme-toggle {
  width: 100%;
  text-align: start;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
}
/* Floating corner button on pages with no navbar (sign-in, notices) */
.mw-theme-corner {
  position: fixed;
  top: 0.75rem;
  right: 0.9rem;
  z-index: 1030;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.35rem;
}