/* ═══════════════════════════════════════════════════════════════════════════
   BIK Operations — shared phone layer (≤700px) and mobile design tokens
   ───────────────────────────────────────────────────────────────────────────
   Loaded by every page AFTER the page's own styles. Desktop and tablet are
   untouched: everything that changes layout lives inside the 700px query.
   Tokens are namespaced --m-* so they never collide with a page's own
   --primary / --border / --bg variables.

   Sections
     0  tokens (light + dark)
     1  page scale: headers, titles, greetings
     2  KPI strip: one swipeable row of compact stats instead of 2×2 tiles
     3  toolbars: 34px controls, tight gaps
     4  tap targets and quiet chrome
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --m-maroon: #662528;
  --m-maroon-ink: #4b1b1e;
  --m-maroon-soft: rgba(102, 37, 40, 0.08);
  --m-bg: #f6f4f2;
  --m-surface: #ffffff;
  --m-surface-2: #faf8f6;
  --m-text: #1a1412;
  --m-text-2: #5c524d;
  --m-muted: #8a7f79;
  --m-line: rgba(24, 24, 27, 0.12);
  --m-line-strong: rgba(24, 24, 27, 0.22);
  --m-ok: #16a34a;  --m-ok-soft: rgba(22, 163, 74, 0.12);
  --m-warn: #d97706; --m-warn-soft: rgba(217, 119, 6, 0.12);
  --m-bad: #dc2626;  --m-bad-soft: rgba(220, 38, 38, 0.10);
  --m-info: #2563eb; --m-info-soft: rgba(37, 99, 235, 0.10);
  --m-r: 8px;
  --m-r-lg: 10px;
  --m-h: 34px;      /* compact control: toolbar buttons, selects, search */
  --m-h-lg: 40px;   /* primary action */
  --m-fs-xs: 10.5px;
  --m-fs-sm: 12px;
  --m-fs: 13px;
  --m-fs-md: 15px;
  --m-fs-lg: 17px;
  --m-fs-xl: 20px;
  --m-shadow: 0 1px 2px rgba(24, 24, 27, 0.05);
  --m-space-1: 4px; --m-space-2: 8px; --m-space-3: 12px; --m-space-4: 16px; --m-space-5: 24px;
}
body.dark {
  --m-bg: #121419;
  --m-surface: #1b1e25;
  --m-surface-2: #15181e;
  --m-text: #f0eae5;
  --m-text-2: #c9c2bc;
  --m-muted: #8f8a86;
  --m-line: rgba(255, 255, 255, 0.12);
  --m-line-strong: rgba(255, 255, 255, 0.22);
  --m-maroon-soft: rgba(217, 83, 92, 0.16);
  --m-shadow: none;
}

@media (max-width: 700px) {

  /* ── 1. page scale ──────────────────────────────────────────────────────── */

  /* shop-floor pages (team lead, PDI, PRT, fab, parts, equipment, additional work):
     the maroon bar stays as the floor identity, one step smaller */
  header:has(> .hdr-l), header:has(> .logo) { height: 52px !important; min-height: 52px; padding: 0 12px !important; }
  header:has(> .hdr-l) .logo, header:has(> .logo) > .logo { height: 24px !important; }
  header:has(> .hdr-l) .hdr-l { gap: 10px !important; }
  header:has(> .hdr-l) .hdr-title { font-size: 14px !important; }
  header:has(> .hdr-l) .logout-btn, header:has(> .logo) > div > a, header:has(> .logo) > div > button:not([id*="bell"]):not(.icon-btn),
  header:has(> .hdr-l) > div > a, header:has(> .hdr-l) > div > button:not([id*="bell"]):not(.icon-btn) { font-size: 11px !important; padding: 6px 10px !important; white-space: nowrap; min-height: 30px; box-sizing: border-box; }
  header:has(> .hdr-l) > div, header:has(> .logo) > div { gap: 6px !important; }

  /* module pages with the white "top" header (analytics, training, movements, priorities, rpm) */
  header.top { min-height: 50px !important; height: auto; padding: 0 12px !important; gap: 8px !important; }
  header.top .brand img { height: 24px !important; width: auto; }
  header.top .brand b, header.top .brand > span, header.top .brand .t, header.top h1 { font-size: 14px !important; }
  header.top .brand .s { display: none !important; }
  header.top .btn .lg { display: none !important; }
  header.top .btn, header.top .ibtn, header.top .ib, header.top .dark-btn { min-height: 32px; height: 32px; width: auto; min-width: 32px; padding: 0 8px !important; border-radius: 8px !important; font-size: 12px !important; }

  /* document pages and repairs: the .topbar */
  .topbar { min-height: 52px !important; padding: 0 12px !important; gap: 8px !important; }
  .topbar .tb-title { font-size: 14px !important; }
  .topbar .tb-sub { font-size: 11px !important; }
  .topbar .brand { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar .back-btn { font-size: 12px !important; padding: 6px 10px !important; white-space: nowrap; }

  /* page heads that carry their own title */
  header.phead h1, .ps-head h1, .topbar-title, header.hd .ttl { font-size: 18px !important; line-height: 1.2; }
  header.phead p, .ps-sub, header.hd .sub { font-size: 12px !important; }
  header.phead { padding: 10px 0 6px !important; }

  /* greetings and page titles inside content */
  .greeting, .greeting-name { font-size: 20px !important; line-height: 1.2; margin-bottom: 2px !important; }
  .greeting-sub, .page-sub, .subtitle { font-size: 12.5px !important; }
  .page h1, .page-wrap > h1, main > h1, .container > h1, .page-head h1, .page-head .page-title, .cmd-row h1 { font-size: 20px !important; line-height: 1.2 !important; margin-bottom: 2px !important; }
  .page-head .subtitle, .page-head .grow .subtitle { font-size: 12.5px !important; line-height: 1.35; }
  .page { padding: 14px 14px 72px !important; }
  .greeting { margin-bottom: 2px !important; }
  .greeting + * { margin-top: 0 !important; }

  /* ── 2. KPI strip ──────────────────────────────────────────────────────── */
  /* every "four big tiles" block becomes one swipeable row of compact stats:
     Reports (.summary-cards), NCR (#admin-ncr-summary),
     Schedule (.ps-metrics), Attendance (#strip.metrics), Documents (#stat-strip),
     Truck dashboard (.sum-grid), Repairs (#frm-kpis > div) */
  .summary-cards, #admin-ncr-summary, .ps-metrics, #strip.metrics, #stat-strip.stats, .sum-grid, #frm-kpis > div {
    display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    gap: 8px !important; padding: 2px 0 6px !important; margin: 0 0 10px !important; scrollbar-width: none;
  }
  .summary-cards::-webkit-scrollbar, #admin-ncr-summary::-webkit-scrollbar, .ps-metrics::-webkit-scrollbar, #strip.metrics::-webkit-scrollbar, #stat-strip.stats::-webkit-scrollbar, .sum-grid::-webkit-scrollbar, #frm-kpis > div::-webkit-scrollbar { display: none; }
  .summary-cards > *, #admin-ncr-summary > *, .ps-metrics > *, #strip.metrics > *, #stat-strip.stats > *, .sum-grid > *, #frm-kpis > div > * {
    flex: 0 0 auto !important; width: auto !important; min-width: 118px; max-width: 176px; min-height: 0 !important; height: auto !important;
    display: flex !important; flex-direction: column; justify-content: center; gap: 2px;
    padding: 8px 10px !important; margin: 0 !important; border-radius: 8px !important; box-shadow: none !important;
    border: 1px solid var(--m-line) !important; scroll-snap-align: start; text-align: left !important;
  }
  /* numbers and labels inside the strip */
  .s-num, .bik-stat-value, .ps-metric b, .ps-metric .n, .sum-num, #stat-strip .stat b, #stat-strip .stat .n, #frm-kpis strong, #frm-kpis b, #strip.metrics .mv b {
    font-size: 18px !important; line-height: 1.15 !important; margin: 0 !important;
  }
  .s-lbl, .bik-stat-label, .sum-lbl, #stat-strip .stat span:not(.ic), #frm-kpis span, #strip.metrics .ml, .ps-metric span, .ps-metric small {
    font-size: 10px !important; letter-spacing: .4px; line-height: 1.25 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important;
  }
  #strip.metrics .ms, .ps-metric .sub, #frm-kpis small { font-size: 10px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #stat-strip .stat .ic { display: none !important; }
  /* NCR tiles keep their colour as a 3px left edge */
  #admin-ncr-summary > .bik-stat { border-left: 3px solid var(--stat-color, var(--m-maroon)) !important; }
  /* dashboards that place a colour bar + big number */
  #frm-kpis > div > * > div:first-child { display: none; }

  /* attendance strip: its own grid of 5 bordered cells becomes the same strip; the mini chart stays */
  #strip.metrics .metric { border: 1px solid var(--m-line) !important; }
  #strip.metrics .metric .mv { gap: 4px !important; }
  #strip.metrics .metric .mv small { font-size: 10px !important; }
  #strip.metrics .metric .khist { height: 26px !important; }

  /* analytics: four KPI cards as a 2×2 of compact cards instead of a swipe of 500px cards */
  #kpis.kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 10px !important; padding: 0 !important; overflow: visible !important; }
  #kpis.kpis > .kpi { min-width: 0 !important; width: auto !important; flex: none !important; padding: 10px 12px !important; border-radius: 8px !important; box-shadow: none !important; }
  #kpis.kpis .card-h { margin-bottom: 2px !important; flex-wrap: nowrap !important; gap: 6px !important; min-height: 0 !important; }
  #kpis.kpis .card-h .card-t { flex: 1 1 auto; min-width: 0; }
  #kpis.kpis .card-h .sp { display: none; }
  #kpis.kpis .card-h .more { flex: 0 0 auto; font-size: 11px !important; white-space: nowrap; }
  #kpis.kpis .card-h .info { flex: 0 0 auto; }
  #kpis.kpis .card-t { font-size: 10px !important; letter-spacing: .4px; white-space: normal !important; line-height: 1.2; }
  #kpis.kpis .kpi-num { font-size: 20px !important; line-height: 1.1 !important; }
  #kpis.kpis .kpi-num small, #kpis.kpis .kpi-num span { font-size: 11px !important; }
  #kpis.kpis .spark { width: 56px !important; height: 22px !important; }
  #kpis.kpis .kpi-d, #kpis.kpis .kpi-cap { font-size: 10.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #kpis.kpis .kpi .info, #kpis.kpis .kpi .details, #kpis.kpis .kpi a.card-link { font-size: 11px !important; }

  /* ── 3. toolbars ───────────────────────────────────────────────────────── */
  /* known filter and action bars: compact controls, tight gaps; row layout stays the page's own */
  .log-filters, .cmd-in .cmd-row, .cmd-in .cmd-tools, .toolbar, .toolbar-left, .toolbar-right, .page-head, .ps-head-actions, .tools, .sh .row, #filters.ttb, .filters, #assign-bar, #pq-toolbar, #pq-toolbar > div, .fbar, .filter-bar {
    gap: 6px 8px !important;
  }
  .log-filters > input, .log-filters > select, .log-filters > button, .log-filters > label,
  .cmd-in button, .cmd-in select, .cmd-in .seg, .toolbar .btn, .toolbar .icon-btn, .toolbar select,
  .page-head .btn, .ps-head-actions .btn, .ps-head-actions button, .ps-search, .tools .flt, .tools .btn, .tools .search,
  #filters.ttb .chipf, #filters.ttb button, #filters.ttb select, .filters .filter-sel, .filters .filter-search,
  #assign-bar select, #assign-bar button, #pq-toolbar input, #pq-toolbar button {
    min-height: 34px; box-sizing: border-box; padding-top: 6px !important; padding-bottom: 6px !important;
    font-size: 12.5px !important; border-radius: 8px !important;
  }
  .log-filters > input, .log-filters > select, .filters .filter-sel, #assign-bar select, #pq-toolbar input { padding-left: 10px !important; padding-right: 10px !important; }
  .log-filters > input[type="search"] { min-width: 0 !important; flex: 1 1 100% !important; }
  .page-head { flex-wrap: wrap; }
  .page-head .page-title { flex: 1 1 100%; }
  .page-head .btn { flex: 1 1 calc(50% - 4px); justify-content: center; white-space: nowrap; }
  .page-head .btn.primary { flex-basis: 100%; }
  .page-sub { margin: 4px 0 10px !important; }
  .page-head + .stats, .page-head + #stat-strip, #stat-strip.stats { margin-top: 10px !important; }
  .page-head .grow .subtitle { margin-bottom: 4px; }

  /* ── chat launcher: a smaller round bubble in the bottom-right corner ── */
  #bkm-launch { width: 46px !important; height: 46px !important; bottom: 16px !important; right: 16px !important; box-shadow: 0 4px 14px rgba(102,37,40,0.30) !important; }
  #bkm-launch svg { width: 20px; height: 20px; }
  #wo-list { padding-bottom: 64px; }   /* the last card can scroll clear of the bubble */

  /* keyboard hints ("Enter to save · Esc to cancel") mean nothing on a phone keyboard: Priorities note, Unit Movements note */
  .noteinp > small { display: none !important; }
  .nh > span:not(.err) { display: none !important; }

  /* ── 4. tap targets and quiet chrome ───────────────────────────────────── */
  .icon-btn, .ibtn, .ib { min-width: 32px; min-height: 32px; }
  /* iOS zooms the page into any field under 16px the moment it gets focus, and
     the app's web view does not always zoom back out. The viewport cap never
     stopped that; 16px on every field does. */
  /* :not(#_) lends id-level specificity, so page rules like `#wo-search { font-size: 12.5px !important }` no longer win */
  input:not(#_):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select:not(#_), textarea:not(#_) { font-size: 16px !important; }
  input, select, textarea { -webkit-text-size-adjust: 100%; }

  /* ── 5. one Back control everywhere (inserted by bikops.js) ───────────── */
  /* the chevron takes the header's own text colour: white on the maroon headers, dark on the white ones */
  .bik-back { order: -1; flex: none; width: 36px; height: 36px; margin-right: 4px; border: 1px solid rgba(127,127,127,.35); border-radius: 10px; background: rgba(127,127,127,.10); color: inherit; font: 700 24px/1 'Inter', -apple-system, sans-serif; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 3px; cursor: pointer; }
  .bik-back-row { display: flex; align-items: center; height: 44px; padding: 0 12px; background: var(--bg-white, #fff); border-bottom: 1px solid rgba(15,23,42,.10); position: sticky; top: 0; z-index: 60; }
  .bik-back-row .bik-back { margin: 0; }
  .bik-pop-back { position: fixed; top: 0; left: 0; right: 0; height: calc(44px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: flex; align-items: center; background: #fff; border-bottom: 1px solid rgba(15,23,42,.12); z-index: 2147483000; }
  body.dark .bik-pop-back { background: #15181E; border-bottom-color: #262B34; }
  .bik-pop-back-btn { border: 0; background: none; color: #662528; font: 700 15px 'Inter', -apple-system, sans-serif; padding: 0 14px; height: 44px; cursor: pointer; }
  body.dark .bik-pop-back-btn { color: #F2A7AC; }
  .bik-has-back { padding-top: calc(48px + env(safe-area-inset-top)) !important; }

  /* ── 6. checklist rows (First / Arrival / Final PDI, Load & Hyd, Load Test) ──
     Desktop puts the status select in a 150px column beside the item text; at
     393px the 16px select (222px wide) ran over the text. One column instead:
     checkbox + text, then the status select full width, then notes, verify row
     and the comment / photo footer. The row's inline column div is flattened
     with display:contents so its children can be ordered. */
  .item-row:has(> div[style*="min-width:150px"]) { flex-wrap: wrap !important; gap: 8px 10px !important; align-items: center !important; }
  .item-row:has(> div[style*="min-width:150px"]) > div[style*="flex:1"] { display: contents; }
  .item-row:has(> div[style*="min-width:150px"]) > div[style*="flex:1"] > .item-text { order: 1; flex: 1 1 calc(100% - 32px); min-width: 0; }
  .item-row:has(> div[style*="min-width:150px"]) > div[style*="min-width:150px"] { order: 2; flex: 1 1 100% !important; min-width: 0 !important; flex-direction: row !important; align-items: center !important; justify-content: space-between; gap: 8px !important; }
  .item-row:has(> div[style*="min-width:150px"]) .status-sel { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .item-row:has(> div[style*="min-width:150px"]) > div[style*="flex:1"] > :not(.item-text) { order: 3; flex: 1 1 100%; min-width: 0; }
  .item-row:has(> div[style*="min-width:150px"]) > div[style*="flex:1"] > div[style*="border-top:1px dashed"] { margin-top: 2px !important; }
  /* the comment composer (input + camera + Submit) takes its own full line under the action chips */
  .item-row:has(> div[style*="min-width:150px"]) > div[style*="flex:1"] > div[style*="border-top:1px dashed"] > div > div[style*="min-width:200px"] { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100%; }
}