/* ============================================================
   Mobile version — everything here targets viewport widths up to
   768px (the one breakpoint that already existed in styles.css,
   for .mobile-only-inline). Loaded after styles.css so these rules
   win the cascade at equal specificity; desktop styles are never
   touched by this file. See PROJECT-STRUCTURE.md / the mobile plan
   for the reasoning behind each section.
   ============================================================ */

:root{
  --mobile-tabbar-height:80px; /* 10px top pad + 60px glass pill/circle + 10px bottom pad, excl. safe area */
  --mobile-tabbar-bg:rgba(240,235,225,.2); /* matches the FAB buttons' alpha (.2) — same glass strength everywhere */
  --mobile-tabbar-active-tint:rgba(202,174,120,.32);
  --mobile-sheet-scrim:rgba(69,14,15,.55); /* translucent — a tint over the body, not a solid fill */
}

/* Static markup (the tab bar) exists in the DOM at every viewport width —
   hidden unconditionally here, shown only inside the media query below. */
.mobile-tabbar{display:none;}
.mobile-back-btn{display:none;}
.mobile-section-header{display:none;}
/* The filter-row wrapper js/27-mobile-nav.js injects into every topbar controls
   container — inert on desktop so wrapping it never changes desktop layout. */
.mobile-filter-scroll{display:contents;}
/* The lightbox's mobile-only sheet wrapper (index.html) — same reasoning. */
.lightbox-sheet{display:contents;}

@media (max-width:768px){

  /* ---------------------------------------------------------------
     App shell / header — tab bar replaces the desktop header + top-section
     nav entirely; the bar floats (glass) over content rather than reserving
     its own strip, so .app-frame is simply full-bleed 100dvh.
     --------------------------------------------------------------- */
  .app-header{display:none;}
  /* viewport-fit=cover (index.html) lets the page extend under the notch/status bar when
     installed to the Home Screen, so the safe-area insets pad it back out — all 0 in a normal
     browser tab, so this is a no-op there. Paper background so no maroon strip shows in the inset. */
  .app-frame{
    height:100vh;
    height:100dvh;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    background:var(--color-paper);
  }
  .app-window{background:var(--color-paper);}
  .app-shell{border-radius:0;}
  .sidebar-footer-logo{display:none;}

  /* ---------------------------------------------------------------
     Bottom tab bar — floats over content (glass blur shows scrolled
     content through it); z-index stays below every overlay/dossier/
     modal/lightbox (90+) so an open sheet always covers it.
     --------------------------------------------------------------- */
  .mobile-tabbar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    /* Fixed 23px from the screen edge — NOT 23px + safe-area-inset-bottom. Installed to the Home
       Screen, viewport-fit=cover puts the page under the home-indicator zone, so adding the inset
       left a big empty strip under the bar; native iOS tab bars sit inside that zone too. All the
       bar-clearance paddings below therefore don't add the inset either. */
    padding:10px 14px 23px;
  }
  .mobile-tabbar-group{
    position:relative;
    flex:1;display:flex;align-items:center;gap:4px;
    height:60px;
    background:var(--mobile-tabbar-bg);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
    border-radius:999px;padding:0 6px;
    box-shadow:0 0 0 1px rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.14);
  }
  /* Equal-width tabs (standard iOS tab bar — not a dominant/shifting tab);
     the fill is a separate absolutely-positioned pill (below) that JS
     (positionMobileTabIndicator() in js/27-mobile-nav.js) slides and resizes
     to exactly match whichever tab is active, via getBoundingClientRect —
     same "matched geometry" pill-slide as a native segmented control. */
  .mobile-tab{
    position:relative;z-index:1;
    appearance:none;-webkit-appearance:none;border:none;background:none;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
    height:100%;min-width:0;padding:0 8px;border-radius:999px;color:#450E0F;
    font-family:var(--font-ui);font-size:10px;font-weight:600;
    flex:1 1 0%;
  }
  .mobile-tab-pill{
    width:30px;height:30px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
  }
  .mobile-tab-icon{width:20px;height:20px;object-fit:contain;display:block;}
  .mobile-tab-label{white-space:nowrap;}
  .mobile-tab-indicator{
    position:absolute;z-index:0;top:6px;bottom:6px;left:0;
    border-radius:999px;background:var(--mobile-tabbar-active-tint);
    transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  .mobile-tabbar-scan{
    appearance:none;-webkit-appearance:none;border:none;cursor:pointer;flex:0 0 auto;
    width:60px;height:60px;border-radius:999px;
    background:var(--mobile-tabbar-bg);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 1px rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.14);
  }
  .mobile-tabbar-scan .mobile-tab-icon{width:22px;height:22px;}

  /* ---------------------------------------------------------------
     Sidebar-as-home drill-down navigation
     --------------------------------------------------------------- */
  .app-shell{position:relative;}
  .app-shell .sidebar{
    width:100%;flex:1 1 100%;border-right:none;
    padding-bottom:var(--mobile-tabbar-height);
  }
  .app-shell .main{display:none;}
  .app-shell.mobile-drilldown .sidebar{display:none;}
  .app-shell.mobile-drilldown .main{display:flex;}
  .view-container{padding-bottom:calc(var(--mobile-tabbar-height) + 20px);}

  /* Swipe-back in progress (js/27-mobile-nav.js) — reveal the sidebar behind
     .main so dragging the content away looks like it's sliding off the menu,
     same idea as the completed tab-bar/back-button navigation just live. */
  .app-shell.mobile-back-dragging .sidebar{
    display:flex;position:absolute;inset:0;z-index:0;
  }
  .app-shell.mobile-back-dragging .main{
    position:relative;z-index:1;
    box-shadow:-8px 0 24px rgba(0,0,0,.15);
  }

  /* Back button + section title, injected by ensureMobileSectionHeader() in
     js/27-mobile-nav.js as the first child of .topbar-left — always its own
     full-width row, ahead of the filter row below. */
  .mobile-section-header{
    display:flex;align-items:center;gap:8px;width:100%;flex-basis:100%;
  }
  /* Hidden for now — back navigation is being tested via re-tapping the tab
     bar button instead (see js/27-mobile-nav.js). The button is still
     created/wired, just not shown; flip this back to inline-flex to bring
     it back. */
  .mobile-back-btn{display:none;}
  .mobile-section-title{flex:1;min-width:0;}

  /* ---------------------------------------------------------------
     Kanban boards — one stage at a time, magnetic snap
     --------------------------------------------------------------- */
  .board-scroll{
    padding:16px 0 0;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:8vw;
    -webkit-overflow-scrolling:touch;
  }
  .board{padding:0 8vw;}
  .column{
    scroll-snap-align:center;
    width:84vw;flex:0 0 84vw;
  }

  /* ---------------------------------------------------------------
     Library grids — 2 per row
     --------------------------------------------------------------- */
  .ref-lib-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;padding:14px 16px 24px;
  }

  /* ---------------------------------------------------------------
     Tables — already overflow-x:auto in styles.css; just add momentum
     --------------------------------------------------------------- */
  .data-table-scroll{-webkit-overflow-scrolling:touch;}

  /* ---------------------------------------------------------------
     Topbar — section title stays on its own full-width line (always
     visible, never scrolls away); every filter dropdown sits together
     on one horizontally-scrollable row below it. The title/filters are
     siblings in the same container in the markup (Creation's static
     #ctrl* divs and Inventory/Production's JS-built #invTopbarControls/
     #prodTopbarControls alike) — js/27-mobile-nav.js's
     normalizeMobileFilterRow() regroups the non-title children into a
     .mobile-filter-scroll wrapper (display:contents on desktop, so this
     never affects desktop layout) so pure CSS can lay the two rows out.
     --------------------------------------------------------------- */
  .topbar{padding:12px 16px;gap:8px;}
  .topbar-left{width:100%;}
  .topbar-view-controls,
  #invTopbarControls,
  #prodTopbarControls{
    flex-basis:100%;
    flex-direction:column !important; /* overrides the inline flex-direction these divs carry */
    align-items:flex-start !important;
    gap:8px;
  }
  .mobile-filter-scroll{
    width:100%;display:flex;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;
    gap:8px;
  }
  .mobile-filter-scroll select,
  .mobile-filter-scroll .chip-select,
  .mobile-filter-scroll button{flex:0 0 auto;}
  /* Several views (Garment Library, Costing, Stockists, ...) already render their
     own inline <h2 class="view-title"> inside this container — redundant now that
     .mobile-section-header shows the same name (from the same label maps) next to
     the back button, so it's hidden rather than shown twice. */
  .topbar-view-controls > .view-title,
  #invTopbarControls > .view-title,
  #prodTopbarControls > .view-title{display:none;}

  /* The Raw Materials "Scan QR" topbar button (js/22-inventory.js,
     .mobile-only-inline — the only thing that class was ever for) is now
     redundant: the mobile tab bar's own QR button opens the same overlay
     from anywhere. Overrides styles.css's older max-width:768px rule that
     showed it. */
  .mobile-only-inline{display:none;}

  /* ---------------------------------------------------------------
     Floating action buttons — one full-width bar spanning the same
     margins as the tab bar; with two buttons they split it evenly
     (flex:1 on each visible button does both automatically — a hidden
     sibling stays display:none and never joins the flex layout, so this
     adapts with zero JS regardless of how many buttons a view shows).
     --------------------------------------------------------------- */
  .topbar-actions{
    position:fixed;left:14px;right:14px;top:auto;
    bottom:calc(var(--mobile-tabbar-height) + 16px);
    flex-direction:row;gap:10px;
    z-index:60;
  }
  .topbar-actions .btn-primary,
  .topbar-actions .btn-secondary{
    flex:1;text-align:center;
    border-radius:999px;padding:14px 20px;border:none;
    box-shadow:0 0 0 1px rgba(255,255,255,.35),0 8px 20px rgba(0,0,0,.18);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
  }
  .topbar-actions .btn-primary{background:rgba(202,174,120,.2);color:#450E0F;}
  .topbar-actions .btn-secondary{background:rgba(240,235,225,.2);color:#450E0F;}

  /* ---------------------------------------------------------------
     Dossier → slide-up bottom sheet
     --------------------------------------------------------------- */
  .dossier-overlay{background:var(--mobile-sheet-scrim);}
  .dossier{
    top:auto;left:0;right:0;bottom:0;
    width:100%;max-width:100%;height:auto;max-height:95vh;
    padding-bottom:env(safe-area-inset-bottom); /* keep the last row clear of the home indicator */
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
  }
  .dossier.open{transform:translateY(0);}
  .close-dossier{top:10px;right:16px;}

  /* ---------------------------------------------------------------
     Lightbox (References / Graphic References) → one slide-up sheet,
     unified with the dossier/modal treatment above: the image sits at
     the top at its own natural aspect ratio (never cropped/stretched —
     width:100%/height:auto, no forced aspect-ratio box), the side panel
     follows below it, and the two scroll together as a single unit once
     they exceed the height cap — same "image up top, capped, scrolls as
     one" shape as a garment dossier's cover + sections.
     --------------------------------------------------------------- */
  .lightbox-overlay{
    display:flex;align-items:flex-end;
    padding:0;background:var(--mobile-sheet-scrim);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,visibility 0s linear .25s;
  }
  .lightbox-overlay.open{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .25s ease;
  }
  .lightbox-sheet{
    position:relative;
    display:flex;flex-direction:column;
    width:100%;max-height:88vh;overflow-y:auto;
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--color-surface);
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  /* #lightboxCloseBtn is (re)built fresh into the side panel's first row on every
     open (js/14, js/16, js/18 — one shared id, several render call sites) — pulled
     out of that row and floated over the top-right of the image instead, same
     treatment as .close-dossier on the garment dossier's cover. */
  .lightbox-sheet #lightboxCloseBtn{
    position:absolute;top:10px;right:16px;z-index:2;
    background:rgba(0,0,0,.4);color:#fff;
    width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
  }
  .lightbox-overlay.open .lightbox-sheet{transform:translateY(0);}
  .lightbox-main{flex:0 0 auto;padding:0;align-items:stretch;}
  .lightbox-main #lightboxContent{width:100%;}
  .lightbox-main img{width:100%;height:auto;max-width:none;max-height:none;object-fit:initial;border-radius:0;display:block;}
  .lightbox-placeholder{width:100%;aspect-ratio:4/3;}
  .lightbox-caption{display:none;} /* redundant with the "Name" field in the side panel below */
  .lightbox-sidepanel{
    position:static;width:100%;flex:0 0 auto;max-height:none;
    border-left:none;border-top:1px solid var(--color-line);
  }

  /* ---------------------------------------------------------------
     Every other modal (create/edit cards, Settings, PO/Quotation/Value
     Addition, confirm dialogs, notifications, etc. — everything sharing
     the base .overlay/.modal classes, ~40 of them across the app) →
     full-width slide-up bottom sheets, sized to content and capped the
     same way the dossier/lightbox sheets above are. No JS changes needed:
     closeOverlay()/[data-close]/.open still just toggle the .open class —
     .overlay stays permanently display:flex here (instead of the desktop
     display:none) purely so opacity can transition; closed, it's
     invisible and non-interactive (pointer-events:none).
     --------------------------------------------------------------- */
  .overlay{
    display:flex;align-items:flex-end;
    padding:0;background:var(--mobile-sheet-scrim);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,visibility 0s linear .25s;
  }
  .overlay.open{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .25s ease;
  }
  .modal{
    width:100%;max-width:100% !important; /* beats the inline max-width:NNNpx several confirm dialogs carry */
    height:auto;max-height:88vh;
    padding-bottom:env(safe-area-inset-bottom);
    margin:0;border-radius:16px 16px 0 0;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  /* sticky footers hug the scrollport's bottom edge, so they carry the inset themselves */
  .modal-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom));}
  .overlay.open .modal{transform:translateY(0);}

  /* Settings/Notifications set their own fixed width/height on top of
     .modal above — dropped here so both follow the same content-based,
     capped sizing as every other modal; Settings keeps its top-tab-bar
     layout (see the desktop styles.css rule for the class), just pinned
     while its body scrolls. */
  .settings-modal{flex-direction:column;}
  .settings-modal-nav{
    width:100%;flex:0 0 auto;flex-direction:row;
    overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;
    border-right:none;border-bottom:1px solid var(--color-line);
    position:sticky;top:0;z-index:1;
  }
  .settings-modal-navbtn{width:auto;flex:0 0 auto;}
  .settings-modal-body{width:100%;}
  .notifications-modal{height:auto;max-height:88vh;}
}

/* Canvas (js/29-canvas.js) — no hover tooltips on touch, a slimmer zoom bar, and the comments panel becomes a full-width sheet. */
@media (max-width: 768px){
  .cv-host{min-height:0;}
  .cv-tool::after{display:none;}
  .cv-hud-goto{max-width:110px;}
  .cv-mobile-only{display:flex;}
  #btnNewCanvasProject{display:none !important;}
  /* The canvas header row is rebuilt by JS and can outgrow the screen — cap it so it scrolls sideways instead of clipping. */
  #ctrlCanvas, #ctrlGraphicCanvas, #ctrlCanvas .mobile-filter-scroll, #ctrlGraphicCanvas .mobile-filter-scroll{max-width:100%;min-width:0;}
  .cv-sidebar{position:absolute;inset:0;width:auto;z-index:30;border-left:none;}
  .cv-save-status{display:none;}
}