/*
 * Phase 34 — Shared responsive primitives for vtp-go-main/ web client.
 *
 * Load order: <link> placement IS load-bearing (Pitfall 2). Linked AFTER
 * each page's inline <style> block so shared rules win at equal specificity
 * via cascade-source-order. See AC-34-01b structural check.
 *
 * Cascade-layer at-rules deliberately omitted (Safari 15.4 borderline +
 * Romanian-VPS browser pool unknown). Plain cascade is the authority.
 *
 * NOTE (W6 — :has() Safari >=15.4 floor): §3's `.responsive-table td:has(button)`
 * rule requires Safari 15.4+. If a user lands on Safari <15.4 the action-button
 * alignment rule no-ops silently — visual fallback only, no functional impact.
 * The existing M5 browser pool floor (Phase 27 web/CROSSBROWSER.md + D-234)
 * targets Safari 15.4+, so the dependency is consistent with current targets.
 */

/* §0a — Global keyboard-focus indicator (F-UI-WB-08 — Phase 40 audit fix).
   14 pages set `outline: none` on inputs/buttons (29 instances) and only
   4 of them (enroll.html, index.html, totp.html, technician.html) add a
   focus replacement. A single global `:focus-visible` rule restores the
   keyboard-focus state on the remaining 10 pages with one cascade entry,
   matching the brand primary (#1a3c8f used across topbar and accents).
   Restricted to :focus-visible so mouse clicks don't show the ring. */
*:focus-visible {
  outline: 2px solid #1a3c8f;
  outline-offset: 2px;
}

/* §0a-bis — Skip-to-content link (Phase 40 / Theme A landmark wave).
   Hidden off-screen until focused via keyboard, then materialises in the
   top-left and offers a direct jump to <main id="main">. Pairs with the
   `<div class="content">` → `<main class="content" id="main">` conversion
   on the 16 sidebar pages. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10001;
  background: #1a3c8f;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 8px;
}

/* §0b — Native <dialog> centering (UAT-C1-01 / DEFECT-02 — Phase 38).
   Some older WebKit and certain flex/grid parent contexts render
   <dialog> top-left instead of using the UA stylesheet's implicit
   centering. Explicit `margin: auto` makes centering deterministic
   site-wide across the 39 native <dialog> elements (admin + tech
   surfaces). The §4 phone full-screen rule below intentionally
   overrides this with `margin: 0` at ≤767 px. */
dialog {
  margin: auto;
}

/* §1 — Breakpoint tokens + viewport-safety baseline */
:root {
  --bp-phone-max: 767px;
  --bp-tablet-min: 768px;
  --bp-laptop-min: 1280px;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }
/* BUG-Y (test5) — a flex item defaults to `min-width:auto` (= min-content), so a
   wide child (e.g. planning's 1060px-min week grid) stretches the whole content
   column past the viewport and the page scrolls sideways. `min-width:0` lets the
   content column stay within its flex track; wide children then scroll inside
   their own `overflow-x:auto` wrapper instead of widening the page. */
.content, .main { min-width: 0; }

/* §2 — Touch-target baseline (>=44x44px @ phone) */
@media (max-width: 767px) {
  button, input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
  select, textarea, a[role="button"], a.menu-item,
  .btn-primary, .btn-secondary, .btn-logout {
    min-height: 44px;
  }
  button, a[role="button"], a.menu-item,
  .btn-primary, .btn-secondary, .btn-logout {
    min-width: 44px;
  }
}

/* §3 — .responsive-table utility (codifies form.html data-label pattern).
   BUG-Y (test5): widened from 767px to 1279px. A full multi-column data table
   plus the 240px sidebar does NOT fit a tablet/narrow-laptop viewport, so the
   page scrolled sideways at 768–1279. Card layout applies up to <1280; at
   >=1280 the sidebar (240px) + table have room and the normal table returns. */
@media (max-width: 1279px) {
  .responsive-table thead { display: none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr {
    display: block; width: 100%;
  }
  .responsive-table tr {
    border: 1px solid #e5e7eb; border-radius: 8px;
    margin-bottom: 12px; padding: 8px; background: #fff;
  }
  .responsive-table td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 4px; border: none; text-align: right;
  }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600; color: #6b7280;
    margin-right: 12px; text-align: left; flex-shrink: 0;
  }
  .responsive-table td:has(button) { justify-content: flex-end; }
}

/* §4 — Dialog full-screen-at-phone (selects all <dialog open> at phone) */
@media (max-width: 767px) {
  dialog[open] {
    width: 100%;          /* NOT 100vw — iOS scrollbar overflow (Pitfall 1) */
    max-width: 100%;
    height: 100%; max-height: 100%;
    margin: 0; border-radius: 0;
    padding: 16px; overflow-y: auto;
  }
  dialog[open]::backdrop { background: rgba(0, 0, 0, 0.5); }
}

/* §5 — Hamburger drawer + sidebar collapse */
.hamburger-trigger {
  display: none;
  background: none; border: none;
  padding: 10px; font-size: 24px; line-height: 1;
  cursor: pointer; color: #1a3c8f;
}
@media (max-width: 767px) {
  .hamburger-trigger { display: inline-flex; align-items: center; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    width: 80vw; max-width: 320px;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  }
  body.drawer-open .sidebar { transform: translateX(0); }
  /* BOTH conventions — admin (.content) + tech (.main) — see PATTERNS.md split table */
  .content, .main { margin-left: 0; }
  body.drawer-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;          /* sidebar is z-index: 100 — explicit gap */
  }
  body.drawer-open { overflow: hidden; }
}

/* §7 — Topbar wrap below desktop (BUG-Y, test5). The sticky `.topbar` is a
   no-wrap flex row (hamburger / page title / primary action button). Below
   1280px the action button (e.g. "Adaugă client") clipped off the right edge.
   Allowing the row to wrap drops the button to a second line instead. Applies
   to both the admin `.topbar` and the tech surfaces' equivalent. */
@media (max-width: 1279px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
}

/* §8 — Phone control sizing (BUG-Y, test5). Desktop min-widths on list-header
   / filter controls overflow a 360px phone and force the whole content column
   (and the topbar) wider than the viewport: echipamente `#client-selector`
   (min-width:220px), rapoarte filter selects (min-width:180px). Drop the min
   and cap to 100% so these controls shrink to the viewport; the wrapping flex
   header (§7-style) then stacks them cleanly. */
@media (max-width: 767px) {
  /* `!important` is required: the offending min-widths come from ID selectors
     (#client-selector) AND inline `style="…min-width:180px"` (rapoarte filter
     selects), both of which outrank a plain element/class rule. */
  select,
  .filter-select,
  .search-box,
  input[type="text"],
  input[type="search"] {
    min-width: 0 !important;
    max-width: 100%;
  }
  /* Let list-header / filter rows stack their controls instead of overflowing. */
  .card-header,
  .filters-card,
  .filters,
  .list-header,
  .toolbar {
    flex-wrap: wrap;
  }
}

/* §6 — Prefers-reduced-motion baseline */
@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;
  }
}