/* Group Timesheet — client styles.
   Class names here mirror exactly what app.js emits. Mobile-first, works well
   on a phone (operators capture on-site) and scales up for manager/office. */

/* ------------------------------ web fonts -------------------------------- */
/* Barlow (headings/display) + IBM Plex Sans (text), SELF-HOSTED in ./fonts —
   no font CDN: operators load this on-site over patchy connections, and a
   third-party origin would also need carving out of a future CSP. Loading the
   faces is visually inert until the typography tokens reference the families.
   Latin subset only (all staff names are latin); OFL licence in fonts/OFL.txt. */
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/barlow-800.woff2') format('woff2');
}
/* Variable file: one download covers 400/500/600 (full axis 100–700). */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('fonts/ibm-plex-sans-var.woff2') format('woff2');
}

/* ---------------- design tokens (docs/DESIGN-STYLE.md §11) ---------------- */
/* The guide's :root custom-property block, installed verbatim ahead of any
   component styling (token layer first — §1a of the rollout method). The four
   Tailwind slate literals from §1/§13 are included as the control-* variables
   plus --option-text. Legacy variable names below alias onto these tokens so
   every existing rule resolves through the guide's palette. */
:root {
  /* base */
  --background: #f6f8fa;
  --foreground: #16232e;

  /* brand / primary */
  --color-primary: #0060a8;
  --color-primary-hover: #004b85;
  --color-primary-soft: #e7f0f9;
  --color-brand-green: #88c840;   /* decorative only */
  --color-green-ui: #4c831a;      /* semantic green text (AA) */
  --color-green-large: #5fa321;   /* large green text only */

  /* ink / neutrals */
  --color-ink: #16232e;
  --color-ink-muted: #51606b;
  --color-ink-subtle: #6b7a85;
  --color-paper: #f6f8fa;
  --color-line: #e2e8f0;
  --color-surface-muted: #f1f5f9;

  /* neutrals used on controls (slate literals per §1 / §13 footnote) */
  --control-border: #cbd5e1;   /* slate-300 */
  --row-hover: #f8fafc;        /* slate-50  */
  --divider: #f1f5f9;          /* slate-100 */
  --disabled-border: #e2e8f0;
  --disabled-text: #94a3b8;
  --option-text: #334155;      /* slate-700 — option / secondary control text */

  /* semantic status */
  --color-success: #4c831a;
  --color-success-soft: #eef4e6;
  --color-warning: #9a6700;
  --color-warning-soft: #fdf3e0;
  --color-danger: #b42318;
  --color-danger-soft: #fdeceb;

  /* type */
  --font-display: 'Barlow', system-ui, sans-serif;   /* headings + numerals */
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;

  /* radius */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-chip: 6px;

  /* elevation (ink-tinted) */
  --shadow-card: 0 1px 2px 0 rgb(22 35 46 / 0.05), 0 1px 3px 0 rgb(22 35 46 / 0.07);
  --shadow-raised: 0 4px 12px -2px rgb(22 35 46 / 0.10), 0 2px 6px -2px rgb(22 35 46 / 0.06);
  --shadow-overlay: 0 16px 40px -12px rgb(22 35 46 / 0.20);

  /* focus */
  --focus-ring: 2px solid #0060a8;

  /* ---- legacy aliases (pre-guide variable names used throughout below) ---- */
  --brand: var(--color-primary);
  --brand-dark: var(--color-primary-hover);
  --green: var(--color-green-ui);       /* was the accent green; now AA green */
  --green-dark: var(--color-green-ui);
  --ink: var(--color-ink);
  --muted: var(--color-ink-muted);
  --line: var(--color-line);
  --bg: var(--color-paper);
  --card: #ffffff;
  --radius: var(--radius-card);
  --shadow: var(--shadow-card);
  --shadow-lg: var(--shadow-overlay);
  --amber: var(--color-warning);
  --red: var(--color-danger);
  --blue: var(--color-primary);
}
/* Barlow numerals align in tables/stats (guide §11). */
.font-display { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Guide §2: Plex for body/UI (14px desktop; 16px on operator phones — see the
   responsive block), Barlow for headings and numerals. */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
/* Keyboard focus ring on every interactive element (guide §7). */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring); outline-offset: 2px;
}

/* ------------------------------- header --------------------------------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 12px 20px;
  position: sticky; top: 0; z-index: 20;
}
.header-left { display: flex; align-items: center; gap: 14px; }
.logo-box { display: flex; align-items: center; gap: 10px; }
.logo-divider { width: 1px; height: 34px; background: var(--line); }
.header-title h1 { font-size: 17px; letter-spacing: -0.025em; color: var(--color-ink); font-weight: 700; }
.header-title p { margin: 0; font-size: 12px; color: var(--color-ink-muted); }
.header-right { display: flex; align-items: center; }
.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-primary-soft); color: var(--color-primary);
  border: 1px solid transparent; border-radius: 9999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background-color 150ms;
}
.user-chip:hover { background: #d9e8f5; }

/* ------------------------------- layout --------------------------------- */
.content { max-width: 940px; margin: 0 auto; padding: 18px 16px 60px; }
/* Back-office views that are led by a wide data table get more room: 940px is
   a good reading measure for the capture form, but it squeezes a 10-column
   table while leaving the screen empty either side. Forms and card views stay
   at 940px, where a long line length would hurt readability.
   .tabs-wide must always be applied WITH .content-wide — the tab bar is a
   sibling of the content, so both have to share a width to stay aligned.
   Compound selectors on purpose: .tabs sets its own max-width further down,
   so a single-class rule here would lose to it on source order. */
.content.content-wide, .tabs.tabs-wide { max-width: 1400px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff;
}
/* Section heading (guide §2): Barlow 16/600. */
.card-header h3 { font-size: 16px; font-weight: 600; color: var(--color-ink); }
.card-body { padding: 20px; }

/* --------------------------- fields & inputs ---------------------------- */
.field { margin-bottom: 16px; }
/* Field label (guide §8): 13px medium slate-700 — not an uppercase overline.
   Inline hints inside labels keep their own colour via inline styles. */
.field > label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--option-text); margin-bottom: 4px;
}
/* Text input / select recipe (guide §8). */
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--control-border); border-radius: var(--radius-control);
  padding: 8px 12px; outline: none; transition: border-color 150ms, box-shadow 150ms;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 2px rgb(0 96 168 / 0.40);
}
input.ro, input[readonly] { background: var(--color-surface-muted); color: var(--color-ink-subtle); }
input[disabled], select[disabled], textarea[disabled] {
  background: var(--color-surface-muted); color: var(--color-ink-subtle);
  border-color: var(--disabled-border); cursor: not-allowed;
}
textarea { resize: vertical; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* segmented worked/absent toggle */
.seg { display: inline-flex; border: 1px solid var(--control-border); border-radius: var(--radius-control); overflow: hidden; }
.seg button {
  border: 0; background: #fff; padding: 9px 22px; font: inherit; font-weight: 500;
  color: var(--color-ink-muted); cursor: pointer; transition: background-color 150ms, color 150ms;
}
.seg button + button { border-left: 1px solid var(--control-border); }
.seg button.on { background: var(--color-primary); color: #fff; font-weight: 600; }

/* time-segment entry blocks */
.entry { border: 1px solid var(--line); border-radius: var(--radius-control); padding: 14px; margin-bottom: 12px; background: #fff; }
.entry-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.entry-head .n { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--color-ink); }

/* --------------------------------- buttons ------------------------------ */
/* Guide §8. One rule the guide is emphatic about: blue for ALL actions, green
   decorative only — so .btn-accent (the signing CTA, historically green) is
   styled identically to primary. The class stays for markup stability. */
button { font-family: inherit; }
.btn-primary, .btn-secondary, .btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-control); padding: 8px 14px; font-size: 14px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent; transition: background-color 150ms, color 150ms;
}
.btn-primary, .btn-accent { background: var(--color-primary); color: #fff; font-weight: 600; }
.btn-primary:hover, .btn-accent:hover { background: var(--color-primary-hover); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--control-border); }
.btn-secondary:hover { background: var(--row-hover); }
.btn-primary[disabled], .btn-accent[disabled] { opacity: .6; cursor: default; }
.btn-secondary[disabled] { opacity: .5; cursor: default; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-bar { display: flex; gap: 10px; margin-top: 16px; }

.btn-add {
  width: 100%; padding: 11px; border: 1px dashed var(--control-border); border-radius: var(--radius-control);
  background: #fff; color: var(--color-primary); font-weight: 500; cursor: pointer;
  transition: background-color 150ms;
}
.btn-add:hover { background: var(--color-primary-soft); }
.btn-remove { border: 0; background: none; color: var(--color-danger); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 2px 4px; }
.btn-clear-sig { margin-top: 8px; border: 0; background: none; color: var(--color-primary); font-size: 12.5px; font-weight: 500; cursor: pointer; }

/* --------------------------------- tables ------------------------------- */
/* Guide §8 table recipe: overline header labels, slate-100 row dividers,
   slate-50 row hover, Barlow tabular numerals so figures align. */
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
thead th {
  text-align: left; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-ink-subtle); padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 150ms; }
tbody tr:hover { background: var(--row-hover); }
.td-actions { display: flex; gap: 6px; white-space: nowrap; }
.empty { text-align: center; color: var(--color-ink-muted); padding: 40px 16px; }

/* --------------------------------- badges ------------------------------- */
/* Guide §8 badge recipe + §1 rule: five tones only, differentiated by LABEL —
   no new hues. Mapping by meaning:
     draft/weekend           -> neutral      submitted/holiday -> info
     approved                -> success      amended/late/OT/corrected -> warning
     rejected                -> danger
   Colour is never alone: every badge carries its text label. */
.badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-chip);
  font-size: 12px; font-weight: 500;
  background: var(--color-surface-muted); color: var(--color-ink-muted);
}
.b-draft     { background: var(--color-surface-muted); color: var(--color-ink-muted); }
.b-submitted { background: var(--color-primary-soft); color: var(--color-primary); }
.b-approved  { background: var(--color-success-soft); color: var(--color-success); }
.b-amended   { background: var(--color-warning-soft); color: var(--color-warning); }
.b-rejected  { background: var(--color-danger-soft); color: var(--color-danger); }
.b-late      { background: var(--color-warning-soft); color: var(--color-warning); }
.b-weekend   { background: var(--color-surface-muted); color: var(--color-ink-muted); }
.b-holiday   { background: var(--color-primary-soft); color: var(--color-primary); }
.b-ot        { background: var(--color-warning-soft); color: var(--color-warning); }

/* ----------------------------- info / alerts ---------------------------- */
.info, .warn, .alert, .cloud-box {
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px;
}
.info { background: var(--color-primary-soft); border: 1px solid #cfe0ef; color: var(--color-primary); }
.cloud-box { background: var(--color-success-soft); border: 1px solid #dbe8cc; color: var(--color-success); }
.warn { background: var(--color-warning-soft); border: 1px solid #f2e2bd; color: var(--color-warning); }
.alert { background: var(--color-danger-soft); border: 1px solid #f5d2cf; color: var(--color-danger); }
.alert ul { margin: 8px 0 0; padding-left: 20px; }
.alert li { margin: 2px 0; }

/* -------------------------------- login --------------------------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); padding: 30px 26px;
}
.login-logos { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 18px; }
.login-card h2 { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--color-ink); }
.login-card .tag { text-align: center; color: var(--color-ink-muted); font-size: 12.5px; margin: 4px 0 20px; }
.login-card .btn-primary { margin-top: 6px; }

/* ---- sign-in page background treatment (docs/LOGIN-BACKGROUND.md) -------- */
/* Scoped to .login-bg so ONLY the sign-in page is affected — the shared
   .login-wrap / .login-card rules above are untouched, so the first-login
   set-password screen keeps its plain look. No login flow/field/logic change:
   this adds a dark backdrop, two blurred glows, a top accent bar and a footer.
   overflow:hidden (per spec) clips the off-screen glows on both axes — no
   scrollbars, and the card (well under viewport height) stays perfectly
   centred. */
.login-bg {
  position: relative; overflow: hidden;
  background: #16232e; padding: 1rem;   /* ink backdrop; 16px viewport gutter */
}
/* Two decorative glows as pseudo-elements — inherently aria-hidden, no markup. */
.login-bg::before, .login-bg::after {
  content: ''; position: absolute; border-radius: 9999px; filter: blur(64px); pointer-events: none;
}
.login-bg::before {   /* Glow A — blue, top, wide: primary #0060A8 @ 30% */
  width: 44rem; height: 24rem; top: -11rem; left: 50%; transform: translateX(-50%);
  background: rgba(0, 96, 168, 0.30);
}
.login-bg::after {    /* Glow B — green, bottom-right: brand-green #88C840 @ 15% */
  width: 24rem; height: 24rem; bottom: -14rem; right: -12rem;
  background: rgba(136, 200, 64, 0.15);
}
/* Card floats above the glows; spec sizing (384px / 32px), no border on the
   dark field, ink-tinted overlay shadow (already the shared value). */
.login-bg .login-card {
  position: relative; z-index: 1; overflow: hidden;
  max-width: 24rem; padding: 2rem; border: none;
}
/* 4px full-bleed green accent flush to the top edge, clipped to the radius. */
.login-bg .login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--color-brand-green);
}
/* Footer mark pinned to the viewport bottom (spec §3). IBM Plex Sans, muted
   slate-400 (#94A3B8 = --disabled-text): 6.1:1 on #16232E — passes AA. */
.login-footer {
  position: absolute; bottom: 1.25rem; left: 0; right: 0; z-index: 1;
  text-align: center; font-family: var(--font-body);
  font-size: 12px; line-height: 16px; font-weight: 400; color: var(--disabled-text);
}

/* --------------------------------- tabs --------------------------------- */
/* Guide §8 tab bar: pill tabs on the paper background (no underline rail).
   overflow-x stays for phones — the guide's wrap suits desktop; a horizontal
   scroll of pills is kinder than three wrapped rows on a small screen. */
.tabs {
  display: flex; gap: 8px; max-width: 940px; margin: 0 auto; padding: 14px 16px 2px;
  overflow-x: auto;
}
.tab-btn {
  border: 0; background: #fff; padding: 6px 12px; font-size: 14px; font-weight: 500;
  color: var(--option-text); cursor: pointer; border-radius: var(--radius-control);
  box-shadow: var(--shadow-card); white-space: nowrap; transition: background-color 150ms, color 150ms;
}
.tab-btn:hover { background: var(--row-hover); }
.tab-btn.active { background: var(--color-primary); color: #fff; font-weight: 600; box-shadow: none; }

/* filter bar */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.filter-bar .field { margin-bottom: 0; min-width: 130px; }
.filter-bar .btn-primary, .filter-bar .btn-secondary { height: 42px; }

/* --------------------------- signature capture -------------------------- */
.sig-wrapper { position: relative; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: #fff; overflow: hidden; }
canvas.sig { display: block; width: 100%; height: 150px; touch-action: none; cursor: crosshair; }
canvas.sig.signed { background: #fff; }
.sig-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #9ca3af; font-size: 14px; pointer-events: none;
}

/* --------------------------- modal / overlay ---------------------------- */
/* Guide §8 modal: black/50 scrim, 448px rounded-xl panel, Barlow 18px title. */
.overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
  display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50;
}
.overlay.open { display: flex; }
.modal {
  width: 100%; max-width: 448px; max-height: 90vh; overflow-y: auto;
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); padding: 20px;
}
.modal h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.modal .sub { color: var(--color-ink-muted); font-size: 13px; margin: 0 0 16px; }
.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 13.5px; }
.summary-line span { color: var(--color-ink-muted); }

.code-pill {
  display: inline-block; font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 700; letter-spacing: .5em; text-indent: .5em;
  background: var(--color-primary-soft); color: var(--color-primary);
  border: 1px dashed var(--control-border); border-radius: var(--radius-control); padding: 12px 22px;
}

/* --------------------------------- toast -------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 24px);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 80; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok   { background: var(--color-success); }
.toast.err  { background: var(--color-danger); }
.toast.info { background: var(--color-primary); }

/* ----------------------- time records date headings --------------------- */
/* Guide §8 grouping header: overline label on an inset surface. */
.date-head td {
  background: var(--color-surface-muted) !important; color: var(--color-ink-muted);
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; padding: 8px 16px !important;
}

/* ---------------------------- leave calendar ---------------------------- */
.cal-table { table-layout: fixed; }
.cal-table thead th { text-align: center; }
.cal-cell { vertical-align: top; height: 74px; padding: 6px 6px !important; border-right: 1px solid var(--divider); }
.cal-cell:last-child { border-right: 0; }
.cal-day { font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--color-ink-subtle); margin-bottom: 3px; }
.cal-wkend { background: var(--row-hover); }
.cal-empty { background: #fff; }
.cal-name {
  display: inline-block; margin: 1px 2px 1px 0; padding: 2px 7px; border-radius: 999px;
  background: #dcfce7; color: #166534; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}

/* --------------------------- notifications bell -------------------------- */
.nf-bell {
  position: relative; cursor: pointer; font-size: 18px; margin-right: 12px;
  padding: 6px 8px; border-radius: 9999px; transition: background-color 150ms; user-select: none;
}
.nf-bell:hover { background: var(--color-surface-muted); }
.nf-badge {
  position: absolute; top: 0; right: 0; background: var(--color-danger); color: #fff;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  border-radius: 9999px; padding: 1px 5px; line-height: 1.4;
}
.nf-item { padding: 9px 4px; border-bottom: 1px solid var(--divider); }
.nf-item.nf-unread { background: var(--color-primary-soft); border-left: 3px solid var(--color-primary); padding-left: 8px; }

/* --------------------------- password eye toggle ------------------------- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-size: 16px; padding: 6px 8px; border-radius: 8px;
}
.pw-eye:hover { background: var(--color-surface-muted); }

/* --------------------------- capture status strip ------------------------ */
.cs-strip { display: flex; flex-wrap: wrap; gap: 4px; }
/* Chips reuse the five status tones (§1): draft=warning (needs attention),
   rejected=danger, captured=success, weekend/none=neutral. */
.cs-chip {
  width: 26px; height: 26px; border-radius: var(--radius-chip); display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600; cursor: pointer; user-select: none;
  border: 1.5px solid var(--control-border); color: var(--color-ink-subtle); background: #fff;
}
.cs-chip:hover { filter: brightness(0.96); }
.cs-none { background: #fff; }
.cs-wkend { background: var(--color-surface-muted); border-color: var(--disabled-border); color: var(--disabled-text); }
.cs-draft { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); }
.cs-rejected { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }
.cs-done { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.cs-sel { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ------------------------------ responsive ------------------------------ */
/* Operator/field sizing (guide §2 + §6): operators capture on their phones
   on-site, so the input-heavy screens get the tablet treatment — 16px base
   text and ≥48px touch targets on inputs and primary actions. Back-office
   desktop keeps the 14px scale above. */
@media (max-width: 768px) {
  body { font-size: 16px; }
  input, select, textarea { min-height: 48px; padding: 12px; }
  .btn-primary, .btn-accent, .btn-secondary { min-height: 48px; font-size: 16px; }
  .btn-sm { min-height: 0; font-size: 13px; }   /* row actions inside tables stay compact */
  .seg button { padding: 12px 22px; }
}
@media (max-width: 560px) {
  .row2, .grid { grid-template-columns: 1fr; }
  .header-title p { display: none; }
  .app-header { padding: 10px 14px; }
  .content { padding: 14px 12px 50px; }
  .card-body { padding: 16px 14px; }
}