/* ════════════════════════════════════════════════════════════════
   Busco Ops — Mobile enhancements + sticky-form fix + RTL overrides
   Layered on top of styles.css (loaded after, so these win the
   cascade). Keeps all desktop behaviour identical.
   ════════════════════════════════════════════════════════════════ */

/* ── Stacked layouts (incl. warehouse single-section view): the daily-log
      form gets `position: sticky; top: 180` inline, which on stacked
      single-column views covers the recent-entries table below. Kill it. ── */
@media (max-width: 1024px) {
  .content .card[style*="sticky"],
  .content .card[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Aggressive layout collapsing on tablet too (not just phone)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Force EVERY inline grid template down to single column — applies
     to ClientsScreen / CouriersScreen card grids, KPI rows inside
     drawers, multi-col detail panels, etc. */
  .content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Let the collapsed column actually shrink: grid/flex items default to
     min-width:auto, so a wide child (e.g. a data table) blows the 1fr track
     past the viewport and gets clipped. min-width:0 lets it fit. */
  .content [style*="grid-template-columns"] > * { min-width: 0 !important; }
  /* Prevent the page from getting wider than the viewport */
  body, .app { overflow-x: hidden; max-width: 100vw; }
  .content { max-width: 100%; overflow-x: hidden; }
}

@media (max-width: 720px) {
  /* Tables: let them shrink to fit the viewport (cells cramp but the
     whole page stops being horizontally scrollable) */
  .tbl-wrap { overflow-x: auto; }
  table.data { min-width: 100%; }
  table.data th, table.data td { padding: 7px 6px; font-size: 11.5px; white-space: nowrap; }
  table.data th { font-size: 9.5px; padding: 8px 6px; }

  /* Cards / drawers fully use the viewport */
  .card, .modal, .drawer { max-width: 100%; }

  /* Forms: prevent horizontal scroll caused by wide inputs */
  .field input, .field select, .field textarea { max-width: 100%; box-sizing: border-box; }
}

/* ════════════════════════════════════════════════════════════════
   RTL: when html gets dir="rtl" (Arabic / Urdu)
   ════════════════════════════════════════════════════════════════
   Strategy: dir="rtl" already auto-flips flex/grid items. We only
   need to:
     1. Fix text-align where it's hardcoded left
     2. Reposition elements pinned with `position: absolute` to one side
     3. Swap padding/margin offsets where the flip looks wrong
   We DO NOT touch flex-direction — that would un-flip the natural
   reordering that dir="rtl" gives us.
   ──────────────────────────────────────────────────────────────── */
html[dir="rtl"] body { text-align: right; }

/* Text alignment in containers that explicitly set text-align: left
   (or have a font/style that needs nudging) */
html[dir="rtl"] .ch-l,
html[dir="rtl"] .card-head .ch-l h3,
html[dir="rtl"] .card-head .ch-l .ch-sub,
html[dir="rtl"] .um-name, html[dir="rtl"] .um-email,
html[dir="rtl"] .user-chip .um,
html[dir="rtl"] .user-chip .un,
html[dir="rtl"] .user-chip .ur,
html[dir="rtl"] .um-item,
html[dir="rtl"] .um-item span,
html[dir="rtl"] .kpi,
html[dir="rtl"] .kpi .lbl, html[dir="rtl"] .kpi .sub,
html[dir="rtl"] .banner,
html[dir="rtl"] .dropzone,
html[dir="rtl"] .title-block, html[dir="rtl"] .title-block h1,
html[dir="rtl"] .subbar h1, html[dir="rtl"] .crumbs,
html[dir="rtl"] .pref-row { text-align: right; }

/* The styles.css has explicit `text-align: left` on .user-chip .um —
   that needs the !important to lose */
html[dir="rtl"] .user-chip .um { text-align: right !important; }

/* KPI icon is `position: absolute; top: 14px; right: 14px` — flip it */
html[dir="rtl"] .kpi .icon-spot { left: 14px; right: auto; }

/* Modal close X (top-right by default) → top-left in RTL */
html[dir="rtl"] .close-x { left: 12px !important; right: auto !important; }
html[dir="rtl"] .signin-x { left: 14px !important; right: auto !important; }

/* Slide-in drawer comes from the opposite side in RTL */
html[dir="rtl"] .slide-panel {
  right: auto; left: 0;
  border-left: 0;
  border-right: 1px solid var(--border);
}

/* Dropdowns / popovers anchored "right: 0" in LTR should be "left: 0" in RTL */
html[dir="rtl"] .user-menu { right: auto !important; left: 0; }
/* User menu items: avatar + text. In RTL, want avatar on the right, text on the left  */
html[dir="rtl"] .user-menu .um-head { flex-direction: row-reverse; }

/* Tables in RTL */
html[dir="rtl"] table.data th { text-align: right; }
html[dir="rtl"] table.data td:not(.num) { text-align: right; }

/* Tables in RTL */
html[dir="rtl"] table.data th { text-align: right; }
html[dir="rtl"] table.data td:not(.num) { text-align: right; }

/* Icons that point one direction need flipping in RTL */
html[dir="rtl"] svg .arrow-flip,
html[dir="rtl"] [class*="arrow-right"] svg,
html[dir="rtl"] [class*="chevron-right"] svg { transform: scaleX(-1); }

/* Numbers (mono font) always LTR for legibility — don't flip */
html[dir="rtl"] .mono { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Form labels and inputs: text-align right (Arabic reads R→L) */
html[dir="rtl"] .field label, html[dir="rtl"] .field input,
html[dir="rtl"] .field select, html[dir="rtl"] .field textarea { text-align: right; }
html[dir="rtl"] .field input.mono { text-align: left; direction: ltr; }

/* ── Phones (≤ 720px) ── */
@media (max-width: 720px) {

  /* Hide the dev-only tweaks panel + its launcher on phones */
  .twk-panel,
  .twk-toggle,
  .twk-shell,
  [class*="twk-launcher"] { display: none !important; }

  /* ── Convert the top sub-nav into a sticky bottom tab bar ── */
  .subnav {
    position: fixed;
    top: auto !important;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    padding: 6px 4px max(8px, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: 0 -2px 12px rgba(13, 17, 23, 0.06);
    z-index: 50;
    justify-content: space-around;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .subnav button {
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 10px 4px;
    min-width: 60px;
    font-size: 10.5px;
    line-height: 1.1;
    border-bottom: 0 !important;
    color: var(--muted-2);
    background: transparent !important;
    flex-shrink: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
  }
  .subnav button svg { width: 19px; height: 19px; opacity: 0.85; }
  .subnav button.on { color: var(--b700); }
  .subnav button.on svg { opacity: 1; }
  .subnav button.on::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--b500);
    border-radius: 0 0 4px 4px;
  }
  .subnav button .pin-tag { display: none; }

  /* Content needs to clear the bottom-nav */
  .content { padding-bottom: 88px !important; }

  /* Slide-in drawers respect the bottom-nav too */
  .slide-panel { padding-bottom: 88px; }

  /* Toast: pin above the bottom-nav, not under it */
  .toast { bottom: 80px !important; }

  /* ── Touch-friendly button minimums ── */
  .btn { min-height: 36px; }
  .btn.lg { min-height: 44px; }
  .btn.sm { min-height: 32px; }

  /* The Hub's KPI row already goes 2-col; tighten subtitle spacing */
  .kpi .lbl { font-size: 10px; }
  .kpi .sub { font-size: 10.5px; line-height: 1.3; }

  /* Card head wraps cleanly when actions overflow */
  .card-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .card-head .row-gap { width: 100%; justify-content: space-between; }

  /* Tweaks: any sticky elements (page bar) shouldn't double-stick */
  .subbar { position: relative; top: auto; }

  /* Recharts containers can sometimes overflow if their parent has padding;
     force a clean width clip */
  .recharts-wrapper { max-width: 100% !important; }

  /* Modal heads and bodies — tighter spacing */
  .modal-head { padding: 14px 16px 12px; }
  .modal-body { padding: 14px 16px 18px; }
}

/* ── Mobile-only fine-tuning ── */
@media (max-width: 720px) {

  /* PasteReportModal textarea is 320px desktop → too tall with keyboard up */
  .modal-body textarea[style*="min-height"] { min-height: 180px !important; }

  /* Sign-in card: not too tall */
  .signin-card { width: calc(100vw - 24px); max-width: 380px; }

  /* Client / Courier drawer becomes full-screen, with form fields stacking */
  .slide-panel .field-row.c2,
  .slide-panel .field-row.c3 { grid-template-columns: 1fr !important; }

  /* Action row buttons: don't let the labels squish below readable */
  .subbar .actions .btn { min-height: 34px; padding: 6px 12px; }

  /* Save-entry button in the daily log: more prominent on phones */
  .card .card-body .btn.primary.sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }

  /* Long client names truncate cleanly inside cards */
  .card-head h3,
  .strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* Hub's manual-upload dropzone — center the two action buttons */
  .dropzone > div[style*="flex"] { flex-direction: column !important; width: 100%; }
  .dropzone > div[style*="flex"] .btn { width: 100%; justify-content: center; }

  /* Daily-log entry form is sticky on desktop so it stays visible while
     scrolling the recent-entries table. On mobile that pin hides everything
     below the fold — let it scroll normally with the page. */
  .content .card[style*="sticky"] {
    position: relative !important;
    top: auto !important;
  }
}

/* ── Very narrow (≤ 380px) — tighten further ── */
@media (max-width: 380px) {
  .subnav button {
    min-width: 50px;
    padding: 6px 6px 3px;
    font-size: 9.5px;
  }
  .subnav button svg { width: 17px; height: 17px; }
  .content { padding-bottom: 82px !important; }
}

/* ── Hide bottom-nav scrollbar on Chrome/Safari without affecting touch scroll ── */
@media (max-width: 720px) {
  .subnav::-webkit-scrollbar { display: none; }
  .subnav { scrollbar-width: none; }
}

/* ── New-feature mobile fixes (June 2026) ── */
@media (max-width: 720px) {
  /* Financial sub-tabs (Overview · Clients P&L · Invoices · Courier Costs ·
     Cashflow) scroll horizontally instead of overflowing the screen. */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex-shrink: 0; }

  /* Invoice summary box and reconciliation cells use the full width. */
  .card-body > div[style*="min-width: 280"] { min-width: 0 !important; width: 100%; }

  /* The catch-all single-column rule turns the rate-editor & invoice
     line-item grids vertical; keep their inputs full-width and readable. */
  .content [style*="repeat(4, 1fr)"] input,
  .content [style*="repeat(4, 1fr)"] select { width: 100% !important; }
}

/* RTL: logical margins on the new banners/cards already flip correctly.
   Just make sure the multi-select trigger chevron sits on the correct side. */
html[dir="rtl"] .ms-trigger { text-align: right; }

/* ════════════════════════════════════════════════════════════════
   Mobile pass 2 — workspace switching + overflow fixes (June 2026)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ── Workspace chip: styles.css hides it on phones — bring it back
        in compact form so regions can be switched on mobile. ── */
  .workspace-chip {
    display: inline-flex !important;
    padding: 4px 9px;
    font-size: 11px;
    gap: 5px;
    max-width: 38vw;
  }
  .workspace-chip > span:not(.ws-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* Its dropdown: pin to the viewport so it never runs off-screen
     (the chip sits mid-header; an anchored 264px popover would overflow) */
  .dropdown-wrap .menu-pop {
    position: fixed;
    left: 12px !important;
    right: 12px !important;
    top: 76px;
    width: auto !important;
  }

  /* ── Section header rows (search + filters + buttons) were a fixed
        non-wrapping flex row — the main cause of pages being "too wide".
        Let them wrap onto extra lines instead. ── */
  .sec { flex-wrap: wrap; }
  .sec .sec-right {
    flex-wrap: wrap;
    row-gap: 8px;
    max-width: 100%;
    justify-content: flex-start;
  }

  /* Courier search box (inline width: 240) → full width on its own line */
  .content .global-search { width: 100% !important; }

  /* HR employment-model segmented (inline width: 320) and similar → fluid */
  .content .segmented[style*="width: 320"] { width: 100% !important; }

  /* Page-bar action rows wrap rather than push the page wider */
  .subbar { flex-wrap: wrap; row-gap: 8px; }
  .subbar .actions { flex-wrap: wrap; row-gap: 6px; }

  /* Catch-all: nothing inside content may exceed the viewport */
  .content > * { max-width: 100%; }
  .card-body { overflow-x: hidden; }
  .card-body .tbl-wrap { overflow-x: auto; }
}