/* ==========================================================================
   Tema ePengendalian (gaya Phoenix)
   Dimuat paling akhir di _layouts/app.blade.php, menimpa materialize/style/custom.
   ========================================================================== */

:root {
    --ep-font: "Nunito Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ep-bg: #f5f7fa;
    --ep-surface: #ffffff;
    --ep-text: #31374a;
    --ep-heading: #141824;
    --ep-muted: #525b75;
    --ep-muted-2: #6e7891;
    --ep-border: #cbd0dd;
    --ep-border-soft: #e3e6ed;
    --ep-hover: #eff2f6;
    /* Bawaan; ditimpa oleh _komponen/warna.blade.php dari .env (APP_COLOR_*) */
    --ep-primary: #3874ff;
    --ep-dark: #2a3470;
    --ep-accent: #f16a1b;
    --ep-primary-hover: #004dff;
    --ep-primary-soft: #e5edff;
    --ep-primary-text: #003cc7;
    --ep-primary-border: #adc5ff;
    --ep-dark-hover: #1e2556;
    --ep-accent-hover: #d9580c;
    --ep-accent-soft: #fff1e8;
    --ep-accent-light: #ffb27f;
    --ep-accent-text: #bc3803;
    --ep-success: #25b003;
    --ep-success-soft: #d9fbd0;
    --ep-warning: #e5780b;
    --ep-warning-soft: #ffefca;
    --ep-danger: #ec1f00;
    --ep-danger-soft: #ffe0db;
    --ep-info: #0097eb;
    --ep-info-soft: #c7ebff;
    --ep-radius: 8px;
    --ep-topbar-h: 64px;
    --ep-sidebar-w: 254px;
}

/* ---------- Dasar ---------- */
html {
    font-size: 16px !important;
}

body,
body button,
body input,
body select,
body textarea,
body .btn {
    font-family: var(--ep-font);
}

body {
    background: var(--ep-bg);
    color: var(--ep-text);
    font-size: 0.875rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ep-heading);
    font-family: var(--ep-font);
}

a {
    color: var(--ep-primary);
}

#main {
    background: var(--ep-bg);
    min-height: calc(100vh - var(--ep-topbar-h) - 48px);
}

body p,
body li,
body td,
body th,
body label,
body span {
    font-family: var(--ep-font);
}


@media only screen and (min-width: 993px) {
    #main {
        padding-left: var(--ep-sidebar-w);
        background: var(--ep-bg);
    }

    body.menu-collapse #main {
        padding-left: 64px;
    }
}

#main > .row {
    margin-bottom: 0;
    padding: 0 28px;
}

@media only screen and (max-width: 600px) {
    #main > .row {
        padding: 0 8px;
    }
}

/* Pembungkus lama berwarna gradasi di belakang header halaman */
.content-wrapper-before {
    display: none !important;
}

/* ---------- Topbar ---------- */
header .navbar,
.navbar {
    height: var(--ep-topbar-h);
}

.navbar .navbar-main,
.navbar-main.navbar-color,
nav.navbar-main {
    height: var(--ep-topbar-h);
    line-height: var(--ep-topbar-h);
    background: var(--ep-surface) !important;
    border-bottom: 1px solid var(--ep-border);
    box-shadow: none !important;
    color: var(--ep-text);
}

nav.navbar-main .nav-wrapper {
    height: var(--ep-topbar-h);
}

nav.navbar-admin ul a,
nav.navbar-main ul a {
    color: var(--ep-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

nav.navbar-main ul a i.material-icons {
    color: var(--ep-muted);
    height: var(--ep-topbar-h);
    line-height: var(--ep-topbar-h);
}

nav.navbar-main .navbar-list {
    display: flex;
    align-items: center;
    height: var(--ep-topbar-h);
    margin-right: 24px;
}

nav.navbar-main .navbar-list > li > a {
    display: flex;
    align-items: center;
    height: var(--ep-topbar-h);
    padding: 0 10px;
}

nav.navbar-main .navbar-list > li > a:hover {
    background: transparent;
}

.ep-topbar-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.ep-topbar-icon:hover {
    background: var(--ep-hover);
}

.ep-topbar-icon i.material-icons {
    height: auto !important;
    line-height: 1 !important;
    font-size: 22px;
}

.ep-topbar-owner {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
    margin-right: 8px;
    color: var(--ep-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.ep-topbar-owner img {
    height: 32px;
    width: auto;
}

/* Avatar */
.avatar-status {
    width: 36px;
    height: 36px;
    margin-left: 0;
    padding-bottom: 0;
    display: inline-block;
    position: relative;
    line-height: 0;
}

.avatar-status img {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover;
    border-radius: 50%;
}

nav .avatar-status i,
.avatar-status i {
    right: 0;
    bottom: 0;
    width: 10px !important;
    height: 10px !important;
    border: 2px solid #fff;
    position: absolute;
    border-radius: 50%;
}

/* Dropdown profil */
#profile-dropdown.dropdown-content {
    width: 260px !important;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    box-shadow: 0 8px 24px -4px rgba(36, 40, 46, .08);
    padding: 8px 0;
}

#profile-dropdown li {
    min-height: 0;
}

#profile-dropdown li > a {
    color: var(--ep-text) !important;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

#profile-dropdown li > a > i {
    margin: 0;
    height: auto;
    line-height: 1;
    font-size: 20px;
    color: var(--ep-muted);
}

#profile-dropdown li > a:hover {
    background: var(--ep-hover);
}

#profile-dropdown .ep-profile-head {
    padding: 12px 20px 14px;
    text-align: center;
    line-height: 1.4;
}

#profile-dropdown .ep-profile-head img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
}

#profile-dropdown .ep-profile-head strong {
    display: block;
    color: var(--ep-heading);
    font-size: 0.95rem;
}

#profile-dropdown .ep-profile-head span {
    color: var(--ep-muted-2);
    font-size: 0.75rem;
    font-weight: 600;
}

#profile-dropdown li.divider {
    background-color: var(--ep-border-soft);
    margin: 6px 0;
}

/* ---------- Sidebar ---------- */
.sidenav-main {
    width: var(--ep-sidebar-w);
    background-image: none;
    box-shadow: none !important;
}

.brand-sidebar {
    width: var(--ep-sidebar-w);
    height: var(--ep-topbar-h);
    background: var(--ep-surface) !important;
    border-bottom: 1px solid var(--ep-border);
    box-shadow: none !important;
    z-index: 999;
}

.brand-sidebar .logo-wrapper {
    width: 100%;
    box-sizing: border-box;
    height: var(--ep-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 24px;
}

.brand-sidebar .brand-logo,
.nav-collapsed .brand-sidebar .brand-logo {
    position: static;
    padding: 0 !important;
    display: flex;
    align-items: center;
    height: var(--ep-topbar-h);
}

.brand-logo img,
.brand-sidebar .logo-wrapper a.brand-logo img {
    width: auto !important;
    height: 26px !important;
}

.brand-sidebar .logo-wrapper .navbar-toggler {
    position: static !important;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-sidebar .logo-wrapper .navbar-toggler:hover {
    background: var(--ep-hover);
}

.brand-sidebar .logo-wrapper .navbar-toggler i.material-icons {
    color: var(--ep-muted) !important;
    font-size: 20px !important;
    margin: 0;
    line-height: 1;
    height: auto;
}

.sidenav {
    top: var(--ep-topbar-h);
    width: var(--ep-sidebar-w);
    height: calc(100% - var(--ep-topbar-h));
    background: var(--ep-surface);
    border-right: 1px solid var(--ep-border);
    padding: 16px 0 24px;
    box-shadow: none !important;
}

.sidenav.menu-shadow {
    box-shadow: none !important;
}

.sidenav li {
    margin: 0;
    line-height: normal;
}

.sidenav li.ep-nav-label {
    color: var(--ep-muted-2);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 16px 32px 6px;
}

.sidenav li > a,
.sidenav li a.collapsible-header,
.sidenav-active-square .sidenav li > a.active {
    color: var(--ep-muted) !important;
    font-size: 0.8rem;
    font-weight: 600;
    height: 36px;
    line-height: 36px;
    margin: 1px 12px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 6px;
    box-shadow: none !important;
    display: flex;
    align-items: center;
}

.sidenav li > a > i.material-icons,
.sidenav li a.collapsible-header > i.material-icons {
    font-family: "Material Icons Outlined", "Material Icons";
    color: var(--ep-muted) !important;
    font-size: 20px;
    width: 20px;
    height: 36px;
    line-height: 36px;
    margin: 0 12px 0 0 !important;
}

.sidenav li > a:not(.active):hover,
.sidenav li a.collapsible-header:hover {
    background: var(--ep-hover) !important;
    border: 0 !important;
}

.sidenav li a.active.gradient-45deg-light-blue-cyan,
.sidenav li a.active.gradient-45deg-light-blue-cyan#mn10,
.sidenav-active-square .sidenav li:not(.open) > a.active,
.sidenav-active-square .sidenav li > a.active {
    background: var(--ep-primary-soft) !important;
    color: var(--ep-primary) !important;
}

.sidenav li a.active > i.material-icons,
.sidenav-active-square .sidenav li:not(.open) > a.active > i,
.sidenav-active-square .sidenav li:not(.open) > a.active#mn10 > i {
    color: var(--ep-primary) !important;
}

/* Sub menu (Laporan, Data Rekening) */
.sidenav li.open > a.collapsible-header {
    background: transparent !important;
    color: var(--ep-heading) !important;
}

.sidenav .collapsible-body {
    background: transparent !important;
}

.sidenav .collapsible-body li a,
.sidenav .collapsible-sub li a {
    height: 32px;
    line-height: 32px;
    font-weight: 600;
    padding-left: 44px !important;
}

.sidenav .collapsible-body li a > i.material-icons {
    font-size: 16px;
    width: 16px;
    margin-right: 8px !important;
}

.sidenav li.bold > a.collapsible-header:after,
.sidenav .collapsible > li.bold > a.collapsible-header::after {
    color: var(--ep-muted-2);
    font-size: 1.1rem;
    line-height: 36px;
    top: 0;
    right: 12px;
}

.sidenav li > a > i.material-icons + span,
.sidenav .menu-title {
    flex: 1;
}

.sidenav .divider {
    margin: 12px 24px;
    width: auto;
    height: 1px;
    background-color: var(--ep-border-soft);
}

/* Sidebar dalam mode ciut (desktop) */
@media only screen and (min-width: 993px) {
    .sidenav-main.nav-collapsed,
    .sidenav-main.nav-collapsed .sidenav {
        width: 64px;
    }

    .sidenav-main.nav-collapsed .brand-sidebar {
        width: 64px;
    }

    .sidenav-main.nav-collapsed .brand-sidebar .logo-wrapper {
        padding: 0;
        justify-content: center;
    }

    .sidenav-main.nav-collapsed .brand-logo,
    .sidenav-main.nav-collapsed .ep-nav-label {
        display: none !important;
    }

    .sidenav-main.nav-collapsed .brand-sidebar .navbar-toggler {
        visibility: visible;
        opacity: 1;
    }

    .sidenav-main.nav-collapsed .sidenav li > a {
        margin: 1px 10px !important;
        padding: 0 10px !important;
    }

    .sidenav-main.nav-collapsed .sidenav li > a > i.material-icons {
        margin: 0 !important;
    }
}

/* Mobile: topbar penuh, sidebar sebagai drawer */
@media only screen and (max-width: 992px) {
    .brand-sidebar {
        width: auto;
        border-bottom: 0;
        background: transparent !important;
    }

    .brand-sidebar {
        left: 60px !important;
    }

    .brand-sidebar .logo-wrapper {
        padding: 0 !important;
    }

    .brand-sidebar .brand-logo {
        left: auto !important;
        transform: none !important;
    }

    .sidenav {
        top: 0;
        height: 100%;
    }

    nav.navbar-main {
        padding-left: 64px;
    }

    .ep-topbar-owner span {
        display: none;
    }

    .btn-sidenav-toggle {
        top: 14px !important;
        left: 12px !important;
        background: var(--ep-surface) !important;
        box-shadow: none !important;
        border: 1px solid var(--ep-border);
        width: 36px;
        height: 36px;
    }

    .btn-sidenav-toggle i {
        color: var(--ep-muted) !important;
        line-height: 34px !important;
    }
}

/* ---------- Header halaman ---------- */
#breadcrumbs-wrapper,
.ep-page-header {
    padding: 28px 0 20px !important;
    margin: 0;
    background: transparent;
}

.ep-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ep-page-title {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ep-heading);
    margin: 0 0 6px;
}

.ep-page-header .breadcrumbs,
.ep-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ep-muted);
}

.ep-breadcrumb li + li:before {
    content: "/";
    color: var(--ep-border);
    margin-right: 6px;
}

.ep-breadcrumb a {
    color: var(--ep-muted);
}

.ep-breadcrumb a:hover {
    color: var(--ep-primary);
}

.ep-page-header .ep-page-logo {
    height: 64px;
    width: auto;
}

.ep-page-header.tipis .ep-page-title {
    font-size: 1.6rem;
}

.ep-page-header.tipis .ep-page-logo {
    height: 52px;
}

@media only screen and (max-width: 600px) {
    .ep-page-title {
        font-size: 1.45rem;
    }

    .ep-page-header .ep-page-logo {
        height: 44px;
    }
}

/* ---------- Card ---------- */
.card,
.card.border-radius-6,
.card-panel {
    background: var(--ep-surface);
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius) !important;
    box-shadow: none !important;
    color: var(--ep-text);
}

.card .card-content {
    padding: 24px;
}

.card .card-action {
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--ep-border-soft);
    padding: 16px 24px;
    border-radius: var(--ep-radius) var(--ep-radius) 0 0 !important;
}

.card .card-title,
.card-title {
    color: var(--ep-heading);
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.5;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card .card-title i.material-icons,
.card-title i.material-icons {
    font-size: 20px;
    color: var(--ep-muted);
    margin: 0 !important;
    line-height: 1;
}

.card-header {
    border-bottom: 1px solid var(--ep-border-soft);
}

.gradient-shadow {
    box-shadow: none !important;
}

/* ---------- Tombol ---------- */
.btn,
.btn-large,
.btn-small,
.btn-flat {
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 6px;
    box-shadow: none !important;
}

.btn,
.btn-small {
    font-size: 0.8rem;
}

.btn.border-round {
    border-radius: 6px !important;
}

.btn.cyan,
.btn.blue,
.btn.gradient-45deg-light-blue-cyan,
.btn.gradient-45deg-indigo-light-blue {
    background: var(--ep-primary) !important;
}

.btn.cyan:hover,
.btn.blue:hover {
    background: var(--ep-primary-hover) !important;
}

.btn-floating {
    box-shadow: none !important;
}

/* ---------- Form ---------- */
input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--ep-primary);
    box-shadow: 0 1px 0 0 var(--ep-primary);
}

input:not([type]):focus:not([readonly]) + label,
input[type=text]:focus:not([readonly]) + label,
input[type=password]:focus:not([readonly]) + label,
input[type=email]:focus:not([readonly]) + label,
input[type=number]:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: var(--ep-primary);
}

.input-field > label {
    color: var(--ep-muted-2);
}

/* ---------- Tabel & DataTables ---------- */
table {
    color: var(--ep-text);
}

table thead.blue,
table thead.blue.lighten-5 {
    background: transparent !important;
}

table th {
    color: var(--ep-heading);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid var(--ep-border) !important;
    padding: 12px 10px;
}

table.dataTable tbody td,
table.striped > tbody > tr > td,
table.highlight > tbody > tr > td {
    border-bottom: 1px solid var(--ep-border-soft);
    padding: 10px;
}

table.dataTable.no-footer {
    border-bottom: 0;
}

table.dataTable tbody tr,
table.striped > tbody > tr:nth-child(odd) {
    background-color: transparent;
}

/* Baris program/kegiatan (.bg-prog/.bg-keg) dikecualikan agar warna tingkatnya tetap terlihat */
table.highlight > tbody > tr:not(.bg-prog):not(.bg-keg):hover,
table.dataTable.hover tbody tr:not(.bg-prog):not(.bg-keg):hover,
table.dataTable.display tbody tr:not(.bg-prog):not(.bg-keg):hover {
    background-color: var(--ep-hover) !important;
}

table.dataTable tbody tr.bg-prog:hover,
table.dataTable tbody tr.bg-keg:hover {
    filter: brightness(.96);
}

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_1 {
    background-color: transparent;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--ep-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTables_filter input,
.dataTables_length select {
    height: 34px !important;
    border: 1px solid var(--ep-border) !important;
    border-radius: 999px !important;
    background: var(--ep-surface) !important;
    padding: 0 14px !important;
    font-size: 0.8rem !important;
    box-shadow: none !important;
    margin: 0 0 0 8px !important;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: 6px !important;
    padding: 0 8px !important;
    display: inline-block;
    width: auto;
}

.dataTables_wrapper .dataTables_info {
    color: var(--ep-muted);
    font-size: 0.8rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    border: 0 !important;
    font-size: 0.8rem;
    color: var(--ep-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ep-primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ep-hover) !important;
    color: var(--ep-heading) !important;
}

/* Baris hierarki di tabel program: warnanya (.bg-prog / .bg-keg) didefinisikan di
   _layouts/app.blade.php dan dijelaskan oleh _komponen/legenda_program.blade.php */

/* Tabel info Tahun/OPD di atas daftar */
table.table-adr1 {
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    border-collapse: separate !important;
    overflow: hidden;
}

table.table-adr1.white-text,
table.table-adr1.white-text td {
    color: var(--ep-text) !important;
}

table.table-adr1 tr[class*=gradient-45deg] {
    background: var(--ep-surface) !important;
}

table.table-adr1 tr:first-child[class*=gradient-45deg] {
    background: #f5f7fa !important;
}

table.table-adr1 tr:first-child td {
    color: var(--ep-muted) !important;
    font-size: 0.72rem;
    text-transform: uppercase;
}

/* ---------- Modal ---------- */
.modal {
    border-radius: var(--ep-radius);
    box-shadow: 0 16px 48px -8px rgba(36, 40, 46, .25);
}

.modal .modal-footer {
    border-top: 1px solid var(--ep-border-soft);
}

/* ---------- Footer ---------- */
.page-footer.footer,
footer.page-footer {
    background: transparent !important;
    box-shadow: none !important;
    border-top: 1px solid var(--ep-border-soft);
    color: var(--ep-muted) !important;
    font-size: 0.8rem;
}

@media only screen and (min-width: 993px) {
    footer.page-footer {
        padding-left: var(--ep-sidebar-w);
    }

    body.menu-collapse footer.page-footer {
        padding-left: 64px;
    }
}

footer.page-footer .footer-copyright {
    background: transparent !important;
    color: var(--ep-muted) !important;
    padding: 14px 28px;
    min-height: 0;
    line-height: 1.5;
}

footer.page-footer .footer-copyright .container {
    width: 100%;
    max-width: none;
}

footer.page-footer a {
    color: var(--ep-muted);
    font-weight: 600;
}

#toTop {
    background: var(--ep-primary) !important;
    box-shadow: none !important;
}

/* ---------- Badge lembut (dipakai di beranda & halaman lain) ---------- */
.ep-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.ep-badge.success { background: var(--ep-success-soft); color: #1c6c09; border-color: #bee8b4; }
.ep-badge.warning { background: var(--ep-warning-soft); color: #bc3803; border-color: #ffcc85; }
.ep-badge.danger  { background: var(--ep-danger-soft);  color: #b81800; border-color: #fabcb3; }
.ep-badge.primary { background: var(--ep-primary-soft); color: var(--ep-primary-text); border-color: var(--ep-primary-border); }

.ep-page-sub {
    margin: 8px 0 0;
    color: var(--ep-muted);
    font-size: 1rem;
    font-weight: 600;
}

/* Jika select DataTables sempat diubah Materialize, sembunyikan versi Materialize-nya */
.dataTables_length .select-wrapper input.select-dropdown,
.dataTables_length .select-wrapper .caret,
.dataTables_length .select-wrapper ul.dropdown-content {
    display: none !important;
}

.dataTables_length .select-wrapper {
    display: inline-block;
}

.dataTables_length .select-wrapper select,
.dataTables_length select {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: 34px !important;
    width: auto !important;
}

.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* DataTables: "Tampilkan" di kiri, kotak cari bulat di kanan (menimpa custom.css) */
.dataTables_wrapper .dataTables_length label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ep-muted);
}

.dataTables_wrapper .dataTables_length select {
    margin-left: 8px;
    background: var(--ep-surface) !important;
    color: var(--ep-heading);
    font-weight: 700;
}

.dataTables_wrapper .dataTables_filter {
    width: auto;
    float: right;
}

.dataTables_wrapper .dataTables_filter label {
    width: auto;
    padding-left: 0;
    position: relative;
}

.dataTables_wrapper .dataTables_filter label:before {
    content: "search";
    font-family: "Material Icons";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--ep-muted-2);
    pointer-events: none;
}

#main .dataTables_wrapper .dataTables_filter label input,
#main .section-data-tables .dataTables_wrapper .dataTables_filter#page-length-option_filter label input {
    width: 320px;
    max-width: 100%;
    height: 34px;
    background: var(--ep-surface) !important;
    border: 1px solid var(--ep-border) !important;
    border-radius: 999px !important;
    padding: 0 14px 0 38px !important;
    font-size: 0.8rem !important;
    font-weight: 600;
    color: var(--ep-heading);
    margin: 0 !important;
    box-sizing: border-box;
    box-shadow: none !important;
}

#main .dataTables_wrapper .dataTables_filter label input:focus {
    border-color: var(--ep-primary) !important;
}

.dataTables_filter ::placeholder {
    color: var(--ep-muted-2);
}

table thead {
    background: transparent;
}

@media only screen and (max-width: 600px) {
    .dataTables_wrapper .dataTables_filter {
        float: none;
        width: 100%;
    }

    #main .dataTables_wrapper .dataTables_filter label,
    #main .dataTables_wrapper .dataTables_filter label input {
        width: 100%;
    }
}

/* Aksen garis atas warna-warni di card lama -> border tipis seragam */
.card[style*="border-top"] {
    border-top: 1px solid var(--ep-border-soft) !important;
}

/* Card lama berlatar gradasi -> permukaan putih */
.card[class*="gradient-45deg"]:not(.card-alert),
.card .card-content[class*="gradient-45deg"] {
    background: var(--ep-surface) !important;
}

/* Tombol ciutkan menu: tema lama mengganti teks ikon (radio_button_*) untuk menyimpan status,
   jadi teksnya dibiarkan dan yang ditampilkan selalu ikon "menu" */
.brand-sidebar .logo-wrapper .navbar-toggler i.material-icons {
    font-size: 0 !important;
}

.brand-sidebar .logo-wrapper .navbar-toggler i.material-icons:before {
    content: "menu";
    font-size: 20px;
}

.ep-inner-box {
    background: var(--ep-surface);
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
}

/* Header tabel berwarna (blue/green/cyan lighten-5, gradasi) -> netral */
table thead[class*="lighten-5"],
table thead[class*="gradient-45deg"] {
    background: var(--ep-bg) !important;
}

table thead[class*="gradient-45deg"] th {
    color: var(--ep-heading) !important;
}

/* Alert (card-alert) gaya Phoenix: latar lembut, teks gelap */
.card.card-alert {
    border-radius: var(--ep-radius) !important;
}

.card.card-alert.orange,
.card.card-alert[class*="amber"] {
    background: var(--ep-warning-soft) !important;
    border: 1px solid #ffcc85 !important;
}

.card.card-alert.cyan,
.card.card-alert.cyan.lighten-5 {
    background: var(--ep-info-soft) !important;
    border: 1px solid #96d9ff !important;
}

.card.card-alert .card-content {
    padding: 16px 20px;
}

.card.card-alert .card-content,
.card.card-alert .card-content.white-text,
.card.card-alert .card-title,
.card.card-alert .card-title.white-text,
.card.card-alert p {
    color: #3e465b !important;
}

.card.card-alert .card-title i.material-icons {
    color: var(--ep-warning);
}

.card.card-alert.cyan .card-title i.material-icons {
    color: var(--ep-info);
}

/* Chip bergradasi (mis. nama kegiatan strategis) -> badge lembut */
.chip[class*="gradient-45deg"] {
    background: var(--ep-primary-soft) !important;
    color: var(--ep-primary-text) !important;
    font-weight: 600;
    font-size: 0.8rem;
    height: auto;
    line-height: 1.5;
    padding: 4px 12px;
    border-radius: 6px;
    white-space: normal;
}

.chip[class*="gradient-45deg"] img {
    height: 18px;
    width: 18px;
    margin: 0 6px 0 -4px;
    vertical-align: middle;
}

table.table-adr1 td [class*="-text"],
table.table-adr1 td[class*="-text"] {
    color: var(--ep-heading) !important;
    font-weight: 600;
}

/* Tautan di tabel info (dulu kuning di atas gradasi) */
a.text-link1,
table.table-adr1 a.text-link1 {
    color: var(--ep-primary) !important;
    font-weight: 600;
}

a.text-link1:hover {
    text-decoration: underline;
}

/* .container di dalam .col: beri ruang untuk margin negatif .row agar tidak muncul scroll horizontal */
#main .col > .container {
    width: 100%;
    max-width: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
}

/* Hilangkan spasi teks "Cari:" agar ikon tepat di dalam kotak cari */
.dataTables_wrapper .dataTables_filter label {
    font-size: 0;
}

/* ==========================================================================
   Sentuhan warna daerah (biru utama, biru tua, oranye aksen) di halaman dalam
   ========================================================================== */

/* Garis aksen di atas topbar (tanpa menambah tinggi) */
nav.navbar-main,
.navbar .navbar-main,
.brand-sidebar,
.ep-topbar-standalone {
    box-shadow: inset 0 3px 0 var(--ep-accent) !important;
}

/* Menu aktif: latar biru lembut + penanda aksen di kiri */
.sidenav li a.active.gradient-45deg-light-blue-cyan,
.sidenav-active-square .sidenav li:not(.open) > a.active,
.sidenav-active-square .sidenav li > a.active {
    box-shadow: inset 3px 0 0 var(--ep-accent) !important;
}

/* Judul halaman: garis aksen pendek di bawahnya */
.ep-page-header .ep-page-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--ep-accent);
    margin-top: 10px;
}

/* Judul card & seksi: penanda aksen di kiri */
.card:not(.card-alert) .card-title::before,
.ep-section-title::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--ep-accent);
    margin-right: 8px;
    vertical-align: -2px;
}

.card .card-title {
    gap: 2px 0;
}

.card .card-title > i.material-icons {
    margin-right: 6px !important;
}

.ep-section-title::before {
    height: 22px;
    margin-right: 10px;
}

/* Tombol berwarna oranye/peringatan lama mengikuti warna aksen */
.btn.orange,
.btn.btn-warning,
.btn.gradient-45deg-amber-amber,
.btn-floating.gradient-45deg-amber-amber {
    background: var(--ep-accent) !important;
}

.btn.orange:hover,
.btn.btn-warning:hover {
    background: var(--ep-accent-hover) !important;
}

/* Tombol/latar biru tua lama mengikuti warna gelap */
.btn.indigo,
.btn.gradient-45deg-indigo-blue,
.btn.gradient-45deg-indigo-purple {
    background: var(--ep-dark) !important;
}

/* Kepala dropdown profil: pita biru tua */
#profile-dropdown .ep-profile-head {
    background: linear-gradient(120deg, var(--ep-dark), color-mix(in srgb, var(--ep-dark) 55%, var(--ep-primary)));
    margin: -8px 0 0;
    padding-top: 18px;
    border-radius: var(--ep-radius) var(--ep-radius) 0 0;
}

#profile-dropdown .ep-profile-head strong {
    color: #fff;
}

#profile-dropdown .ep-profile-head span {
    color: var(--ep-accent-light);
}

#profile-dropdown .ep-profile-head img {
    border: 2px solid #fff;
}

/* Footer halaman dalam: garis aksen tipis */
footer.page-footer {
    border-top: 2px solid var(--ep-accent) !important;
}

/* Tabel DataTables: izinkan teks panjang (nama program/kegiatan) pindah baris agar tabel
   muat di layar tanpa scroll horizontal. Kode rekening & angka tidak berspasi, jadi tetap utuh. */
#main .section-data-tables .dataTables_wrapper table.dataTable th,
#main .section-data-tables .dataTables_wrapper table.dataTable td,
#main .section-data-tables .dataTables_wrapper table.dataTable tbody th,
#main .section-data-tables .dataTables_wrapper table.dataTable tbody td,
#main table.dataTable tbody td,
#main table.dataTable thead th {
    white-space: normal;
}

#main table.dataTable tbody td {
    line-height: 1.45;
    vertical-align: middle;
}


/* Legenda warna tabel Program */
.ep-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 0;
    padding: 10px 14px;
    list-style: none;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ep-text);
}

.ep-legenda li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ep-legenda .ep-legenda-judul {
    color: var(--ep-muted);
    font-weight: 700;
}

.ep-legenda-kotak {
    width: 28px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .12);
    display: inline-block;
}

/* Subkegiatan: putih & abu-abu muda bergantian (belang baris DataTables) */
.ep-legenda-kotak.ep-legenda-sub {
    background: linear-gradient(180deg, #ffffff 50%, #f9f9f9 50%);
}

/* Legenda di baris kontrol DataTables: sejajar dengan "Tampilkan" dan kotak cari */
.ep-legenda.di-kontrol {
    float: left;
    margin: 0 0 0 24px;
    padding: 0 14px;
    height: 34px;
    gap: 6px 16px;
}

@media only screen and (max-width: 1100px) {
    .ep-legenda.di-kontrol {
        float: none;
        clear: both;
        height: auto;
        padding: 8px 12px;
        margin: 8px 0 12px;
    }
}

/* ==========================================================================
   Modal & form gaya Phoenix (dipakai mis. modal Tambah/Edit Program)
   ========================================================================== */
.modal.ep-modal {
    width: 92%;
    max-width: 680px;
    max-height: 90vh;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    flex-direction: column;
}

/* Hanya saat terbuka; saat tertutup Materialize tetap menyembunyikannya */
.modal.ep-modal.open {
    display: flex !important;
}

.ep-modal > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 90vh;
}

.ep-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--ep-border-soft);
    box-shadow: inset 0 3px 0 var(--ep-accent);
}

.ep-modal-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ep-heading);
}

.ep-modal-title i.material-icons {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ep-primary-soft);
    color: var(--ep-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ep-modal-sub {
    margin: 6px 0 0 46px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ep-muted);
}

.ep-modal-close {
    width: 34px;
    height: 34px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ep-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ep-modal-close:hover {
    background: var(--ep-hover);
    color: var(--ep-heading);
}

.ep-modal-body {
    padding: 20px 24px 8px;
    overflow-y: auto;
}

.ep-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--ep-border-soft);
    background: var(--ep-bg);
}

/* Field */
.ep-form .ep-field {
    margin-bottom: 18px;
    min-width: 0;
}

.ep-form .ep-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ep-form .ep-label {
    display: block;
    position: static;
    transform: none;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-form .ep-wajib {
    color: var(--ep-danger);
}

.ep-form .ep-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--ep-muted-2);
}

.ep-form input.ep-input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    background: var(--ep-surface);
    font-family: var(--ep-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ep-heading);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.ep-form input.ep-input:focus {
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-primary) 15%, transparent);
}

.ep-form input.ep-input[readonly] {
    background: var(--ep-bg);
    color: var(--ep-text);
    cursor: default;
}

.ep-form input.ep-input::placeholder {
    color: var(--ep-muted-2);
    font-weight: 400;
}

/* Rp + input */
.ep-input-group {
    display: flex;
    align-items: stretch;
}

.ep-input-group .ep-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--ep-border);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: var(--ep-bg);
    color: var(--ep-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.ep-input-group input.ep-input {
    border-radius: 0 6px 6px 0;
    text-align: right;
}

/* Pilihan berbentuk kartu (radio) */
.ep-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ep-choice {
    display: block;
    cursor: pointer;
}

.ep-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ep-choice input[type="radio"] + span {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: auto !important;
    padding: 10px 12px !important;
    border: 1px solid var(--ep-border);
    border-radius: 8px;
    font-size: 0.85rem !important;
    font-weight: 600;
    color: var(--ep-text) !important;
    line-height: 1.3 !important;
    transition: border-color .15s, background .15s;
}

/* Lingkaran radio bawaan Materialize disembunyikan, diganti ikon */
.ep-choice input[type="radio"] + span:before,
.ep-choice input[type="radio"] + span:after {
    display: none !important;
}

.ep-choice input[type="radio"] + span i.material-icons {
    font-size: 20px;
    color: var(--ep-muted-2);
}

.ep-choice input[type="radio"]:checked + span {
    border-color: var(--ep-primary);
    background: var(--ep-primary-soft);
    color: var(--ep-primary-text) !important;
}

.ep-choice input[type="radio"]:checked + span i.material-icons {
    color: var(--ep-primary);
    font-size: 0;
}

.ep-choice input[type="radio"]:checked + span i.material-icons:before {
    content: "radio_button_checked";
    font-size: 20px;
}

.ep-choice input[type="radio"]:focus-visible + span {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-primary) 20%, transparent);
}

/* Select2 di dalam form */
.ep-form .select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid var(--ep-border) !important;
    border-radius: 6px !important;
    background: var(--ep-surface) !important;
    box-shadow: none !important;
}

.ep-form .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
    padding-right: 32px !important;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ep-heading) !important;
}

.ep-form .select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--ep-muted-2) !important;
    font-weight: 400;
}

.ep-form .select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 6px !important;
}

.ep-form .select2-container--open .select2-selection--single,
.ep-form .select2-container--focus .select2-selection--single {
    border-color: var(--ep-primary) !important;
}

/* Tombol modal */
.ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: var(--ep-font);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ep-btn i.material-icons {
    font-size: 18px;
}

.ep-btn-primary {
    background: var(--ep-primary);
    color: #fff;
}

.ep-btn-primary:hover {
    background: var(--ep-primary-hover);
}

.ep-btn-light {
    background: var(--ep-surface);
    border-color: var(--ep-border);
    color: var(--ep-heading);
}

.ep-btn-light:hover {
    background: var(--ep-hover);
}

@media only screen and (max-width: 600px) {
    .ep-form .ep-field-row,
    .ep-choices {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ep-form .ep-field-row {
        gap: 0;
    }
}

/* Kotak cari di dropdown Select2 (di atas daftar hasil) */
.select2-container .select2-search--dropdown {
    padding: 8px;
}

.select2-container .select2-search--dropdown .select2-search__field {
    height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box;
    border: 1px solid var(--ep-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: var(--ep-font);
    font-size: 0.85rem !important;
}

.select2-container .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ep-primary) !important;
}

.select2-container .select2-dropdown {
    border: 1px solid var(--ep-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px -4px rgba(36, 40, 46, .12);
    overflow: hidden;
}

.select2-container .select2-results__option {
    font-size: 0.85rem;
    padding: 8px 12px;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
    background: var(--ep-primary-soft) !important;
    color: var(--ep-primary-text) !important;
}

/* ==========================================================================
   Tombol aksi per baris tabel Program (langsung tampil, tanpa menu "⋯")
   ========================================================================== */
.ep-aksi {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
}

.ep-aksi-btn {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 7px;
    border: 1px solid var(--ep-border);
    background: var(--ep-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
}

.ep-aksi-btn i.material-icons {
    font-size: 17px;
    line-height: 1;
}

.ep-aksi-btn.lihat i.material-icons { color: var(--ep-primary); }
.ep-aksi-btn.tambah i.material-icons,
.ep-aksi-btn.rincian i.material-icons { color: var(--ep-success); }
.ep-aksi-btn.ubah i.material-icons { color: var(--ep-accent); }
.ep-aksi-btn.hapus i.material-icons { color: var(--ep-danger); }

.ep-aksi-btn.lihat:hover { border-color: var(--ep-primary); background: var(--ep-primary-soft); }
.ep-aksi-btn.tambah:hover,
.ep-aksi-btn.rincian:hover { border-color: var(--ep-success); background: var(--ep-success-soft); }
.ep-aksi-btn.ubah:hover { border-color: var(--ep-accent); background: var(--ep-accent-soft); }
.ep-aksi-btn.hapus:hover { border-color: var(--ep-danger); background: var(--ep-danger-soft); }

.ep-aksi-btn:focus-visible {
    outline: 2px solid var(--ep-primary);
    outline-offset: 1px;
}

/* Deretan tombol aksi (ikon) di tabel: kotak putih berbingkai, ikon berwarna sesuai fungsi */
table td .btn-floating.tooltipped {
    width: 32px;
    height: 32px;
    margin: 2px 1px !important;
    border-radius: 8px;
    background: var(--ep-surface) !important;
    border: 1px solid var(--ep-border);
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: border-color .15s, background .15s;
}

table td .btn-floating.tooltipped i.material-icons {
    font-size: 18px;
    line-height: 1;
    width: auto;
    color: var(--ep-primary);
}

/* buka/lihat: biru utama */
table td .btn-floating.tooltipped.gradient-45deg-light-blue-cyan:hover {
    border-color: var(--ep-primary);
    background: var(--ep-primary-soft) !important;
}

/* tambah: hijau */
table td .btn-floating.tooltipped.gradient-45deg-green-teal i.material-icons {
    color: var(--ep-success);
}

table td .btn-floating.tooltipped.gradient-45deg-green-teal:hover {
    border-color: var(--ep-success);
    background: var(--ep-success-soft) !important;
}

/* ubah: aksen (oranye) */
table td .btn-floating.tooltipped.gradient-45deg-amber-amber i.material-icons {
    color: var(--ep-accent);
}

table td .btn-floating.tooltipped.gradient-45deg-amber-amber:hover {
    border-color: var(--ep-accent);
    background: var(--ep-accent-soft) !important;
}

/* hapus: merah */
table td .btn-floating.tooltipped.gradient-45deg-purple-deep-orange i.material-icons,
table td .btn-floating.tooltipped[onclick*="initDelete"] i.material-icons {
    color: var(--ep-danger);
}

table td .btn-floating.tooltipped.gradient-45deg-purple-deep-orange:hover,
table td .btn-floating.tooltipped[onclick*="initDelete"]:hover {
    border-color: var(--ep-danger);
    background: var(--ep-danger-soft) !important;
}

/* Rata kanan agar tombol Ubah/Hapus sejajar antarbaris meski jumlah tombol berbeda */
table td:has(> .ep-aksi) {
    text-align: right !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   Form halaman penuh (mis. Tambah Kegiatan) — memakai .ep-form dari modal
   ========================================================================== */
.card.ep-form-page {
    max-width: 1080px;
    margin: 0 auto 24px;
    overflow: visible;
}

.ep-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px 16px;
    border-bottom: 1px solid var(--ep-border-soft);
    box-shadow: inset 0 3px 0 var(--ep-accent);
    border-radius: var(--ep-radius) var(--ep-radius) 0 0;
}

.ep-form-body {
    padding: 24px 28px 28px;
}

.ep-form-page .ep-modal-foot {
    border-radius: 0 0 var(--ep-radius) var(--ep-radius);
    padding: 16px 28px;
}

/* Kartu info sisa anggaran */
.ep-info-anggaran {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 18px;
    margin-bottom: 28px;
    border: 1px solid color-mix(in srgb, var(--ep-accent) 30%, #fff);
    border-radius: var(--ep-radius);
    background: var(--ep-accent-soft);
}

.ep-info-ikon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ep-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ep-info-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ep-accent-text);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ep-info-anggaran strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ep-heading);
}

.ep-info-anggaran p {
    margin: 0 0 0 auto;
    font-size: 0.8rem;
    color: var(--ep-muted);
}

/* Seksi form */
.ep-form-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px dashed var(--ep-border);
}

.ep-form-section.mb-0 {
    border-bottom: 0;
    padding-bottom: 0;
}

.ep-form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ep-heading);
}

.ep-form-section-title::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--ep-accent);
}

.ep-form .ep-field-row.ep-field-row-3 {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr);
}

.ep-form .ep-field.mb-0 {
    margin-bottom: 0;
}

.ep-form select.ep-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    background-color: var(--ep-bg);
    font-family: var(--ep-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ep-heading);
}

.ep-form textarea.ep-textarea {
    height: auto;
    min-height: 84px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

/* Kartu sakelar Proyek Strategis */
.ep-toggle-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background: var(--ep-surface);
    transition: border-color .15s, background .15s;
}

.ep-toggle-card:has(input:checked) {
    border-color: var(--ep-primary);
    background: var(--ep-primary-soft);
}

.ep-toggle-ikon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ep-dark) 10%, #fff);
    color: var(--ep-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ep-toggle-card:has(input:checked) .ep-toggle-ikon {
    background: var(--ep-primary);
    color: #fff;
}

.ep-toggle-teks {
    flex: 1;
    min-width: 0;
}

.ep-toggle-teks .ep-form-section-title::before {
    display: none;
}

.ep-toggle-teks p {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--ep-muted);
}

/* Sakelar on/off */
.ep-switch {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    cursor: pointer;
}

.ep-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ep-switch input[type="checkbox"] + .ep-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--ep-border);
    transition: background .2s;
}

/* Materialize menggambar kotak centang lewat span+::before/::after; nonaktifkan */
.ep-switch input[type="checkbox"] + .ep-switch-track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transform: none;
    transition: left .2s;
}

.ep-switch input[type="checkbox"] + .ep-switch-track::after {
    display: none;
}

.ep-switch input[type="checkbox"]:checked + .ep-switch-track {
    background: var(--ep-primary);
}

.ep-switch input[type="checkbox"]:checked + .ep-switch-track::before {
    left: 23px;
    top: 3px;
    width: 20px;
    height: 20px;
    border: 0;
    transform: none;
}

.ep-switch input[type="checkbox"]:focus-visible + .ep-switch-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-primary) 25%, transparent);
}

/* Panel proyek strategis */
.ep-strategis-panel {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--ep-border-soft);
    border-left: 3px solid var(--ep-primary);
    border-radius: var(--ep-radius);
    background: var(--ep-bg);
}

.ep-editor {
    border-radius: 6px;
    background: var(--ep-surface);
}

.ep-editor .ql-toolbar.ql-snow {
    border: 1px solid var(--ep-border);
    border-radius: 6px 6px 0 0;
    background: var(--ep-bg);
}

.ep-editor .ql-container.ql-snow {
    border: 1px solid var(--ep-border);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    min-height: 160px;
    font-family: var(--ep-font);
    font-size: 0.9rem;
}

.ep-media-box {
    padding: 14px 16px;
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    background: var(--ep-surface);
    min-width: 0;
}

.ep-media-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.ep-btn.ep-btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 0.78rem;
}

/* Blok bulanan (anggaran kas, realisasi, capaian) yang muncul di mode proyek strategis */
.ep-blok-bulanan {
    margin: 0 -0.75rem;
}

@media only screen and (max-width: 992px) {
    .ep-form .ep-field-row.ep-field-row-3 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ep-info-anggaran p {
        margin-left: 0;
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 600px) {
    .ep-form-head,
    .ep-form-body,
    .ep-form-page .ep-modal-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ep-form .ep-field-row.ep-field-row-3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

.modal.ep-modal.ep-modal-sm {
    max-width: 480px;
}

.ep-form input[type="file"].ep-file {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--ep-border);
    border-radius: 6px;
    background: var(--ep-bg);
    font-family: var(--ep-font);
    font-size: 0.85rem;
    box-sizing: border-box;
}

.ep-form input[type="file"].ep-file::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    background: var(--ep-surface);
    font-family: var(--ep-font);
    font-weight: 700;
    color: var(--ep-heading);
    cursor: pointer;
}

/* ==========================================================================
   Dialog SweetAlert (konfirmasi hapus, sukses, peringatan, gagal)
   ========================================================================== */
.swal-overlay {
    background-color: rgba(20, 24, 36, .45);
}

.swal-modal {
    width: 420px;
    max-width: calc(100% - 32px);
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--ep-border-soft);
    box-shadow: 0 24px 48px -12px rgba(20, 24, 36, .35);
    font-family: var(--ep-font);
    overflow: hidden;
}

.swal-icon {
    margin: 28px auto 4px;
}

/* Ikon peringatan: lingkaran merah lembut dengan tanda seru */
.swal-icon--warning {
    border-color: color-mix(in srgb, var(--ep-danger) 35%, #fff);
    background: var(--ep-danger-soft);
    animation: none;
}

.swal-icon--warning__body,
.swal-icon--warning__dot {
    background-color: var(--ep-danger);
    animation: none;
}


.swal-icon--success {
    border-color: color-mix(in srgb, var(--ep-success) 40%, #fff);
}

.swal-icon--success__line {
    background-color: var(--ep-success);
}

.swal-icon--success__ring {
    border-color: color-mix(in srgb, var(--ep-success) 25%, transparent);
}

.swal-icon--success:after,
.swal-icon--success:before,
.swal-icon--success__hide-corners {
    background: var(--ep-surface);
}

.swal-icon--error {
    border-color: color-mix(in srgb, var(--ep-danger) 35%, #fff);
}

.swal-icon--error__line {
    background-color: var(--ep-danger);
}

.swal-title {
    padding: 12px 24px 0;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ep-heading);
}

.swal-title:not(:last-child) {
    margin-bottom: 6px;
}

.swal-text {
    display: block;
    margin: 0 auto;
    padding: 0 28px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ep-muted);
}

.swal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
    padding: 14px 20px;
    border-top: 1px solid var(--ep-border-soft);
    background: var(--ep-bg);
    text-align: right;
}

.swal-button-container {
    margin: 0;
}

.swal-button {
    height: 38px;
    padding: 0 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: var(--ep-font);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: none !important;
    background-color: var(--ep-primary);
    color: #fff;
}

.swal-button:not([disabled]):hover {
    background-color: var(--ep-primary-hover);
}

.swal-button:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-primary) 25%, transparent) !important;
}

.swal-button--cancel {
    background-color: var(--ep-surface);
    border-color: var(--ep-border);
    color: var(--ep-heading);
}

.swal-button--cancel:not([disabled]):hover {
    background-color: var(--ep-hover);
}

.swal-button--cancel:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-muted) 20%, transparent) !important;
}

/* Tombol hapus (dangerMode) */
.swal-button--delete,
.swal-button--danger {
    background-color: var(--ep-danger);
}

.swal-button--delete:not([disabled]):hover,
.swal-button--danger:not([disabled]):hover {
    background-color: color-mix(in srgb, var(--ep-danger) 85%, #000);
}

.swal-button--delete:focus,
.swal-button--danger:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-danger) 25%, transparent) !important;
}

.ep-form textarea.ep-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    background: var(--ep-surface);
    font-family: var(--ep-font);
    font-size: 0.875rem;
    color: var(--ep-heading);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.ep-form textarea.ep-input:focus {
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-primary) 15%, transparent);
}

.ep-form textarea.ep-input::placeholder {
    color: var(--ep-muted-2);
}

/* Field bulanan (anggaran kas, realisasi, fisik, capaian) di form kegiatan:
   label di atas, input berbingkai — tanpa mengubah markup input-field Materialize */
.ep-blok-bulanan .card {
    margin: 0 0 16px;
}

.ep-blok-bulanan .card .card-action {
    background: var(--ep-bg) !important;
}

.ep-blok-bulanan .card-title,
.ep-blok-bulanan .card-title[class*="-text"] {
    color: var(--ep-heading) !important;
}

.ep-blok-bulanan .input-field {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 0 14px;
}

.ep-blok-bulanan .input-field > label {
    position: static;
    transform: none !important;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ep-muted);
}

.ep-blok-bulanan .input-field > input[type="text"] {
    height: 36px;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    background: var(--ep-surface);
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
}

.ep-blok-bulanan .input-field > input[type="text"]:focus {
    border-color: var(--ep-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-primary) 15%, transparent) !important;
}

/* Materialize memberi semua button:focus latar #ff548e (merah muda).
   Pertahankan warna asli tombol kita saat fokus. */
.swal-footer button.swal-button:focus {
    background-color: var(--ep-primary);
}

.swal-footer button.swal-button.swal-button--cancel,
.swal-footer button.swal-button.swal-button--cancel:focus {
    background-color: var(--ep-surface);
}

.swal-footer button.swal-button.swal-button--cancel:not([disabled]):hover {
    background-color: var(--ep-hover);
}

.swal-footer button.swal-button.swal-button--delete:focus,
.swal-footer button.swal-button.swal-button--danger:focus {
    background-color: var(--ep-danger);
}

button.ep-btn.ep-btn-primary:focus {
    background-color: var(--ep-primary);
}

button.ep-btn.ep-btn-light:focus {
    background-color: var(--ep-surface);
}

button.ep-btn:focus-visible,
a.ep-btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-primary) 25%, transparent);
    outline: none;
}

button.ep-btn-icon:focus {
    background-color: var(--ep-primary);
}

button.ep-modal-close:focus {
    background-color: var(--ep-hover);
}

/* Tombol "⋯" (aksi lainnya) dan menunya */
.ep-aksi-btn.lainnya i.material-icons {
    color: var(--ep-muted);
    font-size: 20px;
}

.ep-aksi-btn.lainnya:hover,
.ep-aksi-btn.lainnya.active {
    border-color: var(--ep-primary);
    background: var(--ep-primary-soft);
}

.ep-aksi-btn.lainnya:hover i.material-icons,
.ep-aksi-btn.lainnya.active i.material-icons {
    color: var(--ep-primary);
}

.dropdown-content.ep-aksi-menu {
    width: 220px !important;
    min-width: 220px;
    padding: 6px 0;
    border: 1px solid var(--ep-border);
    border-radius: 8px;
    background: var(--ep-surface);
    box-shadow: 0 10px 28px -6px rgba(36, 40, 46, .18);
}

.dropdown-content.ep-aksi-menu li {
    min-height: 0;
}

.dropdown-content.ep-aksi-menu li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--ep-heading) !important;
}

.dropdown-content.ep-aksi-menu li > a > i.material-icons {
    margin: 0 !important;
    width: 20px;
    height: auto;
    line-height: 1;
    font-size: 20px;
    color: var(--ep-muted);
}

.dropdown-content.ep-aksi-menu li:hover,
.dropdown-content.ep-aksi-menu li > a:hover {
    background: var(--ep-hover);
}

.dropdown-content.ep-aksi-menu li > a:hover > i.material-icons {
    color: var(--ep-primary);
}

/* Hapus: merah, dipisah garis di bagian bawah menu */
.dropdown-content.ep-aksi-menu li > a[onclick*="initDelete"],
.dropdown-content.ep-aksi-menu li > a[onclick*="initDelete"] > i.material-icons {
    color: var(--ep-danger) !important;
}

.dropdown-content.ep-aksi-menu li:has(> a[onclick*="initDelete"]) {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--ep-border-soft);
}

.dropdown-content.ep-aksi-menu li:has(> a[onclick*="initDelete"]):hover {
    background: var(--ep-danger-soft);
}

.ep-modal-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--ep-primary-soft);
    font-size: 0.78rem;
    color: var(--ep-primary-text);
    line-height: 1.5;
}

.ep-modal-note i.material-icons {
    font-size: 18px;
    color: var(--ep-primary);
}

.ep-modal-note a {
    font-weight: 700;
    text-decoration: underline;
}

.modal.ep-modal .ep-field-row.ep-field-row-3 {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr);
}

.modal.ep-modal {
    max-width: 760px;
}

.modal.ep-modal.ep-modal-sm {
    max-width: 480px;
}

#modal_add.ep-modal {
    max-width: 680px;
}

@media only screen and (max-width: 600px) {
    .modal.ep-modal .ep-field-row.ep-field-row-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Di dalam seksi berjudul, judul kartu lama ("Persentase Realisasi Fisik", "Data PPHP...") tidak perlu ditampilkan lagi */
.ep-form-section .ep-blok-bulanan > .col > .card > .card-action {
    display: none;
}

.ep-form-section .ep-blok-bulanan > .col > .card {
    border: 0 !important;
    background: transparent;
    margin: 0;
}

.ep-form-section .ep-blok-bulanan > .col > .card > .card-content {
    padding: 0 !important;
}

/* Input yang dinonaktifkan (hanya tampil) */
.ep-blok-bulanan .input-field > input[disabled] {
    background: var(--ep-bg) !important;
    color: var(--ep-text) !important;
    border-style: dashed !important;
}

.ep-hint.mt-0 {
    margin-top: 0;
}

/* ==========================================================================
   Halaman detail (Lihat/Monitoring Kegiatan & Subkegiatan) — hanya tampilan
   ========================================================================== */
.ep-detail .ep-detail-body {
    padding: 24px 28px 8px !important;
}

/* Kolom hanya-baca: label di atas, nilai dalam kotak abu-abu */
.ep-detail .input-field {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 0 14px;
}

.ep-detail .input-field > label {
    position: static;
    transform: none !important;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ep-muted);
}

.ep-detail .input-field > input:not([type="checkbox"]):not([type="radio"]),
.ep-detail .input-field > textarea,
.ep-detail .input-field .select-wrapper input.select-dropdown {
    height: 38px;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--ep-border-soft) !important;
    border-radius: 6px;
    background: var(--ep-bg) !important;
    box-shadow: none !important;
    color: var(--ep-heading) !important;
    font-size: 0.875rem;
    font-weight: 600;
}

.ep-detail .input-field > input.decimal,
.ep-detail .ep-blok-bulanan .input-field > input {
    text-align: right;
}

.ep-detail .input-field .select-wrapper {
    width: 100%;
}

.ep-detail .input-field .select-wrapper .caret {
    display: none;
}

/* Grid baris bersarang lama (row di dalam input-field) */
.ep-detail .input-field > .row {
    margin: 0;
}

.ep-detail .input-field > .row > .input-field {
    padding: 0;
}

/* Kartu "Info Tambahan" */
.ep-detail .card.cyan.lighten-5 {
    background: var(--ep-surface) !important;
    border: 1px solid var(--ep-border-soft) !important;
}

.ep-detail .card.cyan.lighten-5 table th {
    color: var(--ep-muted);
    font-size: 0.72rem;
}

.ep-detail .card.cyan.lighten-5 table td {
    font-weight: 700;
    color: var(--ep-heading);
}

/* Blok bulanan & panel lain di halaman detail */
.ep-detail .card .card .card-action {
    background: var(--ep-bg) !important;
}

.ep-detail .card .card .card-title,
.ep-detail .card .card .card-title[class*="-text"] {
    color: var(--ep-heading) !important;
}

.ep-detail .card .card .card-action.blue:not(.lighten-5) {
    background: var(--ep-primary-soft) !important;
}

.ep-detail .card .card .card-content .input-field > input {
    text-align: right;
}

/* Ringkasan bulanan (komponen _komponen/ringkasan_bulanan) */
.ep-ringkasan {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ep-ringkasan-blok {
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    background: var(--ep-surface);
    overflow: hidden;
}

.ep-ringkasan-judul {
    margin: 0;
    padding: 10px 16px;
    background: var(--ep-bg);
    border-bottom: 1px solid var(--ep-border-soft);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ep-heading);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ep-ringkasan-judul::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--ep-accent);
}

.ep-ringkasan-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ep-ringkasan-sel {
    padding: 10px 14px;
    border-right: 1px solid var(--ep-border-soft);
    border-bottom: 1px solid var(--ep-border-soft);
    min-width: 0;
}

.ep-ringkasan-sel:nth-child(6n) {
    border-right: 0;
}

.ep-ringkasan-sel:nth-last-child(-n + 6) {
    border-bottom: 0;
}

.ep-ringkasan-bulan {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ep-muted);
}

.ep-ringkasan-nilai {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ep-heading);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-ringkasan-nilai.belum {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ep-muted-2);
    font-style: italic;
}

@media only screen and (max-width: 992px) {
    .ep-ringkasan-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ep-ringkasan-sel:nth-child(6n) {
        border-right: 1px solid var(--ep-border-soft);
    }

    .ep-ringkasan-sel:nth-child(3n) {
        border-right: 0;
    }

    .ep-ringkasan-sel:nth-last-child(-n + 6) {
        border-bottom: 1px solid var(--ep-border-soft);
    }

    .ep-ringkasan-sel:nth-last-child(-n + 3) {
        border-bottom: 0;
    }
}

@media only screen and (max-width: 480px) {
    .ep-ringkasan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ep-ringkasan-sel:nth-child(3n) {
        border-right: 1px solid var(--ep-border-soft);
    }

    .ep-ringkasan-sel:nth-child(2n) {
        border-right: 0;
    }

    .ep-ringkasan-sel:nth-last-child(-n + 3) {
        border-bottom: 1px solid var(--ep-border-soft);
    }

    .ep-ringkasan-sel:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

/* Nilai hanya-baca (halaman detail) dengan gaya kolom form */
.ep-form .ep-nilai {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid var(--ep-border-soft);
    border-radius: 6px;
    background: var(--ep-bg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ep-heading);
    line-height: 1.4;
}

.ep-form .ep-input-group .ep-nilai {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
    border-radius: 0 6px 6px 0;
}

.ep-form .ep-nilai.angka {
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}

.ep-form .ep-nilai.kosong {
    color: var(--ep-muted-2);
    font-weight: 400;
}

.ep-form .ep-field-row.ep-field-row-3b {
    grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1.4fr);
}

@media only screen and (max-width: 768px) {
    .ep-form .ep-field-row.ep-field-row-3b {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ==========================================================================
   Halaman Rincian Belanja (pages/rincian_belanja)
   ========================================================================== */
.card.ep-rincian {
    overflow: visible;
}

/* Kotak rekap anggaran */
.ep-rekap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ep-rekap-item {
    padding: 12px 16px;
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    background: var(--ep-bg);
    min-width: 0;
}

.ep-rekap-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ep-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ep-rekap-item strong {
    display: block;
    margin-top: 4px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ep-heading);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-rekap-item.aksen {
    border-color: color-mix(in srgb, var(--ep-accent) 30%, #fff);
    background: var(--ep-accent-soft);
}

.ep-rekap-item.aksen strong {
    color: var(--ep-accent-text);
}

.ep-rekap-item.minus {
    border-color: #fabcb3;
    background: var(--ep-danger-soft);
}

.ep-rekap-item.minus strong {
    color: #b81800;
}

.ep-rincian .ep-hint.mb-0 {
    margin-bottom: 0;
}

/* Judul daftar + tombol tambah */
.ep-rincian-judul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* Tabel rincian: tanpa scroll horizontal, teks panjang membungkus */
.ep-tabel-rincian {
    width: 100% !important;
    table-layout: auto;
}

.ep-tabel-rincian td {
    vertical-align: middle;
}

.ep-tabel-rincian td.ep-col-uraian,
.ep-tabel-rincian td.ep-col-lokasi {
    white-space: normal;
    word-break: break-word;
}

.ep-tabel-rincian td.ep-col-lokasi {
    color: var(--ep-muted);
}

.ep-tabel-rincian td.ep-col-angka {
    white-space: nowrap;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ep-heading);
}

.ep-tabel-rincian td.ep-col-target {
    white-space: nowrap;
}

.ep-tabel-rincian td.ep-col-aksi {
    width: 1%;
}

.ep-tabel-rincian tr.group td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: var(--ep-primary-soft) !important;
    border-left: 3px solid var(--ep-primary);
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-tabel-rincian .ep-kode {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-primary-border);
    color: var(--ep-primary-text);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Modal tambah/edit rincian (lebih lebar dari modal biasa) */
#modal_add.ep-modal.ep-modal-rincian {
    max-width: 920px;
}

.ep-modal-rincian .ep-form-section-title small {
    font-weight: 600;
    color: var(--ep-muted);
}

.ep-bulan-judul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ep-bulan-total {
    font-size: 0.8rem;
    color: var(--ep-muted);
    white-space: nowrap;
}

.ep-bulan-total strong {
    color: var(--ep-heading);
    font-variant-numeric: tabular-nums;
}

.ep-modal-rincian .ep-hint i.material-icons.tiny {
    font-size: 0.9rem;
    vertical-align: -2px;
}

.ep-bulan-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px 12px;
}

.ep-bulan-sel label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ep-muted);
}

.ep-bulan-sel label i.material-icons {
    font-size: 0.85rem;
    color: var(--ep-muted-2);
}

.ep-form .ep-bulan-sel input.ep-input {
    height: 36px;
    padding: 0 8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ep-form .ep-bulan-sel.terkunci input.ep-input {
    border-style: dashed;
    color: var(--ep-muted-2);
}

@media only screen and (max-width: 992px) {
    .ep-rekap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ep-bulan-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 600px) {
    .ep-rekap {
        grid-template-columns: minmax(0, 1fr);
    }

    .ep-bulan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ep-rincian-judul {
        flex-wrap: wrap;
    }

    .ep-tabel-rincian td.ep-col-target {
        white-space: normal;
    }
}

/* Ringkasan bulanan: keterangan judul & deviasi fisik */
.ep-ringkasan-judul small {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ep-muted-2);
}

.ep-ringkasan-nilai.minus {
    color: #b81800;
}

.ep-ringkasan-nilai.plus {
    color: #1c6c09;
}

.ep-teks-minus { color: #b81800; font-weight: 700; }
.ep-teks-plus { color: #1c6c09; font-weight: 700; }
.ep-bulan-sel .ep-nilai { min-height: 36px; padding: 6px 8px; }

/* Ringkasan bulanan: kepala blok seperti modal rincian belanja (judul + satuan, keterangan di kanan) */
.ep-ringkasan-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 16px;
    background: var(--ep-bg);
    border-bottom: 1px solid var(--ep-border-soft);
}

.ep-ringkasan-kepala .ep-ringkasan-judul {
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

.ep-ringkasan-kepala .ep-ringkasan-judul small {
    margin-left: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ep-muted);
}

.ep-ringkasan-ket {
    font-size: 0.75rem;
    color: var(--ep-muted);
    white-space: nowrap;
}

.ep-ringkasan-ket strong {
    color: var(--ep-heading);
    font-variant-numeric: tabular-nums;
}

/* Deviasi di dalam sel realisasi */
.ep-ringkasan-dev {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.66rem;
    color: var(--ep-muted-2);
    line-height: 1.35;
}

.ep-ringkasan-devs {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px dashed var(--ep-border-soft);
}

.ep-ringkasan-dev b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ep-ringkasan-dev b.minus { color: #b81800; }
.ep-ringkasan-dev b.plus { color: #1c6c09; }

@media only screen and (max-width: 600px) {
    .ep-ringkasan-ket {
        white-space: normal;
    }
}

.ep-bulan-dev:empty { display: none; }

.ep-ringkasan-dev {
    flex-wrap: wrap;
}

.ep-ringkasan-dev > span {
    white-space: nowrap;
}

.ep-ringkasan-dev > b {
    margin-left: auto;
}

/* Isian yang dihitung otomatis (hanya tampil) */
.ep-form input.ep-input[disabled] {
    background: var(--ep-bg);
    color: var(--ep-text);
    border-style: dashed;
    cursor: not-allowed;
}

.ep-label-ket {
    margin-left: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ep-muted-2);
}

/* ==========================================================================
   Laporan APBD (user/laporan_apbd, admin/laporan_apbd, _komponen/table_laporan_apbd)
   ========================================================================== */
.ep-btn-aksen {
    background: var(--ep-accent);
    color: #fff;
}

.ep-btn-aksen:hover {
    background: color-mix(in srgb, var(--ep-accent) 85%, #000);
    color: #fff;
}

.ep-laporan-filter {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.ep-laporan-filter-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.ep-laporan-filter-form .ep-field {
    min-width: 150px;
}

.ep-laporan-filter-form .ep-nilai {
    min-width: 90px;
}

.ep-laporan-filter-form select.ep-input {
    height: 40px;
}

.ep-laporan-filter .ep-laporan-opd {
    min-width: 320px;
}

.ep-laporan-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 10px;
}

.ep-laporan-periode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--ep-muted);
}

.ep-laporan-periode i.material-icons {
    font-size: 1rem;
    color: var(--ep-accent);
}

.ep-laporan-info .ep-legenda {
    margin: 0;
}

.ep-legenda-kotak.ep-legenda-spj {
    background: #fde2dd;
    border-color: #f4a99c;
}

.ep-laporan-kosong {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--ep-accent) 30%, #fff);
    border-radius: var(--ep-radius);
    background: var(--ep-accent-soft);
}

.ep-laporan-kosong i.material-icons {
    color: var(--ep-accent);
}

.ep-laporan-kosong p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--ep-muted);
}

/* Wadah tabel: geser ke samping di dalam kartu, header tetap terlihat saat digulir */
.ep-laporan-scroll {
    overflow: auto;
    max-height: 75vh;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
}

table.ep-laporan {
    width: 100%;
    min-width: 1500px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.72rem;
    color: var(--ep-text);
}

table.ep-laporan th,
table.ep-laporan td {
    padding: 6px 8px;
    border-right: 1px solid var(--ep-border-soft);
    border-bottom: 1px solid var(--ep-border-soft);
    vertical-align: middle;
}

table.ep-laporan thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

table.ep-laporan thead th {
    background: var(--ep-bg);
    color: var(--ep-heading);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.25;
    border-bottom-color: var(--ep-border);
}

table.ep-laporan thead tr.nomor-kolom th {
    padding: 3px 8px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ep-muted-2);
    background: var(--ep-surface);
    border-bottom: 2px solid var(--ep-accent);
}

table.ep-laporan td.angka {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

table.ep-laporan td.tengah,
table.ep-laporan td.kol-no {
    text-align: center;
}

table.ep-laporan .kol-no {
    width: 36px;
}

table.ep-laporan td.kol-kode {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ep-muted);
}

table.ep-laporan .kol-nama {
    min-width: 280px;
}

table.ep-laporan td.kol-ket {
    min-width: 120px;
}

table.ep-laporan tr.baris-program td {
    font-weight: 800;
    color: var(--ep-heading);
}

table.ep-laporan tr.baris-program td.kol-kode {
    color: var(--ep-heading);
}

table.ep-laporan tr.baris-kegiatan td {
    font-weight: 700;
    color: var(--ep-heading);
}

table.ep-laporan tr.baris-sub td.kol-nama {
    padding-left: 22px;
}

table.ep-laporan tr.baris-sub:hover td {
    background: var(--ep-hover);
}

table.ep-laporan td.spj {
    background: #fde2dd !important;
    color: #b81800;
    font-weight: 700;
}

table.ep-laporan tr.baris-jumlah td {
    background: var(--ep-bg);
    font-weight: 800;
    color: var(--ep-heading);
    border-top: 2px solid var(--ep-border);
}

table.ep-laporan tr.baris-jumlah td:first-child {
    text-align: right;
    letter-spacing: .02em;
}

table.ep-laporan tr.baris-jumlah.total td {
    background: var(--ep-primary-soft);
    color: var(--ep-primary-text);
}

table.ep-laporan tr.baris-jumlah.total td.spj {
    color: #b81800;
}

/* Laporan Rincian Belanja: subkegiatan > rekening belanja > rincian */
table.ep-laporan-belanja {
    min-width: 1200px;
}

table.ep-laporan-belanja tr.baris-subkeg td {
    font-weight: 700;
    color: var(--ep-heading);
}

table.ep-laporan-belanja tr.baris-belanja td {
    background: color-mix(in srgb, var(--ep-bg) 55%, #fff);
    font-weight: 600;
    font-style: italic;
    color: var(--ep-muted);
}

table.ep-laporan-belanja tr.baris-belanja td.kol-nama {
    padding-left: 14px;
}

table.ep-laporan-belanja tr.baris-rincian td.kol-nama {
    padding-left: 28px;
}

table.ep-laporan-belanja .kol-lokasi {
    width: 220px;
    max-width: 220px;
}

.ep-legenda-kotak.ep-legenda-bel {
    background: color-mix(in srgb, var(--ep-bg) 55%, #fff);
    border-style: dashed;
}

@media only screen and (max-width: 600px) {
    .ep-laporan-filter-form,
    .ep-laporan-filter-form .ep-field,
    .ep-laporan-filter .ep-laporan-opd {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   Halaman Profil Akun (user/user_profil)
   ========================================================================== */
.ep-akun {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto 24px;
}

.ep-akun .card {
    margin: 0;
}

.ep-akun-kartu {
    padding: 28px 24px 24px;
}

.ep-akun-identitas {
    text-align: center;
}

.ep-akun-foto {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--ep-surface);
    box-shadow: 0 0 0 1px var(--ep-border-soft), 0 6px 16px rgba(20, 24, 36, .08);
}

.ep-akun-nama {
    margin: 14px 0 2px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ep-heading);
    overflow-wrap: anywhere;
}

.ep-akun-email {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--ep-muted);
    overflow-wrap: anywhere;
}

.ep-akun-info {
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px dashed var(--ep-border);
}

.ep-akun-info > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.85rem;
}

.ep-akun-info dt {
    flex: none;
    color: var(--ep-muted);
}

.ep-akun-info dd {
    margin: 0;
    font-weight: 700;
    color: var(--ep-heading);
    text-align: right;
}

.ep-akun-upload {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--ep-border);
}

.ep-akun-pilih {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px dashed var(--ep-border);
    border-radius: 6px;
    background: var(--ep-bg);
    color: var(--ep-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.ep-akun-pilih:hover,
.ep-akun-pilih:focus-within {
    border-color: var(--ep-primary);
    color: var(--ep-primary-text);
}

.ep-akun-pilih input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ep-akun-pilih i.material-icons {
    font-size: 20px;
}

.ep-akun-pilih span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-akun-upload-btn {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

.ep-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.ep-akun-form .ep-modal-foot {
    border-radius: 0 0 var(--ep-radius) var(--ep-radius);
    padding: 16px 28px;
}

.ep-akun-cocok.ok { color: var(--ep-success); }
.ep-akun-cocok.gagal { color: var(--ep-danger); }

@media only screen and (max-width: 992px) {
    .ep-akun {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 600px) {
    .ep-akun-form .ep-form-head,
    .ep-akun-form .ep-form-body,
    .ep-akun-form .ep-modal-foot {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==========================================================================
   Halaman Proyek Strategis (pages/str)
   ========================================================================== */
.ep-str-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid var(--ep-primary-border);
    border-radius: var(--ep-radius);
    background: var(--ep-primary-soft);
}

.ep-str-intro i.material-icons {
    flex: none;
    font-size: 20px;
    color: var(--ep-accent);
}

.ep-str-intro p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ep-text);
}

.ep-tabel-str .ep-col-no {
    width: 40px;
}

.ep-tabel-str .ep-col-aksi {
    width: 1%;
    white-space: nowrap;
}

.ep-str-nama {
    display: block;
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-str-rek {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--ep-muted-2);
}

.ep-tabel-str .ep-angka {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   Validasi Laporan (admin/valid_laporan)
   ========================================================================== */
.ep-bulan-pil {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
}

.ep-bulan-pil-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background: var(--ep-surface);
    color: var(--ep-heading);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.ep-bulan-pil-item:hover {
    border-color: var(--ep-primary);
    background: var(--ep-primary-soft);
}

.ep-bulan-pil-item .nama {
    font-size: 0.8rem;
    font-weight: 800;
}

.ep-bulan-pil-item .jumlah {
    font-size: 0.7rem;
    color: var(--ep-muted);
    font-variant-numeric: tabular-nums;
}

.ep-bulan-pil-item.lengkap .jumlah {
    color: #1c6c09;
    font-weight: 700;
}

.ep-bulan-pil-item.aktif {
    border-color: var(--ep-primary);
    background: var(--ep-primary);
    color: #fff;
}

.ep-bulan-pil-item.aktif .jumlah {
    color: rgba(255, 255, 255, .85);
}

.ep-rekap-item.hijau {
    border-color: #bee8b4;
    background: var(--ep-success-soft);
}

.ep-rekap-item.hijau strong {
    color: #1c6c09;
}

.ep-progres {
    height: 6px;
    margin-top: 8px;
    border-radius: 3px;
    background: var(--ep-border-soft);
    overflow: hidden;
}

.ep-progres span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ep-success);
}

/* Tombol saring Semua / Sudah / Belum */
.ep-saring {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ep-border);
    border-radius: 8px;
    background: var(--ep-bg);
}

.ep-saring-item {
    padding: 5px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: var(--ep-font);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ep-muted);
    cursor: pointer;
}

.ep-saring-item b {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.ep-saring-item:focus {
    background: transparent;
    outline: none;
}

.ep-saring-item.aktif,
.ep-saring-item.aktif:focus {
    background: var(--ep-surface);
    color: var(--ep-heading);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Tabel validasi */
.ep-tabel-validasi td {
    vertical-align: middle;
}

.ep-tabel-validasi td.ep-validasi-opd {
    font-weight: 600;
    color: var(--ep-heading);
}

.ep-tabel-validasi .ep-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ep-tabel-validasi .ep-badge i.material-icons {
    font-size: 0.9rem;
}

.ep-validasi-waktu {
    display: block;
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--ep-muted);
    font-variant-numeric: tabular-nums;
}

.ep-form-inline {
    display: inline;
    margin: 0;
}

.ep-btn.ep-btn-kecil {
    height: 30px;
    padding: 0 10px;
    font-size: 0.75rem;
}

.ep-btn.ep-btn-kecil i.material-icons {
    font-size: 1rem;
}

@media only screen and (max-width: 992px) {
    .ep-bulan-pil {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 600px) {
    .ep-bulan-pil {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Grafik Realisasi per OPD (admin/grafik_real, _komponen/bar_realisasi)
   ========================================================================== */
.ep-rekap-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--ep-muted);
}

.ep-rekap-item strong small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ep-muted);
}

.ep-tabel-grafik td {
    vertical-align: middle;
}

.ep-tabel-grafik td.ep-grafik-opd {
    font-weight: 600;
    color: var(--ep-heading);
}

.ep-tabel-grafik td.angka {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ep-bar-real-angka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.ep-bar-real-angka strong {
    color: var(--ep-heading);
}

.ep-bar-real-angka .minus {
    color: #b81800;
    font-weight: 700;
}

.ep-bar-real-angka .plus {
    color: #1c6c09;
    font-weight: 700;
}

.ep-bar-real-jalur {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--ep-border-soft);
}

.ep-bar-real-jalur .isi {
    display: block;
    height: 100%;
    border-radius: 4px;
}

.ep-bar-real-jalur .isi.keu,
.ep-legenda-kotak.ep-leg-keu {
    background: var(--ep-primary);
}

.ep-bar-real-jalur .isi.fisik,
.ep-legenda-kotak.ep-leg-fisik {
    background: var(--ep-accent);
}

.ep-bar-real-jalur .target {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--ep-heading);
}

.ep-leg-target {
    display: inline-block;
    width: 2px;
    height: 12px;
    margin: 0 4px;
    vertical-align: middle;
    background: var(--ep-heading);
}

.ep-badge.ep-badge-kecil {
    margin-left: 6px;
    padding: 0 6px;
    font-size: 0.66rem;
    vertical-align: middle;
}

.ep-badge.ep-badge-kecil i.material-icons {
    font-size: 0.8rem;
}

/* ---------- Pengaturan Laporan: akses ubah data per bulan (admin/laporan_setting) ---------- */
.ep-akses-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 14px;
}

.ep-akses-cari {
    position: relative;
    flex: 0 1 320px;
}

.ep-akses-cari i.material-icons {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--ep-muted);
    pointer-events: none;
}

.ep-form .ep-akses-cari input.ep-input {
    height: 38px;
    padding-left: 34px;
}

.ep-akses-toolbar .ep-legenda {
    margin: 0;
}

.ep-akses-toolbar #simpanSemua {
    margin-left: auto;
}

.ep-akses-toolbar #simpanSemua:disabled {
    opacity: .45;
    cursor: default;
}

.ep-legenda-kotak.ep-legenda-bulanini {
    background: var(--ep-accent-soft);
    border-color: var(--ep-accent-light);
}

.ep-akses-scroll {
    overflow: auto;
    max-height: 72vh;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
}

table.ep-akses {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
    color: var(--ep-text);
}

table.ep-akses th,
table.ep-akses td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--ep-border-soft);
    vertical-align: middle;
}

table.ep-akses thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ep-bg);
    color: var(--ep-heading);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
    border-bottom: 2px solid var(--ep-accent);
    white-space: nowrap;
}

table.ep-akses thead th.kol-opd {
    text-align: left;
}

table.ep-akses .kol-no {
    width: 44px;
    text-align: center;
    color: var(--ep-muted);
    font-variant-numeric: tabular-nums;
}

table.ep-akses .kol-opd {
    min-width: 300px;
    font-weight: 600;
    color: var(--ep-heading);
}

table.ep-akses .kol-bln {
    width: 52px;
    padding: 4px;
    text-align: center;
}

table.ep-akses .kol-aksi {
    width: 96px;
    text-align: center;
}

table.ep-akses td.bulan-ini,
table.ep-akses th.bulan-ini {
    background: var(--ep-accent-soft);
}

table.ep-akses tbody tr:hover td {
    background-color: var(--ep-hover);
}

table.ep-akses tbody tr.berubah td {
    background-color: var(--ep-warning-soft);
}

table.ep-akses tbody tr.berubah td.kol-no {
    box-shadow: inset 3px 0 0 var(--ep-warning);
}

table.ep-akses tbody tr.tersimpan td {
    background-color: var(--ep-success-soft);
    transition: background-color .6s;
}

table.ep-akses tbody tr.gagal td.kol-no {
    box-shadow: inset 3px 0 0 var(--ep-danger);
}

table.ep-akses tr.ep-akses-kosong td {
    padding: 24px;
    text-align: center;
    color: var(--ep-muted);
}

/* Tombol kecil di judul kolom bulan dan di sebelah nama OPD */
.ep-akses-kolom {
    border: 0;
    background: none;
    padding: 2px 4px;
    border-radius: 4px;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.ep-akses-kolom:hover {
    background: var(--ep-primary-soft);
    color: var(--ep-primary-text);
}

.ep-akses-baris {
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--ep-border-soft);
    border-radius: 10px;
    background: var(--ep-surface);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ep-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}

table.ep-akses tr:hover .ep-akses-baris,
.ep-akses-baris:focus-visible {
    opacity: 1;
}

.ep-akses-baris:hover {
    border-color: var(--ep-primary-border);
    color: var(--ep-primary-text);
}

/* Kotak centang bulan (input asli disembunyikan materialize; label tetap bisa diklik) */
label.ep-bln {
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.ep-bln-kotak {
    display: inline-flex;
    flex: none;
    box-sizing: border-box;
    font-weight: normal;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--ep-border);
    border-radius: 6px;
    background: var(--ep-surface);
    transition: background .12s, border-color .12s;
}

.ep-bln-kotak i.material-icons {
    font-size: 17px;
    color: #fff;
    visibility: hidden;
}

label.ep-bln:hover .ep-bln-kotak {
    border-color: var(--ep-primary);
}

label.ep-bln input:checked + .ep-bln-kotak,
.ep-bln-kotak.contoh.aktif {
    background: var(--ep-success);
    border-color: var(--ep-success);
}

label.ep-bln input:checked + .ep-bln-kotak i.material-icons,
.ep-bln-kotak.contoh.aktif i.material-icons {
    visibility: visible;
}

label.ep-bln input:focus-visible + .ep-bln-kotak {
    outline: 2px solid var(--ep-primary);
    outline-offset: 2px;
}

.ep-legenda .ep-bln-kotak.contoh {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.ep-legenda .ep-bln-kotak.contoh i.material-icons {
    font-size: 13px;
}

.ep-akses-simpan {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--ep-primary);
    border-radius: 6px;
    background: var(--ep-primary);
    color: #fff;
    font-family: var(--ep-font);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.ep-akses-simpan:disabled {
    border-color: var(--ep-border-soft);
    background: transparent;
    color: var(--ep-muted);
    opacity: .6;
    cursor: default;
}

@media only screen and (max-width: 600px) {
    .ep-akses-cari {
        flex-basis: 100%;
    }

    .ep-akses-toolbar #simpanSemua {
        margin-left: 0;
    }
}

/* ==========================================================================
   Halaman Rekening Program (pages/rek_program)
   ========================================================================== */
.ep-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.ep-card-head .card-title {
    margin: 0 !important;
}

.ep-card-sub {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--ep-muted);
}

/* Materialize memberi .card-action a huruf kapital & warna aksen lewat selector :not() yang sangat spesifik */
.card .card-action .ep-card-head a.ep-btn {
    margin: 0 !important;
    text-decoration: none;
    text-transform: none !important;
    color: #fff !important;
}

.ep-rek-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 0.8rem;
}

.ep-label-legenda {
    margin-right: 4px;
    font-weight: 700;
    color: var(--ep-muted);
}

.ep-rek-level {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--ep-border);
    border-radius: 999px;
    background: var(--ep-bg);
    color: var(--ep-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ep-rek-level.l1,
.ep-rek-level.l2 { background: var(--ep-dark); border-color: var(--ep-dark); color: #fff; }
.ep-rek-level.l3 { background: var(--ep-primary-soft); border-color: var(--ep-primary-border); color: var(--ep-primary-text); }
.ep-rek-level.l5 { background: var(--ep-accent-soft); border-color: var(--ep-accent-light); color: var(--ep-accent-text); }
.ep-rek-level.l6 { background: var(--ep-success-soft); border-color: #bee8b4; color: #1c6c09; }

.ep-tabel-rek .ep-col-kode {
    width: 220px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ep-tabel-rek .ep-col-level {
    width: 110px;
}

.ep-tabel-rek .ep-col-aksi {
    width: 1%;
    white-space: nowrap;
}

.ep-tabel-rek tr.ep-rek-induk td {
    font-weight: 700;
    color: var(--ep-heading);
}

#modal_add.ep-modal.ep-modal-sm {
    max-width: 560px;
}

.ep-form .ep-input-kode {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.ep-form .ep-hint code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--ep-hover);
    font-size: 0.72rem;
}

.ep-form .ep-hint .ep-rek-level {
    font-size: 0.68rem;
}

/* Tambahan untuk Rekening Belanja (pages/rek_belanja): level objek dan kolom status */
.ep-rek-level.l4 { background: var(--ep-info-soft); border-color: #9fdcff; color: #005585; }

.ep-tabel-rek .ep-col-status {
    width: 80px;
    text-align: center;
}

.ep-tabel-rek .ep-badge:not(.success) {
    background: var(--ep-hover);
    border-color: var(--ep-border-soft);
    color: var(--ep-muted);
}

/* ==========================================================================
   Halaman Data User (admin/user)
   ========================================================================== */
.ep-filter-level {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.ep-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ep-border);
    border-radius: 999px;
    background: var(--ep-surface);
    color: var(--ep-text);
    font-family: var(--ep-font);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.ep-filter-chip span {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ep-hover);
    color: var(--ep-muted);
    font-size: 0.72rem;
    text-align: center;
}

.ep-filter-chip:hover {
    border-color: var(--ep-primary-border);
}

.ep-filter-chip.aktif {
    border-color: var(--ep-primary);
    background: var(--ep-primary-soft);
    color: var(--ep-primary-text);
}

.ep-filter-chip.aktif span {
    background: var(--ep-primary);
    color: #fff;
}

.ep-filter-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ep-primary) 20%, transparent);
}

.ep-tabel-user .ep-col-no { width: 40px; }
.ep-tabel-user .ep-col-level { width: 120px; }
.ep-tabel-user .ep-col-tahun { width: 100px; }
.ep-tabel-user .ep-col-aksi { width: 1%; white-space: nowrap; text-align: right; }

.ep-user-sel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ep-user-foto {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ep-border-soft);
}

.ep-user-nama {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-user-email {
    display: block;
    font-size: 0.78rem;
    color: var(--ep-muted-2);
    overflow-wrap: anywhere;
}

.ep-user-level {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--ep-border);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ep-user-level.l1 { background: var(--ep-primary-soft); border-color: var(--ep-primary-border); color: var(--ep-primary-text); }
.ep-user-level.l3 { background: var(--ep-accent-soft); border-color: var(--ep-accent-light); color: var(--ep-accent-text); }
.ep-user-level.l2 { background: var(--ep-dark); border-color: var(--ep-dark); color: #fff; }

.ep-teks-redup {
    color: var(--ep-muted-2);
    font-style: italic;
}

.ep-choices.ep-choices-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ep-alert-error {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid #fabcb3;
    border-radius: var(--ep-radius);
    background: var(--ep-danger-soft);
    color: #b81800;
    font-size: 0.85rem;
}

.ep-alert-error ul {
    margin: 0;
    padding: 0;
}

.ep-alert-error li {
    list-style: none;
}

@media only screen and (max-width: 600px) {
    .ep-choices.ep-choices-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Reset password user */
.ep-aksi-btn.reset i.material-icons { color: var(--ep-warning); }
.ep-aksi-btn.reset:hover { border-color: var(--ep-warning); background: var(--ep-warning-soft); }

.ep-reset-sandi {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ep-reset-sandi code {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px dashed var(--ep-primary-border);
    border-radius: 6px;
    background: var(--ep-primary-soft);
    color: var(--ep-heading);
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .08em;
    user-select: all;
    overflow-wrap: anywhere;
}

.ep-reset-catatan {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #ffcc85;
    border-radius: var(--ep-radius);
    background: var(--ep-warning-soft);
    font-size: 0.82rem;
    color: var(--ep-text);
}

.ep-reset-catatan i.material-icons {
    flex: none;
    font-size: 20px;
    color: var(--ep-warning);
}

.ep-reset-catatan p {
    margin: 0;
}

/* ==========================================================================
   Halaman Data OPD (admin/opd)
   ========================================================================== */
.ep-tabel-opd .ep-col-no { width: 40px; }
.ep-tabel-opd .ep-col-ket { width: 60px; }
.ep-tabel-opd .ep-col-user { width: 60px; text-align: center; }
.ep-tabel-opd .ep-col-aksi { width: 1%; white-space: nowrap; text-align: right; }

.ep-opd-nama,
.ep-opd-kepala {
    display: block;
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-opd-urusan,
.ep-opd-nip {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--ep-muted-2);
    font-variant-numeric: tabular-nums;
}

.ep-opd-kode {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--ep-hover);
    color: var(--ep-muted);
    font-weight: 700;
}

.ep-opd-ket {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--ep-primary-border);
    background: var(--ep-primary-soft);
    color: var(--ep-primary-text);
    font-size: 0.72rem;
    font-weight: 700;
}

.ep-opd-ket.kpa {
    border-color: var(--ep-accent-light);
    background: var(--ep-accent-soft);
    color: var(--ep-accent-text);
}

.ep-form .ep-opd-hint {
    margin: -10px 0 0;
}

.ep-form .ep-opd-hint.ok { color: var(--ep-success); font-weight: 700; }
.ep-form .ep-opd-hint.gagal { color: var(--ep-warning); }

/* ==========================================================================
   Hapus bertingkat dengan daftar centang (_komponen/hapus_bertingkat)
   ========================================================================== */
.ep-btn-danger {
    background: var(--ep-danger);
    color: #fff;
}

.ep-btn-danger:hover {
    background: #c41a00;
}

.ep-btn:disabled,
.ep-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

#modal_hapus_bertingkat.ep-modal {
    max-width: 820px;
}

.ep-hapus-info {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid #ffcc85;
    border-radius: var(--ep-radius);
    background: var(--ep-warning-soft);
    font-size: 0.83rem;
    color: var(--ep-text);
}

.ep-hapus-info i.material-icons {
    flex: none;
    font-size: 20px;
    color: var(--ep-warning);
}

.ep-hapus-info p {
    margin: 0;
}

.ep-hapus-alat {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.ep-hapus-pohon {
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    padding: 6px 0;
    margin-bottom: 12px;
}

.ep-hapus-pohon ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ep-hapus-pohon ul ul {
    margin-left: 26px;
    border-left: 1px dashed var(--ep-border);
}

.ep-hapus-pohon li {
    list-style: none;
}

.ep-hapus-baris {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 0.83rem !important;
    color: var(--ep-text) !important;
    cursor: pointer;
}

.ep-hapus-baris:hover {
    background: var(--ep-hover);
}

/* Materialize menyembunyikan semua checkbox bawaan; di sini dipakai checkbox asli */
.ep-hapus-pohon input[type="checkbox"] {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ep-danger);
    cursor: pointer;
}

.ep-hapus-teks {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.ep-hapus-kode {
    font-size: 0.72rem;
    color: var(--ep-muted-2);
    font-variant-numeric: tabular-nums;
}

.ep-hapus-nama {
    overflow-wrap: anywhere;
}

.t-program > .ep-hapus-baris .ep-hapus-nama,
.t-kegiatan > .ep-hapus-baris .ep-hapus-nama {
    font-weight: 800;
    color: var(--ep-heading);
}

.t-subkegiatan > .ep-hapus-baris .ep-hapus-nama {
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-hapus-tanda {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ep-danger-soft);
    color: #b81800;
    font-size: 0.68rem;
    font-weight: 700;
}

.ep-hapus-rp {
    flex: none;
    font-size: 0.78rem;
    color: var(--ep-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ep-hapus-lipat {
    margin-left: 26px;
}

.ep-hapus-lipat > summary {
    padding: 2px 12px 6px 26px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ep-primary-text);
    cursor: pointer;
}

.ep-hapus-lipat > ul {
    margin-left: 0 !important;
}

.ep-hapus-foot {
    align-items: center;
}

.ep-hapus-jumlah {
    margin-right: auto;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ep-muted);
}

@media only screen and (max-width: 600px) {
    .ep-hapus-pohon ul ul { margin-left: 14px; }
    .ep-hapus-rp { display: none; }
    .ep-hapus-foot { flex-wrap: wrap; }
}

/* ==========================================================================
   Validasi laporan oleh kadis (kadis/laporan_setting)
   ========================================================================== */
.ep-validasi-kadis {
    max-width: 960px;
    margin: 0 auto 24px;
}

.ep-validasi-kadis .card {
    margin: 0 0 16px;
}

.ep-validasi-ringkas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;
    padding: 20px 24px;
    box-shadow: inset 0 3px 0 var(--ep-accent), var(--ep-shadow, 0 1px 2px rgba(0, 0, 0, .05));
}

.ep-validasi-angka {
    display: flex;
    flex-direction: column;
}

.ep-validasi-besar {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ep-heading);
}

.ep-validasi-besar small {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ep-muted-2);
}

.ep-validasi-label {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ep-muted);
}

.ep-validasi-progres {
    flex: 1;
    min-width: 260px;
}

.ep-validasi-bar {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}

.ep-validasi-bar span {
    height: 10px;
    border-radius: 3px;
    background: var(--ep-border-soft);
}

.ep-validasi-bar span.valid { background: var(--ep-success); }
.ep-validasi-bar span.menunggu { background: var(--ep-warning); }

.ep-validasi-progres p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ep-muted);
}

.ep-validasi-progres p strong {
    color: var(--ep-warning);
}

.ep-validasi-daftar {
    padding: 4px 0;
}

.ep-validasi-baris {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--ep-border-soft);
    font-size: 0.875rem !important;
    color: var(--ep-text) !important;
    cursor: pointer;
}

.ep-validasi-baris:last-child {
    border-bottom: 0;
}

.ep-validasi-baris:hover {
    background: var(--ep-hover);
}

.ep-validasi-baris.tutup {
    cursor: not-allowed;
    color: var(--ep-muted-2) !important;
}

.ep-validasi-baris.tutup:hover {
    background: transparent;
}

.ep-validasi-baris.tutup .ep-switch {
    opacity: .4;
    cursor: not-allowed;
}

.ep-validasi-bulan {
    width: 160px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-validasi-baris.tutup .ep-validasi-bulan {
    color: var(--ep-muted-2);
}

.ep-validasi-no {
    width: 28px;
    height: 28px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ep-hover);
    color: var(--ep-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.ep-validasi-status {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.ep-validasi-status .ep-badge i.material-icons {
    font-size: 14px;
}

.ep-validasi-kadis .ep-validasi-waktu {
    font-size: 0.78rem;
    color: var(--ep-muted-2);
    font-variant-numeric: tabular-nums;
}

.ep-validasi-kadis .ep-switch input[type="checkbox"]:checked + .ep-switch-track {
    background: var(--ep-success);
}

.ep-validasi-aksi {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    background: var(--ep-surface);
    box-shadow: 0 6px 20px rgba(20, 24, 36, .08);
}

.ep-validasi-aksi span {
    margin-right: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ep-muted);
}

.ep-validasi-aksi.ada {
    border-color: var(--ep-primary-border);
    background: var(--ep-primary-soft);
}

.ep-validasi-aksi.ada span {
    color: var(--ep-primary-text);
    font-weight: 700;
}

@media only screen and (max-width: 600px) {
    .ep-validasi-baris { padding: 12px 16px; gap: 10px; }
    .ep-validasi-bulan { width: auto; flex: 1; }
    .ep-validasi-status { order: 3; flex-basis: 100%; padding-left: 38px; }
    .ep-validasi-aksi { flex-wrap: wrap; }
}

/* ==========================================================================
   Elemen global layout: indikator proses AJAX & tombol bulat (pengganti btn-floating Materialize)
   ========================================================================== */
.preloader1.ep-proses {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 76px;
    right: 20px;
    padding: 10px 16px;
    border: 1px solid var(--ep-border-soft);
    border-radius: 999px;
    background: var(--ep-surface);
    box-shadow: 0 6px 20px rgba(20, 24, 36, .12);
    font-family: var(--ep-font);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-proses-putar {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid var(--ep-primary-soft);
    border-top-color: var(--ep-primary);
    border-radius: 50%;
    animation: ep-putar .8s linear infinite;
}

@keyframes ep-putar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ep-proses-putar { animation-duration: 2s; }
}

.ep-tombol-bulat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ep-primary);
    color: #fff;
    cursor: pointer;
}

.ep-tombol-bulat i.material-icons {
    font-size: 22px;
    line-height: 1;
    color: inherit;
}

/* #toTop disembunyikan/ditampilkan jQuery (fadeIn = display:block), jadi ikon dipusatkan tanpa flex */
#toTop.ep-tombol-bulat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: none;
    text-align: center;
}

#toTop.ep-tombol-bulat i.material-icons {
    line-height: 40px;
}

/* ==========================================================================
   Laporan PPHP (user/admin laporan_pphp + _komponen/table_laporan_pphp)
   ========================================================================== */
.ep-legenda-kotak.ep-legenda-terlambat {
    background: var(--ep-danger-soft);
    border-color: #fabcb3;
}

.ep-laporan-pphp tbody tr.baris-terlambat td {
    background: var(--ep-danger-soft);
}

.ep-laporan-pphp td.ep-laporan-kosong {
    padding: 24px 12px;
    color: var(--ep-muted);
}

/* ---------- Sakelar hanya-tampil (Edit Subkegiatan) ---------- */
/* Sakelar hanya-tampil (mis. "Subkegiatan Jenis Fisik" di Edit Subkegiatan) */
.ep-switch input[type="checkbox"]:disabled + .ep-switch-track {
    opacity: .65;
    cursor: not-allowed;
}

.ep-switch-terkunci {
    cursor: not-allowed;
}

/* ---------- Detail kegiatan: deskripsi, galeri foto, dokumen (admin/user/kadis kegiatan_detail) ---------- */
/* Detail kegiatan (admin/user/kadis): proyek strategis baca-saja */

/* Teks panjang (deskripsi singkat, keterangan) di kotak nilai: pertahankan baris baru */
.ep-form .ep-nilai.ep-nilai-teks {
    display: block;
    white-space: pre-line;
    font-weight: 500;
}

/* Deskripsi lengkap (HTML hasil Quill yang sudah dibersihkan) */
.ep-deskripsi.ql-snow {
    border: 1px solid var(--ep-border-soft);
    border-radius: 6px;
    background: var(--ep-bg);
}

.ep-deskripsi.ql-snow .ql-editor {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 10px 14px;
    font-family: var(--ep-font);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ep-text);
    cursor: default;
}

.ep-deskripsi.ql-snow .ql-editor p {
    margin: 0;
}

/* Kotak media: judul + jumlah */
.ep-media-box .ep-media-head {
    margin-bottom: 12px;
}

.ep-media-head .ep-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ep-media-head .ep-label i.material-icons {
    font-size: 1.05rem;
    color: var(--ep-muted);
}

.ep-media-kosong {
    margin: 0;
    padding: 18px 12px;
    border: 1px dashed var(--ep-border);
    border-radius: 6px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--ep-muted-2);
}

/* Galeri foto proyek */
.ep-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.ep-galeri-item {
    margin: 0;
    min-width: 0;
}

.ep-galeri-item a {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--ep-border-soft);
    border-radius: 6px;
    background: var(--ep-bg);
}

.ep-galeri-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.ep-galeri-item a:hover img,
.ep-galeri-item a:focus-visible img {
    transform: scale(1.04);
}

.ep-galeri-item a:focus-visible {
    outline: 2px solid var(--ep-primary);
    outline-offset: 2px;
}

.ep-galeri-bulan {
    position: absolute;
    top: 6px;
    left: 6px;
}

.ep-galeri-item figcaption {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--ep-text);
    overflow-wrap: anywhere;
}

/* Daftar dokumen proyek */
.ep-dok-daftar {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ep-dok-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ep-border-soft);
}

.ep-dok-item:first-child {
    padding-top: 0;
}

.ep-dok-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ep-dok-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--ep-primary-soft);
    color: var(--ep-primary-text);
}

.ep-dok-ikon i.material-icons {
    font-size: 1.2rem;
}

.ep-dok-nama {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ep-heading);
    overflow-wrap: anywhere;
}


/* ==========================================================================
   Form Tambah/Edit Kegiatan — media proyek strategis, capaian fisik, grafik
   (user/kegiatan_tambah, user/kegiatan_edit, _komponen/modal_grafik)
   ========================================================================== */

/* Foto proyek: grid thumbnail */
.ep-foto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.ep-foto-grid:empty::before,
.ep-dok-list:empty::before {
    content: attr(data-kosong);
    display: block;
    padding: 14px 12px;
    border: 1px dashed var(--ep-border);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--ep-muted-2);
    text-align: center;
    grid-column: 1 / -1;
}

.ep-foto-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ep-border-soft);
    border-radius: 6px;
    overflow: hidden;
    background: var(--ep-bg);
}

.ep-foto-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ep-foto-item .ep-aksi-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--ep-surface);
}

.ep-foto-item .ep-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
}

/* Dokumen proyek: daftar */
.ep-dok-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ep-dok-list .ep-dok-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--ep-border-soft);
    border-radius: 6px;
    background: var(--ep-surface);
}

.ep-dok-list .ep-dok-ikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--ep-primary-soft);
    color: var(--ep-primary);
}

.ep-dok-list .ep-dok-ikon i.material-icons {
    font-size: 1.2rem;
}

.ep-dok-list .ep-dok-nama {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ep-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-dok-list a.ep-dok-nama:hover {
    color: var(--ep-primary);
}

/* Kartu grafik tambahan (rencana + realisasi per bulan) */
.ep-grafik-kartu {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ep-border-soft);
    border-radius: 6px;
    background: var(--ep-bg);
}

.ep-grafik-kartu .ep-bulan-judul {
    margin-bottom: 8px;
}

.ep-grafik-nama {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-grafik-nama small {
    font-weight: 600;
    color: var(--ep-muted);
}

.ep-grafik-sub {
    margin: 10px 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ep-muted);
}


/* ==========================================================================
   Halaman daftar Program / Kegiatan / Subkegiatan (user, admin, kadis)
   ========================================================================== */

/* Beberapa tombol di kanan kepala kartu (mis. Reset Migrasi + Tambah Program) */
.ep-card-head-aksi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Jejak induk (Program / Kegiatan) di atas rekap anggaran */
.ep-jejak {
    margin: 0 0 12px;
}

.ep-jejak .aktif {
    color: var(--ep-heading);
}

/* Rekap anggaran induk di atas tabel */
.ep-rekap.ep-rekap-daftar {
    margin-bottom: 20px;
}

/* Tabel daftar */
.ep-tabel-daftar .ep-col-no {
    width: 40px;
}

.ep-tabel-daftar .ep-col-rek {
    white-space: nowrap;
}

.ep-tabel-daftar .ep-angka {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ep-tabel-daftar .ep-col-aksi {
    width: 1%;
    white-space: nowrap;
}

/* Kegiatan strategis: nama biasa + badge bintang yang menaut ke halaman publik */
.ep-tabel-daftar a.ep-badge {
    text-decoration: none;
}

/* Kotak keadaan kosong (mis. belum ada program → tawarkan migrasi data) */
.ep-kosong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px dashed var(--ep-primary-border);
    border-radius: var(--ep-radius);
    background: var(--ep-primary-soft);
}

.ep-kosong p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ep-text);
}

.ep-kosong p strong {
    display: block;
    color: var(--ep-heading);
}

/* Filter OPD di halaman Program admin */
.ep-filter-opd {
    margin-bottom: 16px;
}

.ep-filter-opd .ep-laporan-opd {
    flex: 1 1 360px;
    max-width: 560px;
}

.ep-filter-opd + .ep-hint {
    display: block;
    margin: -4px 0 16px;
    font-size: 0.8rem;
    color: var(--ep-muted);
}

/* ==========================================================================
   Versi rekening (admin/versi_rekening) & banner "versi belum ditetapkan" (halaman OPD)
   ========================================================================== */
.ep-banner-versi {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid var(--ep-warning);
    border-radius: var(--ep-radius);
    background: var(--ep-warning-soft);
    color: var(--ep-heading);
}

.ep-banner-versi > .material-icons {
    color: var(--ep-warning);
    font-size: 22px;
}

.ep-banner-versi p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--ep-text);
}

.ep-banner-versi strong {
    display: block;
    font-size: 0.9rem;
}

.ep-tabel-versi {
    width: 100%;
}

.ep-tabel-versi th,
.ep-tabel-versi td {
    vertical-align: middle;
}

.ep-tabel-versi .ep-col-tahun {
    width: 120px;
    white-space: nowrap;
}

.ep-tabel-versi .ep-col-tahun strong {
    display: block;
    font-size: 1rem;
    color: var(--ep-heading);
}

.ep-tabel-versi .ep-col-data {
    width: 110px;
    white-space: nowrap;
    color: var(--ep-muted);
    font-size: 0.82rem;
}

.ep-tabel-versi .ep-col-aksi {
    width: 120px;
    text-align: right;
}

.ep-tabel-versi td select.ep-input {
    min-width: 200px;
    margin: 0;
}

.ep-tabel-versi tr.belum td {
    background: var(--ep-warning-soft);
}

.ep-versi-penetap {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--ep-muted);
}

.ep-versi-nama {
    display: block;
    font-weight: 700;
    color: var(--ep-heading);
}

.ep-versi-dasar {
    display: block;
    font-size: 0.8rem;
    color: var(--ep-text);
}

.ep-versi-ket {
    display: block;
    font-size: 0.78rem;
    color: var(--ep-muted);
}

.ep-versi-pilih {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.ep-versi-pilih .ep-label {
    margin: 0;
}

.ep-versi-pilih select.ep-input {
    width: auto;
    min-width: 240px;
}

@media only screen and (max-width: 600px) {
    .ep-tabel-versi td select.ep-input {
        min-width: 150px;
    }
}

.ep-gulir-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ep-form input[type="file"].ep-input {
    height: auto;
    padding: 8px 10px;
    cursor: pointer;
}