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

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

.projection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

.projection-year-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 680px);
}

.projection-half-nav {
  display: none;
}

.projection-year-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #D5E2D9;
  border-radius: 10px;
  background: #FFFFFF;
  color: #52645C;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.projection-year-button span {
  font-size: 0.88rem;
  font-weight: 700;
}

.projection-year-button small {
  color: #718078;
  font-size: 0.72rem;
}

.projection-year-button[aria-pressed="true"] {
  border-color: #1F7737;
  background: #EFF7E8;
  color: #00552F;
  box-shadow: inset 0 0 0 1px #1F7737;
}

.projection-year-button[aria-pressed="true"] small {
  color: #52645C;
}

.projection-year-button:focus-visible {
  outline: 3px solid rgba(31, 119, 55, 0.25);
  outline-offset: 2px;
}

.projection-year-hint {
  flex: 0 0 auto;
  margin: 0;
  color: #64746C;
  font-size: 0.78rem;
}

.matrix-scroll-hint {
  display: none;
}

/* ==========================================
   🩹 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;
}

.matrix-table th[data-month],
.matrix-table td[data-month] {
  min-width: 96px !important;
  max-width: 96px !important;
  width: 96px !important;
}

.matrix-table [data-month] .matrix-input,
.matrix-table [data-month] input {
  font-size: 0.75rem !important;
}

.matrix-table [data-month] > div {
  width: 84px !important;
}

.matrix-scroll-wrapper[data-active-year="1"] .matrix-table [data-year="2"],
.matrix-scroll-wrapper[data-active-year="1"] .matrix-table [data-year="3"],
.matrix-scroll-wrapper[data-active-year="2"] .matrix-table [data-year="1"],
.matrix-scroll-wrapper[data-active-year="2"] .matrix-table [data-year="3"],
.matrix-scroll-wrapper[data-active-year="3"] .matrix-table [data-year="1"],
.matrix-scroll-wrapper[data-active-year="3"] .matrix-table [data-year="2"] {
  display: none;
}

/* ==========================================
   🩹 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;
}

@media (max-width: 680px) {
  .projection-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .projection-year-nav {
    width: 100%;
  }

  .projection-half-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .projection-half-button {
    min-height: 38px;
    border: 1px solid #D5E2D9;
    border-radius: 8px;
    background: #FFFFFF;
    color: #52645C;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
  }

  .projection-half-button[aria-pressed="true"] {
    border-color: #1F7737;
    background: #EFF7E8;
    color: #00552F;
    font-weight: 700;
  }

  .projection-half-button:focus-visible {
    outline: 3px solid rgba(31, 119, 55, 0.25);
    outline-offset: 2px;
  }

  .projection-year-nav {
    width: 100%;
    gap: 6px;
  }

  .projection-year-button {
    padding: 9px 8px;
  }

  .projection-year-button small {
    font-size: 0.65rem;
  }

  .projection-year-hint {
    font-size: 0.72rem;
  }

  .matrix-scroll-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 0;
    color: #64746C;
    font-size: 0.72rem;
  }

  .matrix-table th[data-month],
  .matrix-table td[data-month] {
    min-width: 88px !important;
    max-width: 88px !important;
    width: 88px !important;
  }

  .matrix-table [data-month] > div {
    width: 76px !important;
  }

  .matrix-scroll-wrapper[data-active-half="1"] .matrix-table [data-half="2"],
  .matrix-scroll-wrapper[data-active-half="2"] .matrix-table [data-half="1"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projection-year-button {
    transition: none;
  }
}