/* GPC Billing global Light / Dark / Auto theme layer. Loaded after legacy styles. */
:root {
    color-scheme: dark;
}
html[data-gpc-theme-resolved="dark"] {
    color-scheme: dark;
}
html[data-gpc-theme-resolved="light"] {
    color-scheme: light;
    --gpc-bg: #f4f7fb;
    --gpc-panel: #ffffff;
    --gpc-panel-2: #f8fafc;
    --gpc-border: rgba(15, 23, 42, .12);
    --gpc-text: #0f172a;
    --gpc-muted: #64748b;
}

/* Account dropdown must be wider than Bootstrap's default 10rem. */
.gpc-account-menu {
    width: min(17rem, calc(100vw - 16px));
    min-width: min(17rem, calc(100vw - 16px));
    overflow: hidden;
}
.gpc-account-menu > li {
    min-width: 0;
}
.gpc-account-menu .dropdown-item {
    width: 100%;
    justify-content: flex-start;
}

/* Theme picker shared by login and account menu. */
.gpc-theme-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--gpc-border, rgba(148,163,184,.22));
    border-radius: 12px;
    background: rgba(127,127,127,.08);
}
.gpc-theme-picker .gpc-theme-choice {
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
    padding: .42rem .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    overflow: hidden;
}
.gpc-account-menu .gpc-theme-picker {
    width: 100%;
}
.gpc-account-menu .gpc-theme-picker .gpc-theme-choice i {
    flex: 0 0 auto;
    margin-right: 0 !important;
}
.gpc-theme-picker .gpc-theme-choice:hover { background: rgba(37,99,235,.12); }
.gpc-theme-picker .gpc-theme-choice.active {
    background: #0d6efd;
    color: #fff;
    box-shadow: 0 4px 14px rgba(13,110,253,.24);
}
.gpc-login-theme {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    width: min(280px, calc(100vw - 24px));
    z-index: 1090;
    padding: 7px;
    border-radius: 14px;
    background: rgba(15,23,42,.88);
    border: 1px solid rgba(148,163,184,.2);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.gpc-login-theme .gpc-theme-picker { border: 0; padding: 0; background: transparent; color: #e5e7eb; }

/* LIGHT MODE: legacy custom CSS is dark-first, so override only visual surfaces. */
html[data-gpc-theme-resolved="light"] body,
html[data-gpc-theme-resolved="light"] .main-container,
html[data-gpc-theme-resolved="light"] .content {
    background: var(--gpc-bg) !important;
    color: var(--gpc-text) !important;
}
html[data-gpc-theme-resolved="light"] .sidebar.gpc-sidebar,
html[data-gpc-theme-resolved="light"] .sidebar {
    background: #ffffff !important;
    color: #0f172a !important;
    border-right-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .sidebar .header-box { border-bottom-color: var(--gpc-border) !important; }
html[data-gpc-theme-resolved="light"] .gpc-sidebar-brand .brand-link { color: #0f172a !important; }
html[data-gpc-theme-resolved="light"] .gpc-sidebar .list-unstyled li a,
html[data-gpc-theme-resolved="light"] .gpc-sidebar .list-unstyled li .btn,
html[data-gpc-theme-resolved="light"] .sidebar .list-unstyled li a {
    color: #334155 !important;
}
html[data-gpc-theme-resolved="light"] .gpc-sidebar .list-unstyled li a:hover,
html[data-gpc-theme-resolved="light"] .gpc-sidebar .list-unstyled li .btn:hover,
html[data-gpc-theme-resolved="light"] .sidebar .list-unstyled li a:hover {
    background: rgba(37,99,235,.10) !important;
    color: #1d4ed8 !important;
}
html[data-gpc-theme-resolved="light"] .gpc-sidebar .gpc-customer-section,
html[data-gpc-theme-resolved="light"] .gpc-network-section { color: #64748b !important; }
html[data-gpc-theme-resolved="light"] hr.h-color { background: rgba(15,23,42,.12) !important; }

html[data-gpc-theme-resolved="light"] .navbar.gpc-topbar,
html[data-gpc-theme-resolved="light"] .navbar {
    background: rgba(255,255,255,.96) !important;
    color: #0f172a !important;
    border-bottom-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .navbar .navbar-brand,
html[data-gpc-theme-resolved="light"] .navbar .nav-link,
html[data-gpc-theme-resolved="light"] .gpc-topbar .nav-link,
html[data-gpc-theme-resolved="light"] .gpc-topbar .text-white,
html[data-gpc-theme-resolved="light"] #open-btn,
html[data-gpc-theme-resolved="light"] #close-btn {
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] #open-btn,
html[data-gpc-theme-resolved="light"] #close-btn { background: rgba(15,23,42,.06) !important; }
html[data-gpc-theme-resolved="light"] .navbar-collapse { background: #ffffff !important; }
html[data-gpc-theme-resolved="light"] .dropdown-menu { box-shadow: 0 14px 32px rgba(15,23,42,.14); }

html[data-gpc-theme-resolved="light"] .gpc-card,
html[data-gpc-theme-resolved="light"] .gpc-page .gpc-card,
html[data-gpc-theme-resolved="light"] .stat-card,
html[data-gpc-theme-resolved="light"] .gpc-list-item,
html[data-gpc-theme-resolved="light"] .mini-stat,
html[data-gpc-theme-resolved="light"] .card {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--gpc-border) !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.07);
}
html[data-gpc-theme-resolved="light"] .gpc-card-header,
html[data-gpc-theme-resolved="light"] .card-header {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .gpc-list-item b,
html[data-gpc-theme-resolved="light"] .mini-stat b { color: #0f172a !important; }
html[data-gpc-theme-resolved="light"] .gpc-tabs { background: rgba(255,255,255,.84) !important; }
html[data-gpc-theme-resolved="light"] .gpc-tabs .nav-link,
html[data-gpc-theme-resolved="light"] .gpc-setting-pills .nav-link { color: #475569 !important; }
html[data-gpc-theme-resolved="light"] .gpc-tabs .nav-link.active,
html[data-gpc-theme-resolved="light"] .gpc-setting-pills .nav-link.active { color: #fff !important; }

html[data-gpc-theme-resolved="light"] .form-control,
html[data-gpc-theme-resolved="light"] .form-select,
html[data-gpc-theme-resolved="light"] .input-group-text,
html[data-gpc-theme-resolved="light"] .form-select.bg-secondary,
html[data-gpc-theme-resolved="light"] textarea.form-control {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,.18) !important;
}
html[data-gpc-theme-resolved="light"] .form-control::placeholder { color: #94a3b8 !important; }
html[data-gpc-theme-resolved="light"] .form-label { color: #334155 !important; }
html[data-gpc-theme-resolved="light"] .text-white:not(.btn):not(.badge),
html[data-gpc-theme-resolved="light"] .text-light:not(.btn):not(.badge) { color: #0f172a !important; }
html[data-gpc-theme-resolved="light"] .text-white-50 { color: rgba(15,23,42,.55) !important; }
html[data-gpc-theme-resolved="light"] .bg-dark,
html[data-gpc-theme-resolved="light"] .bg-black { background-color: #ffffff !important; }
html[data-gpc-theme-resolved="light"] .bg-secondary { background-color: #f1f5f9 !important; color: #0f172a !important; }

/* DataTables */
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_length,
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_filter,
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_info,
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_processing,
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_paginate { color: #334155 !important; }
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_filter input,
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_length select {
    background: #fff !important; color: #0f172a !important; border-color: rgba(15,23,42,.18) !important;
}
html[data-gpc-theme-resolved="light"] table.dataTable thead th {
    background: #f8fafc !important; color: #0f172a !important; border-color: rgba(15,23,42,.14) !important;
}
html[data-gpc-theme-resolved="light"] table.dataTable tbody td {
    background: #fff !important; color: #0f172a !important; border-color: rgba(15,23,42,.10) !important;
}
html[data-gpc-theme-resolved="light"] table.dataTable.dtr-details,
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #fff !important; color: #334155 !important; border-color: rgba(15,23,42,.12) !important;
}

/* Maps and special panels */
html[data-gpc-theme-resolved="light"] .map-toolbar { background: rgba(255,255,255,.94) !important; }
html[data-gpc-theme-resolved="light"] .leaflet-popup-content-wrapper,
html[data-gpc-theme-resolved="light"] .leaflet-popup-tip,
html[data-gpc-theme-resolved="light"] .leaflet-control-layers,
html[data-gpc-theme-resolved="light"] .leaflet-bar a {
    background: #fff !important; color: #0f172a !important; border-color: rgba(15,23,42,.14) !important;
}
html[data-gpc-theme-resolved="light"] .gpc-user-map,
html[data-gpc-theme-resolved="light"] #tambah #map { background: #e2e8f0 !important; }

/* Login */
html[data-gpc-theme-resolved="light"] .bg-bg-3 { background: #f4f7fb !important; }
html[data-gpc-theme-resolved="light"] .bg-bg-3 h1 .text-white { color: #0f172a !important; }
html[data-gpc-theme-resolved="light"] .gpc-login-theme {
    background: rgba(255,255,255,.92);
    border-color: rgba(15,23,42,.12);
}
html[data-gpc-theme-resolved="light"] .gpc-login-theme .gpc-theme-picker { color: #334155; }

@media (max-width: 575px) {
    .gpc-login-theme { width: auto; left: 12px; right: 12px; }
}

/* Account-menu theme selector: active button already shows the current choice. */
.gpc-account-menu [data-gpc-theme-label] {
    display: none;
}
@media (max-width: 280px) {
    .gpc-account-menu .gpc-theme-picker .gpc-theme-choice i {
        display: none;
    }
}

/* ==========================================================================
   FIX: Modal (popup) di seluruh aplikasi masih hardcode warna gelap dengan
   !important di style.css (.content .modal-content, .modal-content:not(.gpc-card),
   .content .modal-header, dst). Aturan itu tidak pernah ditimpa untuk light
   theme sebelumnya, jadi semua modal (edit user, hapus, konfirmasi, dll)
   tetap terlihat gelap walau tema light aktif. Selector di bawah sengaja
   dibuat sama/lebih spesifik + !important agar benar-benar menimpa.
   ========================================================================== */
html[data-gpc-theme-resolved="light"] .content .modal-content,
html[data-gpc-theme-resolved="light"] .modal-content:not(.gpc-card),
html[data-gpc-theme-resolved="light"] .modal-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .content .card-header,
html[data-gpc-theme-resolved="light"] .content .cool-card-header,
html[data-gpc-theme-resolved="light"] .content .card-header.bg-primary,
html[data-gpc-theme-resolved="light"] .content .modal-header,
html[data-gpc-theme-resolved="light"] .modal-header {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-bottom: 1px solid var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .content .card-header h5,
html[data-gpc-theme-resolved="light"] .content .cool-card-header h5,
html[data-gpc-theme-resolved="light"] .content .modal-header .modal-title,
html[data-gpc-theme-resolved="light"] .modal-header .modal-title,
html[data-gpc-theme-resolved="light"] .modal-title {
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] .modal-body {
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] .content .modal-footer,
html[data-gpc-theme-resolved="light"] .modal-footer {
    border-top-color: var(--gpc-border) !important;
}
/* Tombol close (X) di-invert jadi putih supaya kelihatan di header gelap;
   di light theme header-nya terang, jadi filter invert ini harus dimatikan
   atau modal jadi menampilkan tombol X yang nyaris tak terlihat/salah warna. */
html[data-gpc-theme-resolved="light"] .content .btn-close-white,
html[data-gpc-theme-resolved="light"] .content .btn-close,
html[data-gpc-theme-resolved="light"] .btn-close-white,
html[data-gpc-theme-resolved="light"] .btn-close {
    filter: none !important;
}
/* Kartu di dalam WhatsApp lama (wa-page) juga masih hardcode gelap. */
html[data-gpc-theme-resolved="light"] .wa-page .wa-card,
html[data-gpc-theme-resolved="light"] .wa-page .tab-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--gpc-border) !important;
}
/* wasap.php punya banyak warna gelap hardcode di dalam <style> bawaannya
   sendiri (di luar cakupan class umum di atas) - ditimpa di sini. */
html[data-gpc-theme-resolved="light"] .wa-page .wa-session-card,
html[data-gpc-theme-resolved="light"] .wa-page .wa-add-box,
html[data-gpc-theme-resolved="light"] .wa-page .wa-bulkbar,
html[data-gpc-theme-resolved="light"] .wa-page .wa-setting-box,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-connect,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-powered,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-account,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-status,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-meta-grid > div,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-test-box,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-template-card,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-customer-table-wrap,
html[data-gpc-theme-resolved="light"] .wa-page .wa-template-card,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-provider-details,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-dashboard-tabs,
html[data-gpc-theme-resolved="light"] .wa-page .wa-session-subtabs,
html[data-gpc-theme-resolved="light"] .wa-page .wa-setting-subtabs {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .wa-page .wa-session-id,
html[data-gpc-theme-resolved="light"] .wa-page .wa-small-muted,
html[data-gpc-theme-resolved="light"] .wa-page .wa-setting-box label,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-form label,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-meta-grid span,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-customer-table .wa-customer-note,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-template-body,
html[data-gpc-theme-resolved="light"] .wa-page .wa-message-text,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-customer-table th,
html[data-gpc-theme-resolved="light"] .wa-page .dt-container {
    color: #64748b !important;
}
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-meta-grid strong,
html[data-gpc-theme-resolved="light"] .wa-page .wa-official-customer-table .wa-customer-name {
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] .wa-page .form-control,
html[data-gpc-theme-resolved="light"] .wa-page .form-select,
html[data-gpc-theme-resolved="light"] .wa-page .dt-search input,
html[data-gpc-theme-resolved="light"] .wa-page .dt-length select {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,.18) !important;
}
html[data-gpc-theme-resolved="light"] .wa-page .page-link {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--gpc-border) !important;
}

/* pppuser.php: modal Statistik Pemakaian PPPoE (.stats-*) punya style
   sendiri dengan gradasi & warna gelap hardcode, belum ikut tema light. */
html[data-gpc-theme-resolved="light"] .stats-modal-body {
    background: #f8fafc !important;
}
html[data-gpc-theme-resolved="light"] .stats-overview-main,
html[data-gpc-theme-resolved="light"] .stats-overview-side,
html[data-gpc-theme-resolved="light"] .stats-period-card,
html[data-gpc-theme-resolved="light"] .stats-history-card {
    background: #ffffff !important;
    border-color: var(--gpc-border) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}
html[data-gpc-theme-resolved="light"] .stats-split-item {
    background: #f8fafc !important;
    border-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .stats-overview-total,
html[data-gpc-theme-resolved="light"] .stats-period-total,
html[data-gpc-theme-resolved="light"] .stats-split-value {
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] .stats-split-label,
html[data-gpc-theme-resolved="light"] .stats-loading {
    color: #64748b !important;
}
html[data-gpc-theme-resolved="light"] .stats-error {
    background: rgba(220,38,38,.08) !important;
    color: #b91c1c !important;
}

/* keuangan.php: kartu ringkasan (.finance-stat) pakai overlay gelap
   transparan di atas latar terang -> jadi abu-abu pudar, teksnya juga
   abu-abu redup (kontras rendah). Tabel riwayat (.finance-table) pakai
   class "table" biasa jadi sudah ikut aturan tabel umum di atas. */
html[data-gpc-theme-resolved="light"] .finance-stat {
    background: #f8fafc !important;
    border-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .finance-stat-main {
    background: rgba(34,197,94,.08) !important;
    border-color: rgba(34,197,94,.35) !important;
}
html[data-gpc-theme-resolved="light"] .finance-stat-net {
    background: rgba(59,130,246,.08) !important;
    border-color: rgba(59,130,246,.35) !important;
}
html[data-gpc-theme-resolved="light"] .finance-stat-label,
html[data-gpc-theme-resolved="light"] .finance-stat-note {
    color: #64748b !important;
}
html[data-gpc-theme-resolved="light"] .finance-stat-value {
    color: #0f172a !important;
}
/* Komponen Bootstrap lain yang sering luput: dropdown, popover, toast, list-group. */
html[data-gpc-theme-resolved="light"] .dropdown-menu {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .dropdown-item {
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] .dropdown-item:hover,
html[data-gpc-theme-resolved="light"] .dropdown-item:focus {
    background: rgba(37,99,235,.08) !important;
    color: #1d4ed8 !important;
}
html[data-gpc-theme-resolved="light"] .list-group-item {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .popover {
    background: #ffffff !important;
    border-color: var(--gpc-border) !important;
}
html[data-gpc-theme-resolved="light"] .popover-body {
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] .jq-toast-wrap .jq-toast-single {
    color: #0f172a !important;
}

/* ==========================================================================
   FIX: Semua tabel DataTable (dan tabel biasa ber-class "table") di dalam
   .content masih pakai variabel warna & warna hardcode ala tema gelap
   (--bs-table-color abu-abu terang, thead hitam #020617, baris zebra/hover
   gelap) yang tidak pernah ditimpa untuk tema light sebelumnya, sehingga
   teksnya kontras rendah / header tetap hitam walau tema light aktif.
   Selector di bawah sengaja diberi prefix ganda (html[...] + .content) agar
   spesifisitasnya melebihi aturan gelap aslinya di style.css.
   ========================================================================== */
html[data-gpc-theme-resolved="light"] .content table.table,
html[data-gpc-theme-resolved="light"] table.table,
html[data-gpc-theme-resolved="light"] table.dataTable {
    --bs-table-bg: #ffffff !important;
    --bs-table-color: #0f172a !important;
    --bs-table-border-color: rgba(15,23,42,.12) !important;
    --bs-table-striped-bg: rgba(15,23,42,.035) !important;
    --bs-table-striped-color: #0f172a !important;
    --bs-table-hover-bg: rgba(37,99,235,.08) !important;
    --bs-table-hover-color: #0f172a !important;
    background: #ffffff !important;
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] .content table.table thead,
html[data-gpc-theme-resolved="light"] .content table.table thead.bg-dark,
html[data-gpc-theme-resolved="light"] .content table.table thead.bg-light,
html[data-gpc-theme-resolved="light"] .content table.table .table-dark,
html[data-gpc-theme-resolved="light"] table.dataTable thead {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
html[data-gpc-theme-resolved="light"] .content table.table th,
html[data-gpc-theme-resolved="light"] .content table.table td,
html[data-gpc-theme-resolved="light"] table.dataTable th,
html[data-gpc-theme-resolved="light"] table.dataTable td {
    color: #0f172a !important;
    border-color: rgba(15,23,42,.10) !important;
}
html[data-gpc-theme-resolved="light"] .dataTables_wrapper .dataTables_empty {
    color: #64748b !important;
}
html[data-gpc-theme-resolved="light"] .dataTables_processing {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--gpc-border) !important;
}