/* =============================================================================
   Responsive Refinements 2026 — cross-cutting responsive / RTL / typography polish
   -----------------------------------------------------------------------------
   - Loaded LAST in _Host.cshtml so it wins the cascade for equal specificity.
   - Token-only: colors via var(--primary-color) etc. — NO new hex/hsl.
   - Fonts untouched (Cairo / Tajawal stay).
   - Breakpoints follow the design system: 767px (mobile) / 1023px (tablet).
   - !important is used ONLY where an inline style must be overridden (no other
     way to beat inline specificity) — kept narrow to form controls.
   - Intentionally complements comprehensive-mobile.css (which already handles
     <=991px overflow-x, body 16px, wrapped-table scroll, touch targets); this
     file fills the verified GAPS, it does not duplicate them.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1) Media never overflows its container (prevents horizontal page scroll from
      oversized images / embeds on small screens). Applies at all sizes.
   --------------------------------------------------------------------------- */
img,
svg:not([width]),
video,
canvas {
  max-width: 100%;
}
img {
  height: auto;
}

/* -----------------------------------------------------------------------------
   2) iOS auto-zoom guard — any form control whose computed font-size is < 16px
      makes mobile Safari zoom on focus. Force >=16px on phones. Covers Bootstrap
      *-sm variants and custom inputs that comprehensive-mobile.css does not set.
      (No !important: this file loads last, so it beats element/class defaults.)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm {
    font-size: 16px;
  }
}

/* -----------------------------------------------------------------------------
   3) Inline fixed-width filter/search controls collapse to full width on mobile.
      Many screens set style="width:200px" (HR/Attendance), "width:180px"
      (Modules/Records), flex:0 0 170px (Client/CRM filters) on <select>/<input>,
      which overflow or force sideways scrolling at 375px.
      !important is required to override the inline style.
      Scoped strictly to form controls so layout containers are untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  select[style*="width"],
  input[type="text"][style*="width"],
  input[type="search"][style*="width"],
  input[type="date"][style*="width"],
  input[type="datetime-local"][style*="width"],
  input[type="month"][style*="width"],
  input[type="number"][style*="width"],
  input[type="email"][style*="width"],
  input[type="tel"][style*="width"],
  .form-select[style*="width"],
  .form-control[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   4) Keyboard focus visibility (WCAG 2.4.7). A consistent, token-coloured focus
      ring on keyboard navigation only (:focus-visible never fires on mouse), so
      it adds accessibility without visual noise for pointer users.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   5) Typography polish to a global standard (font FAMILY stays Cairo/Tajawal).
      - Sharper text rendering.
      - Tabular figures so numbers align in tables / metric tiles / money.
   --------------------------------------------------------------------------- */
body {
  text-rendering: optimizeLegibility;
}
.table td,
.prm-table td,
.prm-table th,
.prm-metric__value,
td .badge,
.crmd-kpi-value,
.mys-plan-name {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -----------------------------------------------------------------------------
   6) Tablet refinement (768px–1023px): generic Bootstrap filter rows built from
      .row > .col-auto holding a .d-flex of controls should wrap instead of
      overflowing when several filters sit on one line.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .row > .col-auto > .d-flex:not(.flex-nowrap) {
    flex-wrap: wrap;
  }
}

/* -----------------------------------------------------------------------------
   7) Long unbreakable strings (raw URLs, IDs, emails) must not blow out narrow
      cards/cells. Conservative: only inside known content surfaces.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .card-body,
  .prm-card__meta-row,
  .prm-table td {
    overflow-wrap: anywhere;
  }
}

/* -----------------------------------------------------------------------------
   8) Respect reduced-motion globally for the refinements added here.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible {
    outline-offset: 1px;
  }
}

/* -----------------------------------------------------------------------------
   9) App chrome (header / sidebar / content) — fix horizontal clipping.
      Root cause: .main-content is a flex item with the default min-width:auto,
      so it cannot shrink below the min-content width of the .header. The header
      icon-strip (search + org + ~12 icons + user menu ≈ 1100px) never wraps, so
      on desktop widths below ~1450px the trailing controls (user menu / logout)
      get clipped by the app-container's `overflow-x: clip`.
      Fix: let main-content shrink, and let the header row + icon-strip wrap.
   --------------------------------------------------------------------------- */
/* Always allow the content column to shrink (harmless on mobile, essential on desktop). */
.main-content { min-width: 0; }
.sidebar { min-width: 0; }

/* Desktop-only (sidebar is sticky & in-flow here, ≥992px). On mobile the sidebar is an
   off-canvas drawer and the header has its own compact layout, so wrapping there would
   only make the header needlessly tall — keep these rules out of the mobile range. */
@media (min-width: 992px) {
  .header {
    min-width: 0;
    flex-wrap: wrap;      /* header-left / header-right drop to a new row if cramped */
    row-gap: 8px;
  }
  .header-right,
  .header-icon-strip {
    min-width: 0;
    flex-wrap: wrap;          /* icons wrap instead of being clipped */
    justify-content: flex-end;
    row-gap: 8px;
  }
  .header-global-search,
  .header-global-search input {
    min-width: 0;             /* search gives up width before icons get clipped */
  }
}

/* Cramped desktop (992–1455px, i.e. common laptops): pack the header into a single
   clean row instead of wrapping. The user menu collapses to avatar-only (name/role
   still appear in the dropdown on click) and gaps tighten — this frees ~230px, enough
   for all controls + global search to sit on one line at 1280/1366/1440. Wider screens
   (≥1456px) keep the full named user menu; the flex-wrap rule above stays as a safety
   net for the rare <1115px desktop. */
/* "More (⋯)" overflow group. By default the wrappers are transparent (display:contents)
   so the secondary tools flow inline on wide desktop AND inside the mobile scroll strip;
   the ⋯ button is hidden. They only collapse into a popover on cramped laptops (below). */
.header-tools-wrap,
.header-tools { display: contents; }
.header-more-btn { display: none; }

/* Cramped desktop (992–1455px, common laptops): pack the header into ONE clean row —
   user menu shows avatar only (name/role still in the click dropdown), tighter gaps, and
   the five secondary tools fold behind a «⋯» popover. Frees enough width to fit the
   search + primary icons + user menu on a single line at 1280/1366/1440. */
@media (min-width: 992px) and (max-width: 1455px) {
  .header-icon-strip { gap: 8px; }
  .header-right { gap: 10px; }
  .user-menu-button .user-info { display: none; }
  .user-menu-button { gap: 4px; }

  .header-tools-wrap { display: inline-flex; align-items: center; position: relative; }
  .header-more-btn { display: inline-flex; }
  .header-tools {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    width: max-content;
    max-width: 264px;
    padding: 10px;
    background: var(--background-secondary, #fff);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.25);
    z-index: 1001;
  }
  .header-tools.open { display: flex; }
}