html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.child-m-0 > * {
    /*Stupid hack to prevent margin collapse for validation summary divs*/
    margin: 0;
}

/* body margin/background are owned by the redesign shell (app-shell.css);
   the legacy 60px bottom margin (for the old absolute footer) is gone. */

/* Shared back icon style (simple white arrow, no red dot) */
.back-icon {
  font-size: 22px;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.back-icon:hover {
  transform: scale(1.05);
  color: #ffffff;
}

/* Offline Indicator Styles */
.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 10px 15px;
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
}

.offline-indicator.offline {
  background-color: #dc3545;
  color: white;
}

.offline-indicator.online {
  background-color: #28a745;
  color: white;
}

.offline-indicator .badge {
  font-size: 12px;
}

/* Spin animation for sync icon */
.spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Adjust body padding when offline indicator is shown */
body.has-offline-indicator {
  padding-top: 50px;
}

/* ============================================================================
   Mobile (≤ 767.98px). All rules here are additive — desktop is unchanged.
   Goal: every page should be smooth and tappable on a phone without horizontal
   scroll, without iOS auto-zoom, and without cramped touch targets.
   ============================================================================ */
@media (max-width: 767.98px) {

  /* iOS auto-zooms any input with font-size < 16px when focused. The 14px base
     font-size from the top of this file applies on mobile (the 16px scale-up
     only kicks in ≥768px), so plain inputs would zoom-and-pan on focus.
     Force 16px on standard form controls so the page never zooms.
     Excluding .form-control-sm / .form-select-sm — those are deliberately
     compact (e.g. dense action columns inside Stock Transfers tables); the
     mild zoom-on-focus tradeoff is preferable to ballooning tightly-packed
     row controls. */
  input.form-control:not(.form-control-sm),
  select.form-select:not(.form-select-sm),
  textarea.form-control:not(.form-control-sm),
  .form-control:not(.form-control-sm),
  .form-select:not(.form-select-sm) {
    font-size: 16px;
  }

  /* Touch targets: btn-sm by default is below the WCAG 44×44px minimum. Add a
     min-height so primary actions (Issue, Save, Submit, etc.) are tappable.
     We don't widen them — that would break densely-packed action columns. */
  .btn-sm,
  .btn-link.nav-link {
    min-height: 38px;
  }
  /* Standard buttons too — nudge to 44px floor without changing text size. */
  .btn:not(.btn-sm):not(.btn-link) {
    min-height: 44px;
  }

  /* Default mobile behaviour for .table-responsive — allow horizontal scroll
     so wide tables stay readable. Pages with a deliberate compact-table
     strategy (e.g. Approvals/Index uses table-layout: fixed and hides columns)
     can still override this — no !important here so page-specific rules win. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Trim the layout's outer container padding on phones — Bootstrap's default
     (1.5rem) eats 48px out of a 360px screen. */
  .container-lg,
  .container-fluid,
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* (Deliberately not adding a global col-md-* → 100% safety net here.
     Bootstrap's bare `col-md-6` at <768px shares row width 50/50 by default,
     and changing that globally would also affect tablets at 700-767px where
     two columns are still desirable. Instead, fix the pages that actually need
     col-12 col-md-6 individually — see the Approvals/Index changes.) */

  /* Tabs that stack a row of nav-pills (New Request → JC Material / Stock /
     Shortfalls) overflow on small phones. Allow them to wrap. */
  .nav-pills,
  .nav-tabs {
    flex-wrap: wrap;
  }

  /* The notification bell dropdown sets min-width: 340px inline. min-width
     beats max-width per CSS spec, which on a 360px screen with 12px padding
     each side leaves -16px for content → invisible horizontal scroll. Force
     it to fit the viewport on mobile. */
  .dropdown-menu[aria-labelledby="notifBellDropdown"] {
    min-width: min(340px, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem);
  }

  /* The freeze banner headline (1.6rem) overflows the icon column on phones —
     keep the icon a touch smaller so the headline word "FROZEN" fits. */
  .st-freeze-icon {
    font-size: 2rem;
  }
  .st-freeze-headline {
    font-size: 1.15rem;
  }
}