/* Al-Raqeem global mobile/tablet overflow guard — 2026-08-02 */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*, *::before, *::after { box-sizing: border-box; }

/* Flex/grid descendants are a frequent source of page-wide overflow. */
body * { min-inline-size: 0; }

img, picture, video, iframe, object, embed {
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

canvas {
  max-width: 100%;
}

pre, code, samp, kbd {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

input, select, textarea, button {
  max-width: 100%;
}

/* Long URLs, formulas, names and generated values must wrap rather than widen a page. */
p, li, td, th, label, .card, .panel, .result, .value, .formula {
  overflow-wrap: anywhere;
}

/* Keep wide data inside its own local scroll region, never at page level. */
.table-wrap,
.table-wrapper,
.table-responsive,
.scroll-table,
.overflow-table,
.mnz-tablewrap,
.mc-table-wrap,
.quran-table-wrap,
.stats-table-wrap,
.dc-table-wrap,
.months-table-wrap,
[data-table-scroll="true"] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  main, section, article,
  .page, .page-content, .content, .container,
  [class*="-container"], [class*="_container"],
  [class*="-page"], [class*="_page"] {
    max-width: 100%;
  }

  /* Constrain dialogs, popovers and fixed panels to the visible viewport. */
  [role="dialog"], .modal, .modal-content, .popup, .dialog,
  .options-panel, .dropdown-menu, .side-panel, .drawer {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px);
  }

  /* Any standalone table becomes its own scroll surface on compact screens. */
  table {
    max-width: 100%;
  }

  table:not(.no-responsive-scroll) {
    display: block;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Preserve actual table layout after table is made the scroll surface. */
  table:not(.no-responsive-scroll) > thead,
  table:not(.no-responsive-scroll) > tbody,
  table:not(.no-responsive-scroll) > tfoot {
    width: max-content;
    min-width: 100%;
  }

  /* Large generated grids must shrink their tracks instead of forcing viewport width. */
  [style*="display:grid"], [style*="display: grid"],
  .grid, [class*="-grid"], [class*="_grid"] {
    min-width: 0;
  }

  /* Fixed-width inline styles are capped without changing their intended desktop width. */
  [style*="width:"][style*="px"],
  [style*="min-width:"][style*="px"] {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  body { font-size: 15px; }

  main, .page, .page-content,
  [class*="-container"], [class*="_container"] {
    padding-inline: clamp(.65rem, 3vw, 1rem) !important;
  }

  .toolbar, .controls, .actions, .buttons,
  [class*="-toolbar"], [class*="_toolbar"],
  [class*="-controls"], [class*="_controls"],
  [class*="-actions"], [class*="_actions"] {
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* Common two-column forms/cards collapse safely on phones. */
  .two-col, .two-cols, .columns-2,
  [class*="two-col"], [class*="two_col"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Avoid viewport overflow from centered absolute decorations. */
  .decorative, [aria-hidden="true"] {
    max-width: 100vw;
  }
}

@media (max-width: 480px) {
  [role="dialog"], .modal, .modal-content, .popup, .dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }

  button, .btn, [class*="-btn"], [class*="_btn"] {
    white-space: normal;
  }
}

/* V12 — remove unintended link underlines/lines from the main navigation */
.top-nav a,
.top-nav a:link,
.top-nav a:visited,
.top-nav a:hover,
.top-nav a:active,
.top-nav a:focus,
.top-nav .nav-btn,
.top-nav .nav-label,
.top-nav .brand-raqim,
.top-nav .brand-raqim-text {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
}
.top-nav a:focus,
.top-nav a:focus-visible,
.top-nav .brand-raqim:focus,
.top-nav .brand-raqim:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}