/* =============================================================================
   MGMT-MOBILE-20261024 — Shop Management, phone-first (Donny, 2026-10-24:
   "make the shop management mobile phone app version… it looks extremely
   ugly and needs to be well put together for technician, service advisors
   and management").

   What this file does (everything scoped to <=860px unless noted):
   - A bottom TAB BAR inside Shop Management (.mgmt-tabbar, built by
     mgmt-shell.js, role-tailored items) — the phone pattern; the drawer
     (☰ / "More") keeps the FULL nav, so no feature becomes unreachable.
   - While Shop Management is open on a phone, the app's own bottom tab
     bar + floating buttons hide (body.mgmt-open, set by mgmt-shell.js) so
     Shop Management reads as its own full-screen app.
   - Topbar slimmed so brand + chat + search + avatar + Done + ✕ actually
     fit 360px (before: ~440px of non-shrinkable content in ~250px of room,
     buttons overlapped the brand and each other).
   - The dashboard grids finally collapse (mgmt-theme.css's media queries
     targeted a class that doesn't exist — .mgmt-grid vs the real .mg-grid):
     stat tiles 2-up, panels stack.
   - Desktop TABLES become CARDS (Calls .mg-table, RO table view
     .rep-table, Customers .svc-table, Ops .ops-table): no horizontal
     scrolling anywhere; every value stays on the card.
   - Every tap target >=44px, set explicitly in-file (the .smp-* launcher
     pattern) instead of relying on global rescue rules that ID-scoped
     font sizes defeat; main inputs get 16px type (no iOS focus zoom).
   - The triple padding squeeze (mgmt-main 12 + svcBody 14 + svc-main 16
     = ~306px of content at 390px) is cut roughly in half.

   Desktop (>860px) is untouched: every rule below lives in the phone
   media query, and .mgmt-tabbar is display:none outside it.
   Colors come from the existing tokens (--mgmt-*, --rep-*), which the
   MGMT-COLORS-20261024 block already remaps for dark — dark variants of
   the few hard surfaces are declared explicitly under [data-theme="dark"].
   ========================================================================== */

/* The tab bar exists in the DOM at all widths (mgmt-shell builds it into
   the overlay's flex column) but only displays on phones. */
#serviceOverlay .mgmt-tabbar { display: none; }

@media (max-width: 860px) {

  /* ---------- full-screen app feel: hide the main app's phone chrome --- */
  body.mgmt-open #mobileTabBar,
  body.mgmt-open #tdFab,
  body.mgmt-open #walkieFab,
  body.mgmt-open #chatFab { display: none !important; }

  /* ---------- bottom tab bar ------------------------------------------- */
  #serviceOverlay .mgmt-tabbar {
    display: flex; flex: 0 0 auto; align-items: stretch;
    background: var(--mgmt-card); border-top: 1px solid var(--mgmt-border);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 30;
  }
  #serviceOverlay .mgmt-tab {
    flex: 1 1 0; min-width: 0; min-height: 58px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px 6px;
    background: none; border: none; border-top: 2px solid transparent;
    color: var(--mgmt-muted); cursor: pointer; position: relative;
    font-size: 11px; font-weight: 600; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  #serviceOverlay .mgmt-tab svg { width: 21px; height: 21px; }
  #serviceOverlay .mgmt-tab .mgmt-tab-label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #serviceOverlay .mgmt-tab.is-active { color: #7a5f1e; border-top-color: #c9a53f; }
  #serviceOverlay .mgmt-tab:active { background: rgba(201, 165, 63, .10); }
  #serviceOverlay .mgmt-tab .mgmt-tab-badge {
    position: absolute; top: 5px; right: calc(50% - 20px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #d33; color: #fff; font-size: 10.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--mgmt-card);
  }
  [data-theme="dark"] #serviceOverlay .mgmt-tabbar { background: #171717; border-top-color: #2a2a2a; }
  [data-theme="dark"] #serviceOverlay .mgmt-tab { color: #c3c9cf; }
  [data-theme="dark"] #serviceOverlay .mgmt-tab.is-active { color: #c9a53f; border-top-color: #c9a53f; }
  [data-theme="dark"] #serviceOverlay .mgmt-tab .mgmt-tab-badge { border-color: #171717; }

  /* ---------- topbar: make it fit --------------------------------------- */
  #serviceOverlay .mgmt-topbar {
    height: 56px; gap: 4px; padding: 0 50px 0 4px;
  }
  #serviceOverlay .mgmt-topbar .mgmt-iconbtn { width: 44px; height: 44px; flex: 0 0 auto; }
  #serviceOverlay .mgmt-brand { font-size: 15px; min-width: 0; overflow: hidden; }
  #serviceOverlay .mgmt-brand small { display: none; }
  #serviceOverlay .mgmt-search {
    flex: 0 0 44px; width: 44px; height: 44px; margin: 0;
    padding: 0; justify-content: center; border-radius: 50%;
  }
  #serviceOverlay .mgmt-search svg { width: 19px; height: 19px; }
  #serviceOverlay .mgmt-chatbtn {
    width: 44px; height: 44px; min-width: 44px; padding: 0; margin-left: 0;
    justify-content: center; border-radius: 50%; font-size: 16px;
  }
  #serviceOverlay .mgmt-user { flex: 0 0 auto; }
  #serviceOverlay .mgmt-user .mgmt-avatar { width: 32px; height: 32px; }
  #serviceOverlay .mgmt-topbar .btn { min-height: 44px; padding: 10px 13px; font-size: 13px; }

  /* ---------- dark: the svc surface tokens never reach phones -------------
     Measured on the live tree (dark probe): with data-theme="dark",
     getComputedStyle(#serviceOverlay).--rep-bg returns the LIGHT #eef0f3
     even though dark-mode.css carries the MGMT-COLORS remap — so the whole
     Service content area (#svcBody / .svc-main, painted var(--rep-bg))
     stayed a light slab inside the dark app on phones. This block
     re-declares the colors package's own intended dark values at phone
     scope (this sheet loads last); values copied verbatim from
     dark-mode.css's MGMT-COLORS block so the pairs are the audited ones. */
  [data-theme="dark"] #serviceOverlay {
    --rep-bg: #0a0a0a; --rep-card: #171717; --rep-ink: #ffffff; --rep-muted: #c3c9cf;
    --rep-line: #2a2a2a; --rep-navy: #000000; --rep-navy-2: #1c1c1c;
    --rep-blue: #6cb2f5; --rep-blue-dark: #6cb2f5; --rep-sky: #12283f;
    --rep-orange: #c9a53f; --rep-green: #2fae62; --rep-amber: #e0a83c; --rep-red: #ff7a7a;
  }

  /* ---------- layout: cut the nested padding squeeze -------------------- */
  #serviceOverlay .mgmt-main { padding: 12px 12px 30px; }
  #serviceOverlay #svcBody { padding: 10px; }
  #serviceOverlay .svc-main { padding: 12px 10px; }
  #serviceOverlay .svc-panel { padding: 12px; }
  #serviceOverlay .mg-card { padding: 13px; }

  /* ---------- page heads -------------------------------------------------- */
  #serviceOverlay .parts-dash-header { padding-bottom: 10px !important; margin-bottom: 10px !important; }
  #serviceOverlay .parts-dash-header h1 { font-size: 19px !important; }
  #serviceOverlay .mg-pagehead { margin-bottom: 12px; }
  #serviceOverlay .mg-pagehead h2 { font-size: 19px; }

  /* ---------- dashboard: grids actually collapse -------------------------- */
  #serviceOverlay .mg-grid.cols-4,
  #serviceOverlay .mg-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #serviceOverlay .mg-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #serviceOverlay .mg-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
  #serviceOverlay .mg-grid { gap: 10px; }
  #serviceOverlay .mg-stat .mg-stat-label { font-size: 12px; }
  #serviceOverlay .mg-stat .mg-stat-value { font-size: 26px; }
  #serviceOverlay .mg-stat .mg-stat-hint { font-size: 12px; }
  #serviceOverlay .mgmt-chatcard { flex-wrap: wrap; }
  #serviceOverlay .mgmt-chatcard [data-mgmt-chat] { flex: 1 1 100%; min-height: 48px; }
  #serviceOverlay .mg-row { min-height: 52px; padding: 11px 6px; font-size: 13.5px; }
  #serviceOverlay .mg-alert { padding: 12px; font-size: 13.5px; }

  /* ---------- buttons + inputs: real targets, no focus zoom --------------- */
  #serviceOverlay .mg-btn { min-height: 44px; padding: 10px 14px; }
  #serviceOverlay .mg-btn-sm { min-height: 44px; padding: 9px 12px; font-size: 12.5px; }
  #serviceOverlay .btn { min-height: 44px; }
  #serviceOverlay .svc-fbtn { min-height: 44px; padding: 10px 14px; font-size: 13.5px; }
  #serviceOverlay .svc-search,
  #serviceOverlay .mg-input,
  #serviceOverlay .mg-select {
    min-height: 48px; font-size: 16px; padding: 11px 12px;
  }
  #serviceOverlay .svc-doc input:not([type="checkbox"]):not([type="radio"]),
  #serviceOverlay .svc-doc select, #serviceOverlay .svc-doc textarea,
  #serviceOverlay .svc-sheet input:not([type="checkbox"]):not([type="radio"]),
  #serviceOverlay .svc-sheet select, #serviceOverlay .svc-sheet textarea,
  #serviceOverlay .mg-callnotes input:not([type="checkbox"]):not([type="radio"]),
  #serviceOverlay .mg-callnotes select, #serviceOverlay .mg-callnotes textarea {
    min-height: 48px; font-size: 16px;
  }
  #serviceOverlay input[type="checkbox"], #serviceOverlay input[type="radio"] {
    width: 20px; height: 20px; flex: 0 0 auto;
  }
  #serviceOverlay .mg-tab { min-height: 44px; padding: 11px 14px; }

  /* ---------- drawer nav: full-size rows ----------------------------------- */
  #serviceOverlay .mgmt-side { width: min(300px, 85vw); }
  #serviceOverlay .mgmt-nav-item { min-height: 48px; padding: 12px 10px; font-size: 14.5px; }
  #serviceOverlay .mgmt-nav-sec-head { min-height: 44px; font-size: 11px; }
  #serviceOverlay .mg-badge { font-size: 11.5px; }
  #serviceOverlay .mgmt-nav-item .mgmt-count { font-size: 11.5px; }

  /* ---------- svc home: toolbars, board, cards ------------------------------ */
  #serviceOverlay .svc-sectionhead h3 { font-size: 18px; }
  #serviceOverlay .svc-viewtoggle { display: flex; gap: 6px; width: 100%; }
  #serviceOverlay .svc-viewtoggle .svc-fbtn { flex: 1 1 0; }
  #serviceOverlay .svc-toolbar .svc-search { flex: 1 1 100%; max-width: none; }
  #serviceOverlay .svc-toolbar .btn { flex: 1 1 42%; min-height: 48px; }
  #serviceOverlay .svc-stage-switcher button { min-height: 48px; font-size: 12.5px; }
  #serviceOverlay .svc-colhead { font-size: 12.5px; }
  #serviceOverlay .svc-bcard { padding: 13px 14px; }
  #serviceOverlay .svc-bcard-cust { font-size: 15px; }
  #serviceOverlay .svc-card { padding: 14px; min-height: 56px; }
  #serviceOverlay .svc-aging { padding: 10px 12px; font-size: 13px; flex-wrap: wrap; }
  /* board footer ("Showing N of M ROs · Load more · Export CSV"): the
     buttons are inline in a text line on desktop; at phone widths the
     44px button floor makes them overlap the wrapped text — lay the
     footer out as a wrapped flex row instead. */
  #serviceOverlay .svc-hint {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12.5px; line-height: 1.45; margin-top: 12px;
  }
  #serviceOverlay .svc-hint .btn { flex: 0 0 auto; }

  /* ---------- TABLES -> CARDS (no horizontal scrolling, nothing hidden) --- */
  #serviceOverlay .rep-tablewrap {
    overflow: visible; background: transparent; border: none; border-radius: 0;
  }
  #serviceOverlay .svc-tablewrap { overflow-x: visible; }
  #serviceOverlay table.mg-table,
  #serviceOverlay table.rep-table,
  #serviceOverlay table.svc-table { display: block; width: 100%; }
  #serviceOverlay table.mg-table thead,
  #serviceOverlay table.rep-table thead,
  #serviceOverlay table.svc-table thead { display: none; }
  #serviceOverlay table.mg-table tbody,
  #serviceOverlay table.rep-table tbody,
  #serviceOverlay table.svc-table tbody { display: block; }
  #serviceOverlay table.mg-table tr,
  #serviceOverlay table.rep-table tr,
  #serviceOverlay table.svc-table tr {
    display: block; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  }
  #serviceOverlay table.mg-table tr { background: var(--mgmt-card); border: 1px solid var(--mgmt-border); }
  #serviceOverlay table.rep-table tr,
  #serviceOverlay table.svc-table tr { background: var(--rep-card); border: 1px solid var(--rep-line); }
  #serviceOverlay table.mg-table td,
  #serviceOverlay table.rep-table td,
  #serviceOverlay table.svc-table td {
    display: block; padding: 2px 0; border-bottom: none;
    text-align: left; white-space: normal; min-height: 0;
  }
  #serviceOverlay table.mg-table td:empty,
  #serviceOverlay table.rep-table td:empty,
  #serviceOverlay table.svc-table td:empty { display: none; }
  /* Calls (mg-table): When | Dir | Caller | Ext | Purpose | Job | Follow-up */
  #serviceOverlay table.mg-table td:nth-child(1) { color: var(--mgmt-muted); font-size: 12px; }
  #serviceOverlay table.mg-table td:nth-child(2) { display: inline-block; margin-right: 8px; font-weight: 700; }
  #serviceOverlay table.mg-table td:nth-child(3) { font-weight: 700; font-size: 15px; }
  #serviceOverlay table.mg-table td:nth-child(4) { color: var(--mgmt-muted); font-size: 12.5px; }
  #serviceOverlay table.mg-table td:nth-child(7) { margin-top: 8px; }
  #serviceOverlay table.mg-table td .mg-num { text-align: left; }
  /* RO table view (rep-table) */
  #serviceOverlay table.rep-table .rep-num { font-size: 15.5px; }
  #serviceOverlay table.rep-table .rep-cust { font-size: 15px; }
  #serviceOverlay table.rep-table .rep-total {
    text-align: left; font-size: 16px; border-top: 1px dashed var(--rep-line);
    margin-top: 6px; padding-top: 7px;
  }
  /* Customers / 360 (svc-table) */
  #serviceOverlay table.svc-table td:first-child { font-weight: 700; font-size: 14.5px; }
  #serviceOverlay table.svc-table td .btn,
  #serviceOverlay table.svc-table td button { min-height: 44px; min-width: 44px; }

  /* ---------- document views (RO / quote / invoice detail) ----------------- */
  #serviceOverlay .rep-hero { padding: 14px; }
  #serviceOverlay .rep-hero-num { font-size: 21px; }
  #serviceOverlay .rep-hero-actions { margin-left: 0; width: 100%; }
  #serviceOverlay .rep-hero-actions .btn { flex: 1 1 42%; min-height: 48px; }
  #serviceOverlay .svc-backrow { flex-wrap: wrap; gap: 8px; }
  #serviceOverlay .svc-line { flex-wrap: wrap; padding: 10px 2px; }
  #serviceOverlay .svc-line-amt { margin-left: auto; }
  #serviceOverlay .svc-line-del, #serviceOverlay .svc-line-edit { min-width: 44px; min-height: 44px; }
  #serviceOverlay .svc-totals { position: static; }
  #serviceOverlay .svc-sheet { padding: 12px; }
  #serviceOverlay .svc-kindtabs { display: flex; gap: 6px; flex-wrap: wrap; }
  #serviceOverlay .svc-kindtabs .svc-fbtn,
  #serviceOverlay .svc-kindtabs button { flex: 1 1 0; min-height: 44px; }
  #serviceOverlay .svc-cols { grid-template-columns: 1fr; }
  #serviceOverlay .field-row { grid-template-columns: 1fr !important; }
  #serviceOverlay .rep-act-row { flex-wrap: wrap; }
  #serviceOverlay .rep-act-when { min-width: 0; }

  /* ---------- call notes ----------------------------------------------------- */
  #serviceOverlay .mg-callnotes { padding-bottom: 16px; }
  #serviceOverlay .mg-callnotes-filters { grid-template-columns: 1fr; }
  #serviceOverlay .mg-callnotes .mg-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  #serviceOverlay .mg-callnotes-pager { display: flex; gap: 8px; }
  #serviceOverlay .mg-callnotes-pager button { flex: 1 1 0; min-height: 44px; }
  #serviceOverlay .mg-callnotes-banner { padding: 12px; font-size: 13px; }

  /* ---------- messages slide-over --------------------------------------------- */
  .svc-msg-panel { width: 100vw; }

  /* =============================================================================
     Sibling overlays reached FROM Shop Management (own roots, same phone rules)
     ========================================================================== */

  /* ---------- Shop Settings ---------------------------------------------------- */
  #shopSettingsOverlay .ss-btn { height: 44px; min-height: 44px; }
  #shopSettingsOverlay .ss-card { min-height: 64px; }
  #shopSettingsOverlay .ss-field input[type="text"],
  #shopSettingsOverlay .ss-field input[type="number"],
  #shopSettingsOverlay .ss-field input[type="password"],
  #shopSettingsOverlay .ss-field select,
  #shopSettingsOverlay .ss-panel textarea { min-height: 48px; font-size: 16px; }
  #shopSettingsOverlay .ss-field input[type="time"] { min-height: 44px; font-size: 14px; padding: 8px 6px; }
  #shopSettingsOverlay .ss-dayrow { grid-template-columns: 74px 1fr 1fr; gap: 7px; }
  #shopSettingsOverlay .ss-check { min-height: 40px; }
  #shopSettingsOverlay .ss-check input { width: 20px; height: 20px; }

  /* ---------- Ops Hub (Scheduler / Inventory / Inspections / Canned / Reports) - */
  #opsHubOverlay .ops-close { min-height: 44px; padding: 10px 16px; }
  #opsHubOverlay .ops-tab { min-height: 48px; }
  #opsHubOverlay .ops-btn, #opsHubOverlay .ops-btn-ghost, #opsHubOverlay .ops-btn-danger {
    min-height: 44px; padding: 10px 14px;
  }
  #opsHubOverlay .ops-field input, #opsHubOverlay .ops-field select,
  #opsHubOverlay .ops-sched-filters select { min-height: 44px; }
  #opsHubOverlay .ops-field input, #opsHubOverlay .ops-field select { font-size: 16px; }
  #opsHubOverlay .ops-status-btns { display: flex; gap: 6px; }
  #opsHubOverlay .ops-status-btns button { flex: 1 1 0; min-height: 44px; font-size: 12.5px; }
  #opsHubOverlay .ops-dvi-item { flex-wrap: wrap; }
  #opsHubOverlay .ops-sched-date { min-width: 0; }
  #opsHubOverlay .ops-agenda-time { min-width: 92px; }
  #opsHubOverlay .ops-agenda-main { min-width: 0; }
  #opsHubOverlay .ops-modal .ops-form-grid { grid-template-columns: 1fr; }
  /* ops tables -> cards, same treatment as the svc tables */
  #opsHubOverlay .ou-scroll { overflow-x: visible; }
  #opsHubOverlay table.ops-table { display: block; width: 100%; }
  #opsHubOverlay table.ops-table thead { display: none; }
  #opsHubOverlay table.ops-table tbody { display: block; }
  #opsHubOverlay table.ops-table tr {
    display: block; background: #fff; border: 1px solid #dfe3e8;
    border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  }
  [data-theme="dark"] #opsHubOverlay table.ops-table tr { background: #171717; border-color: #2a2a2a; }
  #opsHubOverlay table.ops-table td {
    display: block; padding: 2px 0; border-bottom: none; text-align: left; white-space: normal;
  }
  #opsHubOverlay table.ops-table td:empty { display: none; }
  #opsHubOverlay table.ops-table td .ops-btn,
  #opsHubOverlay table.ops-table td button { min-height: 44px; }
}