/* Responsive proportional fix – UI only. No print or application logic changes. */
@media screen {
  html, body { max-width:100%; overflow-x:hidden; }
  .app, .content, main, .topbar, .card, form, fieldset,
  .grid, .form-row, .equal-row, .filter-grid, .tablet-laporan-filter,
  .section-head, .toolbar, .actions, .table-wrap {
    min-width:0;
  }

  .topbar, .card {
    box-sizing:border-box;
    max-width:100%;
    height:auto;
  }

  .grid > *, .form-row > *, .equal-row > *, .filter-grid > *,
  .tablet-laporan-filter > *, .section-head > *, .toolbar > * {
    min-width:0;
    max-width:100%;
  }

  input, select, textarea, button, .btn {
    box-sizing:border-box;
    max-width:100%;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea {
    width:100%;
    min-width:0;
  }

  input[type="date"], input[type="month"], input[type="time"],
  input[type="datetime-local"] {
    display:block;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  input[type="date"]::-webkit-date-and-time-value,
  input[type="month"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value {
    min-width:0;
    text-align:left;
  }

  .table-wrap {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* iPad/tablet landscape and smaller laptops */
@media screen and (min-width:821px) and (max-width:1180px) {
  .content { min-width:0 !important; }

  .form-row, .equal-row, .filter-grid, .tablet-laporan-filter {
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
    align-items:end !important;
  }

  .form-row > *, .equal-row > *, .filter-grid > *,
  .tablet-laporan-filter > * {
    grid-column:auto !important;
    width:auto !important;
  }

  .form-row .btn, .equal-row .btn, .filter-grid .btn,
  .tablet-laporan-filter .btn {
    width:100% !important;
    min-width:0 !important;
    white-space:normal;
  }

  .topbar {
    align-items:flex-start;
  }

  .topbar > :first-child {
    flex:1 1 auto;
    min-width:0;
  }

  .topbar .actions, .topbar .format-actions {
    flex:0 0 auto;
    max-width:46%;
  }
}

/* iPad portrait / tablet sempit */
@media screen and (min-width:601px) and (max-width:820px) {
  .form-row, .equal-row, .filter-grid, .tablet-laporan-filter {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    align-items:end !important;
  }

  .form-row > *, .equal-row > *, .filter-grid > *,
  .tablet-laporan-filter > * {
    grid-column:auto !important;
    min-width:0 !important;
    width:auto !important;
  }

  .form-row .btn, .equal-row .btn, .filter-grid .btn,
  .tablet-laporan-filter .btn {
    width:100% !important;
  }
}

/* HP tetap satu kolom dan tidak melebar */
@media screen and (max-width:600px) {
  .form-row, .equal-row, .filter-grid, .tablet-laporan-filter {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
  }
  .topbar .actions, .topbar .format-actions { max-width:100%; width:100%; }
}

/* Dokumen preview/cetak tidak dibuat bubble dan tidak diubah ukurannya. */
@media screen {
  .report-sheet, .report-print, .companion-report-page,
  .card.report-print {
    border-radius:0 !important;
  }
}