/* ============================================================================
   AMAC Suite Shell v1.2 — Responsive / Mobile add-on layer
   ----------------------------------------------------------------------------
   ADDITIVE. Load this AFTER amac-suite-shell-v1.1.css. It only *adds* a
   phone + tablet responsive layer (rail -> off-canvas drawer, hero reflow,
   form/table/touch-target rules) and a set of per-app rail adapters. It never
   redefines a v1.1 selector, so reverting is just removing the v1.2
   <link>/<script> tags — v1.1 behaviour is untouched.

   Pairs with amac-suite-shell-v1.2.js (bootMobileNav), which:
     - adds `body.amac-mobile` when the viewport is <= 1024px
     - finds the app's nav rail and tags it `[data-amac-rail]`
     - injects the hamburger toggle and the scrim
     - toggles `body.amac-rail-open` to open/close the drawer

   PROGRESSIVE ENHANCEMENT: the off-canvas behaviour is gated on
   `body.amac-mobile` (set by JS only AFTER the hamburger is in the DOM). If
   the JS fails to load, no class is set and the rail keeps its desktop
   behaviour (may overflow, but never a dead-end with no way to open nav).

   BREAKPOINTS (AMAC Suite responsive contract — Master Instructions §6.3):
     phone:   <= 480px
     tablet:  481px – 1024px   (drawer mode applies <= 1024)
     desktop: >= 1025px        (unchanged — today's layout)
   ========================================================================= */

:root {
  --amac-drawer-w: min(86vw, 320px);
  --amac-z-scrim:  1100;
  --amac-z-drawer: 1200;
  --amac-z-toggle: 1300;
  --amac-tap-min:  44px;
}

/* ============ MOBILE NAV BAR + HAMBURGER (injected by v1.2.js) ============ */
/* The navbar is injected as the first child of the app hero. Hidden on
   desktop; shown only when bootMobileNav has marked the body .amac-mobile. */
.amac-mobile-navbar {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px 0;
}
/* Double-gated: the hamburger shows only when JS has marked the body
   .amac-mobile AND the viewport is actually <= 1024px (so a stale class can
   never leak it onto desktop). Fixed top-left so the nav is always reachable
   regardless of how tall the app hero is. */
@media (max-width: 1024px) {
  /* v1.3: full-width slim bar (hamburger + app title) instead of a floating
     top-left button. The verbose hero collapses below; its controls move into
     the ☰ drawer. */
  body.amac-mobile .amac-mobile-navbar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    padding: 0 10px;
    gap: 10px;
    background: #022544;
    box-shadow: 0 2px 12px rgba(2, 37, 68, 0.28);
    z-index: var(--amac-z-toggle);
  }
  body.amac-mobile .amac-mobile-title {
    display: block;   /* override the desktop-hide below (the mobile rule used to
                         omit display, so the title was invisibly display:none) */
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Always-visible, reliable Suite Home link in the slim bar (plain <a href>). */
  body.amac-mobile .amac-mobile-home {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    padding: 7px 11px;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 8px;
  }
  body.amac-mobile .amac-mobile-home:active { background: rgba(255, 255, 255, 0.14); }
  /* Reserve space for the fixed 48px slim bar (the hero was the spacer before;
     it is collapsed now). */
  body.amac-mobile { padding-top: 48px; }
}
.amac-mobile-title,
.amac-mobile-home { display: none; }

/* ============ MOBILE SLIM HEADER — collapse the verbose hero (v1.3) ========
   The slim bar carries the hamburger + app title. On mobile we hide the
   status-chip topline, drop the now-duplicated logo/title, and collapse the
   hero to a thin strip. The functional controls (.hero-actions buttons +
   the .command-bar menus) are MOVED into the ☰ drawer by amac-suite-shell-v1.2.js
   (tagged .amac-in-drawer), so nothing is lost — just relocated. All
   mobile-gated (<=1024px + body.amac-mobile) → desktop is untouched. */
@media (max-width: 1024px) {
  /* Hide the verbose hero text block — the title lives in the slim bar. Hiding
     .hero-copy covers every app's brand / title / chips / description (ERP, CRM,
     Inspect, …); the individual selectors catch apps without a .hero-copy. */
  body.amac-mobile .hero-copy { display: none !important; }
  body.amac-mobile .hero-topline,
  body.amac-mobile .hero .hero-logo,
  body.amac-mobile .hero-sub,
  body.amac-mobile .app-hero h1,
  body.amac-mobile .hero > h1 { display: none !important; }
  body.amac-mobile .hero.app-hero,
  body.amac-mobile .hero {
    min-height: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
  }
  /* Header controls relocated into the drawer: full-width, stacked, flat. */
  body.amac-mobile [data-amac-rail] .amac-in-drawer {
    width: auto !important;
    max-width: 100% !important;
    margin: 8px 8px 0 8px !important;
    box-shadow: none !important;
  }
  body.amac-mobile [data-amac-rail] .command-bar.amac-in-drawer {
    flex-wrap: wrap;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
  /* Relocated hero-actions STACK vertically in the drawer so their items (the
     Suite/File/Quick Add <details> flyouts + any plain link like .btn-ghost
     "Suite Home") never overlap — the horizontal hero layout would otherwise let
     a flyout's summary cover a sibling link, blocking its tap (operator-reported
     on Live Oak). */
  body.amac-mobile [data-amac-rail] .hero-actions.amac-in-drawer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  body.amac-mobile [data-amac-rail] .hero-actions.amac-in-drawer > * { width: 100% !important; }
  /* Any relocated <details> flyout in the drawer renders INLINE as a full-width
     accordion — covers the command-bar (.menu-drop > .menu-list) AND the
     hero-action buttons (.quick-actions-drop > .quick-actions-panel: Suite /
     File / Quick Add). Without this their absolute panel opens off the drawer
     edge and is unreachable (operator-reported). */
  body.amac-mobile [data-amac-rail] .amac-in-drawer details { width: 100% !important; }
  body.amac-mobile [data-amac-rail] .amac-in-drawer details > summary {
    display: block;
    padding: 10px 12px;
    min-height: 44px;
    cursor: pointer;
  }
  body.amac-mobile [data-amac-rail] .amac-in-drawer details[open] > :not(summary) {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    inset: auto !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  /* Shell-created drawer for RAIL-LESS apps (Inspect, Field Forms, …): when an
     app has no nav rail, amac-suite-shell-v1.2.js builds an <aside
     class="amac-mobile-drawer" data-amac-rail> to hold the relocated header
     controls, so the ☰ still opens something. It inherits the off-canvas
     geometry from the [data-amac-rail] rule below; here we give it the navy
     surface + clearance for the fixed slim bar. */
  body.amac-mobile .amac-mobile-drawer {
    background: #022544 !important;
    padding-top: 56px !important;
    padding-bottom: 16px !important;
    color: #ffffff;
  }
  body.amac-mobile .amac-mobile-drawer .amac-in-drawer { color: #ffffff; }

  /* ---- KPI / summary strip → swipeable single row (operator: compact the
     ERP-style .summary-grid dashboard cards so the work area is reachable on a
     phone instead of a tall stack). The cards keep full info; you swipe
     sideways. Generic to the shared .summary-grid / .kpi-strip class. ------- */
  body.amac-mobile .summary-grid,
  body.amac-mobile .kpi-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 8px !important;
    padding-bottom: 4px;
  }
  body.amac-mobile .summary-grid > *,
  body.amac-mobile .kpi-strip > * {
    flex: 0 0 auto !important;
    width: 152px !important;
    min-width: 152px !important;
    max-width: 172px !important;
    scroll-snap-align: start;
  }
}

/* ============ MOBILE DATA TABLES → CARDS (v1.4) ============================
   Operator decision: wide data tables (CRM Accounts/Contacts, etc.) render as
   ONE labelled card per row on phones instead of misaligned columns. The shell
   JS cardifyTables() tags qualifying tables .amac-cardify and stamps each <td>
   with data-amac-label (its column header); the CSS below turns each row into a
   card. Gated on body.amac-mobile, so desktop + the wide table are untouched.
   Opt out by wrapping a table in an .amac-no-cards ancestor. */
@media (max-width: 1024px) {
  body.amac-mobile table.amac-cardify { display: block; width: 100%; border: 0; }
  body.amac-mobile table.amac-cardify thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.amac-mobile table.amac-cardify tbody { display: block; }
  body.amac-mobile table.amac-cardify tbody tr {
    display: block;
    margin: 0 0 10px 0;
    padding: 8px 12px;
    border: 1px solid var(--ss-line, #d7e2ef);
    border-radius: 10px;
    background: var(--ss-surface, #ffffff);
    box-shadow: 0 1px 4px rgba(2, 37, 68, 0.06);
  }
  body.amac-mobile table.amac-cardify tbody td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    padding: 4px 0;
    border: 0 !important;
    text-align: right;
    white-space: normal;
    min-width: 0;
  }
  body.amac-mobile table.amac-cardify tbody td::before {
    content: attr(data-amac-label);
    font-weight: 700;
    color: var(--ss-ink-soft, #51627a);
    text-align: left;
    flex: 0 0 40%;
    white-space: normal;
  }
  body.amac-mobile table.amac-cardify tbody td:empty { display: none; }
  /* first cell = card title (typically the record-name link) */
  body.amac-mobile table.amac-cardify tbody td:first-child {
    display: block;
    text-align: left;
    font-weight: 800;
    font-size: 15px;
    border-bottom: 1px solid var(--ss-line, #eef3f8);
    margin-bottom: 4px;
    padding-bottom: 6px;
  }
  body.amac-mobile table.amac-cardify tbody td:first-child::before { display: none; }
}

.amac-mobile-navtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--amac-tap-min);
  height: var(--amac-tap-min);
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: #022544;
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
  z-index: var(--amac-z-toggle);
}
.amac-mobile-navtoggle:hover { background: #0d3a63; }
.amac-mobile-navtoggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.amac-mobile-navtoggle svg { width: 22px; height: 22px; display: block; }
.amac-mobile-navtoggle .amac-nav-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}

/* ---- Defend the shell's injected hamburger suite-wide --------------------
   Apps that load amac-suite-shell-v1.1.css carry
   `body.suite-shell button { background: var(--ss-red); border-color: transparent }`
   (specificity 0,1,2). Plain `.amac-mobile-navtoggle` (0,1,0) loses that battle,
   so the injected hamburger renders AMAC-red in those apps (CRM hit this and
   patched it app-side in v2.12.1). These higher-specificity `!important` resets
   keep the shell's OWN control navy in every app, so no app has to re-patch the
   shell's chrome. The toggle is always mounted inside `.amac-mobile-navbar`
   (see mountChrome in v1.2.js), so both selectors below always match it. The
   scrim/navbar are <div>s, untouched by the `button` rule, so they need no
   defense. */
.amac-mobile-navbar .amac-mobile-navtoggle,
button.amac-mobile-navtoggle {
  background: #022544 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
}
.amac-mobile-navbar .amac-mobile-navtoggle:hover,
button.amac-mobile-navtoggle:hover { background: #0d3a63 !important; }

/* ============ SCRIM ============ */
.amac-mobile-scrim {
  position: fixed;
  inset: 0;
  background: rgba(2, 37, 68, 0.45);
  z-index: var(--amac-z-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}
body.amac-mobile.amac-rail-open .amac-mobile-scrim {
  opacity: 1;
  visibility: visible;
}

/* ============ GENERIC RAIL -> DRAWER ============ */
/* Any element tagged [data-amac-rail] becomes a left off-canvas drawer below
   1024px once JS has set body.amac-mobile. Forcing the drawer geometry here
   (position/width/transform) normalises every app's rail — whether it was a
   fixed rail (ERP .module-rail), a flex sidebar, or a sticky column. */
@media (max-width: 1024px) {
  body.amac-mobile [data-amac-rail] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--amac-drawer-w) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    margin: 0 !important;
    /* !important on the transform overrides each app's higher-specificity
       desktop rail transform (e.g. ERP's body.mr-on.mr-unpinned .module-rail). */
    transform: translateX(-100%) !important;
    transition: transform 0.24s ease;
    z-index: var(--amac-z-drawer) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  body.amac-mobile.amac-rail-open [data-amac-rail] {
    transform: translateX(0) !important;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.40);
  }
  /* Page itself never scrolls sideways; wide content scrolls inside its own
     container (see per-app adapters). */
  body.amac-mobile { overflow-x: hidden; }

  /* Comfortable tap targets for the drawer's nav items (the primary nav once
     the rail is a drawer). min-height only — never force display so each app's
     internal icon/label layout is preserved. */
  body.amac-mobile [data-amac-rail] a,
  body.amac-mobile [data-amac-rail] button,
  body.amac-mobile [data-amac-rail] .module-pin,
  body.amac-mobile [data-amac-rail] .mn-trigger {
    min-height: var(--amac-tap-min);
  }
}

/* ============ GENERIC REFLOW for shell-markup apps (.suite-shell / .ss-*) ===
   Pure media queries (no .amac-mobile gate) — safe enhancements that apply
   even without the JS. They only touch shell-owned classes, so apps with a
   fully bespoke layout are unaffected and get their fix via a per-app adapter
   below. */
@media (max-width: 1024px) {
  .ss-hero,
  body.suite-shell .hero,
  body.suite-shell section.hero {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .ss-hero h1,
  body.suite-shell .hero h1,
  body.suite-shell section.hero h1 { font-size: 18px; }

  .ss-form-grid { grid-template-columns: 1fr; gap: 4px 0; }
  body.suite-shell .form-grid { grid-template-columns: 1fr; }

  .ss-kpi-strip { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Tables already scroll inside .ss-table-wrap (overflow-x:auto). Make sure
     the wrapper can't push the page wide. */
  .ss-table-wrap,
  body.suite-shell .table-wrap { max-width: 100%; }
}

@media (max-width: 480px) {
  .ss-kpi-strip { grid-template-columns: 1fr 1fr; }

  /* 44px tap targets for primary controls on phones. Scoped to phone width so
     dense desktop/tablet toolbars are untouched. */
  .ss-btn-primary,
  .btn-primary,
  .amac-mobile-navtoggle,
  body.suite-shell button:not(.ss-menu-item):not(.menu-item),
  body.suite-shell .button {
    min-height: var(--amac-tap-min);
  }

  /* Modals already use min(720px, 100vw-32px) — fine. Inspector side column
     collapses on the shell-markup apps. */
  .ss-workspace.has-inspector { grid-template-columns: 1fr; }
  .ss-workspace.has-inspector .ss-splitter,
  .ss-workspace.has-inspector .ss-inspector { display: none; }
}

/* ============================================================================
   PER-APP RAIL ADAPTERS
   ----------------------------------------------------------------------------
   Each AMAC app offsets its content beside a bespoke rail in a slightly
   different way. The generic drawer rules above handle the RAIL; these blocks
   reset each app's CONTENT OFFSET so the content goes full-width on mobile.
   All gated on `body.amac-mobile` and the <= 1024px breakpoint. `!important`
   is deliberate — it overrides each app's higher-specificity desktop offset
   (e.g. ERP's `body.mr-on.mr-pinned .app-shell`).

   Phase 0 ships the ERP adapter (pilot). Phase 1 extends this section for the
   remaining apps. Keep one labelled block per app.
   ========================================================================= */

@media (max-width: 1024px) {
  /* ---- AMAC ERP (.module-rail + .app-shell) ------------------------------ */
  body.amac-mobile .app-shell {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
  }
  /* Wide tables / report grids scroll inside the workspace, not the page. */
  body.amac-mobile .app-shell .workspace {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Horizontal command-bar wraps instead of forcing width. */
  body.amac-mobile .command-bar { flex-wrap: wrap; }
  /* Global search + hero never exceed the viewport. */
  body.amac-mobile .gs-container,
  body.amac-mobile .hero.app-hero { max-width: 100%; }
  /* ERP hero is a justify-between flex row — stack it so the injected
     hamburger, chip topline and action flyouts read top-to-bottom on a phone. */
  body.amac-mobile .hero.app-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 52px; /* clear the fixed nav toggle (top:8 + 44px) */
  }
  /* ERP hero is verbose (logo + sub) — tighten it on phones so the workspace
     is reachable without a long scroll. */
  body.amac-mobile .hero .hero-sub { display: none; }
  body.amac-mobile .hero .hero-logo { width: 96px; }
  /* Right inspector stacks full-width instead of a fixed side panel. */
  body.amac-mobile .inspector-panel {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* ---- Workspace collapse to a single STACKED column (ALL command-center
     apps that share the .workspace / .work-panel / .inspector-panel layout:
     ERP, CRM, HR, Issues, Management, Workboards, Tech Log, Workday, Shop
     Floor, Inspect, Eng-Calc, DB Console, Field Forms, …) -----------------
     On desktop the workspace is a multi-column grid (main | splitter | a fixed
     ~440px inspector). Several apps PIN the inspector with an !important grid —
     e.g. ERP `body.mr-on .workspace { grid-template-columns: minmax(0,1fr) 6px
     var(--inspector-width,440px) !important }`. On a phone the fixed 440px +
     6px gap exceed the viewport, so the main `minmax(0,1fr)` track is squeezed
     to 0px and the content collapses to an ~18px sliver (the reported bug).
     Forcing display:block makes the children FLOW: main content fills the full
     width, the splitter is dropped, and the inspector STACKS BELOW the content
     (operator decision 2026-06-07). `html body.amac-mobile` = specificity
     (0,2,2), so it beats each app's (0,2,1) !important pinned-grid rule no
     matter the stylesheet order. Mobile-gated (<=1024px + body.amac-mobile) so
     desktop is completely untouched. Wide tables still scroll inside the
     workspace via the overflow-x:auto rule above (the overflow propagates up
     from the full-width work-panel to the nearest scroll container). */
  html body.amac-mobile .workspace {
    display: block !important;
  }
  html body.amac-mobile .workspace > .work-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.amac-mobile .workspace > .splitter { display: none !important; }
  html body.amac-mobile .workspace > .inspector-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 10px;
  }
  /* ---- Module-group sub-menus: inline (accordion) in the drawer ----------
     In the drawer, a rail's sub-menu flyouts expand INLINE below the tapped
     group instead of the desktop cascade-right flyout (which opens off the
     drawer's right edge and gets clipped). Every suite rail shares the same
     .mn-flyout / .module-group / .mn-flyout-item vocabulary, so this rule is
     STRUCTURE-AGNOSTIC: it targets any [data-amac-rail] flyout regardless of
     whether the rail wraps its groups in #tabStrip (ERP) or .mr-body (CRM, EQS,
     Tech Log, Workday, Eng-Calc, Admin Center). Closed flyouts keep their own
     display:none; desktop is untouched (mobile-gated). This generalises the fix
     so an app does NOT have to re-patch its own rail. The per-app duplicates this
     replaced have retired: CRM's v2.12.1 block (removed in CRM v2.12.3) and ERP's
     #tabStrip booster (retired below, after ERP v3.7.8 dropped its ID pin). */
  body.amac-mobile [data-amac-rail] .mn-flyout {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    margin: 2px 0 8px !important;
  }
  body.amac-mobile [data-amac-rail] .mn-flyout::before {
    display: none !important; /* hover-bridge not needed inline; avoids a stray left overhang */
  }
  /* ERP #tabStrip booster RETIRED 2026-05-31. It existed only because ERP pinned
     its flyout with an ID rule (position:fixed!important, (1,3,0)) that the generic
     (0,3,1) rule above couldn't outrank. ERP v3.7.8 dropped that !important (->
     position:fixed in amac-ui-v3.4.2.css), so the generic rule now wins for ERP on
     mobile too -- verified at 375/768/1280 (ERP flyout static/inline in the drawer;
     desktop still position:fixed). */
}