/*! ==========================================================================
 * Arrowmech Telemetry — UI v1 design system
 * --------------------------------------------------------------------------
 * ONE stylesheet for the whole product surface (customer + SuperAdmin + auth).
 *
 * WHY A PLAIN, COMMITTED STYLESHEET AND NOT VITE.
 * public/build/ is committed to this repository and CI has no frontend build
 * step, so production deploys are a repository checkout. Routing the design
 * system through Vite would add a build requirement production cannot satisfy
 * today. This file is hand-authored, committed, and served directly.
 *
 * LOAD ORDER. It is loaded AFTER assets/css/style.css (the legacy Star Admin
 * template, which is also the ONLY source of Bootstrap 5.1.3's CSS). The
 * template keeps supplying the Bootstrap grid/utility/modal primitives; this
 * file supplies the Arrowmech visual language and overrides the template's
 * gradient-era component styling.
 *
 * NAMING. Everything new is prefixed `am-`. Bare Bootstrap selectors are
 * touched only where the template must be neutralised.
 * ========================================================================== */

/* ==========================================================================
   1. Typography — Ubuntu, served from the already-vendored local files.
      Declared as ONE family across four real weights so `font-weight` works
      normally. No Google Fonts, no bunny.net, no network dependency.
   ========================================================================== */

@font-face {
  font-family: 'Arrowmech Sans';
  src: url('../fonts/Ubuntu/Ubuntu-Light.woff2') format('woff2'),
       url('../fonts/Ubuntu/Ubuntu-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arrowmech Sans';
  src: url('../fonts/Ubuntu/Ubuntu-Regular.woff2') format('woff2'),
       url('../fonts/Ubuntu/Ubuntu-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arrowmech Sans';
  src: url('../fonts/Ubuntu/Ubuntu-Medium.woff2') format('woff2'),
       url('../fonts/Ubuntu/Ubuntu-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arrowmech Sans';
  src: url('../fonts/Ubuntu/Ubuntu-Bold.woff2') format('woff2'),
       url('../fonts/Ubuntu/Ubuntu-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
  /* Brand ------------------------------------------------------------- */
  --am-red:        #C12026;
  --am-red-dark:   #9C181D;  /* 7.0:1 on white — accessible for text/links   */
  --am-red-deep:   #7C1317;
  --am-red-tint:   #FCF2F2;
  --am-red-tint-2: #F6DFE0;

  /* Neutrals ---------------------------------------------------------- */
  --am-ink:        #151A22;  /* near-charcoal, primary text                  */
  --am-ink-2:      #2C3340;  /* secondary headings                           */
  --am-muted:      #5C6676;  /* 5.9:1 on white                               */
  --am-muted-2:    #7C8798;  /* 4.0:1 — decorative/large text only           */
  --am-canvas:     #F3F5F8;
  --am-surface:    #FFFFFF;
  --am-surface-2:  #FAFBFC;
  --am-border:     #E2E7EE;
  --am-border-2:   #CFD7E2;

  /* Status — every one carries an accessible text tone + a quiet surface */
  --am-success:       #12714A;
  --am-success-bg:    #ECF7F1;
  --am-success-br:    #BFE2D0;
  --am-warning:       #8A5A06;
  --am-warning-bg:    #FFF7E9;
  --am-warning-br:    #F0DDB6;
  --am-danger:        #A8231D;
  --am-danger-bg:     #FDF1F0;
  --am-danger-br:     #F0C9C6;
  --am-info:          #17558F;
  --am-info-bg:       #EFF5FC;
  --am-info-br:       #C6DAF0;

  /* Type -------------------------------------------------------------- */
  --am-font: 'Arrowmech Sans', 'Ubuntu', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --am-font-num: 'Arrowmech Sans', ui-monospace, SFMono-Regular, 'SF Mono',
                 Menlo, Consolas, monospace;

  --am-fs-xs:   0.75rem;    /* 12 */
  --am-fs-sm:   0.8125rem;  /* 13 */
  --am-fs-base: 0.875rem;   /* 14 */
  --am-fs-md:   0.9375rem;  /* 15 */
  --am-fs-lg:   1.0625rem;  /* 17 */
  --am-fs-xl:   1.25rem;    /* 20 */
  --am-fs-2xl:  1.5rem;     /* 24 */
  --am-fs-3xl:  1.875rem;   /* 30 */

  /* Space ------------------------------------------------------------- */
  --am-sp-1: 4px;
  --am-sp-2: 8px;
  --am-sp-3: 12px;
  --am-sp-4: 16px;
  --am-sp-5: 20px;
  --am-sp-6: 24px;
  --am-sp-7: 32px;
  --am-sp-8: 40px;

  /* Radii / elevation ------------------------------------------------- */
  --am-r-sm: 4px;
  --am-r:    6px;
  --am-r-md: 8px;
  --am-r-lg: 12px;
  --am-r-pill: 999px;

  --am-shadow-sm: 0 1px 2px rgba(21, 26, 34, .05);
  --am-shadow:    0 1px 3px rgba(21, 26, 34, .07), 0 1px 2px rgba(21, 26, 34, .04);
  --am-shadow-lg: 0 12px 32px rgba(21, 26, 34, .12), 0 2px 8px rgba(21, 26, 34, .06);

  --am-ring: 0 0 0 3px rgba(193, 32, 38, .22);
  --am-ring-neutral: 0 0 0 3px rgba(44, 51, 64, .16);

  /* Shell dimensions -------------------------------------------------- */
  --am-sidebar-w: 252px;
  --am-topbar-h: 60px;
  --am-gutter: 16px;

  --am-transition: 150ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   3. Base + legacy-template neutralisation
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--am-font);
  font-size: var(--am-fs-base);
  line-height: 1.55;
  color: var(--am-ink);
  background-color: var(--am-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The template ships a global gradient/brand treatment for these; the whole
   product now uses flat, bordered surfaces instead. */
.bg-gradient-danger,
.bg-gradient-primary,
.bg-gradient-dark,
.btn-gradient-danger,
.btn-gradient-dark,
.btn-gradient-primary {
  background: none !important;
  background-image: none !important;
}

.am-app *,
.am-app *::before,
.am-app *::after,
.am-auth *,
.am-auth *::before,
.am-auth *::after {
  box-sizing: border-box;
}

.am-app h1, .am-app h2, .am-app h3, .am-app h4, .am-app h5, .am-app h6 {
  color: var(--am-ink);
  font-weight: 500;
  letter-spacing: -0.011em;
  margin: 0;
}

.am-app a {
  text-decoration: none;
}

/* Prose links only. This rule deliberately does NOT target every <a> inside the
   shell: navigation items, tabs, pagination and link-buttons carry their own
   colour, and a blanket `.am-app a` colour outranks all of them (0,1,1 beats
   0,1,0) — which is how every sidebar item once rendered brand-red and a
   primary <a> button drew dark-red text on its red fill. */
.am-content p a,
.am-notice__body a,
.am-table td a:not(.am-btn),
.am-hint a {
  color: var(--am-red-dark);
  text-decoration: underline;
}

/* One focus treatment for the entire product. */
.am-app :focus-visible,
.am-auth :focus-visible {
  outline: 2px solid var(--am-red-dark);
  outline-offset: 2px;
  border-radius: var(--am-r-sm);
}

.am-sr-only {
  /* Anchored to the top-left of the containing block on purpose: an
     absolutely-positioned box with no offsets takes its STATIC position, and
     inside a horizontally scrolling table that lands outside the viewport and
     grows the document. Screen readers follow DOM order, not this position. */
  position: absolute !important;
  left: 0;
  top: 0;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users get a way past the navigation. */
.am-skip {
  position: absolute;
  left: var(--am-sp-3);
  top: -60px;
  z-index: 1200;
  padding: 10px var(--am-sp-4);
  background: var(--am-surface);
  color: var(--am-ink);
  border: 1px solid var(--am-border-2);
  border-radius: var(--am-r);
  box-shadow: var(--am-shadow-lg);
  font-weight: 500;
  transition: top var(--am-transition);
}

.am-skip:focus {
  top: var(--am-sp-3);
  text-decoration: none;
}

/* ==========================================================================
   4. Application shell
   ========================================================================== */

.am-app {
  min-height: 100vh;
  background: var(--am-canvas);
}

/* -- Sidebar ------------------------------------------------------------ */

.am-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--am-sidebar-w);
  z-index: 1045;
  display: flex;
  flex-direction: column;
  background: var(--am-surface);
  border-right: 1px solid var(--am-border);
}

.am-sidebar__brand {
  display: flex;
  align-items: center;
  height: var(--am-topbar-h);
  padding: 0 var(--am-sp-5);
  border-bottom: 1px solid var(--am-border);
  flex: 0 0 auto;
}

.am-sidebar__brand img {
  display: block;
  height: 30px;
  width: auto;
  max-width: 100%;
}

.am-sidebar__brand:hover {
  text-decoration: none;
}

.am-sidebar__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--am-sp-5) 0 var(--am-sp-4);
}

.am-nav__section {
  padding: 0 var(--am-sp-5) var(--am-sp-2);
  margin-top: var(--am-sp-5);
  font-size: var(--am-fs-xs);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--am-muted-2);
}

.am-nav__section:first-child {
  margin-top: 0;
}

.am-nav {
  list-style: none;
  margin: 0;
  padding: 0 var(--am-sp-3);
}

.am-nav__item + .am-nav__item {
  margin-top: 2px;
}

.am-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--am-sp-3);
  min-height: 40px;
  padding: var(--am-sp-2) var(--am-sp-3);
  border-radius: var(--am-r);
  color: var(--am-ink-2);
  font-size: var(--am-fs-md);
  font-weight: 400;
  transition: background-color var(--am-transition), color var(--am-transition);
}

.am-nav__link:hover {
  background: var(--am-canvas);
  color: var(--am-ink);
  text-decoration: none;
}

.am-nav__link .am-nav__icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--am-muted);
  transition: color var(--am-transition);
}

.am-nav__link.is-active {
  background: var(--am-red-tint);
  color: var(--am-red-dark);
  font-weight: 500;
}

.am-nav__link.is-active .am-nav__icon {
  color: var(--am-red);
}

/* The active marker is a shape as well as a colour. */
.am-nav__link.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: var(--am-r-pill);
  background: var(--am-red);
}

.am-nav__link.is-active {
  padding-left: calc(var(--am-sp-3) + 7px);
}

.am-sidebar__account {
  flex: 0 0 auto;
  border-top: 1px solid var(--am-border);
  padding: var(--am-sp-4) var(--am-sp-5);
  display: flex;
  align-items: center;
  gap: var(--am-sp-3);
  min-width: 0;
}

.am-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--am-r-md);
  background: var(--am-red-tint);
  color: var(--am-red-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--am-fs-md);
  border: 1px solid var(--am-red-tint-2);
}

.am-account__text {
  min-width: 0;
  line-height: 1.3;
}

.am-account__name {
  display: block;
  font-size: var(--am-fs-base);
  font-weight: 500;
  color: var(--am-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-account__role {
  display: block;
  font-size: var(--am-fs-xs);
  color: var(--am-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Topbar ------------------------------------------------------------- */

.am-main {
  margin-left: var(--am-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.am-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: var(--am-sp-3);
  height: var(--am-topbar-h);
  padding: 0 var(--am-sp-6);
  background: var(--am-surface);
  border-bottom: 1px solid var(--am-border);
}

.am-topbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: -6px;
  border: 1px solid var(--am-border);
  border-radius: var(--am-r);
  background: var(--am-surface);
  color: var(--am-ink-2);
  font-size: 20px;
  cursor: pointer;
}

.am-topbar__toggle:hover {
  background: var(--am-canvas);
}

.am-topbar__context {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}

.am-topbar__eyebrow {
  display: block;
  font-size: var(--am-fs-xs);
  color: var(--am-muted);
  letter-spacing: .02em;
}

.am-topbar__title {
  display: block;
  font-size: var(--am-fs-md);
  font-weight: 500;
  color: var(--am-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-topbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--am-sp-2);
}

.am-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1440px;
  padding: var(--am-sp-6) var(--am-sp-6) var(--am-sp-8);
}

.am-footer {
  border-top: 1px solid var(--am-border);
  padding: var(--am-sp-4) var(--am-sp-6);
  font-size: var(--am-fs-sm);
  color: var(--am-muted);
  background: var(--am-surface);
}

.am-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(21, 26, 34, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--am-transition), visibility var(--am-transition);
}

/* ==========================================================================
   5. Page header + tab switcher
   ========================================================================== */

.am-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--am-sp-4);
  margin-bottom: var(--am-sp-6);
}

.am-page-header__text {
  min-width: 0;
}

.am-page-title {
  font-size: var(--am-fs-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--am-ink);
  margin: 0;
}

.am-page-subtitle {
  margin: var(--am-sp-1) 0 0;
  font-size: var(--am-fs-md);
  color: var(--am-muted);
  max-width: 68ch;
}

.am-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-sp-2);
}

.am-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-md);
  margin-bottom: var(--am-sp-5);
}

.am-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--am-sp-4);
  border-radius: var(--am-r);
  font-size: var(--am-fs-base);
  font-weight: 500;
  color: var(--am-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.am-tab:hover {
  color: var(--am-ink);
  background: var(--am-canvas);
  text-decoration: none;
}

.am-tab.is-active {
  background: var(--am-red-tint);
  color: var(--am-red-dark);
}

.am-tab.is-active:hover {
  background: var(--am-red-tint);
}

/* ==========================================================================
   6. Cards / grid / stats
   ========================================================================== */

.am-card {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-lg);
  box-shadow: var(--am-shadow-sm);
}

.am-card + .am-card {
  margin-top: var(--am-sp-5);
}

.am-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-sp-3);
  padding: var(--am-sp-4) var(--am-sp-5);
  border-bottom: 1px solid var(--am-border);
}

.am-card__title {
  font-size: var(--am-fs-lg);
  font-weight: 500;
  color: var(--am-ink);
  margin: 0;
}

.am-card__hint {
  font-size: var(--am-fs-sm);
  color: var(--am-muted);
  margin: 2px 0 0;
}

.am-card__body {
  padding: var(--am-sp-5);
}

.am-card__body--flush {
  padding: 0;
}

.am-card__footer {
  padding: var(--am-sp-4) var(--am-sp-5);
  border-top: 1px solid var(--am-border);
  background: var(--am-surface-2);
  border-radius: 0 0 var(--am-r-lg) var(--am-r-lg);
}

.am-grid {
  display: grid;
  gap: var(--am-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.am-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.am-grid + .am-grid,
.am-grid + .am-card,
.am-card + .am-grid {
  margin-top: var(--am-sp-5);
}

.am-stat {
  position: relative;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-lg);
  padding: var(--am-sp-5);
  box-shadow: var(--am-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--am-sp-2);
  min-width: 0;
}

.am-stat__head {
  display: flex;
  align-items: center;
  gap: var(--am-sp-2);
  color: var(--am-muted);
}

.am-stat__icon {
  font-size: 17px;
  line-height: 1;
  color: var(--am-red);
}

.am-stat__label {
  font-size: var(--am-fs-sm);
  font-weight: 500;
  letter-spacing: .01em;
}

.am-stat__value {
  font-family: var(--am-font-num);
  font-size: var(--am-fs-3xl);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--am-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.am-stat__value--text {
  font-size: var(--am-fs-xl);
  letter-spacing: 0;
}

.am-stat__meta {
  font-size: var(--am-fs-sm);
  color: var(--am-muted);
  margin: 0;
}

/* A definition strip: label over value, for truthful context rather than
   invented trend metrics. */
.am-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-sp-6);
  padding: var(--am-sp-4) var(--am-sp-5);
  background: var(--am-surface-2);
  border-bottom: 1px solid var(--am-border);
}

.am-summary__item {
  min-width: 0;
}

.am-summary__label {
  display: block;
  font-size: var(--am-fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--am-muted);
}

.am-summary__value {
  display: block;
  margin-top: 2px;
  font-size: var(--am-fs-lg);
  font-weight: 500;
  color: var(--am-ink);
  font-variant-numeric: tabular-nums;
}

.am-summary__value--muted {
  color: var(--am-muted);
  font-weight: 400;
}

.am-dl {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 0;
  margin: 0;
  font-size: var(--am-fs-base);
}

.am-dl dt,
.am-dl dd {
  padding: var(--am-sp-2) 0;
  margin: 0;
  border-bottom: 1px solid var(--am-border);
  min-width: 0;
}

.am-dl dt {
  color: var(--am-muted);
  font-weight: 400;
  padding-right: var(--am-sp-3);
}

.am-dl dd {
  color: var(--am-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.am-dl dt:last-of-type,
.am-dl dd:last-of-type {
  border-bottom: 0;
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 var(--am-sp-4);
  border-radius: var(--am-r);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--am-fs-base);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--am-transition), border-color var(--am-transition),
              color var(--am-transition), box-shadow var(--am-transition);
}

.am-btn:hover { text-decoration: none; }

.am-btn:disabled,
.am-btn[aria-disabled='true'],
.am-btn.is-loading {
  opacity: .6;
  pointer-events: none;
}

.am-btn--primary {
  background: var(--am-red);
  border-color: var(--am-red);
  color: #fff;
}

.am-btn--primary:hover {
  background: var(--am-red-dark);
  border-color: var(--am-red-dark);
  color: #fff;
}

.am-btn--secondary {
  background: var(--am-surface);
  border-color: var(--am-border-2);
  color: var(--am-ink-2);
}

.am-btn--secondary:hover {
  background: var(--am-canvas);
  border-color: var(--am-muted-2);
  color: var(--am-ink);
}

.am-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--am-muted);
}

.am-btn--ghost:hover {
  background: var(--am-canvas);
  color: var(--am-ink);
}

/* Destructive actions are visually distinct from the brand primary. */
.am-btn--danger {
  background: var(--am-surface);
  border-color: var(--am-danger-br);
  color: var(--am-danger);
}

.am-btn--danger:hover {
  background: var(--am-danger);
  border-color: var(--am-danger);
  color: #fff;
}

.am-btn--danger-solid {
  background: var(--am-danger);
  border-color: var(--am-danger);
  color: #fff;
}

.am-btn--danger-solid:hover {
  background: #8E1D18;
  border-color: #8E1D18;
  color: #fff;
}

.am-btn--sm {
  min-height: 32px;
  padding: 0 var(--am-sp-3);
  font-size: var(--am-fs-sm);
}

.am-btn--block {
  width: 100%;
}

.am-btn--icon {
  width: 38px;
  padding: 0;
}

.am-btn__icon {
  font-size: 16px;
  line-height: 1;
}

.am-btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--am-sp-2);
  align-items: center;
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

.am-form-grid {
  display: grid;
  gap: var(--am-sp-4) var(--am-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.am-form-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.am-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.am-field--full {
  grid-column: 1 / -1;
}

.am-label {
  font-size: var(--am-fs-sm);
  font-weight: 500;
  color: var(--am-ink-2);
}

.am-req {
  color: var(--am-red-dark);
  margin-left: 2px;
}

.am-input,
.am-select,
.am-textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px var(--am-sp-3);
  font-family: inherit;
  font-size: var(--am-fs-base);
  color: var(--am-ink);
  background: var(--am-surface);
  border: 1px solid var(--am-border-2);
  border-radius: var(--am-r);
  transition: border-color var(--am-transition), box-shadow var(--am-transition);
  -webkit-appearance: none;
  appearance: none;
}

.am-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235C6676'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 30px;
}

.am-input[type='date'],
.am-input[type='datetime-local'] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.am-input::placeholder,
.am-textarea::placeholder {
  color: var(--am-muted-2);
}

.am-input:hover,
.am-select:hover,
.am-textarea:hover {
  border-color: var(--am-muted-2);
}

.am-input:focus,
.am-select:focus,
.am-textarea:focus {
  outline: none;
  border-color: var(--am-red);
  box-shadow: var(--am-ring);
}

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

.am-input.is-invalid,
.am-select.is-invalid {
  border-color: var(--am-danger);
}

.am-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(168, 35, 29, .2);
}

.am-help {
  font-size: var(--am-fs-xs);
  color: var(--am-muted);
}

.am-field-error {
  font-size: var(--am-fs-xs);
  font-weight: 500;
  color: var(--am-danger);
  min-height: 0;
}

.am-field-error:empty {
  display: none;
}

.am-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-sp-3);
  margin-top: var(--am-sp-5);
  padding-top: var(--am-sp-5);
  border-top: 1px solid var(--am-border);
}

/* -- Filter / control surface ------------------------------------------- */

.am-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--am-sp-4);
  padding: var(--am-sp-4) var(--am-sp-5);
  background: var(--am-surface-2);
  border-bottom: 1px solid var(--am-border);
  border-radius: var(--am-r-lg) var(--am-r-lg) 0 0;
}

.am-filters__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
}

.am-filters__field .am-input {
  min-width: 170px;
}

.am-filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-sp-2);
}

/* -- Switch ------------------------------------------------------------- */

.am-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--am-sp-3);
  cursor: pointer;
  min-height: 24px;
}

.am-switch input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.am-switch__track {
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  border-radius: var(--am-r-pill);
  background: var(--am-border-2);
  transition: background-color var(--am-transition);
  position: relative;
}

.am-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--am-shadow-sm);
  transition: transform var(--am-transition);
}

.am-switch input:checked + .am-switch__track {
  background: var(--am-red);
}

.am-switch input:checked + .am-switch__track::after {
  transform: translateX(20px);
}

.am-switch input:focus-visible + .am-switch__track {
  box-shadow: var(--am-ring);
}

.am-switch__text {
  font-size: var(--am-fs-base);
  color: var(--am-ink-2);
}

/* A STATUS switch, not a preference switch.
   Brand red is the "on" colour for a preference (the customer's L/M3 unit),
   but a whole column of solid-red toggles on the Account Status roster both
   floods the page with the accent and reads backwards — red conventionally
   means stopped, while here "on" means the account is ACTIVE. */
.am-switch--status input:checked + .am-switch__track {
  background: var(--am-success);
}

.am-switch--status input:focus-visible + .am-switch__track {
  box-shadow: 0 0 0 3px rgba(18, 113, 74, .25);
}

/* ==========================================================================
   9. Tables
   ========================================================================== */

.am-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.am-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--am-fs-base);
  background: var(--am-surface);
}

.am-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--am-sp-3) var(--am-sp-4);
  text-align: left;
  font-size: var(--am-fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--am-muted);
  background: var(--am-surface-2);
  border-bottom: 1px solid var(--am-border);
  white-space: nowrap;
}

.am-table tbody td,
.am-table tbody th {
  padding: var(--am-sp-3) var(--am-sp-4);
  border-bottom: 1px solid var(--am-border);
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
  color: var(--am-ink);
}

.am-table tbody tr:last-child td,
.am-table tbody tr:last-child th {
  border-bottom: 0;
}

.am-table tbody tr:hover td,
.am-table tbody tr:hover th {
  background: var(--am-surface-2);
}

/* Numeric columns: right-aligned, tabular, so digits line up down the column. */
.am-table .am-num,
.am-num {
  text-align: right;
  font-family: var(--am-font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.am-table .am-col-idx {
  width: 1%;
  white-space: nowrap;
  color: var(--am-muted);
  font-variant-numeric: tabular-nums;
}

.am-table .am-col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.am-table .am-col-actions .am-btn-group {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.am-table__name {
  font-weight: 500;
  color: var(--am-ink);
}

.am-row-click {
  cursor: pointer;
}

.am-row-click:focus-visible {
  outline: 2px solid var(--am-red-dark);
  outline-offset: -2px;
}

/* A withheld row is muted AND carries a status chip — never colour alone. */
.am-row-unavailable td,
.am-row-unavailable th,
.am-row-unavailable .am-table__name {
  color: var(--am-muted);
}

/* The total row is a summary, not another data row. */
.am-table tfoot td,
.am-table tfoot th,
.am-table__total td,
.am-table__total th {
  padding: var(--am-sp-4);
  background: var(--am-surface-2);
  border-top: 2px solid var(--am-border-2);
  border-bottom: 0;
  font-weight: 500;
  color: var(--am-ink);
}

.am-table .am-table__total-label {
  text-align: right;
  color: var(--am-ink-2);
}

.am-table .am-table__total-value {
  text-align: right;
  font-family: var(--am-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--am-fs-lg);
  white-space: nowrap;
}

/* An incomplete total must read as incomplete at a glance. */
.am-table__total--incomplete td,
.am-table__total--incomplete th {
  background: var(--am-warning-bg);
  border-top-color: var(--am-warning-br);
}

.am-table__total--incomplete .am-table__total-label,
.am-table__total--incomplete .am-table__total-value {
  color: var(--am-warning);
}

.am-table-note {
  padding: var(--am-sp-3) var(--am-sp-5) var(--am-sp-4);
  margin: 0;
  font-size: var(--am-fs-sm);
  color: var(--am-muted);
  border-top: 1px solid var(--am-border);
  background: var(--am-surface);
}

/* A cell that is also the row's control: it looks like the data it shows, but
   it is a real <button>, so a keyboard user can reach and open the row. */
.am-cell-btn {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--am-ink);
  text-align: left;
  cursor: pointer;
}

.am-cell-btn:hover {
  color: var(--am-red-dark);
  text-decoration: underline;
}

.am-row-unavailable .am-cell-btn {
  color: var(--am-muted);
}

/* An empty state that replaces the rows sits flush inside its cell. */
.am-td-flush {
  padding: 0 !important;
}

/* Groups one card's actions under a small label — used on the dashboard when a
   customer has BOTH flow meters and piezometers and the two sets of report
   actions must stay distinguishable. */
.am-report-group-label {
  margin: var(--am-sp-4) 0 var(--am-sp-2);
  font-size: var(--am-fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--am-muted);
}

.am-report-group-label:first-of-type {
  margin-top: 0;
}

/* A quiet line of guidance directly under a card. */
.am-hint {
  margin: var(--am-sp-4) 0 0;
  font-size: var(--am-fs-sm);
  color: var(--am-muted);
}

/* ==========================================================================
   10. Badges / status chips
   ========================================================================== */

.am-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: var(--am-r-pill);
  border: 1px solid transparent;
  font-size: var(--am-fs-xs);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.am-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.am-badge--success { background: var(--am-success-bg); border-color: var(--am-success-br); color: var(--am-success); }
.am-badge--warning { background: var(--am-warning-bg); border-color: var(--am-warning-br); color: var(--am-warning); }
.am-badge--danger  { background: var(--am-danger-bg);  border-color: var(--am-danger-br);  color: var(--am-danger); }
.am-badge--info    { background: var(--am-info-bg);    border-color: var(--am-info-br);    color: var(--am-info); }
.am-badge--neutral { background: var(--am-canvas);     border-color: var(--am-border-2);   color: var(--am-muted); }

.am-badge--plain::before { display: none; }

/* ==========================================================================
   11. Notices
   ========================================================================== */

.am-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--am-sp-3);
  padding: var(--am-sp-4);
  border: 1px solid var(--am-border-2);
  border-left-width: 3px;
  border-radius: var(--am-r);
  background: var(--am-surface-2);
  color: var(--am-ink-2);
  font-size: var(--am-fs-base);
}

.am-notice + .am-notice {
  margin-top: var(--am-sp-3);
}

.am-notice__icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.35;
}

.am-notice__body {
  min-width: 0;
}

.am-notice__title {
  display: block;
  font-weight: 500;
  margin-bottom: 2px;
  color: inherit;
}

.am-notice__body p {
  margin: 0;
}

.am-notice__body ul {
  margin: 0;
  padding-left: 1.1rem;
}

.am-notice--info    { background: var(--am-info-bg);    border-color: var(--am-info-br);    border-left-color: var(--am-info);    color: var(--am-info); }
.am-notice--warning { background: var(--am-warning-bg); border-color: var(--am-warning-br); border-left-color: var(--am-warning); color: var(--am-warning); }
.am-notice--danger  { background: var(--am-danger-bg);  border-color: var(--am-danger-br);  border-left-color: var(--am-danger);  color: var(--am-danger); }
.am-notice--success { background: var(--am-success-bg); border-color: var(--am-success-br); border-left-color: var(--am-success); color: var(--am-success); }

.am-notice--block {
  margin-bottom: var(--am-sp-5);
}

/* ==========================================================================
   12. Empty / loading / error states
   ========================================================================== */

.am-empty {
  padding: var(--am-sp-8) var(--am-sp-5);
  text-align: center;
  color: var(--am-muted);
}

.am-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--am-sp-3);
  border-radius: var(--am-r-lg);
  background: var(--am-canvas);
  border: 1px solid var(--am-border);
  color: var(--am-muted-2);
  font-size: 22px;
}

.am-empty__title {
  font-size: var(--am-fs-lg);
  font-weight: 500;
  color: var(--am-ink);
  margin: 0 0 var(--am-sp-1);
}

.am-empty__text {
  margin: 0 auto;
  max-width: 46ch;
  font-size: var(--am-fs-base);
}

.am-empty__actions {
  margin-top: var(--am-sp-5);
  display: flex;
  justify-content: center;
  gap: var(--am-sp-2);
}

.am-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--am-sp-3);
  padding: var(--am-sp-7) var(--am-sp-4);
  color: var(--am-muted);
  font-size: var(--am-fs-base);
}

.am-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--am-border-2);
  border-top-color: var(--am-red);
  animation: am-spin .7s linear infinite;
}

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

/* ==========================================================================
   13. Modals — Bootstrap 5.1.3 runtime, Arrowmech skin
   ========================================================================== */

.am-modal .modal-content {
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-lg);
  box-shadow: var(--am-shadow-lg);
  background: var(--am-surface);
}

.am-modal .modal-header {
  align-items: flex-start;
  padding: var(--am-sp-5);
  border-bottom: 1px solid var(--am-border);
  background: none;
}

.am-modal .modal-title {
  font-size: var(--am-fs-lg);
  font-weight: 500;
  color: var(--am-ink);
  line-height: 1.35;
}

.am-modal .modal-body {
  padding: var(--am-sp-5);
}

.am-modal .modal-footer {
  padding: var(--am-sp-4) var(--am-sp-5);
  gap: var(--am-sp-2);
  border-top: 1px solid var(--am-border);
  background: var(--am-surface-2);
  border-radius: 0 0 var(--am-r-lg) var(--am-r-lg);
}

.am-modal .modal-footer > * {
  margin: 0;
}

.am-modal .btn-close {
  margin: 0;
  padding: var(--am-sp-2);
  border-radius: var(--am-r);
  opacity: .5;
}

.am-modal .btn-close:hover {
  opacity: 1;
}

/* A dialog is not the page: cap the form grid so fields stay readable instead
   of collapsing into five narrow columns. */
.am-modal .am-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 992px) {
  .am-modal .am-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .am-modal .am-form-grid {
    grid-template-columns: 1fr;
  }
}

.am-modal__subtitle {
  margin: 2px 0 0;
  font-size: var(--am-fs-sm);
  color: var(--am-muted);
  font-weight: 400;
}

/* A two-column detail layout inside a modal that collapses on a phone. */
.am-modal-split {
  display: grid;
  gap: var(--am-sp-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.am-panel {
  border: 1px solid var(--am-border);
  border-radius: var(--am-r-md);
  overflow: hidden;
  min-width: 0;
}

.am-panel__header {
  display: flex;
  align-items: center;
  gap: var(--am-sp-2);
  padding: var(--am-sp-3) var(--am-sp-4);
  background: var(--am-surface-2);
  border-bottom: 1px solid var(--am-border);
  font-size: var(--am-fs-sm);
  font-weight: 500;
  color: var(--am-ink-2);
}

.am-panel__header .mdi {
  color: var(--am-red);
  font-size: 16px;
}

.am-panel__body {
  padding: var(--am-sp-3) var(--am-sp-4);
}

/* ==========================================================================
   14. Pagination (Laravel's bootstrap-4 paginator markup)
   ========================================================================== */

.am-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-sp-3);
  padding: var(--am-sp-3) var(--am-sp-5);
  border-top: 1px solid var(--am-border);
}

.am-pagination nav {
  width: 100%;
}

.am-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-pagination .page-item .page-link,
.am-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--am-border-2);
  border-radius: var(--am-r);
  background: var(--am-surface);
  color: var(--am-ink-2);
  font-size: var(--am-fs-sm);
  font-weight: 500;
  box-shadow: none;
  text-decoration: none;
}

.am-pagination .page-link:hover {
  background: var(--am-canvas);
  border-color: var(--am-muted-2);
  color: var(--am-ink);
}

.am-pagination .page-item.active .page-link {
  background: var(--am-red);
  border-color: var(--am-red);
  color: #fff;
}

.am-pagination .page-item.disabled .page-link {
  color: var(--am-muted-2);
  background: var(--am-canvas);
  border-color: var(--am-border);
  pointer-events: none;
}

/* Laravel's paginator renders a duplicate mobile block plus a results summary;
   keep one, and let the summary sit above the links on a phone. */
.am-pagination .pagination-info,
.am-pagination p.small {
  margin: 0;
  font-size: var(--am-fs-sm);
  color: var(--am-muted);
}

/* ==========================================================================
   15. Authentication
   ========================================================================== */

.am-auth {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  font-family: var(--am-font);
  color: var(--am-ink);
  background: var(--am-surface);
}

.am-auth__brandside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--am-sp-8) clamp(32px, 5vw, 64px);
  background: var(--am-ink);
  color: #fff;
  overflow: hidden;
}

/* A restrained technical field, not a large red gradient. */
.am-auth__brandside::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 80% at 30% 20%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 30% 20%, #000 35%, transparent 78%);
  pointer-events: none;
}

.am-auth__brandside > * {
  position: relative;
}

.am-auth__mark {
  display: inline-flex;
  align-items: center;
  padding: var(--am-sp-3) var(--am-sp-4);
  background: #fff;
  border-radius: var(--am-r-md);
  align-self: flex-start;
}

.am-auth__mark img {
  display: block;
  height: 34px;
  width: auto;
}

.am-auth__pitch {
  max-width: 34rem;
}

.am-auth__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--am-fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-bottom: var(--am-sp-4);
}

.am-auth__kicker::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--am-red);
}

.am-auth__headline {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.16;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.am-auth__headline strong {
  font-weight: 500;
}

.am-auth__blurb {
  margin: var(--am-sp-4) 0 0;
  font-size: var(--am-fs-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
  max-width: 42ch;
}

.am-auth__meta {
  font-size: var(--am-fs-xs);
  color: rgba(255, 255, 255, .45);
  margin: 0;
}

.am-auth__formside {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--am-sp-8) var(--am-gutter);
  background: var(--am-surface);
}

.am-auth__card {
  width: 100%;
  max-width: 388px;
}

.am-auth__logo {
  display: none;
  margin-bottom: var(--am-sp-6);
}

.am-auth__logo img {
  height: 40px;
  width: auto;
}

.am-auth__title {
  font-size: var(--am-fs-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

.am-auth__sub {
  margin: 6px 0 var(--am-sp-6);
  color: var(--am-muted);
  font-size: var(--am-fs-md);
}

.am-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--am-sp-4);
}

.am-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-sp-3);
  font-size: var(--am-fs-sm);
}

.am-auth__link {
  color: var(--am-red-dark);
  font-weight: 500;
}

.am-auth__foot {
  margin-top: var(--am-sp-7);
  padding-top: var(--am-sp-4);
  border-top: 1px solid var(--am-border);
  font-size: var(--am-fs-xs);
  color: var(--am-muted);
}

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (max-width: 1280px) {
  .am-content {
    padding: var(--am-sp-5) var(--am-sp-5) var(--am-sp-7);
  }
}

/* Tablet and below: the sidebar becomes an off-canvas drawer. */
@media (max-width: 1024px) {
  .am-sidebar {
    transform: translateX(-100%);
    transition: transform var(--am-transition);
    box-shadow: var(--am-shadow-lg);
  }

  .am-app.is-nav-open .am-sidebar {
    transform: translateX(0);
  }

  .am-app.is-nav-open .am-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .am-main {
    margin-left: 0;
  }

  .am-topbar__toggle {
    display: inline-flex;
  }

  .am-topbar {
    padding: 0 var(--am-sp-5);
  }

  .am-footer {
    padding: var(--am-sp-4) var(--am-sp-5);
  }
}

@media (max-width: 860px) {
  .am-auth {
    grid-template-columns: 1fr;
  }

  .am-auth__brandside {
    display: none;
  }

  .am-auth__logo {
    display: block;
  }

  .am-auth__formside {
    padding: var(--am-sp-7) var(--am-gutter);
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  :root {
    --am-topbar-h: 56px;
  }

  .am-content {
    padding: var(--am-sp-4) var(--am-gutter) var(--am-sp-7);
  }

  .am-topbar {
    padding: 0 var(--am-gutter);
  }

  .am-footer {
    padding: var(--am-sp-4) var(--am-gutter);
    text-align: center;
  }

  .am-page-header {
    margin-bottom: var(--am-sp-5);
  }

  .am-page-title {
    font-size: var(--am-fs-xl);
  }

  .am-page-header__actions,
  .am-page-header__actions .am-btn {
    width: 100%;
  }

  .am-card__body,
  .am-card__header,
  .am-card__footer,
  .am-filters,
  .am-summary,
  .am-pagination {
    padding-left: var(--am-gutter);
    padding-right: var(--am-gutter);
  }

  /* Filters stack and the actions go full width rather than colliding. */
  .am-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .am-filters__field {
    width: 100%;
  }

  .am-filters__field .am-input {
    min-width: 0;
    width: 100%;
  }

  .am-filters__actions {
    margin-left: 0;
    width: 100%;
  }

  .am-filters__actions .am-btn {
    flex: 1 1 auto;
  }

  .am-summary {
    gap: var(--am-sp-4);
  }

  .am-summary__item {
    flex: 1 1 40%;
  }

  .am-table thead th,
  .am-table tbody td,
  .am-table tbody th {
    padding: var(--am-sp-3) var(--am-sp-3);
  }

  .am-table__total-value {
    font-size: var(--am-fs-md);
  }

  .am-table-note {
    padding-left: var(--am-gutter);
    padding-right: var(--am-gutter);
  }

  .am-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .am-form-actions .am-btn {
    width: 100%;
  }

  .am-modal .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .am-modal .modal-footer .am-btn {
    width: 100%;
  }

  .am-dl {
    grid-template-columns: 1fr;
  }

  .am-dl dt {
    padding-bottom: 0;
    border-bottom: 0;
    font-size: var(--am-fs-xs);
  }

  .am-dl dd {
    padding-top: 2px;
  }

  .am-btn-group .am-btn {
    flex: 1 1 auto;
  }
}

/* ── Phone tables ───────────────────────────────────────────────────────────
   A wide telemetry table on a 390px phone pushed its most important column —
   the Total — off-screen behind a horizontal scroll the customer had no reason
   to expect. The Sr.No column is a pure ordinal that carries no information the
   row order does not already give, so it is dropped here and the remaining
   columns fit. The scroll container stays as the fallback for the widest
   tables (the instrument lists). */
@media (max-width: 560px) {
  /* COLLAPSED, NOT REMOVED. `display: none` drops the cell from the row, so a
     header/body row falls to three slots while the totals row still declares
     four (colspan 3 + the figure) — the table then grows a fourth column and
     the Machine Total figure stops sitting under the Total heading. Zeroing the
     cell keeps every row four slots wide, so the columns stay aligned. */
  .am-table .am-col-idx {
    width: 0;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 0;
    color: transparent;
    overflow: hidden;
  }

  .am-table thead th,
  .am-table tbody td,
  .am-table tbody th {
    padding: var(--am-sp-3) 10px;
  }

  .am-table thead th {
    font-size: 10px;
    letter-spacing: .05em;
  }

  .am-table .am-table__total-label,
  .am-table .am-table__total-value {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* A withheld row's chip must not force the column wider than the phone. */
  .am-table .am-badge {
    font-size: 11px;
  }
}

/* Touch targets stay comfortable on coarse pointers. */
@media (pointer: coarse) {
  .am-btn--sm {
    min-height: 38px;
    padding: 0 var(--am-sp-4);
  }

  .am-nav__link {
    min-height: 44px;
  }

  .am-pagination .page-link {
    min-width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .am-app *,
  .am-auth * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .am-spinner {
    animation: none;
    border-top-color: var(--am-red);
  }
}

@media print {
  .am-sidebar,
  .am-topbar,
  .am-footer,
  .am-filters__actions,
  .am-backdrop {
    display: none !important;
  }

  .am-main { margin-left: 0; }
  .am-card { border: 1px solid #ccc; box-shadow: none; }
  body { background: #fff; }
}