/* ==========================================
   Tahap 4-3 : Matriks Proyeksi Keuangan CSS
   ========================================== */

/* 全体コンテナの余白調整 */
#section-4-3 {
  padding: 16px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tab-desc {
  font-size: 0.85rem;
  color: #64748B;
  margin-top: 4px;
}

/* ==========================================
   🩹 FIX: Sticky header/kolom tidak berfungsi
   Akar masalah:
   1) overflow-y: hidden di wrapper ini merusak position:sticky
      di dalamnya (ancestor overflow:hidden = gotcha CSS terkenal),
      dan scroll vertikal jadi terjadi di level HALAMAN PENUH, bukan
      "di dalam tabel" seperti spreadsheet beneran.
   2) Wrapper juga tidak punya max-height, jadi walaupun overflow
      diperbaiki, tetap tidak ada area terbatas untuk di-scroll.
   Solusi: overflow: auto di 2 arah + max-height, supaya tabel
   men-scroll di dalam kotaknya sendiri — ini juga prasyarat supaya
   sticky bisa nempel dengan benar.
   ========================================== */
.matrix-scroll-wrapper {
  width: 100%;
  max-height: 70vh; /* 🩹 batas tinggi, supaya ada area scroll sendiri (sesuaikan angka ini kalau ingin lebih tinggi/rendah) */
  overflow: auto;   /* 🩹 sebelumnya: overflow-x: auto; overflow-y: hidden; */
  margin-top: 16px;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  background-color: #FFFFFF;
  -webkit-overflow-scrolling: touch;
}

/* テーブルの絶対ルール */
.matrix-table {
  width: max-content; /* 中身の指定幅（150px + 120px * 36）を維持 */
  border-collapse: collapse;
  table-layout: fixed; /* これにより列幅が文字の長さに引っ張られなくなります */
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  padding: 0;
}

/* ==========================================
   🩹 FIX: Header bulan (36 <th> hasil generate JS) belum sticky.
   Ditarget lewat "thead th" (bukan class khusus) karena th bulan
   dibuat murni oleh JS dengan inline style (cuma background-color,
   dsb) — position/top/z-index BELUM diisi inline, jadi aman diatur
   dari sini tanpa bentrok.
   ========================================== */
.matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* 左端の「KATEGORI / PERIODE」ヘッダーの幅ロック */
.matrix-table th.col-kategori-header {
  min-width: 160px;
  max-width: 160px;
  width: 160px;
  background-color: #F8FAFC;
  color: #475569;
  font-weight: bold;
  font-size: 0.8rem;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid #CBD5E1;
  border-right: 1px solid #CBD5E1;
  box-sizing: border-box;
  /* 🩹 Sel pojok kiri-atas: dobel-sticky (atas + kiri), z-index
     PALING TINGGI supaya tidak ketiban header bulan maupun kolom
     kategori lain saat scroll ke dua arah sekaligus. */
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
}

/* ==========================================
   🩹 FIX: Kolom pertama tiap baris body (nama kategori/item) belum
   sticky ke kiri. Ditarget lewat "tbody > tr > td:first-child" supaya
   berlaku ke SEMUA baris — baik baris tetap (addFixedRow) maupun
   baris dinamis (createDynamicRow) — tanpa perlu ubah step4-3.js,
   karena background-color tiap baris itu sendiri sudah diisi inline
   oleh JS dan tetap dipertahankan (CSS ini cuma menambah posisi).
   ========================================== */
.matrix-table tbody > tr > td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* 共通セルの枠線ルール */
.matrix-table th, 
.matrix-table td {
  border: 1px solid #CBD5E1;
  box-sizing: border-box;
}

/* ラベル入力欄の微調整 */
.matrix-label-input {
  background-color: #FFFFFF;
  color: #334155;
  font-weight: normal;
  border: 1px solid #CBD5E1;
  transition: border-color 0.15s ease;
}
.matrix-label-input:focus {
  border-color: #3B82F6;
  outline: none;
  background-color: #F8FAFC;
}

/* クイックコピーアイコンの調整 */
.btn-copy-fast {
  color: #94A3B8;
  transition: color 0.15s ease, transform 0.1s ease;
}
.btn-copy-fast:hover {
  color: #3B82F6;
  transform: translateY(-50%) scale(1.1) !important;
}

/* スクロールバーの見た目をスマホライクでスマートに */
.matrix-scroll-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px; /* 🩹 tambahan: sebelumnya cuma diatur untuk scrollbar horizontal, sekarang scrollbar vertikal juga ada (karena overflow-y sekarang "auto", bukan "hidden") */
}
.matrix-scroll-wrapper::-webkit-scrollbar-track {
  background: #F1F5F9;
}
.matrix-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
.matrix-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}