/*
 * Sungro Connect — native CSS foundation (Phase 1, task 1.3).
 * No CSS framework, no web fonts, no icon library. Sections:
 *   1. Design tokens   2. Base   3. Application shell   4. Page header   5. Components   6. States
 *   7. Utilities       8. Accessibility media queries
 *
 * Colour pairs were checked against WCAG 2.2 AA (text >= 4.5:1, UI components >= 3:1); ratios are noted beside them.
 */

/* 1. Design tokens ------------------------------------------------------------------------------------ */
:root {
  /* Brand */
  --color-brand: #1a6b3c;            /* 6.54:1 on white */
  --color-brand-strong: #145530;     /* hover/active; white text 8.85:1 */
  --color-brand-subtle: #edf7f0;

  /* Neutrals */
  --color-text: #1f2328;             /* 15.8:1 on white */
  --color-text-muted: #59636e;       /* 6.11:1 on white, 5.74:1 on surface */
  --color-bg: #ffffff;
  --color-surface: #f6f8fa;
  --color-border: #d0d7de;           /* decorative dividers only */
  --color-border-control: #6e7781;   /* form controls, > 3:1 on white */

  /* Feedback: text on its own background, each >= 8:1 */
  --color-info: #0b4a8b;
  --color-info-bg: #eef5fc;
  --color-success: #14532d;
  --color-success-bg: #edf7f0;
  --color-warning: #6b4100;
  --color-warning-bg: #fff6e0;
  --color-danger: #b42318;           /* 6.57:1 on white; white text 6.57:1 */
  --color-danger-strong: #8a1c13;
  --color-danger-bg: #fdeeec;

  /* Focus */
  --color-focus: #0b57d0;            /* 6.39:1 on white */
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 2px;

  /* Typography (system fonts only) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing (4px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Borders and radii */
  --border-width: 1px;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* Layout */
  --content-max: 80rem;
  --form-max: 40rem;
  --control-height: 2.5rem;

  /* Breakpoints. Custom properties cannot be used inside @media, so the media queries below repeat these values:
     --bp-sm 36rem (576px), --bp-md 48rem (768px; navigation collapses below this), --bp-lg 64rem (1024px). */
  --bp-sm: 36rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;

  /* Layering */
  --z-header: 10;
  --z-skip-link: 100;

  --shadow-sm: 0 1px 2px rgb(31 35 40 / 0.08);
}

/* 2. Base --------------------------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-surface);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-brand);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-brand-strong);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 48rem) {
  .container {
    padding-inline: var(--space-5);
  }
}

/* 3. Application shell -------------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: 0;
  z-index: var(--z-skip-link);
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand-strong);
  color: #ffffff;
  font-weight: var(--weight-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0);
  color: #ffffff;
}

.app-header {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-top: 3px solid var(--color-brand);
  border-bottom: var(--border-width) solid var(--color-border);
}

.app-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  min-height: 3.75rem;
  padding-block: var(--space-2);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  margin-right: auto;
}

.app-brand:hover {
  color: var(--color-text);
}

.app-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.app-brand__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.app-brand__context {
  padding-left: var(--space-2);
  border-left: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Signed-in controls in the header (task 1.4-C): user name, change password, sign out (a POST form). */
.app-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.app-session__user {
  color: var(--color-text-muted);
}

.app-session__form {
  margin: 0;
}
.app-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;               /* comfortable pointer target */
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.app-nav__link:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.app-nav__link[aria-current="page"] {
  color: var(--color-brand-strong);
  background: var(--color-brand-subtle);
  box-shadow: inset 0 -3px 0 var(--color-brand);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

/* Three-line menu glyph drawn with CSS (no icon library). */
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }

/* Narrow screens with JavaScript: the navigation collapses behind the toggle.
   Without JavaScript the toggle stays hidden and the navigation simply wraps. */
@media (max-width: 47.99rem) {
  .has-nav-toggle .app-nav {
    flex-basis: 100%;
  }

  .has-nav-toggle .app-nav:not(.is-open) {
    display: none;
  }

  .has-nav-toggle .app-nav__list {
    flex-direction: column;
    padding-block: var(--space-2);
    border-top: var(--border-width) solid var(--color-border);
  }

  .has-nav-toggle .app-nav__link {
    width: 100%;
  }

  .app-brand__context {
    display: none;
  }
}

@media (min-width: 48rem) {
  .nav-toggle {
    display: none;
  }
}

.app-main {
  flex: 1;
  padding-block: var(--space-5) var(--space-7);
}

.app-main:focus {
  outline: none;
}

.app-footer {
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.app-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-4);
}

/* 4. Page header -------------------------------------------------------------------------------------- */
.page-header {
  margin-bottom: var(--space-5);
}

.page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.page-header__title {
  margin: 0;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* PageActions on a page that suppresses the layout's page header. */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.page-header__description {
  margin: var(--space-2) 0 0;
  max-width: 48rem;
  color: var(--color-text-muted);
}

.breadcrumbs {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  /* Empty alternative text: the separator is visual only and is not read aloud (task 1.3 review finding M5). */
  content: "/" / "";
  margin-right: var(--space-1);
  color: var(--color-text-muted);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text-muted);
}

/* 5. Components --------------------------------------------------------------------------------------- */

/* Panels and sections */
.panel {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.panel__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.panel__description {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Inside a panel header, spacing comes from the header itself. */
.panel__header .panel__title {
  margin-bottom: var(--space-1);
}

.panel__header .panel__description {
  margin-bottom: 0;
}

.stack > * + * {
  margin-top: var(--space-4);
}

.grid-2 {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

/* The grid gap provides the spacing; child margins would double it when columns stack. */
.grid-2 > * {
  margin-bottom: 0;
}

@media (min-width: 64rem) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Home page: one panel per module the session may open. */
.module-list {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.module-list__item {
  margin-bottom: 0;
}

/* Report counts: right-aligned, equal-width digits so columns of numbers line up. */
.data-table .data-table__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48rem) {
  .module-list {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}

.list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-plain > li + li {
  margin-top: var(--space-2);
}

.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: 999px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.badge--brand {
  border-color: var(--color-brand);
  color: var(--color-brand-strong);
  background: var(--color-brand-subtle);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-brand);
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: #ffffff;
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--color-brand-strong);
  border-color: var(--color-brand-strong);
  color: #ffffff;
}

.button--secondary {
  background: var(--color-bg);
  border-color: var(--color-border-control);
  color: var(--color-text);
}

.button--secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.button--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #ffffff;
}

.button--danger:hover {
  background: var(--color-danger-strong);
  border-color: var(--color-danger-strong);
  color: #ffffff;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Forms. Server-side validation is authoritative; MVC's validation class names are styled here too. */
.form {
  max-width: var(--form-max);
}

.field {
  margin-bottom: var(--space-4);
}

.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
}

.field__required {
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

.field__hint {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.field__error,
.field-validation-error {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field-validation-valid {
  display: none;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  line-height: var(--leading-normal);
}

.textarea {
  min-height: 6rem;
  resize: vertical;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--color-focus);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"],
.input-validation-error,
.input:user-invalid,
.select:user-invalid,
.textarea:user-invalid {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.fieldset {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.fieldset__legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: var(--weight-semibold);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
}

.choice input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color-brand);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.filter-bar .field {
  margin-bottom: 0;
  min-width: 12rem;
}

/* Status messages */
.alert,
.validation-summary-errors {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid currentColor;
  border-left-width: 4px;
  border-radius: var(--radius-md);
}

.alert > :last-child,
.validation-summary-errors > :last-child {
  margin-bottom: 0;
}

.alert__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.alert__kind {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.alert__title {
  font-weight: var(--weight-semibold);
}

.alert--info { color: var(--color-info); background: var(--color-info-bg); }
.alert--success { color: var(--color-success); background: var(--color-success-bg); }
.alert--warning { color: var(--color-warning); background: var(--color-warning-bg); }
.alert--error,
.validation-summary-errors { color: var(--color-danger-strong); background: var(--color-danger-bg); }

.validation-summary-errors ul {
  margin: 0;
  padding-left: var(--space-5);
}

.validation-summary-valid {
  display: none;
}

/* Server-rendered error summary (_ErrorSummary.cshtml). It receives focus on load, so its focus ring is
   shown for programmatic focus too, not only for keyboard focus. */
.error-summary:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.error-summary__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  color: inherit;
}

.error-summary__list a {
  color: inherit;
  font-weight: var(--weight-semibold);
}

/* Data tables: the wrapper scrolls horizontally on narrow screens instead of squashing columns. */
.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table caption {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.data-table th,
.data-table td {
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: var(--color-surface);
}

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sort-link {
  color: inherit;
  text-decoration: none;
}

.sort-link:hover {
  text-decoration: underline;
}

.sort-link__indicator {
  margin-left: var(--space-1);
  color: var(--color-text-muted);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.pagination__summary {
  color: var(--color-text-muted);
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
}

.pagination__link[aria-current="page"] {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #ffffff;
}

/* Confirmation dialog (native <dialog>) */
.dialog {
  width: min(28rem, calc(100vw - 2 * var(--space-4)));
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  box-shadow: 0 12px 32px rgb(31 35 40 / 0.2);
}

.dialog::backdrop {
  background: rgb(31 35 40 / 0.45);
}

.dialog__body {
  padding: var(--space-5);
}

.dialog__title {
  font-size: var(--text-lg);
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* Summary list: label/value pairs for a record (account administration, task 1.4-E). */
.summary-list {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.summary-list dt {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.summary-list dd {
  margin: 0;
}

@media (max-width: 48rem) {
  .summary-list {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .summary-list dd + dt {
    margin-top: var(--space-3);
  }
}

/* A form whose controls sit on one line (for example a select and its button). */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

/* A one-time secret shown to an administrator (temporary password). */
.secret-value {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: 0.05em;
  word-break: break-all;
  user-select: all;
}

/* 6. States ------------------------------------------------------------------------------------------- */
.state {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

.state__title {
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-lg);
}

.state > :last-child {
  margin-bottom: 0;
}

.state--error .state__title {
  color: var(--color-danger-strong);
}

.state--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 7. Utilities ---------------------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-muted {
  color: var(--color-text-muted);
}

/* 8. Accessibility media queries ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .spinner {
    animation: none;
    border-top-color: var(--color-border);
    border-right-color: var(--color-brand);
  }
}

@media (forced-colors: active) {
  .button,
  .nav-toggle,
  .pagination__link {
    border: 1px solid ButtonText;
  }

  .app-nav__link[aria-current="page"],
  .pagination__link[aria-current="page"] {
    text-decoration: underline;
    outline: 2px solid Highlight;
  }

  .alert,
  .validation-summary-errors {
    border-color: CanvasText;
  }

  /* Forced colours drop the red border colour and the inset shadow, so an invalid field gets a cue that is not a
     colour: a thicker dashed border (task 1.3 review finding M11). The error text below the field still names the error. */
  .input[aria-invalid="true"],
  .select[aria-invalid="true"],
  .textarea[aria-invalid="true"],
  .input-validation-error,
  .input:user-invalid,
  .select:user-invalid,
  .textarea:user-invalid {
    border: 3px dashed CanvasText;
  }
}

@media print {
  .app-header,
  .app-footer,
  .skip-link,
  .nav-toggle,
  .dialog {
    display: none !important;
  }

  body,
  .panel,
  .table-wrap {
    background: #ffffff;
    box-shadow: none;
  }
}

/* Multi-line values entered by users (an employee address): keep their line breaks. */
.text-preserve-lines {
  white-space: pre-line;
}