/* Tampilan HP (<= 768px). Desktop tidak terpengaruh: semua aturan di dalam media query,
   kecuali elemen bantu yang disembunyikan di desktop. Elemen topbar/menu bawah/drawer dibuat
   oleh js/mobile.js. */

.m-topbar, .m-bottomnav, .m-backdrop, .m-only, .m-quick, .m-fbar { display: none; }

@media (max-width: 768px) {
  :root {
    --m-top: 52px;
    --m-bottom: 62px;
    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  }
  .m-only { display: block; }
  .m-only.hidden { display: none !important; }
  body.m-noscroll { overflow: hidden; }

  /* ---- Topbar ---- */
  .m-topbar {
    display: flex; align-items: center; gap: .7rem;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: calc(var(--m-top) + var(--m-safe-top)); padding: var(--m-safe-top) 1rem 0;
    background: var(--color-navy); color: #fff;
  }
  .m-brand {
    background: var(--color-gold); color: var(--color-navy); font-weight: 800; letter-spacing: .04em;
    padding: .2rem .55rem; border-radius: var(--radius-sm); font-size: .95rem; cursor: pointer;
  }
  .m-title { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ---- Menu bawah ---- */
  .m-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--m-bottom) + var(--m-safe-bottom)); padding-bottom: var(--m-safe-bottom);
    background: #fff; border-top: 1px solid var(--color-border-strong); box-shadow: 0 -2px 10px rgba(28,35,51,.08);
  }
  .m-bottomnav button {
    flex: 1; min-width: 0; border: none; background: none; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--color-muted); padding: 0; -webkit-tap-highlight-color: transparent;
  }
  .m-bottomnav .m-ic { font-size: 1.35rem; line-height: 1; }
  .m-bottomnav .m-lb { font-size: .68rem; font-weight: 600; }
  .m-bottomnav button.active { color: var(--color-primary); box-shadow: inset 0 3px 0 var(--color-gold); }

  /* ---- Drawer (sidebar) ---- */
  .sidebar, .sidebar.collapsed {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(82vw, 320px);
    transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto;
    padding-top: var(--m-safe-top); padding-bottom: var(--m-safe-bottom);
  }
  .sidebar.m-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar.collapsed .brand, .sidebar.collapsed .nav-label, .sidebar.collapsed .user-info { display: initial; }
  .sidebar.collapsed .nav-group-header { display: flex; }
  .sidebar-header .brand { font-size: 1rem; }
  .nav-item { padding: .85rem 1rem; font-size: 1rem; }
  .nav-group-header { padding: .8rem 1rem .4rem; }
  .m-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15,23,42,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .m-backdrop.show { opacity: 1; pointer-events: auto; }
  .m-quick { display: block; padding: .4rem 0 .2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
  .m-quick-title { padding: .4rem 1rem; color: #94a3b8; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .m-quick-item {
    display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; color: var(--color-border);
    text-decoration: none; font-size: 1rem;
  }
  .m-quick-item .icon { width: 1.3rem; text-align: center; }

  /* ---- Konten ---- */
  .main-content {
    padding: calc(var(--m-top) + var(--m-safe-top) + .9rem) .8rem calc(var(--m-bottom) + var(--m-safe-bottom) + 1.2rem);
  }
  .page-header h1 { font-size: 1.25rem; }
  .page-header p { font-size: .85rem; }
  .card { padding: 1rem .85rem; overflow-x: auto; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .summary-card { padding: .7rem .8rem; }
  .summary-card .num { font-size: 1.25rem; }
  .summary-card .label { font-size: .65rem; }

  /* Toast di atas menu bawah; disembunyikan penuh saat tidak aktif */
  #global-toast {
    bottom: calc(var(--m-bottom) + var(--m-safe-bottom) + .8rem); transform: translateX(-50%);
    opacity: 0; visibility: hidden; transition: opacity .25s;
  }
  #global-toast.show { transform: translateX(-50%); opacity: 1; visibility: visible; }

  /* Tab: satu baris yang bisa digeser */
  .tabs, .subtabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar { display: none; }
  .tab-btn, .subtab-btn { white-space: nowrap; flex-shrink: 0; min-height: 44px; }

  /* Toolbar & filter: tumpuk penuh lebar */
  .toolbar { gap: .5rem; }
  .toolbar .field { min-width: calc(50% - .25rem); flex: 1 1 calc(50% - .25rem); }
  .toolbar .field:has(input[type="text"], input[type="search"]) { min-width: 100%; flex-basis: 100%; }
  .toolbar .field label { font-size: .78rem; }
  .toolbar-spacer { display: none; }

  /* Ramah jari */
  .btn { min-height: 44px; padding: 0 1rem; }
  .btn.small { min-height: 40px; }
  .btn.icon-btn { min-height: 40px; min-width: 40px; }
  .field input, .field select, .field textarea,
  input[type="text"], input[type="search"], input[type="number"], input[type="date"],
  input[type="password"], input[type="tel"], input[type="email"], select, textarea {
    font-size: 16px; /* cegah iOS memperbesar layar saat input difokuskan */
    min-height: 44px;
  }
  .pagination { flex-wrap: wrap; justify-content: center; }
  .pagination button { min-height: 44px; padding: .4rem 1rem; }

  /* Modal: layar penuh, tombol aksi menempel di bawah */
  .modal-overlay { align-items: stretch; justify-content: stretch; }
  .modal {
    max-width: none; max-height: none; height: 100%; border-radius: 0;
    padding: calc(1rem + var(--m-safe-top)) 1rem calc(1rem + var(--m-safe-bottom));
  }
  .modal .form-grid { grid-template-columns: 1fr; }
  .modal .form-grid .span-2 { grid-column: span 1; }
  .modal-actions {
    position: sticky; bottom: calc(-1rem - var(--m-safe-bottom)); background: #fff;
    padding: .8rem 0 calc(.2rem + var(--m-safe-bottom)); border-top: 1px solid var(--color-border);
    margin-top: 1rem;
  }
  .modal-actions .btn { flex: 1; }

  /* Tabel biasa: geser ke samping (menu non-utama) */
  .table-scroll { max-height: none; -webkit-overflow-scrolling: touch; }

  /* ---- Tabel -> kartu (menu utama, diberi data-label oleh mobile.js) ---- */
  table.m-card-table { display: block; }
  table.m-card-table thead { display: none; }
  table.m-card-table tbody { display: block; }
  table.m-card-table tbody tr {
    display: block; background: #fff; border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md); padding: .35rem .8rem; margin-bottom: .7rem; box-shadow: var(--shadow-card);
  }
  table.m-card-table tbody tr:nth-child(even), table.m-card-table tbody tr:hover { background: #fff; }
  table.m-card-table tbody tr.m-full { padding: .8rem; text-align: center; color: var(--color-muted); }
  table.m-card-table tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: .8rem;
    padding: .45rem 0; border-bottom: 1px dashed var(--color-border); text-align: right;
    overflow-wrap: anywhere; font-size: .9rem;
  }
  table.m-card-table tbody td:last-child { border-bottom: none; }
  table.m-card-table tbody td::before {
    content: attr(data-label); flex: 0 0 38%; text-align: left; color: var(--color-muted);
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  }
  table.m-card-table tbody td[data-label=""]::before, table.m-card-table tbody td.m-name::before { display: none; }
  table.m-card-table tbody td.m-name {
    justify-content: flex-start; text-align: left; font-weight: 700; font-size: 1.02rem; color: var(--color-primary);
    border-bottom: 1px solid var(--color-border-strong); padding-top: .6rem; font-family: var(--font-display);
  }
  table.m-card-table tbody td.m-empty { display: none; }
  table.m-card-table .table-actions, table.m-card-table td .btn { flex-wrap: wrap; }
  table.m-card-table .table-actions { justify-content: flex-end; width: 100%; }
  table.m-card-table tbody td:has(.table-actions) { border-top: 1px solid var(--color-border); margin-top: .2rem; }
}

@media (max-width: 768px) {
  /* ---- Filter & Urutkan (C2) ---- */
  .m-fbar { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; flex-wrap: wrap; }
  .m-fbtn { position: relative; }
  .m-fbadge { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .3rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: .75rem; line-height: 1.3rem; text-align: center; }
  .m-fbadge.hidden { display: none; }
  .m-fket { font-size: .8rem; color: var(--color-muted); }
  .m-sheet-back { position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.5); display: flex; align-items: flex-end; }
  .m-sheet { background: #fff; width: 100%; max-height: 88vh; display: flex; flex-direction: column; border-radius: 16px 16px 0 0; padding-bottom: var(--m-safe-bottom); }
  .m-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem .5rem; font-size: 1.05rem; }
  .m-sheet-x { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .4rem; color: var(--color-muted); }
  .m-sheet-body { overflow-y: auto; padding: 0 1rem 1rem; flex: 1; }
  .m-sheet-lb { display: block; font-size: .8rem; font-weight: 600; color: var(--color-muted); margin: .8rem 0 .25rem; }
  .m-sheet-body select, .m-sheet-body input { width: 100%; }
  .m-sheet-act { display: flex; gap: .6rem; padding: .7rem 1rem; border-top: 1px solid var(--color-border); }
  .m-sheet-act .btn { flex: 1; }
}