/* GENERATED — DO NOT EDIT.
   Source: LynxApps/apps/_shared/lynx-ui.css
   Regenerate: bash scripts/sync-ui.sh
   A hand-edit here is silently overwritten on the next sync. */

/* ============================================================================
   lynx-ui.css — THE shared design system for all four LynxApps.

   🔴 SOURCE OF TRUTH. Edit ONLY this file (LynxApps/apps/_shared/lynx-ui.css).
      Each app dir holds a GENERATED copy. Run `bash scripts/sync-ui.sh` after
      editing; CI fails if the copies drift.

      (The copies exist because each app deploys via `git subtree push` from its
      own directory — a file in _shared/ is outside that prefix and would never
      reach a server. Same reason config.<env>.json is copied per app.)

   WHY THIS FILE EXISTS
   --------------------
   Measured 2026-07-14, before this file existed:
     • 2,767 inline style="..." attributes across the four apps (AdminNew: 1,686).
       The UI was styled AT THE CALL SITE, inside template literals — so adding a
       feature REQUIRED inventing styling, and it came out slightly different every
       time. It did not "drift to bad standards"; there were no standards to drift from.
     • The same `.input` rule was copy-pasted into each app and diverged:
       AdminNew 10px/14px · Store 12px/16px · Ticket undefined · UsersClients absent.
     • ~30 distinct font sizes, mixing px and rem. 401 raw pixel values, ~0 tokens.
     • NO control in ANY app declared a min-height — touch-target size was an
       accident of whatever padding got typed. One number input: padding:3px 4px.
     • 73 controls had font-size < 16px. iOS Safari AUTO-ZOOMS the viewport when you
       focus an input under 16px — it is WebKit behaviour, not a preference. The
       Ticket app is a PWA used by field techs on phones.

   Load AFTER the app's own styles.css so these corrections win.
   Full rules: docs/context/standards/STYLE_STANDARDS.md
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS — the only sizes anyone should ever type.
   If you find yourself writing a raw px value, it belongs here instead.
   --------------------------------------------------------------------------- */
:root {
  /* Spacing scale — 4px base. Use these, never raw px. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type scale */
  --font-xs: 12px;   /* metadata ONLY. Never on an interactive control — see §2. */
  --font-sm: 14px;   /* secondary text */
  --font-md: 16px;   /* body + ALL form controls (the iOS no-zoom floor) */
  --font-lg: 20px;
  --font-xl: 24px;

  /* ── Controls: sized for the POINTER, not for everyone. ──
     The 44px figure everyone quotes is Apple's minimum for a FINGER. Applying it to a
     mouse-driven admin screen just makes everything huge — the first version of this file
     did exactly that, and the tables and buttons came out enormous.
     So the DEFAULT is the desktop/mouse size, and touch devices scale UP via
     `@media (pointer: coarse)` at the bottom of this file. Size for the input device. */
  --control-h:         34px;  /* mouse. ~Bootstrap 38 / Material desktop 36 — tight but hittable */
  --control-h-compact: 28px;  /* dense table cells */
  --control-font:      14px;  /* mouse. On TOUCH this becomes 16px — see the iOS note below. */
  --control-radius:    6px;
  --control-pad-x:     var(--space-2);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --focus-ring: 0 0 0 3px rgba(80, 150, 255, 0.45);
}

/* ---------------------------------------------------------------------------
   2. FORM CONTROLS.

   NOTE: no `!important` here, and no forced font-size on desktop. The app's own
   styles.css keeps its 14–15px control text on a mouse — that looks right and is
   not a bug. The 16px floor is purely an iOS-TOUCH concern (the viewport zooms on
   focus below 16px), so it is applied ONLY under `@media (pointer: coarse)` at the
   bottom of this file, where it is genuinely needed.

   The first version of this file forced 16px !important everywhere and made the
   desktop admin screens balloon. Fix the bug where the bug is.
   --------------------------------------------------------------------------- */
input,
select,
textarea,
.input,
.select {
  min-height: var(--control-h);
  font-family: inherit;
  border-radius: var(--control-radius);
  padding-left: var(--control-pad-x);
  padding-right: var(--control-pad-x);
  box-sizing: border-box;
}

/* A checkbox/radio is not a text field — the rules above would deform it. */
input[type="checkbox"],
input[type="radio"] {
  min-height: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  accent-color: var(--accent, #4a9eff);
}

/* Textareas grow; a fixed control height makes no sense. */
textarea {
  min-height: calc(var(--control-h) * 2);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  line-height: 1.5;
}

/* Number inputs were the worst offenders (padding:3px 4px → a ~20px target).
   Also kill the tiny spinner arrows, which are unhittable on a phone. */
input[type="number"] {
  min-height: var(--control-h);
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ONE dropdown. There were 5 different select classes plus 41 inline-styled ones.
   The native arrow is hidden and redrawn so every select looks the same. */
select,
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% + 1px),
                       calc(100% - 10px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: var(--space-5);   /* room for the arrow */
  cursor: pointer;
}

/* Dense table cells. Kept tight on desktop; scaled up on touch (see §5). */
.compact,
td .compact,
td input,
td select {
  min-height: var(--control-h-compact);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
td select { padding-right: var(--space-4); }

:is(input, select, textarea, .input, .select):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

:is(input, select, textarea):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   3. BUTTONS. Desktop-sized by default; they grow on touch devices (§5).
   --------------------------------------------------------------------------- */
button,
.btn {
  min-height: var(--control-h);
  font-size: var(--control-font);   /* 14px on mouse, 16px on touch — see §5 */
  font-family: inherit;
  padding: 0 var(--space-3);
  border-radius: var(--control-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
}
button:disabled,
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn.compact,
td button,
td .btn { min-height: var(--control-h-compact); padding: 0 var(--space-2); }

button:focus-visible,
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------------------
   4. FIELD — a labelled control. Use this instead of hand-spacing every form row.
       <div class="field">
         <label for="x">Quantity</label>
         <input id="x" type="number">
         <small class="field-hint">Units in stock</small>
       </div>
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field > label { font-size: var(--font-sm); font-weight: 600; opacity: 0.9; }
.field-hint  { font-size: var(--font-xs); opacity: 0.65; }
.field-error { font-size: var(--font-xs); color: var(--danger, #ff6b6b); }
.field.invalid > :is(input, select, textarea) { border-color: var(--danger, #ff6b6b); }

/* Rows of fields. Wraps on narrow screens instead of overflowing. */
.field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 200px; min-width: 0; }

/* ---------------------------------------------------------------------------
   5. TABLES — density.

   The apps set their own row padding and it is generous: AdminNew `14px 12px`
   (28px of vertical padding → ~48px rows), Store `16px 14px` (→ ~52px rows). That
   is what makes a list-heavy screen like the Installations tab feel tall — it is
   NOT the control heights, and it predates the design system.

   A dense data table wants ~36px rows on a mouse. On touch it goes back up: a row
   is often a tap target (`.clickable-row`), and 36px is not.
   --------------------------------------------------------------------------- */
th, td {
  padding: var(--space-2) var(--space-3);   /* 8px 12px → ~36px rows */
}
/* Header cells carry small uppercase labels; they need even less. */
th {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------------
   6. TOUCH DEVICES — where the 44px figure actually belongs.

   `pointer: coarse` means a FINGER, not a mouse. This is the correct signal: a small
   laptop window is still a mouse and does not need fat controls, while a large tablet
   very much does. Sizing on viewport WIDTH gets both of those wrong.

   Everything below applies ONLY on touch:
     • 44px controls (Apple HIG minimum for a finger)
     • 16px control font — 🔴 iOS Safari AUTO-ZOOMS the viewport when a focused input is
       under 16px. WebKit behaviour, not a preference; the page visibly jumps. The Ticket
       app is a PWA and the field techs are on phones.
       `!important` is required and is the ONLY one in this file: 73 controls carry an
       INLINE font-size below 16px, and an inline style beats any selector. As the ratchet
       (scripts/ui-audit.py --check) drives those to zero, this can be removed.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  :root {
    --control-h:         44px;
    --control-h-compact: 40px;   /* even a table cell must stay hittable with a finger */
    --control-font:      16px;
    --control-pad-x:     var(--space-3);
  }

  input, select, textarea, .input, .select,
  button, .btn {
    font-size: 16px !important;   /* iOS no-zoom floor — see above */
  }

  /* A table on a phone is not a reason to make a control unusable. */
  td input, td select, td button, td .btn { min-height: var(--control-h-compact); }

  /* A table ROW is frequently a tap target (.clickable-row). 36px is not enough
     for a finger, so the density gain is desktop-only. */
  th, td { padding: var(--space-3); }

  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
}

/* Phones specifically: give the tap targets a little more room. */
@media (pointer: coarse) and (max-width: 640px) {
  :root { --control-h: 48px; }   /* Material's target — easier with gloves, outdoors */
}