/* ERP Tiban Inten — modern clean theme (Bootstrap 5, self-hosted, no Tailwind/Vite/CDN) */

:root {
    --erp-sidebar-width: 264px;
    --erp-sidebar-rail: 76px;
    --erp-radius: 0.75rem; /* cards, larger surfaces */
    --erp-radius-sm: 0.5rem; /* buttons, inputs, dropdowns */
    --bs-border-radius: var(--erp-radius-sm);
    --bs-border-radius-lg: var(--erp-radius);
    /* Smaller, calmer base type (default 1rem felt too big). */
    --bs-body-font-size: 0.875rem;
}
body {
    font-size: var(--bs-body-font-size);
}
.form-label {
    font-size: 0.85rem;
}

/* ============================================================= *
 * Brand primary — biru logo Khairo (#004d90, rgb 0 77 144).
 * Turunan (subtle/emphasis/hover) dihitung pakai rumus tint/shade
 * Bootstrap agar konsisten light & dark.
 * ============================================================= */
:root,
[data-bs-theme="light"] {
    --bs-primary: #004d90;
    --bs-primary-rgb: 0, 77, 144;
    --bs-primary-bg-subtle: #ccdbe9;
    --bs-primary-border-subtle: #99b8d3;
    --bs-primary-text-emphasis: #001f3a;
    --bs-link-color: #004d90;
    --bs-link-color-rgb: 0, 77, 144;
    --bs-link-hover-color: #003e73;
    --bs-link-hover-color-rgb: 0, 62, 115;
    --bs-focus-ring-color: rgba(0, 77, 144, 0.25);
}
[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: #6694bc;
    --bs-primary-bg-subtle: #000f1d;
    --bs-primary-border-subtle: #002e56;
    --bs-link-color: #6694bc;
    --bs-link-color-rgb: 102, 148, 188;
    --bs-link-hover-color: #85a9c9;
    --bs-link-hover-color-rgb: 133, 169, 201;
}
.btn-primary {
    --bs-btn-bg: #004d90;
    --bs-btn-border-color: #004d90;
    --bs-btn-hover-bg: #00417a;
    --bs-btn-hover-border-color: #003e73;
    --bs-btn-active-bg: #003e73;
    --bs-btn-active-border-color: #003a6c;
    --bs-btn-disabled-bg: #004d90;
    --bs-btn-disabled-border-color: #004d90;
    --bs-btn-focus-shadow-rgb: 38, 103, 160;
}
.btn-outline-primary {
    --bs-btn-color: #004d90;
    --bs-btn-border-color: #004d90;
    --bs-btn-hover-bg: #004d90;
    --bs-btn-hover-border-color: #004d90;
    --bs-btn-active-bg: #004d90;
    --bs-btn-active-border-color: #004d90;
    --bs-btn-disabled-color: #004d90;
    --bs-btn-disabled-border-color: #004d90;
    --bs-btn-focus-shadow-rgb: 0, 77, 144;
}
.pagination {
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 77, 144, 0.25);
    --bs-pagination-active-bg: #004d90;
    --bs-pagination-active-border-color: #004d90;
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: #004d90;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: #004d90;
}
.list-group {
    --bs-list-group-active-bg: #004d90;
    --bs-list-group-active-border-color: #004d90;
}
.progress,
.progress-stacked {
    --bs-progress-bar-bg: #004d90;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #80a6c8;
    box-shadow: 0 0 0 0.25rem rgba(0, 77, 144, 0.25);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: #004d90;
    border-color: #004d90;
}
.form-range::-webkit-slider-thumb {
    background-color: #004d90;
}
.form-range::-moz-range-thumb {
    background-color: #004d90;
}
/* Tom Select multi-item aktif (vendor pakai literal #0d6efd) */
.ts-wrapper.multi .ts-control > div.active {
    background: var(--bs-primary);
}

/* ============================================================= *
 * Switchable webfont (Poppins default, Roboto alternative)
 * ============================================================= */
html[data-erp-font="poppins"] {
    --bs-body-font-family:
        "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-erp-font="roboto"] {
    --bs-body-font-family:
        "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body {
    font-family: var(--bs-body-font-family);
}

/* ============================================================= *
 * Consistent border-radius everywhere
 * ============================================================= */
.card,
.modal-content,
.list-group,
.table-responsive {
    border-radius: var(--erp-radius);
}

.btn,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.alert,
.ts-control,
.ts-dropdown {
    border-radius: var(--erp-radius-sm) !important;
}

/* Round the outer corners of input-group children cleanly */
.input-group > :first-child {
    border-top-left-radius: var(--erp-radius-sm) !important;
    border-bottom-left-radius: var(--erp-radius-sm) !important;
}
.input-group > :last-child {
    border-top-right-radius: var(--erp-radius-sm) !important;
    border-bottom-right-radius: var(--erp-radius-sm) !important;
}

/* ============================================================= *
 * Buttons vs Badges — clearly different
 * ============================================================= */
.btn {
    font-weight: 500;
    padding-inline: 0.9rem;
    /* Center icon + label vertically and horizontally so bootstrap-icon glyphs
     * never sit off the text baseline. No gap here — existing `me-*` spacing on
     * icons is preserved. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.btn-sm {
    padding-inline: 0.6rem;
}
/* Bootstrap-icons inside buttons: align to the flex centre, not the baseline. */
.btn > .bi {
    line-height: 1;
}

/* Badges: Tabler-style "light" badges — soft tinted bg + coloured text,
 * pill-shaped and non-interactive. Applies project-wide to every .badge
 * (buttons are intentionally left untouched). */
.badge {
    border-radius: 50rem;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 0.38em 0.7em;
    line-height: 1;
}

/* Force the light/soft variant for all contextual badge colours, overriding
 * Bootstrap's solid `.text-bg-*` / `.bg-*` (which use !important). The
 * *-bg-subtle / *-text-emphasis CSS variables auto-adapt to dark mode. */
.badge.text-bg-primary,
.badge.bg-primary {
    color: var(--bs-primary-text-emphasis) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}
.badge.text-bg-secondary,
.badge.bg-secondary {
    color: var(--bs-secondary-text-emphasis) !important;
    background-color: var(--bs-secondary-bg-subtle) !important;
}
.badge.text-bg-success,
.badge.bg-success {
    color: var(--bs-success-text-emphasis) !important;
    background-color: var(--bs-success-bg-subtle) !important;
}
.badge.text-bg-danger,
.badge.bg-danger {
    color: var(--bs-danger-text-emphasis) !important;
    background-color: var(--bs-danger-bg-subtle) !important;
}
.badge.text-bg-warning,
.badge.bg-warning {
    color: var(--bs-warning-text-emphasis) !important;
    background-color: var(--bs-warning-bg-subtle) !important;
}
.badge.text-bg-info,
.badge.bg-info {
    color: var(--bs-info-text-emphasis) !important;
    background-color: var(--bs-info-bg-subtle) !important;
}
.badge.text-bg-light,
.badge.bg-light {
    color: var(--bs-secondary-color) !important;
    background-color: var(--bs-secondary-bg) !important;
}
.badge.text-bg-dark,
.badge.bg-dark {
    color: var(--bs-emphasis-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
}

/* Notif bell counter: SOLID bright red + white number (pengecualian dari gaya
 * light badge di atas) agar mencolok sebagai penanda notifikasi belum dibaca. */
.badge.erp-notif-badge {
    color: #fff !important;
    background-color: #ff1f1f !important;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

/* Dropdown notifikasi di layar sempit: panel 340px right-aligned meluber keluar
 * viewport kiri — jadikan fixed selebar layar tepat di bawah navbar. */
@media (max-width: 575.98px) {
    [data-erp-notif] .dropdown-menu {
        position: fixed !important;
        top: 4.25rem;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
    [data-erp-notif] [data-notif-list] {
        max-height: calc(100vh - 12rem) !important;
    }
}

/* ============================================================= *
 * Cards, tables — clean & airy
 * ============================================================= */
.card {
    border: 1px solid var(--bs-border-color);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 1px 3px rgba(16, 24, 40, 0.06);
}
.card-header {
    background-color: transparent;
    border-bottom-color: var(--bs-border-color);
}

.table {
    --bs-table-border-color: var(--bs-border-color);
    margin-bottom: 0;
}
.table > thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-bottom-width: 1px;
    white-space: nowrap;
}
.table > :not(caption) > * > * {
    padding: 0.7rem 0.85rem;
}

/* ============================================================= *
 * Layout / sidebar — full-height, coloured (not pale), with rail
 * ============================================================= */
.erp-sidebar {
    --bs-offcanvas-width: var(--erp-sidebar-width);
    /* LIGHT theme (default): biru brand Khairo (satu keluarga, tanpa belang). */
    --erp-sb-bg: linear-gradient(180deg, #00569e 0%, #004377 100%);
    --erp-sb-text: rgba(255, 255, 255, 0.82);
    --erp-sb-muted: rgba(255, 255, 255, 0.55);
    --erp-sb-hover-bg: rgba(255, 255, 255, 0.12);
    --erp-sb-hover-text: #fff;
    --erp-sb-brand: #fff;
    --erp-sb-accent: #38bdf8;
    /* Active item: frosted pill + left accent bar (lihat .nav-link.active). */
    --erp-sb-active-bg: rgba(255, 255, 255, 0.18);
    --erp-sb-active-text: #fff;
    color: var(--erp-sb-text);
}
/* Beat Bootstrap's responsive-offcanvas transparent!important at lg+ (higher specificity + !important). */
.erp-sidebar.offcanvas-lg {
    background: var(--erp-sb-bg) !important;
}

/* Beat Bootstrap's `.offcanvas-lg .offcanvas-body{display:flex;flex-grow:0;overflow-y:visible}` */
.erp-sidebar .erp-sidebar-scroll {
    display: block;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: transparent !important;
    /* Hide the scrollbar but keep scrolling when the menu is long. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/old Edge */
}
.erp-sidebar .erp-sidebar-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
} /* Chrome/Edge/Safari */

@media (min-width: 992px) {
    .erp-sidebar {
        flex: 0 0 var(--erp-sidebar-width);
        width: var(--erp-sidebar-width);
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        display: flex;
        flex-direction: column;
        transition:
            flex-basis 0.2s ease,
            width 0.2s ease;
    }
}

/* Brand inside sidebar */
.erp-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.15rem;
    color: var(--erp-sb-brand);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.12rem;
    white-space: nowrap;
    min-height: 60px;
}
.erp-brand-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}
/* The brand mark is recolourable like an icon: the SVG (which embeds a
   transparent logo) is used as a CSS mask filled with currentColor, so it
   follows the surrounding text colour / theme automatically. */
.erp-brand-logo,
.erp-logo-mask {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("/logo-ti.svg") no-repeat center / contain;
    mask: url("/logo-ti.svg") no-repeat center / contain;
}
.erp-brand-logo {
    width: 38px;
    height: 34px;
}

/* Dark mode: use the full-colour PT logo image instead of the recoloured mask. */
[data-bs-theme="dark"] .erp-brand-logo {
    -webkit-mask: none;
    mask: none;
    background-color: transparent;
    background: url("/pt_tiban_inten_logo.webp") no-repeat center / contain;
    width: 36px;
    height: 36px;
}

.erp-sidebar .nav-link {
    border-radius: var(--erp-radius-sm);
    color: var(--erp-sb-text);
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.12rem;
    font-size: 0.925rem;
    white-space: nowrap;
}
.erp-sidebar .nav-link:hover {
    background-color: var(--erp-sb-hover-bg);
    color: var(--erp-sb-hover-text);
}
.erp-sidebar .nav-link.active {
    background-color: var(--erp-sb-active-bg);
    color: var(--erp-sb-active-text);
    font-weight: 600;
}
.erp-sidebar .nav-link .bi {
    font-size: 1.1rem;
    opacity: 0.95;
    flex-shrink: 0;
}

/* Collapsible group headers */
.erp-sidebar .sidebar-group-toggle {
    background: transparent;
    border: 0;
    color: var(--erp-sb-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.erp-sidebar .sidebar-group-toggle:hover {
    color: var(--erp-sb-hover-text);
    background-color: var(--erp-sb-hover-bg);
}
.erp-sidebar .sidebar-group-toggle .sidebar-chevron {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}
.erp-sidebar .sidebar-group-toggle.collapsed .sidebar-chevron {
    transform: rotate(-90deg);
}

/* Nested sub-group heading inside a collapsible group (e.g. Keuangan → Transaksi). */
.erp-sidebar .sidebar-subgroup-label {
    padding: 0.4rem 0.8rem 0.15rem 1.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--erp-sb-muted);
    white-space: nowrap;
}

/* ---------- Rail (collapsed) mode, desktop only ---------- */
@media (min-width: 992px) {
    html[data-erp-sidebar="collapsed"] .erp-sidebar {
        flex-basis: var(--erp-sidebar-rail);
        width: var(--erp-sidebar-rail);
    }
    /* Hide text; keep icons centred */
    html[data-erp-sidebar="collapsed"] .erp-sidebar .erp-brand-text,
    html[data-erp-sidebar="collapsed"] .erp-sidebar .nav-link span,
    html[data-erp-sidebar="collapsed"] .erp-sidebar .sidebar-group-toggle span,
    html[data-erp-sidebar="collapsed"]
        .erp-sidebar
        .sidebar-group-toggle
        .sidebar-chevron,
    html[data-erp-sidebar="collapsed"] .erp-sidebar .sidebar-subgroup-label {
        display: none;
    }
    html[data-erp-sidebar="collapsed"] .erp-sidebar .nav-link.ps-4 {
        padding-left: 0 !important;
    }
    html[data-erp-sidebar="collapsed"] .erp-sidebar .erp-brand {
        justify-content: center;
        padding-inline: 0;
    }
    html[data-erp-sidebar="collapsed"] .erp-sidebar .nav-link {
        justify-content: center;
        padding-inline: 0;
    }
    /* Group headers become thin dividers; always show their items as icons */
    html[data-erp-sidebar="collapsed"] .erp-sidebar .sidebar-group-toggle {
        padding: 0.25rem 0;
        pointer-events: none;
    }
    html[data-erp-sidebar="collapsed"] .erp-sidebar .collapse {
        display: block !important;
        height: auto !important;
    }
    html[data-erp-sidebar="collapsed"] .erp-sidebar .nav-link.ps-3 {
        padding-left: 0 !important;
    }
}

.navbar {
    min-height: 60px;
}

/* Prevent horizontal overflow without clipping dropdowns */
main {
    min-width: 0;
}

.erp-auth-wrapper {
    min-height: 100vh;
}

/* ============================================================= *
 * Tom Select — match Bootstrap input look & feel
 * ============================================================= */
.ts-wrapper {
    min-width: 0;
}
.ts-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}
.ts-wrapper.single .ts-control {
    cursor: text;
}
.ts-wrapper.focus .ts-control {
    border-color: #80a6c8;
    box-shadow: 0 0 0 0.2rem rgba(0, 77, 144, 0.2);
}
.ts-control .item {
    color: var(--bs-body-color);
}
.ts-control input,
.ts-control input::placeholder {
    color: var(--bs-secondary-color) !important;
    opacity: 1;
}
.ts-dropdown {
    /* Dropdown dirender di <body> (dropdownParent:'body'); naikkan di atas modal
       Bootstrap (z-index 1055) agar select di dalam modal tetap bisa dibuka. */
    z-index: 1060;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    margin-top: 0.25rem;
    padding: 0.25rem;
}
.ts-dropdown .option {
    border-radius: var(--erp-radius-sm);
    padding: 0.45rem 0.6rem;
}
.ts-dropdown .option.active {
    background-color: var(--bs-primary);
    color: #fff;
}
.ts-dropdown .no-results {
    padding: 0.5rem 0.6rem;
    color: var(--bs-secondary-color);
}
/* clear (×) button */
.ts-wrapper .clear-button {
    opacity: 0.6;
}
.ts-wrapper .clear-button:hover {
    opacity: 1;
}

/* ============================================================= *
 * LIGHT theme fine-tuning
 * ============================================================= */
body {
    background-color: var(--bs-body-bg);
}

/* ============================================================= *
 * DARK theme — lighter, muted surfaces for better readability
 * ============================================================= */
[data-bs-theme="dark"] {
    --bs-body-bg: #171a1f;
    --bs-body-color: #e7eaee;
    --bs-secondary-color: rgba(231, 234, 238, 0.72);
    --bs-tertiary-bg: #262b32;
    --bs-border-color: #333a43;
    --bs-emphasis-color: #ffffff;
}
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .navbar.bg-body {
    background-color: #20252b !important;
}
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: #171a1f !important;
}
[data-bs-theme="dark"] .card {
    background-color: #20252b;
    border-color: #2e353d;
}
/* DARK theme: keep the sidebar exactly as before (solid dark surface, body-coloured
   text) — the coloured treatment is for LIGHT theme only. */
[data-bs-theme="dark"] .erp-sidebar {
    --erp-sb-bg: #1c2127;
    --erp-sb-text: var(--bs-body-color);
    --erp-sb-muted: var(--bs-secondary-color);
    --erp-sb-hover-bg: #2a3038;
    --erp-sb-hover-text: var(--bs-emphasis-color);
    --erp-sb-brand: var(--bs-emphasis-color);
    --erp-sb-accent: #3b82f6;
    /* Active item: surface + accent bar (lihat .nav-link.active). */
    --erp-sb-active-bg: #262c34;
    --erp-sb-active-text: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .text-muted {
    color: var(--bs-secondary-color) !important;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .ts-control {
    background-color: #1c2127;
    border-color: #3a424c;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .input-group-text {
    background-color: #262b32;
    border-color: #3a424c;
    color: var(--bs-body-color);
}

/* Tom Select dropdown in dark: lighter surface + visible hover */
[data-bs-theme="dark"] .ts-dropdown {
    background-color: #262b32;
    border-color: #3a424c;
    color: var(--bs-body-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .ts-dropdown .option {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ts-dropdown .option.active,
[data-bs-theme="dark"] .ts-dropdown .active {
    background-color: #2f6fed;
    color: #fff;
}
[data-bs-theme="dark"] .ts-dropdown .option:hover {
    background-color: #323945;
}

/* ============================================================= *
 * DataTables (Bootstrap 5 + Responsive) — tidy up + dark theme
 * ============================================================= */
.dt-container .dt-length,
.dt-container .dt-search {
    margin-bottom: 0.75rem;
}
.dt-container .dt-search input,
.dt-container .dt-length select {
    margin-inline: 0.4rem;
    width: auto;
    display: inline-block;
}
.dt-container .dt-info {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}
.dt-container .dt-layout-row {
    align-items: center;
    row-gap: 0.5rem;
    margin-top: 0.75rem;
}
table.dataTable {
    font-size: 0.875rem;
}
table.dataTable td,
table.dataTable th {
    vertical-align: middle;
}
.dt-container .dt-paging .page-link {
    border-radius: var(--erp-radius-sm);
}
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc {
    cursor: pointer;
}

/* Excel export button (DataTables Buttons) — sit inline & centered next to
   "Tampilkan N", tight gap, clean outline-success look. */
.dt-container .dt-layout-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dt-container .dt-layout-cell.dt-layout-end {
    justify-content: flex-end;
}
.dt-container .dt-length {
    margin-bottom: 0;
}
.dt-container .dt-buttons {
    margin: 0;
}
.dt-container .dt-buttons .dt-button {
    /* match the sm length <select> height */
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    background-image: none;
    box-shadow: none;
    margin: 0;
}
/* Force the outline-success palette even if btn-secondary leaks back in. */
.dt-container .dt-buttons .dt-button.buttons-excel {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
}

/* Dark theme: fix the search/length inputs (rest inherits Bootstrap) */
[data-bs-theme="dark"] .dt-container .dt-search input,
[data-bs-theme="dark"] .dt-container .dt-length select {
    background-color: #1c2127;
    border-color: #3a424c;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] table.dataTable > tbody > tr {
    background-color: transparent;
}

/* ============================================================= *
 * Chart of Accounts tree
 * ============================================================= */
.cursor-pointer {
    cursor: pointer;
}
.coa-tree {
    font-size: 0.875rem;
}
.coa-node {
    border-bottom: 1px solid var(--bs-border-color);
}
.coa-node:last-child {
    border-bottom: none;
}
.coa-row {
    padding: 0.4rem 0.4rem;
    border-radius: var(--erp-radius-sm);
}
.coa-row:hover {
    background-color: var(--bs-tertiary-bg);
}
.coa-row:hover .coa-actions {
    opacity: 1;
}
.coa-toggle,
.coa-leaf {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    color: var(--bs-secondary-color);
}
.coa-caret {
    transition: transform 0.2s ease;
}
.coa-toggle:not(.collapsed) .coa-caret {
    transform: rotate(90deg);
}
.coa-code {
    font-family: var(--bs-font-monospace);
    font-weight: 600;
    min-width: 56px;
    color: var(--bs-primary);
}
.coa-name.coa-header {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.82rem;
}
.coa-group-badge {
    font-size: 0.68rem;
    text-transform: capitalize;
}
.coa-actions {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}
.coa-children {
    margin-left: 0.75rem;
    border-left: 1px dashed var(--bs-border-color);
    padding-left: 0.35rem;
}
.card-header[aria-expanded="false"] .coa-group-caret {
    transform: rotate(-90deg);
}
.coa-group-caret {
    transition: transform 0.2s ease;
}
.coa-node.coa-hit > .coa-row {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}
/* Clickable account name → detail page. */
.coa-link {
    color: inherit;
}
.coa-link .coa-name {
    color: var(--bs-body-color);
}
.coa-link:hover .coa-code {
    text-decoration: underline;
}
.coa-link:hover .coa-name {
    color: var(--bs-primary);
}
@media (max-width: 575.98px) {
    .coa-actions {
        opacity: 1;
    }
    /* Layar sempit: indentasi cukup dari .coa-children (border kiri) saja —
     * padding per-level di baris (inline style) dimatikan agar nama akun
     * tidak tersisa kolom sempit yang membuat teks patah per kata. */
    .coa-row {
        padding-left: 0.25rem !important;
    }
    .coa-children {
        margin-left: 0.5rem;
        padding-left: 0.25rem;
    }
    .coa-group-badge {
        display: none;
    }
    .coa-actions .btn {
        padding: 0.125rem 0.35rem;
        font-size: 0.75rem;
    }
    .coa-code {
        min-width: 42px;
    }
}

/* ===================================================================
   DataTables — nominal RATA KANAN, sisanya RATA KIRI (MANDATORY).
   Komponen <x-datatable> menandai sel kolom NOMINAL (nilai berawalan
   "Rp") dengan .dt-num, dan sel lain dengan .dt-text. DataTables tidak
   bisa membedakannya sendiri, jadi pembedaan dilakukan di sumber.
     - .dt-text  → rata KIRI (teks, tanggal, no. dokumen, status, dll)
     - .dt-num   → rata KANAN (nominal / Rp)
     - Aksi (.text-end / .dt-actions) → tetap KANAN
   =================================================================== */
table.dataTable > thead > tr > th.dt-text,
table.dataTable > tbody > tr > td.dt-text {
    text-align: left !important;
}
table.dataTable > thead > tr > th.dt-num,
table.dataTable > tbody > tr > td.dt-num {
    text-align: right !important;
}
table.dataTable > thead > tr > th.text-end,
table.dataTable > thead > tr > th.dt-actions,
table.dataTable > tbody > tr > td.text-end,
table.dataTable > tbody > tr > td.dt-actions {
    text-align: right !important;
}

/* ===================================================================
   LAPORAN — tabel yang STACK jadi kartu di layar kecil (< 768px).
   Dipakai laporan yang bukan <x-datatable> (Laba Rugi, Buku Pembantu
   Utang/Piutang). Tambahkan class .erp-report-table pada <table> dan
   beri tiap <td> atribut data-label="Judul Kolom". Baris ringkasan
   (total/section) diberi class .erp-report-plain agar tidak di-stack.
   =================================================================== */
.erp-report-table tbody tr[data-href] {
    cursor: pointer;
}
@media (max-width: 767.98px) {
    .erp-report-table {
        border-collapse: separate;
    }
    .erp-report-table thead {
        display: none;
    }
    /* Tiap baris data & baris footer → kartu ber-border (baris rincian collapse
       DIKECUALIKAN agar visibilitasnya tetap dikontrol Bootstrap collapse). */
    .erp-report-table tbody tr:not(.pl-detail-row),
    .erp-report-table tfoot tr {
        display: block;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.6rem;
        padding: 0.35rem 0.6rem;
        margin-bottom: 0.55rem;
        background: var(--bs-body-bg);
    }
    .erp-report-table tfoot tr {
        border-color: var(--bs-primary-border-subtle);
    }
    .erp-report-table tbody tr:not(.pl-detail-row) > td,
    .erp-report-table tfoot tr > td {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        gap: 1rem;
        text-align: left;
        border: 0 !important;
        padding: 0.3rem 0 !important;
        white-space: normal;
    }
    .erp-report-table tbody tr > td[data-label],
    .erp-report-table tfoot tr > td[data-label] {
        justify-content: space-between;
        text-align: right;
    }
    .erp-report-table tbody tr > td[data-label]::before,
    .erp-report-table tfoot tr > td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color);
        text-align: left;
        white-space: nowrap;
    }
    /* Kolom "Kode" pada Laba Rugi: sembunyikan di layar kecil. */
    .erp-report-table tbody tr > td.pl-code {
        display: none;
    }
    /* Baris judul kelompok & subtotal di dalam tbody: 1 baris (label + nilai). */
    .erp-report-table tbody tr.erp-report-section,
    .erp-report-table tbody tr.erp-report-total {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
    }
    .erp-report-table tbody tr.erp-report-section > td,
    .erp-report-table tbody tr.erp-report-total > td {
        display: block;
        border: 0 !important;
        padding: 0.3rem 0 !important;
    }
    .erp-report-table tbody tr.erp-report-section > td::before,
    .erp-report-table tbody tr.erp-report-total > td::before {
        content: none;
    }
    /* Baris rincian (collapse): default TERTUTUP (dikontrol Bootstrap). Saat
       di-expand (.show) tampil sebagai baris tabel penuh, hanya diperkecil. */
    .erp-report-table tbody tr.pl-detail-row.show {
        display: table-row;
    }
    .erp-report-table tbody tr.pl-detail-row > td {
        display: table-cell;
        padding: 0 !important;
    }
    .pl-detail-table {
        font-size: 0.8rem;
    }
    .pl-detail-table th,
    .pl-detail-table td {
        white-space: normal !important;
    }
}

/* ============================================================= *
 * Dashboard — modern hero, stat tiles, metrics
 * ============================================================= */

/* Gradient greeting/hero banner with an embedded global search. */
.erp-hero {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--erp-radius);
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--bs-primary) 0%,
        #4f46e5 55%,
        #7c3aed 100%
    );
    box-shadow: 0 10px 30px -12px rgba(79, 70, 229, 0.55);
}
.erp-hero::after {
    /* soft decorative glow */
    content: "";
    position: absolute;
    inset: auto -60px -120px auto;
    width: 320px;
    height: 320px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.18),
        transparent 70%
    );
    pointer-events: none;
}
.erp-hero .erp-hero-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}
.erp-hero .erp-hero-sub {
    color: rgba(255, 255, 255, 0.82);
}

/* Search field sitting on the hero (glassy). */
.erp-hero .erp-search .form-control,
.erp-hero .erp-search .input-group-text {
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
}
.erp-hero .erp-search .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
}

/* Stat tiles: subtle lift on hover, coloured icon chip. */
.erp-stat {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--erp-radius);
    background: var(--bs-body-bg);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.erp-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.35);
}
.erp-stat .erp-stat-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    font-size: 1.4rem;
}
.erp-stat .erp-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}
.erp-stat .erp-stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Section card headers on the dashboard: quieter, with accent icon. */
.erp-panel {
    border: 1px solid var(--bs-border-color-translucent);
}
.erp-panel .card-header {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    font-weight: 600;
}

/* P&L metric row: big, colour-coded numbers with a soft tinted chip. */
.erp-metric {
    border-radius: var(--erp-radius-sm);
    padding: 0.85rem 1rem;
    height: 100%;
}
.erp-metric .erp-metric-label {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}
.erp-metric .erp-metric-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
}
.erp-metric-income {
    background: var(--bs-success-bg-subtle);
}
.erp-metric-expense {
    background: var(--bs-danger-bg-subtle);
}
.erp-metric-net {
    background: var(--bs-primary-bg-subtle);
}

/* Quick-action pills in the shortcuts row. */
.erp-quick {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--erp-radius-sm);
    border: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    transition:
        transform 0.12s ease,
        border-color 0.12s ease,
        background 0.12s ease;
}
.erp-quick:hover {
    transform: translateY(-2px);
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* ============================================================= *
 * Modern refinement + more faded muted text (global)
 * ============================================================= */

:root {
    /* More faded muted/secondary text — applied everywhere via the BS variable. */
    --bs-secondary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color: rgba(33, 37, 41, 0.38);
    /* Soft page canvas so white cards read crisp and layered (modern). */
    --erp-canvas: #f4f6fa;
    --bs-border-color-translucent: rgba(17, 24, 39, 0.06);
}
[data-bs-theme="dark"] {
    --bs-secondary-color: rgba(231, 234, 238, 0.5);
    --bs-tertiary-color: rgba(231, 234, 238, 0.38);
    --erp-canvas: #14171c;
}

/* Muted text everywhere = the faded secondary tone. */
.text-muted,
.text-secondary,
.form-text {
    color: var(--bs-secondary-color) !important;
}

/* Subtle layered canvas behind the content (navbar + cards keep their surface). */
.erp-content {
    background-color: var(--erp-canvas);
}

/* Cards: hairline border + soft, diffuse shadow instead of hard lines. */
.card {
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.035);
}
.card.shadow-sm {
    box-shadow: 0 4px 16px -8px rgba(17, 24, 39, 0.14) !important;
}
.card.border-0 {
    border-color: transparent !important;
}

/* Table headers: quiet uppercase micro-labels for a modern, calm look. */
.table > thead th,
thead.table-light th,
.table-light > tr > th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background-color: transparent;
}

/* Headings a touch tighter/less heavy for a refined feel. */
h1,
h2,
h3,
.h1,
.h2,
.h3,
.h4 {
    letter-spacing: -0.01em;
}

/* ============================================================= *
 * Sidebar menu search (under the brand)
 * ============================================================= */
/* Sticky: stays pinned at the top of the scroll area (like the brand) while
 * the menu scrolls beneath it. Uses the sidebar surface so items don't bleed. */
.erp-menu-search {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--erp-sb-bg);
    padding-bottom: 0.5rem;
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.25);
}
.erp-menu-search .input-group-text,
.erp-menu-search .form-control {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.erp-menu-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.65);
}
.erp-menu-search .form-control:focus {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
    color: #fff;
}
/* Dark theme: tone down the dashboard hero + make its search field glassy-dark
 * so it follows dark mode instead of staying bright/white. */
[data-bs-theme="dark"] .erp-hero {
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 55%, #6d28d9 100%);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}
[data-bs-theme="dark"] .erp-hero .erp-search .form-control,
[data-bs-theme="dark"] .erp-hero .erp-search .input-group-text {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}
[data-bs-theme="dark"] .erp-hero .erp-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .erp-hero .erp-search .form-control:focus {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Dark theme: table-light rows (e.g. report section headers PENDAPATAN/BEBAN)
 * must follow dark mode instead of staying white. */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: #2b313a;
    --bs-table-border-color: #3a424c;
    color: var(--bs-body-color);
}

/* Dark theme: match the dark sidebar surface instead of the white overlay. */
[data-bs-theme="dark"] .erp-menu-search .input-group-text,
[data-bs-theme="dark"] .erp-menu-search .form-control {
    background: #262b32;
    border-color: #3a424c;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .erp-menu-search .form-control::placeholder {
    color: rgba(231, 234, 238, 0.55);
}
[data-bs-theme="dark"] .erp-menu-search .form-control:focus {
    background: #2b313a;
    border-color: #4a5461;
    box-shadow: none;
    color: var(--bs-body-color);
}

/* Icon-only rail: no room for a search box. */
html[data-erp-sidebar="collapsed"] .erp-sidebar .erp-menu-search {
    display: none;
}

/* ============================================================= *
 * Landing & Auth — logistics/ERP themed, dark-mode aware.
 * Unique freight-route motif; tasteful, reduced-motion-safe.
 * ============================================================= */
:root {
    --erp-brand-1: #004d90;
    --erp-brand-2: #4f46e5;
    --erp-brand-3: #7c3aed;
    --erp-ink: #0b1220;
}

/* ---- Shared decorative background: aurora blobs + engineering grid ---- */
.erp-aurora,
.erp-grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.erp-aurora {
    background:
        radial-gradient(
            38rem 38rem at 82% -8%,
            rgba(79, 70, 229, 0.28),
            transparent 60%
        ),
        radial-gradient(
            32rem 32rem at 10% 108%,
            rgba(0, 77, 144, 0.22),
            transparent 60%
        ),
        radial-gradient(
            26rem 26rem at 55% 40%,
            rgba(124, 58, 237, 0.12),
            transparent 60%
        );
    filter: saturate(115%);
    animation: erpAurora 18s ease-in-out infinite alternate;
}
.erp-grid-bg {
    background-image:
        linear-gradient(
            to right,
            rgba(120, 130, 150, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(120, 130, 150, 0.08) 1px,
            transparent 1px
        );
    background-size: 46px 46px;
    -webkit-mask: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    mask: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    opacity: 0.7;
}
[data-bs-theme="dark"] .erp-grid-bg {
    opacity: 0.5;
}

@keyframes erpAurora {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(0, -1.5%, 0) scale(1.04);
    }
}

/* ---- Entrance + ambient motion ---- */
@keyframes erpRise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes erpFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}
@keyframes erpDraw {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes erpPulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.35);
    }
}

.erp-rise {
    opacity: 0;
    animation: erpRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.erp-rise-1 {
    animation-delay: 0.05s;
}
.erp-rise-2 {
    animation-delay: 0.16s;
}
.erp-rise-3 {
    animation-delay: 0.28s;
}
.erp-rise-4 {
    animation-delay: 0.4s;
}
.erp-rise-5 {
    animation-delay: 0.52s;
}

/* ---- Logistics route motif (shared SVG) ---- */
.erp-route {
    width: 100%;
    height: auto;
    overflow: visible;
}
.erp-route .route-line {
    fill: none;
    stroke: url(#erpRouteGrad);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: erpDraw 2.4s ease-out 0.3s forwards;
}
.erp-route .route-ghost {
    fill: none;
    stroke: rgba(120, 130, 150, 0.18);
    stroke-width: 3;
    stroke-dasharray: 6 10;
    stroke-linecap: round;
}
.erp-route .route-node {
    fill: var(--bs-body-bg);
    stroke: var(--erp-brand-2);
    stroke-width: 3;
}
.erp-route .route-node-glow {
    fill: var(--erp-brand-2);
    transform-origin: center;
    animation: erpPulse 3.2s ease-in-out infinite;
}
.erp-route .route-marker {
    fill: #fff;
    filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.55));
}
.erp-route .route-marker-ring {
    fill: var(--erp-brand-2);
}

/* ---- Animated mascot (auth brand panel) ---- */
.erp-mascot-stage {
    position: relative;
    width: min(60%, 320px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    animation: erpMascotBreathe 4.2s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.erp-mascot-stage .mascot-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    pointer-events: none;
}
.erp-mascot-stage .eye {
    position: absolute;
    left: 33.581%;
    top: 42.827%;
    width: 8.714%;
    height: 14.24%;
    animation: erpMascotLook 7s ease-in-out infinite;
}
.erp-mascot-stage .eye.right {
    left: 57.279%;
}
.erp-mascot-stage .eye-blink {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: erpMascotBlink 5s ease-in-out infinite;
}
.erp-mascot-stage .eye-blink img {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    pointer-events: none;
}
@keyframes erpMascotBreathe {
    0%,
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
    50% {
        transform: translateY(-1.2%) scale(1.012) rotate(-0.4deg);
    }
}
@keyframes erpMascotLook {
    0%,
    10% {
        transform: translate(0, 0);
    }
    16% {
        transform: translate(-22%, 8%);
    }
    30% {
        transform: translate(-22%, 8%);
    }
    38% {
        transform: translate(18%, -12%);
    }
    52% {
        transform: translate(18%, -12%);
    }
    60% {
        transform: translate(0, 12%);
    }
    72% {
        transform: translate(0, 12%);
    }
    80%,
    100% {
        transform: translate(0, 0);
    }
}
@keyframes erpMascotBlink {
    0%,
    90%,
    100% {
        transform: scaleY(1);
    }
    93% {
        transform: scaleY(0.06);
    }
    96% {
        transform: scaleY(1);
    }
}

/* Floating ERP module chips around the visual */
.erp-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 12px 30px -14px rgba(11, 18, 32, 0.35);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    z-index: 2;
    animation: erpFloat 7s ease-in-out infinite;
}
.erp-chip .bi {
    color: var(--erp-brand-2);
    font-size: 1rem;
}
.erp-chip.c1 {
    top: 6%;
    left: -4%;
    animation-delay: 0s;
}
.erp-chip.c2 {
    top: 30%;
    right: -6%;
    animation-delay: 0.8s;
}
.erp-chip.c3 {
    bottom: 20%;
    left: -6%;
    animation-delay: 1.5s;
}
.erp-chip.c4 {
    bottom: 2%;
    right: 2%;
    animation-delay: 2.1s;
}

/* ============================================================= *
 * Landing page
 * ============================================================= */
.erp-landing {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--erp-canvas);
}
.erp-landing-nav {
    position: relative;
    z-index: 3;
}
.erp-landing .erp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--erp-brand-2);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--erp-brand-2) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--erp-brand-2) 22%, transparent);
}
.erp-landing h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.erp-landing .erp-gradient-text {
    background: linear-gradient(
        100deg,
        var(--erp-brand-1),
        var(--erp-brand-2) 45%,
        var(--erp-brand-3)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.erp-landing .hero-stats {
    border-top: 1px solid var(--bs-border-color-translucent);
}
.erp-landing .hero-stat .n {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.erp-landing .hero-stat .l {
    font-size: 0.76rem;
    color: var(--bs-secondary-color);
}
.erp-btn-cta {
    background: linear-gradient(
        100deg,
        var(--erp-brand-1),
        var(--erp-brand-2) 55%,
        var(--erp-brand-3)
    );
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 14px 30px -12px rgba(79, 70, 229, 0.6);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.erp-btn-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -12px rgba(79, 70, 229, 0.7);
}

/* ============================================================= *
 * Auth split-screen
 * ============================================================= */
.erp-authx {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}
.erp-authx-brand {
    display: none;
}
.erp-authx-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    height: 100vh;
    overflow: auto;
    background: var(--erp-canvas);
}
.erp-authx-card {
    width: 100%;
    max-width: 27rem;
}
.erp-authx-card .card {
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 24px 60px -30px rgba(11, 18, 32, 0.45);
}

@media (min-width: 992px) {
    .erp-authx {
        grid-template-columns: 1.05fr 1fr;
    }
    .erp-authx-brand {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.75rem;
        padding: clamp(1.5rem, 3.5vh, 3rem) 3rem;
        height: 100vh;
        overflow: hidden;
        color: #fff;
        background: linear-gradient(
            150deg,
            #0b1220 0%,
            #17205a 45%,
            #3b1f7a 100%
        );
    }
    /* Keep the motif from pushing content past the fold. */
    .erp-authx-brand .erp-route {
        max-height: 34vh;
        width: auto;
        margin-inline: auto;
    }
    .erp-authx-brand .authx-feature {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
    }
    .erp-authx-brand .authx-feature .bi {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        display: grid;
        place-items: center;
        border-radius: 0.6rem;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
    .erp-authx-brand .erp-route .route-node {
        fill: #0b1220;
    }
    .erp-authx-brand .erp-route .route-ghost {
        stroke: rgba(255, 255, 255, 0.18);
    }
}

/* Compact theme toggle for public pages */
.erp-toggle-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color-translucent);
    transition: transform 0.15s ease;
}
.erp-toggle-btn:hover {
    transform: rotate(-15deg);
}
.erp-authx-brand .erp-toggle-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Respect reduced-motion: disable all decorative motion. */
@media (prefers-reduced-motion: reduce) {
    .erp-aurora,
    .erp-chip,
    .erp-route .route-line,
    .erp-route .route-node-glow,
    .erp-rise,
    .erp-route .route-marker,
    .erp-route [class*="animate"] {
        animation: none !important;
    }
    .erp-rise {
        opacity: 1;
    }
    .erp-route .route-line {
        stroke-dashoffset: 0;
    }
}

/* ---- Auth form panel: make the login side feel crafted, not blank ---- */
.erp-authx-main::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 92%);
    height: min(640px, 92%);
    pointer-events: none;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--erp-brand-2) 16%, transparent),
        transparent 70%
    );
}
.erp-authx-main .erp-grid-bg {
    position: absolute;
    opacity: 0.5;
}

.erp-auth-card {
    position: relative;
    overflow: hidden;
}
.erp-auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(
        100deg,
        var(--erp-brand-1),
        var(--erp-brand-2) 55%,
        var(--erp-brand-3)
    );
}

/* Horizontal supply-chain strip (landing) */
.erp-strip {
    max-width: 40rem;
    margin-inline: auto;
}
.erp-strip .erp-route .route-node {
    fill: var(--erp-canvas);
}
.erp-strip-labels {
    display: flex;
    margin-top: 0.5rem;
}
.erp-strip-labels span {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}
.erp-strip-labels .bi {
    color: var(--erp-brand-2);
    font-size: 1rem;
}
.erp-auth-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(150deg, var(--erp-brand-1), var(--erp-brand-3));
    box-shadow: 0 16px 32px -12px rgba(79, 70, 229, 0.7);
    animation: erpFloat 6s ease-in-out infinite;
}
.erp-auth-badge .erp-logo-mask {
    background-color: #fff;
    width: 30px;
    height: 28px;
}
.erp-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--erp-brand-2);
}
.erp-auth-eyebrow::before,
.erp-auth-eyebrow::after {
    content: "";
    width: 1.4rem;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

/* Larger, softer inputs on auth */
.erp-authx .input-group-lg > .form-control {
    min-height: 3rem;
}
.erp-authx .input-group-text {
    background: var(--bs-body-bg);
}

/* ====================================================================
   Brand logo adaptif tema
   - Tema GELAP  : logo tampil dengan WARNA asli (<img>).
   - Tema TERANG : logo tampil MONOKROM 1 warna (siluet via CSS mask,
                   mengikuti currentColor / --erp-logo-mono).
   Catatan: efek monokrom butuh logo transparan (PNG/SVG/WEBP). Logo JPG
   (tanpa alpha) akan tampil sebagai kotak solid saat monokrom.
   ==================================================================== */
.erp-logo-auto {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.erp-logo-auto__img {
    display: block;
    width: auto;
}

/* Siluet monokrom (dipakai di tema terang). */
.erp-logo-auto::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--erp-logo-mono, currentColor);
    -webkit-mask: var(--erp-logo) no-repeat center / contain;
    mask: var(--erp-logo) no-repeat center / contain;
    pointer-events: none;
}

/* Tema terang (default / non-dark): sembunyikan versi warna, tampilkan monokrom. */
:root:not([data-bs-theme="dark"]) .erp-logo-auto__img {
    visibility: hidden;
}

/* Tema gelap: tampilkan warna asli, matikan siluet monokrom. */
[data-bs-theme="dark"] .erp-logo-auto::before {
    content: none;
}

/* ============================================================= *
 * Dashboard v2 — reveal, P&L ticker, driver status, shortcuts
 * (Bootstrap-only, self-hosted; supports light/dark + mobile)
 * ============================================================= */

/* Staggered entrance (reuses the erpRise keyframe). Delay via --d. */
.erp-reveal {
    opacity: 0;
    animation: erpRise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--d, 0ms);
}

/* Ambient bob for stat icons. */
.erp-float {
    animation: erpFloat 6s ease-in-out infinite;
}

/* P&L "stock ticker" caret: nudges up/down continuously. */
.erp-tick {
    display: inline-block;
}
.erp-tick-up {
    animation: erpTickUp 1.1s ease-in-out infinite;
}
.erp-tick-down {
    animation: erpTickDown 1.1s ease-in-out infinite;
}
@keyframes erpTickUp {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}
@keyframes erpTickDown {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}

.erp-pnl .erp-metric-value {
    font-size: 1.15rem;
}
/* Responsive: nilai P&L FLUID mengikuti lebar kartu (clamp+vw) & tetap 1 baris,
 * supaya "Rp 23.973.000,00" tidak patah jadi dua baris di mobile. Desktop tetap. */
@media (max-width: 767.98px) {
    .erp-pnl .erp-metric {
        gap: 0.5rem;
    }
    .erp-pnl .erp-metric-label {
        font-size: clamp(0.68rem, 3vw, 0.85rem);
    }
    .erp-pnl .erp-metric-value {
        font-size: clamp(0.85rem, 4.6vw, 1.2rem);
        white-space: nowrap;
    }
}
.erp-chart-wrap {
    position: relative;
    height: 200px;
}

/* Legend chips in the driver panel header. */
.erp-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bs-secondary-color);
}
.erp-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

/* Driver status grid. */
.erp-driver-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.erp-driver {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--erp-radius-sm);
    background: var(--bs-body-bg);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}
.erp-driver:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.35);
    border-color: var(--bs-primary);
}
.erp-driver.is-inactive {
    opacity: 0.6;
}
.erp-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9rem;
}
.erp-avatar-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
}
.erp-pulse {
    animation: erpDotPulse 1.6s ease-in-out infinite;
}
@keyframes erpDotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0.6);
    }
    70% {
        box-shadow: 0 0 0 0.5rem rgba(var(--bs-warning-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0);
    }
}
.erp-driver-info {
    min-width: 0;
}
.erp-driver-name {
    font-weight: 600;
    line-height: 1.2;
}
.erp-driver-status {
    font-size: 0.78rem;
}
.erp-driver-phone {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Modern animated shortcut tiles. */
.erp-quick-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.erp-quick {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1rem;
    border-radius: var(--erp-radius);
    border: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}
.erp-quick:hover {
    transform: translateY(-4px);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 16px 30px -18px rgba(var(--bs-primary-rgb), 0.85);
}
.erp-quick-ic {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--erp-radius-sm);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    transition: transform 0.18s ease;
}
.erp-quick:hover .erp-quick-ic {
    transform: scale(1.08) rotate(-4deg);
}
/* Shine sweep on hover. */
.erp-quick::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transform: skewX(-18deg);
    transition: left 0.5s ease;
    pointer-events: none;
}
.erp-quick:hover::after {
    left: 130%;
}

/* Dark theme surfaces for the new cards. */
[data-bs-theme="dark"] .erp-driver,
[data-bs-theme="dark"] .erp-quick {
    background: rgba(255, 255, 255, 0.03);
}
[data-bs-theme="dark"] .erp-quick::after {
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.12),
        transparent
    );
}

/* Mobile: 2-up grids. */
@media (max-width: 575.98px) {
    .erp-driver-grid {
        grid-template-columns: 1fr 1fr;
    }
    .erp-quick-grid {
        grid-template-columns: 1fr 1fr;
    }
    .erp-chart-wrap {
        height: 220px;
    }
}

/* Reduced motion: keep everything readable, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .erp-reveal {
        opacity: 1;
        animation: none !important;
    }
    .erp-float,
    .erp-tick-up,
    .erp-tick-down,
    .erp-pulse {
        animation: none !important;
    }
    .erp-quick::after {
        display: none;
    }
}

/* Driver status v2 — donut summary + filterable scroll list (scales to 50+). */
.erp-donut-wrap {
    position: relative;
    height: 200px;
    max-width: 240px;
    margin: 0 auto;
}
.erp-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.erp-donut-total {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}
.erp-donut-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
}

.erp-driver-list {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
/* Sembunyikan scrollbar (tetap bisa di-scroll) — dipakai daftar sopir & armada. */
.erp-driver-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.erp-driver-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.erp-driver-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--erp-radius-sm);
    background: var(--bs-body-bg);
    transition:
        border-color 0.15s ease,
        transform 0.15s ease;
}
.erp-driver-row:hover {
    border-color: var(--bs-primary);
    transform: translateX(3px);
}
.erp-driver-row.is-inactive {
    opacity: 0.55;
}
.erp-avatar-sm {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.78rem;
}
[data-bs-theme="dark"] .erp-driver-row {
    background: rgba(255, 255, 255, 0.03);
}

/* ============================================================= *
 * Dashboard v3 — vivid gradient tiles + colourful shortcuts
 * (fixes "pucat": full-colour cards, bold hover/entrance motion)
 * ============================================================= */

/* Vivid gradient palette (shared by stat tiles + shortcut chips). */
.erp-tile-primary,
.erp-quick-primary {
    --g1: #4f46e5;
    --g2: #818cf8;
}
.erp-tile-info,
.erp-quick-info {
    --g1: #0284c7;
    --g2: #38bdf8;
}
.erp-tile-success,
.erp-quick-success {
    --g1: #059669;
    --g2: #34d399;
}
.erp-tile-warning,
.erp-quick-warning {
    --g1: #d97706;
    --g2: #fbbf24;
}
.erp-tile-danger,
.erp-quick-danger {
    --g1: #e11d48;
    --g2: #fb7185;
}
.erp-tile-secondary,
.erp-quick-secondary {
    --g1: #475569;
    --g2: #94a3b8;
}

/* Stat tiles: full-bleed gradient, white text, clickable. */
.erp-tile {
    --g1: #4f46e5;
    --g2: #818cf8;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--erp-radius);
    color: #fff !important;
    text-decoration: none;
    background: linear-gradient(135deg, var(--g1), var(--g2));
    background-size: 180% 180%;
    background-position: 0% 0%;
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--g1) 75%, transparent);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-position 0.6s ease;
}
.erp-tile:hover {
    transform: translateY(-6px);
    background-position: 100% 100%;
    box-shadow: 0 22px 38px -16px color-mix(in srgb, var(--g1) 85%, transparent);
    color: #fff !important;
}
.erp-tile-ic {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    animation: erpFloat 6s ease-in-out infinite;
}
.erp-tile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.erp-tile-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.92;
}
.erp-tile-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.05;
}
.erp-tile-go {
    margin-left: auto;
    font-size: 1.25rem;
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}
.erp-tile:hover .erp-tile-go {
    opacity: 0.95;
    transform: translateX(0);
}
/* Shine sweep. */
.erp-tile::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.erp-tile:hover::after {
    left: 130%;
}

/* Shortcut chips: vivid gradient icon, colour-matched hover glow. */
.erp-quick-ic {
    background: linear-gradient(
        135deg,
        var(--g1, #4f46e5),
        var(--g2, #818cf8)
    ) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px -10px var(--g1, #4f46e5);
}
.erp-quick:hover {
    border-color: var(--g2, var(--bs-primary));
    color: var(--g1, var(--bs-primary));
    box-shadow: 0 18px 32px -16px var(--g1, rgba(79, 70, 229, 0.6));
}
.erp-quick:hover .erp-quick-ic {
    transform: scale(1.14) rotate(-8deg);
}

/* Any clickable row/card. */
.erp-clickable {
    cursor: pointer;
}
.erp-clickable:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 6%, transparent);
}
tr.erp-clickable:hover {
    outline: 0;
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .erp-tile-ic {
        animation: none !important;
    }
    .erp-tile::after {
        display: none;
    }
    .erp-tile:hover,
    .erp-quick:hover {
        transform: none;
    }
}

/* ============================================================= *
 * Status rows v2 — vivid avatars + per-status colour accents
 * (menghilangkan kesan "pucat" pada daftar sopir & armada)
 * ============================================================= */

/* Avatar gradien penuh (reuse palet --g1/--g2). */
.erp-av-primary {
    --g1: #4f46e5;
    --g2: #818cf8;
}
.erp-av-info {
    --g1: #0284c7;
    --g2: #38bdf8;
}
.erp-av-success {
    --g1: #059669;
    --g2: #34d399;
}
.erp-av-warning {
    --g1: #d97706;
    --g2: #fbbf24;
}
.erp-av-danger {
    --g1: #e11d48;
    --g2: #fb7185;
}
.erp-av-secondary {
    --g1: #475569;
    --g2: #94a3b8;
}
.erp-avatar.erp-av {
    background: linear-gradient(
        135deg,
        var(--g1, #4f46e5),
        var(--g2, #818cf8)
    ) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px var(--g1, #4f46e5);
}

/* Baris daftar tetap NETRAL — warna dipindah ke KARTU panel (bukan list). */
.erp-driver-row {
    border-left: 1px solid var(--bs-border-color-translucent);
}

/* KARTU panel status: SELURUH background di-tint dengan warna aksen. Karena
 * di-mix dengan --bs-body-bg, warnanya otomatis menyesuaikan tema (terang →
 * tint muda, gelap → tint gelap). Aksen: Pengemudi=indigo, Armada=biru. */
.erp-accent-primary {
    --accent: #4f46e5;
}
.erp-accent-info {
    --accent: #0ea5e9;
}
/* Seluruh kartu satu warna (tanpa bar/garis atas, tanpa header berbeda). */
.erp-status-card {
    border: 0;
    background: color-mix(
        in srgb,
        var(--accent) 12%,
        var(--bs-body-bg)
    ) !important;
    box-shadow:
        0 14px 30px -16px color-mix(in srgb, var(--accent) 50%, transparent),
        0 4px 10px -6px rgba(16, 24, 40, 0.18) !important;
}
/* Tombol filter diberi jarak (bukan btn-group yang menyatu). */
.erp-status-filters {
    gap: 0.4rem;
    flex-wrap: wrap;
}
.erp-status-filters > .btn {
    margin-left: 0 !important;
    border-radius: var(--erp-radius-sm) !important;
}
.erp-status-card > .card-header {
    background: transparent;
    border-bottom-color: transparent;
}
/* Baris list: transparan penuh — tanpa background & tanpa border. */
.erp-status-card .erp-driver-row {
    background: transparent;
    border: 0;
}
.erp-status-card .erp-driver-row:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    transform: none;
}

/* Responsive chart container: tinggi tetap + maintainAspectRatio:false pada
 * Chart.js → grafik konsisten & tidak gepeng di mobile (Dashboard Analitik). */
.erp-chartbox {
    position: relative;
    width: 100%;
    height: 300px;
}
.erp-chartbox-sm {
    height: 240px;
}
@media (max-width: 575.98px) {
    .erp-chartbox {
        height: 260px;
    }
    .erp-chartbox-sm {
        height: 220px;
    }
}

/* Dashboard Analitik — ukuran font kartu statistik:
 *  • ≥768 (desktop): tetap/normal.
 *  • 576–767 (2 kolom): sedikit diperkecil.
 *  • <576 (kartu penuh): FLUID mengikuti lebar kartu via clamp()+vw → estetik. */
.erp-analytic-label {
    font-size: 0.8rem;
}
.erp-analytic-num {
    font-size: 1.2rem;
    line-height: 1.2;
}
@media (max-width: 767.98px) {
    .erp-analytic-label {
        font-size: 0.72rem;
    }
    .erp-analytic-num {
        font-size: 1rem;
    }
}
@media (max-width: 575.98px) {
    /* Grid 2 kolom → sel ± setengah layar, jadi skala ~1/2 lebar viewport. */
    .erp-analytic-label {
        font-size: clamp(0.62rem, 2.4vw, 0.74rem);
    }
    .erp-analytic-num {
        font-size: clamp(0.8rem, 3.6vw, 1.05rem);
    }
}

/* ============================================================= *
 * Sidebar polish v2 — struktur & interaksi (bukan sekadar warna)
 * ============================================================= */

/* Brand: pemisah tipis di bawah + jarak lega. */
.erp-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .erp-brand {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

/* Kotak cari: frosted pill + ikon menyatu, fokus jelas. */
.erp-menu-search {
    padding-bottom: 0.5rem;
}
.erp-menu-search .input-group {
    border-radius: var(--erp-radius-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}
.erp-menu-search .input-group-text {
    background: transparent;
    border: 0;
    color: var(--erp-sb-muted);
    padding-right: 0.25rem;
}
.erp-menu-search .form-control {
    background: transparent;
    border: 0;
    color: #fff;
    box-shadow: none !important;
}
.erp-menu-search .form-control::placeholder {
    color: var(--erp-sb-muted);
}
.erp-menu-search .input-group:focus-within {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}
[data-bs-theme="dark"] .erp-menu-search .input-group {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .erp-menu-search .form-control {
    color: var(--bs-body-color);
}

/* Item menu: ikon sekolom rapi + hover mikro-geser. */
.erp-sidebar .nav-link {
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}
.erp-sidebar .nav-link .bi {
    width: 1.25rem;
    text-align: center;
}
.erp-sidebar .nav-link:hover {
    transform: translateX(2px);
}

/* Item AKTIF: pill frosted + bar aksen kiri + ikon ber-aksen. */
.erp-sidebar .nav-link.active {
    position: relative;
    font-weight: 600;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
}
.erp-sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 62%;
    border-radius: 3px;
    background: var(--erp-sb-accent, #fff);
}
.erp-sidebar .nav-link.active .bi {
    color: var(--erp-sb-accent, #fff);
    opacity: 1;
}

/* Header seksi: garis pemisah di atas + tipografi label yang tenang. */
.erp-sidebar .sidebar-group-toggle {
    border-radius: 0;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .erp-sidebar .sidebar-group-toggle {
    border-top-color: rgba(255, 255, 255, 0.06);
}
.erp-sidebar .sidebar-group-toggle span {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    opacity: 0.8;
}
/* Header terasa seperti label (bukan tombol besar): hover cukup mencerahkan teks. */
.erp-sidebar .sidebar-group-toggle:hover {
    background-color: transparent;
    color: var(--erp-sb-hover-text);
}
.erp-sidebar .sidebar-group-toggle:hover span {
    opacity: 1;
}
.erp-sidebar .sidebar-subgroup-label {
    opacity: 0.7;
}

/* Rail (menu diperkecil): sembunyikan bar aksen & garis header biar bersih. */
@media (min-width: 992px) {
    html[data-erp-sidebar="collapsed"] .erp-sidebar .sidebar-group-toggle {
        border-top: 0;
        margin-top: 0;
    }
    html[data-erp-sidebar="collapsed"] .erp-sidebar .nav-link:hover {
        transform: none;
    }
}

/* ============================================================= *
 * Tombol — selaras sidebar: primary bergradasi biru, outline lembut
 * ============================================================= */

/* Primary (biru) memakai gradasi yang sama dengan sidebar. */
.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1d4ed8;
    --bs-btn-active-border-color: #1a44be;
    background-image: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-image: linear-gradient(180deg, #2f74f0 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-image: none;
}

/* Outline: garis lebih halus saat istirahat (tidak terlalu tegas).
   Saat hover Bootstrap tetap mengisi solid seperti biasa. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
    border-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* ===== Pop-up loading: pindah halaman / simpan / hapus =====
   Tampil selama menunggu halaman berikutnya; halaman baru dimuat fresh sehingga
   overlay otomatis hilang begitu halaman selesai tampil. */
.erp-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

.erp-loading-overlay.is-active {
    display: flex;
}

[data-bs-theme="dark"] .erp-loading-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.erp-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    min-width: 120px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--erp-radius-sm, 0.5rem);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.erp-loading-text {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Logo Khairo sebagai mask: warna gradasi mengalir mengikuti bentuk logo
   (PNG transparan dipakai sebagai stencil, bukan <img>). */
.erp-loading-logo {
    width: 96px;
    height: 96px;
    background: linear-gradient(
        90deg,
        #004d90,
        #6f42c1,
        #d63384,
        #6f42c1,
        #004d90
    );
    background-size: 300% 100%;
    -webkit-mask: url("/logo-khairo.png") no-repeat center / contain;
    mask: url("/logo-khairo.png") no-repeat center / contain;
    animation: erpLogoColorFlow 2.2s linear infinite;
}

@keyframes erpLogoColorFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* Maskot versi kecil untuk pop-up loading (memakai ulang animasi mata & kedip
   dari panel login). Ukuran dipatok kecil; posisi mata memakai persen sehingga
   ikut mengecil proporsional. */
.erp-mascot-stage.erp-mascot-sm {
    width: 112px;
    margin-inline: 0;
}

/* Loader: gerak mata dibuat LEBIH BESAR & LEBIH CEPAT agar jelas terlihat
   (gaya "Kiro" — mata melirik kiri/kanan/bawah), plus kedip lebih sering. */
.erp-loading-box .erp-mascot-sm .eye {
    animation: erpLoaderLook 2.6s ease-in-out infinite;
}

.erp-loading-box .erp-mascot-sm .eye-blink {
    animation: erpMascotBlink 3s ease-in-out infinite;
}

@keyframes erpLoaderLook {
    0%,
    8% {
        transform: translate(0, 0);
    }
    18%,
    32% {
        transform: translate(-62%, 14%);
    }
    46%,
    60% {
        transform: translate(62%, -16%);
    }
    72%,
    84% {
        transform: translate(0, 20%);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Baris tabel yang bisa diklik menuju dokumen sumbernya (tr[data-href]). */
tr[data-href] {
    cursor: pointer;
}