/* 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; }

/* ============================================================= *
 * 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;
}

/* ============================================================= *
 * 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): a primary-blue surface so it is never washed out. */
    --erp-sb-bg: linear-gradient(180deg, #0d6efd 0%, #0b5ed7 100%);
    --erp-sb-text: rgba(255, 255, 255, 0.85);
    --erp-sb-muted: rgba(255, 255, 255, 0.6);
    --erp-sb-hover-bg: rgba(255, 255, 255, 0.16);
    --erp-sb-hover-text: #fff;
    --erp-sb-brand: #fff;
    /* Active item looks just like hover (no solid pill). */
    --erp-sb-active-bg: var(--erp-sb-hover-bg);
    --erp-sb-active-text: var(--erp-sb-hover-text);
    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: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 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 {
    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);
    /* Active item looks just like hover. */
    --erp-sb-active-bg: #2a3038;
    --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; }

/* 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.10); }
/* 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; } }

/* ===================================================================
   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;
}

/* ============================================================= *
 * 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.50);
    --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.50);
    --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.20);
    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: #0d6efd;
    --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(13, 110, 253, 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(.22,.61,.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.40s; }
.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,.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,.55)); }
.erp-route .route-marker-ring { fill: var(--erp-brand-2); }

/* Floating ERP module chips around the visual */
.erp-chip {
    position: absolute; display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .8rem; border-radius: 999px; font-weight: 600; font-size: .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, .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: .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: .5rem; font-size: .78rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--erp-brand-2);
    padding: .35rem .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: .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,.6);
    transition: transform .15s ease, box-shadow .15s ease;
}
.erp-btn-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(79,70,229,.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,.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: .7rem; }
    .erp-authx-brand .authx-feature .bi {
        flex-shrink: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .6rem;
        background: rgba(255,255,255,.12); color: #fff;
    }
    .erp-authx-brand .erp-route .route-node { fill: #0b1220; }
    .erp-authx-brand .erp-route .route-ghost { stroke: rgba(255,255,255,.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 .15s ease;
}
.erp-toggle-btn:hover { transform: rotate(-15deg); }
.erp-authx-brand .erp-toggle-btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.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: .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: .5rem; }
.erp-strip-labels span { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: .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, .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: .4rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .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: .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); }