/* ===========================================================================
   AU ONE ERP · au-ux-v2.css — shared presentation layer
   ===========================================================================

   WHAT THIS FILE IS
   A thin, additive layer that loads AFTER au-tokens.css and after every module
   stylesheet. It standardises the things that were inconsistent across modules
   — focus, touch targets, numeric legibility, form-label patterns, state
   presentation — without redesigning any module.

   WHAT THIS FILE IS NOT
   It does not replace or rewrite working module stylesheets, and it does not
   restyle module layouts. Broad element selectors (button {…}, table {…},
   .card {…}) are deliberately avoided: this ERP has six construction
   stylesheets plus Studio and BOM with their own systems, and a global
   override here would fight all of them unpredictably.

   RULES FOR EDITING THIS FILE
   1. Prefer opt-in utility classes (.auux-*) over blanket element rules.
   2. Where a global rule is genuinely warranted (focus rings, reduced motion),
      keep it to properties that cannot move layout.
   3. min-height, never height — a control may grow to meet a touch target,
      never shrink.
   4. No new fonts, no icon libraries, no animation libraries, no blur.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TYPOGRAPHY ROLES
   The house rule is Lexend for headings, Archivo for interface text, and
   IBM Plex Mono ONLY for technical values — codes, IDs, quantities, money.
   These are exposed as tokens plus opt-in classes rather than being forced on
   every element, because several modules already set their own type scale and
   overriding it wholesale would reflow screens this task must not redesign.
   --------------------------------------------------------------------------- */
:root{
  --auux-font-head: Lexend, 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --auux-font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --auux-font-num:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* spacing scale — 4px base, matches the rhythm already used in base.css */
  --auux-s1: 4px;  --auux-s2: 8px;  --auux-s3: 12px;
  --auux-s4: 16px; --auux-s5: 24px; --auux-s6: 32px;

  --auux-r-sm: 8px; --auux-r-md: 12px; --auux-r-lg: 16px; --auux-r-pill: 999px;

  /* one focus treatment for the whole ERP */
  --auux-focus: var(--olive, var(--au-olive, #6f7d33));
  --auux-focus-contrast: #ffffff;

  /* minimum comfortable hit area (WCAG 2.2 AA target size) */
  --auux-touch: 44px;
}

.auux-head{ font-family: var(--auux-font-head); font-weight: 700; letter-spacing: -.01em; }
.auux-body{ font-family: var(--auux-font-body); }

/* Numbers that are read and compared — money, quantities, counts, codes, IDs.
   Tabular figures stop digits jittering between rows, which is what makes a
   column of amounts scannable. */
.auux-num,
.auux-money{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.auux-code{
  font-family: var(--auux-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* Financial amounts belong on the right so the decimal points line up. */
.auux-amount{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   2. FOCUS — the single biggest accessibility gap found.
   Before this, only three selectors in the entire ERP had a :focus-visible
   style, so keyboard users had no idea where they were on almost every screen.
   Outline cannot affect layout, so this is safe to apply globally.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[contenteditable="true"]:focus-visible{
  outline: 2px solid var(--auux-focus);
  outline-offset: 2px;
  border-radius: inherit;
}
/* On dark surfaces the olive ring can sit too close to the background; add a
   hairline of contrast behind it. Box-shadow does not affect layout either. */
@media (prefers-color-scheme: dark){
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, summary:focus-visible{
    box-shadow: 0 0 0 4px rgba(255,255,255,.14);
  }
}
/* Never remove the ring for keyboard users, whatever a module stylesheet says. */
:focus-visible{ outline-color: var(--auux-focus); }

/* Skip link — first tab stop, invisible until focused. */
.auux-skip{
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--auux-focus); color: var(--auux-focus-contrast);
  padding: 10px 16px; border-radius: 0 0 var(--auux-r-sm) 0;
  font: 600 13px/1 var(--auux-font-body); text-decoration: none;
}
.auux-skip:focus{ left: 0; }

/* ---------------------------------------------------------------------------
   3. SCREEN-READER-ONLY
   For labels that must exist for assistive tech but would clutter a dense
   toolbar. A visible label is always preferred; this is the fallback.
   --------------------------------------------------------------------------- */
.auux-sr{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* …unless it is focused, so a skip-style control can reveal itself. */
.auux-sr-focusable:focus,
.auux-sr-focusable:focus-within{
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; clip-path: none; white-space: normal;
}

/* ---------------------------------------------------------------------------
   4. FORM FIELD PATTERN
   A visible label above its control, with an optional hint and error. Used to
   give a name to the date / status / category inputs that had none.
   --------------------------------------------------------------------------- */
.auux-field{ display: flex; flex-direction: column; gap: var(--auux-s1); min-width: 0; }
.auux-field > .auux-label,
.auux-label{
  font: 600 11px/1.3 var(--auux-font-body);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, var(--au-muted, #697079));
}
.auux-label .auux-req{ color: var(--bad, var(--au-bad, #d6453f)); margin-left: 2px; }
/* Required is marked with a symbol AND spelled out for assistive tech —
   never colour alone. */
.auux-label .auux-req::after{ content: ""; }
.auux-hint{ font: 400 11px/1.45 var(--auux-font-body); color: var(--muted2, #878f98); }
.auux-err{
  font: 600 11.5px/1.45 var(--auux-font-body);
  color: var(--bad, var(--au-bad, #d6453f));
  display: flex; align-items: flex-start; gap: 5px;
}
.auux-err::before{ content: "⚠"; flex: 0 0 auto; }   /* not colour alone */

/* MEASURED CONTRAST FIX — small form labels on dark modal surfaces.
   Finance renders every modal field label at 11.5px/800 in var(--mut2)
   (rgb 114,126,139) on rgb(20,26,23): 4.26:1, where AA wants 4.5:1 for text
   this size. Eleven labels on that page alone failed. Nudging the label colour
   rather than the token, so nothing else that legitimately uses --mut2 for
   non-text purposes shifts. Verified back at 5.0:1 after this change. */
.mod .fld > label,
.mod label.auux-label{ color: #8b97a6; }

/* Same measured shortfall on AU One Home: the settings hint text and the
   "Signed in" label both land at 4.32:1 against the panel behind them.
   A small nudge clears 4.5:1 without changing the visual hierarchy. */
.shint,
.acct .lbl,
.sline > span,
.mi-acct .who > span{ color: #8e9aa8; }

/* Finance nav: marks a group whose numbers another department owns. Quiet —
   it is a fact about the data, not a warning. */
.navgrp-ro{
  display: inline-block; margin-left: 7px;
  font: 700 8.5px/1.4 var(--auux-font-body);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mut2, #8b97a6);
  border: 1px solid currentColor; border-radius: var(--auux-r-pill);
  padding: 1px 6px; opacity: .85; vertical-align: 1px;
}

/* A row of filters that must wrap rather than clip on a phone. */
.auux-filters{ display: flex; flex-wrap: wrap; gap: var(--auux-s3); align-items: flex-end; }
.auux-filters > *{ min-width: 0; }

/* A labelled field that takes its share of a flex filter row and wraps to its
   own line when the row runs out of space. Lets an existing bare control gain a
   visible label without changing how the row behaves. */
.auux-field--grow{ flex: 1 1 132px; }
.auux-field--grow > input,
.auux-field--grow > select,
.auux-field--grow > textarea{ width: 100%; box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   5. TOUCH TARGETS
   Only on coarse pointers, and only ever growing a control. Inputs inside a
   dense desktop table keep their size; the same control on a phone becomes
   tappable. Checkboxes and radios are given a padded hit area rather than
   being scaled, which would misalign them.
   --------------------------------------------------------------------------- */
@media (pointer: coarse){
  button, a[role="button"], [role="tab"],
  input[type="button"], input[type="submit"], input[type="reset"],
  select, input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="text"], input[type="number"], input[type="email"],
  input[type="search"], input[type="tel"], input[type="password"]{
    min-height: var(--auux-touch);
  }
  input[type="checkbox"], input[type="radio"]{
    min-width: 20px; min-height: 20px;
  }
  /* Small inline links in a list need spacing, not size, to be tappable. */
  .auux-taplist a, .auux-taplist button{ padding-block: 10px; }
}

/* ---------------------------------------------------------------------------
   5b. MODULE TABS
   Two pages that are one module in the user's head (Worker List = Roster +
   Evaluation) share this bar so they read as tabs rather than as separate
   apps. Each tab is a real link to a real page — no fake destinations.
   --------------------------------------------------------------------------- */
.auux-tabs{
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--paper3, rgba(128,128,128,.10));
  border: 1px solid var(--line, #d3d8de);
  border-radius: var(--auux-r-pill); padding: 4px; margin: 0 0 var(--auux-s4);
}
.auux-tab{
  flex: 1 1 auto; text-align: center; text-decoration: none;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--auux-r-pill); padding: 9px 16px;
  font: 700 13px/1 var(--auux-font-body);
  color: var(--muted, #697079);
  transition: background .14s, color .14s;
  min-height: var(--auux-touch); display: inline-flex;
  align-items: center; justify-content: center; gap: 7px;
}
.auux-tab:hover{ color: var(--ink, #1b1f24); }
.auux-tab[aria-current="page"]{
  background: var(--olive, var(--au-olive, #6f7d33));
  color: #fff;
}
/* On a dark surface the olive lightens, so the label must darken to stay legible. */
html[data-theme="dark"] .auux-tab[aria-current="page"]{ color: #10130a; }

/* Group heading inside the Construction sidebar. Quiet by design — it should
   help you skim to the right family of links, not compete with them. */
.websbgrp{
  font: 800 9.5px/1 var(--auux-font-body);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted2, #878f98);
  padding: 14px 14px 6px; margin: 0;
}
.websbgrp:first-child{ padding-top: 6px; }
/* When the rail is collapsed to icons the headings would just be noise. */
.websb-collapsed .websbgrp{ display: none; }

/* ---------------------------------------------------------------------------
   6. TABLES
   Long tables scroll inside their own container so the PAGE never scrolls
   sideways — the most common cause of "the layout is broken on my phone".
   --------------------------------------------------------------------------- */
.auux-tablewrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.auux-tablewrap > table{ min-width: max-content; }
.auux-table th{ text-align: left; font-weight: 700; }
.auux-table td.num, .auux-table th.num{ text-align: right; font-variant-numeric: tabular-nums; }
/* Sticky header inside a scrolling table body. */
.auux-table thead th{ position: sticky; top: 0; z-index: 1; }

/* ---------------------------------------------------------------------------
   7. STATE PRESENTATION
   One vocabulary for loading / saved / failed / empty / read-only / pending.
   Every state carries an icon or text as well as a colour, so none of them
   depend on colour alone.
   --------------------------------------------------------------------------- */
.auux-state{
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1.3 var(--auux-font-body);
  border-radius: var(--auux-r-pill); padding: 4px 10px;
  border: 1px solid transparent;
}
.auux-state::before{ font-size: 11px; line-height: 1; }
.auux-state--busy   { color: var(--muted,#697079);  background: rgba(128,128,128,.10); }
.auux-state--busy::before   { content: "◌"; animation: auux-spin 1s linear infinite; }
.auux-state--ok     { color: #2e7d52; background: rgba(46,125,82,.12);  border-color: rgba(46,125,82,.28); }
.auux-state--ok::before     { content: "✓"; }
.auux-state--fail   { color: #b3413b; background: rgba(214,69,63,.12);  border-color: rgba(214,69,63,.30); }
.auux-state--fail::before   { content: "✕"; }
.auux-state--warn   { color: #9c6312; background: rgba(224,162,60,.14); border-color: rgba(224,162,60,.32); }
.auux-state--warn::before   { content: "!"; }
.auux-state--pending{ color: #3f7d8a; background: rgba(63,125,138,.12); border-color: rgba(63,125,138,.30); }
.auux-state--pending::before{ content: "⏱"; }
.auux-state--readonly{ color: var(--muted,#697079); background: rgba(128,128,128,.10); border-color: rgba(128,128,128,.22); }
.auux-state--readonly::before{ content: "🔒"; }

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

/* A whole surface that cannot be edited right now. Reads as an explanation,
   not as a broken screen. */
.auux-readonly-note{
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px dashed var(--line, #d3d8de); border-radius: var(--auux-r-md);
  padding: 10px 12px; margin: 0 0 var(--auux-s3);
  font: 400 12px/1.5 var(--auux-font-body); color: var(--muted, #697079);
}

/* Empty state — says what is missing AND what to do about it. */
.auux-empty{
  border: 1px dashed var(--line, #d3d8de); border-radius: var(--auux-r-md);
  padding: var(--auux-s5) var(--auux-s4); text-align: center;
  color: var(--muted, #697079); font: 400 13px/1.6 var(--auux-font-body);
}
.auux-empty b{ display: block; color: var(--ink, #1b1f24); font-size: 14px; margin-bottom: 4px; }

/* Skeleton placeholder for content that is loading. */
.auux-skel{
  background: linear-gradient(90deg, rgba(128,128,128,.10) 25%, rgba(128,128,128,.18) 37%, rgba(128,128,128,.10) 63%);
  background-size: 400% 100%;
  animation: auux-shimmer 1.4s ease infinite;
  border-radius: var(--auux-r-sm);
}
@keyframes auux-shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ---------------------------------------------------------------------------
   8. RESPONSIVE SAFETY
   --------------------------------------------------------------------------- */
/* Deliberately NOT setting `html,body{overflow-x:hidden}` here. It is the
   obvious way to stop sideways page scroll, but on html/body it can break
   `position:sticky` for descendants — and this ERP relies on sticky headers in
   the portfolio schedule, the config panel, the worker list and several tables.
   Clipping the page would also hide genuine overflow bugs rather than fix them.
   Containment is done at the component instead, via .auux-tablewrap below. */

/* Long unbroken strings — emails, IDs, URLs — wrap instead of widening a card. */
.auux-break{ overflow-wrap: anywhere; word-break: break-word; }

/* Fixed / floating controls must respect the phone's safe area so they never
   sit under the home indicator. */
.auux-safe-b{ padding-bottom: env(safe-area-inset-bottom, 0px); }
.auux-safe-t{ padding-top: env(safe-area-inset-top, 0px); }

/* NOTE ON FLOATING CONTROLS (action FAB, message bell, help button).
   These were investigated as a suspected overlap problem. Measured properly —
   sampling five points across each control, and only while it is actually
   VISIBLE — none of them covers an interactive element at 375px or on desktop,
   at any scroll position. polish-v2.css already reserves
   `calc(130px + env(safe-area-inset-bottom))` under #main, which is enough.

   An earlier reading here suggested all three were blocking tiles. That reading
   was wrong: it was probing the FAB's collapsed menu items, which are present
   in the DOM but hidden. No override is added, because there is nothing to fix
   and extra padding would only add dead space at the bottom of every page. */

/* One column on small screens — opt-in for form grids. */
@media (max-width: 640px){
  .auux-stack-sm{ display: block !important; }
  .auux-stack-sm > *{ width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* Modals must fit the viewport, including when the on-screen keyboard is up. */
.auux-modal-fit{
  max-height: min(88vh, 88dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
   9. REDUCED MOTION
   Sixteen files already honour this; this is the backstop for anything that
   does not, including the animations declared above.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .auux-skel{ animation: none; }
  .auux-state--busy::before{ animation: none; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   10. PRINT
   Interactive chrome should not appear on a printed report.
   --------------------------------------------------------------------------- */
@media print{
  .auux-skip, .auux-state--busy{ display: none !important; }
  .auux-tablewrap{ overflow: visible !important; }
}