/* Mobile-only layout safeguards. Desktop rules intentionally remain untouched. */

@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body .main-content,
  body .content-wrapper,
  body.layout-home .main-content,
  main,
  main[style*="overflow"] {
    min-width: 0;
    max-width: 100%;
  }

  body .content-wrapper {
    padding: 24px 20px;
  }

  .container,
  .container-fluid,
  .row > *,
  [class*="col-"] {
    min-width: 0;
  }

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

  canvas {
    max-width: 100% !important;
  }

  .table-responsive,
  .grid-view,
  .list-view,
  .dataTables_wrapper,
  .kv-grid-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Many older views emit a bare table. It remains a table internally while
     its own box becomes the deliberate horizontal scroll boundary. */
  table:not(.flatpickr-calendar table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tables already inside a scroll container must keep their natural column
     width. Constraining both the wrapper and table to the viewport compresses
     multi-column loan and report grids until words render one letter per line. */
  .table-responsive > table,
  .grid-view > table,
  .kv-grid-container > table,
  .dataTables_wrapper .table-responsive > table {
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
    overflow: visible;
  }

  .table-responsive > table > :not(caption) > * > *,
  .grid-view > table > :not(caption) > * > *,
  .kv-grid-container > table > :not(caption) > * > * {
    overflow-wrap: normal;
    word-break: normal;
  }

  td,
  th {
    overflow-wrap: anywhere;
  }

  .nav-tabs,
  .nav-pills,
  .hr-nav,
  .acc-nav {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs > *,
  .nav-pills > *,
  .hr-nav > *,
  .acc-nav > * {
    flex: 0 0 auto;
  }

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

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

  .modal-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
  }

  .modal-footer,
  .card-header,
  .card-footer,
  .page-header,
  .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: .75rem;
  }

  .dropdown-menu,
  .profile-dropdown,
  .user-menu-dropdown {
    max-width: calc(100vw - 2rem);
  }

  .alert,
  .card,
  .card-body,
  .card-header,
  .modal-content,
  .dropdown-menu,
  .list-group-item {
    overflow-wrap: anywhere;
  }

  .input-group,
  .form-control,
  .form-select,
  textarea,
  input,
  select {
    max-width: 100%;
    min-width: 0;
  }

  .select2-container,
  .select2-container--bootstrap5,
  .select2-container--krajee-bs5 {
    width: 100% !important;
    max-width: 100%;
  }

  pre,
  code,
  .text-break-mobile {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 900px) {
  body .sidebar {
    width: min(var(--sidebar-width, 260px), 86vw);
    max-width: 86vw;
  }

  body .headbar {
    width: 100%;
    min-width: 0;
  }

  body .headbar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 767.98px) {
  body .content-wrapper {
    padding: 16px 12px;
  }

  body.layout-home .main-content,
  main[style*="overflow"] {
    overflow: visible !important;
  }

  .container,
  .container-fluid {
    --bs-gutter-x: 1.5rem;
  }

  .row {
    --bs-gutter-x: 1rem;
  }

  h1,
  .h1 {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  h2,
  .h2 {
    font-size: clamp(1.25rem, 6.5vw, 1.65rem);
  }

  .card:hover {
    transform: none;
  }

  .card-body {
    padding: 1rem;
  }

  .card-header,
  .card-footer {
    padding: .875rem 1rem;
  }

  .btn-toolbar,
  .btn-group-responsive,
  form .d-flex,
  .card .d-flex {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .btn:not(.btn-close):not(.navbar-toggler),
  button:not(.btn-close):not(.navbar-toggler),
  [role="button"] {
    min-height: 44px;
  }

  .btn-group:not(.pagination) {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .input-group > .btn {
    flex: 0 0 auto;
  }

  .pagination {
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: .25rem;
  }

  .pagination li {
    flex: 0 0 auto;
  }

  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100vw - 1rem);
    margin: .5rem;
  }

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

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .modal-footer > .btn,
  .modal-footer > form {
    flex: 1 1 auto;
  }

  .modal-footer > form .btn {
    width: 100%;
  }

  .chart-container,
  .chart-wrapper,
  [class*="chart-wrap"] {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 220px;
    overflow: hidden;
  }

  body.layout-home .navbar-container {
    min-width: 0;
  }

  body.layout-home .navbar-brand {
    min-width: 0;
    gap: 8px;
  }

  body.layout-home .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.layout-home .navbar-menu-mobile {
    width: min(320px, 92vw);
    max-width: 92vw;
    padding: 20px 16px;
  }

  body.layout-home .footer-grid,
  body.layout-home .footer-bottom {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  body.layout-home .footer-bottom-links {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

@media (max-width: 414px) {
  body .content-wrapper {
    padding: 12px 8px;
  }

  .container,
  .container-fluid {
    --bs-gutter-x: 1rem;
  }

  .card-body {
    padding: .875rem;
  }

  .headbar,
  body .headbar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .headbar-title {
    font-size: 1.1rem;
  }

  .toast,
  .alert.position-fixed,
  [class*="flash"] {
    max-width: calc(100vw - 1rem);
  }
}

@media (max-width: 360px) {
  body.layout-home .brand-text {
    max-width: 8.5rem;
  }

  .mobile-topbar-actions {
    gap: 4px !important;
  }

  .mobile-topbar-actions .btn,
  .mobile-user-btn,
  .mobile-apply-btn,
  .navbar-toggler {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }
}

@media (max-width: 767.98px) and (orientation: landscape) {
  .modal-content {
    max-height: calc(100dvh - .5rem);
  }

  .modal-dialog {
    margin-top: .25rem;
    margin-bottom: .25rem;
  }
}