/* =====================================================================
   responsive.css — penyesuaian untuk tablet & ponsel.
   Dimuat paling akhir agar menimpa aturan di file lain.

   Titik henti (breakpoint):
     ≤1100px  tablet lanskap  — sidebar zona menyempit
     ≤900px   tablet potret   — kolom tunggal, header dirapatkan
     ≤620px   ponsel besar    — tab menggulir, toolbar bertumpuk
     ≤400px   ponsel kecil    — tipografi & jarak diperkecil
   ===================================================================== */

/* --- Dasar: apa pun tidak boleh melebihi lebar layar --- */
html, body { max-width: 100%; overflow-x: hidden; }
img, canvas, svg, table { max-width: 100%; }

/* Semua kanvas menskala mengikuti lebar induknya */
#zoneCanvas, #climoCanvas, #omcCanvas {
  width: 100%;
  height: auto;
}
#orbitCanvas { width: 100%; max-width: 260px; height: auto; }

/* Target sentuh minimal 40px pada perangkat sentuh */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-tab, .mode-btn, select, input[type="search"] { min-height: 42px; }
  .btn-small { min-height: 38px; }
  input[type="range"] { height: 34px; }
  .check { padding: 4px 0; }
  .table tbody tr td { padding-top: 12px; padding-bottom: 12px; }
}

/* =================== ≤1100px : tablet lanskap =================== */
@media (max-width: 1100px) {
  .zone-layout { grid-template-columns: 260px 1fr; }
  .omc-layout { grid-template-columns: 1fr 280px; }
  #globalMap { height: 520px; }
}

/* =================== ≤900px : tablet potret ===================== */
@media (max-width: 900px) {
  .app-header {
    gap: 8px 12px;
    padding: 10px 14px;
  }
  .brand-icon { font-size: 1.7rem; }
  .brand h1 { font-size: 1.3rem; }
  .brand p { font-size: 0.75rem; }

  .clock { min-width: 0; }
  .clock-time { font-size: 1.25rem; }

  .nav-tabs {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab { flex: none; }

  .zone-layout, .omc-layout { grid-template-columns: 1fr; }
  .zone-sidebar { position: static; }

  /* Sidebar zona jadi dua kolom agar tidak terlalu panjang di tablet */
  .zone-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    align-items: start;
  }
  .zone-sidebar h3,
  .zone-sidebar .field-wide,
  .zone-sidebar .btn-row,
  .zone-sidebar .orbit-wrap { grid-column: 1 / -1; }

  #globalMap { height: 460px; }
  .map-legend { max-width: 210px; font-size: 0.7rem; }
}

/* =================== ≤620px : ponsel ============================ */
@media (max-width: 620px) {
  .app-header {
    padding: 8px 12px;
    gap: 6px 10px;
  }
  .brand { gap: 8px; }
  .brand p { display: none; }
  .brand h1 { font-size: 1.15rem; }

  /* Jam: waktu besar di kiri, rincian di bawah header */
  .clock { align-items: flex-end; }
  .clock-time { font-size: 1.15rem; }
  .clock-zone { display: none; }
  .clock-sub {
    gap: 2px 8px;
    font-size: 0.68rem;
    justify-content: flex-end;
  }

  .app-main { padding: 12px 10px 28px; }
  .card { padding: 12px; border-radius: 10px; }
  .canvas-card { padding: 8px; }

  h1 { font-size: 1.15rem; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 0.95rem; }
  body { font-size: 0.92rem; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 10px; }

  .hero-now { gap: 4px 10px; font-size: 0.78rem; }

  /* Sidebar zona: dua pilihan berdampingan agar panel tidak terlalu tinggi */
  .zone-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
  }
  .zone-sidebar h3,
  .zone-sidebar .field-wide,
  .zone-sidebar .btn-row,
  .zone-sidebar .orbit-wrap { grid-column: 1 / -1; }
  .zone-sidebar .field { margin-bottom: 8px; }
  .zone-sidebar .btn-row .btn { flex: 1 1 45%; }
  .zone-sidebar select { font-size: 0.84rem; padding: 8px; }
  .canvas-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .season-badge { font-size: 0.82rem; padding: 6px 12px; }

  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
  .stat { padding: 8px 10px; }
  .stat-value { font-size: 0.98rem; }
  .stat-label { font-size: 0.66rem; }

  .btn { padding: 9px 14px; font-size: 0.86rem; }
  .btn-row { gap: 6px; }
  .controls { gap: 8px; }
  .controls .btn, .controls .inline-field { width: 100%; }

  /* Toolbar peta bertumpuk rapi */
  .map-toolbar { padding: 10px; gap: 8px; }
  .mode-switch { width: 100%; }
  .mode-btn { flex: 1; text-align: center; }
  .toolbar-group { width: 100%; }
  .toolbar-group.layers {
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
  }
  /* Baris kontrol realtime: jam, lalu status + tombol, lalu pencarian */
  #realtimeControls {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 8px;
  }
  #realtimeControls .rt-clock,
  #realtimeControls .search-form { grid-column: 1 / -1; }
  .search-form { width: 100%; }
  .search-form input { width: 100%; flex: 1; }
  .rt-clock { font-size: 0.82rem; }
  .map-toolbar .inline-field { width: 100%; }
  .map-toolbar .inline-field input[type="range"] { width: 100%; }
  #simControls .btn-small { flex: 1; }

  /* Peta: tinggi mengikuti layar, legenda dapat disembunyikan */
  #globalMap { height: 62vh; min-height: 320px; }
  .map-legend {
    left: 8px; right: 8px; bottom: 8px;
    max-width: none;
    max-height: 42%;
    overflow-y: auto;
    font-size: 0.68rem;
  }
  .map-legend.is-collapsed { display: none; }
  .legend-toggle { display: inline-flex; }

  /* Tabel ringkasan zona → kartu bertumpuk */
  #zoneSummaryTable thead { display: none; }
  #zoneSummaryTable, #zoneSummaryTable tbody, #zoneSummaryTable tr, #zoneSummaryTable td { display: block; width: 100%; }
  #zoneSummaryTable tr {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 8px;
    border-bottom: none;
  }
  #zoneSummaryTable td {
    border-bottom: none;
    padding: 2px 0;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px;
  }
  #zoneSummaryTable td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
  }
  #zoneSummaryTable td:first-child { grid-template-columns: 1fr; margin-bottom: 4px; }
  #zoneSummaryTable td:first-child::before { display: none; }

  .season-item { grid-template-columns: 1fr; gap: 2px; }
  .log-box { height: 150px; font-size: 0.74rem; }
  .table { font-size: 0.8rem; }
}

/* =================== ≤400px : ponsel kecil ====================== */
@media (max-width: 400px) {
  .brand-icon { font-size: 1.4rem; }
  .brand h1 { font-size: 1.02rem; }
  .clock-time { font-size: 1rem; }
  .clock-sub span:first-child { display: none; } /* sembunyikan tanggal panjang */
  .nav-tab { padding: 7px 11px; font-size: 0.82rem; }
  .app-main { padding: 10px 8px 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .toolbar-group.layers { grid-template-columns: 1fr 1fr; font-size: 0.78rem; }
  #globalMap { height: 58vh; min-height: 300px; }
}

/* =================== Lanskap pendek (HP diputar) ================ */
@media (max-height: 500px) and (orientation: landscape) {
  .app-header { position: static; }
  #globalMap { height: 82vh; min-height: 260px; }
  .zone-sidebar .orbit-wrap { display: none; }
}

/* =================== Aksesibilitas & cetak ====================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .app-header, .controls, .map-toolbar, .btn, .nav-tabs { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #ccc; box-shadow: none; background: #fff; }
  .tab-panel { display: block !important; }
}