/* ========================================= */
/* GLOBAL STYLES - Diterapkan ke semua halaman */
/* ========================================= */
html {
    /* BARIS INI DIHAPUS: padding-bottom: 50px; */
}

html, body {
    height: 100%; /* Memastikan html dan body mengambil tinggi penuh */
    width: 100%;  /* Memastikan html dan body mengambil lebar penuh */
    margin: 0;
    /* BARIS INI DIHAPUS: padding: 0; */
    box-sizing: border-box; /* Penting untuk konsistensi perhitungan ukuran */
    overflow-x: hidden; /* Mencegah scrollbar horizontal yang tidak diinginkan */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff; /* Latar belakang putih untuk seluruh halaman secara default */
    color: #333;
    display: flex;
    flex-direction: column; /* Menumpuk header, konten utama, dan footer secara vertikal */
    min-height: 100vh; /* Memastikan body mengambil tinggi viewport penuh */
    /* BARIS INI DIHAPUS: padding-bottom: 50px; */
    /* width: 100%; <--- Hapus baris ini */
    /* max-width: none; <--- Hapus baris ini */
}


/* Header Styles */
.header {
    background-color: #0d2a4d; /* Latar belakang biru gelap */
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 50px;
    box-sizing: border-box;
    width: 100%; /* Memastikan header mengambil lebar penuh */
}

.header .logo-section {
    display: flex;
    align-items: center;
}

.header .logo-section img {
    height: 40px;
    width: auto;
    object-fit: contain;
    margin-right: 10px;
}

.header .logo-section span {
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 0.5px;
}

.header .nav-links {
    display: flex;
    gap: 20px;
}

.header .nav-links a {
    color: white;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
}

.header .nav-links a i {
    margin-right: 6px;
    font-size: 1.1em;
}

.header .nav-links a:hover {
    background-color: #1a4a7d;
    transform: translateY(-2px);
}

.header .nav-links a.active {
    background-color: #2a6a9d;
    font-weight: bold;
}

.header .nav-links .profile-pic {
    height: 28px;
    width: 28px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Footer Styles */
/* Gaya untuk Footer secara keseluruhan */
.footer {
    position: fixed; /* Membuat footer selalu di bagian bawah layar */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #002244; /* Warna latar belakang footer */
    color: white; /* Warna teks default di footer */
    padding: 10px 20px; /* Padding di dalam footer */
    box-sizing: border-box; /* Penting agar padding tidak menambah lebar */
    z-index: 999; /* Pastikan footer selalu di atas konten lain */
}

/* Wrapper untuk konten di dalam footer, untuk Flexbox */
.footer-content-wrapper {
    display: flex;
    justify-content: space-between; /* Menempatkan elemen di kiri dan kanan */
    align-items: center; /* Pusatkan secara vertikal */
    width: 100%;
}

/* Gaya untuk teks copyright */
.footer-copyright {
    font-size: 0.9em;
}

/* Gaya untuk area tombol logout */
.footer-logout-area {
    /* Tidak perlu banyak gaya di sini, button di dalamnya yang akan diatur */
}

/* Gaya untuk tombol Logout itu sendiri */
.global-logout-button {
    background: none; /* Tanpa latar belakang */
    border: none; /* Tanpa border */
    color: white; /* Teks putih */
    font-size: 1em; /* Ukuran font standar */
    cursor: pointer; /* Menunjukkan bahwa itu bisa diklik */
    padding: 5px 10px;
    display: flex; /* Untuk menata ikon dan teks secara horizontal */
    align-items: center; /* Pusatkan ikon dan teks secara vertikal */
    gap: 8px; /* Jarak antara ikon dan teks */
    transition: color 0.3s ease; /* Efek transisi saat hover */
}

.global-logout-button:hover {
    color: #cccccc; /* Warna sedikit lebih terang saat di-hover */
}

/* Custom Modal & Alert Styles (Global) */
.modal-overlay, .custom-alert-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}


.modal-content, .custom-alert-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-content h3, .custom-alert-content p {
    color: #0d2a4d;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.modal-content p {
    color: #555;
    margin-bottom: 25px;
    font-size: 1.1em;
}

.modal-input {
    width: calc(100% - 20px);
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.modal-button.confirm {
    background-color: #4CAF50;
    color: white;
}

.modal-button.confirm:hover {
    background-color: #45a049;
    transform: translateY(-1px);
}

.modal-button.cancel {
    background-color: #f44336;
    color: white;
}

.modal-button.cancel:hover {
    background-color: #da190b;
    transform: translateY(-1px);
}

.custom-alert-ok-button {
    background-color: #0d2a4d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.custom-alert-ok-button:hover {
    background-color: #0a1f38;
}

/* ========================================= */
/* RESPONSIVE ADJUSTMENTS (Global) */
/* ========================================= */
@media (max-width: 992px) {
    .header {
        flex-direction: column;
        padding: 10px 15px;
        gap: 10px;
        height: auto;
    }

    .header .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .header .nav-links a {
        padding: 5px 10px;
    }
}

@media (max-width: 768px) {
    .header .logo-section span {
        font-size: 1.2em;
    }

    .header .logo-section img {
        height: 30px;
    }

    .modal-content, .custom-alert-content {
        width: 95%;
        padding: 20px;
    }
}

/* ========================================= */
/* Gaya untuk Halaman Pemilihan Perusahaan (dimorve.php) */
/* ========================================= */

.full-page-selection-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* BARU: Biarkan mengambil semua ruang yang tersedia */
    overflow-y: auto; /* BARU: Aktifkan scroll vertikal di sini */
    background-color: transparent; /* Membuat latar belakang wrapper transparan */
    padding: 20px 0; /* Padding atas bawah, tanpa padding samping */
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    color: #333;
    padding-bottom: 70px; /* <--- BARIS INI DITAMBAHKAN/DIUBAH */
}

.selection-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antara elemen-elemen di header */
    width: 100%;
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    justify-content: space-between; /* Ini akan mendorong blok ke kanan */
    flex-shrink: 0; /* Pastikan header ini tidak menyusut */
}

.header-company-logo {
    max-height: 30px;
    width: auto;
    flex-shrink: 0;
}

/* Target div yang membungkus h1 dan p (BLOK TEKS) */
.selection-header > div:nth-of-type(1) {
    flex-grow: 1; /* Biarkan blok ini mengambil ruang yang tersedia */
    flex-shrink: 1; /* Biarkan menyusut jika perlu */
    flex-basis: auto; /* Biarkan konten menentukan ukuran awal */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* NEW: Tambahkan border-left dan padding-left di sini */
    border-left: 2px solid #ccc; /* Garis vertikal yang Anda inginkan */
    padding-left: 15px; /* Jarak antara garis dan teks */
    height: 100%; /* Pastikan tingginya sama dengan header */
    box-sizing: border-box; /* Penting untuk perhitungan padding dan border */
}

.selection-page-title {
    font-size: 1.38em; /* Saya sarankan sedikit lebih kecil dari 1.38em untuk kerapian */
    color: #E4002B;
    margin-bottom: 0px;
    font-weight: 700;
    line-height: 1.2;
    /* NEW: Pastikan ini juga mencegah wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selection-description {
    font-size: 1.8em; /* Saya sarankan sedikit lebih kecil dari 1.8em untuk kerapian */
    color: #0073BC;
    margin-top: 2px;
    margin-bottom: 0;
    font-weight: bold;
    line-height: 1.2;
    /* NEW: Pastikan ini juga mencegah wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* NEW: Digital Clock and Date Area Styles */
.digital-clock-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 0 15px;
    border-left: 2px solid #ccc;
    color: #2c3e50;
    width: 150px; /* Lebar tetap untuk jam */
    text-align: center;
    height: 100%; /* Agar garis vertikal membentang penuh */
    box-sizing: border-box;
}

.digital-time {
    font-family: 'Ds-digital', 'Arial Narrow', Arial, sans-serif; /* Ditambahkan Arial Narrow sebagai fallback */
    font-size: 2em; /* Disesuaikan agar lebih kecil */
    font-weight: bold;
    line-height: 1;
}

.digital-date {
    font-size: 0.65em; /* Disesuaikan agar lebih kecil */
    color: #6c757d;
    font-weight: bold;
    margin-top: 2px;
}


/* NEW: Styles for the wrapper containing dropdown and button */
.dropdown-and-button-area {
    display: flex;
    flex-direction: column; /* Tumpuk dropdown dan tombol secara vertikal */
    align-items: stretch; /* Buat anak-anak mengisi lebar kontainer ini */
    gap: 8px; /* Jarak antara dropdown dan tombol */
    flex-shrink: 0; /* Mencegah wrapper ini menyusut */
    width: 200px; /* Tetapkan lebar tetap untuk seluruh blok ini */
    max-width: 250px; /* Lebar maksimum untuk responsivitas */
    min-width: 180px; /* Lebar minimum untuk responsivitas */

    border-left: 2px solid #ccc; /* GARIS VERTIKAL KEDUA (sebelum dropdown) */
    padding-left: 15px; /* Jarak setelah garis vertikal */
}

/* Adjust the select styling (sekarang langsung di dalam .dropdown-and-button-area) */
.dropdown-and-button-area #companySelectDropdown {
    width: 100%; /* Buat dropdown mengisi lebar parent-nya */
    padding: 5px 10px;
    font-size: 0.9em;
    margin-bottom: 0; /* Tidak perlu margin-bottom jika gap digunakan pada parent */
    border: 1px solid #ccc;
    border-radius: 44px;
    box-sizing: border-box;
}

/* Adjust the button styling for its new location */
.dropdown-and-button-area #confirmCompanySelectionBtn {
    background-color: #7AC142;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s ease;
    width: 100%; /* Buat tombol mengisi lebar parent-nya */
}

#confirmCompanySelectionBtn:hover {
    background-color: #5E9A33;
}

.selection-content-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom untuk mobile */
    gap: 10px;
    width: 100%;
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

@media (min-width: 992px) {
    .selection-content-grid {
        grid-template-columns: 1fr; /* Tetap 1 kolom, karena inner container akan handle grid */
    }
}
/* ========================================= */
/* Gaya untuk Summary Cards (Bagian atas seperti metrik di dashboard) */
/* ========================================= */
.selection-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 10px;
}

/* NEW: Gaya untuk kartu "Total Reduksi Aktual" agar lebih lebar */
.summary-card--total-reduction {
    grid-column: span 2; /* Membuat kartu ini mengambil lebar dua kolom */
}

/* Penyesuaian responsif untuk kartu lebar */
@media (max-width: 991px) { /* Sesuaikan breakpoint ini jika diperlukan */
    .summary-card--total-reduction {
        grid-column: span 1; /* Di layar yang lebih kecil, kembali ke lebar satu kolom */
    }
}


.summary-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    padding: 20px;
    text-align: center; /* UBAH: Posisikan konten di tengah kartu */
    border-left: 5px solid #3498db; /* Tetap biru konsisten dengan sebelumnya */
}

.summary-card h3 {
    font-size: 1em;
    color: #7f8c8d;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid #d0d0d0; /* UBAH: Ketebalan dan warna */
    padding-bottom: 10px;
    display: block;
    line-height: 1.2;
}


/* Gaya untuk nilai utama di kartu */
.summary-card .main-value {
    font-size: 2.5em; /* Lebih besar seperti di gambar */
    font-weight: bold;
    color: #2c3e50;
    margin: 0;
    line-height: 1.2;
}

/* Gaya untuk unit di nilai utama */
.summary-card .main-value .unit {
    font-size: 0.5em; /* Lebih kecil dari nilai utama */
    font-weight: normal;
    color: #555;
    vertical-align: baseline; /* Sejajar dengan baseline angka */
    margin-left: 5px; /* Jarak antara angka dan unit */
}

/* Styling untuk unit subscript seperti tCO2e */
.summary-card .main-value .unit .subscript-unit {
    vertical-align: sub; /* Membuat teks menjadi subscript */
    font-size: 0.7em; /* Ukuran subscript relatif terhadap parent .unit */
}

/* Gaya untuk informasi sub-teks di kartu */
.summary-card .sub-info {
    font-size: 0.8em; /* Ukuran font seperti di gambar */
    color: #6c757d; /* Warna teks default sub-info */
    margin-top: 5px;
    line-height: 1.3;
}

/* Gaya untuk sub-info positif (misalnya, peningkatan) */
.summary-card .sub-info.positive {
    color: #28a745; /* Hijau untuk indikator positif */
    font-weight: 600;
}
.summary-card .sub-info.negative {
    color: #dc3545 !important; /* Merah terang, gunakan !important untuk memastikan override */
    font-weight: 600; /* Agar tebal seperti yang positif */
}
/* NEW: Warna spesifik untuk sub-info */
.summary-card .sub-info.orange-text {
    color: #e67e22; /* Warna oranye */
}

.summary-card .sub-info.blue-text {
    color: #3498db; /* Warna biru */
}

.summary-card .sub-info.green-text {
    color: #28a745; /* Warna hijau */
}

/* NEW: Kontainer untuk carousel tahunan (panah + data tahun) */
.reduction-carousel-container {
    display: flex;
    align-items: center; /* Pusatkan item secara vertikal */
    justify-content: space-between; /* Dorong panah ke sisi-sisi */
    margin-top: 15px; /* Jarak dari judul H3 */
}

/* NEW: Gaya untuk tombol navigasi carousel */
.carousel-nav-button {
    background-color: transparent; /* Tanpa latar belakang */
    border: none; /* Tanpa border */
    color: #7f8c8d; /* Warna ikon panah */
    font-size: 1.4em; /* Ukuran ikon panah diperkecil */
    cursor: pointer;
    padding: 0 5px; /* Sedikit mengurangi padding horizontal */
    transition: color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0; /* Pastikan tombol tidak menyusut */
    height: 100%; /* Agar panah sejajar dengan tinggi konten tahunan */
    display: flex;
    align-items: center;
}

.carousel-nav-button:hover {
    color: #3498db; /* Warna biru saat hover */
    transform: scale(1.1);
}

/* NEW: Gaya untuk kontainer data tahunan di kartu Total Reduksi Aktual */
.reduction-years-data-wrapper {
    display: flex;
    justify-content: space-between; /* Distribute items with space between them */
    align-items: flex-start;
    flex-grow: 1; /* Memungkinkan wrapper ini mengambil ruang yang tersedia */
    /* margin-top: 15px; <--- Hapus margin-top ini karena sudah ada di .reduction-carousel-container */
}

/* NEW: Gaya untuk setiap item data tahunan */
.reduction-year-item {
    flex: 1; /* Membuat item tumbuh dan menyusut secara merata untuk mengisi ruang */
    min-width: 0; /* Memungkinkan item menyusut di bawah ukuran konten jika perlu */
    text-align: center;
    padding: 5px 10px;
    border-right: 2px solid #d0d0d0; /* Garis pemisah vertikal, dibuat tebal dan warna sama dengan judul */
}

/* Hapus garis vertikal pada item terakhir */
.reduction-year-item:last-child {
    border-right: none;
}

/* NEW: Gaya untuk label tahun */
.reduction-year-label {
    display: block; /* Membuatnya mengambil lebar penuh */
    font-size: 0.8em; /* Ukuran font label tahun diperkecil */
    font-weight: 600;
    color: #555;
    margin-bottom: 3px; /* Sedikit mengurangi margin bawah */
}

/* Penyesuaian ukuran teks untuk nilai utama dan sub-info di dalam item tahunan */
.reduction-year-item .main-value {
    font-size: 1.6em; /* Ukuran nilai utama diperkecil */
    font-weight: bold;
    color: #2c3e50;
    margin: 0;
    line-height: 1.2;
}

/* Gaya untuk unit di nilai utama */
.reduction-year-item .main-value .unit {
    font-size: 0.45em; /* Ukuran unit diperkecil */
    font-weight: normal;
    color: #555;
    vertical-align: baseline;
    margin-left: 5px;
}

/* Gaya untuk sub-info di dalam item tahunan */
.reduction-year-item .sub-info {
    font-size: 0.65em; /* Ukuran sub-info diperkecil */
    color: #6c757d;
    margin-top: 2px;
    line-height: 1.3;
}

/* Penyesuaian responsif untuk item data tahunan */
@media (max-width: 991px) {
    .summary-card--total-reduction {
        grid-column: span 1; /* Kartu menjadi satu kolom */
    }
    .reduction-carousel-container {
        flex-direction: column; /* Tumpuk tombol dan data tahun secara vertikal */
        gap: 10px; /* Jarak antara tombol dan data tahun */
    }
    .carousel-nav-button {
        font-size: 1.2em; /* Ukuran panah lebih kecil di mobile */
        padding: 5px 0; /* Padding vertikal untuk tombol di mobile */
    }
    .reduction-years-data-wrapper {
        flex-direction: column; /* Tumpuk item secara vertikal */
        align-items: center;
        gap: 0; /* Hapus gap saat ditumpuk */
        width: 100%; /* Pastikan mengambil lebar penuh */
    }
    .reduction-year-item {
        flex: none; /* Hapus properti flex saat ditumpuk */
        width: 100%; /* Ambil lebar penuh */
        border-right: none; /* Tidak ada border vertikal saat ditumpuk */
        border-bottom: 1px solid #eee; /* Tambahkan border horizontal saat ditumpuk */
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .reduction-year-item:last-child {
        border-bottom: none; /* Tidak ada border untuk item terakhir saat ditumpuk */
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

/* ========================================= */
/* Gaya untuk Area Utama (Pemilihan Perusahaan, Grafik, Tabel) */
/* ========================================= */

.company-selection-box h2 {
    display: none;
}

#confirmCompanySelectionBtn:hover { /* Hover tetap bisa berdiri sendiri */
    background-color: #218838;
}

#companySelectionMessage {
    margin-top: 10px;
    font-size: 0.9em;
}

/* NEW: Container untuk dua kartu utama (Capaian Regional & Metodologi CDM) */
.top-main-cards-container {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom untuk mobile */
    gap: 20px;
    margin-bottom: 10px; /* Jarak antara kontainer ini dan tabel di bawahnya */
    align-items: stretch; /* Pastikan item sejajar di bagian atas jika tingginya berbeda */
}

/* PERUBAHAN UTAMA DI SINI untuk Desktop */
@media (min-width: 992px) {
    .top-main-cards-container {
        grid-template-columns: 1fr 1.1fr; /* Kolom kiri (stacked cards) 1 bagian, kolom kanan (video) 1.1 bagian */
    }
}

/* NEW: Gaya untuk kontainer yang menumpuk kartu di sisi kanan */
.right-stacked-cards-container {
    display: flex;
    flex-direction: column; /* Menumpuk kartu secara vertikal */
    gap: 20px; /* Jarak antara kartu regional dan CDM */
    height: 100%; /* Memastikan kontainer ini mengisi tinggi sel grid */
}


/* Gaya umum untuk kartu di bagian ini */
.regional-emission-reduction-card,
.cdm-methodology-contribution-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    padding: 20px;
    overflow: hidden; /* Penting untuk tabel/konten yang mungkin meluber */
    flex-grow: 1; /* Memungkinkan kartu untuk mengambil ruang vertikal yang tersedia */
}

/* Gaya untuk judul kartu di bagian ini (dengan icon-bar) */
.card-title {
    font-size: 1.1em;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #d0d0d0; /* UBAH: Ketebalan dan warna */
    padding-bottom: 10px;
}


.card-title .icon-bar {
    display: inline-block;
    width: 4px; /* Lebar bar */
    height: 18px; /* Tinggi bar */
    background-color: #3498db; /* Warna biru */
    margin-right: 10px; /* Jarak antara bar dan teks */
    border-radius: 2px; /* Sedikit lengkungan pada bar */
}

/* Gaya untuk tabel Capaian Reduksi Emisi Per Regional PHE */
.regional-reduction-table {
    width: 100%; /* Ensure table takes full width of its container */
    border-collapse: collapse;
}

.regional-reduction-table th,
.regional-reduction-table td {
    font-size: 0.8em; /* Mengurangi ukuran font sel data */
    padding: 6px 8px; /* Mengurangi padding sel data */
    border-bottom: 1px solid #f2f2f2;
    vertical-align: middle; /* Pusatkan teks secara vertikal */
    box-sizing: border-box; /* Crucial for consistent width calculation */
}

/* --- BARU: Gaya untuk seluruh blok header (thead) --- */
.regional-reduction-table thead {
    background-color: #0d2a4d;
    color: white;
    border-radius: 8px 8px 0 0; /* Apply border-radius only to top corners */
    overflow: hidden; /* For rounded corners to work with children */
    line-height: 1.3;
    display: table; /* Make thead behave like a table element for width */
    width: 100%;
    table-layout: fixed; /* Ensure columns align with tbody */
}

.regional-reduction-table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75em;
    padding: 6px 8px;
    border-bottom: none;
    border-right: 1px solid #0a1f38;
    vertical-align: middle;
    box-sizing: border-box;
    line-height: 1.3;
}

/* Hapus border-right untuk kolom header terakhir */
.regional-reduction-table th:last-child {
    border-right: none;
}

/* Pastikan text-align tetap berfungsi dengan kelas yang sudah ada di HTML */
.regional-reduction-table th.text-left,
.regional-reduction-table td.text-left {
    text-align: left;
}
.regional-reduction-table th.text-center,
.regional-reduction-table td.text-center {
    text-align: center;
}
.regional-reduction-table th.text-right,
.regional-reduction-table td.text-right {
    text-align: center;
}

/* NEW: Scrollable tbody for regional reduction table */
.regional-reduction-table tbody {
    display: block; /* Penting agar max-height dan overflow berfungsi */
    max-height: 200px; /* Sesuaikan nilai ini sesuai jumlah baris yang ingin terlihat */
    overflow-y: auto; /* Aktifkan scroll vertikal */
    width: 100%; /* Pastikan tbody mengambil lebar penuh */
}

.regional-reduction-table tbody tr {
    display: table; /* Agar tr berperilaku seperti baris tabel untuk lebar */
    width: 100%;
    table-layout: fixed; /* Pastikan kolom sejajar dengan thead */
}


/* Gaya untuk menonjolkan nilai aktual dan persentase di tabel regional */
.regional-reduction-table .regional-value-highlight {
    font-weight: bold;
    color: #0d2a4d; /* Warna biru tua, sama dengan header */
}

/* Gaya untuk Progress Bar */
.progress-bar-container {
    width: 100%;
    background-color: #e9ecef; /* Latar belakang bar */
    border-radius: 5px;
    overflow: hidden;
    height: 8px; /* Tinggi bar */
    margin: 0;
    display: flex; /* Untuk menampung fill */
    align-items: center;
}

.progress-bar-container.small { /* Untuk progress bar di CDM */
    height: 6px;
    width: 80px; /* Lebar yang lebih kecil */
    margin-right: 8px;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

/* Warna Progress Bar */
.progress-bar-fill.blue { background-color: #3498db; }
.progress-bar-fill.green { background-color: #28a745; }
.progress-bar-fill.orange { background-color: #fd7e14; }
.progress-bar-fill.red { background-color: #dc3545; }
.progress-bar-fill.purple { background-color: #9b59b6; }


/* Gaya untuk Kontribusi Metodologi CDM */
.cdm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
}

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

.cdm-text {
    flex-grow: 1;
    margin-right: 15px;
}

.cdm-code {
    font-weight: 600; /* Tetap tebal */
    color: #2c3e50;
    font-size: 1em; /* Ukuran font untuk kode metodologi (lebih besar) */
}

.cdm-description {
    font-size: 0.8em; /* Ukuran font untuk judul metodologi (sedikit lebih kecil dari kode) */
    color: green;
    line-height: 1.4;
    margin-top: 2px;
}

.cdm-progress {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.cdm-value {
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
}

#cdmMethodologyList {
    max-height: 400px; /* Atur tinggi maksimum yang Anda inginkan sebelum scroll muncul */
    overflow-y: auto;  /* Aktifkan scroll vertikal otomatis */
    padding-right: 10px; /* Opsional: Beri sedikit padding agar scrollbar tidak menempel pada teks */
}
/* Warna teks tambahan */
.green-text { color: #28a745 !important; }
.blue-text { color: #3498db !important; }
.orange-text { color: #fd7e14 !important; }
.red-text { color: #dc3545 !important; }

/* Pastikan tabel Daftar Perusahaan Terdaftar mengambil lebar penuh */
.selection-table-container {
    grid-column: 1 / -1; /* Memastikan tabel ini selalu mengambil lebar penuh */
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparan putih */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    padding: 20px; /* Tambahkan padding ke container */
}


/* NEW: Gaya untuk Tabel Breakdown Detail Program Aksi Mitigasi Utama */
.mitigation-program-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px; /* Jarak dari judul */
    font-size: 0.8em;
    table-layout: fixed; /* Ini penting untuk mengontrol lebar kolom */
}

.mitigation-program-detail-table th,
.mitigation-program-detail-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #f2f2f2; /* Garis pemisah antar baris (horizontal) */
    border-right: 1px solid #e0e0e0; /* Garis pemisah antar kolom (vertikal) */
    word-wrap: break-word; /* Memastikan konten dalam sel bisa wrapping jika terlalu panjang */
}

/* Hapus border-right untuk kolom terakhir di header */
.mitigation-program-detail-table th:last-child {
    border-right: none;
}

/* Hapus border-right untuk kolom terakhir di body tabel */
.mitigation-program-detail-table td:last-child {
    border-right: none;
}

.mitigation-program-detail-table th {
    background-color: #0d2a4d; /* Warna header tabel yang lebih gelap */
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 2px solid #0a1f38; /* Garis bawah yang lebih tebal untuk header */
    white-space: nowrap; /* Mencegah teks header wrapping */
    overflow: hidden; /* Menyembunyikan teks yang melampaui batas */
    text-overflow: ellipsis; /* Menambahkan elipsis (...) jika teks terpotong */
    vertical-align: middle; /* Pastikan teks header di tengah secara vertikal */
    text-align: center; /* Pusatkan teks header */
}

.mitigation-program-detail-table tbody tr:nth-child(even) {
    background-color: #f8f8f8; /* Warna latar belakang bergantian */
}

.mitigation-program-detail-table tbody tr:hover {
    background-color: #f2f2f2; /* Efek hover */
}

/* Penyesuaian untuk teks di header tabel */
.mitigation-program-detail-table th.text-right,
.mitigation-program-detail-table td.text-right {
    text-align: right;
}

.mitigation-program-detail-table th.text-center,
.mitigation-program-detail-table td.text-center {
    text-align: center;
}

/* Gaya untuk Status Badge */
.status-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    min-width: 80px; /* Agar badge memiliki lebar minimum */
    text-align: center;
}

.status-badge.status-melampaui {
    background-color: #28a745; /* Hijau untuk Melampaui */
}

.status-badge.status-on-track {
    background-color: #ffc107; /* Kuning/Oranye untuk On-Track */
    color: #333; /* Warna teks lebih gelap untuk kontras */
}
.status-badge.status-tidak-tercapai {
    background-color: #dc3544; /* Merah untuk Tidak Tercapai */
    color: white;
}

.status-badge.status-belum-dimulai {
    background-color: #6c757d; /* Abu-abu untuk Belum Dimulai */
    color: white;
}

.status-badge.status-belum-ada-data {
    background-color: #e9ecef; /* Abu-abu sangat terang untuk Belum Ada Data */
    color: #495057; /* Teks abu-abu gelap agar terbaca */
}

/* Jika Anda masih menggunakan 'Tertunda' atau 'Gagal' dari logika lama,
   Anda bisa definisikan warnanya di sini juga jika belum ada */
.status-badge.status-tertunda {
    background-color: #fd7e14; /* Oranye untuk Tertunda */
    color: white;
}
.status-badge.status-gagal {
    background-color: #c82333; /* Merah gelap untuk Gagal */
    color: white;
}
/* Gaya untuk garis pemisah antar kelompok Regional */
.mitigation-program-detail-table .regional-group-separator {
    height: 10px; /* Tinggi garis pemisah */
    background-color: #f0f0f0; /* Warna latar belakang garis pemisah */
    border-top: 1px solid #d0d0d0; /* Garis atas */
    border-bottom: 1px solid #d0d0d0; /* Garis bawah */
}

.mitigation-program-detail-table .regional-group-separator td {
    padding: 0; /* Pastikan tidak ada padding di dalam sel pemisah */
    border: none; /* Hapus semua border default untuk sel ini */
}

/* Sesuaikan gaya untuk sel nama Regional dan pesan "Tidak ada program"
   agar border bawahnya tidak bertabrakan dengan separator */
.mitigation-program-detail-table .regional-name-cell {
    /* ... (gaya yang sudah ada) ... */
    border-bottom: none; /* Hapus border bawah di sini, karena separator akan menggantikannya */
}

.mitigation-program-detail-table .no-program-message-row {
    /* ... (gaya yang sudah ada) ... */
    border-bottom: none; /* Hapus border bawah di sini */
}

.mitigation-program-detail-table .no-program-message-content-cell {
    /* ... (gaya yang sudah ada) ... */
    border-bottom: none; /* Hapus border bawah di sini */
}

/* Pastikan baris program terakhir di setiap regional juga tidak memiliki border-bottom,
   karena separator akan menjadi pemisah utama. */
.mitigation-program-detail-table tbody tr:not(.regional-group-separator) td {
    border-bottom: 1px solid #f2f2f2; /* Default border bawah untuk semua sel data */
}

/* Hapus border-bottom untuk baris terakhir dari setiap kelompok regional
   (ini akan di-override oleh separator, tapi baik untuk kejelasan) */
/* Ini sedikit lebih kompleks karena kita perlu menargetkan baris terakhir sebelum separator.
   Untuk kesederhanaan, kita bisa mengandalkan separator itu sendiri untuk visual pemisah.
   Jika Anda ingin border-bottom yang lebih tebal di baris terakhir sebelum separator,
   ini akan memerlukan JavaScript lebih lanjut untuk menambahkan class khusus.
   Untuk saat ini, `regional-group-separator` akan menjadi pemisah visual utama. */

/* Override background-color bergantian agar sel pertama konsisten dengan barisnya */
/* Ini tetap diperlukan untuk baris program biasa */
.mitigation-program-detail-table tbody tr:nth-child(even):not(.regional-group-separator):not(.no-program-message-row) td:first-child {
    background-color: #f8f8f8;
}
.mitigation-program-detail-table tbody tr:nth-child(odd):not(.regional-group-separator):not(.no-program-message-row) td:first-child {
    background-color: #ffffff;
}

/* Pastikan sel pertama (regional-name-cell) di baris no-program-message-row juga memiliki latar belakang yang benar */
.mitigation-program-detail-table .no-program-message-row .regional-name-cell {
    background-color: #fdfdfd; /* Sesuai dengan background no-program-message-row */
}
/* Untuk memastikan huruf 't' dan 'e' di unit tCO2e tidak menjadi kapital */
.mitigation-program-detail-table th span,
.mitigation-program-detail-table th .subscript-unit {
    text-transform: none; /* Menghilangkan transformasi uppercase */
 }

/* Gaya untuk kartu RATA-RATA TARGET EFEKTIVITAS */
#targetEffectivenessSubInfo {
    overflow: hidden; /* Penting untuk menyembunyikan teks yang keluar dari batas */
    font-size: 0.8em; /* Sesuaikan ukuran font ini sesuai kebutuhan Anda */
    font-weight: bold;
    position: relative; /* Diperlukan untuk positioning elemen anak jika diperlukan */
    height: 1.2em; /* Berikan tinggi tetap agar tidak bergeser */
    line-height: 1.2em; /* Sesuaikan line-height dengan height */
    text-align: left; /* Pastikan teks dimulai dari kiri */
}

/* Gaya untuk teks yang bergerak */
#targetEffectivenessSubInfo .marquee-content {
    display: inline-block; /* Penting agar animasi translateX bekerja */
    white-space: nowrap;   /* Memastikan teks tetap dalam satu baris */
    animation: marquee 15s linear infinite; /* Animasi marquee: durasi 15s, linear, berulang */
    /* Durasi (15s) bisa disesuaikan. Semakin panjang teks, mungkin perlu durasi lebih lama. */
}

/* Keyframes untuk animasi marquee */
@keyframes marquee {
    0% { transform: translateX(0); } /* Mulai dari posisi awal */
    100% { transform: translateX(-50%); } /* Gulir sejauh 50% dari total lebar konten (karena diduplikasi) */
}

/* NEW: Gaya untuk Kontainer Ringkasan Dinamis Tunggal */
.single-dynamic-summary-container {
    /* Menggabungkan properti dari kode sebelumnya dan properti dari file Anda */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    padding: 0; /* Hapus padding agar video bisa mengisi penuh */
    border-bottom: 5px solid #0073BC;

    align-self: stretch; /* Memastikan item grid ini meregang */
    box-sizing: border-box;

    position: relative; /* PENTING: Untuk positioning elemen anak */
    overflow: hidden; /* PENTING: Untuk memastikan video tidak meluber dari border-radius */

    min-height: 0;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Menempatkan video di lapisan paling bawah */
}

/* BARU: Gaya untuk elemen video di dalam video-background */
.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ini memastikan video mengisi ruang tanpa terpotong atau menyisakan ruang kosong */
    border-radius: 8px; /* Cocokkan dengan border-radius container */
}

/* BARU: Gaya untuk overlay video */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Overlay gelap semi-transparan untuk kontras teks putih */
    z-index: 1; /* Di atas video, di bawah konten dinamis */
    border-radius: 8px; /* Cocokkan dengan border-radius container */
}

/* NEW: Wrapper untuk konten yang bergantian */
.dynamic-content-wrapper {
    position: absolute; /* PENTING: Posisikan secara absolut di atas video dan overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* PERUBAHAN: Posisikan konten di tengah horizontal */
    align-items: center; /* PERUBAHAN: Posisikan konten di tengah vertikal */
    z-index: 2;
    padding: 0; /* PERUBAHAN: Hapus padding agar konten benar-benar di tengah tanpa offset */
    box-sizing: border-box; /* Pastikan padding tidak menambah ukuran total */
}

/* Pastikan teks berada di atas video dan overlay */
.dynamic-metric-item {
    position: relative; /* Sekarang relatif terhadap dynamic-content-wrapper */
    display: none; /* Sembunyikan secara default */
    flex-direction: column;
    align-items: center; /* PERUBAHAN: Teks rata tengah dalam item */
    gap: 8px; /* PERUBAHAN: Sedikit perbesar jarak antar elemen teks */
    white-space: normal; /* Memungkinkan teks untuk melipat */
    text-align: center; /* PERUBAHAN: Teks rata tengah */
    max-width: 80%; /* PERUBAHAN: Batasi lebar agar teks lebih besar bisa muat */
    /* Hapus top, left, transform karena sudah diatur oleh flexbox */
}

.dynamic-metric-item.active {
    display: flex; /* Tampilkan item yang aktif */
}

.dynamic-metric-item .metric-label {
    font-size: 1.2em; /* PERUBAHAN: Perbesar font */
    color: white !important; /* Pastikan warna teks putih */
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Tambahkan bayangan teks untuk keterbacaan */
}

/* REVISI: Pastikan nilai utama dan unit dalam satu baris, dan unit lebih kecil */
.dynamic-metric-item .metric-value {
    font-size: 4.5em; /* PERUBAHAN: Perbesar font secara signifikan */
    font-weight: bold;
    color: white !important; /* Pastikan warna teks putih */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    line-height: 1.1;
    white-space: nowrap;
}

/* REVISI: Ukuran font unit tCO2e agar lebih kecil */
.dynamic-metric-item .metric-value .unit {
    font-size: 0.3em; /* PERUBAHAN: Sedikit perkecil unit relatif terhadap angka utama */
    font-weight: normal;
    color: white !important; /* Pastikan warna teks putih */
    vertical-align: baseline;
    margin-left: 3px;
    display: inline-block;
}

/* REVISI: Ukuran font subscript (2) di tCO2e agar proporsional */
.dynamic-metric-item .metric-value .unit .subscript-unit {
    vertical-align: sub;
    font-size: 0.8em;
}


/* REVISI: Ukuran font dan bold untuk metric-sub-value */
.dynamic-metric-item .metric-sub-value {
    font-size: 1.8em; /* PERUBAHAN: Perbesar font */
    color: white !important; /* Pastikan warna teks putih */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
}

/* Responsive adjustments untuk dynamic-metric-item */
@media (max-width: 768px) {
    .dynamic-metric-item {
        gap: 5px; /* PERUBAHAN: Sesuaikan gap untuk mobile */
        max-width: 90%; /* PERUBAHAN: Beri lebih banyak ruang di mobile */
    }
    .dynamic-metric-item .metric-label {
        font-size: 1em; /* PERUBAHAN: Perbesar font untuk mobile */
    }
    /* REVISI RESPONSIVE: Ukuran font dan nowrap untuk metric-value di mobile */
    .dynamic-metric-item .metric-value {
        font-size: 3em; /* PERUBAHAN: Perbesar font untuk mobile */
        white-space: nowrap; /* Tetap memaksa satu baris di mobile */
    }
    /* REVISI RESPONSIVE: Ukuran font unit tCO2e di mobile */
    .dynamic-metric-item .metric-value .unit {
        font-size: 0.3em; /* Tetap kecil relatif terhadap angka utama di mobile */
        margin-left: 2px; /* Mungkin perlu lebih kecil lagi jaraknya */
    }
    .dynamic-metric-item .metric-sub-value {
        font-size: 1.4em; /* PERUBAHAN: Perbesar font untuk mobile */
        font-weight: bold; /* Tetap bold */
    }
}

/* Untuk teks yang bergantian, berikan tinggi minimum agar tidak terjadi lompatan layout */
.alternating-text {
    /* min-height: 1.3em; */ /* BARIS INI DIKOMENTARI/DIHAPUS UNTUK MENGHINDARI KONFLIK */
}

/* Responsive adjustments untuk dynamic-metric-item */
@media (max-width: 768px) {
    .dynamic-metric-item {
        gap: 2px; /* Sesuaikan gap untuk mobile */
        padding: 10px 5px; /* Kurangi padding untuk mobile */
        max-width: 80%; /* Beri lebih banyak ruang di mobile */
    }
    .dynamic-metric-item .metric-label {
        font-size: 0.8em;
    }
    /* REVISI RESPONSIVE: Ukuran font dan nowrap untuk metric-value di mobile */
    .dynamic-metric-item .metric-value {
        font-size: 2em; /* Ukuran font lebih kecil di mobile */
        white-space: nowrap; /* Tetap memaksa satu baris di mobile */
    }
    /* REVISI RESPONSIVE: Ukuran font unit tCO2e di mobile */
    .dynamic-metric-item .metric-value .unit {
        font-size: 0.35em; /* Tetap kecil relatif terhadap angka utama di mobile */
        margin-left: 2px; /* Mungkin perlu lebih kecil lagi jaraknya */
    }
    .dynamic-metric-item .metric-sub-value {
        font-size: 1em; /* Ditingkatkan untuk mobile */
        font-weight: bold; /* Tetap bold */
    }
}

/*untuk tombol mute */

.mute-button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: rgba(0, 0, 0, 0.5); /* Warna latar belakang agar terlihat */
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px; /* Ukuran tombol yang lebih masuk akal */
    height: 40px; /* Ukuran tombol yang lebih masuk akal */
    font-size: 18px; /* Ukuran ikon yang lebih masuk akal */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Pastikan z-index sangat tinggi */
    transition: background-color 0.3s ease;
}

.mute-button:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Sedikit lebih gelap saat hover */
}

/* Pastikan juga video-overlay tidak menutupi tombol */
/* .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
} */ /* THIS IS NOW DEFINED ABOVE */

/* Jika dynamic-content-wrapper juga menutupi, pastikan z-index-nya lebih rendah dari tombol mute */
/* .dynamic-content-wrapper {
    position: relative;
    z-index: 2;
} */ /* THIS IS NOW DEFINED ABOVE */