/* ============================================================
   PENYESUAIAN TEMA — SUNGAI BUDI GROUP
   ============================================================
   File ini di-load PALING AKHIR (lihat layout/head.php) supaya
   menimpa warna bawaan Mazer tanpa perlu mengubah app.css.
   Kalau nanti Mazer di-update, cukup timpa folder assets/mazer/
   dan file ini tetap aman.

   Warna diambil dari login.css yang sudah Anda pakai:
     hijau utama  #91c83e
     hijau gelap  #6ca42c
     hijau lembut #edf7df
   ============================================================ */

:root {
    --sb-green:        #91c83e;
    --sb-green-dark:   #6ca42c;
    --sb-green-soft:   #edf7df;
    --sb-ink:          #11272b;
    --sb-muted:        #899698;

    /* Menimpa variabel Bootstrap 5 yang dipakai Mazer */
    --bs-primary:      #91c83e;
    --bs-primary-rgb:  145, 200, 62;
    --bs-link-color:   #6ca42c;
    --bs-link-hover-color: #4f7d1d;
}

/* ------------------------------------------------------------
   Tombol & elemen bercorak primary
   ------------------------------------------------------------ */
.btn-primary {
    background-color: var(--sb-green);
    border-color: var(--sb-green);
    color: #10230a;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--sb-green-dark) !important;
    border-color: var(--sb-green-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--sb-green-dark);
    border-color: var(--sb-green);
}

.btn-outline-primary:hover {
    background-color: var(--sb-green);
    border-color: var(--sb-green);
    color: #10230a;
}

.text-primary  { color: var(--sb-green-dark) !important; }
.bg-primary    { background-color: var(--sb-green) !important; }
.badge.bg-primary { color: #10230a; }

.form-control:focus,
.form-select:focus {
    border-color: var(--sb-green);
    box-shadow: 0 0 0 .18rem rgba(145, 200, 62, .25);
}

.form-check-input:checked {
    background-color: var(--sb-green);
    border-color: var(--sb-green);
}

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */
#sidebar .sidebar-item.active > .sidebar-link {
    background-color: var(--sb-green);
    box-shadow: 0 5px 12px rgba(145, 200, 62, .35);
}

#sidebar .sidebar-item.active > .sidebar-link span,
#sidebar .sidebar-item.active > .sidebar-link i {
    color: #10230a;
}

#sidebar .submenu-item.active > .submenu-link {
    color: var(--sb-green-dark);
    font-weight: 600;
}

#sidebar .submenu-item.active > .submenu-link::before {
    background-color: var(--sb-green);
}

.sidebar-link:hover {
    background-color: var(--sb-green-soft);
}

/* Logo teks pengganti gambar */
.sb-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--sb-green), var(--sb-green-dark));
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.sb-logo-text        { line-height: 1.15; }
.sb-logo-text strong { display: block; font-size: 15px; color: var(--sb-ink); }
.sb-logo-text small  { display: block; font-size: 11px; color: var(--sb-muted); }

/* Kartu identitas user di sidebar */
.sidebar-user {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    margin-bottom: .5rem;
}

.sb-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sb-green-soft);
    color: var(--sb-green-dark);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.sb-avatar-sm { width: 32px; height: 32px; font-size: 12px; }

/* ------------------------------------------------------------
   Navbar
   ------------------------------------------------------------ */
.sb-navbar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    padding: .4rem .25rem;
}

/* ------------------------------------------------------------
   Kartu filter di halaman laporan
   ------------------------------------------------------------ */
.card-filter .card-body {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.card-filter label.form-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--sb-muted);
    margin-bottom: .3rem;
}

/* ------------------------------------------------------------
   Tabel laporan — rapat, mudah dibaca untuk data banyak kolom
   ------------------------------------------------------------ */
table.table-report {
    font-size: 13px;
    width: 100% !important;
}

table.table-report thead th {
    background: var(--sb-green-soft);
    color: var(--sb-ink);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 2px solid var(--sb-green);
}

table.table-report tbody tr:hover { background: #f7fbf1; }

/* Mazer memberi warna teks tabel #607080 (abu kebiruan). Halaman lama
   memakai teks hitam biasa, dan angka jadi lebih sulit dibaca dengan
   warna abu. Dikembalikan ke warna tinta. */
table.table-report tbody td { color: var(--sb-ink); }

table.table-report td.num,
table.table-report th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Pewarnaan nilai persentase
   ------------------------------------------------------------
   Mengikuti aturan halaman lama: nilai di bawah 0 ditulis MERAH,
   selain itu memakai warna teks biasa (bukan hijau). Berlaku untuk
   kolom Realisasi Kum dan Target Kum.

   Ditulis sebagai class, bukan style inline seperti versi lama,
   supaya warnanya ikut terbawa saat dicetak dan tetap terbaca
   ketika mode gelap aktif.

   !important dipakai karena aturan tabel Mazer memiliki
   kekhususan selector yang lebih tinggi. */
table.table-report tbody td.nilai-negatif { color: #d40000 !important; }

.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px;
    border: 1px solid #dce1e6;
    padding: .35rem .7rem;
}

.page-item.active .page-link {
    background-color: var(--sb-green);
    border-color: var(--sb-green);
    color: #10230a;
}

/* Keadaan kosong: halaman baru belum berisi data */
.empty-state {
    text-align: center;
    padding: 3.2rem 1rem;
    color: var(--sb-muted);
}

.empty-state i {
    font-size: 2.6rem;
    color: var(--sb-green);
    opacity: .55;
    display: block;
    margin-bottom: .8rem;
}

.empty-state h6 { color: var(--sb-ink); margin-bottom: .35rem; }

/* ------------------------------------------------------------
   Mode gelap
   ------------------------------------------------------------ */
[data-bs-theme="dark"] .sb-navbar        { background: #1a1d23; box-shadow: none; }
[data-bs-theme="dark"] .sb-logo-text strong { color: #e6e9ec; }
[data-bs-theme="dark"] .sb-avatar        { background: rgba(145, 200, 62, .16); color: var(--sb-green); }
[data-bs-theme="dark"] .sidebar-link:hover { background-color: rgba(145, 200, 62, .12); }
[data-bs-theme="dark"] table.table-report thead th {
    background: rgba(145, 200, 62, .12);
    color: #e6e9ec;
}
[data-bs-theme="dark"] table.table-report tbody tr:hover { background: rgba(145, 200, 62, .07); }
[data-bs-theme="dark"] table.table-report tbody td { color: #dfe3e7; }
[data-bs-theme="dark"] table.table-report tbody td.nilai-negatif { color: #ff6b5b !important; }
[data-bs-theme="dark"] .empty-state h6 { color: #e6e9ec; }

/* ------------------------------------------------------------
   Cetak — sembunyikan navigasi, sisakan isi laporan
   ------------------------------------------------------------ */
@media print {
    #sidebar, header, footer, .breadcrumb-header, .card-filter, .no-print { display: none !important; }

    /* Tanpa ini browser membuang warna teks saat mencetak, sehingga
       nilai minus ikut tercetak hitam dan kehilangan artinya. */
    table.table-report tbody td.nilai-negatif {
        color: #d40000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #main { margin: 0 !important; width: 100% !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd; }
}

/* ------------------------------------------------------------
   Tombol ekspor DataTables (Excel / Cetak)
   ------------------------------------------------------------ */
.dt-buttons .btn { margin-right: .4rem; }
.dt-buttons .btn:last-child { margin-right: 0; }

/* ------------------------------------------------------------
   Tabel silang DO Gantung & Realisasi
   ------------------------------------------------------------
   Warna latar diambil PERSIS dari file Excel yang sudah dipakai
   sebelumnya (bukan dikira-kira), supaya tampilan di layar dan
   hasil ekspor Excel terlihat sama:

     Baris R         nilai >= progres bulan berjalan  -> HIJAU  (#C6EFCE)
     Baris R         nilai < 1%                       -> MERAH  (#D99795)
     Baris DO G      nilai >= 100%                    -> ABU    (#D9D9D9)
     Baris Delivery  tidak pernah diwarnai, berapa pun nilainya

   Ditulis sebagai class, bukan hanya style inline, supaya ikut
   terbawa saat dicetak dan tetap terbaca di mode gelap.
   ------------------------------------------------------------ */
table.tabel-silang { font-size: 12px; }

/* ------------------------------------------------------------
   Header tabel diam di tempat, hanya isi tabel yang digulir
   (DO Gantung & Realisasi, versi %, dan versi Nilai)
   ------------------------------------------------------------
   Dua percobaan sebelumnya berbasis CSS murni (position: sticky)
   tidak berhasil secara konsisten di semua kondisi — salah satunya
   karena position:sticky pada <th> tidak berfungsi kalau tabelnya
   memakai border-collapse: collapse (keterbatasan spesifikasi CSS).

   Solusi akhirnya TIDAK memakai CSS sticky sama sekali. Header-diam
   sekarang ditangani oleh fitur bawaan library DataTables sendiri
   (opsi `scrollY` + `scrollCollapse` pada inisialisasi DataTable di
   skrip halaman masing-masing) — DataTables memisahkan tabel jadi
   dua bagian: header yang tidak ikut bergulir, dan badan tabel yang
   punya kotak gulirnya sendiri. Ini mekanisme yang sudah diuji
   bertahun-tahun lintas peramban, jauh lebih andal daripada
   position:sticky untuk kasus tabel seperti ini.

   Lihat inisialisasi $(tabel).DataTable({...scrollY:...}) di
   masing-masing berkas view (do_gantung_realisasi, _2, _3).
*/
table.tabel-silang tbody td.sel-tercapai {
    background-color: #c6efce !important;
    color: #212529 !important;
    font-weight: 600;
}

table.tabel-silang tbody td.sel-kosong {
    background-color: #d99795 !important;
    color: #212529 !important;
    font-weight: 600;
}

/*
 * Baris DO G saja — baris Delivery tidak pernah kena class ini (lihat
 * sb_kelas_sel() di view do_gantung_realisasi/list.php).
 *
 * SENGAJA BEDA dari file Excel: di layar teks MERAH tanpa latar,
 * sedangkan hasil ekspor Excel memakai latar ABU-ABU (permintaan
 * eksplisit — lihat catatan di do_gantung_realisasi/list.php pada
 * fungsi terapkanGaya). Nama class-nya sama (sel-lebih100), tapi
 * tampilan layar dan tampilan Excel dikendalikan terpisah:
 *   - layar  -> aturan CSS di bawah ini
 *   - Excel  -> fillAbu di dalam siapkanGaya()/terapkanGaya()
 */
table.tabel-silang tbody td.sel-lebih100 {
    background-color: transparent !important;
    color: #d40000 !important;
    font-weight: 600;
}

[data-bs-theme="dark"] table.tabel-silang tbody td.sel-tercapai,
[data-bs-theme="dark"] table.tabel-silang tbody td.sel-kosong {
    color: #1a1a1a !important;   /* latar tetap terang, teks gelap tetap terbaca */
}

[data-bs-theme="dark"] table.tabel-silang tbody td.sel-lebih100 {
    color: #ff6b5b !important;   /* teks merah tetap terbaca di latar gelap */
}

/* ------------------------------------------------------------
   Tabel silang DO Gantung & Realisasi (%)
   ------------------------------------------------------------
   Warna berbeda dari "DO Gantung & Realisasi" biasa — dikonfirmasi
   dari screenshot halaman lama dan file Excel Anda sendiri
   (SungaiBudi(6).xlsx). Lihat catatan lengkap di
   do_gantung_realisasi2/list.php pada fungsi sb_sel_v2().
   ------------------------------------------------------------ */
table.tabel-silang tbody td.sel-tercapai-v2 {
    background-color: #ffff00 !important;
    color: #000 !important;
}

table.tabel-silang tbody td.sel-kosong-v2 {
    background-color: #ff0000 !important;
    color: #fff !important;
    font-weight: 600;
}

table.tabel-silang tbody td.sel-lebih100-v2 {
    color: #d40000 !important;
    font-weight: 600;
}

[data-bs-theme="dark"] table.tabel-silang tbody td.sel-tercapai-v2,
[data-bs-theme="dark"] table.tabel-silang tbody td.sel-kosong-v2 {
    color: #000 !important;
}

[data-bs-theme="dark"] table.tabel-silang tbody td.sel-lebih100-v2 {
    color: #ff6b5b !important;
}

.sb-legenda .kotak.sel-tercapai-v2 { background: #ffff00; }
.sb-legenda .kotak.sel-kosong-v2   { background: #ff0000; }

@media print {
    table.tabel-silang tbody td.sel-tercapai-v2,
    table.tabel-silang tbody td.sel-kosong-v2,
    table.tabel-silang tbody td.sel-lebih100-v2 {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Penanda jenis baris: DO G / R / Delivery */
.badge-metrik {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 5px;
    background: #eef2f5;
    color: #52616b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}

/* Keterangan legenda di kepala kartu */
.sb-legenda { display: flex; gap: 1rem; font-size: 12px; color: var(--sb-muted); flex-wrap: wrap; }
.sb-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.sb-legenda .kotak {
    width: 13px; height: 13px; border-radius: 3px; display: inline-block;
    border: 1px solid rgba(0, 0, 0, .12);
}
.sb-legenda .kotak.sel-tercapai { background: #c6efce; }
.sb-legenda .kotak.sel-kosong   { background: #d99795; }
/* Legenda DO G ditandai teks merah, bukan kotak warna, supaya konsisten
   dengan tampilan sel-nya sendiri di layar. */
.sb-legenda .teks-lebih100 { color: #d40000; font-weight: 700; }

[data-bs-theme="dark"] .badge-metrik { background: rgba(255, 255, 255, .08); color: #c3ccd5; }

@media print {
    table.tabel-silang tbody td.sel-tercapai,
    table.tabel-silang tbody td.sel-kosong,
    table.tabel-silang tbody td.sel-lebih100 {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}