/* =====================================================================
   EDP Dashboard — tema di atas Bootstrap 5.3
   Sidebar terang 260px + topbar 70px + kartu berbayang halus.
   Dark mode: <html data-bs-theme="dark"> (tombol bulan di topbar).
   ===================================================================== */

:root,
[data-bs-theme=light] {
    --bs-font-sans-serif: "Public Sans Variable", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-color: #4a5a6b;
    --bs-body-color-rgb: 74, 90, 107;
    --bs-body-bg: #f5f7fb;
    --bs-body-bg-rgb: 245, 247, 251;
    --bs-heading-color: #1f2b3d;
    --bs-border-color: #e8ebf1;
    --bs-border-radius: 0.5rem;

    --bs-primary: #537AEF;
    --bs-primary-rgb: 83, 122, 239;
    --bs-secondary: #8c57d1;
    --bs-secondary-rgb: 140, 87, 209;
    --bs-success: #29aa85;
    --bs-success-rgb: 41, 170, 133;
    --bs-info: #62B7E5;
    --bs-info-rgb: 98, 183, 229;
    --bs-warning: #eb9d59;
    --bs-warning-rgb: 235, 157, 89;
    --bs-danger: #ec8290;
    --bs-danger-rgb: 236, 130, 144;
    --bs-link-color: #537AEF;
    --bs-link-color-rgb: 83, 122, 239;
    --bs-link-hover-color: #3f61c9;
    --bs-link-hover-color-rgb: 63, 97, 201;
    --bs-primary-bg-subtle: #dde4fc;
    --bs-success-bg-subtle: #d4eee7;
    --bs-warning-bg-subtle: #fbebde;
    --bs-danger-bg-subtle: #fbe6e9;
    --bs-primary-text-emphasis: #3f61c9;
    --bs-success-text-emphasis: #1c7a5f;
    --bs-warning-text-emphasis: #b06a2c;
    --bs-danger-text-emphasis: #c04a5b;

    --app-sidebar-w: 260px;
    --app-topbar-h: 70px;
    --app-surface: #ffffff;
    --app-menu-color: #2f384f;
    --app-menu-muted: #7d8099;
    --app-menu-hover-bg: #f3f5fb;
    --app-shadow: 0 .125rem .5rem rgba(0, 0, 0, .04);
    --app-strong: #111827;
}

[data-bs-theme=dark] {
    --bs-body-color: #a7b1c2;
    --bs-body-color-rgb: 167, 177, 194;
    --bs-body-bg: #12161f;
    --bs-body-bg-rgb: 18, 22, 31;
    --bs-heading-color: #e6eaf2;
    --bs-border-color: #262d3b;
    --bs-primary-bg-subtle: #1e2a4d;
    --bs-success-bg-subtle: #153a30;
    --bs-warning-bg-subtle: #45301c;
    --bs-danger-bg-subtle: #47242b;
    --bs-primary-text-emphasis: #9db4f7;
    --bs-success-text-emphasis: #6fd3b3;
    --bs-warning-text-emphasis: #f3bf8f;
    --bs-danger-text-emphasis: #f4a9b3;

    --app-surface: #1a202c;
    --app-menu-color: #c9d1e0;
    --app-menu-muted: #8591a8;
    --app-menu-hover-bg: #232b3a;
    --app-shadow: 0 .125rem .5rem rgba(0, 0, 0, .3);
    --app-strong: #f3f5f9;
}

body {
    font-family: var(--bs-font-sans-serif);
}

a { text-decoration: none; }

.fs-14 { font-size: .875rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.fs-22 { font-size: 1.375rem; }
.text-strong { color: var(--app-strong); }

/* ── Tombol & form mengikuti warna primer ─────────────────────────────── */
.btn-primary {
    --bs-btn-bg: #537AEF;
    --bs-btn-border-color: #537AEF;
    --bs-btn-hover-bg: #4668d0;
    --bs-btn-hover-border-color: #4668d0;
    --bs-btn-active-bg: #3f61c9;
    --bs-btn-active-border-color: #3f61c9;
    --bs-btn-disabled-bg: #537AEF;
    --bs-btn-disabled-border-color: #537AEF;
    --bs-btn-focus-shadow-rgb: 83, 122, 239;
}

.btn { font-size: .875rem; }

.form-control,
.form-select {
    font-size: .875rem;
    border-color: var(--bs-border-color);
    background-color: var(--app-surface);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(83, 122, 239, .6);
    box-shadow: 0 0 0 .2rem rgba(83, 122, 239, .15);
    background-color: var(--app-surface);
}

/* ── Topbar ───────────────────────────────────────────────────────────── */
.topbar-custom {
    position: fixed;
    top: 0;
    left: var(--app-sidebar-w);
    right: 0;
    height: var(--app-topbar-h);
    padding: 0 12px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    z-index: 1000;
    transition: left .15s ease-out;
}

.topbar-custom > .container-xxl,
.topbar-custom .topbar-row {
    height: 100%;
}

.topnav-menu { gap: .25rem; }

.topnav-menu .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0 .6rem;
    height: var(--app-topbar-h);
    border: 0;
    background: transparent;
    color: var(--app-menu-color);
}

.topnav-menu .nav-link:hover { color: var(--bs-primary); }

.noti-icon { width: 20px; height: 20px; }

.topbar-search { width: 240px; }
.topbar-search .form-control { padding-left: 2.2rem; background: var(--bs-body-bg); border-color: transparent; }
.topbar-search svg {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--app-menu-muted);
}

.user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
    font-weight: 600; font-size: .8rem; flex-shrink: 0;
}

.pro-user-name { font-weight: 500; color: var(--app-menu-color); line-height: 1.2; }
.pro-user-role { font-size: .72rem; color: var(--app-menu-muted); line-height: 1.2; }

.dropdown-menu {
    font-size: .875rem;
    border-color: var(--bs-border-color);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
    background: var(--app-surface);
}

.dropdown-item { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; }
.dropdown-item svg { width: 16px; height: 16px; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.app-sidebar-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--app-sidebar-w);
    padding-top: var(--app-topbar-h);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    z-index: 1001;
    transition: transform .15s ease-out;
}

.app-sidebar-menu .sidebar-scroll {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 1.5rem;
}

.logo-box {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--app-sidebar-w);
    height: var(--app-topbar-h);
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: var(--app-strong);
}

.logo-mark {
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-primary); color: #fff;
}
.logo-mark svg { width: 18px; height: 18px; }

#side-menu,
.nav-second-level {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-title {
    padding: 14px 20px 8px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--app-menu-muted);
}

#side-menu > li > a {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1px 10px;
    padding: 10px 12px;
    border-radius: .5rem;
    font-size: .938rem;
    font-weight: 500;
    color: var(--app-menu-color);
    transition: background-color .15s, color .15s;
}

#side-menu > li > a svg { width: 18px; height: 18px; flex-shrink: 0; }

#side-menu > li > a:hover,
#side-menu > li > a.active,
#side-menu > li.menuitem-active > a {
    color: var(--bs-primary);
    background: var(--app-menu-hover-bg);
}

.menu-arrow {
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s;
}

#side-menu > li > a[aria-expanded=true] .menu-arrow { transform: rotate(45deg); }

.nav-second-level { padding: 2px 0 6px; }

.nav-second-level a {
    display: block;
    padding: 7px 20px 7px 52px;
    font-size: .875rem;
    color: var(--app-menu-muted);
}

.nav-second-level a:hover,
.nav-second-level a.active { color: var(--bs-primary); }
.nav-second-level a.active { font-weight: 600; }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .4);
    z-index: 1000;
}

/* ── Konten ───────────────────────────────────────────────────────────── */
.content-page {
    position: relative;
    margin-left: var(--app-sidebar-w);
    margin-top: var(--app-topbar-h);
    min-height: calc(100vh - var(--app-topbar-h));
    padding: 0 12px 65px;
    transition: margin-left .15s ease-out;
}

.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 24px;
    font-size: .8125rem;
    color: var(--app-menu-muted);
}

/* Sidebar disembunyikan (desktop) */
body.sidebar-collapsed .app-sidebar-menu { transform: translateX(-100%); }
body.sidebar-collapsed .topbar-custom { left: 0; }
body.sidebar-collapsed .content-page { margin-left: 0; }

@media (max-width: 991.98px) {
    .app-sidebar-menu { transform: translateX(-100%); }
    .topbar-custom { left: 0; }
    .content-page { margin-left: 0; padding: 0 4px 65px; }
    .footer { text-align: center; }

    body.sidebar-open .app-sidebar-menu { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; }
}

/* ── Kartu ────────────────────────────────────────────────────────────── */
.card {
    --bs-card-spacer-x: 1.2rem;
    --bs-card-spacer-y: 1.2rem;
    --bs-card-cap-padding-x: 1.2rem;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-bg: transparent;
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--bs-border-color);
    box-shadow: var(--app-shadow);
    margin-bottom: 1rem;
}

.row.g-3 > [class*=col] > .card { margin-bottom: 0; height: 100%; }

.card-title { font-size: 1rem; font-weight: 600; color: var(--bs-heading-color); }

.widgets-icon-box {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bs-border-color);
    margin-right: .6rem;
}
.widgets-icon-box svg { width: 16px; height: 16px; }

.stat-trend { display: inline-flex; align-items: center; font-weight: 500; }
.stat-trend svg { width: 18px; height: 18px; margin-left: .25rem; }

/* ── Tabel ────────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    font-size: .875rem;
}

.table > thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--app-menu-muted);
    background: var(--bs-body-bg);
    white-space: nowrap;
}

.table > :not(caption) > * > * { padding: .75rem 1.2rem; }
.table-traffic tbody tr:last-child td { border-bottom: 0; }

/* Judul kolom yang bisa di-sort (lihat tableSort di layout.js) */
.table > thead th.sortable { cursor: pointer; user-select: none; }
.table > thead th.sortable:hover,
.table > thead th.sort-asc,
.table > thead th.sort-desc { color: var(--bs-primary); }
.table > thead th.sortable:focus-visible { outline: 2px solid rgba(83, 122, 239, .6); outline-offset: -2px; }
.table > thead th.sortable::after { content: "↕"; margin-left: .35rem; opacity: .35; font-size: .8em; }
.table > thead th.sort-asc::after { content: "↑"; opacity: 1; }
.table > thead th.sort-desc::after { content: "↓"; opacity: 1; }

/* Baris total di kaki tabel */
.table > tfoot td {
    font-weight: 600;
    color: var(--bs-heading-color);
    background: var(--bs-body-bg);
    border-top: 2px solid var(--bs-border-color);
    border-bottom: 0;
    white-space: nowrap;
}

.badge { font-weight: 500; padding: .4em .7em; }

.progress { --bs-progress-height: 6px; --bs-progress-bg: var(--bs-body-bg); --bs-progress-bar-bg: var(--bs-primary); }

/* ── Halaman login / error ────────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.auth-card { width: 100%; max-width: 420px; }
.auth-card .card-body { padding: 2rem; }

/* ApexCharts mengikuti tema */
.apexcharts-tooltip { font-family: var(--bs-font-sans-serif) !important; }

/* ── Select2 (tema bootstrap-5) — warna ikut variabel tema supaya mode gelap benar ── */
.select-wrap { width: 200px; max-width: 100%; }
.select-wrap-wide { width: 360px; }

.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .75rem + 2px);
    font-size: .875rem;
    color: var(--bs-body-color);
    background-color: var(--app-surface);
    border-color: var(--bs-border-color);
}

.select2-container--bootstrap-5 .select2-selection--single { padding-top: .375rem; padding-bottom: .375rem; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--bs-body-color); }

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: rgba(83, 122, 239, .6);
    box-shadow: 0 0 0 .2rem rgba(83, 122, 239, .15);
}

.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: var(--bs-body-bg);
    opacity: .7;
}

.select2-container--bootstrap-5 .select2-dropdown {
    font-size: .875rem;
    color: var(--bs-body-color);
    background-color: var(--app-surface);
    border-color: rgba(83, 122, 239, .6);
    z-index: 1060;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    font-size: .875rem;
    color: var(--bs-body-color);
    background-color: var(--app-surface);
    border-color: var(--bs-border-color);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { font-size: .875rem; }

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: var(--bs-body-color);
    background-color: var(--app-menu-hover-bg);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #fff;
    background-color: var(--bs-primary);
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a7b1c2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-content { background: var(--app-surface); border-color: var(--bs-border-color); }
.modal-header, .modal-footer { border-color: var(--bs-border-color); }
.table-sm > :not(caption) > * > * { padding: .45rem .8rem; }

/* Modal lebar: hampir selebar layar (dipakai jendela penelusuran yang tabelnya banyak kolom) */
@media (min-width: 576px) {
    .modal-wide { --bs-modal-width: min(96vw, 1700px); }
}

/* Tabel banyak kolom: sel rapat, angka tidak terpotong, judul kolom boleh turun baris */
.table-compact { font-size: .8125rem; }
.table-compact > :not(caption) > * > * { padding: .4rem .55rem; white-space: nowrap; }
.table-compact > thead th { white-space: normal; vertical-align: bottom; font-size: .6875rem; letter-spacing: .02em; }

/* ── Konten selebar layar: kartu melebar sampai ke sidebar dan tepi kanan ──
   (tanpa batas lebar 1320px bawaan .container-xxl; sisa jarak hanya 12px) */
.content-page { padding-left: 0; padding-right: 0; }
.content-page .container-xxl,
.topbar-custom .container-xxl {
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
}
.topbar-custom { padding: 0; }
.footer { padding-left: 12px; padding-right: 12px; }