/* mobile.css — phones and tablets, loaded after style.css and the inline
   styles in app.html so it wins where it has to.

   The menu button (#navToggle, top-left) does two jobs:
     wide screens  → folds the sidebar to an icon strip and back (remembered)
     ≤ 900 px      → the sidebar becomes a drawer that slides over the page;
                     it closes on a tap outside it or on any menu line.
   Below that, pages stack to one column, tables scroll sideways inside
   their card instead of squashing, and touch targets get bigger. */

#navToggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid #e0e5ea; background: #f4f6f8; border-radius: 9px;
  cursor: pointer; color: #3d4449; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
#navToggle:hover { background: #e5f2d1; }
#navToggle svg { width: 20px; height: 20px; }
#navBackdrop { display: none; }

/* Icon strip on wide screens: show each line's name on hover */
#sidebar.collapsed .nav-item { position: relative; }

/* ═════════════ TABLET + PHONE (drawer menu) ═════════════ */
@media (max-width: 900px) {
  #topbar { padding: 0 .6rem; gap: .5rem; height: 54px; }
  #topbar .topbar-divider { display: none; }
  #clock { display: none; }

  body #sidebar {
    position: fixed; top: 54px; bottom: 0; left: 0;
    width: 280px !important; max-width: 85vw;
    transform: translateX(-102%);
    transition: transform .22s ease;
    z-index: 900;
    box-shadow: 4px 0 18px rgba(0,0,0,.25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.nav-open #sidebar { transform: translateX(0); }
  /* (the icon strip is a desktop thing — app.html drops it in drawer mode) */
  body.nav-open #navBackdrop {
    display: block; position: fixed; inset: 54px 0 0 0;
    background: rgba(14,18,29,.45); z-index: 850;
  }
  .nav-item { padding: .8rem 1rem; }

  #mainContent { padding: .9rem .75rem 2rem; width: 100%; }
  #layout { position: relative; }
}

/* ═════════════ PHONE ═════════════ */
@media (max-width: 640px) {
  /* Top bar: logo mark, communication icons, sign-out icon — nothing else */
  #topbar { gap: .35rem; }
  /* under the logo: drop "ERP – Manufacturing Control", keep the version number */
  #topbar > div:first-of-type > span:last-child { font-size: 0 !important; }
  #topbarVersion { font-size: 10px; font-weight: 700; }
  #topbar .topbar-right { gap: .35rem; }
  #liveBadge { display: none !important; }                                         /* LIVE */
  #topbar .topbar-right > button span { display: none !important; }                /* "Security" word */
  #topbar .topbar-right > button[onclick*="submitIdea"],
  #topbar .topbar-right > button[onclick*="reportBug"] { display: none !important; }
  #topbar-user > div:first-child { display: none !important; }                     /* name + role */
  #topbar-user button { font-size: 0 !important; padding: 7px 9px !important; }
  #topbar-user button svg { width: 16px; height: 16px; }
  #topbar .topbar-right > button { padding: 0 7px !important; }
  #commRail { padding: 2px; gap: 0; }
  .comm-item { padding: 0 .4rem; height: 32px; }

  /* Everything stacks */
  .form-grid { grid-template-columns: 1fr; }
  #mainContent [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #mainContent [style*="grid"] > *, #mainContent [class*="grid"] > * { min-width: 0; }
  #mainContent [style*="width:"][style*="px"] { max-width: 100%; }
  .module-header, .filter-row, .module-title-row { flex-wrap: wrap; }
  #mainContent [style*="display:flex"]:not(table *) { flex-wrap: wrap; }
  .module-header h2, .module-title { font-size: 1.15rem; }
  #mainContent input, #mainContent select, #mainContent textarea, .form-control { max-width: 100% !important; }
  #mainContent .form-control, #mainContent input:not([type=checkbox]):not([type=radio]), #mainContent select {
    min-height: 40px; font-size: 16px;   /* 16px stops iOS zooming into the field */
  }
  .btn { min-height: 40px; }

  /* Wide tables scroll inside their card instead of squeezing the page */
  #mainContent table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  #mainContent table th, #mainContent table td { white-space: nowrap; }
  .table-wrapper, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* Dialogs use the whole screen */
  dialog.modal-dialog, dialog.modal-wide {
    width: 100vw; max-width: 100vw; max-height: 100dvh; height: auto;
    border-radius: 14px 14px 0 0; margin: auto auto 0;
  }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }

  #toast-container { left: 8px; right: 8px; bottom: 8px; top: auto; }
  #toast-container .toast { max-width: none; }
}

/* ── Open Order Report on a laptop (≤ 1500 px) and an iPad: the whole table
   fits the screen — smaller type, tighter columns, no column cut off.
   Phones (≤ 640 px): one card per line, every field labelled. ── */
@media (min-width: 641px) and (max-width: 1500px) {
  #mainContent .oor-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* last resort: never hide a column */
  #mainContent .oor-tablewrap::-webkit-scrollbar { height: 10px; }
  #mainContent #oorTbl { font-size: .82rem; }
  #mainContent #oorTbl thead th { font-size: .72rem !important; padding: .42rem .22rem !important; letter-spacing: .2px; }
  #mainContent #oorTbl tbody td { padding: .34rem .22rem; }
  #mainContent #oorTbl thead tr > th:first-child, #mainContent #oorTbl td[data-col="num"] { display: none; }   /* row numbers: no room */
  #mainContent #oorTbl th[data-col="customer"] { min-width: 96px !important; }
  #mainContent #oorTbl td[data-label="Customer"] { width: 116px; min-width: 116px; max-width: 116px !important; }
  #mainContent #oorTbl th[data-col="jobNo"], #mainContent #oorTbl th[data-col="dueDate"] { min-width: 70px !important; }
  #mainContent #oorTbl th[data-col="itemNo"] { min-width: 30px !important; }
  #mainContent #oorTbl th[data-col="partNo"] { min-width: 86px !important; }
  #mainContent #oorTbl th[data-col="description"] { min-width: 96px !important; }
  #mainContent #oorTbl td[data-label="Description"] { min-width: 96px; max-width: 150px !important; }
  #mainContent #oorTbl th[data-col="po"] { min-width: 64px !important; }
  #mainContent #oorTbl th[data-col="openQty"] { min-width: 36px !important; }
  #mainContent #oorTbl th.col-fin { min-width: 66px !important; }
  #mainContent #oorTbl th[data-col="splitNo"], #mainContent #oorTbl th[data-col="splitQty"] { min-width: 32px !important; }
  #mainContent #oorTbl td[data-label="Notes"] { max-width: 150px !important; }
  #mainContent #oorTbl .badge { font-size: .68rem; padding: 2px 7px; letter-spacing: .2px; }
  #mainContent #oorTbl .oor-due { font-size: .9em; padding: 1px 5px; }
  #mainContent #oorTbl td[data-label="Sale"] { font-size: 1.2rem !important; }
}
/* iPad landscape and small laptops */
@media (min-width: 641px) and (max-width: 1280px) {
  #mainContent #oorTbl { font-size: .76rem; }
  #mainContent #oorTbl thead th { font-size: .66rem !important; padding: .38rem .16rem !important; letter-spacing: 0; }
  #mainContent #oorTbl tbody td { padding: .3rem .16rem; }
  #mainContent #oorTbl th[data-col="customer"] { min-width: 84px !important; }
  #mainContent #oorTbl td[data-label="Customer"] { width: 100px; min-width: 100px; max-width: 100px !important; }
  #mainContent #oorTbl td[data-label="Part number"] { width: auto !important; min-width: 76px !important; max-width: 104px !important; }
  #mainContent #oorTbl th[data-col="partNo"] { min-width: 76px !important; }
  #mainContent #oorTbl th[data-col="description"] { min-width: 84px !important; }
  #mainContent #oorTbl td[data-label="Description"] { min-width: 84px; max-width: 118px !important; }
  #mainContent #oorTbl th[data-col="jobNo"], #mainContent #oorTbl th[data-col="dueDate"] { min-width: 62px !important; }
  #mainContent #oorTbl th[data-col="po"] { min-width: 58px !important; }
  #mainContent #oorTbl td[data-label="Notes"] { max-width: 112px !important; }
  #mainContent #oorTbl td[data-label="Status"] { min-width: 84px; }
  #mainContent #oorTbl td[data-label="Status"] .badge { white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.25; max-width: 92px; }   /* long statuses wrap instead of pushing the table wider */
  #mainContent #oorTbl .oor-am { font-size: .68rem; }
}
/* 10" iPad landscape (1024 px): tighter still */
@media (min-width: 641px) and (max-width: 1100px) {
  #mainContent #oorTbl thead th { padding: .36rem .08rem !important; }
  #mainContent #oorTbl tbody td { padding: .28rem .08rem; }
  #mainContent #oorTbl th[data-col="customer"] { min-width: 72px !important; }
  #mainContent #oorTbl td[data-label="Customer"] { width: 86px; min-width: 86px; max-width: 86px !important; }
  #mainContent #oorTbl td[data-label="Part number"] { max-width: 90px !important; }
  #mainContent #oorTbl th[data-col="description"] { min-width: 80px !important; }
  #mainContent #oorTbl td[data-label="Description"] { min-width: 80px; max-width: 92px !important; }
  #mainContent #oorTbl td[data-label="Notes"] { max-width: 84px !important; }
  #mainContent #oorTbl th[data-col="jobNo"], #mainContent #oorTbl th[data-col="dueDate"] { min-width: 56px !important; }
  #mainContent #oorTbl td[data-label="Sale"] { font-size: 1rem !important; }
  #mainContent #oorTbl thead th:last-child { min-width: 30px !important; }
}
@media (max-width: 640px) {
  #mainContent #oorTbl, #mainContent #oorTbl tbody { display: block; width: 100%; }
  #mainContent #oorTbl thead { display: none; }
  #mainContent #oorTbl tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 12px;
    border: 1px solid var(--border); border-radius: 10px; margin: 0 0 10px; padding: 10px 12px; background: #fff; }
  #mainContent #oorTbl td { display: block; border: 0; padding: 2px 0; max-width: none; white-space: normal; min-width: 0 !important; text-align: left !important; }
  #mainContent #oorTbl td[data-col="sel"] { grid-column: 1 / -1; order: -1; padding: 0; }
  #mainContent #oorTbl td::before { content: attr(data-label); display: block; font-size: .62rem; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase; color: #8a93a6; margin-bottom: 1px; }
  #mainContent #oorTbl td[data-col="num"] { display: none; }
  #mainContent #oorTbl td[data-col="sel"]::before, #mainContent #oorTbl td[data-label=""]::before { content: none; }
  #mainContent #oorTbl td[data-label="Customer"], #mainContent #oorTbl td[data-label="Description"],
  #mainContent #oorTbl td[data-label="Status"], #mainContent #oorTbl td[data-label="Notes"] { grid-column: span 2; }
  #mainContent #oorTbl.fin-hidden .col-fin { display: none; }
  #mainContent #oorTbl tr:nth-child(even) td { background: transparent; }
  #mainContent #oorTbl td[data-label="Notes"] { border-radius: 6px; padding: 4px 6px; }
}
@media (max-width: 640px) {
  #mainContent #oorTbl tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mainContent #oorTbl td[data-label="Customer"], #mainContent #oorTbl td[data-label="Description"],
  #mainContent #oorTbl td[data-label="Status"], #mainContent #oorTbl td[data-label="Notes"] { grid-column: 1 / -1; }
}

/* ── Every other list table on iPad portrait and phones: one card per row,
   each value under its column name (labels are filled in by utils.js
   autoCardTables) — no sideways scrolling ── */
@media (max-width: 900px) {
  #mainContent table.data-table.auto-cards:not(#oorTbl) { display: block; overflow: visible; width: 100%; }
  #mainContent table.data-table.auto-cards:not(#oorTbl) thead { display: none; }
  #mainContent table.data-table.auto-cards:not(#oorTbl) tbody { display: block; }
  #mainContent table.data-table.auto-cards:not(#oorTbl) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px;
    border: 1px solid var(--border); border-radius: 10px; margin: 0 0 10px; padding: 10px 12px; background: #fff; }
  #mainContent table.data-table.auto-cards:not(#oorTbl) td { display: block; border: 0; padding: 2px 0; max-width: none;
    white-space: normal !important; text-align: left !important; min-width: 0 !important; background: transparent; }
  #mainContent table.data-table.auto-cards:not(#oorTbl) td[data-label]::before { content: attr(data-label); display: block;
    font-size: .62rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #8a93a6; margin-bottom: 1px; }
  #mainContent table.data-table.auto-cards:not(#oorTbl) td[colspan] { grid-column: 1 / -1; }
}

/* ═════════════ TOP BAR on iPads and phones ═════════════
   One row cut the right end off (company, Security, sign out). Here it
   becomes two rows: menu · logo · company · language · Security · sign out
   on top, and Mailbox / Messages / Tasks / Calendar · My Zone · Company
   File · Admin Settings under it. Laptops keep the single row. */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1400px) {
  #topbar { height: auto !important; min-height: 50px; flex-wrap: wrap; row-gap: 6px; column-gap: .5rem;
    padding: 6px .75rem !important; overflow: visible; }
  #topbar .topbar-right { display: contents; }
  #topbar .topbar-divider { display: none; }
  #navToggle { order: 1; }
  #topbar > div:first-of-type { order: 2; }
  #companyPicker { order: 3; margin-left: auto; }
  #fileAccessSlot, #presenceBar { order: 4; }
  #liveBadge { display: none !important; }
  #langToggle { order: 5; }
  #topbar .topbar-right > button { order: 6; }
  #topbar-user { order: 7; }
  #topbar::after { content: ''; order: 8; flex-basis: 100%; height: 0; }
  #commRail { order: 9; }
  #topbar > .comm-myzone { order: 10; }
  #topbar > .comm-myzone:first-of-type { margin-left: 0; }
  .comm-item .comm-label { display: none; }
  .comm-item { height: 36px; padding: 0 .7rem; }
  .comm-item.comm-myzone { height: 38px; padding: 0 .8rem; margin-left: .25rem; }
  .comm-item .comm-icon { width: 19px; height: 19px; }
  #companyPicker { height: 36px; }
}
/* Drawer menu: full height from the top of the screen, over the top bar —
   whatever height the two-row top bar ends up */
@media (max-width: 900px) {
  body #sidebar { top: 0 !important; z-index: 1000; padding-top: env(safe-area-inset-top); }
  body.nav-open #navBackdrop { inset: 0 !important; z-index: 950; }
}
@media (max-width: 640px) {
  /* row 2 carries the language switch too — row 1 is too narrow for it */
  #langToggle { order: 11; margin-left: auto; }
  #companyPicker { max-width: 116px; font-size: 13px; padding: 0 4px; }
  #topbar { column-gap: .4rem; }
  .comm-item { padding: 0 .5rem; }
  .comm-item.comm-myzone { padding: 0 .6rem; margin-left: .15rem; }
  /* the communication icons and My Zone share row 2 */
  #commRail { flex-shrink: 1; }
}

/* ═════════════ Sign-in screen on phones and iPads ═════════════ */
@media (max-width: 900px), (pointer: coarse) {
  #loginScreen > div { padding: 12px; }
  #loginScreen > div > div { width: min(440px, 100%) !important; }
  #loginScreen input { font-size: 16px !important; min-height: 46px; }   /* 16px: iOS does not zoom */
  #loginScreen button { min-height: 46px; font-size: 15px !important; }
  #loginScreen h2 { font-size: 1.4rem !important; }
  #loginScreen label { font-size: .95rem !important; }
}

/* ═════════════ Settings → Users: one person per card on narrow screens ═════════════ */
#usersTable .user-row { flex-wrap: wrap; row-gap: .45rem; }
#usersTable .user-row > .user-who { flex: 1 1 220px !important; min-width: 0; }
@media (max-width: 640px) {
  #usersTable .user-row > .user-who { flex-basis: calc(100% - 50px) !important; }
  #usersTable .user-row { padding: .8rem .4rem !important; }
  #usersTable .user-row .btn-icon { min-width: 40px; min-height: 40px; }
}
/* Settings page columns: two side by side only when they fit */
#settingsCols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) !important; max-width: 1100px !important; }
#settingsCols > * { min-width: 0; }

@media (max-width: 640px) {
  /* a row that scrolls sideways on purpose (bar charts, tab strips) keeps its one line */
  #mainContent [style*="overflow-x:auto"][style*="display:flex"] { flex-wrap: nowrap !important; }
}

/* Long button labels wrap on a phone instead of running off the card */
@media (max-width: 640px) {
  #mainContent .btn { white-space: normal; height: auto; line-height: 1.25; }
}
/* iPads: the desktop's 12px base reads small at arm's length */
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1400px) {
  html { font-size: 13px; }
}
#settingsCols [style*="grid-template-columns"] > * { min-width: 0; }
#settingsCols .btn { white-space: normal; }

/* Real iPads (touch): the 13px base above would push the Open Order Report
   past the screen edge — the report keeps the laptop's measurements */
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1500px) {
  #mainContent #oorTbl { font-size: .74rem; }
  #mainContent #oorTbl thead th { font-size: .64rem !important; }
  #mainContent #oorTbl .badge { font-size: .62rem; }
}
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1280px) {
  #mainContent #oorTbl { font-size: .7rem; }
  #mainContent #oorTbl thead th { font-size: .6rem !important; }
}