/*
  * {
  outline: 1px solid red !important;
  }
  */

  * { 
    box-sizing: border-box !important; 
  }

  html, body {
    width: 100vw;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: sans-serif;
    background: #f0f2f5; 
    padding: 10px;
    font-size: 16px;
  }

  /* 2. DESAIN WARNA & TAMPILAN */
  :root { 
    --pribadi: #2d5a27; 
    --anak: #2c3e50; 
    --inactive: #e9ecef; 
  }

.card { 
  background: white; 
  padding: 15px; 
  border-radius: 12px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
  margin-bottom: 15px; 
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
  word-wrap: break-word;
  clear: both;
}

  /* Tombol Atas (Model Tab Menyatu) */
  .btn-group { 
    display: flex; 
    width: 100%; 
    margin-bottom: 20px; 
    background: var(--inactive); /* Warna dasar abu-abu terang */
    border-radius: 8px; /* Sudut membulat hanya di ujung luar */
    overflow: hidden; /* Mengunci agar tombol di dalam tidak keluar jalur */
    border: 1px solid #ccc; /* Bingkai tipis agar bentuk menyatunya tegas */
  }
  
  .btn-toggle { 
    flex: 1; 
    min-width: 0; 
    padding: 12px 5px !important; /* Ditebalkan sedikit */
    font-size: 12px !important;
    border: none; 
    border-right: 1px solid #ccc; /* Garis pemisah antar tombol */
    border-radius: 0; /* Hapus lengkungan di masing-masing tombol */
    background: transparent; 
    color: #6c757d; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s; 
  }
  
  /* Hilangkan garis pemisah di tombol paling kanan (Laporan) */
  .btn-toggle:last-child {
    border-right: none;
  }

  /* WARNA ACTIVE (TIDAK DIUBAH) */
  .btn-toggle.active-pribadi { 
    background: var(--pribadi); 
    color: white; 
  }
  .btn-toggle.active-anak { 
    background: var(--anak); 
    color: white; 
  }
  .active-laporan { 
    background: #6f42c1 !important; 
    color: white !important; 
  }

  /* Form & Input */
  label { display: block; margin: 10px 0 5px; font-weight: bold; font-size: 14px; }
  
  input, select { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    font-size: 16px; 
  }

  .radio-group { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
  
  .radio-label { 
    flex: 1; 
    padding: 10px 5px !important; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    text-align: center; 
    cursor: pointer; 
    background: white; 
    font-size: 12px !important; 
    min-width: 0;
  }

  /* Tombol Aksi */
  .btn-action-group { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
  button#submit { flex: 2; padding: 15px; background: #28a745; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 12px !important; }
  button#btnCancel { flex: 1; padding: 15px; background: #6c757d; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; display: none; font-size: 12px !important; }

  /* Riwayat & Laporan */
  .hist-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 13px; }
  .hist-item > div { min-width: 0; word-wrap: break-word; }
  .nominal-out { color: #d9534f; font-weight: bold; }
  .nominal-in { color: #5cb85c; font-weight: bold; }
  
.report-container {
  width: 100%;
  min-height: 150px; /* Memberi ruang minimum agar container tidak 'kempes' saat kosong */
  display: block;
  box-sizing: border-box;
  overflow: hidden;
}

/* 1. KEMBALIKAN TABEL BIAR NGEPAS LAYAR (HAPUS MIN-WIDTH) */
.report-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* Biarkan kolom mencari lebar paling pas sendiri */
}

/* 1. Gabungkan dan padatkan semua sel tabel */
.report-table td, 
.report-table th, 
.report-table td strong, 
.report-table td .nominal-in, 
.report-table td .nominal-out {
  font-size: 10px !important; /* Turun 1px agar angka jutaan muat */
  padding: 4px 1px !important; /* Kiri-kanan dibuat sangat tipis (1px) */
  text-align: left;
  white-space: nowrap; /* Angka jangan sampai pecah ke bawah */
  letter-spacing: -0.5px; /* Rapatkan huruf sedikit */
}

/* 3. Perkecil padding kartu khusus untuk mobile agar ruang tabel lebih luas */
@media screen and (max-width: 480px) {
  body { padding: 5px; }
  .card { padding: 8px; }
}

  .report-title { font-size: 14px; font-weight: bold; margin: 15px 0 5px; color: #333; border-left: 4px solid #28a745; padding-left: 10px; }

  /* Modal */
  .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: center; padding: 15px; }
  .modal-content { background: white; width: 100%; max-height: 80vh; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

.modal-body {
  padding: 15px;
  overflow-y: auto; /* Izinkan scroll di dalam modal */
  flex: 1; /* Mengambil sisa ruang yang ada di modal-content */
  -webkit-overflow-scrolling: touch; /* Biar scroll di iPhone/iOS terasa smooth */
}

/* Class tambahan untuk mengunci background */
.no-scroll {
  overflow: hidden !important;
  height: 100vh;
}

.active-search { background: #007bff !important; color: white !important; }

  /* Mencegah bocor lebar */
  #mainForm, #containerForm, #containerLaporan {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Hilangkan bar peringatan Google Apps Script yang sering bikin geser */
  #warning-bar-table { display: none !important; }

  /* --- DESAIN UI LAPORAN BARU --- */
  
  /* Toggle Akun Laporan */
  .lap-toggle-group { display: flex; background: #e9ecef; border-radius: 8px; margin-bottom: 15px; overflow: hidden; border: 1px solid #ccc; }
  .lap-toggle { flex: 1; padding: 12px; border: none; background: transparent; font-weight: bold; color: #6c757d; cursor: pointer; transition: 0.3s; font-size: 12px; }
  .lap-toggle.lap-active { background: #6f42c1; color: white; }

  /* Battle Bar (Pemasukan vs Pengeluaran) */
  .battle-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #eee; margin: 12px 0 6px 0; }
  .bar-in { background: #28a745; transition: width 0.5s ease-in-out; }
  .bar-out { background: #dc3545; transition: width 0.5s ease-in-out; }

  /* Efek Mekar (Expand) */
  .expand-body { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px dashed #ccc; animation: fadeIn 0.3s ease-in-out; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
  
  /* Teks Header Bulan */
  .month-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }

  .active-hutang { background: #a52834 !important; color: white !important; }

.hutang-stat-grid { display: flex; gap: 10px; margin-bottom: 15px; }
.hutang-stat-card { flex: 1; padding: 15px; border-radius: 12px; text-align: center; color: white; }
.hutang-stat-card.stat-hutang { background: linear-gradient(135deg, #dc3545, #a52834); }
.hutang-stat-card.stat-piutang { background: linear-gradient(135deg, #6c757d, #495057); }
.hutang-stat-label { font-size: 11px; opacity: 0.85; margin-bottom: 5px; }
.hutang-stat-value { font-size: 18px; font-weight: bold; }

.btn-toggle-lunas { width: 100%; padding: 10px; background: #e9ecef; border: 1px solid #ccc; border-radius: 8px; color: #6c757d; font-size: 12px; cursor: pointer; margin-top: 15px; text-align: left; }

.live-search-item {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 13px;
  color: #333;
  transition: background 0.2s;
}

.live-search-item:hover {
  background-color: #f0f0f0;
}

.live-search-item:last-child {
  border-bottom: none;
}