/* ==========================================================================
   BISa design system
   --------------------------------------------------------------------------
   Loaded after the vendor theme (matrix/dist/css/style.min.css) and shared by
   every role: siswa, mentor, admin, investor. Previously each role rendered
   the vendor theme with its own drifted copy of the shell, and two screens
   layered a second UI kit on top. This file is the single source of visual
   truth; the vendor CSS is now only a reset/grid substrate underneath it.

   Contents
     1.  Tokens
     2.  Base & typography
     3.  App shell: topbar, sidebar, page wrapper
     4.  Cards & surfaces
     5.  Buttons
     6.  Forms
     7.  Tables
     8.  Alerts, badges & status
     9.  Modals, tabs, dropdowns
     10. Composite components (stat cards, page header, empty state, timeline)
     11. Utilities
     12. Responsive
     13. Print & reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand ramp — orange. Every interactive value below is contrast-checked
       against the surface it sits on; see the notes beside each token. */
    --bisa-primary-50: #fff7ed;
    --bisa-primary-100: #ffedd5;
    --bisa-primary-200: #fed7aa;
    --bisa-primary-300: #fdba74;
    --bisa-primary-400: #fb923c;
    --bisa-primary-500: #f97316;
    --bisa-primary-600: #ea580c;
    --bisa-primary-700: #c2410c;
    --bisa-primary-800: #9a3412;
    --bisa-primary-900: #7c2d12;

    /* orange-700 is the brightest step that still carries white text at
       WCAG AA (5.18:1); orange-600 is 3.56:1 and is used for fills only. */
    --bisa-primary: var(--bisa-primary-700);
    --bisa-primary-hover: var(--bisa-primary-800);
    --bisa-primary-soft: var(--bisa-primary-50);
    --bisa-primary-vivid: var(--bisa-primary-600);
    --bisa-on-primary: #ffffff;

    /* Accent ramp — yellow. Never used for text: yellow on white tops out
       around 1.9:1. Fills, rails, highlights and chart marks only. */
    --bisa-accent-100: #fef3c7;
    --bisa-accent-200: #fde68a;
    --bisa-accent-300: #fcd34d;
    --bisa-accent-400: #fbbf24;
    --bisa-accent-500: #f59e0b;
    --bisa-accent-600: #d97706;
    --bisa-accent: var(--bisa-accent-400);

    /* The signature orange-to-yellow wash used on brand surfaces. */
    --bisa-brand-gradient: linear-gradient(135deg, var(--bisa-primary-600) 0%, var(--bisa-accent-400) 100%);

    /* Semantic. Warning is deliberately pushed amber-dark so it stays
       distinguishable from the brand yellow. */
    --bisa-success: #047857;
    --bisa-success-soft: #ecfdf5;
    --bisa-warning: #b45309;
    --bisa-warning-soft: #fffbeb;
    --bisa-danger: #be123c;
    --bisa-danger-soft: #fff1f2;
    --bisa-info: #0e7490;
    --bisa-info-soft: #ecfeff;

    /* Neutrals — warmed towards the brand so white never reads blue-grey. */
    --bisa-bg: #fffaf4;
    --bisa-surface: #ffffff;
    --bisa-surface-alt: #fff8f0;
    --bisa-border: #f0e4d6;
    --bisa-border-strong: #dfcbb4;
    --bisa-text: #1c1917;        /* 17.5:1 on white */
    --bisa-text-muted: #78716c;  /*  4.8:1 on white — AA */
    --bisa-text-subtle: #857f78; /*  4.0:1 — hints and placeholders only */

    /* Shell. White sidebar and topbar keep white as a primary theme colour;
       orange carries the active state. */
    --bisa-sidebar-bg: #ffffff;
    --bisa-sidebar-text: #57534e;
    --bisa-sidebar-text-active: var(--bisa-primary);
    --bisa-sidebar-active: var(--bisa-primary-50);
    --bisa-sidebar-hover: #fffaf4;
    --bisa-sidebar-border: #f0e4d6;
    --bisa-sidebar-rail: var(--bisa-primary);
    --bisa-sidebar-heading: #a8a29e;
    --bisa-sidebar-width: 260px;
    --bisa-sidebar-width-mini: 72px;
    --bisa-topbar-bg: #ffffff;
    --bisa-topbar-height: 64px;

    /* Chart marks. One measure across two periods, so this is a sequential
       emphasis pair, not two identities: current period carries the darker,
       higher-contrast step. Validated for CVD separation and lightness. */
    --bisa-chart-current: #c2410c;
    --bisa-chart-previous: #f59e0b;
    --bisa-chart-track: #f5e7d6;

    /* Shape & depth */
    --bisa-radius-sm: 6px;
    --bisa-radius: 10px;
    --bisa-radius-lg: 16px;
    --bisa-radius-pill: 999px;

    /* Shadows carry a warm cast so they sit on the cream canvas. */
    --bisa-shadow-xs: 0 1px 2px rgba(87, 51, 22, 0.05);
    --bisa-shadow-sm: 0 1px 3px rgba(87, 51, 22, 0.08), 0 1px 2px rgba(87, 51, 22, 0.04);
    --bisa-shadow: 0 4px 12px rgba(87, 51, 22, 0.08), 0 2px 4px rgba(87, 51, 22, 0.04);
    --bisa-shadow-lg: 0 12px 32px rgba(87, 51, 22, 0.14);

    /* Rhythm */
    --bisa-space-1: 4px;
    --bisa-space-2: 8px;
    --bisa-space-3: 12px;
    --bisa-space-4: 16px;
    --bisa-space-5: 24px;
    --bisa-space-6: 32px;
    --bisa-space-7: 48px;

    --bisa-font: "Nunito Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bisa-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Bridge the vendor theme's Bootstrap variables onto our ramp so any
       component we have not explicitly restyled still lands on-brand. */
    --bs-primary: var(--bisa-primary);
    --bs-primary-rgb: 194, 65, 12;
    --bs-body-bg: var(--bisa-bg);
    --bs-body-color: var(--bisa-text);
    --bs-border-color: var(--bisa-border);
    --bs-border-radius: var(--bisa-radius);
    --bs-font-sans-serif: var(--bisa-font);
    --bs-link-color: var(--bisa-primary);
    --bs-link-hover-color: var(--bisa-primary-hover);
}

/* Dark mode: honour an explicit choice, otherwise follow the OS. */
:root[data-theme="dark"],
html.dark-theme {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* Warm near-blacks so the dark theme still reads orange, not blue. */
        --bisa-bg: #17120e;
        --bisa-surface: #1f1a16;
        --bisa-surface-alt: #271f1a;
        --bisa-border: #3a2f27;
        --bisa-border-strong: #4d3f34;
        --bisa-text: #f5f0eb;        /* 15.2:1 on the surface */
        --bisa-text-muted: #b9aca2;  /*  7.8:1 */
        --bisa-text-subtle: #8a7d73; /*  4.3:1 */

        /* On a dark surface the ramp inverts: the lighter steps carry. */
        --bisa-primary: var(--bisa-primary-400);   /* 7.6:1 on surface */
        --bisa-primary-hover: var(--bisa-primary-300);
        --bisa-primary-soft: rgba(251, 146, 60, 0.16);
        --bisa-primary-vivid: var(--bisa-primary-500);

        --bisa-success: #34d399;
        --bisa-warning: #fbbf24;
        --bisa-danger: #fb7185;
        --bisa-info: #22d3ee;
        --bisa-success-soft: rgba(52, 211, 153, 0.16);
        --bisa-warning-soft: rgba(251, 191, 36, 0.16);
        --bisa-danger-soft: rgba(251, 113, 133, 0.16);
        --bisa-info-soft: rgba(34, 211, 238, 0.16);

        --bisa-sidebar-bg: #1f1a16;
        --bisa-sidebar-text: #cbbfb5;
        --bisa-sidebar-text-active: var(--bisa-primary-300);
        --bisa-sidebar-active: rgba(251, 146, 60, 0.16);
        --bisa-sidebar-hover: rgba(255, 255, 255, 0.05);
        --bisa-sidebar-border: #3a2f27;
        --bisa-sidebar-rail: var(--bisa-primary-400);
        --bisa-sidebar-heading: #8a7d73;
        --bisa-topbar-bg: #1f1a16;

        /* Re-stepped for the dark surface: both marks clear 3:1 there. */
        --bisa-chart-current: #fb923c;
        --bisa-chart-previous: #c2410c;
        --bisa-chart-track: #3a2f27;

        --bisa-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --bisa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
        --bisa-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
        --bisa-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

        --bs-body-bg: var(--bisa-bg);
        --bs-body-color: var(--bisa-text);
        --bs-border-color: var(--bisa-border);
    }
}

/* The explicit choice repeats the same values; CSS cannot share a block
   between a media query and a plain selector. Keep the two in step. */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Warm near-blacks so the dark theme still reads orange, not blue. */
    --bisa-bg: #17120e;
    --bisa-surface: #1f1a16;
    --bisa-surface-alt: #271f1a;
    --bisa-border: #3a2f27;
    --bisa-border-strong: #4d3f34;
    --bisa-text: #f5f0eb;        /* 15.2:1 on the surface */
    --bisa-text-muted: #b9aca2;  /*  7.8:1 */
    --bisa-text-subtle: #8a7d73; /*  4.3:1 */

    /* On a dark surface the ramp inverts: the lighter steps carry. */
    --bisa-primary: var(--bisa-primary-400);   /* 7.6:1 on surface */
    --bisa-primary-hover: var(--bisa-primary-300);
    --bisa-primary-soft: rgba(251, 146, 60, 0.16);
    --bisa-primary-vivid: var(--bisa-primary-500);

    --bisa-success: #34d399;
    --bisa-warning: #fbbf24;
    --bisa-danger: #fb7185;
    --bisa-info: #22d3ee;
    --bisa-success-soft: rgba(52, 211, 153, 0.16);
    --bisa-warning-soft: rgba(251, 191, 36, 0.16);
    --bisa-danger-soft: rgba(251, 113, 133, 0.16);
    --bisa-info-soft: rgba(34, 211, 238, 0.16);

    --bisa-sidebar-bg: #1f1a16;
    --bisa-sidebar-text: #cbbfb5;
    --bisa-sidebar-text-active: var(--bisa-primary-300);
    --bisa-sidebar-active: rgba(251, 146, 60, 0.16);
    --bisa-sidebar-hover: rgba(255, 255, 255, 0.05);
    --bisa-sidebar-border: #3a2f27;
    --bisa-sidebar-rail: var(--bisa-primary-400);
    --bisa-sidebar-heading: #8a7d73;
    --bisa-topbar-bg: #1f1a16;

    /* Re-stepped for the dark surface: both marks clear 3:1 there. */
    --bisa-chart-current: #fb923c;
    --bisa-chart-previous: #c2410c;
    --bisa-chart-track: #3a2f27;

    --bisa-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bisa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --bisa-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    --bisa-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    --bs-body-bg: var(--bisa-bg);
    --bs-body-color: var(--bisa-text);
    --bs-border-color: var(--bisa-border);
}

/* --------------------------------------------------------------------------
   2. Base & typography
   -------------------------------------------------------------------------- */

body {
    background-color: var(--bisa-bg) !important;
    color: var(--bisa-text);
    font-family: var(--bisa-font);
    font-size: 0.9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bisa-text);
    font-weight: 700;
    letter-spacing: -0.011em;
    line-height: 1.25;
}

h1, .h1 { font-size: 1.875rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

a {
    color: var(--bisa-primary);
    text-decoration: none;
    transition: color var(--bisa-transition);
}

a:hover { color: var(--bisa-primary-hover); }

.text-muted { color: var(--bisa-text-muted) !important; }

hr {
    border: 0;
    border-top: 1px solid var(--bisa-border);
    opacity: 1;
}

code, kbd, pre, samp {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
}

/* A single, consistent focus ring everywhere. The vendor theme removed
   outlines entirely, which made the app unusable by keyboard. */
:focus-visible {
    outline: 2px solid var(--bisa-primary);
    outline-offset: 2px;
    border-radius: var(--bisa-radius-sm);
}

/* --------------------------------------------------------------------------
   3. App shell
   -------------------------------------------------------------------------- */

/* The vendor theme positions the shell with attribute selectors keyed to a
   hardcoded 250px (#main-wrapper[data-sidebartype="full"] .page-wrapper). We
   own the geometry here instead, so the widths come from the tokens above and
   the layout no longer depends on an attribute being set by JavaScript. */

#main-wrapper {
    position: relative;
    min-height: 100vh;
}

.page-wrapper,
#main-wrapper[data-sidebartype="full"] .page-wrapper {
    background-color: var(--bisa-bg);
    margin-left: var(--bisa-sidebar-width);
    min-height: calc(100vh - var(--bisa-topbar-height));
    transition: margin-left var(--bisa-transition);
}

.page-wrapper > .container-fluid {
    padding: var(--bisa-space-5);
    max-width: 1440px;
}

/* Topbar ------------------------------------------------------------------ */

.topbar {
    background: var(--bisa-topbar-bg) !important;
    border-bottom: 1px solid var(--bisa-border);
    box-shadow: var(--bisa-shadow-xs);
    height: var(--bisa-topbar-height);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Signature orange-to-yellow rule across the top of the app. With a white
   sidebar and a white topbar this is what makes the brand read at a glance. */
.topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bisa-brand-gradient);
}

.topbar .top-navbar .navbar-collapse { margin-left: var(--bisa-sidebar-width); }

.topbar .top-navbar .navbar-header .navbar-brand {
    width: auto;
    background: transparent;
}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
    line-height: 1.4;
    height: auto;
}

.topbar .top-navbar .navbar-nav > .nav-item:hover { background: transparent; }

.topbar .nav-toggler,
.topbar .topbartoggler { color: var(--bisa-text-muted); }

.topbar .top-navbar {
    min-height: var(--bisa-topbar-height);
    padding: 0 var(--bisa-space-4);
}

.topbar .navbar-header {
    background: transparent !important;
    display: flex;
    align-items: center;
    width: var(--bisa-sidebar-width);
    transition: width var(--bisa-transition);
}

.topbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--bisa-space-2);
    padding: 0;
}

.topbar .navbar-brand img { max-height: 34px; width: auto; }

.topbar .nav-link {
    color: var(--bisa-text-muted) !important;
    border-radius: var(--bisa-radius);
    padding: var(--bisa-space-2) var(--bisa-space-3) !important;
    transition: background-color var(--bisa-transition), color var(--bisa-transition);
}

.topbar .nav-link:hover,
.topbar .nav-link:focus-visible {
    background-color: var(--bisa-primary-soft);
    color: var(--bisa-primary) !important;
}

/* The role chip in the topbar tells you which app you are in — the four
   role areas used to be visually indistinguishable. */
.bisa-role-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--bisa-space-2);
    background: var(--bisa-primary-soft);
    color: var(--bisa-primary);
    border-radius: var(--bisa-radius-pill);
    padding: var(--bisa-space-1) var(--bisa-space-3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bisa-user-name {
    color: var(--bisa-text);
    font-weight: 600;
    line-height: 1.2;
}

.bisa-user-role {
    color: var(--bisa-text-subtle);
    font-size: 0.75rem;
    line-height: 1.2;
}

.bisa-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--bisa-radius-pill);
    background: var(--bisa-primary);
    color: var(--bisa-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Sidebar ----------------------------------------------------------------- */

.left-sidebar,
#main-wrapper .left-sidebar[data-sidebarbg="skin5"],
#main-wrapper .left-sidebar[data-sidebarbg="skin5"] ul {
    background: var(--bisa-sidebar-bg) !important;
}

.left-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: var(--bisa-sidebar-width);
    padding-top: var(--bisa-topbar-height);
    border-right: 1px solid var(--bisa-sidebar-border);
    box-shadow: none;
    transition: width var(--bisa-transition), left var(--bisa-transition);
}

.left-sidebar .scroll-sidebar {
    height: 100%;
    overflow-y: auto;
}

.left-sidebar .scroll-sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--bisa-border-strong) transparent;
}

.sidebar-nav ul#sidebarnav {
    padding: var(--bisa-space-3) var(--bisa-space-3) var(--bisa-space-6);
}

.sidebar-nav .nav-small-cap {
    color: var(--bisa-sidebar-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--bisa-space-5) var(--bisa-space-3) var(--bisa-space-2);
}

.sidebar-nav ul#sidebarnav li.sidebar-item {
    margin-bottom: 2px;
    width: 100%;
}

.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--bisa-space-3);
    color: var(--bisa-sidebar-text);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--bisa-radius);
    padding: 10px var(--bisa-space-3);
    opacity: 1;
    transition: background-color var(--bisa-transition), color var(--bisa-transition);
}

.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link i {
    /* The vendor theme ships `color: red` on these icons; without this they
       stay red while their labels follow the palette. */
    color: inherit;
    font-size: 1.125rem;
    width: 22px;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link:hover,
.sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link:focus-visible {
    background-color: var(--bisa-sidebar-hover);
    color: var(--bisa-sidebar-text-active);
}

.sidebar-nav ul#sidebarnav li.sidebar-item.selected > .sidebar-link,
.sidebar-nav ul#sidebarnav li.sidebar-item > .sidebar-link.active,
.sidebar-nav ul#sidebarnav li.sidebar-item > .sidebar-link[aria-current="page"] {
    background-color: var(--bisa-sidebar-active);
    color: var(--bisa-sidebar-text-active);
    font-weight: 600;
    position: relative;
}

.sidebar-nav ul#sidebarnav li.sidebar-item.selected > .sidebar-link::before,
.sidebar-nav ul#sidebarnav li.sidebar-item > .sidebar-link.active::before,
.sidebar-nav ul#sidebarnav li.sidebar-item > .sidebar-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: calc(var(--bisa-space-3) * -1);
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--bisa-sidebar-rail);
}

/* Collapsed ("mini") sidebar */
#main-wrapper.mini-sidebar .left-sidebar { width: var(--bisa-sidebar-width-mini); }

#main-wrapper.mini-sidebar .page-wrapper,
#main-wrapper[data-sidebartype="mini-sidebar"] .page-wrapper {
    margin-left: var(--bisa-sidebar-width-mini);
}

#main-wrapper.mini-sidebar .topbar .top-navbar .navbar-collapse {
    margin-left: var(--bisa-sidebar-width-mini);
}

#main-wrapper.mini-sidebar .sidebar-nav .hide-menu,
#main-wrapper.mini-sidebar .sidebar-nav .nav-small-cap { display: none; }

#main-wrapper.mini-sidebar .sidebar-nav ul#sidebarnav li.sidebar-item .sidebar-link {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   4. Cards & surfaces
   -------------------------------------------------------------------------- */

.card {
    background-color: var(--bisa-surface);
    border: 1px solid var(--bisa-border);
    border-radius: var(--bisa-radius-lg);
    box-shadow: var(--bisa-shadow-sm);
    margin-bottom: var(--bisa-space-5);
    transition: box-shadow var(--bisa-transition), border-color var(--bisa-transition);
}

/* Only lift cards that are actually interactive. */
.card.card-hover:hover,
a > .card:hover {
    box-shadow: var(--bisa-shadow);
    border-color: var(--bisa-border-strong);
}

.card-body { padding: var(--bisa-space-5); }

.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--bisa-border);
    padding: var(--bisa-space-4) var(--bisa-space-5);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bisa-space-3);
    flex-wrap: wrap;
}

.card-title {
    color: var(--bisa-text);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: var(--bisa-space-1);
}

.card-subtitle {
    color: var(--bisa-text-muted);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bisa-btn-bg: var(--bisa-surface);
    --bisa-btn-fg: var(--bisa-text);
    --bisa-btn-border: var(--bisa-border-strong);
    --bisa-btn-bg-hover: var(--bisa-surface-alt);

    background-color: var(--bisa-btn-bg);
    color: var(--bisa-btn-fg);
    border: 1px solid var(--bisa-btn-border);
    border-radius: var(--bisa-radius);
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bisa-space-2);
    box-shadow: var(--bisa-shadow-xs);
    transition: background-color var(--bisa-transition), border-color var(--bisa-transition),
        color var(--bisa-transition), box-shadow var(--bisa-transition), transform var(--bisa-transition);
}

.btn:hover {
    background-color: var(--bisa-btn-bg-hover);
    color: var(--bisa-btn-fg);
}

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-sm { padding: 6px 12px; font-size: 0.8125rem; border-radius: var(--bisa-radius-sm); }
.btn-lg { padding: 12px 22px; font-size: 1rem; }

.btn-primary {
    --bisa-btn-bg: var(--bisa-primary);
    --bisa-btn-fg: var(--bisa-on-primary);
    --bisa-btn-border: var(--bisa-primary);
    --bisa-btn-bg-hover: var(--bisa-primary-hover);
}

.btn-primary:hover { border-color: var(--bisa-primary-hover); color: var(--bisa-on-primary); }

.btn-success {
    --bisa-btn-bg: var(--bisa-success);
    --bisa-btn-fg: #ffffff;
    --bisa-btn-border: var(--bisa-success);
    --bisa-btn-bg-hover: #047857;
}

.btn-danger {
    --bisa-btn-bg: var(--bisa-danger);
    --bisa-btn-fg: #ffffff;
    --bisa-btn-border: var(--bisa-danger);
    --bisa-btn-bg-hover: #be123c;
}

.btn-warning {
    --bisa-btn-bg: var(--bisa-warning);
    --bisa-btn-fg: #ffffff;
    --bisa-btn-border: var(--bisa-warning);
    --bisa-btn-bg-hover: #b45309;
}

.btn-info {
    --bisa-btn-bg: var(--bisa-info);
    --bisa-btn-fg: #ffffff;
    --bisa-btn-border: var(--bisa-info);
    --bisa-btn-bg-hover: #0e7490;
}

.btn-secondary {
    --bisa-btn-bg: var(--bisa-surface-alt);
    --bisa-btn-fg: var(--bisa-text);
    --bisa-btn-border: var(--bisa-border-strong);
}

/* Views set `.btn-success.text-white` etc. — keep those legible. */
.btn-primary.text-white,
.btn-success.text-white,
.btn-danger.text-white,
.btn-warning.text-white,
.btn-info.text-white { color: #fff !important; }

.btn-outline-primary {
    --bisa-btn-bg: transparent;
    --bisa-btn-fg: var(--bisa-primary);
    --bisa-btn-border: var(--bisa-primary);
    --bisa-btn-bg-hover: var(--bisa-primary-soft);
}

.btn-link {
    --bisa-btn-bg: transparent;
    --bisa-btn-fg: var(--bisa-primary);
    --bisa-btn-border: transparent;
    --bisa-btn-bg-hover: var(--bisa-primary-soft);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */

.form-label,
label.form-label,
.form-group > label {
    color: var(--bisa-text);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--bisa-space-2);
    display: inline-block;
}

.form-group { margin-bottom: var(--bisa-space-4); }

.form-control,
.form-select,
textarea.form-control {
    background-color: var(--bisa-surface);
    color: var(--bisa-text);
    border: 1px solid var(--bisa-border-strong);
    border-radius: var(--bisa-radius);
    padding: 10px var(--bisa-space-3);
    font-size: 0.9375rem;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color var(--bisa-transition), box-shadow var(--bisa-transition);
}

.form-control::placeholder { color: var(--bisa-text-subtle); }

.form-control:focus,
.form-select:focus {
    background-color: var(--bisa-surface);
    color: var(--bisa-text);
    border-color: var(--bisa-primary);
    box-shadow: 0 0 0 3px var(--bisa-primary-soft);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bisa-surface-alt);
    color: var(--bisa-text-muted);
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--bisa-danger); }

.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--bisa-danger-soft); }

.invalid-feedback,
.text-danger.small {
    color: var(--bisa-danger);
    font-size: 0.8125rem;
}

.form-check-input:checked {
    background-color: var(--bisa-primary);
    border-color: var(--bisa-primary);
}

.form-check-input:focus { box-shadow: 0 0 0 3px var(--bisa-primary-soft); }

.input-group > .form-control { border-radius: var(--bisa-radius) 0 0 var(--bisa-radius); }
.input-group > .input-group-append > .btn,
.input-group > .btn { border-radius: 0 var(--bisa-radius) var(--bisa-radius) 0; }

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    color: var(--bisa-text);
    margin-bottom: 0;
    border-color: var(--bisa-border);
}

.table > thead > tr > th {
    background-color: var(--bisa-surface-alt);
    color: var(--bisa-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--bisa-border);
    padding: var(--bisa-space-3) var(--bisa-space-4);
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-bottom: 1px solid var(--bisa-border);
    padding: var(--bisa-space-3) var(--bisa-space-4);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table > tbody > tr { transition: background-color var(--bisa-transition); }
.table > tbody > tr:hover { background-color: var(--bisa-surface-alt); }

.table-bordered,
.table-bordered > :not(caption) > * > * { border-color: var(--bisa-border); }

/* Wide tables scroll inside their own box rather than the page. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--bisa-radius);
}

/* DataTables controls, so they match the rest of the form styling. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--bisa-surface);
    color: var(--bisa-text);
    border: 1px solid var(--bisa-border-strong);
    border-radius: var(--bisa-radius);
    padding: 6px var(--bisa-space-3);
    margin-left: var(--bisa-space-2);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--bisa-primary);
    box-shadow: 0 0 0 3px var(--bisa-primary-soft);
    outline: none;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--bisa-text-muted); font-size: 0.875rem; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--bisa-radius-sm) !important;
    border: 1px solid transparent !important;
    color: var(--bisa-text-muted) !important;
    padding: 5px 11px !important;
    margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bisa-primary-soft) !important;
    border-color: transparent !important;
    color: var(--bisa-primary) !important;
}

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

/* --------------------------------------------------------------------------
   8. Alerts, badges & status
   -------------------------------------------------------------------------- */

.alert {
    border: 1px solid transparent;
    border-radius: var(--bisa-radius);
    padding: var(--bisa-space-3) var(--bisa-space-4);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: var(--bisa-space-3);
}

.alert-success { background: var(--bisa-success-soft); border-color: var(--bisa-success); color: var(--bisa-success); }
.alert-danger  { background: var(--bisa-danger-soft);  border-color: var(--bisa-danger);  color: var(--bisa-danger); }
.alert-warning { background: var(--bisa-warning-soft); border-color: var(--bisa-warning); color: var(--bisa-warning); }
.alert-info    { background: var(--bisa-info-soft);    border-color: var(--bisa-info);    color: var(--bisa-info); }

.badge {
    border-radius: var(--bisa-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    white-space: nowrap;
}

/* Bootstrap 5 dropped the .badge-* colour classes in favour of .bg-*, and the
   vendor theme never replaced them, so these rendered as unstyled text — the
   only colour came from a hardcoded gradient in one page's <style> block.
   Bridge them onto the status tokens. */
.badge-success { background: var(--bisa-success-soft); color: var(--bisa-success); }
.badge-danger  { background: var(--bisa-danger-soft);  color: var(--bisa-danger); }
.badge-warning { background: var(--bisa-warning-soft); color: var(--bisa-warning); }
.badge-info    { background: var(--bisa-info-soft);    color: var(--bisa-info); }
.badge-primary { background: var(--bisa-primary-soft); color: var(--bisa-primary); }
.badge-secondary { background: var(--bisa-surface-alt); color: var(--bisa-text-muted); }

/* Status pills used by laporan / track screens. */
.bisa-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--bisa-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    white-space: nowrap;
}

.bisa-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.bisa-status--approved { background: var(--bisa-success-soft); color: var(--bisa-success); }
.bisa-status--rejected { background: var(--bisa-danger-soft);  color: var(--bisa-danger); }
.bisa-status--pending  { background: var(--bisa-warning-soft); color: var(--bisa-warning); }
.bisa-status--neutral  { background: var(--bisa-surface-alt);  color: var(--bisa-text-muted); }

/* --------------------------------------------------------------------------
   9. Modals, tabs, dropdowns
   -------------------------------------------------------------------------- */

.modal-content {
    background-color: var(--bisa-surface);
    border: 1px solid var(--bisa-border);
    border-radius: var(--bisa-radius-lg);
    box-shadow: var(--bisa-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--bisa-border);
    padding: var(--bisa-space-4) var(--bisa-space-5);
}

.modal-body { padding: var(--bisa-space-5); }
.modal-title { font-size: 1.0625rem; font-weight: 700; }

.nav-tabs {
    border-bottom: 1px solid var(--bisa-border);
    gap: var(--bisa-space-1);
}

.nav-tabs .nav-link {
    /* These tabs are <button> elements, so without this they pick up the
       browser's default grey button face. */
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--bisa-text-muted);
    font-weight: 600;
    padding: var(--bisa-space-3) var(--bisa-space-4);
    transition: color var(--bisa-transition), border-color var(--bisa-transition);
}

.nav-tabs .nav-link:hover { color: var(--bisa-text); border-bottom-color: var(--bisa-border-strong); }

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--bisa-primary);
    border-bottom-color: var(--bisa-primary);
}

.dropdown-menu {
    background-color: var(--bisa-surface);
    border: 1px solid var(--bisa-border);
    border-radius: var(--bisa-radius);
    box-shadow: var(--bisa-shadow);
    padding: var(--bisa-space-2);
    min-width: 200px;
}

.dropdown-item {
    border-radius: var(--bisa-radius-sm);
    color: var(--bisa-text);
    display: flex;
    align-items: center;
    gap: var(--bisa-space-2);
    font-size: 0.9rem;
    padding: var(--bisa-space-2) var(--bisa-space-3);
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
    background-color: var(--bisa-primary-soft);
    color: var(--bisa-primary);
}

.dropdown-divider { border-color: var(--bisa-border); }

/* --------------------------------------------------------------------------
   10. Composite components
   -------------------------------------------------------------------------- */

/* Page header ------------------------------------------------------------- */

.bisa-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bisa-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--bisa-space-5);
}

.bisa-page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--bisa-space-1);
}

.bisa-page-header__title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: var(--bisa-space-2);
    border-radius: var(--bisa-radius-pill);
    background: var(--bisa-brand-gradient);
}

.bisa-page-header__subtitle {
    color: var(--bisa-text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
}

.breadcrumb-item,
.breadcrumb-item a { color: var(--bisa-text-muted); }
.breadcrumb-item.active { color: var(--bisa-text); font-weight: 600; }

/* Stat cards -------------------------------------------------------------- */

.bisa-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--bisa-space-4);
    margin-bottom: var(--bisa-space-5);
}

.bisa-stat {
    position: relative;
    overflow: hidden;
    background: var(--bisa-surface);
    border: 1px solid var(--bisa-border);
    border-radius: var(--bisa-radius-lg);
    box-shadow: var(--bisa-shadow-sm);
    padding: var(--bisa-space-4) var(--bisa-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--bisa-space-2);
}

.bisa-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bisa-brand-gradient);
}

.bisa-stat__label {
    color: var(--bisa-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--bisa-space-2);
}

.bisa-stat__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--bisa-radius-sm);
    background: var(--bisa-primary-soft);
    color: var(--bisa-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.bisa-stat__value {
    /* Tabular figures keep columns of currency aligned. */
    font-feature-settings: "tnum" 1;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.bisa-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.bisa-stat__delta--up { color: var(--bisa-success); }
.bisa-stat__delta--down { color: var(--bisa-danger); }
.bisa-stat__delta--flat { color: var(--bisa-text-subtle); }

/* Hero number & meter -----------------------------------------------------
   A single headline figure is a stat, not a chart. The meter beside it gives
   the same value a proportional read without pretending to be a gauge. */

.bisa-hero-number {
    font-feature-settings: "tnum" 1;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 var(--bisa-space-2);
    display: flex;
    align-items: center;
    gap: var(--bisa-space-2);
}

.bisa-hero-number i { font-size: 0.7em; }

.bisa-meter {
    margin-top: var(--bisa-space-4);
    height: 8px;
    border-radius: var(--bisa-radius-pill);
    background: var(--bisa-chart-track);
    overflow: hidden;
}

.bisa-meter__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--bisa-brand-gradient);
}

/* Empty state ------------------------------------------------------------- */

.bisa-empty {
    text-align: center;
    padding: var(--bisa-space-7) var(--bisa-space-5);
    color: var(--bisa-text-muted);
}

.bisa-empty__icon {
    font-size: 2.5rem;
    color: var(--bisa-text-subtle);
    margin-bottom: var(--bisa-space-3);
    display: block;
}

.bisa-empty__title {
    color: var(--bisa-text);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: var(--bisa-space-2);
}

.bisa-empty__body { margin: 0 auto var(--bisa-space-4); max-width: 44ch; }

/* Step / track timeline --------------------------------------------------- */

.bisa-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bisa-space-3);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bisa-space-5);
}

.bisa-step {
    flex: 1 1 160px;
    background: var(--bisa-surface);
    border: 1px solid var(--bisa-border);
    border-left: 3px solid var(--bisa-border-strong);
    border-radius: var(--bisa-radius);
    padding: var(--bisa-space-3) var(--bisa-space-4);
}

.bisa-step--done { border-left-color: var(--bisa-success); }
.bisa-step--current { border-left-color: var(--bisa-primary); box-shadow: var(--bisa-shadow-sm); }

.bisa-step__index {
    color: var(--bisa-text-subtle);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bisa-step__name { font-weight: 600; }

/* Step / material cards ---------------------------------------------------
   `.card-step` was redefined in 17 different views, with the definitions
   drifting apart (three different min-heights, two different hover effects).
   This is the canonical one. */

.card-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    text-align: center;
}

.card-step .card-body {
    display: flex;
    flex-direction: column;
    gap: var(--bisa-space-2);
    flex: 1;
}

.card-step img {
    width: auto;
    max-height: 96px;
    margin: 0 auto var(--bisa-space-2);
    object-fit: contain;
}

.card-step h5,
.card-step .card-step__title {
    font-size: 1rem;
    margin: 0;
}

/* Clamp to three lines instead of a fixed 90px, which cut text mid-glyph. */
.card-step .deskripsi-step {
    color: var(--bisa-text-muted);
    font-size: 0.875rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Push the action to the bottom so a row of cards lines up. */
.card-step .btn,
.card-step .card-step__action { margin-top: auto; }

.card-step .read-more {
    display: block;
    margin-top: var(--bisa-space-2);
    color: var(--bisa-primary);
    font-size: 0.875rem;
}

/* Wide modals ------------------------------------------------------------- */

/* Several screens set `.modal-dialog { max-width: 75% }` inline. Bootstrap's
   own `.modal-lg`/`.modal-xl` cover this; `.modal-wide` is here for the pages
   that genuinely need a near-full-width dialog. */
.modal-wide { max-width: min(1100px, 92vw); }

@media (max-width: 720px) {
    .modal-wide,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl { max-width: 100%; margin: var(--bisa-space-3); }
}

/* Entrance animation ------------------------------------------------------
   Views hand-rolled several near-identical @keyframes; this is the shared one.
   It is disabled wholesale by the reduced-motion block at the end of the file. */

@keyframes bisa-fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.bisa-fade-in,
.animated.fadeInUp { animation: bisa-fade-in-up 320ms ease-out both; }

/* Chat -------------------------------------------------------------------- */

.bisa-chat { display: flex; flex-direction: column; gap: var(--bisa-space-3); }

.bisa-chat__bubble {
    align-self: flex-start;
    max-width: min(72ch, 80%);
    background: var(--bisa-surface-alt);
    border: 1px solid var(--bisa-border);
    border-radius: var(--bisa-radius-lg);
    padding: var(--bisa-space-3) var(--bisa-space-4);
}

.bisa-chat__bubble--mine {
    align-self: flex-end;
    background: var(--bisa-primary);
    border-color: var(--bisa-primary);
    color: var(--bisa-on-primary);
}

.bisa-chat__meta { font-size: 0.75rem; opacity: 0.75; margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */

.bisa-surface { background: var(--bisa-surface); border: 1px solid var(--bisa-border); border-radius: var(--bisa-radius-lg); }
.bisa-muted { color: var(--bisa-text-muted); }
.bisa-numeric { font-feature-settings: "tnum" 1; }

/* Give screen-reader users a way past the sidebar. */
.bisa-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    background: var(--bisa-primary);
    color: var(--bisa-on-primary);
    padding: var(--bisa-space-3) var(--bisa-space-4);
    border-radius: 0 0 var(--bisa-radius) 0;
    font-weight: 600;
}

.bisa-skip-link:focus {
    left: 0;
    color: var(--bisa-on-primary);
}

/* Images should never blow out their container. */
img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    /* Off-canvas sidebar. The vendor theme shipped almost no rules for this
       state, so on a phone the sidebar sat on top of the content. */
    .left-sidebar {
        left: calc(var(--bisa-sidebar-width) * -1);
        box-shadow: var(--bisa-shadow-lg);
    }

    #main-wrapper.show-sidebar .left-sidebar { left: 0; }

    .page-wrapper,
    #main-wrapper[data-sidebartype="full"] .page-wrapper,
    #main-wrapper.mini-sidebar .page-wrapper { margin-left: 0; }

    .topbar .top-navbar .navbar-collapse,
    #main-wrapper.mini-sidebar .topbar .top-navbar .navbar-collapse { margin-left: 0; }

    .topbar .navbar-header {
        width: 100%;
        justify-content: space-between;
    }

    /* Dim the page behind the open drawer. */
    #main-wrapper.show-sidebar .page-wrapper::after {
        content: "";
        position: fixed;
        inset: var(--bisa-topbar-height) 0 0 0;
        background: rgba(15, 17, 23, 0.45);
        z-index: 30;
    }

    .page-wrapper > .container-fluid { padding: var(--bisa-space-4); }

    .bisa-page-header { flex-direction: column; align-items: stretch; }

    .card-body { padding: var(--bisa-space-4); }

    .bisa-stat__value { font-size: 1.375rem; }
}

@media (max-width: 575.98px) {
    body { font-size: 0.9rem; }

    .bisa-stat-grid { grid-template-columns: 1fr; }

    /* Stacked buttons are easier to hit than a wrapped row of them. */
    .bisa-actions { display: flex; flex-direction: column; gap: var(--bisa-space-2); }
    .bisa-actions > .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   13. Print & reduced motion
   -------------------------------------------------------------------------- */

@media print {
    .topbar,
    .left-sidebar,
    .bisa-actions,
    .btn,
    .dataTables_filter,
    .dataTables_paginate { display: none !important; }

    .page-wrapper { margin-left: 0 !important; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}