/* ==========================================================================
   BlitzTech — global responsive layer
   --------------------------------------------------------------------------
   Loaded LAST from universal_base.html (after every page's extra_css), so it
   applies to the website, shop, staff dashboard, inventory, POS, client
   portal, supplier portal and BlitzShip alike.

   Breakpoints follow Bootstrap 5.3 exactly so nothing here fights the grid:
     phone   : < 576px      (xs)
     large phone / small tablet : 576–767px (sm)
     tablet  : 768–991px    (md)
     desktop : >= 992px     (lg+)  — this file changes nothing up there except
                                     fluid type and the always-on safety nets.

   Rules of the road:
   - Additive only. No component is restyled on desktop.
   - Tables never squash: they scroll sideways inside their own container with
     the first column pinned (owner's decision, 2026-11-03). Unwrapped
     `table.table` elements are wrapped at runtime by universal_base.html.
   - Opt out of the runtime wrap with class `no-responsive-wrap` on the table
     or any ancestor; opt out of the pinned column with `no-sticky-col`.
   ========================================================================== */

/* ── 1. Always-on safety nets ─────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* `clip` (not `hidden`) so position:sticky keeps working inside the page. */
body { overflow-x: clip; }

img, video { max-width: 100%; height: auto; }
iframe, embed, object { max-width: 100%; }
canvas { max-width: 100%; }

/* Flex/grid children default to min-width:auto, which lets one long word or
   wide table push the whole page sideways. */
.row > *, .g-page-header > *, .card, .card-body { min-width: 0; }

/* Badges are white-space:nowrap, so a flex row that shrinks them clips the
   label (POS "No shift open" became "No shift op"). Keep them whole. */
.d-flex > .badge { flex-shrink: 0; }

/* Long unbroken strings (emails, SKUs, URLs, references) wrap instead of
   overflowing their card. Tables are excluded — they scroll instead. */
.card-body, .g-card, .alert, .modal-body, .list-group-item, dd {
  overflow-wrap: anywhere;
}
.card-body table, .g-card table, .modal-body table { overflow-wrap: normal; }

/* Touch-friendly horizontal scrolling everywhere a table scrolls. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Fluid page titles: scale smoothly between phone and desktop. */
.g-page-header h1, .g-page-header .h3 {
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
}

/* ── 2. Touch devices (any width) ─────────────────────────────────────── */
@media (pointer: coarse) {
  .btn:not(.btn-sm):not(.btn-close):not(.btn-link),
  .form-control:not(.form-control-sm),
  .form-select:not(.form-select-sm),
  .dropdown-item,
  .page-link {
    min-height: 44px;
  }
  .btn:not(.btn-sm):not(.btn-close):not(.btn-link) {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-sm { min-height: 36px; }
  .form-check-input { width: 1.25em; height: 1.25em; }
  .dropdown-item { display: flex; align-items: center; }
}

/* ── 3. Tablet and below (< 992px) ────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Website/shop collapsed navbar: scroll inside itself instead of running
     off the bottom of the screen on long menus. */
  .bz-navbar .navbar-collapse {
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }

  /* Tabs/pills scroll sideways rather than wrapping into a tall stack.
     Vertical navs (the sidebar) are untouched. */
  .nav-tabs:not(.flex-column),
  .nav-pills:not(.flex-column) {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs:not(.flex-column) .nav-link,
  .nav-pills:not(.flex-column) .nav-link { white-space: nowrap; }

  .pagination { flex-wrap: wrap; row-gap: .25rem; }

  /* Rows of buttons (`<div class="d-flex gap-2">` + .btn / dropdown .btn) wrap
     onto a second line instead of running off the right edge — e.g. the
     dashboard welcome banner's Exchange Rates / New Quote / Quick Actions. */
  .d-flex:not(.flex-column):not(.flex-nowrap):has(> .btn, > .dropdown > .btn, > .btn-group, > form > .btn) {
    flex-wrap: wrap;
  }
  /* Space-between header rows (very common in card and page headers). */
  .card-header.d-flex,
  .card-header > .d-flex,
  .d-flex.justify-content-between.align-items-center,
  .d-flex.justify-content-between.align-items-start {
    flex-wrap: wrap;
    gap: .5rem;
  }

  /* Chart containers with a fixed pixel height stay readable. */
  .chart-container, .chart-wrapper { max-width: 100%; }
}

/* ── 4. Phones and small tablets (< 768px) ────────────────────────────── */
@media (max-width: 767.98px) {
  /* Tables: keep every column, scroll sideways, pin the first column. */
  .table-responsive > .table { margin-bottom: 0; }
  .table-responsive > .table > thead th { white-space: nowrap; }
  .table-responsive > .table td { vertical-align: middle; }

  .table-responsive:not(.no-sticky-col) > .table:not(.no-sticky-col) > :is(thead, tbody, tfoot) > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 1px 0 0 var(--bs-border-color, #dee2e6), 4px 0 6px -4px rgba(15, 23, 42, .18);
  }
  .table-responsive:not(.no-sticky-col) > .table-dark:not(.no-sticky-col) > :is(thead, tbody, tfoot) > tr > :first-child,
  .table-responsive:not(.no-sticky-col) > .table:not(.no-sticky-col) > thead.table-dark > tr > :first-child {
    background-color: var(--bs-dark, #212529);
  }
  .table-responsive:not(.no-sticky-col) > .table:not(.no-sticky-col) > thead.table-light > tr > :first-child {
    background-color: var(--bs-light, #f8f9fa);
  }

  /* Page-header action bars (dashboard_base `page_actions`) wrap onto new
     lines instead of running off the right edge. Button groups there become
     a tidy row of separate buttons. */
  .g-page-header { align-items: flex-start; }
  .g-page-header > .btn-toolbar { width: 100%; }
  .g-page-header .btn-toolbar,
  .g-page-header .btn-toolbar .btn-group {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .g-page-header .btn-toolbar .btn-group > .btn,
  .g-page-header .btn-toolbar .btn-group > .btn-group > .btn {
    border-radius: var(--bs-btn-border-radius, .375rem) !important;
    margin-left: 0 !important;
  }


  /* Inline fixed widths from older templates must not exceed the screen. */
  [style*="width"][style*="px"]:not(img):not(canvas):not(svg):not(i) {
    max-width: 100%;
  }
  .dropdown-menu { max-width: calc(100vw - 1.5rem); }

  /* Runtime toasts (BlitzTechUtils.showNotification and inventory alerts)
     are created with an inline min-width:300px; on phones span the width. */
  .alert.position-fixed {
    left: .75rem !important;
    right: .75rem !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Modals: large/xl dialogs use the full width with a small gutter. */
  .modal-lg, .modal-xl { --bs-modal-width: calc(100vw - 1rem); }
  .modal-body { overflow-wrap: anywhere; }
  .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .modal-footer > .btn { flex: 1 1 auto; }

  /* Comfortable spacing for list/detail rows. */
  .list-group-item { padding: .75rem .875rem; }
  .card-body { padding: 1rem; }
  .card-header, .card-footer { padding: .75rem 1rem; }

  /* Description lists (detail pages) stack label over value. */
  dl.row > dt[class*="col-sm-"], dl.row > dd[class*="col-sm-"] { width: 100%; }
}

/* ── 5. Phones (< 576px) ──────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* 16px inputs stop iOS Safari zooming the page on focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: 16px !important;
  }
  /* ...and let them grow to fit it: `-sm` controls and pages that pin a
     height otherwise clip the text ("All Categories" cut in half). */
  .form-control:not(textarea), .form-select {
    height: auto !important;
    line-height: 1.4;
  }

  /* Bootstrap input groups with buttons wrap rather than squash the input. */
  .input-group > .form-control,
  .input-group > .form-select { min-width: 0; }

  /* Form action rows: full-width, stacked buttons are easier to hit. */
  .form-actions, .form-buttons { display: flex; flex-direction: column; gap: .5rem; }
  .form-actions > .btn, .form-buttons > .btn { width: 100%; }

  .btn-lg { --bs-btn-padding-x: 1rem; }

  /* Stat/metric cards: tighter so two fit per row where the grid allows. */
  .bz-stat-card, .stat-card, .metric-card { padding: .875rem !important; }

  h1, .h1 { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2rem); }
  h2, .h2 { font-size: clamp(1.3rem, 1rem + 1.6vw, 1.75rem); }

  .breadcrumb { font-size: .8125rem; flex-wrap: wrap; }
}

/* ── 6. Print: never print the responsive chrome ──────────────────────── */
@media print {
  .table-responsive > .table > :is(thead, tbody, tfoot) > tr > :first-child {
    position: static !important; box-shadow: none !important;
  }
}