/* ============================================================================
   Atlantic Moulding — mobile patterns (requires _tokens.css)
   Opt-in by attribute so existing pages are untouched until migrated.
   ============================================================================ */

/* ── Focus + touch baseline (all sizes) ─────────────────────────────────── */
:where(button,a,input,select,textarea,[role="button"]):focus-visible{outline:none;box-shadow:var(--focus-ring)}
:where(button,[role="button"],.btn){-webkit-tap-highlight-color:transparent}
/* 44px minimum only below the desktop breakpoint so desktop stays pixel-identical */
@media (max-width:899px){:where(button,[role="button"],.btn):not(.theme-toggle):not(.nav-hamburger){min-height:var(--tap-min)}}
.btn{background:var(--primary);color:var(--on-primary)}
.btn:hover{background:var(--primary-hover)}
.btn:active{background:var(--primary-press)}
.btn.outline:active,.btn.ghost:active{background:var(--tint-press)}
.btn.danger{background:var(--danger)}.btn.danger:hover{background:var(--danger-hover)}.btn.danger:active{background:#A33224}
.btn[disabled]{opacity:var(--disabled-opacity)}

/* ── 1. Table → cards  ─────────────────────────────────────────────────────
   <table class="list" data-cards>
     <td data-slot="pills">  status + fulfilment pills   row 1, left
     <td data-slot="ref">    order # / SKU (mono)        row 1, right
     <td data-slot="title">  customer / product name     row 2, full
     <td data-slot="meta">   date · item count           row 3, left
     <td data-slot="amount"> balance / total             row 3, right
     <td data-slot="hide">   desktop-only columns
   Row click handler stays on <tr>. Sort: render .m-sort select above. */
@media (max-width:599px){
  table.list[data-cards]{display:block;border:0}
  table.list[data-cards] thead{display:none}
  table.list[data-cards] tbody{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3)}
  table.list[data-cards] tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--sp-3);
    padding:14px var(--sp-4);background:var(--white);border:1px solid var(--border-warm);
    border-radius:var(--radius);box-shadow:var(--shadow-sm);cursor:pointer;
  }
  table.list[data-cards] tr:active{background:var(--surface-press);border-color:var(--border-strong)}
  table.list[data-cards] td{display:block;padding:0;border:0;font-size:var(--fs-small)}
  table.list[data-cards] td[data-slot="pills"]{grid-row:1;grid-column:1;display:flex;flex-wrap:wrap;gap:6px}
  table.list[data-cards] td[data-slot="ref"]{grid-row:1;grid-column:2;font-family:var(--font-mono);color:var(--text-muted);text-align:right}
  table.list[data-cards] td[data-slot="title"]{grid-row:2;grid-column:1/-1;font-size:var(--fs-lead);font-weight:var(--fw-medium);line-height:var(--lh-tight)}
  table.list[data-cards] td[data-slot="meta"]{grid-row:3;grid-column:1;color:var(--text-muted)}
  table.list[data-cards] td[data-slot="amount"]{grid-row:3;grid-column:2;text-align:right;font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
  table.list[data-cards] td[data-slot="hide"]{display:none}
  table.list[data-cards] tbody tr:hover{background:var(--white)} /* no hover on touch */
  .m-sort{display:flex}            /* mobile sort control */
  /* rows that navigate get a trailing chevron */
  table.list[data-cards] tr[data-detail-url]{padding-right:40px}
  table.list[data-cards] tr[data-detail-url]::after{content:"";position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--text-muted);opacity:.6;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
  table.list[data-cards] tr{position:relative}
  /* tables NOT yet converted to cards scroll inside their card instead of widening the page */
  .card-body.flush:has(>table.list:not([data-cards])),.card-body:has(>table.list:not([data-cards])){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card-body:has(>table.list:not([data-cards])) th{position:static}   /* sticky th would pin to the scroll box, not the page */
}
.m-sort{align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4)}
@media (min-width:600px){.m-sort{display:none}} /* base rule must not out-cascade the ≤599 display:flex above */

/* ── 2. Modal → bottom sheet ──────────────────────────────────────────────
   Existing markup: .modal-overlay > .modal > .modal-head + .modal-body
   Add .modal-foot for pinned actions (moves out of .modal-body). */
@media (max-width:899px){
  .modal-overlay{align-items:flex-end;padding:0;background:var(--scrim)}
  .modal{
    max-width:none!important;width:100%;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
    max-height:calc(100dvh - 56px);display:flex;flex-direction:column;overflow:hidden;
    animation:am-sheet-in .24s cubic-bezier(.2,.8,.2,1);
  }
  .modal-head{padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);border-bottom:1px solid var(--border-warm);position:relative}
  .modal-head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--border-strong)}
  .modal-head h3{font-size:var(--fs-title);font-weight:var(--fw-regular);padding-top:14px}
  .modal-close{width:var(--tap-min);height:var(--tap-min)}
  .modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--sp-4) var(--sp-5)}
  .modal-foot{flex-shrink:0;display:flex;flex-direction:column;gap:var(--sp-2);
    padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background:var(--pale-wood-light);border-top:1px solid var(--border-warm)}
  .modal-foot .btn{width:100%;min-height:var(--control-h-lg);justify-content:space-between}
}
@keyframes am-sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* ── 3. Form fields ─────────────────────────────────────────────────────── */
@media (max-width:599px){
  .field-row{grid-template-columns:1fr}
  .field label{font-size:var(--fs-label);letter-spacing:var(--ls-label)}
  .field input,.field select,.field textarea{font-size:16px;min-height:var(--control-h);padding:0 14px}
  .field textarea{padding:12px 14px;min-height:96px}
}
.field .affix{display:flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--border-strong);border-radius:var(--radius);padding:0 14px}
.field .affix input{border:0;padding:0;flex:1;min-width:0;background:none}
.field .affix:focus-within{border-color:var(--green);box-shadow:var(--focus-ring)}
.field.error input,.field.error select{border-color:var(--danger)}
.field .help{font-size:var(--fs-small);color:var(--text-muted)}
.field.error .help{color:var(--danger)}

/* ── 4. Admin nav: hamburger drawer (option 1b — picked) ──────────────────
   _shell.js renderHeader() adds, from the same NAV array (+ a group key):
     <button class="app-menu-btn" aria-label="Menu" aria-expanded="false">
       <svg…menu/> <span class="dot"></span>   ← dot only when any badge > 0
     </button>
     <nav class="app-drawer"> <h4>Daily</h4> <a class="active">…</a> … <div class="app-drawer-foot">…user/theme/sign out…</div></nav>
     <div class="app-drawer-scrim"></div>
   Groups: Daily (Dashboard, Orders, Tasks, Deliveries) · Catalogue & people
   (Customers, Products, Material Hub) · Messages (Shipping Quotes, Emails) ·
   Admin only (Staff, Settings, Storefront ↗). Close on scrim tap, link tap, Esc. */
.app-menu-btn,.app-drawer,.app-drawer-scrim{display:none}
@media (max-width:1199px){
  .app-nav{display:none}
  .app-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);
    margin-left:calc(var(--sp-2) * -1);background:none;border:0;color:var(--pale-wood);position:relative;cursor:pointer}
  .app-menu-btn svg{width:22px;height:22px;stroke-width:var(--icon-stroke)}
  .app-menu-btn .dot{position:absolute;top:9px;right:7px;width:8px;height:8px;border-radius:4px;background:var(--sale-red)}
  .app-drawer{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;width:min(316px,85vw);
    z-index:var(--z-sheet);background:var(--dark-wood);color:var(--pale-wood);overflow-y:auto;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  .app-drawer.open{transform:none;visibility:visible;box-shadow:10px 0 40px rgba(0,0,0,.3)}
  .app-drawer-scrim{display:block;position:fixed;inset:0;z-index:calc(var(--z-sheet) - 1);background:var(--scrim);
    opacity:0;pointer-events:none;transition:opacity .2s}
  .app-drawer.open + .app-drawer-scrim{opacity:1;pointer-events:auto}
  .app-drawer h4{padding:14px 20px 4px;font-size:10px;font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
    text-transform:uppercase;color:rgba(237,227,206,.5)}
  .app-drawer a{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 20px;border-left:3px solid transparent;
    font-size:15px;font-weight:var(--fw-light);color:var(--pale-wood);text-decoration:none}
  .app-drawer a svg{width:var(--icon-md);height:var(--icon-md);stroke-width:var(--icon-stroke);flex-shrink:0}
  .app-drawer a.active{background:rgba(122,154,58,.14);border-left-color:var(--green);color:var(--green-hover);font-weight:var(--fw-medium)}
  .app-drawer a:active{background:rgba(255,255,255,.06)}
  .app-drawer .nav-badge{position:static;margin-left:auto;min-width:22px;height:22px;line-height:22px;border-radius:11px;font-size:11px}
  .app-drawer-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
    padding:14px 20px;border-top:1px solid rgba(255,255,255,.1)}
  body.drawer-open{overflow:hidden}
}
@media (max-width:599px){
  /* name/role + sign-out live in .app-drawer-foot on phone; the bell stays */
  .app-header .app-user>div:not(.notif-bell-wrap),.app-header .app-user>#btn-signout,.app-header .app-user>.theme-toggle{display:none}
  .app-header .app-user{gap:4px}
  .app-logo{display:none}               /* header shows page title instead */
  .app-header-inner{padding:0 16px;height:56px;gap:10px}
  .app-page-title{display:block}
  table.list th{top:56px}
  #toast-container{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .toast{max-width:none}
}
.app-page-title{display:none;flex:1;min-width:0;font-size:17px;font-weight:400;color:var(--pale-wood);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1199px){.app-page-title{display:block}}
.app-drawer-head a{display:block;min-height:0;padding:0;border:0;text-decoration:none}
.app-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 10px 20px}
.app-drawer-head .l1{display:block;font-size:14px;font-weight:500;color:var(--green-hover);letter-spacing:.04em}
.app-drawer-head .l2{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--green-hover);margin-top:2px}
.app-drawer-close{width:var(--tap-min);height:var(--tap-min);display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--pale-wood);cursor:pointer}
.app-drawer-close svg{width:22px;height:22px;stroke-width:var(--icon-stroke)}
.app-drawer-foot .name{font-size:14px;font-weight:400;color:var(--pale-wood)}
.app-drawer-foot .role{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--green-hover);background:rgba(122,154,58,.12);padding:3px 8px;border-radius:1px;margin-left:8px}
.app-drawer-foot .foot-actions{display:flex;gap:8px;align-items:center}
.app-drawer-foot button{min-height:var(--tap-min);background:none;border:1px solid rgba(255,255,255,.14);color:rgba(237,227,206,.85);font-family:inherit;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:0 14px;border-radius:2px;cursor:pointer}
.app-drawer-foot .theme-toggle{width:var(--tap-min);padding:0;display:inline-flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){
  .app-drawer{transition:none}
  .modal{animation:none}
}

/* ── 5. Sticky action bar (storefront PDP / checkout) ───────────────────── */
.action-bar{position:sticky;bottom:0;z-index:40;display:flex;gap:var(--sp-3);align-items:center;
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:var(--white);border-top:1px solid var(--border-strong);box-shadow:0 -6px 20px rgba(30,18,8,.06)}
@media (min-width:900px){.action-bar{position:static;box-shadow:none;border:0;padding:0}}

/* ── 6. Storefront chrome (header + footer copy-pasted into every page) ────
   Page <style> blocks load AFTER this file, so these selectors carry one
   extra type selector (header/footer) to out-rank the pages' own
   .header-inner / .btn-login / .footer-inner rules at the same width. */
@media (max-width:599px){
  header .header-inner{height:60px;padding:0 12px 0 16px;gap:6px}
  header .header-inner .logo{gap:0;min-width:0}
  header .header-inner .logo svg{display:none}          /* wordmark alone; six controls must fit 375px */
  header .header-inner .logo-wordmark .l1,header .header-inner .logo-wordmark .l2{font-size:13.5px}
  header .header-inner .header-actions{gap:0;flex-shrink:0}
  header .header-inner .nav-hamburger,header .header-inner .icon-btn,header .header-inner .theme-toggle,header .header-inner .am-search-btn{
    width:44px;height:44px;min-height:44px;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  header .header-inner .btn-login{min-height:36px;padding:0 10px;font-size:10px;letter-spacing:.1em;margin-left:2px;white-space:nowrap;flex-shrink:0}
  header .nav-mobile a{min-height:44px;display:flex;align-items:center}
  footer .footer-inner{grid-template-columns:1fr;gap:32px;padding:40px 16px 28px}
  footer .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  footer .footer-col a{padding:5px 0;margin-bottom:0}
}
@media (max-width:380px){
  header .header-inner .icon-btn,header .header-inner .theme-toggle,header .header-inner .am-search-btn{width:40px}
  header .header-inner .logo-wordmark .l1,header .header-inner .logo-wordmark .l2{font-size:12.5px}
}
@media (min-width:600px) and (max-width:899px){
  footer .footer-inner{grid-template-columns:1fr;gap:36px}
}

/* ── 7. Catalogue filter sheet (phone/tablet, ≤899) ──────────────────────
   shared/mobile-filters.js turns a category page's facet sidebar into an
   off-canvas sheet opened from a "Filters" button in the results toolbar.
   The sidebar element gets .m-filter-sheet; the page's own sidebar rules
   are overridden with !important only inside this breakpoint. */
.m-filter-bar,.m-sheet-head,.m-sheet-foot{display:none}
@media (max-width:899px){
  .m-filter-bar{display:flex;gap:10px;align-items:center;margin:0 0 14px}
  .m-filter-bar .search-wrap{flex:1;margin:0;min-width:0}
  .m-filter-bar .search-wrap input{min-height:44px;font-size:16px}
  .m-filter-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:22px;
    background:var(--white);color:var(--text-body);font-family:inherit;font-size:14px;font-weight:400;cursor:pointer;white-space:nowrap;flex-shrink:0}
  .m-filter-btn:active{background:var(--surface-press)}
  .m-filter-btn svg{width:18px;height:18px;stroke-width:var(--icon-stroke)}
  .m-filter-btn .n[hidden]{display:none}
  .m-filter-btn .n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--dark-wood);color:var(--pale-wood);font-size:11px;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
  .m-filter-sheet{position:fixed!important;inset:0!important;top:0!important;z-index:600;display:block!important;background:var(--pale-wood-light);
    margin:0!important;padding:0 16px calc(96px + env(safe-area-inset-bottom))!important;max-height:none!important;height:auto!important;width:auto!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch;transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  .m-filter-sheet.open{transform:none;visibility:visible}
  .m-sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;min-height:56px;margin:0 -16px 10px;padding:0 6px 0 16px;
    background:var(--pale-wood-light);border-bottom:1px solid var(--border-warm);font-size:17px;font-weight:400;color:var(--text-body)}
  .m-sheet-head button{width:var(--tap-min);height:var(--tap-min);background:none;border:0;color:var(--text-body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .m-sheet-head button svg{width:22px;height:22px;stroke-width:var(--icon-stroke)}
  .m-sheet-foot.open{display:block;position:fixed;left:0;right:0;bottom:0;z-index:601;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--white);border-top:1px solid var(--border-strong)}
  .m-sheet-foot button{width:100%;min-height:var(--control-h-lg);background:var(--dark-wood);color:var(--pale-wood);border:0;border-radius:var(--radius);
    font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  .m-sheet-foot button:active{background:var(--mid-wood)}
  body.m-filters-open{overflow:hidden}
  /* the sheet itself scrolls; no nested scroll areas inside filter groups */
  .m-filter-sheet .filter-group-body{max-height:none!important;overflow:visible!important}
}
@media (prefers-reduced-motion:reduce){.m-filter-sheet{transition:none}}

/* external-link glyph on the Storefront nav item (replaces the ↗ character) */
.app-nav a .ic-ext{width:11px;height:11px;margin-left:5px;opacity:.7;vertical-align:-1px}
.app-drawer a .ic-ext{width:14px;height:14px;opacity:.6;flex-shrink:0}