/* ─────────────────────────────────────────────────────────────────────
   responsive_baseline.css
   ───────────────────────
   World-standard responsive floor for every page. Loaded FIRST in
   base.html so it provides defaults that page-level CSS can still
   override. The few rules that use !important are accessibility
   minimums (touch targets, iOS input-zoom prevention, no horizontal
   scroll) — they must never be silently undone by ad-hoc styles.

   Covers:
     • Sane root reset (box-sizing, text-size-adjust, font-rendering)
     • Modern viewport heights (dvh/svh/lvh with safe vh fallback)
     • iOS safe-area insets for full-bleed elements
     • Inputs are 16px minimum on touch → no iOS focus zoom
     • Touch targets are 44×44 minimum on coarse pointers (Apple HIG / WCAG 2.5.5)
     • No horizontal page scroll, ever
     • Fluid media (img/video/svg never overflow)
     • Tables wrapped in .responsive-table get horizontal scroll on mobile
     • Modal/dialog overlays respect safe-area-inset-bottom
     • Reduced motion respected globally
     • Sensible breakpoint custom properties (informational)
   ───────────────────────────────────────────────────────────────────── */

:root {
  --bp-xs: 360px;   /* small phones */
  --bp-sm: 480px;   /* large phones */
  --bp-md: 768px;   /* tablets */
  --bp-lg: 1024px;  /* small laptops */
  --bp-xl: 1280px;  /* desktops */
  --bp-2xl: 1536px; /* large desktops */

  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);

  /* Fluid inline gutter — 12px on phones, scales smoothly up to 24px. */
  --gutter-inline: clamp(12px, 3vw, 24px);
}

/* ───── Universal reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* Allow user zoom; never use user-scalable=no in viewport meta. */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  /* Hard guarantee: page can never produce a horizontal scrollbar from
     a stray overflowing child. Individual components that want to
     scroll horizontally must opt in with overflow:auto on their own
     container (e.g. .responsive-table). */
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  /* Long URLs/email addresses must wrap instead of pushing layout wide. */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Don't let inherited overflow-wrap stretch grid/flex tracks. */
table, th, td { overflow-wrap: normal; }

/* ───── Fluid media ─────────────────────────────────────────────────── */
img, video, svg, canvas, picture {
  max-width: 100%;
  height: auto;
  /* Inline images often pick up baseline whitespace below them — fix that. */
  vertical-align: middle;
}
img { image-orientation: from-image; }

/* ───── Modern viewport height — fall back gracefully ───────────────── */
.h-screen       { height: 100vh;  height: 100dvh; }
.min-h-screen   { min-height: 100vh; min-height: 100dvh; }
.h-screen-stable{ height: 100svh; }

/* ───── Safe-area helpers for fixed/sticky bars and modals ──────────── */
.safe-px {
  padding-left:  max(var(--gutter-inline), var(--safe-left));
  padding-right: max(var(--gutter-inline), var(--safe-right));
}
.safe-pt { padding-top:    var(--safe-top);    }
.safe-pb { padding-bottom: var(--safe-bottom); }

/* Bottom-anchored UI (toasts, sticky CTAs) shouldn't sit under the
   iPhone home indicator. */
.fixed-bottom-safe,
.sticky-bottom-safe {
  padding-bottom: max(0.75rem, var(--safe-bottom));
}

/* ───── Form inputs: 16px minimum prevents iOS zoom on focus ────────── */
@media (pointer: coarse), (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }
}

/* ───── Touch targets: 44×44 minimum on touch devices (WCAG 2.5.5) ──── */
@media (pointer: coarse) {
  button,
  .btn,
  [role="button"],
  a.btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    min-height: 44px;
  }
  /* btn-small variants stay slightly smaller but still tappable */
  .btn.btn-small,
  .btn.btn-xs,
  .btn-small,
  .btn-xs {
    min-height: 36px;
  }
  /* Icon-only buttons need square tap area */
  .icon-btn,
  .dm-icon-btn,
  .admin-sidebar__btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ───── Responsive table helper ─────────────────────────────────────── */
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hint that this is the scroll container so we don't grow body width */
  contain: layout;
}
.responsive-table > table {
  width: 100%;
  border-collapse: collapse;
}

/* ───── No-scroll body-lock helper (for open modals/sidebar) ────────── */
.is-scroll-locked,
body.dm-drawer-open,
body.modal-open,
body.bbo-modal-open {
  overflow: hidden !important;
  touch-action: none;
}
/* Only lock body scroll on mobile when the dashboard drawer opens —
   on desktop the drawer doesn't exist (sidebar is always visible). */
@media (min-width: 1025px) {
  body.dm-drawer-open { overflow: auto !important; touch-action: auto; }
}

/* ───── Reduced motion — applies to everyone, not just /animations ──── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───── Better print defaults (forms shouldn't bleed) ───────────────── */
@media print {
  *, *::before, *::after { background: transparent !important; box-shadow: none !important; color: #000 !important; }
  body { font-size: 12pt; }
  a, a:visited { text-decoration: underline; }
  .no-print, nav, header, footer, .navbar, .dm-sidebar, .admin-sidebar { display: none !important; }
}

/* ───── Container utility ───────────────────────────────────────────── */
.container,
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left:  var(--gutter-inline);
  padding-right: var(--gutter-inline);
}
.container { max-width: 1200px; }

/* ───── Hide-on-* responsive helpers ────────────────────────────────── */
.hide-on-mobile  { /* default visible on >=768 */ }
.hide-on-desktop { /* default visible on >=768 too unless overridden */ }
@media (max-width: 767.98px) {
  .hide-on-mobile  { display: none !important; }
  .show-on-mobile-flex   { display: flex   !important; }
  .show-on-mobile-grid   { display: grid   !important; }
  .show-on-mobile-block  { display: block  !important; }
  .show-on-mobile-inline { display: inline !important; }
}
@media (min-width: 768px) {
  .hide-on-desktop { display: none !important; }
}

/* ───── Long-string break for code/copy chips ───────────────────────── */
.bb-break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ───── Scrollbar polish (WebKit + Firefox) ─────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.32);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.55); }