/* =====================================================================
   responsive.css — shared mobile-responsive overrides for the admin panel.
   Loaded after app.min.css in header.php so it applies to every screen.
   Built on the Bootstrap 5 "Lahomes" theme; only fixes mobile rough edges,
   it does not restyle the desktop layout.
   ===================================================================== */

/* ---- Global guards: never let anything cause horizontal page scroll ---- */
html, body {
  overflow-x: hidden;
}
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* =====================================================================
   SCROLLABLE DROPDOWNS (applies to BOTH desktop & mobile)
   Caps the height of every dropdown so long lists scroll inside the menu
   instead of running off the screen. Covers the three dropdown families:
     1. Bootstrap .dropdown-menu  (status selectors, row action menus)
     2. .dropdown-lg filter panels (Projects / Assigned To / Status Project)
     3. Choices.js enhanced <select> lists
   ===================================================================== */

/* 1. Standard Bootstrap dropdown menus */
.dropdown-menu {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 2. Large filter panels: keep Search + Apply fixed, scroll the list only.
      The panel itself is not capped (so Apply stays reachable); instead the
      checkbox list inside scrolls. */
.dropdown-menu.dropdown-lg {
  max-height: 80vh;          /* never taller than the viewport */
  overflow-y: auto;
}
#projectCheckboxes,
#assignedUserCheckboxes,
#statusProjectCheckboxes {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;        /* a little room so checkboxes don't hug scrollbar */
}

/* 3. Choices.js dropdown list (the enhanced multi/single selects).
      Choices already caps its inner list at 300px; we just make the scroll
      smooth on touch and let the mobile breakpoint tighten the cap below. */
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Slim, unobtrusive scrollbars for all of the above */
.dropdown-menu::-webkit-scrollbar,
#projectCheckboxes::-webkit-scrollbar,
#assignedUserCheckboxes::-webkit-scrollbar,
#statusProjectCheckboxes::-webkit-scrollbar,
.choices__list--dropdown .choices__list::-webkit-scrollbar {
  width: 6px;
}
.dropdown-menu::-webkit-scrollbar-thumb,
#projectCheckboxes::-webkit-scrollbar-thumb,
#assignedUserCheckboxes::-webkit-scrollbar-thumb,
#statusProjectCheckboxes::-webkit-scrollbar-thumb,
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .25);
  border-radius: 3px;
}

/* On phones, tighten the caps so dropdowns stay comfortably on-screen */
@media (max-width: 575.98px) {
  .dropdown-menu { max-height: 60vh; }
  .dropdown-menu.dropdown-lg { max-height: 75vh; }
  #projectCheckboxes,
  #assignedUserCheckboxes,
  #statusProjectCheckboxes,
  .choices__list--dropdown .choices__list,
  .choices__list[aria-expanded] .choices__list {
    max-height: 40vh;
  }
}

/* ---------------------------------------------------------------------
   DATA TABLES (Grid.js + plain Bootstrap tables)
   Grid.js wrappers already scroll; we make the behaviour smooth on touch
   and make sure plain tables scroll too instead of overflowing the card.
   --------------------------------------------------------------------- */
.gridjs-wrapper {
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
}
.gridjs-container {
  width: 100%;
  overflow-x: auto;
}
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Plain (non-Grid.js) tables that aren't already wrapped: let them scroll. */
@media (max-width: 767.98px) {
  .card-body > table:not(.gridjs-table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------
   FILTER BARS / BUTTON GROUPS
   On phones, stack filter buttons and let them go full-width so they
   don't get clipped (Leads Manager / Analytics filter rows).
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .analytics-filter-bar .row > [class^="col-"],
  .analytics-filter-bar .row > [class*=" col-"] {
    margin-bottom: .5rem;
  }
  /* Leads Manager green filter buttons: full width, comfortable tap target */
  .dropdown > .btn,
  .btn-group > .btn {
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------
   STATUS TABS (All / New / Followup / ... on Leads Manager)
   Allow the tab strip to scroll horizontally instead of wrapping into a
   cramped multi-row block on small screens.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .nav-tabs,
  ul.nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-item,
  ul.nav-pills .nav-item {
    flex: 0 0 auto;
  }
  /* hide the scrollbar but keep scrollability */
  .nav-tabs::-webkit-scrollbar,
  ul.nav-pills::-webkit-scrollbar {
    height: 0;
  }
}

/* ---------------------------------------------------------------------
   PAGE HEADINGS — scale down big titles on phones so they don't wrap oddly
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.35rem; }
  h3, .h3 { font-size: 1.2rem; }
  .card-header h3, .card-body h3 { font-size: 1.2rem; }
}

/* ---------------------------------------------------------------------
   CARDS — tighten padding on phones to reclaim screen width
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .card-body { padding: 1rem; }
  .container-fluid { padding-left: .75rem; padding-right: .75rem; }
}

/* ---------------------------------------------------------------------
   FORMS — make inputs/selects full width and easy to tap
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .form-control, .form-select {
    font-size: 16px;            /* prevents iOS zoom-on-focus */
  }
  .row.g-2 > [class^="col-"],
  .row.g-2 > [class*=" col-"] {
    margin-bottom: .5rem;
  }
}

/* ---------------------------------------------------------------------
   OFFCANVAS / MODALS — never wider than the viewport on phones
   (Leads Manager uses right offcanvas panels for follow-up forms)
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .offcanvas-end, .offcanvas-start {
    width: 100% !important;
    max-width: 100vw;
  }
  .modal-dialog {
    margin: .5rem;
  }
}

/* ---------------------------------------------------------------------
   CHARTS (ApexCharts on Analytics) — let them shrink to container width
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .apexcharts-canvas {
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------
   TOPBAR SEARCH — keep the search box from overflowing on small screens
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .topbar .app-search,
  .topbar .search-container {
    max-width: 60vw;
  }
}