/* Phone and tablet adjustments. Desktop layout is unchanged. */

@media (max-width: 991.98px) {
  .page-wrapper > .content {
    padding-bottom: 72px;
  }

  .content img,
  .content video,
  .content canvas {
    max-width: 100%;
    height: auto;
  }

  .avatar img,
  .header img,
  .sidebar img {
    max-width: none;
  }

  .content td,
  .content .text-dark,
  .breadcrumb {
    overflow-wrap: anywhere;
  }

  .form-control,
  .form-select,
  .input-group,
  .ts-wrapper,
  .flatpickr-wrapper {
    max-width: 100%;
  }

  .table-responsive,
  .gridjs-wrapper,
  .project-status,
  .fc .fc-scroller {
    -webkit-overflow-scrolling: touch;
  }

  .dropdown-menu {
    max-width: calc(100vw - 1rem);
    max-height: 70vh;
    overflow-y: auto;
  }

  .modal-dialog {
    margin: 0.5rem auto;
    max-width: calc(100vw - 1rem);
  }

  .modal-content {
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
  }

  .modal-body {
    max-height: calc(100dvh - 14rem);
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header,
  .modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .offcanvas.offcanvas-end,
  .offcanvas.offcanvas-start {
    width: min(400px, 100vw);
    max-width: 100vw;
  }

  .sidebar-contact {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    height: 48px;
    transform: none;
    z-index: 1030;
  }

  body.modal-open .sidebar-contact {
    visibility: hidden;
  }

  .header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1.15rem;
  }
}

@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  .ts-control {
    font-size: 16px;
  }

  .page-breadcrumb .right-content .btn {
    white-space: normal;
  }
}

@media (max-width: 991.98px) {
  body.bg-white .vh-100 {
    height: auto !important;
    min-height: 100dvh;
  }

  body.bg-white .overflow-hidden {
    overflow: auto !important;
  }

  .page-wrapper {
    max-width: 100%;
    overflow-x: hidden;
  }

  .content,
  .card,
  .card-body,
  .card-header,
  .row,
  .row > [class*="col-"] {
    max-width: 100%;
    min-width: 0;
  }

  .content .d-flex:not(.project-status):not(.input-group) {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .page-breadcrumb,
  .page-breadcrumb .d-flex,
  .card-header,
  .card-header .d-flex,
  .content .nav,
  .content .nav-tabs,
  .content .nav-pills,
  .todo-tabs {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .content .nav-link,
  .settings-list a,
  .page-breadcrumb .btn,
  .card-header .btn {
    white-space: normal;
  }

  .table-responsive,
  .custom-datatable-filter,
  .gridjs-container,
  .gridjs-wrapper,
  .dataTables_wrapper {
    max-width: 100%;
  }

  .project-status {
    max-width: 100%;
  }

  .project-status > div {
    flex: 0 0 min(320px, 88vw);
    width: min(320px, 88vw) !important;
    max-width: 88vw;
    margin-right: 0.75rem !important;
  }

  .fc,
  .fc .fc-view-harness,
  .apexcharts-canvas,
  .apexcharts-svg {
    max-width: 100%;
  }

  .fc .fc-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-header .border-end {
    border-right: 0 !important;
    padding-right: 0 !important;
  }

  select.form-control.w-auto,
  .form-control.w-auto {
    width: 100% !important;
  }

  pre,
  .invoice-table {
    max-width: 100%;
    overflow-x: auto;
  }

  .header .header-user .user-menu {
    display: flex !important;
    position: absolute;
    top: 0;
    right: 56px;
    height: 50px;
    width: auto;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    z-index: 12;
  }

  .header .header-user .user-menu > #header-search,
  .header .header-user .user-menu > .sidebar-horizontal {
    display: none !important;
  }

  .header .header-user .user-menu > .d-flex.align-items-center > :not(.mobile-action) {
    display: none !important;
  }

  .header .mobile-action {
    margin-right: 0 !important;
  }

  .notification-dropdown.show {
    position: fixed !important;
    top: 56px !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: calc(100vw - 1rem) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 1rem) !important;
    transform: none !important;
  }

  .notification-dropdown .notification-title,
  .notification-dropdown .dropdown-item {
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  .header .header-left .logo img {
    width: 80px;
  }

  .header .mobile-action .btn-menubar {
    width: 32px;
    height: 32px;
  }
}