/* ==========================================================================
   progressive-enhance.css — Progressive enhancement overrides for capable
   browsers. All enhancements are gated behind @supports feature queries so
   they degrade gracefully on older/limited browsers.

   Load order: after overrides.css but before css-contract.css in
   responsive.css (highest cascade priority in the responsive stack).

   Enhancements:
     1. Smooth scroll — `scroll-behavior: smooth` (safe baseline, no
        feature query needed — non-supporting browsers ignore it)
     2. @supports (display: grid) — enhanced subgrid / gap / auto-fill
        layouts for card grids, stats grids, board columns
     3. @supports (position: sticky) — sticky toolbar, sticky hamburger
        toggle for scroll-accessible navigation
     4. @supports (backdrop-filter: blur()) — frosted glass effect on
        hamburger overlay and mobile drawer
     5. Container query / cqi units where available — refined spacing
        inside container-type contexts
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════════
   1.  SMOOTH SCROLL — global enhanced navigation
       Supported in all modern browsers. Non-supporting browsers silently
       ignore this property and continue with instant scrolling.
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

/* Reduce motion override: if the user prefers reduced motion, kill smooth
   scroll so anchor-jumps are instant (no nausea). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2.  GRID ENHANCEMENTS — @supports (display: grid)
       Enhanced layouts for browsers that support the full Grid spec
       including subgrid, gap, and auto-fill.
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (display: grid) {

  /* ── Subgrid for nested card layouts ─────────────────────────────────── */

  .responsive-card-grid > .card-subgrid {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 1;
  }

  .card-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }

  /* ── Dashboard stats grid — refined column distribution ─────────────── */

  .dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }

  /* ── Board columns — use minmax to prevent overflow ─────────────────── */

  .board-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }

  /* ── Ticket / conversation lists ────────────────────────────────────── */

  .ticket-list,
  .chat-conversations-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
  }

  /* ── Enhanced gap on the general responsive layout ──────────────────── */

  .responsive-layout {
    gap: clamp(16px, 2.5vw, 32px);
  }

  /* ── Form rows as grid for alignment ────────────────────────────────── */

  .form-row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3.  STICKY POSITIONING — @supports (position: sticky)
       Toolbar / hamburger toggle stick to top when scrolling so the user
       always has access to navigation.
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (position: sticky) {

  /* ── Hamburger toggle — stick to top-left on mobile ─────────────────── */

  .hamburger__button {
    position: sticky;
    top: 0;
    z-index: 1051; /* above toolbar */
  }

  /* ── Sidebar navigation — stick to top on desktop ───────────────────── */

  .responsive-layout__sidebar {
    position: sticky;
    top: calc(var(--rh-toolbar-height, 48px) + 16px);
  }

  /* ── Table headers — stick inside scrollable tables ─────────────────── */

  .table-responsive thead th,
  .responsive-overflow-x thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
  }

  /* ── Board column headers — stay visible when column scrolls ────────── */

  .board-column-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-surface, #fff);
  }

  /* ── Modal header — stick inside long modals ────────────────────────── */

  .modal-header-sticky {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-surface, #fff);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4.  BACKDROP-FILTER FROSTED GLASS — @supports (backdrop-filter: blur())
       Apply a subtle blur/glass effect on overlays and the mobile drawer
       for a modern, layered appearance.
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (backdrop-filter: blur(8px)) {

  /* ── Hamburger overlay — frosted dark glass ─────────────────────────── */

  .hamburger__overlay[data-open="true"] {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.25); /* lighter since blur contributes */
  }

  /* ── Drawer panel — frosted surface glass ───────────────────────────── */

  .hamburger__drawer[data-open="true"] {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.85);
  }

  /* ── Modal overlay — frosted glass ──────────────────────────────────── */

  .modal-overlay,
  [data-modal-overlay] {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* ── Toolbar — subtle glass effect when scrolled ────────────────────── */

  .toolbar--scrolled {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.9);
  }
}

/* Reduced motion: disable backdrop-filter animations for vestibular safety */
@media (prefers-reduced-motion: reduce) {
  .hamburger__overlay,
  .hamburger__drawer,
  .modal-overlay,
  [data-modal-overlay],
  .toolbar--scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5.  CONTAINER QUERY UNITS — @supports (container-type: inline-size)
       Use container query length units (cqi, cqb) for spacing that
       scales relative to the nearest containment context rather than the
       viewport. Applied on elements inside elements that already have
       container-type: inline-size set (see grid.css).
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (container-type: inline-size) {

  /* ── Dashboard stat card padding scales with container width ────────── */

  .dashboard-stats-grid > * {
    padding: clamp(12px, 4cqi, 24px);
  }

  /* ── Card grid item padding ─────────────────────────────────────────── */

  .responsive-card-grid > *,
  .card-grid-container > * {
    padding: clamp(8px, 2.5cqi, 20px);
  }

  /* ── Board column inner spacing ─────────────────────────────────────── */

  .board-columns > * {
    padding: clamp(8px, 3cqi, 16px);
  }

  /* ── Chat / ticket list item padding ─────────────────────────────────── */

  .chat-conversations-list > *,
  .ticket-list > * {
    padding: clamp(8px, 3cqi, 16px);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6.  FOCUS-VISIBLE ENHANCEMENT — @supports (selector:focus-visible)
       More accessible focus indicators using :focus-visible instead of
       :focus so keyboard users get a strong ring while mouse users see
       nothing (no double-ring).
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (selector:focus-visible) {

  .hamburger__button:focus-visible,
  .hamburger__menuitem:focus-visible,
  .more-overflow__button:focus-visible,
  .more-overflow__menuitem:focus-visible {
    outline: 2px solid var(--focus-ring, #1a73e8);
    outline-offset: 2px;
  }

  /* Remove the default :focus ring when :focus-visible is supported */
  .hamburger__button:focus,
  .hamburger__menuitem:focus,
  .more-overflow__button:focus,
  .more-overflow__menuitem:focus {
    outline: none;
  }
}