/**
 * App styles. Design tokens first, then layout and components. Logical properties only
 * (margin-inline-start, not margin-left) so the RTL layout is native (AGENTS.md §4).
 * Touch targets ≥ 48px, base text 18px (UI-002); status colours always come with text (UI-006).
 */

/* ---------- Fonts: Tajawal, self-hosted, OFL (fonts/OFL.txt) ---------- */
@font-face { font-family: Tajawal; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tajawal-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: Tajawal; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/tajawal-arabic-500.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: Tajawal; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/tajawal-arabic-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: Tajawal; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tajawal-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Tajawal; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/tajawal-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Tajawal; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/tajawal-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --c-bg: #f2f4f5;
  --c-surface: #ffffff;
  --c-surface-2: #eaeff1;
  --c-text: #14212b;
  --c-muted: #4b5964;
  --c-border: #cbd5db;
  --c-brand: #0b5960;
  --c-brand-strong: #07434a;
  --c-brand-soft: #e1eff0;
  --c-lamp: #e0a63a;
  --c-ok: #17703f;      --c-ok-soft: #e2f2e8;
  --c-warn: #8a5300;    --c-warn-soft: #fcefd8;
  --c-danger: #a8251c;  --c-danger-soft: #fbe6e3;
  --c-info: #1d5ca3;    --c-info-soft: #e3edf8;
  --c-purple: #64399a;  --c-purple-soft: #efe7f8;
  --c-focus: #f0b429;

  /* Job order states (UI-006), always shown with their name. */
  --st-new: var(--c-info);
  --st-waiting: var(--c-purple);
  --st-progress: var(--c-warn);
  --st-ready: var(--c-ok);
  --st-delivered: var(--c-muted);
  --st-cancelled: var(--c-danger);

  --font: Tajawal, 'Geeza Pro', 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --tap: 48px;
  --radius: 12px;
  --radius-lg: 18px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --shadow: 0 1px 2px rgb(20 33 43 / 0.06), 0 4px 14px rgb(20 33 43 / 0.06);

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { margin: 0; min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--c-bg); }
h1, h2, h3 { line-height: 1.25; margin-block: 0 var(--space-3); }
p { margin-block: 0 var(--space-3); }
a { color: var(--c-brand); }
img, svg { flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
/* The hidden attribute must win over any display rule (menu items the person may not open, FR-003). */
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); direction: ltr; text-align: start; unicode-bidi: isolate; }
.muted { color: var(--c-muted); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------- Top bar (FR-005, INT-020) ---------- */
.topbar {
  position: sticky; inset-block-start: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding-block: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-2);
  padding-inline: calc(var(--space-4) + env(safe-area-inset-right)) calc(var(--space-4) + env(safe-area-inset-left));
  background: var(--c-brand); color: #fff;
}
.topbar__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; min-block-size: var(--tap); }
.topbar__logo { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; background: var(--c-lamp); color: var(--c-brand-strong); font-weight: 700; font-size: 1.2rem; }
.topbar__spacer { flex: 1; }
.topbar__user { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__user-name { font-weight: 500; }
.badge { display: inline-flex; align-items: center; padding-inline: var(--space-2); border-radius: 999px; font-size: 0.8rem; font-weight: 500; }
.badge--env { background: rgb(255 255 255 / 0.16); color: #fff; min-block-size: 28px; }

.sync {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--tap); padding-inline: var(--space-3); border-radius: var(--radius);
  text-decoration: none; background: var(--c-ok-soft); color: var(--c-ok); border: 2px solid transparent;
}
.sync__text { display: flex; flex-direction: column; line-height: 1.2; }
.sync__label { font-weight: 700; font-size: 0.92rem; }
.sync__time { font-size: 0.78rem; opacity: 0.9; }
.sync[data-tone='pending'] { background: var(--c-warn-soft); color: var(--c-warn); }
.sync[data-tone='offline'] { background: var(--c-surface-2); color: var(--c-text); }
.sync[data-tone='stale'] { background: var(--c-danger); color: #fff; }
.sync[data-tone='pushing'] { background: var(--c-info-soft); color: var(--c-info); }

/* ---------- Main menu (§10.2) ---------- */
.nav { background: var(--c-surface); border-block-end: 1px solid var(--c-border); }
.nav__track { display: flex; gap: var(--space-1); overflow-x: auto; padding-block: var(--space-2); padding-inline: var(--space-4); scrollbar-width: none; }
.nav__link {
  display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--space-4);
  border-radius: var(--radius); color: var(--c-text); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.nav__link:hover { background: var(--c-surface-2); }
.nav__link[aria-current='page'] { background: var(--c-brand-soft); color: var(--c-brand-strong); font-weight: 700; box-shadow: inset 0 -3px 0 var(--c-brand); }

/* ---------- Screen ---------- */
.screen { flex: 1; inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding: var(--space-5) var(--space-4) 120px; outline: none; }
.screen__title { font-size: 1.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--tap); padding-inline: var(--space-5); border-radius: var(--radius);
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  font-weight: 500; font-size: 1rem; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.btn:hover { background: var(--c-surface-2); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-strong); }
.btn--danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn--ghost { background: transparent; border-color: rgb(255 255 255 / 0.4); color: #fff; }
.btn--ghost:hover { background: rgb(255 255 255 / 0.12); }
.btn--small { min-block-size: 44px; padding-inline: var(--space-3); font-size: 0.9rem; }
.btn--large { min-block-size: 60px; font-size: 1.15rem; padding-inline: var(--space-6); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Cards and lists ---------- */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-block-end: var(--space-4); box-shadow: var(--shadow); }
.card__title { display: flex; align-items: center; gap: var(--space-2); font-size: 1.15rem; }
.card--danger { border-color: var(--c-danger); background: var(--c-danger-soft); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); }
.facts dt { color: var(--c-muted); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.table { inline-size: 100%; border-collapse: collapse; }
.table th, .table td { text-align: start; padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--c-border); }
.table th { color: var(--c-muted); font-weight: 500; }

/* ---------- Home (UI-001) ---------- */
.home-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-block-end: var(--space-5); }
.home-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 210px; padding: var(--space-5); border-radius: 22px; text-align: center; text-decoration: none;
  background: var(--c-brand); color: #fff; box-shadow: var(--shadow); touch-action: manipulation;
}
.home-action:hover { background: var(--c-brand-strong); }
.home-action:active { transform: scale(0.985); }
.home-action__icon { display: grid; place-items: center; inline-size: 76px; block-size: 76px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.home-action__label { font-size: 1.6rem; font-weight: 700; }
.home-action__hint { font-size: 0.95rem; opacity: 0.88; }
.alerts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.alerts__item { padding: var(--space-3); border-radius: var(--radius); background: var(--c-warn-soft); color: var(--c-warn); font-weight: 500; }
.alerts__empty { color: var(--c-muted); }

/* ---------- Sync screen ---------- */
.sync-card__state { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius); margin-block-end: var(--space-4); font-size: 1.2rem; background: var(--c-ok-soft); color: var(--c-ok); }
.sync-card__state[data-tone='pending'] { background: var(--c-warn-soft); color: var(--c-warn); }
.sync-card__state[data-tone='offline'] { background: var(--c-surface-2); color: var(--c-text); }
.sync-card__state[data-tone='stale'] { background: var(--c-danger); color: #fff; }

/* ---------- Debug screen ---------- */
.error-list { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-3); }
.error-list pre { white-space: pre-wrap; font-size: 0.8rem; background: var(--c-surface-2); padding: var(--space-3); border-radius: var(--radius); max-block-size: 260px; overflow: auto; }

/* ---------- Dialog, toasts, update bar ---------- */
.dialog { border: none; border-radius: var(--radius-lg); padding: var(--space-5); inline-size: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgb(0 0 0 / 0.3); color: var(--c-text); }
.dialog::backdrop { background: rgb(10 20 28 / 0.5); }
.dialog__title { font-size: 1.25rem; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-start; margin-block-start: var(--space-4); }

.toasts { position: fixed; inset-inline: var(--space-4); inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: 50; display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; }
.toast { max-inline-size: 640px; padding: var(--space-3) var(--space-5); border-radius: var(--radius); background: var(--c-text); color: #fff; box-shadow: var(--shadow); font-weight: 500; pointer-events: auto; }
.toast--ok { background: var(--c-ok); }
.toast--danger { background: var(--c-danger); }

.updatebar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--c-brand-strong); color: #fff; font-weight: 500;
}
.updatebar .btn--primary { background: var(--c-lamp); border-color: var(--c-lamp); color: var(--c-brand-strong); }
.updatebar--wait::after { content: 'سيُطبَّق بعد إنهاء العمل المفتوح'; font-size: 0.85rem; opacity: 0.85; }

/* ---------- Narrow screens (manager phone, 375px — FR-114) ---------- */
@media (max-width: 700px) {
  html { font-size: 17px; }
  .home-actions { grid-template-columns: 1fr; }
  .home-action { min-block-size: 130px; flex-direction: row; justify-content: flex-start; text-align: start; }
  .home-action__hint { display: none; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-block-end: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .home-action:active { transform: none; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-2); }
.form__field { display: grid; gap: var(--space-1); }
.form__label { font-weight: 500; }
.form__error { color: var(--c-danger); font-weight: 500; min-block-size: 1.2em; margin: 0; }
.form__check { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap); }
.form__check input { inline-size: 24px; block-size: 24px; }
.input {
  inline-size: 100%; min-block-size: var(--tap); padding-inline: var(--space-3);
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); font-size: 1rem;
}
.input:focus { border-color: var(--c-brand); outline: 3px solid var(--c-focus); outline-offset: 1px; }
.input--small { min-block-size: 44px; font-size: 0.9rem; }
.note { padding: var(--space-3); border-radius: var(--radius); background: var(--c-info-soft); color: var(--c-info); }
.note--danger { background: var(--c-danger-soft); color: var(--c-danger); font-weight: 500; }
.btn--link { background: none; border: none; color: var(--c-brand); text-decoration: underline; padding-inline: var(--space-2); }

/* ---------- Lists and admin ---------- */
.screen__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); }
.screen__head .screen__title { margin: 0; }
.table-wrap { overflow-x: auto; }
.row--inactive { color: var(--c-muted); }
.status { display: inline-flex; align-items: center; min-block-size: 28px; padding-inline: var(--space-2); border-radius: 999px; font-size: 0.85rem; font-weight: 500; }
.status--ok { background: var(--c-ok-soft); color: var(--c-ok); }
.status--off { background: var(--c-surface-2); color: var(--c-muted); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover { border-color: var(--c-brand); }
.card--muted { opacity: 0.7; }
.perm-overrides summary { cursor: pointer; min-block-size: var(--tap); display: flex; align-items: center; font-weight: 500; }
.dialog { max-block-size: calc(100dvh - 32px); overflow-y: auto; }

/* ---------- Lock screen (FR-005, FR-006) ---------- */
.lock {
  inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; border: 0;
  overflow-y: auto; padding: var(--space-5) var(--space-4); color: var(--c-text);
  background: linear-gradient(160deg, var(--c-brand-strong), var(--c-brand));
}
.lock[open] { display: grid; place-items: center; }
.lock::backdrop { background: var(--c-brand-strong); }
.lock__panel { inline-size: min(720px, 100%); background: var(--c-surface); border-radius: 24px; padding: var(--space-6) var(--space-5); box-shadow: 0 30px 80px rgb(0 0 0 / 0.35); text-align: center; }
.lock__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-brand-strong); font-weight: 700; margin-block-end: var(--space-4); }
.lock__title { font-size: 1.6rem; }
.lock__subtitle { color: var(--c-muted); }
.lock__form { text-align: start; max-inline-size: 420px; margin-inline: auto; }
.lock__people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin-block-start: var(--space-4); }
.person {
  display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-2);
  min-block-size: 150px; border-radius: 18px; border: 2px solid var(--c-border); background: var(--c-surface); cursor: pointer;
}
.person:hover, .person:focus-visible { border-color: var(--c-brand); background: var(--c-brand-soft); }
.person__avatar { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--c-brand); color: #fff; font-size: 1.8rem; font-weight: 700; }
.person__name { font-weight: 700; font-size: 1.1rem; }
.person__role { color: var(--c-muted); font-size: 0.85rem; }

/* ---------- PIN pad ---------- */
.pinpad { display: grid; justify-items: center; gap: var(--space-3); margin-block: var(--space-4); }
.pinpad__label { margin: 0; font-weight: 500; }
.pinpad__dots { display: flex; gap: var(--space-3); direction: ltr; min-block-size: 22px; }
.pinpad__dot { inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2px solid var(--c-brand); }
.pinpad__dot--on { background: var(--c-brand); }
.pinpad__dot--optional { border-style: dashed; opacity: 0.6; }
.pinpad__error { color: var(--c-danger); font-weight: 500; min-block-size: 1.4em; margin: 0; }
.pinpad__keys { display: grid; grid-template-columns: repeat(3, 76px); gap: var(--space-3); direction: ltr; }
.pinpad__key { inline-size: 76px; block-size: 64px; border-radius: 16px; border: 1px solid var(--c-border); background: var(--c-surface-2); font-size: 1.6rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.pinpad__key:active { background: var(--c-brand-soft); }
.pinpad__key--fn { font-size: 1.3rem; }
.pinpad__done { inline-size: 76px; min-block-size: 64px; padding: 0; border-radius: 16px; }
.pinpad--shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.approval__pad .pinpad { margin-block: var(--space-2); }

.topbar__who { display: flex; flex-direction: column; line-height: 1.2; }
.topbar__user-role { font-size: 0.75rem; opacity: 0.85; }

/* ---------- Unified search in the menu bar (UI-003) ---------- */
.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav__track { flex: 1; min-inline-size: 0; }
.nav__search { padding-inline-end: var(--space-4); }
.search { position: relative; }
.search__input { inline-size: 260px; min-block-size: 44px; padding-inline: var(--space-3); border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface-2); font-size: 0.95rem; }
.search__input:focus { background: var(--c-surface); border-color: var(--c-brand); outline: 3px solid var(--c-focus); outline-offset: 1px; }
.search__results { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 30; inline-size: min(420px, 90vw); margin: 0; padding: var(--space-2); list-style: none; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgb(0 0 0 / 0.18); }
.search__item, .search__all { display: flex; flex-direction: column; align-items: flex-start; inline-size: 100%; min-block-size: var(--tap); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius); background: none; text-align: start; cursor: pointer; }
.search__item:hover, .search__item:focus-visible, .search__all:hover { background: var(--c-brand-soft); }
.search__name { font-weight: 700; }
.search__meta { font-size: 0.85rem; color: var(--c-muted); }
.search__all { color: var(--c-brand); font-weight: 500; align-items: center; }
.search__empty { padding: var(--space-3); color: var(--c-muted); }
.search-line { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); }
.input--search { font-size: 1.1rem; min-block-size: 56px; }
.input--area { min-block-size: 80px; padding-block: var(--space-2); resize: vertical; }
.row-link { cursor: pointer; }
.row-link:hover, .row-link:focus-visible { background: var(--c-brand-soft); }

/* ---------- Forms: rows and segmented choices ---------- */
.form__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.form__row > .form__field { flex: 1; }
.form__row--wrap { flex-wrap: wrap; }
.form__field--grow { flex: 2; min-inline-size: 220px; }
.form__or { align-self: center; color: var(--c-muted); padding-block-start: var(--space-4); }
.form__more summary { cursor: pointer; min-block-size: var(--tap); display: flex; align-items: center; color: var(--c-brand); font-weight: 500; }
details > summary.card__title { cursor: pointer; min-block-size: var(--tap); display: flex; align-items: center; }
.segmented { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.segmented__item { position: relative; }
.segmented__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__item span { display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--space-4); background: var(--c-surface); white-space: nowrap; }
.segmented__item input:checked + span { background: var(--c-brand); color: #fff; font-weight: 700; }
.segmented__item input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.note--warn { background: var(--c-warn-soft); color: var(--c-warn); font-weight: 500; }
.badge--soft { background: var(--c-surface-2); color: var(--c-text); margin-inline-start: var(--space-2); min-block-size: 26px; }
.badge--ok { background: var(--c-ok-soft); color: var(--c-ok); margin-inline-start: var(--space-2); min-block-size: 26px; }
.section-title { font-size: 1.2rem; margin-block: var(--space-5) var(--space-3); }

/* ---------- Customer file ---------- */
.customer-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.customer-head__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rx-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-block-end: var(--space-3); }
.rx-card__legend { font-size: 0.85rem; }
.legend-swatch { display: inline-block; padding-inline: var(--space-2); border-radius: 4px; }
.revisions { display: grid; gap: var(--space-4); padding-inline-start: var(--space-5); }
.table--compact th, .table--compact td { padding: var(--space-1) var(--space-2); }

/* ---------- Prescription grid (UI-004) ---------- */
.rx-grid { border-collapse: collapse; margin-block: var(--space-2); }
.rx-grid th, .rx-grid td { border: 1px solid var(--c-border); padding: var(--space-1) var(--space-2); text-align: center; }
.rx-grid thead th { background: var(--c-surface-2); font-weight: 700; }
.rx-grid__eye { background: var(--c-brand-soft); color: var(--c-brand-strong); white-space: nowrap; }
.rx-grid__row { color: var(--c-muted); white-space: nowrap; }
.rx-input { direction: ltr; unicode-bidi: isolate; inline-size: 92px; min-block-size: var(--tap); border: 1px solid var(--c-border); border-radius: 10px; text-align: center; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.rx-input:focus { border-color: var(--c-brand); outline: 3px solid var(--c-focus); outline-offset: 1px; }
.rx-input[aria-invalid] { border-color: var(--c-danger); background: var(--c-danger-soft); }
.rx-extras { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-block: var(--space-2); }
.rx-extra { display: flex; align-items: center; gap: var(--space-2); }
.rx-extra__label { font-weight: 500; min-inline-size: 6em; }
.rx-extra__eye { display: inline-flex; align-items: center; gap: var(--space-1); direction: ltr; }
.rx-errors { padding-inline-start: var(--space-5); }
.rx-grid--view td { min-inline-size: 72px; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.rx-cell--changed { background: var(--c-warn-soft); color: var(--c-warn); font-weight: 700; text-decoration: underline dotted; }
.rx-view { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }

/* ---------- Attachments (FR-023) ---------- */
.attachments { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.attachment { inline-size: 88px; block-size: 88px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-surface-2); display: grid; place-items: center; cursor: pointer; }
.attachment img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.attachment__pdf { font-weight: 700; color: var(--c-muted); }
.attachment-full { max-inline-size: 100%; max-block-size: 70dvh; display: block; margin-inline: auto; }

@media (max-width: 900px) {
  .search__input { inline-size: 180px; }
}
@media (max-width: 700px) {
  .nav { flex-wrap: wrap; }
  .nav__search { inline-size: 100%; padding-inline: var(--space-4); padding-block-end: var(--space-2); }
  .search__input { inline-size: 100%; }
  .rx-input { inline-size: 72px; }
}

/* ---------- Inventory (FR-050…056) ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-3); }
.toolbar .input--search { flex: 1; min-inline-size: 220px; }
.toolbar select.input { inline-size: auto; }
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; margin-block-end: var(--space-3); border-block-end: 1px solid var(--c-border); }
.tabs__tab { display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--space-4); color: var(--c-text); text-decoration: none; font-weight: 500; white-space: nowrap; border-block-end: 3px solid transparent; }
.tabs__tab[aria-selected='true'] { color: var(--c-brand-strong); border-block-end-color: var(--c-brand); font-weight: 700; }
.badge--warn { background: var(--c-warn-soft); color: var(--c-warn); margin-inline-start: var(--space-2); min-block-size: 26px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { min-block-size: 44px; padding-inline: var(--space-4); border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; }
.chip:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.chip--off { opacity: 0.55; text-decoration: line-through; }

/* Lens power matrix (FR-051): sticky SPH column and CYL header. */
.matrix-wrap { overflow: auto; max-block-size: 70dvh; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.matrix { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { border-block-end: 1px solid var(--c-border); border-inline-end: 1px solid var(--c-border); padding: 0; text-align: center; }
.matrix thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--c-surface-2); padding: var(--space-2); min-inline-size: 64px; }
.matrix tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--c-surface-2); padding-inline: var(--space-3); }
.matrix .matrix__corner { inset-inline-start: 0; z-index: 3; }
.matrix__btn { position: relative; inline-size: 64px; block-size: 44px; border: 0; background: none; font-size: 1rem; font-weight: 700; cursor: pointer; }
.matrix__btn:hover { background: var(--c-brand-soft); }
.matrix__cell--low { background: var(--c-warn-soft); }
.matrix__flag { position: absolute; inset-block-start: 2px; inset-inline-end: 4px; color: var(--c-danger); font-size: 0.8rem; }
.matrix__input { inline-size: 60px; block-size: 40px; margin: 2px; border: 1px solid var(--c-border); border-radius: 8px; text-align: center; font-size: 1rem; }

/* ---------- Quick sale (FR-070…074) ---------- */
.sale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.input--large { min-block-size: 56px; font-size: 1.15rem; }
.sale__find .input--large { inline-size: 100%; margin-block-end: var(--space-3); }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pick { display: flex; flex-direction: column; align-items: stretch; gap: 2px; inline-size: 100%; min-block-size: 56px; padding: var(--space-2) var(--space-3); text-align: start; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); cursor: pointer; font: inherit; color: inherit; }
.pick:hover, .pick:focus-visible { border-color: var(--c-brand); background: var(--c-brand-soft); }
.pick__name { font-weight: 700; overflow-wrap: anywhere; }
.pick__meta { color: var(--c-muted); font-size: 0.95rem; }
.sale__customer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block-end: var(--space-3); margin-block-end: var(--space-3); border-block-end: 1px solid var(--c-border); }
.sale__empty { padding-block: var(--space-4); }
.cart { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'main qty money' 'actions actions actions'; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-2) 0; border-block-end: 1px solid var(--c-border); }
.cart-line__main { grid-area: main; display: flex; flex-direction: column; min-inline-size: 0; }
.cart-line__name { font-weight: 500; overflow-wrap: anywhere; }
.cart-line .qty { grid-area: qty; display: flex; align-items: center; gap: var(--space-2); }
.cart-line__money { grid-area: money; display: flex; flex-direction: column; align-items: end; }
.cart-line .button-row { grid-area: actions; }
.sale__totals { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0; }
.sale__totals dd { margin: 0; text-align: end; }
.sale__grand { font-size: 1.35rem; font-weight: 700; }
.pay { display: grid; gap: var(--space-2); }
.pay__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2); }
.pay__row--edit { grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; }
.pay__amount { text-align: end; }
.pay__status { margin: var(--space-3) 0; font-weight: 500; color: var(--c-danger); }
.pay__status--ok { color: var(--c-ok); }
.pay__change { margin-block-end: var(--space-3); }
.sale__actions .btn--large { flex: 1; }
@media (max-width: 900px) {
  .sale { grid-template-columns: minmax(0, 1fr); }
}

/* Settings: choice list with a hint under each label */
.choices { display: grid; gap: var(--space-2); margin-block-end: var(--space-3); }
.choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer; }
.choice input { inline-size: 24px; block-size: 24px; margin-block-start: 2px; flex: none; }
.choice__hint { display: block; margin-block-start: var(--space-1); }
.steps { padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); }

/* Item names: a size such as 51-21-140 stays one left-to-right run (js/ui/dom.js bidiText) */
.ltr-run { white-space: nowrap; unicode-bidi: isolate; }

/* ---------- Job orders (FR-084, UI-006: a fixed colour per status, always with its text) ---------- */
.st { display: inline-flex; align-items: center; min-block-size: 28px; padding-inline: var(--space-3); border-radius: 999px; font-size: 0.95rem; font-weight: 700; color: #fff; background: var(--st-color); vertical-align: middle; }
.st--new, .st-edge--new { --st-color: var(--st-new); }
.st--waiting_lenses, .st-edge--waiting_lenses { --st-color: var(--st-waiting); }
.st--in_progress, .st-edge--in_progress { --st-color: var(--st-progress); }
.st--ready, .st-edge--ready { --st-color: var(--st-ready); }
.st--delivered, .st-edge--delivered { --st-color: var(--st-delivered); }
.st--cancelled, .st-edge--cancelled { --st-color: var(--st-cancelled); }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.board__col { background: var(--c-surface-2); border-radius: var(--radius-lg); padding: var(--space-3); display: grid; gap: var(--space-2); min-inline-size: 0; }
.board__title { font-size: 1rem; margin: 0 0 var(--space-1); display: flex; align-items: center; gap: var(--space-2); }
.job-card { display: grid; gap: 2px; padding: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-border); border-inline-start: 6px solid var(--st-color); border-radius: var(--radius); color: inherit; text-decoration: none; min-block-size: 44px; }
.job-card:hover { border-color: var(--c-brand); }
.job-card__no { font-weight: 700; font-size: 1.05rem; text-align: end; }
.job-card__name { font-weight: 500; overflow-wrap: anywhere; }
.job-card__flags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.job-card__flags .badge { margin: 0; }
.pick--on { border-color: var(--c-brand); background: var(--c-brand-soft); box-shadow: inset 0 0 0 1px var(--c-brand); }
.chip-link { margin-inline-end: var(--space-2); }
.job-form .segmented { margin-block-end: var(--space-3); }
@media (max-width: 1100px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .board { grid-template-columns: minmax(0, 1fr); }
}
.screen__head .toolbar { margin: 0; }
.screen__head .toolbar .input { inline-size: 11rem; }
.card--warn { border-color: var(--c-warn); background: var(--c-warn-soft); }

/* ---------- Manager's phone dashboard (FR-110, FR-114: no sideways scroll at 375 px) ---------- */
.screen--phone { max-inline-size: 720px; margin-inline: auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-block-end: var(--space-4); }
.tile { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); min-inline-size: 0; }
.tile__label { color: var(--c-muted); font-size: 0.95rem; }
.tile__value { font-size: 1.45rem; overflow-wrap: anywhere; }
.tile__hint { font-size: 0.85rem; }
.kv { display: flex; justify-content: space-between; gap: var(--space-3); }
.kv > :first-child { min-inline-size: 0; overflow-wrap: anywhere; }
.audit__details { font-size: 0.85rem; color: var(--c-muted); max-inline-size: 28rem; overflow-wrap: anywhere; }
.lock__alt { margin-block-start: var(--space-4); display: grid; gap: var(--space-2); justify-items: start; }
@media (max-width: 420px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile__value { font-size: 1.15rem; }
}
.order-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-block: var(--space-4); }
.order-strip__item { display: flex; align-items: center; gap: var(--space-2); min-block-size: 52px; padding-inline: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-border); border-inline-start: 6px solid var(--st-color); border-radius: var(--radius); color: inherit; text-decoration: none; }
.order-strip__count { font-size: 1.4rem; font-weight: 700; }
@media (max-width: 700px) { .order-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* UI-002: a tap-to-call number is a 44 px target */
.tel-link { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--space-2); margin-inline-end: var(--space-2); }