/* Perbaikan tampilan HP (global). Hanya aktif di layar kecil, tidak mengubah tampilan desktop. */
.mf-scroll, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 991.98px) {
  html, body { max-width: 100%; }
  img, video, canvas, iframe { max-width: 100%; }
  img { height: auto; }
  .container, .container-fluid { padding-left: 10px; padding-right: 10px; max-width: 100%; }
  .row { --bs-gutter-x: .75rem; }
  .card, .card-body, .card-header, form, .form-control, .form-select, .input-group, .alert, .modal-content { max-width: 100%; }
  .card-body { overflow-wrap: anywhere; }
  .d-flex { flex-wrap: wrap; min-width: 0; }
  .d-flex > * { min-width: 0; }
  .input-group { flex-wrap: nowrap; }
  .input-group > .form-control, .input-group > .form-select { min-width: 0; }
  .btn-group { flex-wrap: wrap; }
  h1, h2, h3 { font-size: clamp(1.15rem, 5vw, 1.6rem); overflow-wrap: anywhere; }
  table { font-size: .82rem; }
  .table td, .table th { white-space: nowrap; }
  .table td.text-wrap, .table td .text-wrap { white-space: normal; }
  .modal-dialog { margin: .5rem auto; max-width: calc(100% - 1rem) !important; }
  .modal-body { overflow-x: auto; }
  .nav-tabs, .nav-pills { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
  .nav-tabs > *, .nav-pills > * { flex: 0 0 auto; }
  .select2-container { max-width: 100% !important; }
  .dataTables_wrapper .row > div { overflow-x: auto; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}
/* Tombol menu dan sidebar geser hanya di ponsel */
@media (min-width: 768px) {
  .sidebar { left: 0 !important; visibility: visible !important; transform: none !important; }
  .mobile-nav-toggle { display: none !important; }
  body:has(.sidebar) .content,
  body:has(.sidebar) .main,
  body:has(.sidebar) .content-wrapper,
  body:has(.sidebar) .main-content {
    margin-left: 280px !important;
  }
}
@media (max-width: 767.98px) {
  body { margin-left: 0 !important; }
  .content-wrapper, .content, .main-content, .main, .page-content, #content, .container-main {
    margin-left: 0 !important; width: auto !important; max-width: 100% !important;
    padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; }
  .content-wrapper, .content, .main-content { padding-top: 60px !important; }
  body > .container, body > .container-fluid { padding-top: 56px; }
  .btn { white-space: normal; max-width: 100%; }
  .sidebar { left: -100% !important; width: min(86vw, 300px) !important; }
  .sidebar.open { left: 0 !important; }
  .mobile-nav-toggle {
    display: inline-flex !important; align-items: center; justify-content: center;
    left: 12px !important; right: auto !important; top: 12px !important;
    width: 40px !important; height: 40px !important; min-height: 0 !important;
    padding: 0 !important; border-radius: 10px !important; z-index: 4600 !important;
    line-height: 0 !important;
  }
  body:has(.sidebar) .main { padding-top: 64px !important; }
}

/* HP: paksa tata letak yang masih kaku */
@media (max-width: 767.98px) {
  .content-wrapper, .container-dashboard, .container-grid, .page-wrap, .wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .container-grid, .stat-grid, .menu-grid, .info-grid, .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  input, select, textarea, .form-control, .form-select { font-size: 16px !important; }
  .app-header, .topbar, .page-header { flex-wrap: wrap !important; gap: 8px; }
  .btn, button.btn, .nav-link { min-height: 40px; }
  [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"], [class*="col-xxl-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 575.98px) {
  h1, .header-main h1 { font-size: 1.35rem !important; }
  .card, .card-custom, .card-body { padding-left: 12px; padding-right: 12px; }
  .clock { width: 120px !important; height: 120px !important; }
}