/* SN GROUP - RESPONSIVE HP & IPAD */

:root {
  --sn-font:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

html {
  -webkit-text-size-adjust:100%;
}

body {
  font-family:var(--sn-font);
}

#snMobileMenuBtn,
#snMobileBackdrop {
  display:none;
}

@media (max-width:1023px) {

  html,body {
    max-width:100%;
    overflow-x:hidden;
  }

  input,select,textarea,button {
    font-family:var(--sn-font);
  }

  /* Menu pembuka sidebar */
  #snMobileMenuBtn {
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    top:12px;
    left:12px;
    z-index:200003;
    width:42px;
    height:42px;
    background:#fff;
    border:1px solid #dbe3ed;
    border-radius:11px;
    box-shadow:0 3px 14px rgba(15,23,42,.12);
    color:#1e293b;
    font-size:22px;
    cursor:pointer;
  }

  #snMobileBackdrop {
    position:fixed;
    inset:0;
    z-index:200000;
    background:rgba(15,23,42,.42);
  }

  body.sn-mobile-menu-open #snMobileBackdrop {
    display:block;
  }

  /* Sidebar utama */
  body.sn-responsive-ready #snMobileSidebar {
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    z-index:200002!important;
    width:270px!important;
    max-width:85vw!important;
    height:100dvh!important;
    overflow-y:auto!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    visibility:hidden;
    box-shadow:6px 0 25px rgba(15,23,42,.12);
  }

  body.sn-mobile-menu-open #snMobileSidebar {
    transform:translateX(0);
    visibility:visible;
  }

  /* Semua area utama memakai lebar perangkat */
  body.sn-responsive-ready #snMobileMain {
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
    box-sizing:border-box!important;
  }

  /* Form & kartu umum */
  .snsite-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .snsite-summary {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Pengajuan Site */
  #snSiteApp .snsite-wrap {
    padding:70px 14px 18px!important;
    max-width:100%!important;
  }

  #snSiteApp .snsite-head {
    gap:10px;
  }

  #snSiteApp .snsite-head h1 {
    font-size:20px;
  }

  #snSiteApp .snsite-card {
    padding:13px!important;
    max-width:100%;
  }

  #snSiteApp .snsite-table-scroll {
    overflow-x:auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }

  #snSiteApp .snsite-table {
    min-width:1450px!important;
  }

  #snSiteApp .snsite-tools {
    flex-wrap:wrap;
  }

  #snSiteApp .snsite-tools .snsite-field {
    flex:1 1 180px;
  }

  #snSiteApp .snsite-tabs {
    display:flex;
    overflow-x:auto;
    white-space:nowrap;
    gap:8px;
  }

  #snSiteApp .snsite-tab {
    flex:0 0 auto;
  }

  /* Tabel umum tetap dapat di-scroll */
  .table-responsive,
  .table-wrapper,
  .table-container {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:767px) {

  body.sn-responsive-ready #snMobileMain {
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .snsite-grid,
  .snsite-summary {
    grid-template-columns:1fr!important;
  }

  #snSiteApp .snsite-wrap {
    padding:18px 10px 20px!important;
  }

  #snSiteApp .snsite-head {
    align-items:flex-start;
  }

  #snSiteApp .snsite-head h1 {
    font-size:18px;
  }

  #snSiteApp .snsite-card {
    padding:12px!important;
    border-radius:10px;
  }

  #snSiteApp .snsite-summary {
    gap:8px;
  }

  #snSiteApp .snsite-tools {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  #snSiteApp .snsite-tools .snsite-field {
    min-width:0;
  }

  #snSiteApp .snsite-tools .snsite-field:last-child {
    grid-column:1 / -1;
  }

  #snSiteApp .snsite-actions {
    flex-wrap:wrap;
  }

  #snSiteApp #snxlToolbar {
    align-items:flex-start;
    flex-direction:column;
  }

  #snSiteApp #snxlToolbar .snsite-actions {
    width:100%;
    display:flex;
    flex-wrap:wrap;
  }

  #snSiteApp .snsite-table {
    font-size:12px!important;
  }

  #snSiteApp input,
  #snSiteApp select,
  #snSiteApp textarea {
    font-size:16px;
  }

  /* Hindari auto-zoom saat input di iPhone */
  input:not([type="checkbox"]),
  select,
  textarea {
    font-size:16px;
  }
}

@media (prefers-reduced-motion:reduce) {
  #snMobileSidebar {
    transition:none!important;
  }
}