/* ============================================================
   BIMAS — responsive corrections
   Loaded last, after every other stylesheet, so these rules win
   without editing the large legacy sheets.

   Scope is deliberately narrow: layout collisions and touch
   ergonomics that were reproducible on real viewport sizes.
   ============================================================ */

/* The global branding layer styles every app heading navy. That selector is
   more specific than the Operations dashboard's local hero rule, leaving the
   title almost invisible against its navy/teal loading panel. Keep this
   contrast contract explicit so the first paint and settled view match. */
html[data-auth-ready="app"] #app-content .omd-hero h1{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.2)!important;
}

/* ── 1. Bottom-anchored UI must clear the mobile navigation bar ──
   #app-bottomnav is shown at <=1024px and is ~4.15rem tall, sitting
   .45rem above the safe area. The install prompt was anchored at
   (safe-area + 1rem), so it covered ~50px of the nav at both phone
   and tablet widths and swallowed taps meant for Home/Tasks/Alerts.

   --bimas-bottomnav-clear is the single value anything floating at
   the bottom should sit above. Toasts and .fab already use their own
   equivalent offsets; reuse this token for anything added later.

   The nav height is stated in px on purpose. The app renders at a 14px
   root font size, so a rem-based figure copied from the nav's own rules
   resolves smaller than the box it has to clear. */
:root {
  --bimas-bottomnav-h: 64px;
  --bimas-bottomnav-clear: calc(
    var(--bimas-bottomnav-h) + 1rem + env(safe-area-inset-bottom, 0px)
  );
  /* Replaced at runtime with the rendered dock footprint. The fallback still
     clears the standard dock before JavaScript is available. */
  --bimas-mobile-nav-clearance: calc(4.9rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1024px) {
  /* The app content is its own scroll pane on mobile. Reserve the precise
     viewport area occupied by the dock so the final row, form button, and
     table action never end up behind a floating navigation bar. */
  html[data-auth-ready="app"] #app-content {
    bottom: var(--bimas-mobile-nav-clearance) !important;
    scroll-padding-block-end: 1rem;
  }

  /* Floating, bottom-anchored helpers share the same clearance. They used
     hard-coded values, which drifted whenever the dock gained a safe-area
     inset or an elevated visual treatment. */
  .mobile-install-prompt,
  .app-update-banner,
  .phone-alerts-prompt,
  .bimas-my-day-btn {
    bottom: calc(var(--bimas-mobile-nav-clearance) + .5rem) !important;
  }

  #notification-center {
    bottom: calc(var(--bimas-mobile-nav-clearance) + .5rem) !important;
  }

  /* Avoid delayed click synthesis and keep the dock's actions reliable. */
  #app-bottomnav {
    touch-action: manipulation;
  }

  .mobile-install-prompt {
    bottom: calc(var(--bimas-mobile-nav-clearance) + .5rem);
  }
}

/* The prompt is appended at opacity 0 and revealed by adding .show in a
   requestAnimationFrame callback. rAF does not run while the page is not
   rendering - a background tab, a locked phone - so the prompt could stay
   invisible yet still be laid out, leaving a full-width ~119px band above
   the nav that silently swallowed every tap. An unrevealed prompt must
   never be a hit target. */
.mobile-install-prompt:not(.show) {
  pointer-events: none;
}

.mobile-install-prompt.show {
  pointer-events: auto;
}

/* Two independent bottom-anchored notices both anchored themselves to the
   nav, so a pending-update banner landed on top of the install prompt.
   The update banner is actionable and short-lived - it wins the slot, and
   the install prompt steps aside until the banner is dismissed. Dismissing
   it removes the node, so this stops matching on its own. */
body:has(#app-update-banner) .mobile-install-prompt,
body:has(#app-update-banner) .mobile-install-prompt.show {
  opacity: 0;
  pointer-events: none;
}

/* The prompt invites the user to install on a phone. Never show it on
   a layout wide enough that there is no phone in play - a desktop
   browser reporting a mobile user-agent string used to surface it. */
@media (min-width: 1025px) {
  .mobile-install-prompt {
    display: none !important;
  }
}

/* ── 2. Touch targets ──
   Icon-only row actions rendered at 27x31 CSS px, with Edit and Delete
   adjacent, so an imprecise tap on a phone or a gloved hand on the shop
   floor could delete the wrong record. WCAG 2.5.5 and the iOS/Android
   guidelines all land at 44-48px.

   Scoped to coarse pointers, so desktop information density - which is
   fine with a mouse - is left exactly as it is.

   On specificity: three earlier 44px attempts already exist (styles.css
   at 768px and 900px, experience-v3.css at 1024px) and all three are
   dead, beaten by per-module rules shaped like
     html[data-auth-ready="app"] body[data-route="hr"] #app-content .hr-tab
   carrying !important. Every selector below therefore uses a doubled
   `#app-content#app-content`, which outranks any single-id rule no matter
   how many classes it stacks. Dropping that doubling silently disables
   these rules again.

   A min-height clamps a smaller `height` upwards, so the `height: 2rem
   !important` on the icon buttons needs no separate override. */
@media (pointer: coarse) {
  html[data-auth-ready="app"] body #app-content#app-content
    :is(button, .btn, a.btn, [role="button"]),
  html[data-auth-ready="app"] #app-topbar#app-topbar :is(button, .btn),
  html[data-auth-ready="app"] #app-bottomnav#app-bottomnav :is(button, a) {
    min-height: 44px !important;
  }

  /* Icon-only controls need width as well as height. Matched by the
     project's own icon-button class names, so labelled buttons keep
     their natural width and dense action rows do not stretch. */
  html[data-auth-ready="app"] body #app-content#app-content
    :is(.btn-icon, .icon-btn, [class*="-icon-btn"], [class*="-menu-btn"]),
  html[data-auth-ready="app"] #app-topbar#app-topbar :is(button, .btn) {
    min-width: 44px !important;
  }

  /* Segmented view switchers (grid / list) are bare <button>s in a toggle
     wrapper, so they match none of the icon-button class names. */
  html[data-auth-ready="app"] body #app-content#app-content
    [class*="view-toggle"] > button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Module tab strips (hr-tabs, payroll-tabs, inv-tabs, reports-tabs, ...)
     are plain buttons, not .btn, so the rules above do not reach them.
     Matching the *container* avoids the `-table` / `-tab` ambiguity a bare
     [class*="-tab"] would introduce. */
  html[data-auth-ready="app"] body #app-content#app-content
    :is([class$="-tabs"], [class*="-tabs "], [role="tablist"]) > :is(button, a) {
    min-height: 44px !important;
  }

  /* A few modules go further still, e.g. bimas-final-ui.css
       body[data-route="products"] #app-content#app-content
         .products-hero-actions .btn
     which stacks four classes on top of the doubled id. Repeating .btn
     matches that weight so source order decides, and this file is last. */
  html[data-auth-ready="app"] body #app-content#app-content
    :is(.btn, button).btn.btn {
    min-height: 44px !important;
  }

  /* Backstop. Modules keep inventing their own button class names
     (sof-header-action, inv-mobile-chip, ...) behind route-scoped
     selectors, so enumerating them never finishes. This matches any
     classed <button> in the content area at a weight above the
     route-scoped rules, and is the rule to extend rather than adding
     another per-module entry above. */
  html[data-auth-ready="app"] body[data-route] #app-content#app-content
    button[class][class] {
    min-height: 44px !important;
  }

  html[data-auth-ready="app"] body #app-content#app-content
    :is(.btn, [role="button"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 3. Wide data tables ──
   Tables with many columns are unreadable when squeezed below their
   natural width. Let them keep it and scroll horizontally inside their
   own container instead of pushing the whole page sideways, and give
   the scroll momentum on touch. */
@media (max-width: 1024px) {
  .table-wrap,
  .table-container,
  .table-responsive,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* ── 4. Horizontal overflow ──
   Deliberately NOT guarded with `html, body { overflow-x: hidden }`.
   All 29 routes were measured at 375px and 768px and none overflows, so
   the guard would buy nothing - while silently hiding the next real
   overflow bug instead of surfacing it, and breaking `position: sticky`
   for descendants. If a module does start overflowing, fix that module.
   Section 3 above is the supported escape hatch for wide tables. */

/* ── 5. Shared screen alignment ────────────────────────────────
   Modules keep their own visual identity, but they now share the same
   structural rules: headings and actions wrap predictably, grid children
   are allowed to shrink, controls never escape their cards, and horizontal
   tab bars remain usable without widening the whole page. */
html[data-auth-ready="app"] #app-content {
  min-width: 0;
}

html[data-auth-ready="app"] #app-content :where(
  .page-container,
  .module-shell,
  [class$="-shell"],
  [class$="-page"],
  [class$="-workspace"]
) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

html[data-auth-ready="app"] #app-content :where(
  .page-header,
  .module-header,
  [class$="-hero"],
  [class$="-header"]
) {
  min-width: 0;
  gap: 0.85rem;
}

html[data-auth-ready="app"] #app-content :where(
  .page-header,
  .module-header,
  [class$="-hero"]
) > :first-child {
  min-width: 0;
}

html[data-auth-ready="app"] #app-content :where(
  .page-actions,
  .header-actions,
  [class$="-actions"],
  [class$="-toolbar"]
) {
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}

html[data-auth-ready="app"] #app-content :where(
  .grid,
  .form-grid,
  .kpi-grid,
  .stats-grid,
  [class*="-grid"],
  [class*="-layout"]
) > * {
  min-width: 0;
}

html[data-auth-ready="app"] #app-content :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-input,
  .form-control,
  .form-select
) {
  max-width: 100%;
}

html[data-auth-ready="app"] #app-content :where(
  .tabs,
  .tabbar,
  [class$="-tabs"],
  [class*="-tabs "],
  [class$="-tabbar"],
  [role="tablist"]
) {
  max-width: 100%;
  scrollbar-width: thin;
}

html[data-auth-ready="app"] #app-content :where(.btn, button) > .material-symbols-outlined {
  flex: 0 0 auto;
}

html[data-auth-ready="app"] #app-content :where(.card, [class$="-card"], [class$="-panel"]) {
  min-width: 0;
}

@media (max-width: 1024px) {
  html[data-auth-ready="app"] #app-content :where(
    .page-header,
    .module-header,
    [class$="-hero"]
  ) {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  html[data-auth-ready="app"] #app-content :where(
    .page-actions,
    .header-actions,
    [class$="-actions"],
    [class$="-toolbar"]
  ) {
    flex-wrap: wrap;
  }

  html[data-auth-ready="app"] #app-content :where(
    .tabs,
    .tabbar,
    [class$="-tabs"],
    [class*="-tabs "],
    [class$="-tabbar"],
    [role="tablist"]
  ) {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  html[data-auth-ready="app"] #app-content :where(
    .tabs,
    .tabbar,
    [class$="-tabs"],
    [class*="-tabs "],
    [class$="-tabbar"],
    [role="tablist"]
  ) > :where(button, a, [role="tab"]) {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  html[data-auth-ready="app"] #app-content :where(h1, .page-title, .module-title) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  html[data-auth-ready="app"] #app-content :where(
    .form-grid,
    [class$="-form-grid"],
    [class$="-filters"],
    [class$="-filter-grid"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-auth-ready="app"] #app-content :where(
    .page-actions,
    .header-actions,
    [class$="-header-actions"]
  ) {
    width: 100%;
  }

  html[data-auth-ready="app"] #app-content :where(
    .page-actions,
    .header-actions,
    [class$="-header-actions"]
  ) > :where(button, .btn, a.btn) {
    flex: 1 1 auto;
  }

  html[data-auth-ready="app"] #app-content :where(canvas, svg, img) {
    max-width: 100%;
  }
}