/*
 * atx-ui.css: ActivTrax UI reference stylesheet
 * Version: 1.1.0 (Adopted 2026-10-18 as 1.0.0, see Docs/standards/ui-design.md and ADR-0011;
 *          1.1.0 2026-10-27: WOFF2 fonts)
 *
 * Purpose: design tokens, base styles, layout primitives, and core components
 *          for new and rewritten ActivTrax web pages.
 * Canonical copy: AtxV3/Static/Stylesheets/atx-ui.css. Other repos vendor a
 *          byte-identical copy (Atx: css/atx-ui.css). Never edit a vendored
 *          copy: change this file, bump the version, and copy it out.
 * Callers: Atx login page (index.php / index_file.php).
 * Fonts:   loaded relative to this file from ../Fonts/Open_Sans/, so each
 *          repo keeps the fonts in a Fonts/Open_Sans/ folder that is a
 *          sibling of the folder holding this file.
 *
 * Rules for this file
 *  - Everything is prefixed: classes `atx-`, custom properties `--atx-`.
 *    This lets it load next to legacy CSS (application.css, skins/*.css)
 *    without either one restyling the other.
 *  - Element (unclassed) styles apply only inside `.atx-ui`, which an
 *    opted-in page puts on <html> or <body>. Legacy pages that load this
 *    file only to use one component are not restyled.
 *  - Components use semantic tokens (`--atx-color-primary`), never primitive
 *    tokens (`--atx-blue-600`), so a brand refresh or dark mode only needs to
 *    swap semantic tokens. There is one brand for all customers (ADR-0012).
 *  - No build step. Plain CSS that evergreen browsers support (custom
 *    properties, flexbox, grid, :focus-visible, <dialog>).
 *  - Mobile first: base rules are for phones, `min-width` queries add layout.
 *    Breakpoints: sm 576px, md 768px, lg 992px, xl 1200px.
 */

/* ==========================================================================
   0. Fonts: self-hosted Open Sans 400/600/700 (OFL, see LICENSE.txt)
   Two variable WOFF2 files (upright and italic, Open Sans 3.003, Latin
   subset: ASCII, Latin-1, common punctuation, euro) serve every weight;
   each rule names the same file, so the browser downloads it once. The
   italic file loads only on pages that use italics. Characters outside the
   subset use the next font in --atx-font-sans. Browsers without WOFF2
   (IE11) fall back to the static TTFs, upright only.
   ========================================================================== */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../Fonts/Open_Sans/OpenSans-Latin-Variable.woff2") format("woff2"),
       url("../Fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../Fonts/Open_Sans/OpenSans-Latin-Variable.woff2") format("woff2"),
       url("../Fonts/Open_Sans/OpenSans-Semibold.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../Fonts/Open_Sans/OpenSans-Latin-Variable.woff2") format("woff2"),
       url("../Fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../Fonts/Open_Sans/OpenSans-Latin-Italic-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../Fonts/Open_Sans/OpenSans-Latin-Italic-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../Fonts/Open_Sans/OpenSans-Latin-Italic-Variable.woff2") format("woff2");
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* --- Primitive palette (don't use these directly in components) ------- */
  --atx-blue-50:  #eef6fd;
  --atx-blue-100: #d6eafb;
  --atx-blue-200: #aed4f6;
  --atx-blue-300: #7dbaf0;
  --atx-blue-400: #42a4f1;   /* legacy Food mobile / NewApp blue: accents, charts, large numerals only */
  --atx-blue-500: #1f8ad8;
  --atx-blue-600: #1670b8;   /* primary action */
  --atx-blue-700: #125a94;
  --atx-blue-800: #0e4672;
  --atx-blue-900: #0b3358;   /* app bar, descends from V3 #003770 */

  --atx-yellow-50:  #fffbd6;
  --atx-yellow-300: #f8ef6b;
  --atx-yellow-400: #f4e500; /* signature ActivTrax yellow (menu highlight) */
  --atx-yellow-600: #d9c400;

  --atx-gray-0:   #ffffff;
  --atx-gray-50:  #f6f7f9;
  --atx-gray-100: #eceef1;
  --atx-gray-200: #dde1e6;
  --atx-gray-300: #c5cbd3;
  --atx-gray-400: #9aa3ad;
  --atx-gray-500: #666e78;
  --atx-gray-600: #59626c;
  --atx-gray-700: #424a53;
  --atx-gray-800: #2c333a;
  --atx-gray-900: #1b2026;

  --atx-green-50:  #e8f6ec;
  --atx-green-400: #5dbb5d;  /* legacy "completed" green: fills and charts */
  --atx-green-600: #1e7d3a;
  --atx-red-50:    #fdecec;
  --atx-red-400:   #ff6542;  /* legacy "over target": large numerals and charts */
  --atx-red-600:   #c5000f;
  --atx-amber-50:  #fff4d1;
  --atx-amber-400: #ffc409;
  --atx-amber-700: #8a5a00;

  /* --- Semantic color tokens (components use these) -------------------- */
  --atx-color-bg:            var(--atx-gray-50);
  --atx-color-surface:       var(--atx-gray-0);
  --atx-color-surface-sunken: var(--atx-gray-100);
  --atx-color-border:        var(--atx-gray-200);
  --atx-color-border-strong: var(--atx-gray-300);

  --atx-color-text:          var(--atx-gray-900);
  --atx-color-text-muted:    var(--atx-gray-600);
  --atx-color-text-subtle:   var(--atx-gray-500);
  --atx-color-text-disabled: var(--atx-gray-400);

  --atx-color-primary:       var(--atx-blue-600);
  --atx-color-primary-hover: var(--atx-blue-700);
  --atx-color-primary-active: var(--atx-blue-800);
  --atx-color-primary-soft:  var(--atx-blue-50);
  --atx-color-on-primary:    #ffffff;
  --atx-color-link:          var(--atx-blue-700);
  --atx-color-focus:         var(--atx-blue-500);

  /* Brand: the ActivTrax brand, the same for every customer (ADR-0012) */
  --atx-color-brand:         var(--atx-blue-900);   /* app bar background */
  --atx-color-on-brand:      #ffffff;
  --atx-color-on-brand-muted: rgba(255, 255, 255, 0.78);
  --atx-color-brand-accent:  var(--atx-yellow-400); /* current-nav indicator */
  --atx-color-highlight:     var(--atx-yellow-50);  /* "new"/"selected" row tint */

  --atx-color-success:       var(--atx-green-600);
  --atx-color-success-soft:  var(--atx-green-50);
  --atx-color-warning:       var(--atx-amber-700);
  --atx-color-warning-soft:  var(--atx-amber-50);
  --atx-color-danger:        var(--atx-red-600);
  --atx-color-danger-hover:  #a3000c;
  --atx-color-danger-soft:   var(--atx-red-50);
  --atx-color-info:          var(--atx-blue-700);
  --atx-color-info-soft:     var(--atx-blue-50);

  /* Data visualization (in order; colorblind-checked against each other) */
  --atx-chart-1: #1670b8;
  --atx-chart-2: #f2a516;
  --atx-chart-3: #2e9e6a;
  --atx-chart-4: #d4465b;
  --atx-chart-5: #7b5cc4;
  --atx-chart-6: #666e78;
  --atx-chart-target: #1b2026;

  /* --- Typography ------------------------------------------------------- */
  --atx-font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --atx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --atx-text-xs:  0.75rem;   /* 12px: captions, badges */
  --atx-text-sm:  0.875rem;  /* 14px: secondary text, dense tables */
  --atx-text-md:  1rem;      /* 16px: body, inputs */
  --atx-text-lg:  1.125rem;  /* 18px: h4, lead */
  --atx-text-xl:  1.25rem;   /* 20px: h3 */
  --atx-text-2xl: 1.5rem;    /* 24px: h2, mobile h1 */
  --atx-text-3xl: 1.875rem;  /* 30px: desktop h1 */
  --atx-text-4xl: 2.25rem;   /* 36px: KPI numerals */

  --atx-weight-regular: 400;
  --atx-weight-semibold: 600;
  --atx-weight-bold: 700;

  --atx-leading-tight: 1.25;
  --atx-leading-normal: 1.5;

  /* --- Space, size, shape ----------------------------------------------- */
  --atx-space-1: 0.25rem;  /* 4  */
  --atx-space-2: 0.5rem;   /* 8  */
  --atx-space-3: 0.75rem;  /* 12 */
  --atx-space-4: 1rem;     /* 16 */
  --atx-space-5: 1.5rem;   /* 24 */
  --atx-space-6: 2rem;     /* 32 */
  --atx-space-7: 3rem;     /* 48 */
  --atx-space-8: 4rem;     /* 64 */

  --atx-gutter: var(--atx-space-4);    /* page side padding; grows at md */
  --atx-container-max: 75rem;           /* 1200px, same as V3 #outer */
  --atx-container-narrow: 45rem;        /* 720px: forms, reading */
  --atx-sidebar-width: 15rem;           /* 240px */
  --atx-appbar-height: 3.5rem;          /* 56px */
  --atx-control-height: 2.5rem;         /* 40px; 44px on touch screens */
  --atx-touch-target: 2.75rem;          /* 44px minimum hit area */

  --atx-radius-sm: 4px;
  --atx-radius-md: 8px;
  --atx-radius-lg: 12px;
  --atx-radius-pill: 999px;

  --atx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --atx-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.12);
  --atx-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.18);
  --atx-focus-ring: 0 0 0 3px rgba(31, 138, 216, 0.45);

  --atx-z-appbar: 100;
  --atx-z-dropdown: 200;
  --atx-z-drawer: 300;
  --atx-z-dialog: 400;
  --atx-z-toast: 500;

  --atx-duration-fast: 120ms;
  --atx-duration: 200ms;
  --atx-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (pointer: coarse) {
  :root { --atx-control-height: 2.75rem; }
}

@media (min-width: 768px) {
  :root { --atx-gutter: var(--atx-space-5); }
}

/* ==========================================================================
   2. Base (only inside opted-in pages)
   :where() keeps these at element-level specificity so any component
   class (.atx-btn on an <a>, for example) overrides them.
   ========================================================================== */

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

.atx-ui {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.atx-ui body,
body.atx-ui {
  margin: 0;
  background: var(--atx-color-bg);
  color: var(--atx-color-text);
  font-family: var(--atx-font-sans);
  font-size: var(--atx-text-md);
  line-height: var(--atx-leading-normal);
  -webkit-font-smoothing: antialiased;
}

:where(.atx-ui) h1, :where(.atx-ui) h2, :where(.atx-ui) h3, :where(.atx-ui) h4 {
  margin: 0 0 var(--atx-space-3);
  font-family: var(--atx-font-sans);
  font-weight: var(--atx-weight-semibold);
  line-height: var(--atx-leading-tight);
  color: var(--atx-color-text);
}
:where(.atx-ui) h1 { font-size: var(--atx-text-2xl); }
:where(.atx-ui) h2 { font-size: var(--atx-text-xl); }
:where(.atx-ui) h3 { font-size: var(--atx-text-lg); }
:where(.atx-ui) h4 { font-size: var(--atx-text-md); }

@media (min-width: 768px) {
  :where(.atx-ui) h1 { font-size: var(--atx-text-3xl); }
  :where(.atx-ui) h2 { font-size: var(--atx-text-2xl); }
  :where(.atx-ui) h3 { font-size: var(--atx-text-xl); }
}

:where(.atx-ui) p { margin: 0 0 var(--atx-space-4); }

:where(.atx-ui) a {
  color: var(--atx-color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
:where(.atx-ui) a:hover { color: var(--atx-color-primary-active); }

:where(.atx-ui) :focus-visible {
  outline: 2px solid var(--atx-color-focus);
  outline-offset: 2px;
}

:where(.atx-ui) img, :where(.atx-ui) svg, :where(.atx-ui) video { max-width: 100%; height: auto; }
:where(.atx-ui) hr { border: 0; border-top: 1px solid var(--atx-color-border); margin: var(--atx-space-5) 0; }
:where(.atx-ui) small { font-size: var(--atx-text-sm); }

/* ==========================================================================
   3. Layout
   ========================================================================== */

/* App bar: brand-colored top bar with logo, primary nav, account menu */
.atx-appbar {
  position: sticky;
  top: 0;
  z-index: var(--atx-z-appbar);
  display: flex;
  align-items: center;
  gap: var(--atx-space-3);
  min-height: var(--atx-appbar-height);
  padding: 0 var(--atx-gutter);
  background: var(--atx-color-brand);
  color: var(--atx-color-on-brand);
  box-shadow: var(--atx-shadow-sm);
}
.atx-appbar__logo { display: flex; align-items: center; flex: none; }
.atx-appbar__logo img { display: block; height: 32px; width: auto; }
.atx-appbar__spacer { flex: 1; }
.atx-appbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--atx-touch-target);
  height: var(--atx-touch-target);
  margin-left: calc(var(--atx-space-2) * -1);
  border: 0;
  border-radius: var(--atx-radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.atx-appbar__toggle:hover { background: rgba(255, 255, 255, 0.12); }

/* Primary nav: drawer below lg, inline row at lg and up */
.atx-nav {
  position: fixed;
  inset: var(--atx-appbar-height) 0 0 0;
  z-index: var(--atx-z-drawer);
  display: none;
  flex-direction: column;
  padding: var(--atx-space-3);
  overflow-y: auto;
  background: var(--atx-color-brand);
}
.atx-nav[data-open="true"] { display: flex; }
.atx-nav a,
.atx-nav summary {
  display: flex;
  align-items: center;
  gap: var(--atx-space-2);
  min-height: var(--atx-touch-target);
  padding: 0 var(--atx-space-3);
  border-radius: var(--atx-radius-md);
  color: var(--atx-color-on-brand-muted);
  font-weight: var(--atx-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}
.atx-nav a:hover,
.atx-nav summary:hover { background: rgba(255, 255, 255, 0.10); color: var(--atx-color-on-brand); }
.atx-nav a[aria-current="page"] {
  color: var(--atx-color-on-brand);
  box-shadow: inset 4px 0 0 var(--atx-color-brand-accent);
}

@media (min-width: 992px) {
  .atx-appbar__toggle { display: none; }
  .atx-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--atx-space-1);
    padding: 0;
    overflow: visible;
    background: transparent;
  }
  .atx-nav a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--atx-color-brand-accent);
    border-radius: var(--atx-radius-md) var(--atx-radius-md) 0 0;
  }
}

/* Content container */
.atx-container {
  width: 100%;
  max-width: var(--atx-container-max);
  margin: 0 auto;
  padding: var(--atx-space-5) var(--atx-gutter) var(--atx-space-7);
}
.atx-container--narrow { max-width: var(--atx-container-narrow); }

/* Optional sidebar layout: stacks below lg */
.atx-layout {
  display: grid;
  gap: var(--atx-space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .atx-layout--sidebar { grid-template-columns: var(--atx-sidebar-width) minmax(0, 1fr); }
}

/* Page header: breadcrumb, title, subtitle, actions */
.atx-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--atx-space-3) var(--atx-space-5);
  margin-bottom: var(--atx-space-5);
}
.atx-page-header__text { min-width: 0; flex: 1 1 20rem; }
.atx-page-header h1 { margin: 0; }
.atx-page-header__subtitle { margin: var(--atx-space-1) 0 0; color: var(--atx-color-text-muted); }
.atx-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--atx-space-2); }

/* Section header inside a page */
.atx-section { margin-bottom: var(--atx-space-6); }
.atx-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--atx-space-3);
  margin-bottom: var(--atx-space-3);
}
.atx-section__header h2 { margin: 0; }

/* Auto-fitting card grid (dashboards). Cards are never narrower than 18rem. */
.atx-grid {
  display: grid;
  gap: var(--atx-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.atx-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }

/* Fixed column counts that collapse on small screens */
.atx-cols { display: grid; gap: var(--atx-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .atx-cols--2, .atx-cols--3, .atx-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .atx-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atx-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Spacing primitives */
.atx-stack > * + * { margin-top: var(--atx-stack-gap, var(--atx-space-4)); }
.atx-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--atx-space-2); }

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */
.atx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--atx-space-2);
  min-height: var(--atx-control-height);
  padding: 0 var(--atx-space-4);
  border: 1px solid transparent;
  border-radius: var(--atx-radius-md);
  font-family: var(--atx-font-sans);
  font-size: var(--atx-text-md);
  font-weight: var(--atx-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--atx-duration-fast) var(--atx-ease),
              border-color var(--atx-duration-fast) var(--atx-ease);
}
.atx-btn:focus-visible { outline: none; box-shadow: var(--atx-focus-ring); }
.atx-btn svg { width: 1.25em; height: 1.25em; flex: none; }

.atx-btn--primary { background: var(--atx-color-primary); color: var(--atx-color-on-primary); }
.atx-btn--primary:hover { background: var(--atx-color-primary-hover); color: var(--atx-color-on-primary); }
.atx-btn--primary:active { background: var(--atx-color-primary-active); }

.atx-btn--secondary {
  background: var(--atx-color-surface);
  border-color: var(--atx-color-border-strong);
  color: var(--atx-color-text);
}
.atx-btn--secondary:hover { background: var(--atx-color-surface-sunken); color: var(--atx-color-text); }

.atx-btn--ghost { background: transparent; color: var(--atx-color-link); }
.atx-btn--ghost:hover { background: var(--atx-color-primary-soft); color: var(--atx-color-primary-active); }

.atx-btn--danger { background: var(--atx-color-danger); color: #ffffff; }
.atx-btn--danger:hover { background: var(--atx-color-danger-hover); color: #ffffff; }

.atx-btn--sm { min-height: 2rem; padding: 0 var(--atx-space-3); font-size: var(--atx-text-sm); }
.atx-btn--lg { min-height: 3rem; padding: 0 var(--atx-space-5); font-size: var(--atx-text-lg); }
.atx-btn--block { display: flex; width: 100%; }
.atx-btn--icon { width: var(--atx-control-height); padding: 0; }

.atx-btn:disabled,
.atx-btn[aria-disabled="true"] {
  background: var(--atx-color-surface-sunken);
  border-color: var(--atx-color-border);
  color: var(--atx-color-text-disabled);
  cursor: not-allowed;
}

/* --- Forms ---------------------------------------------------------------- */
.atx-field { display: flex; flex-direction: column; gap: var(--atx-space-1); margin-bottom: var(--atx-space-4); }
.atx-label { font-size: var(--atx-text-sm); font-weight: var(--atx-weight-semibold); color: var(--atx-color-text); }
.atx-label__required { color: var(--atx-color-danger); margin-left: 2px; }
.atx-label__optional { color: var(--atx-color-text-subtle); font-weight: var(--atx-weight-regular); }
.atx-help { font-size: var(--atx-text-sm); color: var(--atx-color-text-muted); }
.atx-error { font-size: var(--atx-text-sm); color: var(--atx-color-danger); font-weight: var(--atx-weight-semibold); }

.atx-input,
.atx-select,
.atx-textarea {
  width: 100%;
  min-height: var(--atx-control-height);
  padding: var(--atx-space-2) var(--atx-space-3);
  border: 1px solid var(--atx-color-border-strong);
  border-radius: var(--atx-radius-md);
  background-color: var(--atx-color-surface);
  color: var(--atx-color-text);
  font-family: var(--atx-font-sans);
  font-size: var(--atx-text-md); /* 16px keeps iOS from zooming on focus */
  line-height: 1.4;
}
.atx-textarea { min-height: 6rem; resize: vertical; }
.atx-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2359626c' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}
.atx-input:hover, .atx-select:hover, .atx-textarea:hover { border-color: var(--atx-gray-400); }
.atx-input:focus, .atx-select:focus, .atx-textarea:focus {
  outline: none;
  border-color: var(--atx-color-focus);
  box-shadow: var(--atx-focus-ring);
}
.atx-input[aria-invalid="true"], .atx-select[aria-invalid="true"], .atx-textarea[aria-invalid="true"] {
  border-color: var(--atx-color-danger);
}
.atx-input:disabled, .atx-select:disabled, .atx-textarea:disabled {
  background-color: var(--atx-color-surface-sunken);
  color: var(--atx-color-text-disabled);
}

/* Checkbox and radio: native controls, sized for touch */
.atx-check {
  display: flex;
  align-items: flex-start;
  gap: var(--atx-space-2);
  min-height: var(--atx-touch-target);
  padding: var(--atx-space-2) 0;
  cursor: pointer;
}
.atx-check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  flex: none;
  accent-color: var(--atx-color-primary);
}

/* Switch: a checkbox with role="switch" */
.atx-switch { display: inline-flex; align-items: center; gap: var(--atx-space-3); min-height: var(--atx-touch-target); cursor: pointer; }
.atx-switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border-radius: var(--atx-radius-pill);
  background: var(--atx-gray-300);
  cursor: pointer;
  transition: background-color var(--atx-duration) var(--atx-ease);
}
.atx-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--atx-shadow-sm);
  transition: transform var(--atx-duration) var(--atx-ease);
}
.atx-switch input:checked { background: var(--atx-color-primary); }
.atx-switch input:checked::after { transform: translateX(1.25rem); }
.atx-switch input:focus-visible { outline: none; box-shadow: var(--atx-focus-ring); }

/* Form layout: single column on phones, optional two columns at md */
.atx-form-row { display: grid; gap: 0 var(--atx-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .atx-form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.atx-form-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--atx-space-2);
  padding-top: var(--atx-space-4);
  border-top: 1px solid var(--atx-color-border);
}
.atx-form-actions .atx-btn { width: 100%; }
@media (min-width: 576px) {
  .atx-form-actions { flex-direction: row; justify-content: flex-end; }
  .atx-form-actions .atx-btn { width: auto; }
}
/* On phones, keep the action bar reachable on long forms */
@media (max-width: 575.98px) {
  .atx-form-actions--sticky {
    position: sticky;
    bottom: 0;
    margin: 0 calc(var(--atx-gutter) * -1);
    padding: var(--atx-space-3) var(--atx-gutter);
    background: var(--atx-color-surface);
    box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.08);
  }
}

/* --- Cards (replaces .widget, .dashmodouter, .sidebar_box) ---------------- */
.atx-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--atx-color-surface);
  border: 1px solid var(--atx-color-border);
  border-radius: var(--atx-radius-lg);
  box-shadow: var(--atx-shadow-sm);
}
.atx-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--atx-space-2);
  padding: var(--atx-space-3) var(--atx-space-4);
  border-bottom: 1px solid var(--atx-color-border);
}
.atx-card__title { margin: 0; font-size: var(--atx-text-lg); font-weight: var(--atx-weight-semibold); line-height: var(--atx-leading-tight); }
.atx-card__body { padding: var(--atx-space-4); flex: 1; }
.atx-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--atx-space-2);
  padding: var(--atx-space-3) var(--atx-space-4);
  border-top: 1px solid var(--atx-color-border);
}
.atx-card__body--flush { padding: 0; }

/* KPI / stat tile */
.atx-stat { display: flex; flex-direction: column; gap: var(--atx-space-1); }
.atx-stat__label { font-size: var(--atx-text-sm); color: var(--atx-color-text-muted); }
.atx-stat__value {
  font-size: var(--atx-text-4xl);
  font-weight: var(--atx-weight-semibold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--atx-color-text);
}
.atx-stat__value--good { color: var(--atx-color-success); }
.atx-stat__value--bad { color: var(--atx-color-danger); }
.atx-stat__meta { font-size: var(--atx-text-sm); color: var(--atx-color-text-subtle); }

/* Progress bar (replaces .graph/.bar image bars) */
.atx-progress {
  height: 0.5rem;
  border-radius: var(--atx-radius-pill);
  background: var(--atx-color-surface-sunken);
  overflow: hidden;
}
.atx-progress__bar { height: 100%; background: var(--atx-color-primary); border-radius: inherit; }
.atx-progress__bar--success { background: var(--atx-green-400); }
.atx-progress__bar--over { background: var(--atx-red-400); }

/* --- Tables --------------------------------------------------------------- */
.atx-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--atx-color-border);
  border-radius: var(--atx-radius-lg);
  background: var(--atx-color-surface);
}
.atx-card .atx-table-wrap { border: 0; border-radius: 0; }
.atx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--atx-text-sm);
}
.atx-table th,
.atx-table td {
  padding: var(--atx-space-3) var(--atx-space-4);
  border-bottom: 1px solid var(--atx-color-border);
  text-align: left;
  vertical-align: middle;
}
.atx-table thead th {
  background: var(--atx-color-surface-sunken);
  color: var(--atx-color-text-muted);
  font-size: var(--atx-text-xs);
  font-weight: var(--atx-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.atx-table tbody tr:last-child td { border-bottom: 0; }
.atx-table tbody tr:hover { background: var(--atx-gray-50); }
.atx-table tbody tr[aria-selected="true"] { background: var(--atx-color-highlight); }
.atx-table .atx-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atx-table--dense th, .atx-table--dense td { padding: var(--atx-space-2) var(--atx-space-3); }
.atx-table--striped tbody tr:nth-child(even) { background: var(--atx-gray-50); }
.atx-table th[aria-sort] button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--atx-space-1);
}
.atx-table th[aria-sort="ascending"] button::after { content: "\2191"; }
.atx-table th[aria-sort="descending"] button::after { content: "\2193"; }

/* Sticky first column for wide tables that scroll sideways on phones */
.atx-table--sticky-first th:first-child,
.atx-table--sticky-first td:first-child {
  position: sticky;
  left: 0;
  background: var(--atx-color-surface);
  box-shadow: 1px 0 0 var(--atx-color-border);
}
.atx-table--sticky-first thead th:first-child { background: var(--atx-color-surface-sunken); }

/* Stacked table: below sm, each row becomes a card. Every <td> needs data-label. */
@media (max-width: 575.98px) {
  .atx-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .atx-table--stack tr { display: block; padding: var(--atx-space-3) var(--atx-space-4); border-bottom: 1px solid var(--atx-color-border); }
  .atx-table--stack tbody tr:last-child { border-bottom: 0; }
  .atx-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--atx-space-4);
    padding: var(--atx-space-1) 0;
    border: 0;
    text-align: right;
  }
  .atx-table--stack td::before {
    content: attr(data-label);
    color: var(--atx-color-text-muted);
    font-weight: var(--atx-weight-semibold);
    text-align: left;
  }
  .atx-table--stack td[data-label=""]::before { content: none; }
  .atx-table--stack td:first-child { font-size: var(--atx-text-md); font-weight: var(--atx-weight-semibold); text-align: left; }
  .atx-table--stack td:first-child::before { content: none; }
}

/* --- List (simple rows: messages, appointments, devices) ------------------ */
.atx-list { margin: 0; padding: 0; list-style: none; }
.atx-list__item {
  display: flex;
  align-items: center;
  gap: var(--atx-space-3);
  min-height: 3.5rem;
  padding: var(--atx-space-3) var(--atx-space-4);
  border-bottom: 1px solid var(--atx-color-border);
}
.atx-list__item:last-child { border-bottom: 0; }
.atx-list__item--unread { background: var(--atx-color-primary-soft); }
.atx-list__item--unread .atx-list__title { font-weight: var(--atx-weight-bold); }
.atx-list__main { flex: 1; min-width: 0; }
.atx-list__title { display: block; font-weight: var(--atx-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atx-list__meta { display: block; font-size: var(--atx-text-sm); color: var(--atx-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.atx-list__item { color: inherit; text-decoration: none; }
a.atx-list__item:hover { background: var(--atx-gray-50); }

/* --- Tabs (replaces ul.tabnav, ul.favtabs) -------------------------------- */
.atx-tabs {
  display: flex;
  gap: var(--atx-space-1);
  margin-bottom: var(--atx-space-4);
  border-bottom: 1px solid var(--atx-color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.atx-tabs::-webkit-scrollbar { display: none; }
.atx-tabs a,
.atx-tabs button {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--atx-touch-target);
  padding: 0 var(--atx-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--atx-color-text-muted);
  font: inherit;
  font-weight: var(--atx-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.atx-tabs a:hover,
.atx-tabs button:hover { color: var(--atx-color-text); }
.atx-tabs [aria-current="page"],
.atx-tabs [aria-selected="true"] {
  color: var(--atx-color-primary);
  border-bottom-color: var(--atx-color-primary);
}

/* Segmented control (small set of exclusive views, e.g. Day / Week / Month) */
.atx-segmented {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--atx-radius-md);
  background: var(--atx-color-surface-sunken);
}
.atx-segmented button {
  min-height: 2.25rem;
  padding: 0 var(--atx-space-3);
  border: 0;
  border-radius: calc(var(--atx-radius-md) - 2px);
  background: transparent;
  color: var(--atx-color-text-muted);
  font: inherit;
  font-size: var(--atx-text-sm);
  font-weight: var(--atx-weight-semibold);
  cursor: pointer;
}
.atx-segmented button[aria-pressed="true"] { background: var(--atx-color-surface); color: var(--atx-color-text); box-shadow: var(--atx-shadow-sm); }

/* --- Breadcrumb (replaces #black_context_menu) ---------------------------- */
.atx-breadcrumb { margin-bottom: var(--atx-space-2); font-size: var(--atx-text-sm); }
.atx-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--atx-space-1); margin: 0; padding: 0; list-style: none; }
.atx-breadcrumb li { display: flex; align-items: center; gap: var(--atx-space-1); color: var(--atx-color-text-muted); }
.atx-breadcrumb li + li::before { content: "/"; color: var(--atx-color-text-disabled); }
.atx-breadcrumb a { color: var(--atx-color-text-muted); text-decoration: none; }
.atx-breadcrumb a:hover { color: var(--atx-color-link); text-decoration: underline; }
/* On phones, only show the parent as a back link */
@media (max-width: 575.98px) {
  .atx-breadcrumb li { display: none; }
  .atx-breadcrumb li:nth-last-child(2) { display: flex; }
  .atx-breadcrumb li:nth-last-child(2)::before { content: "\2190"; }
}

/* --- Dropdown menu: <details class="atx-menu"><summary>…</summary><div class="atx-menu__panel">… */
.atx-menu { position: relative; }
.atx-menu > summary { list-style: none; }
.atx-menu > summary::-webkit-details-marker { display: none; }
.atx-menu > summary::after { content: ""; width: 0.5em; height: 0.5em; margin-left: var(--atx-space-1); border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.atx-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--atx-space-1));
  z-index: var(--atx-z-dropdown);
  min-width: 12rem;
  padding: var(--atx-space-1);
  border: 1px solid var(--atx-color-border);
  border-radius: var(--atx-radius-md);
  background: var(--atx-color-surface);
  box-shadow: var(--atx-shadow-md);
}
.atx-menu__panel a,
.atx-menu__panel button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--atx-space-3);
  border: 0;
  border-radius: var(--atx-radius-sm);
  background: none;
  color: var(--atx-color-text);
  font: inherit;
  font-weight: var(--atx-weight-regular);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.atx-menu__panel a:hover,
.atx-menu__panel button:hover { background: var(--atx-color-surface-sunken); color: var(--atx-color-text); }
/* Inside the mobile drawer, menus expand inline instead of floating */
@media (max-width: 991.98px) {
  .atx-nav .atx-menu__panel { position: static; border: 0; box-shadow: none; background: transparent; padding: 0 0 0 var(--atx-space-4); }
  .atx-nav .atx-menu__panel a { color: var(--atx-color-on-brand-muted); }
  .atx-nav .atx-menu__panel a:hover { background: rgba(255, 255, 255, 0.10); color: var(--atx-color-on-brand); }
}

/* --- Alerts (replaces #flash_message, pretty_flash, div.announce) ---------- */
.atx-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--atx-space-3);
  margin-bottom: var(--atx-space-4);
  padding: var(--atx-space-3) var(--atx-space-4);
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--atx-radius-md);
  font-size: var(--atx-text-sm);
}
.atx-alert__title { display: block; font-weight: var(--atx-weight-semibold); }
.atx-alert--info    { background: var(--atx-color-info-soft);    border-color: var(--atx-color-info);    }
.atx-alert--success { background: var(--atx-color-success-soft); border-color: var(--atx-color-success); }
.atx-alert--warning { background: var(--atx-color-warning-soft); border-color: var(--atx-amber-400);     }
.atx-alert--danger  { background: var(--atx-color-danger-soft);  border-color: var(--atx-color-danger);  }

/* --- Badges / status pills ------------------------------------------------ */
.atx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--atx-space-1);
  padding: 0.125rem var(--atx-space-2);
  border-radius: var(--atx-radius-pill);
  background: var(--atx-color-surface-sunken);
  color: var(--atx-color-text-muted);
  font-size: var(--atx-text-xs);
  font-weight: var(--atx-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.atx-badge--info    { background: var(--atx-color-info-soft);    color: var(--atx-color-info); }
.atx-badge--success { background: var(--atx-color-success-soft); color: var(--atx-color-success); }
.atx-badge--warning { background: var(--atx-color-warning-soft); color: var(--atx-color-warning); }
.atx-badge--danger  { background: var(--atx-color-danger-soft);  color: var(--atx-color-danger); }
.atx-badge--count   { background: var(--atx-color-danger); color: #ffffff; min-width: 1.25rem; justify-content: center; }

/* --- Dialog (native <dialog>; replaces #popuppage, lightbox, facebox) ------ */
.atx-dialog {
  width: min(100% - 2rem, 32rem);
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--atx-radius-lg);
  background: var(--atx-color-surface);
  color: var(--atx-color-text);
  box-shadow: var(--atx-shadow-lg);
}
.atx-dialog--wide { width: min(100% - 2rem, 48rem); }
.atx-dialog::backdrop { background: rgba(16, 24, 40, 0.55); }
.atx-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--atx-space-3);
  padding: var(--atx-space-4) var(--atx-space-5);
  border-bottom: 1px solid var(--atx-color-border);
}
.atx-dialog__header h2 { margin: 0; font-size: var(--atx-text-xl); }
.atx-dialog__body { padding: var(--atx-space-5); overflow-y: auto; }
.atx-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--atx-space-2);
  padding: var(--atx-space-3) var(--atx-space-5);
  border-top: 1px solid var(--atx-color-border);
}
/* On phones a dialog becomes a full-screen sheet */
@media (max-width: 575.98px) {
  .atx-dialog,
  .atx-dialog--wide {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .atx-dialog[open],
  .atx-dialog > form { display: flex; flex-direction: column; }
  .atx-dialog > form { flex: 1; min-height: 0; }
  .atx-dialog__body { flex: 1; }
  .atx-dialog__footer { flex-direction: column-reverse; }
  .atx-dialog__footer .atx-btn { width: 100%; }
}

/* --- Toast (brief confirmation; announced via role="status") --------------- */
.atx-toast-region {
  position: fixed;
  left: var(--atx-space-4);
  right: var(--atx-space-4);
  bottom: var(--atx-space-4);
  z-index: var(--atx-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--atx-space-2);
  pointer-events: none;
}
.atx-toast {
  max-width: 28rem;
  padding: var(--atx-space-3) var(--atx-space-4);
  border-radius: var(--atx-radius-md);
  background: var(--atx-gray-900);
  color: #ffffff;
  font-size: var(--atx-text-sm);
  box-shadow: var(--atx-shadow-md);
  pointer-events: auto;
}

/* --- Empty state ---------------------------------------------------------- */
.atx-empty {
  padding: var(--atx-space-7) var(--atx-space-5);
  text-align: center;
  color: var(--atx-color-text-muted);
}
.atx-empty__title { margin: 0 0 var(--atx-space-2); font-size: var(--atx-text-lg); font-weight: var(--atx-weight-semibold); color: var(--atx-color-text); }
.atx-empty p { max-width: 28rem; margin: 0 auto var(--atx-space-4); }

/* --- Loading -------------------------------------------------------------- */
.atx-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--atx-color-primary-soft);
  border-top-color: var(--atx-color-primary);
  border-radius: 50%;
  animation: atx-spin 0.8s linear infinite;
}
.atx-skeleton {
  display: block;
  height: 1em;
  border-radius: var(--atx-radius-sm);
  background: linear-gradient(90deg, var(--atx-gray-100) 25%, var(--atx-gray-50) 50%, var(--atx-gray-100) 75%);
  background-size: 200% 100%;
  animation: atx-shimmer 1.4s ease-in-out infinite;
}
@keyframes atx-spin { to { transform: rotate(360deg); } }
@keyframes atx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- Pagination ----------------------------------------------------------- */
.atx-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--atx-space-1); margin: var(--atx-space-5) 0; }
.atx-pagination a,
.atx-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--atx-touch-target);
  min-height: var(--atx-touch-target);
  padding: 0 var(--atx-space-2);
  border-radius: var(--atx-radius-md);
  color: var(--atx-color-text);
  text-decoration: none;
}
.atx-pagination a:hover { background: var(--atx-color-surface-sunken); }
.atx-pagination [aria-current="page"] { background: var(--atx-color-primary); color: var(--atx-color-on-primary); font-weight: var(--atx-weight-semibold); }

/* --- Icons (inline SVG from the Ionicons set) ----------------------------- */
.atx-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.25em; fill: currentColor; stroke: currentColor; flex: none; }

/* ==========================================================================
   5. Utilities (keep this list short)
   ========================================================================== */

.atx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.atx-text-muted { color: var(--atx-color-text-muted); }
.atx-text-sm { font-size: var(--atx-text-sm); }
.atx-num { font-variant-numeric: tabular-nums; }
.atx-skip-link { position: absolute; left: var(--atx-space-2); top: -100px; z-index: calc(var(--atx-z-toast) + 1); padding: var(--atx-space-2) var(--atx-space-3); background: var(--atx-color-surface); border-radius: var(--atx-radius-md); }
.atx-skip-link:focus { top: var(--atx-space-2); }

@media (max-width: 575.98px) { .atx-hide-xs { display: none !important; } }
@media (max-width: 767.98px) { .atx-hide-below-md { display: none !important; } }
@media (min-width: 768px)    { .atx-show-below-md { display: none !important; } }

/* ==========================================================================
   6. Motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .atx-ui *, .atx-ui *::before, .atx-ui *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .atx-appbar, .atx-nav, .atx-page-header__actions, .atx-form-actions, .atx-toast-region { display: none !important; }
  .atx-ui body, body.atx-ui { background: #ffffff; }
  .atx-card, .atx-table-wrap { box-shadow: none; border-color: #999999; break-inside: avoid; }
}