/*
 * HuTraits mobile compatibility layer.
 * Scope is intentionally broad but conservative: layout safety only,
 * no business logic, routes, form names, or POST behavior changes.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body,
main,
section,
article,
aside,
header,
footer,
nav,
form,
.page-shell,
.dashboard-shell,
.student-frame,
.teacher-shell,
.hutraits-header-shell,
.hutraits-header-shell *,
.student-shell * {
  min-width: 0;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

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

.overflow-auto,
.overflow-x-auto,
.booking-table-wrap,
.schedule-wrapper,
.custom-scroll {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.dir-ltr,
[dir="ltr"],
.bidi-plaintext {
  unicode-bidi: isolate;
}

@media (max-width: 767px) {
  html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
  }

  main,
  #mainContent,
  .page-shell,
  .dashboard-shell {
    width: 100%;
    max-width: 100vw;
  }

  #mainContent {
    padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
  }

  h1,
  .section-title {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: 0;
  }

  h2 {
    font-size: 1.45rem;
    line-height: 1.3;
    letter-spacing: 0;
  }

  h3 {
    font-size: 1.15rem;
    line-height: 1.35;
  }

  p,
  li,
  .section-copy {
    line-height: 1.75;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  textarea {
    min-height: 112px;
  }

  button,
  .btn,
  a.btn,
  [role="button"] {
    min-height: 44px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .card,
  .surface-card,
  .hero-panel,
  .student-hero,
  .section-card,
  .metric-shell,
  .priority-card,
  .teacher-surface,
  .booking-card,
  .soft-surface,
  .results-snapshot,
  .teacher-card-container,
  .teacher-card-summary {
    border-radius: 1.15rem;
  }

  main .grid,
  main [class*="grid-cols"],
  main [class*="md:grid"],
  main [class*="lg:grid"],
  main [class*="xl:grid"] {
    min-width: 0;
  }

  main [class*="md:grid-cols"],
  main [class*="lg:grid-cols"],
  main [class*="xl:grid-cols"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  main [class*="md:flex-row"],
  main [class*="lg:flex-row"] {
    flex-direction: column !important;
  }

  main [class*="md:w-"],
  main [class*="lg:w-"],
  main [class*="xl:w-"] {
    max-width: 100%;
  }

  .hutraits-header-shell {
    contain: layout paint;
  }

  .hutraits-header-shell .container {
    padding-inline: 0.75rem;
  }

  .hutraits-header-shell .hutraits-header-inner {
    height: 3.5rem;
    gap: 0.45rem;
  }

  .hutraits-header-shell .hutraits-header-logo {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .hutraits-header-shell .hutraits-header-logo img {
    max-width: min(46vw, 150px);
    object-fit: contain;
  }

  .hutraits-header-shell #mobileMenu {
    max-height: calc(100dvh - 3.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hutraits-header-shell #mobileMenu a,
  .hutraits-header-shell #mobileMenu button {
    min-height: 46px;
  }

  .student-shell > header .max-w-7xl {
    padding-inline: 0.75rem;
    gap: 0.5rem;
  }

  .student-shell > header a[href="/"] {
    display: inline-flex;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.25rem;
  }

  .student-shell > header .flex.items-center.gap-4 {
    gap: 0.5rem;
  }

  .student-shell #userMenu {
    position: fixed;
    inset-inline: 0.75rem;
    top: 4rem;
    width: auto;
    transform-origin: top center;
  }

  .student-shell .student-frame {
    width: 100%;
    max-width: 100vw;
    padding-inline: 0.75rem;
  }

  .student-shell .student-frame.py-2 {
    padding-inline: 0.75rem;
  }

  .student-shell .chip,
  .student-shell .student-pill,
  .student-shell .student-nav,
  .pill,
  .badge,
  .chip {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .student-shell .student-hero {
    padding: 1rem !important;
  }

  .student-shell .student-hero h2 {
    font-size: 1.7rem;
    line-height: 1.35;
  }

  .teacher-card-container {
    width: 100%;
  }

  .teacher-card-heading a,
  .teacher-card-container h2,
  .teacher-card-container h3,
  .teacher-card-container p,
  .teacher-card-container span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .teacher-card-actions {
    width: 100%;
  }

  .teacher-card-actions .btn {
    width: 100%;
  }

  .booking-table,
  .schedule-wrapper table {
    max-width: none;
  }

  .booking-table-wrap,
  .schedule-wrapper {
    border-radius: 1rem;
  }

  .booking-table-wrap::after,
  .schedule-wrapper::after {
    content: "اسحب لعرض باقي الجدول";
    position: sticky;
    inset-inline-start: 0;
    bottom: 0;
    display: block;
    padding: 0.55rem 0.75rem;
    background: linear-gradient(180deg, rgba(248,250,252,0), rgba(248,250,252,0.95) 28%, rgba(248,250,252,0.98));
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
  }

  html[lang^="en"] .booking-table-wrap::after,
  html[lang^="en"] .schedule-wrapper::after {
    content: "Swipe to view the full table";
  }

  .modal,
  [id$="Modal"],
  [class*="modal"] {
    max-width: 100vw;
  }

  .toast-wrapper,
  .site-toast-wrap {
    inset-inline: 0.75rem;
    max-width: none;
  }
}

@media (max-width: 420px) {
  #mainContent,
  .page-shell,
  .dashboard-shell,
  .student-frame {
    padding-inline: 0.65rem;
  }

  h1,
  .section-title {
    font-size: 1.55rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  .btn,
  a.btn,
  button {
    padding-inline: 0.85rem;
  }

  .hutraits-header-shell .hutraits-header-logo img {
    max-width: min(44vw, 136px);
  }

  .student-shell > header a[href="/"] {
    max-width: 40vw;
    font-size: 1.1rem;
  }
}