/* TahfidzQu - Global responsive layer */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, a, input, select, textarea { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { max-width: 100%; }

/* Prevent long identifiers and URLs from breaking layouts. */
main, section, article, div, td, th, p, a, label { overflow-wrap: anywhere; }

/* Tables remain readable without breaking the viewport. */
.table-responsive, .overflow-x-auto { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
  .mobile-full { width: 100% !important; }
  .mobile-stack { flex-direction: column !important; align-items: stretch !important; }
  .mobile-stack > * { width: 100% !important; max-width: 100% !important; }

  /* Common Tailwind layouts */
  .grid { min-width: 0; }
  .flex { min-width: 0; }
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl { max-width: 100%; }

  /* Prevent desktop-sized panels from overflowing */
  .rounded-3xl, .rounded-2xl, .rounded-xl { max-width: 100%; }
  .shadow-xl, .shadow-2xl { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  main { width: 100%; min-width: 0; }
  header { max-width: 100vw; }

  /* Compact mobile spacing */
  main.px-4, .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .py-8 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .mb-8 { margin-bottom: 1.25rem; }
  .mb-6 { margin-bottom: 1rem; }

  /* Responsive typography */
  h1, .text-4xl { font-size: 1.65rem !important; line-height: 1.25 !important; }
  h2, .text-3xl { font-size: 1.35rem !important; line-height: 1.3 !important; }
  h3, .text-2xl { font-size: 1.15rem !important; line-height: 1.35 !important; }
  .text-xl { font-size: 1.05rem !important; }
  .text-lg { font-size: 1rem !important; }

  /* Stack common action/toolbars */
  .flex.items-center.justify-between,
  .flex.justify-between.items-center { gap: .75rem; flex-wrap: wrap; }
  .flex.gap-4, .flex.gap-6 { gap: .75rem; }
  .gap-8 { gap: 1rem; }

  /* Buttons and controls are easy to tap */
  button, a.inline-flex, a.flex, input[type="submit"], input[type="button"] { min-height: 42px; }
  .btn, button { max-width: 100%; }
  form .grid { grid-template-columns: minmax(0, 1fr) !important; }
  form .flex { flex-wrap: wrap; }
  form button, form input[type="submit"] { width: 100%; }

  /* Cards/panels */
  .p-8 { padding: 1rem !important; }
  .p-6 { padding: 1rem !important; }
  .p-5 { padding: .9rem !important; }
  .p-4 { padding: .85rem !important; }
  .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }

  /* Tables: horizontal scroll rather than page overflow */
  table { width: 100%; min-width: 620px; }
  .table-responsive, .overflow-x-auto, .overflow-auto { max-width: 100%; overflow-x: auto !important; }
  th, td { white-space: nowrap; padding: .65rem .75rem !important; font-size: .75rem; }

  /* File upload controls */
  input[type="file"] { width: 100%; min-width: 0; font-size: .75rem; }
  input, select, textarea { font-size: 16px !important; }

  /* Fixed/absolute elements should not exceed the screen */
  .fixed, .absolute { max-width: 100vw; }
  [x-show] { max-width: calc(100vw - 2rem); }

  /* Footer and long text */
  footer { padding: 1rem !important; font-size: .7rem; }
  .truncate { max-width: 100%; }
}