/*
 SN GROUP - MOBILE ALIGNMENT FIX
 Scope: smartphone only, max 767px.
 No business logic or print stylesheet changes.
*/

@media screen and (max-width:767px) {

  :root {
    --sn-mobile-gap:10px;
    --sn-mobile-control-height:42px;
    --sn-mobile-radius:9px;
  }

  /* ======================================
     1. BOX SIZING & VIEWPORT SAFETY
     ====================================== */

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

  body {
    max-width:100%;
  }

  body *,
  body *::before,
  body *::after {
    box-sizing:border-box;
  }

  /* Hindari grid dan flex children
     memaksa kontainer melebar. */

  main,
  .main-content,
  .app-main,
  .content,
  .container,
  .card,
  .snsite-card,
  .snsite-field,
  .snsite-grid > *,
  .snsite-tools > * {
    min-width:0;
  }

  /* ======================================
     2. FORM CONTROLS
     ====================================== */

  main input:not(
    [type="checkbox"]
  ):not(
    [type="radio"]
  ):not(
    [type="hidden"]
  ),
  main select,
  main textarea,
  #snSiteApp input:not(
    [type="checkbox"]
  ):not(
    [type="radio"]
  ):not(
    [type="hidden"]
  ),
  #snSiteApp select,
  #snSiteApp textarea {
    max-width:100%;
    font-family:
      "SF Pro Text",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Arial,
      sans-serif;
    font-size:16px;
    line-height:1.4;
  }

  main input:not(
    [type="checkbox"]
  ):not(
    [type="radio"]
  ):not(
    [type="hidden"]
  ),
  main select,
  #snSiteApp .snsite-field > input,
  #snSiteApp .snsite-field > select {
    min-height:var(--sn-mobile-control-height);
    height:var(--sn-mobile-control-height);
  }

  /* ======================================
     3. NATIVE DATE INPUT
     ====================================== */

  input[type="date"],
  input[type="datetime-local"],
  input[type="month"] {
    min-width:0!important;
    max-width:100%!important;
    min-height:42px;
    height:42px;
    padding:8px 10px;
    border-radius:var(--sn-mobile-radius);
    font-size:16px!important;
    font-variant-numeric:tabular-nums;
    -webkit-appearance:auto;
    appearance:auto;
  }

  input[type="date"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value {
    min-height:1em;
    text-align:left;
  }

  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    flex-shrink:0;
    margin-left:4px;
    cursor:pointer;
  }

  /* Dua field tanggal di grid/form group
     turun menjadi satu kolom. */

  .date-range,
  .date-range-group,
  .date-filter-group,
  .filter-date-range,
  .tanggal-range,
  .tanggal-filter,
  .date-filters {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:var(--sn-mobile-gap)!important;
    width:100%!important;
    max-width:100%!important;
  }

  .date-range > *,
  .date-range-group > *,
  .date-filter-group > *,
  .filter-date-range > *,
  .tanggal-range > *,
  .tanggal-filter > *,
  .date-filters > * {
    width:100%;
    min-width:0;
    max-width:100%;
  }

  /* ======================================
     4. FILTER & SEARCH TOOLBAR
     ====================================== */

  .filter-bar,
  .filters-bar,
  .filter-toolbar,
  .filter-controls,
  .search-filter-bar,
  .toolbar-filters,
  #snSiteApp .snsite-tools {
    display:grid!important;
    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;
    align-items:end!important;
    gap:10px!important;
    width:100%;
    max-width:100%;
  }

  .filter-bar > *,
  .filters-bar > *,
  .filter-toolbar > *,
  .filter-controls > *,
  .search-filter-bar > *,
  .toolbar-filters > *,
  #snSiteApp .snsite-tools > * {
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
  }

  .filter-bar label,
  .filters-bar label,
  .filter-toolbar label,
  .filter-controls label,
  #snSiteApp .snsite-tools label {
    display:block;
    margin-bottom:6px;
    font-size:12px;
    font-weight:600;
    line-height:1.4;
  }

  /* Search field menggunakan lebar penuh
     ketika memakai class yang dikenali. */

  .filter-bar > .search-field,
  .filter-toolbar > .search-field,
  .filter-controls > .search-field,
  #snSiteApp .snsite-tools
  .snsite-field:last-child {
    grid-column:1 / -1;
  }

  /* ======================================
     5. BUTTON GROUPS
     ====================================== */

  .toolbar-actions,
  .filter-actions,
  .form-actions,
  .button-group,
  .action-buttons,
  #snSiteApp #snxlToolbar .snsite-actions {
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%;
    max-width:100%;
  }

  .toolbar-actions > button,
  .filter-actions > button,
  .form-actions > button,
  .button-group > button,
  .action-buttons > button,
  #snSiteApp #snxlToolbar
  .snsite-actions > button {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px;
    flex:1 1 125px;
    min-width:0!important;
    max-width:100%;
    min-height:38px;
    padding:8px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    line-height:1.25;
    text-align:center;
    white-space:normal;
    overflow-wrap:break-word;
  }

  .toolbar-actions > button svg,
  .filter-actions > button svg,
  .form-actions > button svg,
  .button-group > button svg,
  .action-buttons > button svg {
    flex-shrink:0;
  }

  /* ======================================
     6. PENGAJUAN SITE - INPUT RO
     ====================================== */

  #snSiteApp #snSiteInput .snsite-grid {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    align-items:stretch;
  }

  #snSiteApp #snSiteInput .snsite-field {
    min-width:0!important;
    width:100%;
    max-width:100%;
  }

  #snSiteApp #snSiteInput
  .snsite-field > input,
  #snSiteApp #snSiteInput
  .snsite-field > select {
    width:100%!important;
    max-width:100%!important;
  }

  #snSiteApp #snSiteInput
  .snsite-head {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }

  #snSiteApp #snSiteTambah {
    min-height:38px;
    white-space:normal;
    text-align:center;
  }

  #snSiteApp #snSiteInput
  .snsite-card > .snsite-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    width:100%;
  }

  #snSiteApp #snSiteInput
  .snsite-card > .snsite-actions > button {
    width:100%;
    max-width:100%;
    min-height:40px;
  }

  /* Input tabel RO tetap scroll horizontal,
     bukan ditumpuk menjadi satu kolom. */

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

  /* ======================================
     7. RIWAYAT PENGAJUAN SITE
     ====================================== */

  #snSiteApp #snSiteRiwayat
  .snsite-summary {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px;
  }

  #snSiteApp #snSiteRiwayat
  .snsite-tools {
    display:grid!important;
    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;
    align-items:end!important;
    gap:10px!important;
  }

  #snSiteApp #snSiteRiwayat
  .snsite-tools .snsite-field {
    min-width:0!important;
    width:100%;
    max-width:100%;
  }

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

  #snSiteApp #snSiteRiwayat
  .snsite-tools input,
  #snSiteApp #snSiteRiwayat
  .snsite-tools select {
    width:100%!important;
    max-width:100%!important;
    min-height:42px;
  }

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

  /* Jangan mengubah tata letak tombol
     Edit, ACC, Print dalam tabel. */

  #snSiteApp #snSiteHistoryRows
  .snsite-actions {
    display:inline-flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    width:max-content!important;
    gap:5px!important;
  }

  #snSiteApp #snSiteHistoryRows
  .snsite-actions > button {
    flex:none!important;
    min-width:0;
    white-space:nowrap;
  }

  /* ======================================
     8. MODAL
     ====================================== */

  dialog,
  [role="dialog"],
  .modal-content,
  .hoFixModal {
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
  }

  .modal-content {
    overflow-y:auto;
  }

  /* ======================================
     9. SMALL MOBILE: 320-359px
     ====================================== */

}

@media screen and (max-width:359px) {

  .filter-bar,
  .filters-bar,
  .filter-toolbar,
  .filter-controls,
  .search-filter-bar,
  .toolbar-filters,
  #snSiteApp .snsite-tools,
  #snSiteApp #snSiteRiwayat
  .snsite-tools {
    grid-template-columns:minmax(0,1fr)!important;
  }

  .filter-bar > *,
  .filters-bar > *,
  .filter-toolbar > *,
  .filter-controls > *,
  .search-filter-bar > *,
  .toolbar-filters > * {
    grid-column:auto!important;
  }

  .toolbar-actions > button,
  .filter-actions > button,
  .form-actions > button {
    flex-basis:100%;
  }
}