/* samara-ui-v1 — THE SAMARA UI STANDARD. One look for every staff page.
 *
 * ⚠ IT LIVES IN staff/, NOT shared/. The brief names the files shared/samara-ui.css and
 * shared/samara-ui.js; that is the NAME, not a deployment decision. The staff vhost serves the
 * staff/ directory at the site root — samara-config.js, samara-modal.js and samara-outbox.js are all
 * fetched as https://samaraboh.com/<file> — so a shared/ folder would need an nginx change to be
 * reachable at all. Putting the kit beside the other three shared files needs no vhost edit and no
 * new serving rule, which is the difference between a rollout that can start today and one that
 * starts with a config change on a production web server.
 *
 * ⚠ NO COLOUR IS WRITTEN HERE. Every value is var(--su-*, #fallback); the tokens live in the one
 * token home, the ak-palette injector in samara-config.js. The fallback is what makes the kit render
 * correctly on a page where that file has not loaded yet, rather than collapsing to black on black.
 *
 * ⚠ 360px FIRST. Every size below is chosen against a 360px phone: 44px minimum touch target, a
 * 16px side gutter, and nothing that can push the document wider than the viewport.
 *
 * Contents: 1 header · 2 language pill · 3 pill tabs · 4 filter chips · 5 group card · 6 row
 *           7 track + progress · 8 status chips · 9 banners · 10 decision chips + tiles · 11 safe zone
 */

/* ── 0. FOUNDATION ──────────────────────────────────────────────────────────────────────────── */
.su, .su * { box-sizing: border-box; }
.su {
  font-family: 'DM Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--su-text, #111827);
  background: var(--su-bg, #F9FAFB);
}
/* ⚠ TABULAR FIGURES ON EVERY NUMBER. Counts, hours and quantities sit in columns and in chips that
   re-render; proportional digits make them jitter as the value changes. */
.su-num, .su-count, .su-chip, .su-row-meta, .su-progress-label { font-variant-numeric: tabular-nums; }

/* ── 1. HEADER — ONE per page, dark ─────────────────────────────────────────────────────────────
   ⚠ ONE HEADER. The double blue+green header on the older pages is two bars doing one job; the kit
   replaces both. The dark header also replaces the green brand header (Wouter's ruling 17.09). */
.su-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--su-header-bg, #111827);
  border-bottom: 1px solid var(--su-header-line, #374151);
  color: #fff;
}
.su-header-back {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10); color: #fff; text-decoration: none;
  font-size: 20px; line-height: 1; border: 0; cursor: pointer;
}
.su-header-back:hover { background: rgba(255,255,255,.18); }
/* min-width:0 lets the title shrink instead of pushing the pill off the screen at 360px */
.su-header-titles { flex: 1 1 auto; min-width: 0; }
/* ⚠ NO ELLIPSIS ON THE TITLE. Cutting "Maintenance — YZ65" to "Maintenance — YZ…" hides the one
   word that says which machine you are looking at. It wraps instead. */
.su-header-title { font-size: 18px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.su-header-sub { font-size: 12px; color: var(--su-header-sub, #D1D5DB); line-height: 1.3; overflow-wrap: anywhere; }
.su-header-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.su-live { width: 8px; height: 8px; border-radius: 50%; background: var(--su-success, #059669); flex: 0 0 auto; }
.su-live[data-live="off"] { background: var(--su-muted, #6B7280); }
.su-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
@media (min-width: 700px) { .su-header-title { font-size: 20px; } }

/* ── 2. LANGUAGE PILL — header only, one language on screen at a time ───────────────────────── */
.su-lang { display: inline-flex; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); flex: 0 0 auto; }
.su-lang button {
  border: 0; background: transparent; cursor: pointer; color: #D1D5DB;
  font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: .04em;
  padding: 0 10px; height: 28px; min-width: 34px;
}
.su-lang button[aria-pressed="true"] { background: var(--su-primary, #2563EB); color: #fff; }

/* ── 3. PILL TABS — they WRAP; nothing is hidden off the side ─────────────────────────────────
   ⚠ MD 17.09: "do not hide anything like too far right or left". A sideways-scrolling strip of tabs
   hides the ones past the edge and gives no sign they exist — on the Maintenance page that is where
   PM itself was sitting. Wrapping onto a second line costs a few pixels of height and shows every
   option at once, which is the whole point on a phone the team uses one-handed. */
.su-tabsbar { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--su-bg, #F9FAFB); flex-wrap: wrap; }
.su-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.su-tab {
  flex: 0 0 auto; border: 1px solid var(--su-border, #E5E7EB); background: var(--su-card, #fff);
  color: var(--su-muted, #6B7280); border-radius: 999px;
  font: 600 13px/1 'DM Sans', sans-serif; padding: 0 14px; height: 36px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.su-tab[aria-selected="true"] { background: var(--su-primary, #2563EB); border-color: var(--su-primary, #2563EB); color: #fff; }
.su-tabsbar-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.su-iconbtn {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--su-border, #E5E7EB);
  background: var(--su-card, #fff); color: var(--su-text, #111827);
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
}

/* ── 4. FILTER CHIPS — label + count; a zero is muted AND disabled ──────────────────────────────
   ⚠ A ZERO COUNT IS NOT A FILTER. Leaving it tappable gives an empty list and no explanation. */
.su-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.su-filter {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--su-border, #E5E7EB); background: var(--su-card, #fff);
  color: var(--su-text, #111827); border-radius: 999px;
  font: 600 12px/1 'DM Sans', sans-serif; padding: 0 12px; height: 34px; cursor: pointer;
}
.su-filter .su-count { color: var(--su-muted, #6B7280); font-weight: 700; }
.su-filter[aria-pressed="true"] { background: var(--su-text, #111827); border-color: var(--su-text, #111827); color: #fff; }
.su-filter[aria-pressed="true"] .su-count { color: #D1D5DB; }
.su-filter[disabled] { opacity: .45; cursor: default; }

/* ── 5. GROUP CARD — collapsible, and it must not jump ───────────────────────────────────────── */
.su-group { background: var(--su-card, #fff); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin: 0 12px 10px; overflow: hidden; }
.su-group-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left;
  min-height: 44px; color: var(--su-text, #111827);
}
.su-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 24px; padding: 0 7px; border-radius: 6px;
  background: var(--su-neutral-bg, #F3F4F6); color: var(--su-neutral-fg, #4B5563);
  font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: .03em;
}
.su-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--su-muted, #6B7280); }
.su-group-name { flex: 1 1 auto; min-width: 0; font: 600 15px/1.3 'DM Sans', sans-serif; }
.su-group-count { flex: 0 0 auto; color: var(--su-muted, #6B7280); font: 700 13px/1 'DM Sans', sans-serif; }
.su-chev { flex: 0 0 auto; color: var(--su-muted, #6B7280); transition: transform .15s ease; font-size: 13px; }
.su-group[data-open="false"] .su-chev { transform: rotate(-90deg); }
/* ⚠ NO JUMP: the body is hidden with [hidden], so a collapse never animates a height and never
   scrolls the page under the reader's thumb. */
.su-group-body[hidden] { display: none !important; }
.su-subgroup {
  padding: 8px 14px 4px; font: 700 12px/1 'DM Sans', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--su-muted, #6B7280);
  display: flex; align-items: center; gap: 8px;
}

/* ── 6. ROW — tap to expand in place, one open at a time ─────────────────────────────────────── */
.su-row { border-top: 1px solid var(--su-border, #E5E7EB); border-left: 3px solid transparent; }
.su-group-body > .su-row:first-child { border-top: 0; }
.su-row[data-status="success"] { border-left-color: var(--su-success, #059669); }
.su-row[data-status="warning"] { border-left-color: var(--su-warning, #D97706); }
.su-row[data-status="error"]   { border-left-color: var(--su-error,   #DC2626); }
.su-row[data-status="now"]     { border-left-color: var(--su-now,     #EA580C); }
.su-row[data-status="neutral"] { border-left-color: var(--su-border,  #E5E7EB); }
.su-row-main {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left;
  min-height: 44px; color: var(--su-text, #111827);
}
.su-row-body { flex: 1 1 auto; min-width: 0; }
.su-row-title { font: 600 15px/1.3 'DM Sans', sans-serif; }
.su-row-code { font: 400 11px/1.4 'DM Sans', sans-serif; color: var(--su-muted, #6B7280); }
.su-row-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
/* ⚠ CHIPS GO ON THEIR OWN LINE ON A PHONE. Beside a long title at 360px they force the row wider
   than the screen, which is how a page starts scrolling sideways. */
@media (max-width: 480px) {
  .su-row-main { flex-wrap: wrap; }
  .su-row-right { width: 100%; padding-left: 0; }
}
.su-row-detail { padding: 0 14px 14px; }
.su-row-detail[hidden] { display: none !important; }
.su-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 13px; }
.su-dl dt { color: var(--su-muted, #6B7280); }
.su-dl dd { margin: 0; font-weight: 600; }
.su-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.su-btn {
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font: 600 14px/1 'DM Sans', sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.su-btn-primary { background: var(--su-primary, #2563EB); color: #fff; }
.su-btn-outline { background: var(--su-card, #fff); color: var(--su-text, #111827); border-color: var(--su-border, #E5E7EB); }
.su-btn-danger  { background: var(--su-error, #DC2626); color: #fff; }

/* ── 7. TRACK AND PROGRESS ───────────────────────────────────────────────────────────────────── */
.su-track { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.su-track i { display: block; width: 22px; height: 6px; border-radius: 3px; background: var(--su-border, #E5E7EB); }
.su-track i[data-s="done"]    { background: var(--su-primary, #2563EB); }
.su-track i[data-s="now"]     { background: var(--su-now, #EA580C); }
.su-track i[data-s="blocked"] { background: var(--su-error, #DC2626); }
@media (max-width: 400px) { .su-track i { width: 16px; } }
.su-progress { height: 6px; border-radius: 3px; background: var(--su-border, #E5E7EB); overflow: hidden; margin-top: 6px; }
.su-progress > span { display: block; height: 100%; border-radius: 3px; background: var(--su-primary, #2563EB); }
.su-progress[data-status="warning"] > span { background: var(--su-warning, #D97706); }
.su-progress[data-status="error"]   > span { background: var(--su-error, #DC2626); }
.su-progress[data-status="success"] > span { background: var(--su-success, #059669); }
.su-progress-label { font: 400 12px/1.4 'DM Sans', sans-serif; color: var(--su-muted, #6B7280); margin-top: 3px; }

/* ── 8. STATUS CHIPS ─────────────────────────────────────────────────────────────────────────────
   ⚠ THE WORD CARRIES THE MEANING, NEVER THE COLOUR ALONE. Every chip prints its state in words, so
   it still reads on a mono screen, in sunlight, and to a colour-blind reader. */
.su-chip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  font: 600 12px/1 'DM Sans', sans-serif; padding: 5px 10px; white-space: nowrap;
  background: var(--su-neutral-bg, #F3F4F6); color: var(--su-neutral-fg, #4B5563);
}
.su-chip[data-tone="success"] { background: var(--su-success-bg, #ECFDF5); color: var(--su-success-fg, #047857); }
.su-chip[data-tone="warning"] { background: var(--su-warning-bg, #FFFBEB); color: var(--su-warning-fg, #B45309); }
.su-chip[data-tone="error"]   { background: var(--su-error-bg,   #FEF2F2); color: var(--su-error-fg,   #B91C1C); }
.su-chip[data-tone="primary"] { background: var(--su-primary-bg, #EFF6FF); color: var(--su-primary-fg, #1D4ED8); }

/* ── 9. BANNERS ──────────────────────────────────────────────────────────────────────────────── */
.su-banner {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 12px 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--su-warning-bg, #FFFBEB); color: var(--su-warning-fg, #B45309);
}
.su-banner[data-tone="danger"] { background: var(--su-error-bg, #FEF2F2); color: var(--su-error-fg, #B91C1C); }
.su-banner-icon { flex: 0 0 auto; font-size: 16px; line-height: 1.3; }
.su-banner-title { font: 700 14px/1.35 'DM Sans', sans-serif; }
.su-banner-sub { font: 400 13px/1.4 'DM Sans', sans-serif; opacity: .92; }

/* ── 10. DECISION CHIPS AND TILES (the hub) ──────────────────────────────────────────────────── */
.su-decisions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 10px; }
.su-decision {
  flex: 1 1 150px; min-width: 150px; text-align: left; cursor: pointer;
  background: var(--su-card, #fff); border: 1px solid var(--su-border, #E5E7EB);
  border-left: 4px solid var(--su-primary, #2563EB);
  border-radius: 12px; padding: 10px 12px; color: var(--su-text, #111827);
}
.su-decision[data-tone="warning"] { border-left-color: var(--su-warning, #D97706); }
.su-decision[data-tone="error"]   { border-left-color: var(--su-error, #DC2626); }
.su-decision-n { font: 700 24px/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.su-decision-label { font: 500 12px/1.3 'DM Sans', sans-serif; color: var(--su-muted, #6B7280); margin-top: 4px; }
.su-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 0 12px 10px; }
.su-tile {
  position: relative; background: var(--su-card, #fff); border: 1px solid var(--su-border, #E5E7EB);
  border-radius: 12px; padding: 12px 8px; min-height: 76px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--su-text, #111827); text-decoration: none; text-align: center;
}
.su-tile-icon { font-size: 20px; line-height: 1; }
.su-tile-name { font: 600 12px/1.25 'DM Sans', sans-serif; }
.su-tile-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--su-error, #DC2626); color: #fff;
  font: 700 11px/20px 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; text-align: center;
}

/* ── 11. SAFE ZONE — nothing may cover content ───────────────────────────────────────────────────
   ⚠ `html body` ON PURPOSE, AND IT IS LOAD-BEARING. samara-config.js INJECTS
   `@media(max-width:640px){body{padding-bottom:60px}}` at RUNTIME, so its rule lands later in the
   cascade and beats an equally specific `body{}` here. Two element selectors win on specificity
   whatever the order. This was measured, not guessed: the PM tab reported 60px until it was written
   this way. 48 is the shared floating button, 16 is its gap, env() is the phone's own bar. */
html body.su-page { padding-bottom: calc(48px + 16px + env(safe-area-inset-bottom, 0px)); }
.su-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%; border: 0; z-index: 9998;
  background: var(--su-primary, #2563EB); color: #fff; font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
}
/* Every interactive thing clears 44px, the smallest target a thumb finds reliably. */
.su-tab, .su-filter, .su-btn, .su-iconbtn, .su-row-main, .su-group-head { touch-action: manipulation; }

/* Sign out — a visible control in the header, never hidden behind an avatar tap. */
.su-header-signout {
  flex: 0 0 auto; min-height: 32px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; border: 0;
  font: 600 12px/1 'DM Sans', sans-serif;
}
.su-header-signout:hover { background: rgba(255,255,255,.2); }

/* ── MODULE CHIPS (lp-hub-v2) ───────────────────────────────────────────────────────────────────
   ⚠ CHIPS, NOT TILES. 65 modules as 110px boxes is a wall of squares you scroll past; as wrapping
   pills they read as a list of names, which is what a launcher is. The Most-used grid stays the ONLY
   tile grid on the page, so the eye has one place to land. */
.su-chipmod {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border-radius: 999px; background: var(--su-neutral-bg, #F3F4F6); color: var(--su-text, #111827);
  font: 500 13px/1 'DM Sans', sans-serif; text-decoration: none; max-width: 100%;
}
.su-chipmod:hover { background: #E5E7EB; }
.su-chipmod i { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.su-chipmod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-chipmods { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 14px; }
/* the preview on a CLOSED category: what is inside, without opening it */
.su-group-preview {
  padding: 0 14px 12px; margin-top: -6px;
  font: 400 12px/1.4 'DM Sans', sans-serif; color: var(--su-muted, #6B7280);
}
/* search */
.su-search { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; position: relative; }
.su-search input {
  flex: 1; min-width: 0; height: 44px; padding: 0 36px 0 14px; border-radius: 999px;
  border: 1px solid var(--su-border, #E5E7EB); background: var(--su-card, #fff);
  font: 400 14px/1 'DM Sans', sans-serif; color: var(--su-text, #111827);
}
.su-search button {
  position: absolute; right: 6px; width: 32px; height: 32px; border: 0; background: none;
  color: var(--su-muted, #6B7280); font-size: 18px; cursor: pointer; border-radius: 50%;
}

/* ── THE TODAY LINE (lp-hub-v2) — four numbers where five cards were ───────────────────────────── */
.su-todayrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.su-stat {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px;
  height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: var(--su-card, #fff); border: 1px solid var(--su-border, #E5E7EB);
  color: var(--su-text, #111827); text-align: left;
}
.su-stat-l { font: 500 11px/1 'DM Sans', sans-serif; color: var(--su-muted, #6B7280); }
.su-stat-v { font: 700 16px/1 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.su-stat-v em { font: 500 11px/1 'DM Sans', sans-serif; font-style: normal; color: var(--su-muted, #6B7280); }
.su-stat[data-tone="success"] { background: var(--su-success-bg, #ECFDF5); border-color: transparent; }
.su-stat[data-tone="success"] .su-stat-v { color: var(--su-success-fg, #047857); }
.su-stat[data-tone="error"] { background: var(--su-error-bg, #FEF2F2); border-color: transparent; }
.su-stat[data-tone="error"] .su-stat-v { color: var(--su-error-fg, #B91C1C); }