/* TITOL WMS - phone layout (3.1124, Viet: "make all the client sections optimized for mobile").
   One sheet, loaded last, that only speaks below 760px. Rules are deliberately generic so every
   client page (Dashboard, Inventory, Request Order, Services, Reports) and the job detail get the
   same treatment: the menu slides over the page instead of pushing it, toolbars wrap, sub-tab bars
   scroll sideways, tables scroll inside their box, grids go to one column, nothing forces the page
   wider than the screen. Desktop is untouched. */
@media (max-width: 760px) {
    html, body { overflow-x: hidden; }
    #app-wrapper { margin-left: 0 !important; margin-right: 0 !important; overflow-x: hidden; }

    /* ---- top bar: one compact row (logo + the few buttons that matter) ---- */
    .topbar { padding: 8px 12px !important; gap: 8px; flex-wrap: nowrap; }
    .topbar-subtitle, .topbar-divider, #build-number, .topbar .status-text, #firebase-items-pill, #btn-scan, #btn-theme-toggle { display: none !important; }
    .topbar-brand { flex: 0 0 auto; }
    .topbar-status { min-width: 0; gap: 4px !important; flex-wrap: nowrap; justify-content: flex-end; }
    .topbar-status .btn { padding: 4px 8px !important; font-size: 0.72rem !important; white-space: nowrap; }
    #btn-client-view { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

    /* ---- the left menu: an overlay drawer, never a column ----
       (the sidebar's own stylesheet is injected after this one, so these need !important) */
    #adm-panel { width: min(290px, 86vw) !important; box-shadow: 8px 0 32px rgba(0,0,0,.45); }
    #adm-panel:not(.open) { left: -100vw !important; }
    #adm-panel.open { left: 0 !important; }
    #app-wrapper.panel-open { margin-left: 0 !important; }
    #panel-trigger.open { left: min(290px, 86vw) !important; }
    #adm-backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.45); display: none; }
    body.adm-mobile-open #adm-backdrop { display: block; }
    body.adm-mobile-open { overflow: hidden; }
    /* the ☰ lives in the top bar; the drawer is full height with rows sized for a thumb */
    #panel-trigger { top: 6px !important; width: 36px; height: 36px; border-radius: 8px !important; border: 1px solid var(--border-subtle) !important; z-index: 301 !important; font-size: 1.1rem; }
    #panel-trigger:not(.open) { left: 8px !important; }
    #panel-trigger.open { left: calc(min(290px, 86vw) - 44px) !important; width: 36px; height: 36px; top: 6px !important; }
    .topbar-brand { padding-left: 44px; }
    .adm-p-list { padding: 6px 0 10px; }
    .adm-sec { padding: 14px 14px 4px; font-size: 0.68rem; }
    .adm-item { min-height: 46px; padding: 10px 14px; font-size: 1rem; }
    .adm-item .adm-i-icon { font-size: 1.2rem; width: 26px; }
    .adm-item .adm-i-arr { font-size: 0.9rem; padding: 6px; }
    .adm-subs.open { max-height: none; }
    .adm-sub { min-height: 40px; padding: 9px 14px 9px 50px; font-size: 0.9rem; }
    .adm-sub-archtoggle { padding: 9px 14px 9px 50px; font-size: 0.85rem; }
    .adm-p-user { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .adm-user-avatar { width: 30px; height: 30px; }

    /* ---- bottom tab bar: the client sections one tap away ---- */
    #adm-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 205; background: var(--bg-card); border-top: 1px solid var(--border-subtle); padding-bottom: env(safe-area-inset-bottom, 0px); }
    #adm-bottombar button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 0.62rem; letter-spacing: 0.2px; cursor: pointer; }
    #adm-bottombar button .bb-i { font-size: 1.2rem; line-height: 1; }
    #adm-bottombar button .bb-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    #adm-bottombar button.active { color: var(--accent); }
    #adm-bottombar button[hidden] { display: none; }
    body.adm-mobile-open #adm-bottombar { display: none; }
    #app-wrapper { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    /* ---- page frame ---- */
    .tab-content, .main { padding-left: 12px !important; padding-right: 12px !important; }
    .tab-content > .data-sub-tabs, .data-sub-tabs {
        display: flex; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
        margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; scrollbar-width: none;
    }
    .data-sub-tabs::-webkit-scrollbar { display: none; }
    .data-sub-tab { flex: 0 0 auto !important; white-space: nowrap; }
    /* a group of tabs inside the strip stays one line - the whole strip scrolls */
    .data-sub-tabs > div, .data-sub-tabs > span { flex: 0 0 auto; flex-wrap: nowrap !important; display: inline-flex; gap: 4px; align-items: center; }

    /* ---- rows of controls wrap; inputs never force the width ---- */
    .tab-content [style*="display:flex"], .tab-content [style*="display: flex"], .tab-content .filters, .tab-content .filter-bar, .tab-content .toolbar { flex-wrap: wrap; }
    .tab-content [style*="white-space:nowrap"], .tab-content [style*="white-space: nowrap"] { white-space: normal; }
    .tab-content input, .tab-content select, .tab-content textarea, .tab-content .filter-input, .tab-content .filter-select { max-width: 100%; min-width: 0; }
    .tab-content input[style*="width"], .tab-content select[style*="width"], .tab-content textarea[style*="width"] { max-width: 100% !important; }
    .tab-content img, .tab-content svg, .tab-content video, .tab-content iframe { max-width: 100%; }
    .tab-content [style*="min-width"] { min-width: 0 !important; }
    .tab-content .btn, .tab-content button { max-width: 100%; }

    /* ---- grids: one column (two for small stat tiles) ---- */
    .tab-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .tab-content .stats-grid, .tab-content [class*="stat-grid"], .tab-content [class*="stats-row"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .tab-content .two-col, .tab-content .two-col-equal, .tab-content [class*="-grid"], .tab-content [class*="_grid"], .tab-content .card-grid { grid-template-columns: 1fr !important; }
    .tab-content .card, .tab-content [class*="-card"] { max-width: 100%; min-width: 0; }

    /* ---- tables: scroll inside their own box, the page stays put ---- */
    .tab-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-content table thead, .tab-content table tbody, .tab-content table tfoot { min-width: 100%; }

    /* ---- job boards (Services > Job Queue is a read-only daily board): the board scrolls sideways, rows keep their columns ---- */
    .db-body, #svc-viewer-board, [id$="-board"].db-readonly { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .db-row { width: max-content; min-width: 100%; }

    /* ---- the job / record detail overlay: one column, full screen ---- */
    #jq-detail-overlay .jq-detail-shell, #jq-detail-overlay [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    #jq-detail-body { padding: 12px 12px 20px !important; }
    #jq-detail-overlay .jq-detail-side, #jq-detail-overlay .jq-detail-rail { max-width: 100%; }
    .jq-facts, .jq-facts[data-n="7"] { flex-wrap: wrap; }
    .jq-fact { flex: 1 1 45%; }

    /* ---- client dashboard: one quick-action tile per row, labels never truncated ---- */
    .cdash-kpis, .cdash-row5 { grid-template-columns: 1fr !important; }
    .cdash-card-title, .cdash-card-sub { white-space: normal !important; }
    .cdash-bm { max-width: 100%; }
    .cdash-jq, #cdash-jq-host { max-width: 100%; }

    /* ---- inventory (client) ---- */
    .cinv-hero-row { flex-wrap: wrap; }
    .cinv-hero-text, .cinv-hero-search, .cinv-hero-sub { max-width: 100%; width: 100%; }

    /* ---- modals and drawers fit the screen ---- */
    .titol-modal, .modal, .drawer, [class*="-modal"] { max-width: 100vw !important; width: auto !important; left: 0 !important; right: 0 !important; }
    .msg-panel { width: 100vw; max-width: 100vw; }
    .jq-detail-chat { width: auto !important; min-width: 0 !important; }
}
@media (min-width: 761px) { #adm-bottombar { display: none !important; } }