/* Mobile layout overrides. Keep the desktop theme and application behavior intact. */
@media (max-width: 1199.98px) {
  #sidenav-main {
    z-index: 1030 !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }

  #sidenav-main .navbar-collapse {
    height: auto;
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px);
    overflow-y: auto;
  }

  #iconNavbarSidenav,
  #iconSidenav {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #iconSidenav.d-none {
    display: none;
  }
}

@media (max-width: 927px) {
  .g-sidenav-show .main-content {
    min-width: 0;
    width: 100%;
    max-height: none !important;
  }

  .g-sidenav-show .main_container,
  .g-sidenav-show .wrapper_div {
    flex-direction: column;
    height: auto !important;
    gap: 16px;
  }

  .g-sidenav-show .clients_div {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    height: auto !important;
    max-height: 300px;
    overflow-y: auto !important;
  }

  .g-sidenav-show .clientsname_div {
    height: auto !important;
    max-height: 210px;
    overflow-y: auto;
    padding-bottom: 8px !important;
  }

  .g-sidenav-show .clients_div li {
    width: 100% !important;
    min-width: 0;
    min-height: 50px;
    height: auto;
    overflow-wrap: anywhere;
  }

  .g-sidenav-show #show_profiles_div,
  .g-sidenav-show .wrapper_div > .w-90 {
    width: 100% !important;
    min-width: 0;
    padding-inline: 0 !important;
  }

  .g-sidenav-show .wrapper_div .table-container {
    height: auto;
    max-height: 70vh;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-x: contain;
  }

  .g-sidenav-show .forms_div {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px;
    gap: 4px;
  }

  .g-sidenav-show .forms_div > [topic="project"] {
    width: 100%;
    padding: 4px !important;
    overflow-wrap: anywhere;
  }

  .g-sidenav-show :is(.clientedit-popup, .clientadd-popup, .formAddPopup,
    .form_edit_popup, .menu_popup, #discord_edit_client) {
    width: calc(100% - 24px) !important;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 16px;
  }
}

@media (max-width: 767.98px) {
  .g-sidenav-show #navbarBlur {
    margin-inline: 12px !important;
  }

  .g-sidenav-show .container-fluid {
    padding-inline: 12px;
  }

  .g-sidenav-show .main_container {
    padding: 12px !important;
  }

  /* Stack filters and actions without changing their order or visibility. */
  .g-sidenav-show .filter-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px;
    margin-bottom: 20px;
  }

  .g-sidenav-show .filter-container > div {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
  }

  .g-sidenav-show .filter-container .select_container {
    display: flex !important;
    align-items: center;
  }

  .g-sidenav-show .filter-input {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .g-sidenav-show .filter-container :is(input, button),
  .g-sidenav-show .btn-container button,
  .g-sidenav-show #subAccountSelect {
    width: 100% !important;
    margin: 0;
  }

  .g-sidenav-show .btn-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline: 12px;
  }

  .g-sidenav-show :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
  .form_login input,
  .lead-submission :is(input, select, textarea) {
    font-size: 16px !important;
    min-width: 0;
    max-width: 100%;
  }

  .g-sidenav-show :is(.btn, .select-selected, .select-items > div),
  .form_login :is(input, button),
  .lead-submission :is(button, input, select) {
    min-height: 44px;
  }

  .g-sidenav-show .btn {
    white-space: normal;
  }

  .g-sidenav-show dialog {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 16px !important;
    overflow: auto;
  }

  .g-sidenav-show dialog > .flex-column-reverse {
    height: auto !important;
  }

  .g-sidenav-show dialog :is(.edit-container, .h-100vh) {
    height: auto !important;
    max-height: none;
    padding: 12px !important;
  }

  .g-sidenav-show .formPopup {
    max-width: calc(100vw - 24px);
    max-height: 70dvh;
    overflow-y: auto;
  }

  .g-sidenav-show .discord-heading,
  .g-sidenav-show .discord-account {
    flex-wrap: wrap;
    height: auto !important;
    gap: 12px;
    padding: 12px;
  }

  .g-sidenav-show .discord-heading > * {
    margin: 0 !important;
  }

  .g-sidenav-show .discord-heading h5,
  .g-sidenav-show .discord-account p {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .main_login_modal {
    margin-top: 64px !important;
    margin-bottom: 24px;
  }

  .lead-submission,
  .lead-submission > .container,
  .lead-submission .form-container {
    height: 100dvh !important;
    min-width: 0;
  }

  .lead-submission .form-content {
    min-height: 0;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  .lead-submission .form-actions {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .lead-submission .preview-btn-mobile {
    bottom: calc(90px + env(safe-area-inset-bottom));
  }

  .lead-submission .schedule-modal-content {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}