/* ============================================================================
   ids-responsive.css  —  IDSWeb shared responsive foundation
   Delivered: v17.21  ·  Phase 0 of "fully mobile responsive"

   SAFETY CONTRACT (this delivery):
   This file is PURELY ADDITIVE. At desktop widths (>= 992px) your existing
   design is untouched — every rule that could move a layout is scoped to a
   phone/tablet media query, gated behind (pointer: coarse), or opt-in via an
   .ids-* class that no existing element carries. The only always-on rules are
   invisible/standard (text-size-adjust, media max-width:100%, reduced-motion).

   Load LAST in _Host.cshtml (after grid-styles.css) so it wins the cascade.

   NOTE: The C# breakpoint alignment + JS debounce from the audit are a SEPARATE
   later step and are intentionally NOT part of this build, so this can be tested
   in isolation without any behavioural change.

   ── CANONICAL BREAKPOINTS (Bootstrap-aligned; already the majority in the app)
        Phone     < 768px
        Tablet    768–991px
        Laptop    992–1366px
        Desktop   >= 1367px
   Do not invent new breakpoints (no more 860/760/700/640px). For new pages,
   prefer the .ids-* utilities below over hand-rolled media queries.
   ============================================================================ */

:root {
  --ids-bp-sm:   576px;
  --ids-bp-md:   768px;
  --ids-bp-lg:   992px;
  --ids-bp-xl:  1200px;
  --ids-bp-xxl: 1400px;

  --ids-touch-min: 44px;
  --ids-gutter: clamp(12px, 4vw, 32px);
  --ids-safe-l: env(safe-area-inset-left, 0px);
  --ids-safe-r: env(safe-area-inset-right, 0px);
  --ids-safe-t: env(safe-area-inset-top, 0px);
  --ids-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============================================================================
   1. ALWAYS-ON GLOBALS  — standard, invisible on desktop.
   ============================================================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Media never blows out its container. (canvas/svg deliberately excluded so
   maps and vector charts are never touched.) */
img, video, iframe, embed, object {
  max-width: 100%;
}

/* ============================================================================
   2. MOBILE / TABLET GUARDS  (<= 991.98px only — desktop never sees these)
      The cheap, high-leverage fixes that stop the "broken on mobile" feeling.
   ============================================================================ */
@media (max-width: 991.98px) {

  /* Kill accidental sideways scroll without breaking sticky positioning.
     Scoped to mobile so desktop pages that intentionally scroll wide are safe. */
  html { overflow-x: clip; }

  /* Flex/grid children default to min-width:auto — the #1 cause of a wide table
     shoving the whole page sideways. Neutralise it inside the app body only. */
  .rz-body * { min-width: 0; }

  /* Long unbroken strings (URLs, ids) wrap instead of forcing width */
  .rz-body { overflow-wrap: break-word; }

  /* ── Shell hardening: sidebar overlays content instead of squishing it.
        Rides on Radzen's class names — verify on a real device. Desktop
        (>= 992px) keeps Radzen's normal in-flow sidebar untouched. */
  .rz-body { margin-left: 0 !important; }

  .rz-sidebar {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    z-index: 1050 !important;
    max-width: min(86vw, 320px);
    padding-top: var(--ids-safe-t);
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }

  .rz-header {
    position: sticky; top: 0; z-index: 1000;
    padding-left: max(1rem, var(--ids-safe-l));
    padding-right: max(1rem, var(--ids-safe-r));
  }

  /* Tighten the default content gutter on small screens */
  .rz-body .rz-mx-auto.rz-px-4 {
    padding-left: var(--ids-gutter) !important;
    padding-right: var(--ids-gutter) !important;
  }
}

@media (max-width: 767.98px) {
  .rz-body .rz-mx-auto { padding-top: .5rem !important; }
}

/* ============================================================================
   3. TOUCH TARGETS  — only on coarse pointers, so mouse/desktop is untouched.
   ============================================================================ */
@media (pointer: coarse) {
  .rz-button,
  .rz-panel-menu-item,
  .mud-button-root,
  .e-btn,
  button, a[role="button"], .btn {
    min-height: var(--ids-touch-min);
  }
  .rz-panel-menu-item { padding-top: .55rem; padding-bottom: .55rem; }
}

/* ============================================================================
   4. OPT-IN UTILITIES  — no existing element carries these classes, so they
      have zero effect until you add them to a page.
      Naming: -phone (<768), -tablet-down (<992), -desktop-up (>=992).
   ============================================================================ */

.ids-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ids-gutter);
}

/* Visibility */
@media (max-width: 767.98px)  { .ids-hide-phone       { display: none !important; } }
@media (max-width: 991.98px)  { .ids-hide-tablet-down { display: none !important; } }
@media (min-width: 992px)     { .ids-hide-desktop-up  { display: none !important; } }

.ids-only-phone   { display: none !important; }
.ids-only-desktop { display: none !important; }
@media (max-width: 767.98px)  { .ids-only-phone   { display: block !important; } }
@media (min-width: 992px)     { .ids-only-desktop { display: block !important; } }

/* Stacking: a horizontal flex row that becomes a vertical stack when narrow */
.ids-stack-phone,
.ids-stack-tablet-down { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 767.98px) {
  .ids-stack-phone { flex-direction: column; align-items: stretch; }
  .ids-stack-phone > * { width: 100%; }
}
@media (max-width: 991.98px) {
  .ids-stack-tablet-down { flex-direction: column; align-items: stretch; }
  .ids-stack-tablet-down > * { width: 100%; }
}

/* Cards that reflow from N columns down to 1 */
.ids-autogrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Horizontal-scroll escape hatch for content that can't stack yet */
.ids-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Fluid typography helpers */
.ids-fluid-h1 { font-size: clamp(1.4rem, 1rem + 2.4vw, 2.25rem); line-height: 1.15; }
.ids-fluid-h2 { font-size: clamp(1.2rem, .9rem + 1.6vw, 1.6rem);  line-height: 1.2;  }

/* Full-bleed CTA on phones */
@media (max-width: 767.98px) {
  .ids-cta-phone-block { width: 100% !important; justify-content: center; }
}

/* ============================================================================
   5. TABLE → CARDS SCAFFOLDING  (opt-in; target pattern for Phase 1 grids)
      For a plain HTML table you own: add class .ids-table-cards, and give each
      <td> a data-label="Column name". Below 768px each row becomes a stacked,
      labelled card. (Syncfusion SfGrid gets its own adopt step in Phase 1.)
   ============================================================================ */
@media (max-width: 767.98px) {
  table.ids-table-cards thead { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  table.ids-table-cards tr {
    display: block; margin-bottom: .75rem;
    border: 1px solid rgba(0,0,0,.12); border-radius: 12px;
    padding: .5rem .75rem; background: #fff;
  }
  table.ids-table-cards td {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .35rem 0; border: 0; text-align: right;
  }
  table.ids-table-cards td::before {
    content: attr(data-label); font-weight: 600; text-align: left; color: #555;
  }
}

/* ============================================================================
   6. REDUCED MOTION  — respect the OS setting app-wide.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}