/* PM Shop Universal Stable Responsive UI
   Aman: hanya memperbaiki layout/sidebar/responsive tanpa mengubah fitur pembayaran. */
html, body { max-width: 100%; overflow-x: hidden; }
body { min-height: 100dvh; }
img, video, iframe { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }

/* ===== Layout dashboard/admin/user dengan sidebar ===== */
.layout {
  display: grid !important;
  grid-template-columns: 282px minmax(0, 1fr) !important;
  min-height: 100dvh !important;
  width: 100% !important;
  align-items: stretch !important;
}
.layout > .sidebar,
aside.sidebar {
  width: 282px !important;
  max-width: 282px !important;
  min-width: 282px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}
.layout > .main,
main.main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.layout > .main > .wrap,
main.main > .wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.sidebar > .brand,
.sidebar > .side-brand,
.sidebar > .admin-brand {
  flex: 0 0 auto !important;
}
.sidebar > .menu,
.sidebar > .side-menu,
.sidebar > nav.menu,
.sidebar > nav.side-menu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  padding-right: 6px !important;
  scrollbar-width: thin !important;
}
.sidebar > .sidebar-bottom {
  flex: 0 0 auto !important;
  margin-top: 14px !important;
  padding-top: 10px !important;
  display: grid !important;
  gap: 8px !important;
  background: rgba(11,16,32,.96) !important;
}
.sidebar .menu-section {
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.sidebar .menu-head {
  cursor: pointer !important;
  user-select: none !important;
}
.sidebar .menu-section > .submenu {
  display: grid !important;
  gap: 4px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: .15 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: max-height .22s ease, opacity .18s ease, padding .18s ease !important;
}
.sidebar .menu-section.open > .submenu,
.sidebar .menu-section.has-active > .submenu {
  max-height: 900px !important;
  opacity: 1 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
.sidebar .menu-caret { transition: transform .18s ease !important; }
.sidebar .menu-section.open .menu-caret,
.sidebar .menu-section.has-active .menu-caret { transform: rotate(180deg) !important; }
.sidebar .menu::-webkit-scrollbar,
.sidebar .side-menu::-webkit-scrollbar { width: 8px !important; }
.sidebar .menu::-webkit-scrollbar-track,
.sidebar .side-menu::-webkit-scrollbar-track { background: rgba(255,255,255,.055) !important; border-radius: 999px !important; }
.sidebar .menu::-webkit-scrollbar-thumb,
.sidebar .side-menu::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#7c4dff,#1d9bf0) !important; border-radius: 999px !important; }

/* ===== Content responsive dan anti rusak ===== */
.top, .nav, .quick, .nav-actions { min-width: 0 !important; }
.quick, .nav-actions { flex-wrap: wrap !important; }
.card, .panel, .stat, .nav, .modal-content { max-width: 100% !important; box-sizing: border-box !important; }
.table-wrap, .table-responsive, .table-scroll, .overflow-x-auto {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
table { max-width: 100%; }
.table-wrap table, .table-responsive table { min-width: 760px; }
form .grid, .form-grid, .create-grid, .filter-row, .stats, .feature-grid { min-width: 0 !important; }

/* Header publik / nav supaya tombol tidak kepotong */
.public-header, .site-header, header, .nav {
  max-width: 100% !important;
}
.public-header .actions, .site-header .actions, header .actions, .nav .nav-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

/* ===== Tablet kecil dan HP ===== */
@media (max-width: 900px) {
  .layout {
    display: block !important;
    min-height: 100dvh !important;
    width: 100% !important;
  }
  .layout > .sidebar,
  aside.sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(38,52,93,.7) !important;
    overflow: visible !important;
  }
  .sidebar > .menu,
  .sidebar > .side-menu,
  .sidebar > nav.menu,
  .sidebar > nav.side-menu {
    max-height: 56dvh !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
  }
  .sidebar > .sidebar-bottom {
    margin-top: 14px !important;
  }
  .layout > .main,
  main.main {
    width: 100% !important;
    min-width: 0 !important;
  }
  .layout > .main > .wrap,
  main.main > .wrap,
  .wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
  }
  .top, .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .brand-divider { display: none !important; }
  .page-title-panel, .title, .nav-actions, .quick {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  .nav-actions .btn, .quick .btn, .btn, button, input, select, textarea {
    min-width: 0 !important;
  }
  .stats, .feature-grid, .create-grid, .filter-row,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
  }
  .card, .panel, .stat { border-radius: 18px !important; }
  h1 { font-size: clamp(22px, 7vw, 32px) !important; }
  h2 { font-size: clamp(18px, 6vw, 26px) !important; }
}

/* ===== HP sangat kecil, termasuk layar jam tangan / mini browser ===== */
@media (max-width: 430px) {
  .layout > .sidebar, aside.sidebar { padding: 12px !important; }
  .wrap, .main, main.main, .layout > .main > .wrap, main.main > .wrap { padding: 12px !important; }
  .brand, .side-brand, .shop-brand { gap: 10px !important; }
  .brand-logo, .side-logo, .shop-logo { width: 40px !important; height: 40px !important; min-width: 40px !important; }
  .brand-text b, .side-brand-text b, .shop-name { font-size: 18px !important; }
  .side-actions { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .nav-actions, .quick { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .nav-actions .btn, .quick .btn { width: 100% !important; justify-content: center !important; }
  .table-wrap table, .table-responsive table { min-width: 680px; }
}
@media (max-width: 280px) {
  .layout > .sidebar, aside.sidebar, .wrap, .layout > .main > .wrap, main.main > .wrap { padding: 8px !important; }
  .nav-actions, .quick, .side-actions { grid-template-columns: 1fr !important; }
  .btn, .nav-actions .btn, .quick .btn, .side-actions a { width: 100% !important; }
  .sidebar > .menu, .sidebar > .side-menu { max-height: 50dvh !important; }
}