/* ============================================================
   XMPanels — Responsive Fix (global)
   File: public/shared/responsive-fix.css
   Dimuat TERAKHIR di semua halaman agar menimpa aturan sebelumnya.

   Fokus:
   1. Mode "Situs desktop" di Android (viewport ~980px + layar sentuh)
   2. Tabel & kartu rapi di mobile, tablet, dan desktop
   ============================================================ */

/* ------------------------------------------------------------
   1. MATIKAN FONT BOOSTING (Chrome Android)
   Saat "Situs desktop" aktif, meta viewport diabaikan dan Chrome
   memperbesar teks secara tidak merata per blok (text autosizing).
   Akibatnya teks di kartu/tabel tidak seragam dan layout pecah.
   ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ------------------------------------------------------------
   2. MEDIA TIDAK BOLEH MELEBIHI CONTAINER
   ------------------------------------------------------------ */
img,
video,
iframe {
  max-width: 100%;
}
img,
video {
  height: auto;
}

/* ------------------------------------------------------------
   3. KARTU & GRID
   Anak grid default-nya min-width:auto, sehingga UUID, email, atau
   angka panjang bisa mendorong kartu melebar keluar kolom.
   ------------------------------------------------------------ */
.servers-grid > *,
.stats-row > *,
.admin-stats-row > *,
.referral-stats-row > *,
.server-static-specs > *,
.server-actions-bar > *,
.server-manage-bar > *,
.sp-grid > *,
.sp-summary > *,
.contact-grid > *,
.packages > * {
  min-width: 0;
}

.server-name,
.server-id,
.static-spec-item .val,
.admin-user-phone,
.admin-srv-name,
.admin-srv-id,
.atc-subject,
.atc-meta,
.contact-card .c-val,
.sp-card {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   4. TABEL
   ------------------------------------------------------------ */
.table-responsive-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.hosting-comparison-table th,
.hosting-comparison-table td {
  vertical-align: top;
}

/* Tablet & mode desktop Android (≤1024px): tabel 4 kolom diberi lebar
   minimum agar kolom tidak terjepit; wrapper yang menangani scroll. */
@media (max-width: 1024px) {
  .hosting-comparison-table {
    min-width: 640px;
  }
  .hosting-comparison-table td:first-child {
    font-weight: 600;
    color: var(--text, inherit);
  }
}

/* ------------------------------------------------------------
   5. DASHBOARD: TINGGI LAYAR DI HP
   100vh di Android ikut menghitung area address bar, sehingga bagian
   bawah dashboard terpotong. dvh mengikuti tinggi layar yang terlihat.
   ------------------------------------------------------------ */
@supports (height: 100dvh) {
  .dash-console-container {
    min-height: 100dvh;
  }
  .dash-sidebar,
  .dash-main-area {
    height: 100dvh;
  }
}

/* ------------------------------------------------------------
   6. ADMIN PANEL — MOBILE (≤600px)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .admin-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .admin-stat-box {
    padding: 14px 10px;
  }
  .admin-stat-box .num {
    font-size: 1.4rem;
  }
  .admin-user-head,
  .admin-srv-row {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .admin-modal {
    width: calc(100% - 24px);
    padding: 18px 16px;
  }
  .admin-form-actions {
    flex-wrap: wrap;
  }
  .admin-form-actions button {
    flex: 1 1 auto;
  }
  .ticket-search-box {
    flex-basis: 100%;
    max-width: 100%;
  }
  .atc-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .thread-bubble {
    max-width: 100%;
  }
}

/* ------------------------------------------------------------
   7. PERANGKAT SENTUH: MATIKAN EFEK HOVER YANG "NYANGKUT"
   Di layar sentuh, :hover tetap aktif setelah tap sehingga kartu
   terlihat terangkat/bergeser terus.
   ------------------------------------------------------------ */
@media (hover: none) {
  .server-card:hover,
  .stat-box:hover,
  .package-card:hover,
  .bento:hover,
  .contact-card:hover,
  .admin-ticket-card:hover,
  .btn-srv-action:hover:not(:disabled) {
    transform: none;
  }
}

/* ------------------------------------------------------------
   8. LAYAR SENTUH LEBAR
   Cocok untuk mode "Situs desktop" Android (viewport ~980px),
   tablet landscape, dan iPad. Layout desktop tetap dipakai, hanya
   area sentuh dan scroll yang dirapikan.
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) and (min-width: 900px) {
  .tab-btn,
  .admin-tab-nav-btn,
  .status-pill-btn,
  .btn-srv-action,
  .btn-srv-manage,
  .admin-actions button,
  .lang-option {
    min-height: 44px;
  }
  .dash-nav-tabs,
  .admin-tab-nav {
    overscroll-behavior-x: contain;
  }
}