/* Global mobile-first overrides for admin operability on phones/tablets. */

:root {
  --nm-mobile-gap: 10px;
}

/* Prevent accidental horizontal overflow by wide controls. */
html,
body,
#main-wrapper,
.content-body,
.container-fluid {
  max-width: 100%;
}

.content-body .container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

.card .card-header {
  gap: 8px;
}

.card .card-body {
  overflow-wrap: anywhere;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Better tap targets for dropdowns/buttons in dense lists. */
.btn-sm,
.dropdown-item,
.form-control,
.form-select,
.bootstrap-select .dropdown-toggle {
  min-height: 38px;
}

/* Improve sticky header/action compactness on medium screens. */
@media (max-width: 1199.98px) {
  .header .header-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .content-body .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Tablet/mobile nav/header harmonization. */
@media (max-width: 991.98px) {
  .header {
    z-index: 1001;
  }

  .header .navbar-nav.header-right {
    gap: 6px;
  }

  .header .nm-header-actions .nm-header-action {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header .nm-profile-copy {
    display: none;
  }

  .nav-header .brand-logo {
    padding-left: 10px;
    padding-right: 8px;
  }

  .nav-header .nm-header-brand-inline-copy {
    display: none;
  }

  .nav-header .nm-header-brand-inline-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .content-body {
    margin-top: 8px;
  }

  .content-body .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }

  .card .card-header {
    flex-wrap: wrap;
    align-items: flex-start !important;
  }

  .card .card-header > * {
    width: 100%;
  }

  .card .card-header .btn,
  .card .card-header .btn-group,
  .card .card-header form {
    width: 100%;
  }

  .card .card-header .btn {
    justify-content: center;
  }

  .row.g-2 > [class*="col-"] {
    margin-top: 8px;
  }

  .row.g-2 > [class*="col-"]:first-child {
    margin-top: 0;
  }
}

/* Phone-first adjustments. */
@media (max-width: 767.98px) {
  body {
    font-size: 14px;
  }

  .content-body .container-fluid {
    padding-left: 6px;
    padding-right: 6px;
  }

  .header .header-content {
    min-height: 60px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .header .navbar {
    min-height: 56px;
  }

  .page-titles,
  .breadcrumb {
    margin-bottom: 8px;
  }

  /* Filter forms stack cleanly on phone. */
  form.row.g-2 .d-flex.gap-2,
  form.row.g-2 .d-flex.justify-content-end {
    width: 100%;
    justify-content: stretch !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }

  form.row.g-2 .d-flex.gap-2 .btn,
  form.row.g-2 .d-flex.justify-content-end .btn {
    flex: 1 1 48%;
    min-width: 0;
  }

  /* Compact large data tables for phone readability. */
  .admin-table th,
  .admin-table td {
    white-space: nowrap;
    font-size: 12.5px;
    padding: 0.45rem 0.4rem;
    vertical-align: middle;
  }

  .admin-table .btn,
  .admin-table .dropdown-toggle {
    min-height: 34px;
    padding: 0.3rem 0.55rem;
    font-size: 12px;
  }

  .badge {
    font-size: 11px;
  }

  .modal-dialog {
    margin: 0.5rem;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  .pagination .page-link {
    min-width: 36px;
    text-align: center;
  }
}

/* Extra small devices */
@media (max-width: 479.98px) {
  .header .nm-header-actions .nm-header-action {
    width: 36px;
    height: 36px;
  }

  .header .nm-avatar-wrap {
    width: 34px;
    height: 34px;
  }

  .btn,
  .form-control,
  .form-select {
    font-size: 13px;
  }

  .card-title,
  .card-header h4,
  .card-header h5 {
    font-size: 1rem;
  }
}