/* ============================================
   Mobile / HP — Responsive (<992px, <576px)
   ============================================ */

@media (max-width: 991.98px) {
  :root {
    --mobile-header: 56px;
  }

  /* Lebar penuh, kurangi padding ganda */
  .app-main > .container {
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .page-section > .container,
  .page-section > .container-fluid,
  .almarhum-bg > .container,
  .tambah-bg > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  .themed-title-dark {
    font-size: 1.35rem !important;
  }

  /* Toolbar & form */
  .page-toolbar,
  .tree-toolbar {
    padding: 0.75rem 0.85rem;
  }

  .page-toolbar .btn,
  .tree-toolbar .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tree-toolbar form {
    width: 100%;
  }

  .tree-toolbar .form-select {
    flex: 1 1 100%;
    min-width: 0;
    width: 100% !important;
  }

  /* Pohon silsilah — tinggi viewport minus header/nav */
  .tree-bagan-wrap {
    max-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 8rem);
    min-height: 45vh;
  }

  /* Tab navigasi — scroll horizontal */
  .nav-tabs,
  .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.25rem;
    padding-bottom: 0.15rem;
  }

  .nav-tabs::-webkit-scrollbar,
  .nav-pills::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link,
  .nav-pills button.nav-link {
    white-space: nowrap;
    font-size: 0.82rem;
    padding: 0.45rem 0.85rem;
  }

  /* Tabel — aksi vertikal */
  .table-responsive .btn-sm {
    display: inline-flex;
    margin: 0.15rem 0.15rem 0.15rem 0;
  }

  .table td .d-flex,
  .table td {
    white-space: normal;
  }

  /* Modal fullscreen di HP kecil */
  .modal-dialog {
    margin: 0.5rem;
  }

  .modal-fullscreen-sm-down {
    max-width: 100%;
  }

  /* Teks panjang */
  code,
  .font-monospace,
  .cron-url,
  .api-key-display {
    word-break: break-all;
    font-size: 0.78rem;
  }

  /* Search overlay mobile */
  body.page-dashboard .mobile-search-overlay {
    display: none !important;
  }

  /* Import dropzone */
  .page-anggota .member-card-photo {
    height: 190px;
  }

  /* Import dropzone */
  .import-dropzone {
    padding: 1.25rem 1rem;
  }

  /* Theme picker */
  .theme-picker-grid {
    grid-template-columns: 1fr;
  }

  /* Halaman almarhum */
  .almarhum-bg {
    padding-bottom: var(--mobile-nav);
  }

  .almarhum-bg .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .almarhum-bg h2 {
    font-size: 1.15rem !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    flex: 1 1 100%;
  }

  /* Form standalone (tambah/edit) */
  .tambah-bg,
  .profile-bg {
    padding-bottom: calc(var(--mobile-nav) + 1rem);
    min-height: auto;
  }
}

@media (max-width: 575.98px) {
  :root {
    --mobile-header: 50px;
  }

  .app-main > .container {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .app-main {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
  }

  /* Dashboard */
  .dash-quick-grid {
    grid-template-columns: 1fr;
  }

  .dash-stats-grid {
    grid-template-columns: 1fr;
  }

  .dash-carousel-img {
    height: 200px;
  }

  .dash-welcome {
    padding: 0.95rem 1rem;
  }

  .dash-welcome strong {
    font-size: 0.95rem;
  }

  /* Toolbar tombol full-width stack */
  .page-toolbar .d-flex.flex-wrap,
  .page-toolbar .row > [class*="col-"] .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  .page-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .tree-toolbar > .d-flex {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }

  .tree-toolbar .d-flex.gap-2 {
    justify-content: stretch;
  }

  .tree-toolbar .d-flex.gap-2 .btn {
    flex: 1;
  }

  #tree-simple {
    min-width: 320px !important;
    padding: 0.65rem !important;
    font-size: 0.85rem !important;
  }

  .tree-bagan-wrap {
    max-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 7rem);
    padding: 0.5rem !important;
  }

  /* Keuangan — form stack */
  .keuangan-form .col-md-2,
  .keuangan-form .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Sembunyikan kolom tabel kurang penting */
  .table-mobile-compact .d-none-mobile,
  .table-mobile-compact th.d-none-mobile,
  .table-mobile-compact td.d-none-mobile {
    display: none !important;
  }

  .table td .btn-sm {
    display: block;
    width: 100%;
    margin: 0.2rem 0;
  }

  /* Mobile brand truncate */
  .mobile-brand span {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Pengaturan nav pills */
  .settings-nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .settings-nav-pills .nav-link {
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
  }
}

@media (max-width: 380px) {
  .mobile-nav-label {
    font-size: 0.52rem;
  }

  .mobile-nav-icon {
    width: 2rem;
    height: 1.65rem;
    font-size: 1rem;
  }
}