/* =====================================================================
 * Billing app theme — single source of truth for design tokens, the
 * application shell, and reusable component classes. Loaded AFTER all
 * other CSS so token-driven overrides win.
 *
 * Conventions (also in CLAUDE.md):
 *   - Never hardcode colours/spacing/radius — always var(--*).
 *   - Never inline styles in templates — class-based only.
 *   - Use .lw-table for new lists, .badge-pill for status, .metric-card
 *     for KPI strips, .filter-bar for filter rows, .lw-pagination for
 *     server-side pagination footers.
 *   - body.bil-dark flips the surface/text/input/table tokens for dark
 *     mode; the sidebar is dark-navy in both modes.
 * ===================================================================== */

:root {
    /* BRAND */
    --brand: #2563eb;
    --brand-hover: #1d4ed8;
    --brand-active: #1e40af;
    --brand-light: #dbeafe;
    --brand-border: #93c5fd;

    /* SIDEBAR (dark, never themed) */
    --sidebar-bg: #0b1120;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.06);
    --sidebar-bg-active: var(--brand);
    --sidebar-text: #e5e7eb;
    --sidebar-text-muted: #94a3b8;
    --sidebar-icon: #9ca3af;
    --sidebar-border: #131c2e;
    --sidebar-width: 244px;
    --sidebar-width-collapsed: 68px;
    --sidebar-item-height: 38px;

    /* HEADER */
    --header-bg: #ffffff;
    --header-border: #e2e8f0;
    --header-height: 56px;

    /* PAGE */
    --page-bg: #f1f5f9;
    --page-padding: 20px;

    /* SURFACE */
    --surface-1: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --surface-hover: #f8fafc;

    /* TEXT */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --text-disabled: #cbd5e1;
    --text-inverse: #ffffff;
    --text-link: var(--brand);

    /* BORDER */
    --border-light: #f1f5f9;
    --border-default: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-focus: var(--brand);

    /* TABLE */
    --tbl-header-bg: #f8fafc;
    --tbl-header-text: #64748b;
    --tbl-header-border: #e2e8f0;
    --tbl-row-bg: #ffffff;
    --tbl-row-border: #f1f5f9;
    --tbl-row-hover: #f8fafc;
    --tbl-row-selected: #eef2ff;
    --tbl-row-height: 40px;
    --tbl-font-size: 13px;
    --tbl-header-font-size: 11px;
    --tbl-cell-pad-x: 12px;
    --tbl-cell-pad-y: 9px;

    /* STATUS */
    --success: #22c55e;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --danger: #ef4444;
    --danger-bg: #fee2e2;
    --danger-text: #991b1b;
    --info: #3b82f6;
    --info-bg: #dbeafe;
    --info-text: #1d4ed8;
    --neutral: #64748b;
    --neutral-bg: #f1f5f9;
    --neutral-text: #475569;
    --purple: #8b5cf6;
    --orange: #f97316;
    --teal: #14b8a6;

    /* INPUT */
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    --input-border-focus: var(--brand);
    --input-text: #1e293b;
    --input-placeholder: #94a3b8;
    --input-height: 36px;
    --input-radius: 8px;
    --input-padding-x: 12px;
    --input-font-size: 13px;
    --input-label-size: 12px;
    --input-label-color: #374151;

    /* RADII */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-full: 9999px;

    /* SHADOWS */
    --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sh-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --sh-lg: 0 10px 24px rgba(15, 23, 42, 0.12);
    --sh-xl: 0 20px 40px rgba(15, 23, 42, 0.16);

    /* TYPOGRAPHY */
    --font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* DURATIONS */
    --dur-fast: 150ms;
    --dur-normal: 250ms;
    --dur-slow: 350ms;

    /* Z-INDEX */
    --z-sidebar: 100;
    --z-header: 200;
    --z-drawer: 500;
    --z-modal: 600;
    --z-toast: 700;
}

/* === DARK MODE TOKEN OVERRIDES ====================================== */
body.bil-dark {
    --page-bg: #0b1220;
    --surface-1: #131c26;
    --surface-2: #16202c;
    --surface-3: #1a2533;
    --surface-hover: #1d2937;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-subtle: #64748b;
    --text-disabled: #64748b;
    --border-light: #1f2c3a;
    --border-default: #243345;
    --border-medium: #2c3d52;
    --tbl-header-bg: #16202c;
    --tbl-header-text: #94a3b8;
    --tbl-header-border: #243345;
    --tbl-row-bg: #131c26;
    --tbl-row-border: #1f2c3a;
    --tbl-row-hover: #1a2533;
    --tbl-row-selected: #1c2842;
    --header-bg: #131c26;
    --header-border: #243345;
    --input-bg: #131c26;
    --input-border: #243345;
    --input-text: #e2e8f0;
    --input-placeholder: #64748b;
    --input-label-color: #cbd5e1;
    --neutral-bg: #1f2c3a;
    --neutral-text: #cbd5e1;
}

/* === BASE =========================================================== */
html, body {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
}
body { margin: 0; }
a { color: var(--text-link); }

/* === BOOTSTRAP OVERRIDES ============================================ */
.btn { border-radius: var(--r-md); font-weight: 500; transition: all var(--dur-fast); font-size: 13px; }
.btn-sm { font-size: 12px; padding: 4px 10px; border-radius: var(--r-md); }
.btn-primary,
.btn-info {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn-primary:hover, .btn-info:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn-primary:active, .btn-info:active { background: var(--brand-active); border-color: var(--brand-active); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); color: #fff; }
.btn-outline-secondary {
    color: var(--text-primary); border-color: var(--border-default); background: var(--surface-1);
}
.btn-outline-secondary:hover { background: var(--surface-hover); border-color: var(--border-medium); color: var(--text-primary); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-light { background: var(--surface-2); border-color: var(--border-default); color: var(--text-primary); }
.btn-light:hover { background: var(--surface-hover); border-color: var(--border-medium); color: var(--text-primary); }

.form-control, .form-select {
    height: var(--input-height);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: 0 var(--input-padding-x);
    font-size: var(--input-font-size);
    color: var(--input-text);
    background: var(--input-bg);
}
.form-control-sm, .form-select-sm { height: 32px; font-size: 12px; padding: 0 10px; }
.form-control:focus, .form-select:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--brand-light);
}
.form-control::placeholder { color: var(--input-placeholder); }
textarea.form-control { height: auto; padding: 8px 12px; }
.form-label {
    font-size: var(--input-label-size);
    font-weight: 500;
    color: var(--input-label-color);
    margin-bottom: 6px;
}
.form-label.required::after { content: " *"; color: var(--danger); }
.form-text { color: var(--text-muted); font-size: 11px; }
.text-muted { color: var(--text-muted) !important; }

/* Cards */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-default);
    font-weight: 600;
    color: var(--text-primary);
}
.card-body { color: var(--text-primary); }

/* Modals (carry the brand chrome) */
.modal-content { border-radius: var(--r-lg); border: 1px solid var(--border-default); background: var(--surface-1); }
.modal-header { border-bottom: 1px solid var(--border-default); }
.modal-header.bg-info { background: var(--brand) !important; }
.modal-header.bg-danger { background: var(--danger) !important; }
.modal-footer { border-top: 1px solid var(--border-default); }
/* Bootstrap 5 has no modal-md class — define it as the app's standard medium width */
@media (min-width: 576px) {
    .modal-dialog.modal-md { max-width: 600px; }
}

/* Alerts */
.alert { border-radius: var(--r-md); border: 1px solid transparent; padding: 10px 14px; font-size: 13px; }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-text); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }
.alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.alert-info { background: var(--info-bg); border-color: var(--info); color: var(--info-text); }

/* Bootstrap .table fallback styling for legacy pages */
.table { color: var(--text-primary); border-color: var(--border-default); }
.table > :not(caption) > * > * { background-color: transparent; }
.table > thead { background: var(--tbl-header-bg); color: var(--tbl-header-text); }
.table > thead th { font-size: var(--tbl-header-font-size); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x); border-bottom: 2px solid var(--tbl-header-border); }
.table > tbody > tr { background: var(--tbl-row-bg); }
.table > tbody > tr:hover { background: var(--tbl-row-hover); }
.table > tbody > tr > td { padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x); border-bottom: 1px solid var(--tbl-row-border); vertical-align: middle; font-size: var(--tbl-font-size); }

/* === APP SHELL ====================================================== */
/* Map onto the existing #layout-wrapper / .vertical-menu / #page-topbar
   markup and onto the new .app-shell markup so both styles reach the new
   look. Keeps existing pages working while we migrate. */
#layout-wrapper, .app-shell { background: var(--page-bg); min-height: 100vh; }

/* Top header — restyle the legacy #page-topbar */
#page-topbar, .app-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    height: var(--header-height);
    box-shadow: none;
    position: sticky; top: 0; z-index: var(--z-header);
}
#page-topbar .navbar-header { padding: 0 var(--page-padding); height: var(--header-height); border-bottom: 0; display: flex; justify-content: space-between; align-items: center; }
#page-topbar .navbar-brand-box { background: transparent; width: var(--sidebar-width); padding-left: 16px; }
#page-topbar .header-item { color: var(--text-primary); height: var(--header-height); padding: 0 10px; box-shadow: none; border: 0; background: transparent; }
#page-topbar .header-item:hover { background: var(--surface-hover); color: var(--text-primary); }
#page-topbar .header-item [data-lucide],
#page-topbar .header-item svg.lucide { color: var(--text-muted); width: 18px; height: 18px; }
#page-topbar .header-item:hover [data-lucide],
#page-topbar .header-item:hover svg.lucide { color: var(--brand); }
#page-topbar .logo .logo-lg { color: var(--text-primary); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
#page-topbar .header-profile-user { width: 32px; height: 32px; border: 1px solid var(--border-default); padding: 0; border-radius: var(--r-full); }
#page-topbar #google_translate_element:empty { display: none; }
#page-topbar .user-dropdown .btn { gap: 8px; display: inline-flex; align-items: center; }
#page-topbar .user-dropdown .mdi-chevron-down { color: var(--text-muted); font-size: 16px; }
@media (max-width: 991.98px) {
    #page-topbar .navbar-header { padding: 0 12px; }
    #page-topbar .navbar-header > .d-flex:first-child { flex-direction: row-reverse; gap: 6px; align-items: center; }
    #page-topbar .header-item { padding: 0 8px; }
    /* Hide username text label next to avatar on small screens */
    #page-topbar .user-dropdown .btn span,
    #page-topbar .user-dropdown .btn .mdi-chevron-down { display: none !important; }
}

body.bil-dark #page-topbar .logo .logo-lg { color: var(--text-primary); }

/* Sidebar — restyle the legacy .vertical-menu */
.vertical-menu, .app-sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    width: var(--sidebar-width);
    top: var(--header-height);
    z-index: var(--z-sidebar);
    box-shadow: none;
    border-right: 1px solid var(--sidebar-border);
    transition: width var(--dur-normal), transform var(--dur-normal);
}
.vertical-menu .h-100 { background: var(--sidebar-bg); }
.main-content { margin-left: var(--sidebar-width); transition: margin-left var(--dur-normal); background: var(--page-bg); }
.page-content { padding: var(--page-padding); padding-top: 16px; min-height: calc(100vh - var(--header-height)); }
.page-content > .container-fluid { padding: 0; max-width: 100%; }

/* Sidebar nav items (works for both legacy .metismenu and new .sidebar-item) */
#sidebar-menu { padding: 10px 0 28px; }
#sidebar-menu .menu-title {
    color: #6b7691;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    padding: 16px 18px 6px;
    margin: 0;
}
#sidebar-menu ul li { padding: 0 10px; }
#sidebar-menu ul li a {
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 500;
    padding: 0 12px;
    height: var(--sidebar-item-height);
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--r-md);
    transition: background var(--dur-fast), color var(--dur-fast);
}
#sidebar-menu ul li a:hover { background: var(--sidebar-bg-hover); color: #ffffff; }
#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover [data-lucide],
#sidebar-menu ul li a:hover svg.lucide { color: #ffffff; }
#sidebar-menu ul li a i,
#sidebar-menu ul li a [data-lucide],
#sidebar-menu ul li a svg.lucide {
    color: var(--sidebar-icon);
    font-size: 17px;
    width: 18px; height: 18px;
    flex-shrink: 0;
    transition: color var(--dur-fast);
}
#sidebar-menu ul li.mm-active > a {
    background: linear-gradient(90deg, var(--brand) 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li.mm-active > a [data-lucide],
#sidebar-menu ul li.mm-active > a svg.lucide { color: #ffffff; }
#sidebar-menu ul li a span { flex: 1; }
#sidebar-menu ul li a.has-arrow::after { color: var(--sidebar-text-muted); }
#sidebar-menu ul.sub-menu { background: rgba(0, 0, 0, 0.22); padding: 4px 10px; margin: 4px 0; border-radius: var(--r-md); }
#sidebar-menu ul.sub-menu li { padding: 0; }
#sidebar-menu ul.sub-menu li a { padding-left: 38px; height: 32px; font-size: 12px; color: var(--sidebar-text-muted); border-radius: var(--r-sm); }
#sidebar-menu ul.sub-menu li a:hover { color: #ffffff; background: var(--sidebar-bg-hover); }
#sidebar-menu ul.sub-menu li.mm-active > a { color: #ffffff; background: var(--sidebar-bg-hover); box-shadow: none; }

/* Collapsed sidebar (icon-only) — desktop only */
body.sb-collapsed .vertical-menu { width: var(--sidebar-width-collapsed); }
body.sb-collapsed .main-content { margin-left: var(--sidebar-width-collapsed); }
body.sb-collapsed #page-topbar .navbar-brand-box { width: var(--sidebar-width-collapsed); }
body.sb-collapsed #sidebar-menu .menu-title,
body.sb-collapsed #sidebar-menu ul li a span,
body.sb-collapsed #sidebar-menu ul li a.has-arrow::after { display: none; }
body.sb-collapsed #sidebar-menu ul li { padding: 0 8px; }
body.sb-collapsed #sidebar-menu ul li a { justify-content: center; padding: 0; }
body.sb-collapsed #sidebar-menu ul.sub-menu { display: none; }

/* === MOBILE SIDEBAR DRAWER ========================================= */
.sb-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(11, 17, 32, 0.5);
    backdrop-filter: blur(2px);
    z-index: calc(var(--z-header) + 9);
    opacity: 0;
    transition: opacity var(--dur-normal);
}
@media (max-width: 991.98px) {
    .vertical-menu {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: var(--sidebar-width) !important;
        height: 100vh;
        transform: translateX(-100%);
        z-index: calc(var(--z-header) + 10);
        box-shadow: var(--sh-xl);
    }
    body.sb-open .vertical-menu { transform: translateX(0); }
    body.sb-open .sb-backdrop { display: block; opacity: 1; }
    .main-content { margin-left: 0 !important; }
    /* Force expanded styling on mobile drawer regardless of sb-collapsed */
    body.sb-collapsed .vertical-menu { width: var(--sidebar-width) !important; }
    body.sb-collapsed #sidebar-menu .menu-title { display: block; }
    body.sb-collapsed #sidebar-menu ul li a span { display: inline-block; }
    body.sb-collapsed #sidebar-menu ul li a.has-arrow::after { display: inline-block; }
    body.sb-collapsed #sidebar-menu ul li a { justify-content: flex-start; padding: 0 12px; }
    body.sb-collapsed #sidebar-menu ul.sub-menu { display: block; }
    /* Brand box: no longer attached to sidebar on mobile — it sits in the topbar */
    #page-topbar .navbar-brand-box {
        width: auto !important;
        margin-left: 0 !important;
        background: transparent !important;
        border-right: 0 !important;
        padding-left: 8px !important;
    }
    #page-topbar .navbar-brand-box .logo-light { color: var(--text-primary); }
    #page-topbar .navbar-brand-box .logo-light .logo-lg { color: var(--text-primary) !important; }
    body.sb-open { overflow: hidden; }
}

/* === PAGE HEADER ==================================================== */
.page-header { padding: 4px 0 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-header .breadcrumb-bar { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.page-header h1, .page-header .page-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--text-primary); letter-spacing: -0.01em; }
.page-header .subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.page-header .page-actions { display: flex; gap: 8px; align-items: center; }

/* === METRIC STRIP =================================================== */
.metric-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; margin-bottom: 14px; }
.metric-strip::-webkit-scrollbar { height: 6px; }
.metric-strip-grab { cursor: grab; user-select: none; -webkit-user-select: none; }
.metric-strip-grab.is-dragging { cursor: grabbing; }
.metric-strip-grab.is-dragging .metric-card { pointer-events: none; }
.metric-card {
    flex: 0 0 auto;
    max-width: 320px;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl);
    cursor: pointer;
    transition: all var(--dur-fast);
    text-decoration: none;
    color: var(--text-primary);
}
.metric-card:hover { border-color: var(--border-medium); box-shadow: var(--sh-sm); }
.metric-card.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light), var(--sh-md); }
.metric-card .accent { width: 4px; height: 32px; border-radius: var(--r-full); flex-shrink: 0; background: var(--neutral); }
.metric-card .accent.success { background: var(--success); }
.metric-card .accent.warning { background: var(--warning); }
.metric-card .accent.danger  { background: var(--danger); }
.metric-card .accent.info    { background: var(--info); }
.metric-card .accent.neutral { background: var(--neutral); }
.metric-card .accent.brand   { background: var(--brand); }
.metric-card .flex-grow-1 { min-width: 0; }
.metric-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card .value { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-card .value .bil-rupee { margin-right: 2px; }
.metric-card .delta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.metric-card .delta.up { color: var(--success-text); }
.metric-card .delta.down { color: var(--danger-text); }

/* === FILTER BAR ===================================================== */
.filter-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl);
    margin-bottom: 14px;
}
.filter-bar .search-input { flex: 1 1 220px; max-width: 320px; }
.filter-pill {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--surface-1);
    font-size: 12px; color: var(--text-primary);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.filter-pill:hover { background: var(--surface-hover); border-color: var(--border-medium); }
.filter-pill.active { background: var(--brand-light); border-color: var(--brand); color: var(--brand-active); }
body.bil-dark .filter-pill.active { background: rgba(37, 99, 235, 0.18); color: #93c5fd; }

/* === LW-TABLE ======================================================= */
.lw-table-wrap { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--r-lg); overflow: hidden; }
.lw-table {
    width: 100%; border-collapse: collapse;
    background: var(--surface-1);
    font-size: var(--tbl-font-size);
    margin: 0;
}
.lw-table thead th {
    background: var(--tbl-header-bg);
    color: var(--tbl-header-text);
    font-size: var(--tbl-header-font-size);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x);
    border-bottom: 2px solid var(--tbl-header-border);
    text-align: left;
    white-space: nowrap;
    user-select: none;
    position: sticky; top: 0; z-index: 1;
}
.lw-table thead th.sortable { cursor: pointer; }
.lw-table thead th.sortable:hover { color: var(--text-primary); }
.lw-table thead th .sort-arrow { margin-left: 4px; opacity: 0.45; }
.lw-table thead th.sorted-asc .sort-arrow,
.lw-table thead th.sorted-desc .sort-arrow { opacity: 1; color: var(--brand); }
.lw-table tbody td {
    padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x);
    border-bottom: 1px solid var(--tbl-row-border);
    vertical-align: middle;
    color: var(--text-primary);
}
.lw-table tbody tr { background: var(--tbl-row-bg); transition: background var(--dur-fast); }
.lw-table tbody tr:hover { background: var(--tbl-row-hover); }
.lw-table tbody tr.selected { background: var(--tbl-row-selected); border-left: 3px solid var(--brand); }
.lw-table .num { text-align: start; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lw-table .link { color: var(--brand); cursor: pointer; font-weight: 500; text-decoration: none; }
.lw-table .link:hover { text-decoration: underline; }
.lw-table .row-actions { display: inline-flex; gap: 4px; align-items: center; }
.lw-table .row-actions .row-action {
    color: var(--text-muted); cursor: pointer;
    background: transparent; border: 0; outline: 0;
    width: 28px; height: 28px; padding: 0;
    border-radius: var(--r-sm); transition: background var(--dur-fast), color var(--dur-fast);
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    text-decoration: none;
}
.lw-table .row-actions .row-action:hover { background: var(--surface-hover); color: var(--brand); }
.lw-table .row-actions .row-action.danger:hover { color: var(--danger-text); background: var(--danger-bg); }
.lw-table .row-actions .row-action [data-lucide],
.lw-table .row-actions .row-action svg.lucide { width: 15px; height: 15px; }
.lw-table .compact td, .lw-table .compact th { padding: 6px var(--tbl-cell-pad-x); }

/* DataTables overrides so server-side tables match .lw-table */
table.dataTable { border-collapse: collapse !important; font-size: var(--tbl-font-size); }
table.dataTable thead th {
    background: var(--tbl-header-bg) !important;
    color: var(--tbl-header-text) !important;
    text-transform: uppercase; letter-spacing: 0.05em;
    font-size: var(--tbl-header-font-size) !important; font-weight: 600;
    border-bottom: 2px solid var(--tbl-header-border) !important;
    padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x);
}
table.dataTable tbody td { padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x); border-bottom: 1px solid var(--tbl-row-border); }
table.dataTable tbody tr { background: var(--tbl-row-bg); }
table.dataTable tbody tr:hover { background: var(--tbl-row-hover); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: 12px; color: var(--text-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 10px !important; border-radius: var(--r-md) !important; border: 1px solid var(--border-default) !important;
    background: var(--surface-1) !important; color: var(--text-primary) !important; margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--surface-hover) !important; color: var(--brand) !important; }

/* === BADGES (status pills) ========================================== */
.badge-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 600;
    border: 1px solid;
    line-height: 1.4;
    white-space: nowrap;
}
.badge-pill.success { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.badge-pill.warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.badge-pill.danger  { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger); }
.badge-pill.info    { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info); }
.badge-pill.neutral { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral); }
.badge-pill.brand   { background: var(--brand-light); color: var(--brand-active); border-color: var(--brand-border); }
body.bil-dark .badge-pill.success { background: rgba(34,197,94,0.12); color: #4ade80; }
body.bil-dark .badge-pill.warning { background: rgba(245,158,11,0.14); color: #fbbf24; }
body.bil-dark .badge-pill.danger  { background: rgba(239,68,68,0.14);  color: #f87171; }
body.bil-dark .badge-pill.info    { background: rgba(59,130,246,0.14); color: #60a5fa; }
body.bil-dark .badge-pill.neutral { background: rgba(100,116,139,0.18); color: #cbd5e1; }
body.bil-dark .badge-pill.brand   { background: rgba(37,99,235,0.18); color: #93c5fd; }

/* Inline status <select> styled as a pill (used in list tables for
   inline status transitions, e.g. Purchase Returns). Keeps the
   badge-pill look in the closed state; native dropdown handles the menu. */
.status-select {
    display: inline-flex; align-items: center;
    padding: 2px 22px 2px 8px;
    border-radius: var(--r-full);
    font-size: 11px; font-weight: 600;
    border: 1px solid;
    line-height: 1.4;
    white-space: nowrap;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.status-select:focus { outline: 2px solid var(--brand-border); outline-offset: 1px; }
.status-select.success { background-color: var(--success-bg); color: var(--success-text); border-color: var(--success);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
.status-select.warning { background-color: var(--warning-bg); color: var(--warning-text); border-color: var(--warning);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23854d0e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
.status-select.danger  { background-color: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23991b1b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
.status-select.info    { background-color: var(--info-bg);    color: var(--info-text);    border-color: var(--info);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
.status-select.neutral { background-color: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
.status-select option { background: var(--surface-1); color: var(--text-primary); font-weight: 500; }
body.bil-dark .status-select.success { background-color: rgba(34,197,94,0.12); color: #4ade80; }
body.bil-dark .status-select.warning { background-color: rgba(245,158,11,0.14); color: #fbbf24; }
body.bil-dark .status-select.danger  { background-color: rgba(239,68,68,0.14);  color: #f87171; }
body.bil-dark .status-select.info    { background-color: rgba(59,130,246,0.14); color: #60a5fa; }
body.bil-dark .status-select.neutral { background-color: rgba(100,116,139,0.18); color: #cbd5e1; }

/* === TABS (drawer / page) =========================================== */
.lw-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border-default);
    padding: 0 16px;
    background: var(--surface-1);
}
.lw-tabs .tab {
    padding: 10px 14px; font-size: 13px; font-weight: 500;
    color: var(--text-muted); cursor: pointer; border: 0;
    background: transparent; border-bottom: 2px solid transparent;
}
.lw-tabs .tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.lw-tabs .tab:hover { color: var(--text-primary); }

/* === OFFCANVAS DRAWER =============================================== */
.offcanvas { border-left: 1px solid var(--border-default); background: var(--surface-1); }
.offcanvas.lw-drawer { width: 720px; }
.offcanvas.lw-drawer-sm { width: 480px; }
.offcanvas-header { height: 56px; border-bottom: 1px solid var(--border-default); background: var(--surface-1); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.offcanvas-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.offcanvas-body { background: var(--surface-2); padding: 16px; }

/* === TOASTS ========================================================= */
.lw-toast-container { position: fixed; top: 16px; right: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.lw-toast {
    width: 360px; max-width: calc(100vw - 32px);
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--neutral);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: 12px 14px;
    display: flex; gap: 10px;
    pointer-events: auto;
    animation: lw-toast-in var(--dur-normal) ease-out;
}
.lw-toast.success { border-left-color: var(--success); }
.lw-toast.warning { border-left-color: var(--warning); }
.lw-toast.danger  { border-left-color: var(--danger); }
.lw-toast.info    { border-left-color: var(--info); }
.lw-toast .title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.lw-toast .desc  { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
@keyframes lw-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* === PAGINATION ===================================================== */
.lw-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                 padding: 10px 14px; background: var(--surface-1);
                 border: 1px solid var(--border-default); border-top: 0;
                 border-radius: 0 0 var(--r-lg) var(--r-lg); flex-wrap: wrap; }
.lw-pagination .info { font-size: 12px; color: var(--text-muted); }
.lw-pagination .page-btn { min-width: 30px; height: 30px; border-radius: var(--r-md);
                           border: 1px solid var(--border-default);
                           background: var(--surface-1); color: var(--text-primary);
                           padding: 0 8px;
                           cursor: pointer; font-size: 12px; line-height: 28px; }
.lw-pagination .page-btn:hover { background: var(--surface-hover); }
.lw-pagination .page-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.lw-pagination .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lw-pagination .per-page { display: inline-flex; align-items: center; gap: 6px; }
.lw-pagination .per-page select { width: auto; display: inline-block; }

/* === SKELETON ======================================================= */
@keyframes lw-shine { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skeleton { background: linear-gradient(90deg, var(--surface-3) 0px, var(--surface-2) 40px, var(--surface-3) 80px); background-size: 200px; animation: lw-shine 1.5s infinite linear; border-radius: var(--r-sm); }

/* === EMPTY STATE ==================================================== */
.lw-empty { text-align: center; padding: 48px 16px; color: var(--text-muted); }
.lw-empty .icon { font-size: 40px; opacity: 0.4; margin-bottom: 12px; display: inline-block; }
.lw-empty .title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }

/* === BULK ACTION BAR (sticky bottom) ================================ */
.bulk-bar {
    position: sticky; bottom: 12px; left: 0; right: 0;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--text-primary); color: #fff;
    border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    display: none; align-items: center; gap: 12px;
    z-index: 50;
}
.bulk-bar.show { display: flex; flex-wrap: wrap; }
.bulk-bar .count { font-weight: 600; flex-shrink: 0; }
.bulk-bar .btn { color: #fff; }
.bulk-bar .bulk-bar-select { width: auto; min-width: 180px; }
.bulk-bar .bulk-bar-clear { color: #fff; opacity: 0.85; }
.bulk-bar .bulk-bar-clear:hover { opacity: 1; color: #fff; }
.bulk-bar.bulk-bar-top { position: static; margin-top: 0; margin-bottom: 12px; }

/* === DROPDOWN STYLING (Bootstrap header dropdowns) ================== */
.dropdown-menu { border: 1px solid var(--border-default); border-radius: var(--r-md); box-shadow: var(--sh-md); background: var(--surface-1); padding: 6px; }
.dropdown-item { font-size: 13px; color: var(--text-primary); border-radius: var(--r-sm); padding: 6px 10px; }
.dropdown-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.dropdown-item.text-danger:hover { background: var(--danger-bg); color: var(--danger-text); }
.dropdown-divider { border-color: var(--border-default); }

/* === LUCIDE ICON DEFAULTS =========================================== */
[data-lucide], svg.lucide { width: 18px; height: 18px; stroke-width: 2; vertical-align: middle; }
.icon-sm { width: 14px !important; height: 14px !important; }
.icon-lg { width: 22px !important; height: 22px !important; }

/* === MISC HELPERS =================================================== */
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-right { text-align: right; }
.no-wrap { white-space: nowrap; }
.section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Hide preloader cleanly */
#preloader { background: var(--page-bg); }

/* === LEGACY CLASS ALIASES ===========================================
 * The customer/invoice/payment list JS files render markup using
 * `bil-page-btn`, `bil-chip`, `bil-empty`, `bil-badge-overdue`, etc.
 * Until those JS files are rewritten to emit the new classes, alias the
 * legacy names to the new design tokens so they inherit the new look.
 * Remove this section once each JS file emits the new classes. */

/* Pagination buttons emitted by JS */
.bil-pagination, .lw-pagination#bil-pagination { display: flex; align-items: center; gap: 4px; padding: 10px 14px; background: var(--surface-1); border-top: 1px solid var(--border-default); flex-wrap: wrap; justify-content: center; }
.bil-page-btn { min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-md); border: 1px solid var(--border-default); background: var(--surface-1); color: var(--text-primary); cursor: pointer; font-size: 12px; line-height: 28px; transition: background var(--dur-fast); }
.bil-page-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--brand); }
.bil-page-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.bil-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bil-page-ellipsis { color: var(--text-muted); padding: 0 4px; font-size: 12px; }

/* Filter chips emitted by JS */
.bil-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--brand-light); color: var(--brand-active); border: 1px solid var(--brand-border); border-radius: var(--r-full); font-size: 11px; font-weight: 500; margin: 0 4px 4px 0; }
.bil-chip-x { cursor: pointer; opacity: 0.7; font-size: 14px; line-height: 1; padding: 0 2px; }
.bil-chip-x:hover { opacity: 1; color: var(--danger); }
body.bil-dark .bil-chip { background: rgba(37,99,235,0.18); color: #93c5fd; border-color: #2563eb; }

/* Empty state emitted by JS */
.bil-empty { text-align: center; padding: 48px 16px; color: var(--text-muted); }
.bil-empty .bil-empty-icon { font-size: 32px; opacity: 0.4; margin-bottom: 8px; display: block; }

/* Overdue badge emitted by JS */
.bil-badge-overdue { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--r-full); font-size: 9px; font-weight: 700; letter-spacing: 0.05em; background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger); margin-left: 6px; vertical-align: middle; }

/* Dynamic summary cards (zone / category) injected by JS using legacy classes */
.bil-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--r-xl); flex: 0 0 180px; cursor: pointer; transition: all var(--dur-fast); text-decoration: none; color: var(--text-primary); }
.bil-card:hover { border-color: var(--border-medium); box-shadow: var(--sh-sm); }
.bil-card.bil-card--pill .bil-card-label, .bil-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 500; }
.bil-card.bil-card--pill .bil-card-value, .bil-card-value { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums; }
.bil-card-icon { width: 30px; height: 30px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bil-card-icon.icon-blue { background: var(--brand-light); color: var(--brand); }
.bil-card-icon.icon-green { background: var(--success-bg); color: var(--success-text); }
.bil-card-icon.icon-orange { background: var(--warning-bg); color: var(--warning-text); }
.bil-card-icon.icon-red, .bil-card-icon.icon-rose { background: var(--danger-bg); color: var(--danger-text); }
.bil-card-icon.icon-purple { background: rgba(139,92,246,0.15); color: var(--purple); }
.bil-card-icon.icon-cyan { background: rgba(20,184,166,0.15); color: var(--teal); }
.bil-card-icon.icon-yellow { background: var(--warning-bg); color: var(--warning-text); }

.bil-summary-strip { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.bil-summary-scroll { display: flex; gap: 12px; overflow-x: auto; flex: 1; scrollbar-width: thin; padding-bottom: 4px; }
.bil-summary-item { flex: 0 0 auto; }
.bil-summary-nav { width: 28px; height: 28px; border-radius: var(--r-full); border: 1px solid var(--border-default); background: var(--surface-1); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bil-summary-nav:hover { background: var(--surface-hover); color: var(--brand); }

/* Sortable header arrow indicators emitted by JS */
.lw-table thead th.bil-sortable, .table thead th.bil-sortable { cursor: pointer; user-select: none; }
.lw-table thead th.bil-sortable:hover, .table thead th.bil-sortable:hover { color: var(--text-primary); }
.bil-sort-arrow { display: inline-block; opacity: 0.35; margin-left: 3px; font-size: 10px; }
.bil-sort-asc .bil-sort-arrow::after { content: "▲"; }
.bil-sort-desc .bil-sort-arrow::after { content: "▼"; }
.bil-sort-asc .bil-sort-arrow, .bil-sort-desc .bil-sort-arrow { opacity: 1; color: var(--brand); }

/* Row-level helpers used by list JS */
.bil-row-actions { display: inline-flex; gap: 6px; margin-left: 10px; opacity: 0; transition: opacity var(--dur-fast); }
.lw-table tbody tr:hover .bil-row-actions { opacity: 1; }
.bil-row-actions .btn { padding: 2px 6px; line-height: 1; }
.bil-row-actions .btn i, .bil-row-actions .btn [data-lucide] { font-size: 13px; width: 14px; height: 14px; }
.bil-name-cell { white-space: nowrap; }
.bil-name-cell a { color: var(--text-primary); font-weight: 500; text-decoration: none; }
.bil-name-cell a:hover { color: var(--brand); text-decoration: underline; }
.bil-row-status { font-size: 11px; padding: 2px 6px; height: auto; min-width: 90px; border-radius: var(--r-full); border: 1px solid; }
.bil-status-active { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.bil-status-inactive { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral); }
.bil-status-blocked { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }
.bil-status-closed { background: var(--surface-3); color: var(--text-muted); border-color: var(--border-medium); }
/* Invoice & transaction statuses */
.bil-status-draft { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral); }
.bil-status-posted { background: var(--info-bg); color: var(--info-text); border-color: var(--info); }
.bil-status-partial { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.bil-status-paid { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.bil-status-cancelled { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }
.bil-status-pending { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.bil-status-approved { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.bil-status-rejected { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }
.bil-status-returned { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
tr.bil-overdue { background: rgba(239,68,68,0.04); }
tr.bil-overdue:hover { background: rgba(239,68,68,0.08); }

/* Search shortcut badge */
.bil-search-box { position: relative; }
.bil-search-shortcut { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; background: var(--surface-2); border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 1px 5px; color: var(--text-muted); }

/* Date range button (legacy) */
.bil-daterange-clear { cursor: pointer; opacity: 0.6; }
.bil-daterange-clear:hover { opacity: 1; color: var(--danger); }

/* Advanced filter caret animation */
.bil-advfilter-toggle[aria-expanded="true"] .bil-advfilter-caret { transform: rotate(180deg); transition: transform var(--dur-fast); }
.bil-advfilter-caret { transition: transform var(--dur-fast); }

/* === COMPANY LOGO UPLOADER (Settings → Company Profile) === */
.logo-uploader { display: flex; flex-direction: column; gap: 8px; }
.logo-uploader .logo-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 160px;
    border: 2px dashed var(--border-default);
    border-radius: var(--r-lg);
    background: var(--surface-2) center / contain no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.logo-uploader .logo-preview:hover { border-color: var(--brand); }
.logo-uploader .logo-preview.signature-preview {
    aspect-ratio: 8 / 3;
    max-width: 240px;
}
.logo-uploader .logo-placeholder-icon { width: 28px; height: 28px; opacity: .5; margin-bottom: 4px; }
.logo-uploader .logo-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.logo-uploader .logo-controls .btn { font-size: 12px; }
body.bil-dark .logo-uploader .logo-preview { background-color: var(--surface-2); border-color: var(--border-default); }

/* =====================================================================
   SIDEBAR LOGO + BRAND BOX — proper expanded/collapsed handling
   Fixes: text overflow when collapsed, light/dark logo selection,
          visual continuity between brand box and sidebar
   ===================================================================== */

/* Brand box visually merges with the dark navy sidebar.
   Negative margin-left cancels the navbar-header's --page-padding so
   the brand box's left edge sits flush at x=0, aligned with the sidebar
   column below. The 16px padding-left matches #sidebar-menu's item padding
   so the wordmark vertically aligns with the menu icons. */
#page-topbar .navbar-brand-box {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid #1e293b;
    height: var(--header-height);
    width: var(--sidebar-width);
    margin-left: calc(var(--page-padding) * -1);
    padding-left: 16px;
    padding-right: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: width var(--dur-normal), padding var(--dur-normal);
}

/* Sidebar bg is dark, so always show logo-light (white text). Hide logo-dark. */
#page-topbar .navbar-brand-box .logo-dark { display: none !important; }
#page-topbar .navbar-brand-box .logo-light {
    display: flex !important;
    align-items: center;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: #ffffff;
    overflow: hidden;
}

/* Expanded: show wordmark, hide tiny image */
#page-topbar .navbar-brand-box .logo-light .logo-lg {
    display: inline-block;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-topbar .navbar-brand-box .logo-light .logo-sm { display: none; }

/* Collapsed: hide wordmark, show centered tiny image (or initials fallback) */
body.sb-collapsed #page-topbar .navbar-brand-box {
    width: var(--sidebar-width-collapsed);
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}
body.sb-collapsed #page-topbar .navbar-brand-box .logo-light { justify-content: center; }
body.sb-collapsed #page-topbar .navbar-brand-box .logo-light .logo-lg { display: none !important; }
body.sb-collapsed #page-topbar .navbar-brand-box .logo-light .logo-sm {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
body.sb-collapsed #page-topbar .navbar-brand-box .logo-light .logo-sm img {
    max-width: 28px; height: auto;
}
/* If the small logo image is missing/broken, show "RC" initials as a fallback */
body.sb-collapsed #page-topbar .navbar-brand-box .logo-light .logo-sm::before {
    content: "RC";
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, var(--brand) 0%, #1e40af 100%);
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
}
body.sb-collapsed #page-topbar .navbar-brand-box .logo-light .logo-sm img { display: none; }

/* Toggle button — make it obviously clickable and properly aligned */
#vertical-menu-btn {
    cursor: pointer;
    color: var(--text-muted);
    transition: color var(--dur-fast), background var(--dur-fast);
    border-radius: var(--r-md);
}
#vertical-menu-btn:hover { color: var(--brand); background: var(--surface-hover); }
#vertical-menu-btn i { font-size: 18px; }

/* Legacy compatibility: if `vertical-collpsd` class is also applied (legacy theme), mirror sb-collapsed styles */
body.vertical-collpsd #page-topbar .navbar-brand-box,
body.vertical-collpsd .vertical-menu { width: var(--sidebar-width-collapsed); }
body.vertical-collpsd .main-content { margin-left: var(--sidebar-width-collapsed); }
body.vertical-collpsd #sidebar-menu .menu-title,
body.vertical-collpsd #sidebar-menu ul li a span,
body.vertical-collpsd #sidebar-menu ul li a.has-arrow::after,
body.vertical-collpsd #page-topbar .navbar-brand-box .logo-light .logo-lg { display: none !important; }
body.vertical-collpsd #page-topbar .navbar-brand-box .logo-light .logo-sm { display: inline-flex !important; }
body.vertical-collpsd #sidebar-menu ul li a { justify-content: center; padding: 0; }
body.vertical-collpsd #sidebar-menu ul.sub-menu { display: none; }

/* =====================================================================
 * Select2 — render above jquery-confirm/Bootstrap modals when dropdownParent
 * is document.body. jquery-confirm uses z-index 99999999 on .jconfirm, so
 * Select2 needs to clear that to appear over its dialogs without clipping.
 * ===================================================================== */
.select2-container--open { z-index: 100000000; }
.select2-container--open .select2-dropdown { z-index: 100000001; }

/* Pill-style row action buttons — hidden until row hover */
.row-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: 100px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 0 transparent;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    vertical-align: middle;
    margin-left: 6px;
}
.lw-table tbody tr:hover .row-action-pill {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.rap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 100px;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
    text-decoration: none;
}
.rap-btn [data-lucide], .rap-btn svg.lucide { width: 13px; height: 13px; }
.rap-btn:hover             { background: var(--surface-hover); color: var(--text-primary); }
.rap-btn.rap-view:hover    { background: var(--brand-light); color: var(--brand); }
.rap-btn.rap-edit:hover    { background: #fef9c3; color: #854d0e; }
.rap-btn.rap-approve:hover { background: var(--success-bg); color: var(--success-text); }
.rap-btn.rap-delete:hover  { background: var(--danger-bg); color: var(--danger-text); }
.rap-btn.rap-toggle-on     { color: var(--success); }
.rap-btn.rap-toggle-off    { color: var(--text-subtle); }
.rap-btn.rap-toggle-on:hover  { background: var(--success-bg); color: var(--success-text); }
.rap-btn.rap-toggle-off:hover { background: var(--neutral-bg); color: var(--text-primary); }
body.bil-dark .row-action-pill { background: var(--surface-2); border-color: var(--border-medium); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
body.bil-dark .rap-btn.rap-edit:hover { background: rgba(234,179,8,.15); color: #fde047; }

.bil-tot-inp { width: 110px; }
.bil-inline-sel { font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 20px; border: 1px solid transparent; cursor: pointer; appearance: auto; max-width: 150px; line-height: 1.4; }
.bil-inline-sel:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-light); }
.bil-inline-sel:disabled { opacity: .7; cursor: not-allowed; }
.bil-inline-sel.sel-success { background: var(--success-bg); color: var(--success-text); }
.bil-inline-sel.sel-danger  { background: var(--danger-bg);  color: var(--danger-text);  }
.bil-inline-sel.sel-warning { background: var(--warning-bg); color: var(--warning-text); }
.bil-inline-sel.sel-info    { background: var(--info-bg);    color: var(--info-text);    }
.bil-inline-sel.sel-brand   { background: var(--brand-light); color: var(--brand);       }
.bil-inline-sel.sel-neutral { background: var(--neutral-bg); color: var(--text-muted);   }
.bil-totals-card .card-body { font-size: 15px; }
.bil-totals-card .card-body .small { font-size: 12px; }
.bil-grand-total { font-size: 17px; padding-top: 4px; }
.bil-grand-total strong { font-size: 17px; }
.bil-totals-table { border-collapse: separate; border-spacing: 0; }
.bil-totals-table td { vertical-align: middle; }
.bil-totals-table .input-group { flex-wrap: nowrap; }
.bil-totals-table .input-group-text { background: var(--surface-2, #f8f9fa); color: var(--text-2, #6c757d); padding: .2rem .4rem; font-size: .8rem; }
.bil-totals-table .mono { font-variant-numeric: tabular-nums; }