/* Final mobile stability patch for Hostinger production
   Tujuan: mencegah layout melebar/pecah di HP tanpa merombak desain desktop. */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
.main-column, .page-content, .page-content-inner, .card, .panel, .table-card, .inset-card { min-width: 0; }

.table-wrap,
.wa-log-table-wrap {
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table,
.wa-log-table {
  min-width: 720px;
}
.action-row,
.form-row,
.filter-row,
.button-row,
.topbar-actions,
.table-toolbar,
.utility-chip-group {
  min-width: 0;
}

@media (max-width: 1100px) {
  .grid,
  .grid.two,
  .grid.three,
  .grid.two-main,
  .compact-grid,
  .summary-grid,
  .stats-grid,
  .dashboard-grid,
  .portal-feature-grid,
  .portal-role-grid,
  .portal-flow-grid,
  .notification-layout,
  .civic-footer-grid,
  .exact-service-grid,
  .exact-process,
  .exact-activity-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  body.sidebar-open { overflow: hidden; }

  .app-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh;
    padding: .75rem !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 340px) !important;
    max-width: 340px !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    transform: translateX(-110%) !important;
    transition: transform .22s ease !important;
    z-index: 1000 !important;
    border-radius: 0 22px 22px 0 !important;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
    background: rgba(0,0,0,.38) !important;
    z-index: 999 !important;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block !important;
  }

  .main-column {
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar {
    position: sticky !important;
    top: .5rem !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: .75rem !important;
    flex-wrap: wrap !important;
    padding: .8rem !important;
    border-radius: 20px !important;
  }

  .topbar-left {
    min-width: 0 !important;
    flex: 1 1 220px !important;
  }

  .page-title {
    font-size: clamp(1.15rem, 5vw, 1.65rem) !important;
    line-height: 1.18 !important;
  }

  .page-subtitle,
  .workspace-label {
    overflow-wrap: anywhere !important;
  }

  .topbar-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    justify-content: flex-start !important;
  }

  .topbar-actions .btn,
  .utility-chip {
    white-space: normal !important;
  }

  .page-content,
  .page-content-inner {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .table-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .75rem !important;
  }

  .table-toolbar > *,
  .table-toolbar form,
  .table-toolbar .action-row {
    width: 100% !important;
  }

  .action-row,
  .form-row,
  .filter-row,
  .button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .55rem !important;
  }

  .field,
  .form-stack,
  .form-row > *,
  .filter-row > * {
    min-width: 0 !important;
  }

  .public-header .nav-row,
  .civic-nav-row {
    align-items: flex-start !important;
    gap: .75rem !important;
  }

  .public-nav,
  .civic-public-nav {
    width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    gap: .55rem !important;
    padding-bottom: .25rem !important;
  }

  .auth-wrapper,
  .auth-centered {
    min-height: auto !important;
    padding: 1rem 0 !important;
  }

  .auth-card {
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 640px) {
  .app-shell { padding: .5rem !important; }
  .card,
  .panel,
  .table-card,
  .inset-card,
  .strip-card,
  .summary-card,
  .data-card,
  .auth-card {
    border-radius: 18px !important;
    padding: .95rem !important;
  }

  .topbar-actions .btn,
  .table-toolbar .btn,
  .action-row .btn,
  .button-row .btn,
  form .btn-block {
    width: 100% !important;
    justify-content: center !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    font-size: 16px !important; /* mencegah auto-zoom iOS/Android browser */
  }

  .table-wrap table,
  .wa-log-table {
    min-width: 640px;
  }

  .brand,
  .brand-meta,
  .brand-sidebar {
    min-width: 0 !important;
  }

  .brand span,
  .sidebar-user div,
  .table-subtitle,
  small {
    overflow-wrap: anywhere !important;
  }
}


/* Final WA Reminder mobile repair - 30 Jun 2026 */
.whatsapp-final-page,
.whatsapp-final-page * {
  min-width: 0 !important;
}

.whatsapp-final-page .panel-header,
.whatsapp-final-page .split-row,
.whatsapp-final-page .table-toolbar {
  gap: .85rem !important;
}

.whatsapp-final-page .summary-strip,
.whatsapp-final-page .four-up-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .8rem !important;
}

.whatsapp-final-page .wa-target-options,
.whatsapp-final-page .wa-checkbox-list,
.whatsapp-final-page .wa-preview-grid {
  width: 100% !important;
}

.whatsapp-final-page .wa-target-card {
  overflow: hidden !important;
}

.whatsapp-final-page .wa-target-copy strong,
.whatsapp-final-page .wa-target-copy small,
.whatsapp-final-page .table-subtitle,
.whatsapp-final-page .subtle-value,
.whatsapp-final-page .lead {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.whatsapp-final-page .message-preview {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.55 !important;
  font-size: .88rem !important;
}

.whatsapp-final-page .check-option {
  width: 100% !important;
  align-items: flex-start !important;
}

.whatsapp-final-page .check-option span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 980px) {
  .whatsapp-final-page .panel-header,
  .whatsapp-final-page .split-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .whatsapp-final-page .summary-strip,
  .whatsapp-final-page .four-up-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .whatsapp-final-page .wa-target-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .whatsapp-final-page .wa-target-card {
    min-height: unset !important;
    padding: 1rem !important;
    border-radius: 18px !important;
  }

  .whatsapp-final-page .action-row,
  .whatsapp-final-page .wa-action-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .whatsapp-final-page .action-row .btn,
  .whatsapp-final-page .wa-action-row .btn {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .whatsapp-final-page .summary-strip,
  .whatsapp-final-page .four-up-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: .55rem !important;
  }

  .whatsapp-final-page .strip-card {
    padding: .85rem !important;
    border-radius: 16px !important;
  }

  .whatsapp-final-page .stat-value {
    font-size: 1.45rem !important;
  }

  .whatsapp-final-page .wa-target-card-top {
    align-items: center !important;
  }

  .whatsapp-final-page .wa-target-copy strong {
    font-size: 1rem !important;
  }

  .whatsapp-final-page .wa-target-copy small {
    font-size: .88rem !important;
    line-height: 1.45 !important;
  }

  .whatsapp-final-page select {
    text-overflow: ellipsis !important;
  }

  .whatsapp-final-page .wa-checkbox-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: 340px !important;
    overflow-y: auto !important;
    padding-right: .15rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .whatsapp-final-page .wa-log-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .whatsapp-final-page .wa-log-table,
  .whatsapp-final-page .wa-log-table thead,
  .whatsapp-final-page .wa-log-table tbody,
  .whatsapp-final-page .wa-log-table tr,
  .whatsapp-final-page .wa-log-table th,
  .whatsapp-final-page .wa-log-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .whatsapp-final-page .wa-log-table {
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 .75rem !important;
  }

  .whatsapp-final-page .wa-log-table thead {
    display: none !important;
  }

  .whatsapp-final-page .wa-log-table tr {
    border: 1px solid rgba(74, 57, 49, 0.12) !important;
    border-radius: 18px !important;
    background: rgba(255,250,245,.88) !important;
    padding: .8rem !important;
    box-shadow: 0 10px 24px rgba(74,57,49,.08) !important;
  }

  .whatsapp-final-page .wa-log-table td {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: .55rem !important;
    align-items: start !important;
    padding: .42rem 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    border: 0 !important;
    font-size: .88rem !important;
  }

  .whatsapp-final-page .wa-log-table td::before {
    content: attr(data-label);
    font-weight: 800;
    color: rgba(74,57,49,.64);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
}