/* =============================================
   TOKENS
============================================= */

:root {
    --sidebar-w: 286px;
    --topbar-h: 60px;

    /* Sidebar */
    --sb-bg: #ffffff;
    --sb-border: #e5e7eb;
    --sb-text: #64748b;
    --sb-text-active: #0f172a;
    --sb-hover-bg: #f8fafc;
    --sb-active-bg: #eaf6f5;
    --sb-section-label: #94a3b8;

    /* Surface */
    --body-bg: #fafbfc;
    --surface: #fff;
    --surface-subtle: #f8fafc;
    --border: #e5e7eb;
    --border-strong: #cbd5e1;

    /* Tokens */
    --primary: #0f8b86;
    --primary-hover: #0b716d;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0891b2;
    --text: #0f172a;
    --text-soft: #334155;
    --muted: #64748b;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow-md: 0 10px 24px rgba(15,23,42,.08);
    --shadow-lg: 0 18px 42px rgba(15,23,42,.12);
}

/* =============================================
   RESET
============================================= */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background: var(--body-bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

:focus-visible {
    outline: 3px solid rgba(37,99,235,.22);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -48px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    transition: top .15s ease;
}

.skip-link:focus {
    top: 14px;
    color: #fff;
}

/* =============================================
   APP SHELL
============================================= */

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* =============================================
   SIDEBAR
============================================= */

.sidebar {
    width: var(--sidebar-w);
    background: var(--sb-bg);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    border-right: 1px solid var(--sb-border);
    box-shadow: 1px 0 0 rgba(15,23,42,.02);
    transition: transform .25s ease;
}

/* Brand */

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--topbar-h);
    padding: 10px 16px;
    border-bottom: 1px solid var(--sb-border);
}

.sidebar-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
}

.sidebar-brand-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
}

.sidebar-brand-sub {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .02em;
}

/* Navigation */

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
}

.nav-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--sb-section-label);
    padding: 0 10px;
    margin-bottom: 6px;
}

.nav-section-label.mt-3 { margin-top: 18px; }

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--sb-text);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
    position: relative;
}

.sidebar-nav .nav-link i {
    font-size: 17px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-nav .nav-link:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-text-active);
}

.sidebar-nav .nav-link.active {
    background: var(--sb-active-bg);
    color: var(--sb-text-active);
    box-shadow: none;
    color: #087a76;
    font-weight: 700;
}

/* Footer */

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--sb-border);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    color: var(--sb-text);
    font-size: 11px;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--sb-text);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--sb-border);
    transition: background .15s, color .15s, border-color .15s;
}

.sidebar-logout:hover {
    background: #fef2f2;
    color: var(--danger);
    border-color: #fecaca;
}

.sidebar-logout i { font-size: 15px; }

/* =============================================
   MAIN WRAPPER
============================================= */

.main-wrapper {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =============================================
   TOPBAR
============================================= */

.topbar {
    height: var(--topbar-h);
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
    position: sticky;
    top: 0;
    z-index: 500;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(15,23,42,.02);
}

.topbar-toggle {
    background: none;
    border: none;
    padding: 6px;
    color: var(--muted);
    font-size: 22px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.topbar-breadcrumb {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.topbar-section {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.topbar-page {
    font-size: 14px;
    font-weight: 750;
    color: var(--text);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.topbar-icon-btn:hover {
    background: var(--body-bg);
    color: var(--text);
}

.overdue-loan-trigger {
    color: var(--danger);
}

.overdue-loan-trigger:hover,
.overdue-loan-trigger:focus-visible,
.overdue-loan-trigger[aria-expanded="true"] {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.overdue-loan-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
}

.overdue-loan-menu {
    width: min(420px, calc(100vw - 24px));
    margin-top: 10px !important;
    padding: 0;
    overflow: hidden;
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.overdue-loan-menu-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.overdue-loan-menu-header > div,
.overdue-loan-item-main {
    min-width: 0;
}

.overdue-loan-menu-header strong,
.overdue-loan-menu-header span,
.overdue-loan-item strong,
.overdue-loan-item span {
    display: block;
}

.overdue-loan-menu-header strong {
    color: var(--text);
    font-size: 14px;
}

.overdue-loan-menu-header span,
.overdue-loan-item span {
    color: var(--muted);
    font-size: 12px;
}

.overdue-loan-menu-icon {
    flex: 0 0 auto;
    color: var(--danger) !important;
    font-size: 18px !important;
}

.overdue-loan-list {
    max-height: min(420px, calc(100vh - 190px));
    overflow-y: auto;
}

.overdue-loan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: normal;
}

.overdue-loan-item:hover,
.overdue-loan-item:focus {
    background: var(--surface-subtle);
    color: var(--text);
}

.overdue-loan-item-main strong {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overdue-loan-item-value {
    flex: 0 0 auto;
    text-align: right;
}

.overdue-loan-item-value strong {
    color: var(--danger);
    font-size: 13px;
}

.overdue-loan-menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.overdue-loan-menu-footer:hover,
.overdue-loan-menu-footer:focus-visible {
    background: var(--surface-subtle);
    color: var(--primary-hover);
}

.notif-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid var(--surface);
}

.topbar-user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: background .15s;
}

.topbar-user-pill:hover { background: #e2e8f0; }

.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-username {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

/* =============================================
   MESSAGES
============================================= */

.messages-wrapper {
    padding: 16px 24px 0;
}

.messages-wrapper .alert {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* =============================================
   PAGE CONTENT
============================================= */

.page-content {
    flex: 1;
    padding: 24px;
}

/* =============================================
   CARDS
============================================= */

.crm-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

/* =============================================
   KPI STATS
============================================= */

.stats-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 20px 22px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.stats-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.stats-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.stats-icon.blue { background: #dbeafe; color: #1d4ed8; }
.stats-icon.green { background: #dcfce7; color: #16a34a; }
.stats-icon.orange { background: #ffedd5; color: #ea580c; }
.stats-icon.purple { background: #ede9fe; color: #7c3aed; }

.stats-label {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 4px;
}

.stats-value {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

/* =============================================
   FINANCE BOX
============================================= */

.finance-box {
    background: var(--body-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    height: 100%;
}

.finance-box small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

.finance-box h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
}

/* =============================================
   TABLES
============================================= */

.table {
    margin-bottom: 0;
}

.table thead {
    background: #f8fafc;
}

.table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-color: var(--border);
}

/* =============================================
   FORMS
============================================= */

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.form-control,
.form-select {
    height: 42px;
    border-radius: var(--radius-md);
    border: 1px solid #d1d5db;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29,78,216,.12);
    outline: none;
}

textarea.form-control {
    height: auto;
    min-height: 90px;
    resize: vertical;
}

/* =============================================
   BUTTONS
============================================= */

.btn {
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

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

.btn-sm { border-radius: var(--radius-sm); }

.btn-light {
    background: #fff;
    border-color: var(--border);
    color: var(--text-soft);
}

.btn-light:hover {
    background: var(--surface-subtle);
    border-color: var(--border-strong);
    color: var(--text);
}

/* =============================================
   BADGES
============================================= */

.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .02em;
}

/* =============================================
   ACTION BUTTONS
============================================= */

.action-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.action-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 15px;
    transition: background .15s, color .15s, border-color .15s;
}

.action-btn:hover {
    background: var(--body-bg);
    color: var(--text);
}

/* =============================================
   PIPELINE BOX
============================================= */

.pipeline-box {
    background: var(--body-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    text-align: center;
}

.pipeline-box h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* =============================================
   DASHBOARD
============================================= */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    gap: 16px;
}

.dashboard-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.dashboard-subtitle {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 0;
}

.dashboard-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* =============================================
   DOC STATUS
============================================= */

.document-list { list-style: none; padding: 0; margin: 0; }

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.document-item:last-child { border-bottom: none; }

.document-complete { color: #16a34a; }
.document-pending { color: #dc2626; }

/* =============================================
   MOBILE
============================================= */

@media (max-width: 991px) {

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(15,23,42,.46);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
    }

    .sidebar-backdrop.sidebar-backdrop-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .main-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .page-content {
        padding: 18px 14px;
    }

    .topbar {
        padding: 0 16px;
    }

}

/* =============================================
   COREUI-STYLE APP SHELL
============================================= */

:root,
[data-bs-theme="light"] {
    --coreui-sidebar-w: 264px;
    --coreui-sidebar-collapsed-w: 72px;
    --coreui-header-h: 58px;
    --body-bg: #f3f4f7;
    --surface: #fff;
    --surface-subtle: #f8fafc;
    --border: #d8dbe0;
    --border-strong: #c4c9d0;
    --text: #1f2937;
    --text-soft: #334155;
    --muted: #667085;
    --primary: #321fdb;
    --primary-hover: #2919b8;
    --sb-bg: #2f353a;
    --sb-border: rgba(255,255,255,.08);
    --sb-text: #c2c7d0;
    --sb-text-active: #fff;
    --sb-hover-bg: rgba(255,255,255,.08);
    --sb-active-bg: #321fdb;
}

[data-bs-theme="dark"] {
    --body-bg: #181924;
    --surface: #212631;
    --surface-subtle: #2a303d;
    --surface-soft: #252b38;
    --border: #343b49;
    --border-strong: #4b5565;
    --text: #f3f4f7;
    --text-soft: #d8dbe0;
    --muted: #aab2c0;
    --primary: #6d8dff;
    --primary-hover: #8aa4ff;
    --sb-bg: #1f232a;
    --sb-border: rgba(255,255,255,.08);
    --sb-text: #bac1cc;
    --sb-text-active: #fff;
    --sb-hover-bg: rgba(255,255,255,.08);
    --sb-active-bg: #4f46e5;
    color-scheme: dark;
}

.coreui-shell {
    background: var(--body-bg);
}

.coreui-sidebar {
    width: var(--coreui-sidebar-w);
    background: var(--sb-bg);
    color: var(--sb-text);
    border-right: 1px solid var(--sb-border);
    box-shadow: none;
    transition: width .2s ease, transform .22s ease;
    overflow-x: hidden;
    will-change: width, transform;
}

.coreui-sidebar-brand {
    min-height: var(--coreui-header-h);
    padding: 12px 16px;
    border-bottom: 1px solid var(--sb-border);
    background: rgba(0,0,0,.08);
}

.coreui-sidebar .sidebar-brand-name,
.coreui-sidebar .sidebar-user-name {
    color: #fff;
}

.coreui-sidebar .sidebar-brand-sub,
.coreui-sidebar .sidebar-user-role,
.coreui-sidebar .nav-section-label {
    color: rgba(255,255,255,.62);
}

.coreui-sidebar-nav {
    padding: 12px 10px;
}

.coreui-sidebar .nav-link {
    min-height: 42px;
    border-radius: 6px;
    color: var(--sb-text);
    padding: 10px 12px;
}

.coreui-sidebar .nav-link:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-text-active);
}

.coreui-sidebar .nav-link.active {
    background: var(--sb-active-bg);
    color: var(--sb-text-active);
    box-shadow: none;
}

.coreui-sidebar-footer {
    border-top: 1px solid var(--sb-border);
    background: rgba(0,0,0,.08);
}

.coreui-main {
    margin-left: var(--coreui-sidebar-w);
    width: calc(100% - var(--coreui-sidebar-w));
    transition: margin-left .2s ease, width .2s ease;
}

.coreui-header {
    min-height: var(--coreui-header-h);
    height: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    padding: 0 20px;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}

.coreui-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid transparent;
    color: var(--muted);
    background: transparent;
}

.coreui-icon-btn:hover {
    color: var(--text);
    background: var(--surface-subtle);
    border-color: var(--border);
}

.coreui-breadcrumb {
    flex-direction: row;
    align-items: center;
    gap: 9px;
    line-height: 1;
}

.coreui-breadcrumb .topbar-section::after {
    content: "/";
    margin-left: 9px;
    color: var(--muted);
}

.topbar-section {
    color: var(--muted);
}

.topbar-page {
    color: var(--text);
}

.coreui-header-actions {
    margin-left: auto;
}

.topbar-user-pill {
    border-radius: 6px;
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.topbar-user-pill:hover {
    background: var(--surface-subtle);
}

.topbar-avatar,
.sidebar-avatar {
    background: var(--primary);
}

.coreui-user-menu {
    min-width: 230px;
    padding: 8px;
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}

.coreui-user-menu .dropdown-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text);
}

.coreui-user-menu .dropdown-header span {
    color: var(--muted);
    font-size: 12px;
}

.coreui-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 6px;
    font-size: 13px;
}

.coreui-content {
    padding: 22px;
    overflow-x: hidden;
}

.app-sidebar-collapsed .coreui-sidebar,
.sidebar-collapsed-preload .coreui-sidebar {
    width: var(--coreui-sidebar-collapsed-w);
}

.app-sidebar-collapsed .coreui-main,
.sidebar-collapsed-preload .coreui-main {
    margin-left: var(--coreui-sidebar-collapsed-w);
    width: calc(100% - var(--coreui-sidebar-collapsed-w));
}

.app-sidebar-collapsed .sidebar-brand-text,
.app-sidebar-collapsed .nav-section-label,
.app-sidebar-collapsed .coreui-sidebar .nav-link span,
.app-sidebar-collapsed .sidebar-user-info,
.sidebar-collapsed-preload .sidebar-brand-text,
.sidebar-collapsed-preload .nav-section-label,
.sidebar-collapsed-preload .coreui-sidebar .nav-link span,
.sidebar-collapsed-preload .sidebar-user-info {
    display: none;
}

.app-sidebar-collapsed .coreui-sidebar-brand,
.app-sidebar-collapsed .coreui-sidebar .nav-link,
.app-sidebar-collapsed .sidebar-user,
.sidebar-collapsed-preload .coreui-sidebar-brand,
.sidebar-collapsed-preload .coreui-sidebar .nav-link,
.sidebar-collapsed-preload .sidebar-user {
    justify-content: center;
}

.app-sidebar-collapsed .coreui-sidebar-nav,
.sidebar-collapsed-preload .coreui-sidebar-nav {
    padding-left: 8px;
    padding-right: 8px;
}

.app-sidebar-collapsed .sidebar-logo,
.sidebar-collapsed-preload .sidebar-logo {
    width: 44px;
    height: 44px;
}

.app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar {
    width: var(--coreui-sidebar-w);
    z-index: 1045;
    box-shadow: var(--shadow-lg, 0 18px 44px rgba(15, 23, 42, .2));
}

.app-sidebar-collapsed.sidebar-hover-expanded .sidebar-brand-text,
.app-sidebar-collapsed.sidebar-hover-expanded .nav-section-label,
.app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar .nav-link span,
.app-sidebar-collapsed.sidebar-hover-expanded .sidebar-user-info {
    display: flex;
}

.app-sidebar-collapsed.sidebar-hover-expanded .nav-section-label,
.app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar .nav-link span {
    display: block;
}

.app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar-brand,
.app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar .nav-link,
.app-sidebar-collapsed.sidebar-hover-expanded .sidebar-user {
    justify-content: flex-start;
}

.app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar-nav {
    padding-left: 10px;
    padding-right: 10px;
}

.app-sidebar-collapsed.sidebar-hover-expanded .sidebar-logo {
    width: 58px;
    height: 58px;
}

.app-sidebar-collapsed.sidebar-hover-expanded .coreui-main {
    margin-left: var(--coreui-sidebar-collapsed-w);
    width: calc(100% - var(--coreui-sidebar-collapsed-w));
}

.app-sidebar-collapsed .coreui-sidebar .dropdown-menu,
.app-sidebar-collapsed .coreui-sidebar .collapse,
.app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar .dropdown-menu,
.app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar .collapse {
    overflow: visible;
}

[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .alert,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--border);
}

[data-bs-theme="dark"] .table thead,
[data-bs-theme="dark"] .table thead th {
    background: var(--surface-subtle);
    color: var(--muted);
}

[data-bs-theme="dark"] .btn-light {
    background: var(--surface-subtle);
    border-color: var(--border);
    color: var(--text);
}

@media (max-width: 991.98px) {
    .coreui-sidebar {
        width: var(--coreui-sidebar-w);
        transform: translateX(-100%);
    }

    .app-sidebar-collapsed .coreui-sidebar,
    .sidebar-collapsed-preload .coreui-sidebar,
    .app-sidebar-collapsed.sidebar-hover-expanded .coreui-sidebar {
        width: var(--coreui-sidebar-w);
    }

    .app-sidebar-collapsed .sidebar-brand-text,
    .app-sidebar-collapsed .nav-section-label,
    .app-sidebar-collapsed .coreui-sidebar .nav-link span,
    .app-sidebar-collapsed .sidebar-user-info,
    .sidebar-collapsed-preload .sidebar-brand-text,
    .sidebar-collapsed-preload .nav-section-label,
    .sidebar-collapsed-preload .coreui-sidebar .nav-link span,
    .sidebar-collapsed-preload .sidebar-user-info {
        display: flex;
    }

    .app-sidebar-collapsed .nav-section-label,
    .app-sidebar-collapsed .coreui-sidebar .nav-link span,
    .sidebar-collapsed-preload .nav-section-label,
    .sidebar-collapsed-preload .coreui-sidebar .nav-link span {
        display: block;
    }

    .app-sidebar-collapsed .coreui-sidebar-brand,
    .app-sidebar-collapsed .coreui-sidebar .nav-link,
    .app-sidebar-collapsed .sidebar-user,
    .sidebar-collapsed-preload .coreui-sidebar-brand,
    .sidebar-collapsed-preload .coreui-sidebar .nav-link,
    .sidebar-collapsed-preload .sidebar-user {
        justify-content: flex-start;
    }

    .coreui-sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .coreui-main,
    .app-sidebar-collapsed .coreui-main,
    .sidebar-collapsed-preload .coreui-main,
    .app-sidebar-collapsed.sidebar-hover-expanded .coreui-main {
        margin-left: 0;
        width: 100%;
    }

    .coreui-content {
        padding: 16px 12px;
    }

    .coreui-header {
        padding: 0 12px;
    }

    .coreui-breadcrumb {
        min-width: 0;
    }

    .topbar-page {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .overdue-loan-item {
        gap: 10px;
        padding: 11px 13px;
    }
}

/* =============================================
   PREMIUM FINANCIAL PRODUCTION DESIGN SYSTEM
============================================= */

:root,
[data-bs-theme="light"] {
    --premium-bg: #f5f2ea;
    --premium-surface: #fffdf8;
    --premium-surface-soft: #f4efe4;
    --premium-border: #ded4c3;
    --premium-border-strong: #bdaa90;
    --premium-text: #171b1f;
    --premium-text-soft: #374151;
    --premium-muted: #6b655d;
    --premium-primary: #0f766e;
    --premium-primary-hover: #115e59;
    --premium-success: #15803d;
    --premium-warning: #a16207;
    --premium-danger: #b42318;
    --premium-sidebar-bg: #18201f;
    --premium-sidebar-active: #0f766e;
    --premium-shadow-sm: 0 1px 2px rgba(23, 27, 31, .07);
    --premium-shadow-md: 0 14px 32px rgba(23, 27, 31, .12);

    --body-bg: var(--premium-bg);
    --surface: var(--premium-surface);
    --surface-subtle: var(--premium-surface-soft);
    --border: var(--premium-border);
    --border-strong: var(--premium-border-strong);
    --text: var(--premium-text);
    --text-soft: var(--premium-text-soft);
    --muted: var(--premium-muted);
    --primary: var(--premium-primary);
    --primary-hover: var(--premium-primary-hover);
    --success: var(--premium-success);
    --warning: var(--premium-warning);
    --danger: var(--premium-danger);
    --sb-bg: var(--premium-sidebar-bg);
    --sb-active-bg: var(--premium-sidebar-active);
    --sb-hover-bg: rgba(255, 255, 255, .08);
    --sb-text: #d4d8d4;
    --sb-text-active: #ffffff;
    --sb-section-label: #9da89f;
    --shadow-sm: var(--premium-shadow-sm);
    --shadow-md: var(--premium-shadow-md);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --coreui-sidebar-w: 282px;
    --coreui-sidebar-collapsed-w: 76px;
    --coreui-header-h: 64px;
}

[data-bs-theme="dark"] {
    --premium-bg: #101615;
    --premium-surface: #1b2422;
    --premium-surface-soft: #24302d;
    --premium-border: #3a4945;
    --premium-border-strong: #60706b;
    --premium-text: #fbfaf5;
    --premium-text-soft: #e7e1d6;
    --premium-muted: #b7aea0;
    --premium-primary: #5eead4;
    --premium-primary-hover: #99f6e4;
    --premium-success: #86efac;
    --premium-warning: #facc15;
    --premium-danger: #fca5a5;
    --premium-sidebar-bg: #0b1110;
    --premium-sidebar-active: #0f766e;
    --body-bg: var(--premium-bg);
    --surface: var(--premium-surface);
    --surface-subtle: var(--premium-surface-soft);
    --border: var(--premium-border);
    --border-strong: var(--premium-border-strong);
    --text: var(--premium-text);
    --text-soft: var(--premium-text-soft);
    --muted: var(--premium-muted);
    --primary: var(--premium-primary);
    --primary-hover: var(--premium-primary-hover);
    --success: var(--premium-success);
    --warning: var(--premium-warning);
    --danger: var(--premium-danger);
    --sb-bg: var(--premium-sidebar-bg);
    --sb-active-bg: var(--premium-sidebar-active);
    --sb-text: #d9e2dc;
    --sb-text-active: #ffffff;
    --sb-section-label: #98a69e;
    color-scheme: dark;
}

.premium-financial-app {
    --body-bg: var(--premium-bg);
    --surface: var(--premium-surface);
    --surface-subtle: var(--premium-surface-soft);
    --border: var(--premium-border);
    --border-strong: var(--premium-border-strong);
    --text: var(--premium-text);
    --text-soft: var(--premium-text-soft);
    --muted: var(--premium-muted);
    --primary: var(--premium-primary);
    --primary-hover: var(--premium-primary-hover);
    --success: var(--premium-success);
    --warning: var(--premium-warning);
    --danger: var(--premium-danger);
    --sb-bg: var(--premium-sidebar-bg);
    --sb-active-bg: var(--premium-sidebar-active);
    --sb-hover-bg: rgba(255, 255, 255, .08);
    --sb-text: #d4d8d4;
    --sb-text-active: #ffffff;
    --sb-section-label: #9da89f;
    --shadow-sm: var(--premium-shadow-sm);
    --shadow-md: var(--premium-shadow-md);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --coreui-sidebar-w: 282px;
    --coreui-sidebar-collapsed-w: 76px;
    --coreui-header-h: 64px;
    background: var(--body-bg);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .premium-financial-app {
    --sb-text: #d9e2dc;
    --sb-text-active: #ffffff;
    --sb-section-label: #98a69e;
}

.premium-shell.coreui-shell {
    background: var(--body-bg);
}

.premium-shell .coreui-sidebar {
    background: var(--premium-sidebar-bg);
    color: var(--sb-text);
}

.premium-shell .coreui-sidebar-brand,
.premium-shell .coreui-sidebar-footer {
    background: rgba(0, 0, 0, .16);
}

.premium-shell .coreui-sidebar .nav-link {
    border-radius: 8px;
    font-weight: 700;
}

.premium-shell .coreui-sidebar .nav-link.active {
    background: var(--premium-sidebar-active);
    color: #fff;
}

.premium-shell .coreui-header {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-color: var(--border);
    backdrop-filter: blur(14px);
}

.premium-shell .coreui-icon-btn,
.premium-shell .topbar-user-pill {
    border-radius: 8px;
    border-color: var(--border);
    background: var(--surface);
}

.premium-shell .coreui-icon-btn:hover,
.premium-shell .topbar-user-pill:hover {
    background: var(--surface-subtle);
    border-color: var(--border-strong);
}

.premium-shell .coreui-sidebar .nav-link.active {
    background: var(--premium-sidebar-active) !important;
    color: var(--sb-text-active);
}

.topbar-avatar,
.sidebar-avatar {
    background: var(--primary);
    color: #fff;
}

.coreui-content {
    background: var(--body-bg);
}

.crm-card,
.soft-card,
.content-card,
.data-card,
.stats-card,
.metric-card,
.kpi-card,
.form-section,
.applicant-card,
.timeline-content,
.report-section-option,
.modal-content {
    background: var(--surface);
    border-color: var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.soft-card-header,
.content-card-header,
.data-card-header,
.form-section-header,
.applicant-card-header,
.modal-header,
.modal-footer {
    background: color-mix(in srgb, var(--surface-subtle) 70%, var(--surface));
    border-color: var(--border);
}

.table thead,
.modern-table thead th,
.case-table thead th,
.dense-table thead th {
    background: var(--surface-subtle);
}

.table th,
.table td,
.case-table tbody td,
.dense-table th,
.dense-table td {
    border-color: var(--border);
}

.table td,
.dense-table td {
    color: var(--text-soft);
}

.form-control,
.form-select,
.login-input {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
    border-radius: 8px;
}

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

.form-label,
.section-title,
.form-section-title,
.crm-title,
.page-title {
    color: var(--text);
}

.btn-primary,
.btn-success {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-primary:hover,
.btn-success:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.premium-financial-app .btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.premium-financial-app .btn-outline-primary:hover,
.premium-financial-app .btn-outline-primary:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-light {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-soft);
}

.btn-light:hover {
    background: var(--surface-subtle);
    border-color: var(--border-strong);
    color: var(--text);
}

.badge,
.status-badge,
.visa-chip {
    border-radius: 999px;
    font-weight: 800;
}

.alert {
    border-color: var(--border);
    border-radius: 8px;
}

.finance-box,
.info-tile,
.agreement-summary-item,
.finance-guide-card {
    background: var(--surface-subtle);
    border-color: var(--border);
    border-radius: 8px;
}

[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .alert,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-check-input,
[data-bs-theme="dark"] .modal-content {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-body-secondary {
    color: var(--muted) !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: var(--text-soft) !important;
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text-soft);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: color-mix(in srgb, var(--surface-subtle) 68%, transparent);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: color-mix(in srgb, var(--primary) 12%, transparent);
    --bs-table-hover-color: var(--text);
}

[data-bs-theme="dark"] .table thead,
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td {
    background-color: var(--surface-subtle) !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
}

[data-bs-theme="dark"] .page-link {
    background-color: var(--surface);
    color: var(--text-soft);
    border-color: var(--border);
}

[data-bs-theme="dark"] .page-link:hover,
[data-bs-theme="dark"] .page-link:focus {
    background-color: var(--surface-subtle);
    color: var(--text);
    border-color: var(--border-strong);
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--text-soft);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--surface-subtle);
    color: var(--text);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--border);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-check-input:disabled {
    background-color: color-mix(in srgb, var(--surface-subtle) 72%, #000);
    color: var(--muted);
    opacity: .88;
}

[data-bs-theme="dark"] .alert-light,
[data-bs-theme="dark"] .alert-secondary {
    background-color: var(--surface-subtle);
    color: var(--text-soft);
    border-color: var(--border);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%);
}

[data-bs-theme="dark"] .btn-light {
    background: var(--surface-soft, var(--surface-subtle));
    color: var(--text);
}