/* GMAP V981 — WCAG 2.2 AA focus visibility and narrow-viewport reflow hardening.
   Loaded after existing page styles. This is a targeted safety net, not a full conformance claim. */
:root {
  --gmap-v981-focus: #005fcc;
  --gmap-v981-focus-gap: #ffffff;
}

/* Make keyboard focus consistently visible, including custom role-based controls. */
:where(a[href], button, input, select, textarea, summary,
       [role="button"], [role="link"], [role="checkbox"], [role="radio"],
       [role="tab"], [role="menuitem"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--gmap-v981-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--gmap-v981-focus-gap) !important;
}

/* Keep keyboard focus visible for controls nested in custom cards and widgets. */
:where([role="button"], [role="link"], [role="tab"], [role="menuitem"]):focus-visible {
  position: relative;
  z-index: 2;
}

/* Avoid common flex/grid children forcing horizontal page overflow. */
:where(main, [role="main"], .app, .shell, .container, .wrap, .content,
       .page, .panel, .workspace, .dashboard, .main-content) {
  min-inline-size: 0;
  max-inline-size: 100%;
}
:where(main, [role="main"], .app, .shell, .container, .wrap, .content,
       .page, .panel, .workspace, .dashboard, .main-content) > * {
  min-inline-size: 0;
}
:where(p, li, dd, dt, td, th, label, a, button, small, code) {
  overflow-wrap: anywhere;
}
:where(img, video, canvas, svg, iframe) {
  max-inline-size: 100%;
}

/* Keep genuinely wide data tables usable without forcing the whole page to scroll. */
:where(.table-responsive, .table-wrap, .table-wrapper, .table-container,
       .table-scroll, [data-table-scroll="true"]) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 320px) {
  html, body { min-inline-size: 0 !important; max-inline-size: 100% !important; }
  :where(main, [role="main"], .app, .shell, .container, .wrap, .content,
         .page, .panel, .workspace, .dashboard, .main-content) {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
  }
}

@media (forced-colors: active) {
  :where(a[href], button, input, select, textarea, summary,
         [role="button"], [role="link"], [role="checkbox"], [role="radio"],
         [role="tab"], [role="menuitem"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }
}