/* ==========================================================================
   RESPONSIVE. WAJIB paling akhir: rule di sini harus menang atas skin dan
   template yang ditulis sebelumnya pada specificity sama.
   ========================================================================== */

@media (max-width: 1080px) {
  .dash-top { grid-template-columns: 1fr; }
  .dash-cols { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .cal-wrap { grid-template-columns: 1fr; }
  .payout-cols { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .masthead-inner { min-height: 52px; gap: 10px; }
  .grid { grid-template-columns: 1fr; }

  /* blotter harus ikut numpuk, kalau nggak kolom uang menghimpit judul */
  [data-theme="dark"] .card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "meta meta" "head head" "body body" "foot foot";
    row-gap: 4px;
  }
  [data-theme="dark"] .card-meta { border-right: 0; padding-right: 0;
    flex-direction: row; align-items: center; gap: 8px; }
  [data-theme="dark"] .grid::before { content: "status · judul · detail"; }
  [data-theme="dark"] .card-foot { justify-content: flex-start; }

  .table-wrap { border: 0; background: transparent; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    border: 1px solid var(--rule); border-radius: var(--radius-sm);
    background: var(--card); margin-bottom: 8px; padding: 10px 12px;
  }
  .table td { border: 0; padding: 3px 0; display: flex; gap: 10px; }
  .table td::before {
    content: attr(data-k); font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
    flex: 0 0 84px;
  }
  .table td.num { text-align: left; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 22px; }
  .sheet { width: 100%; }
}

@media (max-width: 560px) {
  .shell { padding: 0 14px 40px; }
  .masthead-inner, .sys-strip-inner { padding-left: 14px; padding-right: 14px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .cal-day { font-size: 10px; padding: 3px 4px; }
  .searchbox input { width: 100%; }
  .filterbar .spacer { margin-left: 0; }
  .page-actions { width: 100%; margin-left: 0; }
}