/**
 * VexaCare — site-wide mobile layout & readability (all layouts / pages).
 * Loaded after mobile-site.css on main layouts.
 */

@media (max-width: 767px) {
  .vex-legacy-body,
  .homepage-body,
  .sb-nav-fixed {
    scroll-padding-top: calc(5.5rem + env(safe-area-inset-top, 0px));
  }

  .vex-legacy-body main,
  .vex-legacy-body #main {
    font-size: 1rem;
    line-height: 1.65;
  }

  .vex-legacy-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .vex-legacy-body select,
  .vex-legacy-body textarea,
  .sb-nav-fixed input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .sb-nav-fixed select,
  .sb-nav-fixed textarea {
    font-size: 16px !important;
  }

  .vex-legacy-body main img,
  .homepage-body main img:not([class*="logo"]):not(.vexy-logo):not([width="32"]),
  #layoutSidenav_content main img {
    max-width: 100%;
    height: auto;
  }

  .vex-legacy-body :is(pre, code),
  .homepage-body :is(pre, code),
  #layoutSidenav_content :is(pre, code) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    word-break: break-word;
  }

  /* Tailwind: multi-column grids without responsive prefix → single column on phone */
  .homepage-body .grid.grid-cols-2,
  .homepage-body .grid.grid-cols-3,
  .homepage-body .grid.grid-cols-4,
  .homepage-body .grid.grid-cols-5,
  .homepage-body .grid.grid-cols-6 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .homepage-body .flex > * {
    min-width: 0;
  }

  /* Tables: horizontal scroll when not already in .table-responsive */
  .homepage-body :is(main, section, .card, .card-body, .container, .container-fluid, .overflow-x-auto):has(> table),
  .homepage-body :is(main, section, .card-body):has(table),
  #layoutSidenav_content :is(main, .card-body, .container-fluid):has(> table),
  #layoutSidenav_content .card-body:has(table),
  .vex-legacy-body :is(main, .container):has(> table),
  .vex-legacy-body .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .homepage-body table,
  #layoutSidenav_content table,
  .vex-legacy-body table {
    width: 100%;
    max-width: 100%;
  }

  .homepage-body table th,
  .homepage-body table td,
  #layoutSidenav_content table th,
  #layoutSidenav_content table td {
    word-break: break-word;
    vertical-align: top;
  }

  .homepage-body table .text-xs,
  .homepage-body table.text-xs,
  .homepage-body table thead .text-xs {
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .homepage-body .overflow-x-auto,
  .homepage-body [class*="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Admin Simple Datatables */
  #layoutSidenav_content .datatable-wrapper,
  #layoutSidenav_content .datatable-container,
  #layoutSidenav_content .dataTable-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Bootstrap dense forms */
  #layoutSidenav_content .form-control,
  #layoutSidenav_content .form-select {
    font-size: 1rem;
    line-height: 1.5;
  }

  .vex-legacy-body .form-control,
  .vex-legacy-body .form-select {
    font-size: 16px;
    line-height: 1.5;
  }

  /* CKEditor / rich text areas */
  .ck-editor__editable,
  .ck-content {
    max-width: 100% !important;
  }

  /* jQuery UI datepicker */
  .ui-datepicker {
    max-width: calc(100vw - 2rem);
  }

  /* Prevent common fixed-width panels from overflowing */
  .homepage-body [class*="max-w-"]:not([class*="max-w-full"]):not([class*="max-w-none"]) {
    max-width: min(100%, var(--tw-max-w, 100%));
  }

  .homepage-body .w-screen,
  .homepage-body .min-w-full {
    max-width: 100vw;
  }

  /* DaisyUI modals / drawers */
  .homepage-body .drawer-content {
    min-width: 0;
  }

  .homepage-body .modal:not(dialog) {
    padding-inline: max(0.75rem, env(safe-area-inset-left, 0px));
  }
}

@media (max-width: 639px) {
  .homepage-body .btn-group,
  .homepage-body .join {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .homepage-body .btn-group .btn,
  .homepage-body .join .btn {
    flex: 1 1 auto;
    min-width: min(100%, 8rem);
  }

  #layoutSidenav_content .btn-toolbar,
  #layoutSidenav_content .btn-group {
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .vex-legacy-body .dropdown-menu {
    max-width: min(calc(100vw - 2rem), 20rem);
  }
}