/* ============================================================
   Paper Ledger theme — DocFlow port
   One override stylesheet scoped under .ledger on <html>.
   Every colour comes from the tokens below; swap this file to
   swap the theme.  Light + dark token sets, fonts, pill buttons,
   hairline cards, hero, sidebar, tables, forms, badges.
   ============================================================ */

/* ---------- Tokens: light (modern SaaS defaults; DB layer overrides) ---------- */
html.ledger {
    --outer-bg: #F1F3F2;
    --surface: #F8FAF9;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #F1F4F2;
    --surface-container: #FFFFFF;
    --surface-container-high: #F4F8F5;
    --surface-container-highest: #E9EEEB;
    --on-surface: #111827;
    --on-surface-secondary: #4B5563;
    --on-surface-variant: #6B7280;
    --on-surface-disabled: #9CA3AF;
    --outline: #D5DCD8;
    --outline-variant: #E5EAE7;
    --ink: #16845B;
    --ink-container: #0F5138;
    --ink-soft: #E7F4EE;
    --on-ink: #FFFFFF;
    --secondary: #0F5138;
    --accent: #2FAE7A;
    --accent-soft: rgba(47, 174, 122, .14);
    --success: #16A34A;
    --success-soft: #E7F7ED;
    --error: #DC2626;
    --error-ink: #DC2626;
    --error-soft: #FDECEC;
    --warning: #D97706;
    --warning-soft: #FFF4D6;
    --info-ink: #2563EB;
    --info-soft: #EAF2FF;

    /* Design scales */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-1: 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-2: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-3: 0 10px 30px rgba(15, 23, 42, .12);
    --shadow-shell: 0 8px 30px rgba(15, 23, 42, .06);
    --transition-fast: .15s ease;
    --sidebar-width: 260px;

    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-sans: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;

    /* Legacy variable remap — the whole app reads these */
    --primary-color: var(--ink) !important;
    --primary-hover: var(--ink-container) !important;
    --bg-light: var(--surface) !important;
    --text-main: var(--on-surface) !important;
    --text-muted: var(--on-surface-variant) !important;
    --sidebar-bg: var(--surface-container-low) !important;
    --nav-color: var(--on-surface-variant) !important;
    --sidebar-active-bg: var(--ink) !important;
    --header-bg: transparent !important;
    --hero-bg-start: var(--ink) !important;
    --hero-bg-end: var(--ink-container) !important;
    --hero-text: var(--on-ink) !important;
    --login-heading: var(--on-ink) !important;
    --login-desc: rgba(246, 242, 234, .8) !important;
    --accent-color: var(--ink) !important;
    --accent-dark: var(--ink-container) !important;
    --brand-text: var(--on-ink) !important;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
    --card-hover-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
}

/* ---------- Tokens: dark (dark paper, warm terracotta) ---------- */
html.ledger.dark {
    --outer-bg: #0B1120;
    --surface: #0F172A;
    --surface-container-lowest: #16213A;
    --surface-container-low: #1E293B;
    --surface-container: #1E293B;
    --surface-container-high: #283548;
    --surface-container-highest: #334155;
    --on-surface: #F1F5F9;
    --on-surface-variant: #94A3B8;
    --outline: #64748B;
    --outline-variant: #293548;
    --ink: #2FAE7A;
    --ink-container: #16845B;
    --ink-soft: rgba(47, 174, 122, .16);
    --on-ink: #FFFFFF;
    --secondary: #4ADE80;
    --on-surface-secondary: #CBD5E1;
    --on-surface-disabled: #64748B;
    --accent: #4ADE80;
    --accent-soft: rgba(74, 222, 128, .16);
    --success: #4ADE80;
    --success-soft: rgba(74, 222, 128, .14);
    --error: #F43F5E;
    --error-ink: #FDA4AF;
    --error-soft: rgba(244, 63, 94, .18);
    --warning: #FBBF24;
    --warning-soft: rgba(217, 119, 6, .2);
    --info-ink: #93C5FD;
    --info-soft: rgba(59, 130, 246, .18);
    --login-desc: rgba(255, 255, 255, .8) !important;
}

/* ---------- Base ---------- */
html.ledger body {
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-sans);
    font-size: 14px;
}
html.ledger ::selection { background: var(--accent); color: var(--on-ink); }
html.ledger a { color: var(--accent); }
html.ledger a:hover { color: var(--accent); }
html.ledger hr { border-color: var(--outline-variant); opacity: 1; }
html.ledger .text-muted,
html.ledger .text-secondary { color: var(--on-surface-variant) !important; }
html.ledger .text-dark { color: var(--on-surface) !important; }
html.ledger .border,
html.ledger .border-top,
html.ledger .border-bottom,
html.ledger .border-start,
html.ledger .border-end { border-color: var(--outline-variant) !important; }
html.ledger .bg-light,
html.ledger .bg-light-soft,
html.ledger .bg-white { background-color: var(--surface-container-low) !important; color: var(--on-surface); }
html.ledger #spa-loader { background: var(--accent); box-shadow: none; }

/* Headlines: clean modern sans */
html.ledger h1, html.ledger h2,
html.ledger .dashboard-title,
html.ledger .hero-title,
html.ledger .stat-value,
html.ledger .lg-clock {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Small uppercase labels */
html.ledger .stat-label,
html.ledger .form-label,
html.ledger .menu-header,
html.ledger .lg-hero-kicker,
html.ledger .table thead th {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* ---------- Cards ---------- */
html.ledger .data-card,
html.ledger .stat-card,
html.ledger .info-card,
html.ledger .user-info-card,
html.ledger .card {
    background: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
    color: var(--on-surface);
}
html.ledger .data-card:hover,
html.ledger .stat-card:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
}
html.ledger .stat-card { border-left-width: 1px !important; min-height: 108px; }
html.ledger .stat-value { font-size: 1.875rem; color: var(--on-surface); font-weight: 700; }
html.ledger .stat-label { font-size: 12px; color: var(--on-surface-variant); }
html.ledger .stat-card::after { display: none; }
html.ledger .stat-icon-box {
    width: 40px; height: 40px; border-radius: 10px; font-size: 1rem;
    background: var(--surface-container-high) !important; color: var(--on-surface) !important;
}
html.ledger .stat-primary .stat-icon-box { background: var(--ink-soft) !important; color: var(--ink) !important; }
html.ledger .stat-success .stat-icon-box { background: var(--success-soft) !important; color: var(--success) !important; }
html.ledger .stat-warning .stat-icon-box { background: var(--warning-soft) !important; color: var(--warning) !important; }
html.ledger .stat-info .stat-icon-box { background: var(--info-soft) !important; color: var(--info-ink) !important; }
html.ledger .stat-card[style] { background: var(--surface-container-lowest) !important; }
html.ledger .text-warning-emphasis { color: var(--accent) !important; }

/* ---------- Sidebar ---------- */
html.ledger .sidebar {
    width: var(--sidebar-width, 240px);
    background-color: var(--sb-bg, var(--surface-container-low)) !important;
    border-right: 1px solid color-mix(in srgb, var(--sb-bg, var(--surface-container-low)), #94A3B8 18%);
    color: var(--sb-text, var(--on-surface));
}
html.ledger .main-content { margin-left: var(--sidebar-width, 240px); background: var(--surface); }
@media (max-width: 991.98px) {
    html.ledger .main-content { margin-left: 0; }
}
html.ledger .sidebar-header { border-bottom: 1px solid color-mix(in srgb, var(--sb-bg, var(--surface-container-low)), #94A3B8 18%); }
html.ledger .lg-brand {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--sb-active-text, var(--on-surface)) !important;
    letter-spacing: -0.02em;
    line-height: 1;
}
html.ledger .lg-brand-tile {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--ink); color: var(--on-ink);
    display: flex; align-items: center; justify-content: center;
}
html.ledger .menu-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--sb-heading, var(--on-surface-variant)) !important;
    padding: 18px 20px 6px;
    opacity: 1;
}
html.ledger .menu-link {
    color: var(--sb-text, var(--on-surface-variant)) !important;
    height: 40px;
    padding: 0 12px;
    margin: 2px 12px;
    display: flex; align-items: center; gap: 10px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.855rem;
    transition: background .15s ease, color .15s ease;
}
html.ledger .menu-link i { color: inherit; width: 17px; text-align: center; font-size: 0.82rem; }
html.ledger .menu-link:hover {
    background: var(--sb-hover, var(--surface-container-high)) !important;
    color: var(--sb-hover-text, var(--ink)) !important;
}
html.ledger .menu-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    color: var(--sb-hover-text, var(--ink)) !important;
}
html.ledger .menu-link { position: relative; }
html.ledger .menu-link.active {
    background: var(--sb-active-bg, var(--ink-soft)) !important;
    color: var(--sb-active-text, var(--ink)) !important;
    font-weight: 600;
}
html.ledger .menu-link.active::before {
    content: "";
    position: absolute;
    left: -12px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--ink);
}
html.ledger .menu-link.text-danger { color: var(--error-ink) !important; }
html.ledger .submenu .menu-link { margin-left: 28px; height: 36px; font-size: 0.83rem; }
html.ledger .sidebar .btn-primary { box-shadow: none !important; transform: none !important; }
html.ledger .lg-user-card {
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, var(--sb-bg, var(--surface-container-low)), #94A3B8 18%);
    padding: 14px 20px;
    display: flex; align-items: center; gap: 10px;
}
html.ledger .lg-user-card .lg-user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ink); color: var(--on-ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; flex: none;
}
html.ledger .lg-user-card .lg-user-name { font-weight: 700; font-size: 0.83rem; color: var(--sb-active-text, var(--on-surface)); line-height: 1.2; }
html.ledger .lg-user-card .lg-user-role { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-heading, var(--on-surface-variant)); }
html.ledger .lg-user-card a.lg-signout { color: var(--error-ink); font-size: 0.95rem; margin-left: auto; }

/* ---------- Top bar ---------- */
html.ledger .lg-topbar {
    position: sticky; top: 0; z-index: 900;
    min-height: 64px;
    display: flex; align-items: center; gap: 16px;
    margin: 0 -32px 28px;
    padding: 12px 32px;
    background: var(--tb-bg, var(--surface));
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    border-bottom: 1px solid var(--outline-variant);
}
html.ledger .lg-clock { font-size: 1.35rem; color: var(--tb-text, var(--on-surface)); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ledger .lg-date { font-size: 12px; color: var(--on-surface-variant); white-space: nowrap; }
html.ledger .lg-icon-btn {
    width: 38px; height: 38px; border-radius: 9999px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--on-surface-variant);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s ease;
}
html.ledger .lg-icon-btn:hover { background: var(--ink-soft); color: var(--ink); }
html.ledger .greeting-text { color: var(--on-surface-variant); font-size: 0.83rem; font-weight: 500; }
html.ledger .header-date { color: var(--on-surface-variant); background: transparent; border: 0; }

/* ---------- Hero banner ---------- */
html.ledger .lg-hero {
    position: relative;
    background: transparent;
    color: var(--on-surface);
    border-radius: 0;
    padding: 4px 0 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--outline-variant);
    box-shadow: none;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
html.ledger .lg-hero-kicker { font-size: 11px; color: var(--on-surface-variant); margin-bottom: 4px; }
html.ledger .lg-hero-title {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
html.ledger .lg-hero-route { display: none; }
html.ledger .dashboard-header-modern { margin-bottom: 0; }
html.ledger .dashboard-title { display: none; } /* replaced by hero title */

/* ---------- Buttons ---------- */
html.ledger .btn,
html.ledger .btn.rounded-pill { border-radius: 8px !important; font-weight: 600; font-size: 0.845rem; }
html.ledger .btn-primary:not(.btn-sm):not(.input-group .btn) { border-radius: 9999px !important; padding-left: 18px; padding-right: 18px; }
html.ledger .badge.rounded-pill { border-radius: 6px !important; }
html.ledger .btn-primary,
html.ledger .btn-success,
html.ledger .btn-info {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--on-ink) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12) !important;
    transition: transform .15s ease, background .15s ease;
}
html.ledger .btn-primary:hover,
html.ledger .btn-success:hover,
html.ledger .btn-info:hover {
    background: var(--ink-container) !important;
    border-color: var(--ink-container) !important;
    transform: translateY(-1px);
}
html.ledger .btn-outline-primary,
html.ledger .btn-outline-secondary,
html.ledger .btn-outline-info,
html.ledger .btn-outline-success,
html.ledger .btn-light {
    background: transparent !important;
    border: 1px solid var(--outline) !important;
    color: var(--on-surface) !important;
    box-shadow: none !important;
}
html.ledger .btn-outline-primary:hover,
html.ledger .btn-outline-secondary:hover,
html.ledger .btn-outline-info:hover,
html.ledger .btn-outline-success:hover,
html.ledger .btn-light:hover {
    background: var(--surface-container-low) !important;
    color: var(--on-surface) !important;
}
html.ledger .btn-danger { background: var(--error) !important; border-color: var(--error) !important; color: #fff !important; }
html.ledger .btn-outline-danger { background: transparent !important; border: 1px solid var(--error) !important; color: var(--error-ink) !important; }
html.ledger .btn-outline-danger:hover { background: var(--error-soft) !important; }
html.ledger .btn-warning,
html.ledger .btn-outline-warning { border-radius: 9999px !important; }
html.ledger .btn-link { color: var(--accent) !important; }

/* ---------- Forms ---------- */
html.ledger .form-control,
html.ledger .form-select,
html.ledger .form-control-custom {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 8px !important;
    color: var(--on-surface);
    font-weight: 500;
}
html.ledger .form-control::placeholder,
html.ledger .form-control-custom::placeholder { color: var(--on-surface-variant); opacity: .7; }
html.ledger .form-control:focus,
html.ledger .form-select:focus,
html.ledger .form-control-custom:focus {
    background-color: var(--surface-container-lowest);
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.25rem var(--accent-soft) !important;
    color: var(--on-surface);
    outline: none;
}
html.ledger .form-label { font-size: 12px; color: var(--on-surface-variant); }
html.ledger .input-group-text {
    background: var(--surface-container) !important;
    border: 1px solid var(--outline-variant) !important;
    color: var(--on-surface-variant) !important;
}
html.ledger .form-check-input { background-color: var(--surface-container); border-color: var(--outline); }
html.ledger .form-check-input:checked { background-color: var(--ink) !important; border-color: var(--ink) !important; }
html.ledger .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.25rem var(--accent-soft); }

/* ---------- Tables ---------- */
html.ledger .table { color: var(--on-surface); }
html.ledger .table thead th,
html.ledger .table > thead.table-light th,
html.ledger .table thead.bg-light th {
    background-color: var(--surface-container-low) !important;
    border-bottom: 1px solid var(--outline-variant) !important;
    color: var(--on-surface-variant) !important;
    font-size: 12px;
    padding: 12px 24px;
}
html.ledger .table tbody td {
    border-color: var(--outline-variant);
    color: var(--on-surface);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: transparent;
}
html.ledger .table tbody tr { border-color: var(--outline-variant); }
html.ledger .table-hover tbody tr:hover,
html.ledger .table-hover tbody tr:hover td,
html.ledger .clickable-row:hover,
html.ledger .clickable-row:hover td {
    background-color: var(--surface-container-low) !important;
    --bs-table-accent-bg: transparent;
}
html.ledger .table > :not(caption) > * > * { background-color: transparent; box-shadow: none; }
html.ledger .selected-row,
html.ledger .selected-row td { background-color: var(--accent-soft) !important; }

/* ---------- Pagination ---------- */
html.ledger .pagination .page-link {
    border-radius: 8px !important;
    margin: 0 3px;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    font-size: 12px;
    font-weight: 600;
}
html.ledger .pagination .page-item.active .page-link {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
}
html.ledger .pagination .page-item.disabled .page-link {
    background: transparent; color: var(--on-surface-variant); border-color: var(--outline-variant);
}

/* ---------- Badges ---------- */
html.ledger .badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 4px;
}
html.ledger .badge.rounded-pill { border-radius: 9999px !important; }
html.ledger .bg-success-light { background-color: var(--success-soft) !important; color: var(--success) !important; }
html.ledger .bg-danger-light { background-color: var(--error-soft) !important; color: var(--error-ink) !important; }
html.ledger .bg-warning-light { background-color: var(--warning-soft) !important; color: var(--warning) !important; }
html.ledger .bg-primary-light { background-color: var(--accent-soft) !important; color: var(--accent) !important; }
html.ledger .bg-info-light { background-color: var(--info-soft) !important; color: var(--info-ink) !important; }
html.ledger .bg-secondary-light { background-color: var(--surface-container-high) !important; color: var(--on-surface-variant) !important; }
html.ledger .badge.bg-success { background-color: var(--success) !important; color: #fff !important; }
html.ledger .badge.bg-danger { background-color: var(--error) !important; }
html.ledger .badge.bg-warning { background-color: var(--warning-soft) !important; color: var(--warning) !important; }
html.ledger .badge.bg-secondary { background-color: var(--surface-container-highest) !important; color: var(--on-surface) !important; }
html.ledger .badge.bg-light { background-color: var(--surface-container) !important; color: var(--on-surface) !important; }
html.ledger .text-primary { color: var(--accent) !important; }
html.ledger .text-success { color: var(--success) !important; }
html.ledger .text-danger { color: var(--error-ink) !important; }
html.ledger .text-warning { color: var(--warning) !important; }
html.ledger .text-info { color: var(--info-ink) !important; }
html.ledger .bg-primary { background-color: var(--ink) !important; color: var(--on-ink) !important; }
html.ledger .alert-success { background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success), transparent 70%); color: var(--success); border-radius: 10px; }
html.ledger .alert-danger { background: var(--error-soft); border: 1px solid color-mix(in srgb, var(--error), transparent 70%); color: var(--error-ink); border-radius: 10px; }
html.ledger .alert-info { background: var(--surface-container-low); border: 1px solid var(--outline-variant); color: var(--on-surface); border-radius: 10px; }

/* ---------- Modals / SweetAlert ---------- */
html.ledger .modal-content {
    background: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant);
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    color: var(--on-surface);
}
html.ledger .modal-backdrop { backdrop-filter: blur(2px); }
html.ledger .swal2-popup {
    background: var(--surface-container-lowest) !important;
    color: var(--on-surface) !important;
    border-radius: 12px !important;
    border: 1px solid var(--outline-variant);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    font-family: var(--font-sans);
}
html.ledger .swal2-title { font-family: var(--font-sans); font-weight: 700; color: var(--on-surface); }
html.ledger .swal2-html-container { color: var(--on-surface-variant); }
html.ledger .swal2-styled.swal2-confirm { border-radius: 9999px !important; }
html.ledger .swal2-styled.swal2-cancel { border-radius: 9999px !important; }
html.ledger .swal2-toast { border: 1px solid var(--outline-variant) !important; }
html.ledger .dropdown-menu {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    color: var(--on-surface);
}
html.ledger .dropdown-item { color: var(--on-surface); }
html.ledger .dropdown-item:hover { background: var(--surface-container-low); color: var(--on-surface); }
html.ledger .profile-menu { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
html.ledger .profile-menu-header { border-bottom: 1px solid var(--outline-variant); }
html.ledger .profile-menu ul li a { color: var(--on-surface); }
html.ledger .profile-menu ul li a:hover { background: var(--surface-container-low); }
html.ledger .user-avatar-initial { background: var(--ink); color: var(--on-ink); }
html.ledger .avatar-wrapper { border-color: var(--outline-variant); }

/* ---------- Breadcrumbs, chips, misc ---------- */
html.ledger .breadcrumb-item a { color: var(--accent); text-decoration: none; }
html.ledger .breadcrumb-item.active { color: var(--on-surface-variant); }
html.ledger .nav-pills .nav-link { color: var(--on-surface-variant); border-radius: 9999px; }
html.ledger .nav-pills .nav-link.active,
html.ledger .log-pills .nav-link.active,
html.ledger .custom-tabs .nav-link.active { background-color: var(--ink) !important; color: var(--on-ink) !important; box-shadow: none; }
html.ledger .log-pills, html.ledger .custom-tabs { background: var(--surface-container-lowest) !important; border: 1px solid var(--outline-variant) !important; }
html.ledger .profile-settings-nav { background: var(--surface-container-low) !important; border-color: var(--outline-variant) !important; box-shadow: none !important; }
html.ledger .profile-tab-link { color: var(--on-surface-variant) !important; }
html.ledger .profile-tab-link.active { background: var(--surface-container-lowest) !important; color: var(--accent) !important; border-color: var(--outline-variant) !important; box-shadow: none !important; }
html.ledger .main-footer { color: var(--on-surface-variant) !important; border-top: 1px solid var(--outline-variant) !important; }
html.ledger .list-group-item { background: var(--surface-container-lowest); border-color: var(--outline-variant) !important; color: var(--on-surface); }
html.ledger .low-credit-notice-bar { background: var(--ink) !important; border-left-color: var(--accent) !important; box-shadow: none !important; border-radius: 1rem !important; }
html.ledger .folder-row:hover { background-color: var(--surface-container-low) !important; }
html.ledger .file-card { background: var(--surface-container-low) !important; border-color: var(--outline-variant) !important; color: var(--on-surface) !important; }
html.ledger .file-card:hover { border-color: var(--accent); background: var(--surface-container-lowest) !important; box-shadow: none; }
html.ledger code { color: var(--accent); }
html.ledger .avatar-placeholder { background: var(--ink); color: var(--on-ink); }
html.ledger .profile-preview-wrapper { border-color: var(--surface-container-lowest); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
html.ledger .payment-method-card { background: var(--surface-container-lowest); }
html.ledger .bg-soft-info, html.ledger .bg-soft-primary,
html.ledger .bg-soft-success, html.ledger .bg-soft-secondary,
html.ledger .bg-soft-warning { background: var(--surface-container-low) !important; border-color: var(--outline-variant) !important; }

/* ---------- Login page ---------- */
html.ledger .login-container { background: var(--surface); }
html.ledger .brand-pane { background: var(--ink) !important; color: var(--on-ink); }
html.ledger .brand-content h1 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
html.ledger .form-pane { background: var(--surface-container-lowest); }
html.ledger .form-header h2 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; color: var(--on-surface); }
html.ledger .form-header p { color: var(--on-surface-variant); }
html.ledger .btn-login {
    background: var(--ink) !important;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    color: var(--on-ink);
}
html.ledger .btn-login:hover { background: var(--ink-container) !important; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
html.ledger .alert-custom { background: var(--error-soft); border-color: color-mix(in srgb, var(--error), transparent 70%); color: var(--error-ink); }
html.ledger .remember-me, html.ledger .forgot-pass { color: var(--on-surface-variant); }
html.ledger .branding-footer { color: var(--on-surface-variant); }
html.ledger html, html.ledger body { background: var(--surface); }

/* ---------- Public verify portal ---------- */
html.ledger .verify-hero {
    background: var(--ink) !important;
    background-image: none !important;
    color: var(--on-ink);
    border-radius: 0 0 1rem 1rem;
}
html.ledger .verify-hero .hero-title { color: var(--on-ink); font-size: 2.4rem; }
html.ledger .verify-hero p.lead { color: color-mix(in srgb, var(--on-ink), transparent 25%); }
html.ledger .hero-search-container { background: transparent; }
html.ledger .hero-search-container .input-group { border: 1px solid var(--outline-variant); border-radius: 9999px; overflow: hidden; background: var(--surface-container-lowest); }
html.ledger .hero-search-container .form-control { border: 0 !important; border-radius: 0 !important; }
html.ledger .header { background: var(--surface-container-lowest) !important; border-bottom: 1px solid var(--outline-variant); box-shadow: none !important; }
html.ledger .header .nav a { color: var(--on-surface-variant); }
html.ledger .header .nav a:hover { color: var(--accent); }
html.ledger .mobile-overlay { background: var(--surface-container-lowest); }
html.ledger .mobile-overlay a { color: var(--on-surface); border-bottom-color: var(--outline-variant); }
html.ledger .security-banner { background: var(--surface-container-low) !important; border: 1px solid var(--outline-variant) !important; border-radius: 0.875rem; }
html.ledger .attachment-card { background: var(--surface-container-low) !important; border: 1px solid var(--outline-variant); border-radius: 10px; }
html.ledger .verified-badge-large { border-radius: 9999px; font-weight: 700; letter-spacing: .05em; }
html.ledger .badge-success-glow { background: var(--success-soft); color: var(--success); box-shadow: none; border: 1px solid color-mix(in srgb, var(--success), transparent 60%); }
html.ledger .badge-warning-glow { background: var(--warning-soft); color: var(--warning); box-shadow: none; border: 1px solid color-mix(in srgb, var(--warning), transparent 60%); }
html.ledger .data-icon-left { background: var(--surface-container-high); color: var(--on-surface); border-radius: 10px; }
html.ledger .data-label { color: var(--on-surface-variant); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 700; }
html.ledger .data-value { color: var(--on-surface); }
html.ledger .glass-card { background: var(--surface-container-lowest) !important; }

/* ---------- Scrollbar ---------- */
html.ledger .sidebar::-webkit-scrollbar-thumb { background: var(--surface-container-highest); }
html.ledger .sidebar::-webkit-scrollbar-track { background: transparent; }

/* ---------- Responsive hero actions ---------- */
@media (max-width: 991.98px) {
    html.ledger .lg-topbar { margin: 0 -15px 20px; padding: 10px 15px; }
}
@media (max-width: 640px) {
    html.ledger .lg-hero { padding: 20px; }
    html.ledger .lg-hero-title { font-size: 1.4rem; }
}

/* ---------- Hero description + actions (page-header standard) ---------- */
html.ledger .lg-hero-desc {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    margin-top: 4px;
    max-width: 65ch;
}
html.ledger .lg-hero-actions { position: relative; z-index: 2; }
html.ledger .lg-hero .badge { font-size: 11px; background: var(--accent-soft) !important; color: var(--accent) !important; border-color: transparent !important; }
@media (max-width: 640px) {
    html.ledger .lg-hero-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   SaaS design-system pass — components on top of the tokens
   ============================================================ */

/* ---------- Text hierarchy utilities ---------- */
html.ledger .text-body-secondary { color: var(--on-surface-secondary) !important; }
html.ledger .lg-hero-desc { color: var(--on-surface-variant); }

/* ---------- Focus system: one consistent ring ---------- */
html.ledger .btn:focus-visible,
html.ledger a:focus-visible,
html.ledger .page-link:focus-visible,
html.ledger .dropdown-item:focus-visible,
html.ledger .lg-icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ---------- Disabled system ---------- */
html.ledger .btn:disabled,
html.ledger .btn.disabled {
    opacity: .55;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}
html.ledger .form-control:disabled,
html.ledger .form-select:disabled {
    background-color: var(--surface-container-low);
    color: var(--on-surface-disabled);
    cursor: not-allowed;
}

/* ---------- Buttons: consistent compact height ---------- */
html.ledger .btn { padding-top: .45rem; padding-bottom: .45rem; }
html.ledger .btn-sm { padding-top: .3rem; padding-bottom: .3rem; font-size: .8rem; }
html.ledger .btn .fa, html.ledger .btn .fas, html.ledger .btn .far { font-size: .9em; }

/* ---------- Tabs (nav-tabs pattern): text + indicator, no pills ---------- */
html.ledger .nav-tabs { border-bottom: 1px solid var(--outline-variant); gap: 4px; }
html.ledger .nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; color: var(--on-surface-variant);
    font-weight: 600; font-size: .875rem; background: transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
html.ledger .nav-tabs .nav-link:hover { color: var(--on-surface); }
html.ledger .nav-tabs .nav-link.active {
    color: var(--ink); border-bottom-color: var(--ink); background: transparent;
}

/* ---------- Dropdown items: comfortable targets ---------- */
html.ledger .dropdown-menu { box-shadow: var(--shadow-2); padding: 6px; }
html.ledger .dropdown-item { border-radius: var(--radius-sm); padding: 8px 12px; font-size: .855rem; }

/* ---------- Modal backdrop: soft slate, not black ---------- */
html.ledger .modal-backdrop { background-color: #0F172A; --bs-backdrop-opacity: .4; }

/* ---------- Dashboard analytics widgets (token classes, no inline hex) ---------- */
html.ledger .lg-widget-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex: none;
}
html.ledger .lg-widget-icon--primary { background: var(--ink-soft); color: var(--ink); }
html.ledger .lg-widget-icon--info { background: var(--info-soft); color: var(--info-ink); }
html.ledger .lg-widget-icon--success { background: var(--success-soft); color: var(--success); }
html.ledger .lg-widget-icon--warning { background: var(--warning-soft); color: var(--warning); }
html.ledger .lg-widget-icon--danger { background: var(--error-soft); color: var(--error-ink); }
html.ledger .card-heading { font-size: 1rem; font-weight: 600; color: var(--on-surface); margin: 0; }

/* ---------- Empty states ---------- */
html.ledger .lg-empty { text-align: center; padding: 40px 24px; color: var(--on-surface-variant); }
html.ledger .lg-empty i {
    font-size: 1.4rem; width: 52px; height: 52px; border-radius: 50%;
    background: var(--surface-container-low); color: var(--on-surface-disabled);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
html.ledger .lg-empty .lg-empty-title { font-weight: 600; color: var(--on-surface); font-size: .95rem; margin-bottom: 2px; }
html.ledger .lg-empty p { font-size: .83rem; margin: 0; }

/* ---------- Skeleton loading ---------- */
html.ledger .lg-skeleton {
    background: var(--surface-container-high);
    border-radius: var(--radius-sm);
    animation: lg-pulse 1.6s ease-in-out infinite;
    color: transparent !important; user-select: none;
}
@keyframes lg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Table refinements ---------- */
html.ledger .table thead th { font-weight: 600; }
html.ledger .table .btn-group .btn-sm { width: 32px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* Segmented button groups: joined corners, no per-button rounding collisions */
html.ledger .btn-group > .btn { border-radius: 0 !important; }
html.ledger .btn-group > .btn:first-child { border-radius: 8px 0 0 8px !important; }
html.ledger .btn-group > .btn:last-child { border-radius: 0 8px 8px 0 !important; }
html.ledger .btn-group > .btn:only-child { border-radius: 8px !important; }

/* ---------- Toasts: neutral card + semantic icon only ---------- */
html.ledger .swal2-toast { box-shadow: var(--shadow-2) !important; border-radius: var(--radius-md) !important; }

/* ---------- Selection tint follows primary ---------- */
html.ledger .selected-row, html.ledger .selected-row td { background-color: var(--ink-soft) !important; }

/* ============================================================
   Application shell — floating rounded container (desktop)
   ============================================================ */
@media (min-width: 992px) {
    html.ledger body:has(.dashboard-wrapper) { background: var(--outer-bg, #EEF0F2); }
    html.ledger .dashboard-wrapper { min-height: 100vh; }
    html.ledger .sidebar {
        top: 24px; left: 24px; bottom: 24px;
        height: auto;
        border-radius: 24px 0 0 24px;
        border-right: 1px solid var(--outline-variant);
        box-shadow: var(--shadow-shell);
    }
    html.ledger body:has(.dashboard-wrapper) { overflow: hidden; height: 100vh; }
    html.ledger .main-content {
        margin: 24px 24px 24px calc(var(--sidebar-width, 204px) + 24px);
        background: var(--surface);
        border-radius: 0 24px 24px 0;
        height: calc(100vh - 48px);
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
        box-shadow: var(--shadow-shell);
    }
    html.ledger .main-content::-webkit-scrollbar { width: 8px; }
    html.ledger .main-content::-webkit-scrollbar-track { background: transparent; }
    html.ledger .main-content::-webkit-scrollbar-thumb { background: var(--surface-container-highest); border-radius: 8px; }
    html.ledger .lg-topbar { border-radius: 0 24px 0 0; }
}
@media (min-width: 1600px) {
    html.ledger .sidebar { top: 40px; left: 40px; bottom: 40px; }
    html.ledger .main-content { margin: 40px 40px 40px calc(var(--sidebar-width, 204px) + 40px); height: calc(100vh - 80px); }
}

/* Sidebar internals on the light surface */
html.ledger .sidebar::-webkit-scrollbar-thumb { background: var(--surface-container-highest); }
html.ledger .menu-header { font-size: 10px; padding: 16px 20px 4px; }
html.ledger .menu-link { height: 38px; font-size: 0.845rem; }
html.ledger .menu-link i { font-size: 0.85rem; width: 17px; }
html.ledger .menu-link.active i { color: var(--sb-active-text, var(--ink)); }

/* ============================================================
   Reference-grade dashboard widgets
   ============================================================ */

/* Page-title scale (30px hierarchy: eyebrow / title / description) */
html.ledger .lg-hero-title { font-size: 1.875rem; font-weight: 600; }
html.ledger .stat-value { font-size: 2rem; }

/* KPI row: compact cards, one accent card */
html.ledger .lg-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1199.98px) { html.ledger .lg-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { html.ledger .lg-kpi-row { grid-template-columns: 1fr; } }
html.ledger .lg-kpi-row .stat-card { min-height: 116px; }
html.ledger .stat-card.stat-accent-card {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--on-ink);
}
html.ledger .stat-accent-card .stat-value { color: var(--on-ink); }
html.ledger .stat-accent-card .stat-label { color: color-mix(in srgb, var(--on-ink), transparent 30%); }
html.ledger .stat-accent-card .stat-icon-box {
    background: color-mix(in srgb, var(--on-ink), transparent 82%) !important;
    color: var(--on-ink) !important;
}
html.ledger .stat-caption { font-size: 12px; color: var(--on-surface-variant); }
html.ledger .stat-accent-card .stat-caption { color: color-mix(in srgb, var(--on-ink), transparent 30%); }

/* Service overview: large analytics card with share bars (real data) */
html.ledger .lg-service-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0;
}
html.ledger .lg-service-row + .lg-service-row { border-top: 1px solid var(--outline-variant); }
html.ledger .lg-service-meta { min-width: 168px; }
html.ledger .lg-service-name { font-size: 0.875rem; font-weight: 600; color: var(--on-surface); line-height: 1.25; }
html.ledger .lg-service-sub { font-size: 12px; color: var(--on-surface-variant); }
html.ledger .lg-bar { flex: 1; height: 8px; border-radius: 9999px; background: var(--surface-container-high); overflow: hidden; }
html.ledger .lg-bar-fill { height: 100%; border-radius: 9999px; background: var(--ink); }
html.ledger .lg-bar-fill.is-secondary { background: var(--secondary); }
html.ledger .lg-bar-fill.is-accent { background: var(--accent); }
html.ledger .lg-service-count { font-weight: 700; font-size: 0.95rem; color: var(--on-surface); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
html.ledger .lg-service-today { min-width: 84px; text-align: right; }

/* Donut progress (pure CSS, real percentage) */
html.ledger .lg-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; }
html.ledger .lg-donut {
    width: 150px; height: 150px; border-radius: 50%;
    background: conic-gradient(var(--ink) calc(var(--pct, 0) * 1%), var(--surface-container-high) 0);
    display: flex; align-items: center; justify-content: center;
}
html.ledger .lg-donut-hole {
    width: 108px; height: 108px; border-radius: 50%;
    background: var(--surface-container-lowest);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
html.ledger .lg-donut-value { font-size: 1.6rem; font-weight: 700; color: var(--on-surface); line-height: 1; }
html.ledger .lg-donut-label { font-size: 11px; color: var(--on-surface-variant); margin-top: 4px; }
html.ledger .lg-legend { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--on-surface-variant); }
html.ledger .lg-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* Search field + list toolbars: see "Search field & list toolbar" section at the end of this file. */

/* ---------- Quick-data side widget ---------- */
html.ledger .lg-quick-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 0; font-size: 0.845rem; color: var(--on-surface-secondary);
}
html.ledger .lg-quick-row + .lg-quick-row { border-top: 1px solid var(--outline-variant); }
html.ledger .lg-quick-value { font-weight: 700; color: var(--on-surface); font-variant-numeric: tabular-nums; min-width: 0; text-align: right; overflow-wrap: anywhere; }

/* ============================================================
   Dashboard alignment pass
   ============================================================ */

/* KPI cards: label top-left, icon top-right, number, caption bottom */
html.ledger .lg-kpi-row .stat-card {
    align-items: flex-start;
    padding: 18px 20px;
    min-height: 118px;
}
html.ledger .lg-kpi-row .stat-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
html.ledger .lg-kpi-row .stat-label { margin-bottom: 6px; letter-spacing: 0.06em; }
html.ledger .lg-kpi-row .stat-value { line-height: 1.1; }
html.ledger .stat-caption { display: block; margin-top: 6px; line-height: 1.35; }
html.ledger .lg-kpi-row .stat-icon-box { flex: none; }

/* Row-2 cards share height; donut centers in the leftover space */
html.ledger .lg-donut-wrap { flex: 1; justify-content: center; }

/* Service rows: never cram — bar keeps room, controls wrap as a unit */
html.ledger .lg-service-row { flex-wrap: wrap; row-gap: 8px; }
html.ledger .lg-service-meta { min-width: 158px; flex: none; }
html.ledger .lg-bar { min-width: 140px; }
html.ledger .lg-service-count { min-width: 52px; }
html.ledger .lg-service-today { min-width: auto; }
@media (max-width: 575.98px) {
    html.ledger .lg-service-meta { flex: 1 1 100%; }
    html.ledger .lg-bar { order: 3; flex: 1 1 100%; }
}

/* Quick lists: fixed icon column so labels align */
html.ledger .lg-quick-label { display: flex; align-items: center; }
html.ledger .lg-quick-label i { width: 20px; text-align: center; flex: none; }
html.ledger .lg-quick-actions .btn { display: flex; align-items: center; }
html.ledger .lg-quick-actions .btn i { width: 18px; text-align: center; flex: none; }

/* Card toolbar layout lives in the "Search field & list toolbar" section. */
html.ledger #bulk-actions-group { width: auto; flex: none; }

/* Section rhythm: consistent 16px card gaps, 24px between sections */
html.ledger .lg-kpi-row { margin-bottom: 24px !important; }
html.ledger .row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
html.ledger #bulk-actions-group .btn { border-radius: 0 8px 8px 0 !important; }
html.ledger #bulk-actions-group .form-select { border-radius: 8px 0 0 8px !important; }


/* ---------- Layout engineering: one flow, one scroll ---------- */
html.ledger .main-content { min-width: 0; display: flex; flex-direction: column; }
/* CRITICAL: children must keep their natural height — the container scrolls.
   Without this, the fixed-height flex column COMPRESSES tall page content
   (clipped tables/toolbars) instead of overflowing into its scrollbar. */
html.ledger .main-content > * { flex-shrink: 0; }
html.ledger .main-content > footer.main-footer { margin-top: auto; padding-bottom: 4px; }


/* Sticky header architecture: the scrollport starts AT the header (no padded
   strip above it), and the header surface is always opaque. */
html.ledger .main-content { padding-top: 0 !important; }

/* ============================================================
   Sidebar architecture: fixed brand header + scrollable nav +
   fixed account footer. Only .sidebar-menu scrolls.
   ============================================================ */
html.ledger .sidebar { overflow: hidden; }
html.ledger .sidebar-header { flex-shrink: 0; }
html.ledger .sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
html.ledger .sidebar-menu::-webkit-scrollbar { width: 4px; }
html.ledger .sidebar-menu::-webkit-scrollbar-track { background: transparent; }
html.ledger .sidebar-menu::-webkit-scrollbar-thumb { background: var(--surface-container-highest); border-radius: 8px; }
html.ledger .lg-user-card { flex-shrink: 0; margin-top: 0; }
html.ledger .lg-user-avatar--img { overflow: hidden; background: var(--surface-container-high); }
html.ledger .lg-user-avatar--img img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   PDF format options — one component, three semantic accents.
   Accent/tint come from theme tokens (dark mode remaps them).
   ============================================================ */
html.ledger .lg-pdf-option {
    --pdf-accent: var(--ink);        /* Letterhead: primary green */
    --pdf-tint: var(--ink-soft);
    display: flex; align-items: center; gap: 14px; width: 100%;
    appearance: none; cursor: pointer; text-align: left;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: var(--font-sans);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
html.ledger .lg-pdf-option--standard { --pdf-accent: var(--info-ink); --pdf-tint: var(--info-soft); }
html.ledger .lg-pdf-option--proof { --pdf-accent: var(--warning); --pdf-tint: var(--warning-soft); }
html.ledger .lg-pdf-option:hover,
html.ledger .lg-pdf-option:active {
    border-color: var(--pdf-accent);
    background: var(--pdf-tint);
}
html.ledger .lg-pdf-option:focus-visible { outline: 2px solid var(--pdf-accent); outline-offset: 2px; }
html.ledger .lg-pdf-icon {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--pdf-tint); color: var(--pdf-accent); font-size: 1rem;
    transition: background var(--transition-fast);
}
html.ledger .lg-pdf-option:hover .lg-pdf-icon { background: var(--surface-container-lowest); }
html.ledger .lg-pdf-title { display: block; font-weight: 600; font-size: .9rem; color: var(--on-surface); }
html.ledger .lg-pdf-option:hover .lg-pdf-title { color: var(--pdf-accent); }
html.ledger .lg-pdf-desc { display: block; font-size: .78rem; color: var(--on-surface-variant); }

/* ============================================================
   SaaS navigation feel: cross-document View Transitions.
   The sidebar and top bar get their own transition names, so
   the browser holds them visually stable while only the page
   content cross-fades between full-page navigations.
   ============================================================ */
@view-transition { navigation: auto; }
@media (min-width: 992px) {
    html.ledger .sidebar { view-transition-name: lg-sidebar; }
    html.ledger .lg-topbar { view-transition-name: lg-topbar; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
::view-transition-old(lg-sidebar), ::view-transition-new(lg-sidebar),
::view-transition-old(lg-topbar), ::view-transition-new(lg-topbar) { animation: none; }

/* ============================================================
   ONE tab system. Every internal tab family (settings pills,
   log pills, custom tabs, profile tabs) shares identical
   geometry and states — only labels/icons differ.
   ============================================================ */
html.ledger .log-pills, html.ledger .custom-tabs,
html.ledger .profile-settings-nav, html.ledger .lg-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    background: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    box-shadow: none !important;
}
html.ledger .log-pills .nav-link, html.ledger .custom-tabs .nav-link,
html.ledger .profile-settings-nav .profile-tab-link,
html.ledger .settings-pills .nav-link, html.ledger .lg-tabs .lg-tab {
    height: 38px !important;
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 0.855rem !important; font-weight: 600 !important;
    color: var(--on-surface-variant) !important;
    background: transparent !important;
    border: 0 !important;
    transition: background var(--transition-fast), color var(--transition-fast);
}
html.ledger .log-pills .nav-link:hover, html.ledger .custom-tabs .nav-link:hover,
html.ledger .profile-settings-nav .profile-tab-link:hover,
html.ledger .settings-pills .nav-link:hover, html.ledger .lg-tabs .lg-tab:hover {
    background: var(--ink-soft) !important;
    color: var(--ink) !important;
}
html.ledger .log-pills .nav-link.active, html.ledger .custom-tabs .nav-link.active,
html.ledger .profile-settings-nav .profile-tab-link.active,
html.ledger .settings-pills .nav-link.active, html.ledger .lg-tabs .lg-tab.active {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
}
html.ledger .profile-settings-nav .profile-tab-link.active i { color: var(--on-ink) !important; opacity: 1 !important; }

/* ============================================================
   Sidebar structure pass: stable 260px width, one-line labels,
   aligned chevrons, clear submenu hierarchy, consistent rhythm.
   ============================================================ */
html.ledger .menu-link {
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}
html.ledger .menu-link > i:first-child { flex: none; }
html.ledger .menu-link .chevron-rotate { flex: none; margin-left: auto !important; }
/* parent rows: label may truncate before it ever wraps or pushes the chevron */
html.ledger .menu-link { text-overflow: ellipsis; }

/* Submenu: subtle rail + calm children, clearly owned by the parent */
html.ledger .submenu {
    margin: 2px 12px 4px 24px;
    padding-left: 10px;
    border-left: 1px solid var(--outline-variant);
}
html.ledger .submenu .menu-link {
    margin: 1px 0;
    height: 34px;
    font-size: 0.83rem;
    font-weight: 500;
    padding: 0 10px;
}
html.ledger .submenu .menu-link i { font-size: 0.72rem; width: 15px; }
html.ledger .submenu .menu-link.active { font-weight: 600; }
html.ledger .submenu .menu-link.active::before { left: -11px; height: 18px; }

/* Section rhythm: heading -> items -> breathing room before next section */
html.ledger .menu-header { padding: 22px 20px 8px; }
html.ledger .menu-header:first-child { padding-top: 10px; }
html.ledger .sidebar-menu { padding-top: 4px; }

/* ============================================================
   Reusable bulk-action toolbar (.lg-bulkbar).
   Pages toggle `d-none`; while no row is selected the toolbar
   is removed from layout entirely (display:none).
   ============================================================ */
html.ledger .lg-bulkbar {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 38px;
    box-shadow: none !important;
    transition: opacity var(--transition-fast);
}
/* Hidden means GONE: an empty selection removes the toolbar from layout
   entirely (no reserved blank band above tables). Standalone toolbars may
   wrap on narrow screens; header-inline ones (.input-group) stay one row. */
html.ledger .lg-bulkbar.d-none {
    display: none !important;
}
html.ledger .lg-bulkbar:not(.input-group) {
    flex-wrap: wrap;
}
html.ledger .lg-bulkbar:not(.d-none) {
    animation: lgBulkIn .14s ease-out;
}
@keyframes lgBulkIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}
html.ledger .lg-bulkbar .lg-sel-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 96px; height: 38px; padding: 0 12px;
    background: var(--ink-soft); color: var(--ink);
    border: 1px solid transparent; border-radius: 8px;
    font-weight: 600; font-size: 0.82rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
html.ledger .lg-bulkbar .form-select {
    width: auto; height: 38px; padding-top: 0; padding-bottom: 0;
    border-radius: 8px !important; font-size: 0.845rem;
}
html.ledger .lg-bulkbar .btn {
    height: 38px; display: inline-flex; align-items: center;
    border-radius: 8px !important; white-space: nowrap;
}

/* Single reveal-buttons tied to selection (e.g. "Link N to Task"):
   hidden means gone, exactly like .lg-bulkbar (Bootstrap's .d-none). */

/* ============================================================
   Reusable searchable combobox (.lg-combo) — used inside modals
   for large record pickers (tasks, users, documents...).
   ============================================================ */
.lg-combo { position: relative; text-align: left; }
.lg-combo-field {
    width: 100%; min-height: 42px;
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.9rem; color: var(--on-surface);
    cursor: pointer; text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lg-combo-field:focus, .lg-combo.open .lg-combo-field {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.lg-combo-field .lg-combo-placeholder { color: var(--on-surface-disabled); }
.lg-combo-field .lg-combo-chevron { margin-left: auto; color: var(--on-surface-disabled); font-size: .75rem; flex: none; }
.lg-combo-value { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lg-combo-value .lg-combo-ref {
    background: var(--ink-soft); color: var(--ink);
    border-radius: 6px; padding: 2px 8px;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em; flex: none;
}
.lg-combo-value .lg-combo-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lg-combo-pop {
    /* in-flow inside the modal body: nothing to clip, nothing to overlap */
    margin-top: 8px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
/* Scoped to the picker dialog only: fixed-height content, so the modal body
   must never grow its own scrollbar (the results list is the one scroller). */
.lg-picker-popup .swal2-html-container { overflow: visible !important; }
.lg-combo-field.has-value { cursor: default; border-color: var(--success); }
.lg-combo-search {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--outline-variant);
}
.lg-combo-search i { color: var(--on-surface-disabled); font-size: .85rem; }
.lg-combo-search input {
    border: 0; outline: 0; background: transparent; width: 100%;
    font-size: .875rem; color: var(--on-surface);
}
.lg-combo-search input::placeholder { color: var(--on-surface-disabled); }
.lg-combo-list { height: min(300px, 45vh); overflow-y: auto; padding: 6px; }
.lg-combo-item {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; cursor: pointer;
    border-radius: 8px; padding: 8px 10px;
    transition: background .12s ease;
}
.lg-combo-item:hover, .lg-combo-item.is-hilite { background: var(--surface-container-low); }
.lg-combo-item.is-selected { background: var(--ink-soft); }
.lg-combo-item .lg-combo-ref {
    display: inline-block; background: var(--ink-soft); color: var(--ink);
    border-radius: 6px; padding: 1px 8px;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em; margin-bottom: 3px;
}
.lg-combo-item .lg-combo-title { font-size: .875rem; font-weight: 600; color: var(--on-surface); line-height: 1.25; }
.lg-combo-item .lg-combo-sub { font-size: .75rem; color: var(--on-surface-variant); }
.lg-combo-empty { text-align: center; padding: 26px 12px; color: var(--on-surface-variant); font-size: .83rem; }
.lg-combo-empty i { display: block; font-size: 1.1rem; color: var(--on-surface-disabled); margin-bottom: 6px; }

/* ============================================================
   Shared circular avatar (.lg-avatar): photo over initial, so a
   missing/broken image gracefully falls back — never a broken
   image icon, never a square.
   ============================================================ */
html.ledger .lg-avatar {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; overflow: hidden; flex: none;
    background: var(--ink); color: var(--on-ink);
    font-weight: 700; line-height: 1; user-select: none;
    border: 1px solid var(--outline-variant);
}
html.ledger .lg-avatar .lg-avatar-initial { position: relative; }
html.ledger .lg-avatar img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1;
}

/* Form upload preview block */
html.ledger .lg-avatar-upload { display: flex; align-items: center; gap: 14px; }
html.ledger .lg-avatar-upload .form-control { max-width: 320px; }

/* ==========================================================================
   Searchable customer combobox (.lg-combo*) — search input lives INSIDE the
   opened panel; the trigger is a .form-select-styled button.
   ========================================================================== */
html.ledger .lg-combo-toggle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
html.ledger .lg-combo-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1055;
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline, #D5DCD8);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-2, 0 8px 24px rgba(0, 0, 0, .12));
    overflow: hidden;
}
html.ledger .lg-combo-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--outline-variant, #E5EAE7);
}
html.ledger .lg-combo-search i { color: var(--on-surface-variant, #6B7280); font-size: .8rem; }
html.ledger .lg-combo-search input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font-size: .875rem;
    color: var(--on-surface, #111827);
}
html.ledger .lg-combo-list {
    max-height: 260px;
    overflow-y: auto;
}
html.ledger .lg-combo-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 8px 12px;
    font-size: .875rem;
    line-height: 1.3;
    color: var(--on-surface, #111827);
    cursor: pointer;
}
html.ledger .lg-combo-item:hover,
html.ledger .lg-combo-item.active {
    background: var(--ink-soft, #E7F4EE);
}
html.ledger .lg-combo-empty { padding: 12px; }
/* let the open panel escape the card's rounded-corner clipping */
html.ledger .data-card:has(.lg-combo-panel:not(.d-none)) { overflow: visible; }

/* ==========================================================================
   Shared searchable select (.lgs-*) — public/assets/js/lg-select.js.
   The native <select> stays in the form (visually hidden, still validated);
   the trigger looks exactly like .form-select; the panel is position:fixed
   (never clipped by cards/tables/modals) and sized to the viewport.
   ========================================================================== */
.lgs { position: relative; min-width: 0; }
.lgs .lgs-native {
    position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 1px !important;
    opacity: 0; pointer-events: none; padding: 0; border: 0; margin: 0;
}
.lgs-trigger {
    display: flex; align-items: center; width: 100%; min-width: 0;
    text-align: left; cursor: pointer; background-color: var(--surface-container-lowest, #fff);
}
.lgs-trigger:focus-visible, .lgs.open .lgs-trigger {
    border-color: var(--accent, #1F6F4A); outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(31, 111, 74, .15));
}
.lgs-trigger:disabled { background-color: var(--surface-container-low, #F4F6F5); cursor: not-allowed; opacity: .8; }
.lgs-trigger.is-invalid { border-color: var(--danger, #DC2626); }
.lgs-value { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.lgs-v-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lgs-ph { color: var(--on-surface-variant, #6B7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-meta {
    flex: none; margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    background: var(--ink-soft, #E7F4EE); color: var(--ink, #14532D); border-radius: 6px; padding: 1px 7px;
}
.lgs-panel {
    position: fixed; z-index: 1090; display: flex; flex-direction: column;
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline, #D5DCD8); border-radius: 10px;
    box-shadow: var(--shadow-2, 0 10px 28px rgba(15, 23, 20, .14));
    overflow: hidden; font-size: .875rem;
}
.lgs-search {
    display: flex; align-items: center; gap: 8px; flex: none;
    padding: 9px 12px; border-bottom: 1px solid var(--outline-variant, #E5EAE7);
}
.lgs-search i { color: var(--on-surface-variant, #6B7280); font-size: .8rem; }
.lgs-search input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; font-size: .875rem; color: var(--on-surface, #111827); }
.lgs-list { overflow-y: auto; overscroll-behavior: contain; padding: 4px; flex: 1 1 auto; min-height: 0; }
.lgs-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px;
    cursor: pointer; color: var(--on-surface, #111827); line-height: 1.3;
}
.lgs-item.is-hilite { background: var(--surface-container-low, #F1F5F3); }
.lgs-item.is-selected { background: var(--ink-soft, #E7F4EE); }
.lgs-item.is-selected.is-hilite { box-shadow: inset 0 0 0 1px var(--accent, #1F6F4A); }
.lgs-item.is-disabled { opacity: .45; cursor: not-allowed; }
.lgs-item.lgs-empty-opt .lgs-text { color: var(--on-surface-variant, #6B7280); }
.lgs-main { min-width: 0; flex: 1; }
.lgs-text { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-sub { font-size: .75rem; color: var(--on-surface-variant, #6B7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-check { color: var(--accent, #1F6F4A); font-size: .75rem; flex: none; }
.lgs-group { padding: 8px 10px 3px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-surface-variant, #6B7280); }
.lgs-state { padding: 16px 12px; text-align: center; color: var(--on-surface-variant, #6B7280); font-size: .83rem; }
.lgs-state.lgs-more { padding: 6px; font-size: .75rem; }
.lgs-error { color: var(--danger, #DC2626); }
.lgs-add {
    flex: none; display: block; padding: 9px 12px; border-top: 1px solid var(--outline-variant, #E5EAE7);
    font-weight: 600; font-size: .83rem; color: var(--accent, #1F6F4A); text-decoration: none;
}
.lgs-add:hover, .lgs-add:focus { background: var(--surface-container-low, #F1F5F3); }

/* Order items editor (billing/orders/form): one compact card-row per item */
.lg-oi-rows { padding: 4px 16px; }
.lg-oi-row { padding: 12px 0; border-bottom: 1px dashed var(--outline-variant, #E5EAE7); }
.lg-oi-row:last-child { border-bottom: 0; }
.lg-oi-row.is-linked { background: linear-gradient(90deg, var(--ink-soft, #E7F4EE) 0, transparent 6px); padding-left: 10px; }
.lg-oi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lg-oi-no { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-surface-variant, #6B7280); }
.lg-oi-pickwrap { width: 260px; max-width: 100%; }
.lg-oi-grid {
    display: grid; gap: 8px 10px; align-items: end;
    grid-template-columns: minmax(160px, 2fr) minmax(160px, 2.4fr) 80px 90px 110px 100px 80px 110px;
}
.lg-oi-total { text-align: right; }
.lg-oi-amount { padding: 4px 0; font-size: .95rem; }
.lg-oi-totals { min-width: 260px; }
/* the 8-column row needs ~960px of card width: below that (incl. 1280px
   screens with the sidebar open) items use the stacked 6-column layout */
@media (max-width: 1399.98px) {
    .lg-oi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg-oi-svc, .lg-oi-desc { grid-column: span 3; }
}
@media (max-width: 575.98px) {
    .lg-oi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-oi-svc, .lg-oi-desc { grid-column: span 2; }
    .lg-oi-pickwrap { width: 100%; order: 3; }
    .lg-oi-totals { min-width: 0; width: 100%; }
}

/* consolidated invoice review */
.lg-gen-head { cursor: pointer; }
.lg-gen-order.is-selected { background: var(--ink-soft, #E7F4EE); }
.lg-gen-items { font-size: .82rem; }
.lg-gen-items tr.lg-gen-done td { background: transparent; }
@media (min-width: 1200px) { .lg-gen-summary { position: sticky; top: calc(var(--lg-header-h, 64px) + 12px); } }

/* ==========================================================================
   Search field & list toolbar — ONE component for every list page.
   .lg-search is a self-contained field (icon inside, input fills the rest);
   it no longer depends on sitting inside .lg-card-toolbar (it used to be
   styled ONLY there, so a search box in any other toolbar — .lg-filterbar on
   Orders / invoice review — fell back to a bare browser input with the icon
   outside it). Both toolbar classes share one layout: search grows and keeps
   a readable minimum, filters keep their natural width, everything is the
   same height and wraps to new rows instead of shrinking.
   ========================================================================== */
html.ledger { --lg-ctl-h: 44px; }
html.ledger .lg-search:not(input) {
    display: flex; align-items: center; gap: 10px;
    height: var(--lg-ctl-h); min-width: 0;
    padding: 0 14px;
    background: var(--surface-container-low);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: text;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
html.ledger .lg-search:not(input):hover { border-color: var(--outline-variant); }
html.ledger .lg-search:not(input):focus-within {
    border-color: var(--accent);
    background: var(--surface-container-lowest);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
html.ledger .lg-search > i { flex: none; color: var(--on-surface-disabled); font-size: 0.875rem; line-height: 1; }
html.ledger .lg-search input {
    flex: 1 1 auto; min-width: 0; width: 100%; height: 100%;
    padding: 0; margin: 0;
    border: 0; outline: 0; box-shadow: none; background: transparent;
    color: var(--on-surface); font-family: inherit; font-size: 0.875rem; font-weight: 500;
    text-overflow: ellipsis;
}
html.ledger .lg-search input::placeholder { color: var(--on-surface-disabled); opacity: 1; }

/* toolbars */
html.ledger .lg-card-toolbar,
html.ledger .lg-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
/* search grows; 300px minimum keeps full placeholders readable — crowded toolbars wrap instead of squeezing it */
html.ledger :is(.lg-card-toolbar, .lg-filterbar) > .lg-search { flex: 1 1 300px; min-width: 300px; }
/* controls share the search height so the row lines up */
html.ledger :is(.lg-card-toolbar, .lg-filterbar) > :is(.form-select, .form-control),
html.ledger :is(.lg-card-toolbar, .lg-filterbar) .lgs-trigger,
html.ledger :is(.lg-card-toolbar, .lg-filterbar) .dropdown > .form-select {
    height: var(--lg-ctl-h); padding-top: 0; padding-bottom: 0; font-size: 0.875rem;
}
html.ledger :is(.lg-card-toolbar, .lg-filterbar) > .form-select { width: auto; flex: 0 1 auto; min-width: 150px; max-width: 260px; }
html.ledger :is(.lg-card-toolbar, .lg-filterbar) > .lgs,
html.ledger :is(.lg-card-toolbar, .lg-filterbar) > .lg-filter-pick { flex: 0 1 220px; min-width: 170px; max-width: 260px; }
html.ledger :is(.lg-card-toolbar, .lg-filterbar) > .btn,
html.ledger :is(.lg-card-toolbar, .lg-filterbar) .lg-filter-actions > .btn {
    height: var(--lg-ctl-h); display: inline-flex; align-items: center; justify-content: center;
    padding-top: 0; padding-bottom: 0; white-space: nowrap; flex: none;
}
html.ledger .lg-filterbar .lg-filter-actions { display: flex; gap: 8px; margin-left: auto; }
html.ledger .lg-filter-pick .lgs-trigger { width: 100%; }
/* search + button pair living in a page header (Tasks, File Manager) */
html.ledger .lg-search-form { display: flex; align-items: center; gap: 8px; flex: 0 1 420px; min-width: 260px; }
html.ledger .lg-search-form > .lg-search { flex: 1 1 auto; }
html.ledger .lg-search-form > .btn { height: var(--lg-ctl-h); display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; flex: none; }
html.ledger .lg-filterbar .lg-filter-wide { flex: 1 1 280px; max-width: 420px; min-width: 240px; }

/* tablets: filters share the row evenly under a full-width search */
@media (max-width: 991.98px) {
    html.ledger :is(.lg-card-toolbar, .lg-filterbar) > .lg-search { flex-basis: 100%; }
    html.ledger :is(.lg-card-toolbar, .lg-filterbar) > :is(.form-select, .lgs, .lg-filter-pick, .dropdown) { flex: 1 1 180px; max-width: none; }
}
/* phones: one control per row, buttons keep their size */
@media (max-width: 575.98px) {
    html.ledger :is(.lg-card-toolbar, .lg-filterbar) > .lg-search { min-width: 0; }
    html.ledger :is(.lg-card-toolbar, .lg-filterbar) > :is(.form-select, .lgs, .lg-filter-pick, .dropdown, .lg-filter-wide) { flex: 1 1 100%; min-width: 0; }
    html.ledger :is(.lg-card-toolbar, .lg-filterbar) .lg-dr-btn { width: 100%; }
    html.ledger .lg-filterbar .lg-filter-actions { margin-left: 0; }
    html.ledger .lg-search-form { flex: 1 1 100%; min-width: 0; }
}


/* Inline filter bar (.lg-filterbar--inline, e.g. Client Orders): every control on ONE
   row when the content area allows it; below that, intentional rows — search on top,
   filters sharing a row, and date range + action buttons kept together (never an
   isolated button). Breakpoints are viewport-based (container queries would make
   the bar a containing block for the date picker's position:fixed panel). */
html.ledger .lg-filterbar--inline { gap: 8px; }
html.ledger .lg-filterbar--inline > .lg-search { flex: 1 1 285px; min-width: 285px; } /* fits the full placeholder */
html.ledger .lg-filterbar--inline > :is(.form-select, .lgs) { flex: 0 1 140px; width: 140px; min-width: 120px; max-width: 200px; } /* fixed basis so the row fits before wrapping */
html.ledger .lg-filterbar--inline .lg-filter-actions { flex: none; margin-left: 0; align-items: center; }
html.ledger .lg-filterbar--inline .lg-dr-btn { min-width: 132px; }
@media (max-width: 1499.98px) {
    html.ledger .lg-filterbar--inline > .lg-search { flex-basis: 100%; }
    html.ledger .lg-filterbar--inline > :is(.form-select, .lgs) { flex: 1 1 140px; width: auto; max-width: none; }
    html.ledger .lg-filterbar--inline .lg-filter-actions { flex: 1 1 auto; justify-content: flex-end; }
}
@media (max-width: 991.98px) {
    html.ledger .lg-filterbar--inline .lg-filter-actions { flex: 1 1 100%; }
    html.ledger .lg-filterbar--inline .lg-filter-actions .dropdown { flex: 1 1 auto; }
    html.ledger .lg-filterbar--inline .lg-dr-btn { width: 100%; }
}
@media (max-width: 575.98px) {
    html.ledger .lg-filterbar--inline > .lg-search { min-width: 0; }
    html.ledger .lg-filterbar--inline > :is(.form-select, .lgs) { flex: 1 1 calc(50% - 4px); min-width: 0; }
}
/* Inline bar with a leading scope picker (.lg-filterbar--lead, e.g. Annual
   Returns: Tax Year · Search · filters · Search). One row from ~1280px; below
   that the picker and search share the first row and the filters + button the
   second; on phones each picker gets its own row. */
html.ledger .lg-filterbar--lead > .lg-filter-lead { flex: 0 0 140px; width: 140px; min-width: 0; max-width: none; }
html.ledger .lg-filterbar--lead > .lg-search { flex: 1 1 190px; min-width: 190px; }
html.ledger .lg-filterbar--lead > :is(.form-select:not(.lg-filter-lead), .lgs) { flex: 0 1 124px; width: 124px; min-width: 110px; }
@media (max-width: 1499.98px) {
    html.ledger .lg-filterbar--lead > .lg-search { flex: 1 1 190px; }
    html.ledger .lg-filterbar--lead > :is(.form-select:not(.lg-filter-lead), .lgs) { flex: 0 1 124px; width: 124px; }
    html.ledger .lg-filterbar--lead .lg-filter-actions { flex: none; }
}
@media (max-width: 1279.98px) {
    html.ledger .lg-filterbar--lead > .lg-search { flex: 1 1 calc(100% - 148px); min-width: 0; }
    html.ledger .lg-filterbar--lead > :is(.form-select:not(.lg-filter-lead), .lgs) { flex: 1 1 130px; width: auto; }
    html.ledger .lg-filterbar--lead .lg-filter-actions { flex: none; }
}
@media (max-width: 575.98px) {
    html.ledger .lg-filterbar--lead > :is(.lg-filter-lead, .lg-search) { flex: 1 1 100%; width: auto; }
    html.ledger .lg-filterbar--lead > :is(.form-select:not(.lg-filter-lead), .lgs) { flex: 1 1 calc(50% - 4px); }
    html.ledger .lg-filterbar--lead .lg-filter-actions { flex: 1 1 calc(50% - 4px); }
    html.ledger .lg-filterbar--lead .lg-filter-actions > .btn-primary { flex: 1 1 auto; }
}
/* date-range trigger (partials/date_range): natural width, readable minimum */
html.ledger .lg-dr-btn { width: auto; min-width: 150px; }
/* previous-balance picker (Generate Invoice review): rows stack on phones so the amount stays reachable */
@media (max-width: 575.98px) {
    html.ledger .lg-prevbal thead { display: none; }
    html.ledger .lg-prevbal tr { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--outline-variant, #E5EAE7); padding: 8px 0; }
    html.ledger .table.lg-prevbal tbody td { border: 0; padding: 4px 8px; }
    html.ledger .lg-prevbal td:nth-child(2) { flex: 1 1 calc(100% - 48px); min-width: 0; }
    html.ledger .table.lg-prevbal tbody td:nth-child(3) { flex: 1 1 50%; text-align: left; padding-left: 44px; }
    html.ledger .table.lg-prevbal tbody td:nth-child(4) { flex: 0 0 140px; width: auto; }
}

/* ============================================================
   Responsive safety net (shared, root-cause level)
   ============================================================ */
/* flex children may shrink below their content width (used by pickers/toolbars) */
.min-w-0 { min-width: 0; }
/* long page lists wrap instead of being cut off by the card */
html.ledger .pagination { flex-wrap: wrap; row-gap: 4px; }
/* label/value rows ("Next number   INV-2026-…"): the value wraps instead of overflowing */
html.ledger .data-card .d-flex.justify-content-between > :is(span, div).text-end { min-width: 0; overflow-wrap: anywhere; }
html.ledger .data-card .d-flex.justify-content-between > .badge { white-space: normal; text-align: right; min-width: 0; }
/* stat tiles: the text column shrinks, the icon keeps its size */
html.ledger .stat-card > :first-child { min-width: 0; }
html.ledger .stat-card .stat-icon-box { flex-shrink: 0; }
/* quick-row values that carry badges (status chips) wrap as a unit instead of being cut */
html.ledger .lg-quick-value:has(.badge) { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }

/* ============================================================
   Tab bar: single line that scrolls sideways when it runs out of
   room (never wraps); group menus open with a fixed-position popper
   so the scroller cannot clip them.
   ============================================================ */
html.ledger .lg-tabs--scroll {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch; max-width: 100%;
}
html.ledger .lg-tabs--scroll > * { flex: none; }
html.ledger .lg-tabs--scroll .lg-tab { padding: 0 12px !important; gap: 6px; } /* base tab rule sets padding with !important */
html.ledger .lg-tabs .lg-tab { white-space: nowrap; text-decoration: none; cursor: pointer; }
html.ledger .lg-tabs .lg-tab i { font-size: .8rem; opacity: .75; }
html.ledger .lg-tabs .lg-tab.active i { opacity: 1; }
html.ledger .lg-tabs .lg-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
html.ledger .lg-tabs .dropdown-toggle::after { margin-left: 2px; }
html.ledger .lg-tab-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: .7rem; line-height: 18px; text-align: center;
    background: var(--warning-soft, #FEF3C7); color: var(--warning-ink, #92400E);
}
html.ledger .lg-tabs .dropdown-item.active, html.ledger .lg-tabs .dropdown-item:active { background: var(--ink); color: var(--on-ink); }
/* priority bars: tabs moved into "More" must really disappear (the shared tab
   rule sets display with !important, which would override [hidden]) */
html.ledger .lg-tabs > [hidden] { display: none !important; }
html.ledger .lg-tabs-more .dropdown-menu { max-height: min(70vh, 440px); overflow-y: auto; }
@media (max-width: 575.98px) { html.ledger .lg-tabs--priority .lg-tab > i:not(.fa-ellipsis-h) { display: none; } }
html.ledger .lg-tabs-more .dropdown-header { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Customer profile: the SAME dashboard KPI cards (.lg-kpi-row .stat-card),
   five of them. Layout only — card design is untouched. One row once each
   card has room for the dashboard's label + figure beside the icon; 3 over 2
   below that; the dashboard's own 2 / 1 column behaviour on small screens. */
@media (min-width: 1420px) { html.ledger .lg-kpi-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1419.98px) {
    html.ledger .lg-kpi-row--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    html.ledger .lg-kpi-row--5 > * { grid-column: span 2; }
    html.ledger .lg-kpi-row--5 > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    html.ledger .lg-kpi-row--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
html.ledger a.lg-cp-kpi-link { color: inherit; text-decoration: none; }

/* ============================================================
   Customer profile
   ============================================================ */
/* Summary card: identity block + three labelled information groups */
html.ledger .lg-cp-head {
    padding: 0; display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); align-items: stretch;
}
html.ledger .lg-cp-identity {
    display: flex; gap: 16px; align-items: flex-start; min-width: 0; padding: 22px 24px;
    background: linear-gradient(160deg, var(--ink-soft), transparent 75%);
    border-right: 1px solid var(--outline-variant); border-radius: 12px 0 0 12px;
}
html.ledger .lg-cp-identity .lg-avatar { flex: none; background: var(--ink); color: var(--on-ink); font-weight: 700; box-shadow: 0 0 0 4px var(--surface-container-lowest); }
html.ledger .lg-cp-name { font-size: 1.3rem; font-weight: 700; line-height: 1.25; margin: 2px 0 4px; color: var(--on-surface); overflow-wrap: anywhere; }
html.ledger .lg-cp-no { font-size: .8rem; font-weight: 600; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
html.ledger .lg-cp-no i { font-size: .65rem; margin-right: 3px; opacity: .7; }
html.ledger .lg-cp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html.ledger .lg-cp-company { font-size: .82rem; color: var(--on-surface-variant); margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ledger .lg-cp-company i { margin-right: 6px; font-size: .75rem; }
html.ledger .lg-cp-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
html.ledger .lg-cp-group { padding: 20px 22px; min-width: 0; }
html.ledger .lg-cp-group + .lg-cp-group { border-left: 1px solid var(--outline-variant); }
html.ledger .lg-cp-group-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--on-surface);
}
html.ledger .lg-cp-group-title i {
    width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; background: var(--ink-soft); color: var(--ink);
}
html.ledger .lg-cp-group dl { margin: 0; display: grid; gap: 10px; }
html.ledger .lg-cp-group dl > div { min-width: 0; }
html.ledger .lg-cp-group dt { font-size: .7rem; font-weight: 600; color: var(--on-surface-variant); margin-bottom: 1px; }
html.ledger .lg-cp-group dd { margin: 0; font-size: .875rem; font-weight: 500; color: var(--on-surface); overflow-wrap: anywhere; line-height: 1.4; }
html.ledger .lg-cp-group dd a { color: var(--ink); text-decoration: none; }
html.ledger .lg-cp-group dd a:hover { text-decoration: underline; }
html.ledger .lg-cp-none { color: var(--on-surface-variant); font-weight: 400; }
@media (max-width: 1399.98px) {
    html.ledger .lg-cp-head { grid-template-columns: 1fr; }
    html.ledger .lg-cp-identity { border-right: 0; border-bottom: 1px solid var(--outline-variant); border-radius: 12px 12px 0 0; padding: 18px 22px; }
}
@media (max-width: 767.98px) {
    html.ledger .lg-cp-groups { grid-template-columns: 1fr; }
    html.ledger .lg-cp-group + .lg-cp-group { border-left: 0; border-top: 1px solid var(--outline-variant); }
    html.ledger .lg-cp-group { padding: 16px 18px; }
    html.ledger .lg-cp-group dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
    html.ledger .lg-cp-group dl > div:has(.lg-cp-address) { grid-column: 1 / -1; }
    html.ledger .lg-cp-name { font-size: 1.15rem; }
    html.ledger .lg-cp-identity { padding: 16px 18px; }
}
@media (max-width: 399.98px) {
    html.ledger .lg-cp-group dl { grid-template-columns: 1fr; }
}

html.ledger .lg-cp-overdue { color: var(--error); font-weight: 600; }
html.ledger .lg-cp-h { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
html.ledger .lg-cp-hicon {
    width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink-soft); color: var(--ink); font-size: .75rem;
}
html.ledger .lg-cp-card-head small { display: block; margin-left: 38px; }

html.ledger .lg-cp-card { overflow: hidden; }
html.ledger .lg-cp-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 14px 20px; border-bottom: 1px solid var(--outline-variant); }
html.ledger .lg-cp-more { font-size: .8rem; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--ink); }
html.ledger .lg-cp-more i { font-size: .7rem; margin-left: 2px; }
html.ledger .lg-cp-body { padding: 6px 20px 14px; }
html.ledger .lg-cp-foot { padding: 10px 20px; border-top: 1px solid var(--outline-variant); }
html.ledger .lg-cp-empty { padding: 18px 20px; font-size: .85rem; color: var(--on-surface-variant); list-style: none; }
html.ledger .lg-cp-table th:first-child, html.ledger .lg-cp-table td:first-child { padding-left: 20px; }
html.ledger .lg-cp-table th:last-child, html.ledger .lg-cp-table td:last-child { padding-right: 20px; }
html.ledger .lg-cp-list { list-style: none; margin: 0; padding: 0; }
html.ledger .lg-cp-list > li:not(.lg-cp-empty) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; }
html.ledger .lg-cp-list > li + li { border-top: 1px solid var(--outline-variant); }
html.ledger .lg-cp-list-main { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
html.ledger a.lg-cp-list-main:hover .fw-bold { color: var(--ink); }
html.ledger .lg-cp-list-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; text-align: right; }
html.ledger .lg-cp-list.lg-cp-timeline > li:not(.lg-cp-empty) { align-items: flex-start; }
html.ledger .lg-cp-wrap { overflow-wrap: anywhere; }

/* ============================================================
   Document references (App\Support\Ref): short display, full on hover
   ============================================================ */
html.ledger .lg-ref { white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ledger .lg-ref[title] { cursor: help; text-decoration: none; }
html.ledger .lg-ref-full {
    display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; vertical-align: middle;
    font-size: .72rem; font-weight: 500; color: var(--on-surface-variant); background: var(--surface-container-high);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Compact data tables (.lg-dtable): main text + muted secondary line, money
   right-aligned in tabular figures, long values truncated with the full
   value on hover — so lists read at a glance without sideways scrolling */
html.ledger .lg-dtable .lg-col-check { width: 1%; }
html.ledger .lg-dtable > thead > tr > th { letter-spacing: .03em; }
/* compact rhythm: 16px between columns (outer ps-4/pe-4 edges stay 24px) */
html.ledger .lg-dtable > :is(thead, tbody) > tr > :is(th, td) { padding-left: 8px; padding-right: 8px; }
html.ledger .lg-dtable > :is(thead, tbody) > tr > :is(th, td):first-child:has(> .form-check-input) { padding-right: 0; }
html.ledger .lg-dtable .lg-cell-main { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-surface); font-weight: 600; }
html.ledger .lg-dtable a.lg-cell-main:hover { color: var(--ink); }
html.ledger .lg-dtable .lg-cell-items .lg-cell-main { max-width: 200px; font-weight: 600; }
html.ledger .lg-dtable .lg-cell-contact .lg-cell-main { max-width: 210px; color: var(--on-surface); }
html.ledger .lg-dtable .lg-cell-sub { font-size: .75rem; color: var(--on-surface-variant); line-height: 1.35; white-space: nowrap; }
html.ledger .lg-dtable .lg-money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ledger .lg-dtable .lg-cur { font-size: .68rem; font-weight: 600; color: var(--on-surface-variant); margin-right: 4px; letter-spacing: .03em; }
html.ledger .lg-more-pill {
    flex: none; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
    background: var(--surface-container-high); color: var(--on-surface-variant);
}
html.ledger .lg-dtable .lg-inv-line { display: flex; align-items: center; gap: 6px; }
html.ledger .lg-dtable .badge { letter-spacing: .02em; padding: .32em .55em; font-size: .66rem; }
html.ledger .lg-dtable .btn-sm { padding: .25rem .45rem; }
html.ledger .lg-dtable .lg-inv-line + .lg-inv-line { margin-top: 3px; }
@media (max-width: 1399.98px) {
    html.ledger .lg-dtable .lg-cell-main { max-width: 140px; }
    html.ledger .lg-dtable .lg-cell-items .lg-cell-main { max-width: 150px; }
}

/* Stacked mode (set by main.js lgStackTables only when the table would not
   fit): each row is a card of label/value lines. Bootstrap's ps-4/pe-4 cell
   utilities use !important, so the reset below needs it too (scoped). */
html.ledger .table-responsive.lg-stacked { overflow-x: visible; }
html.ledger .lg-stacked > table.lg-dtable,
html.ledger .lg-stacked > table.lg-dtable > tbody,
html.ledger .lg-stacked > table.lg-dtable > tbody > tr,
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td { display: block; width: auto; }
html.ledger .lg-stacked > table.lg-dtable > thead { display: none; }
html.ledger .lg-stacked > table.lg-dtable > tbody > tr {
    position: relative; margin: 10px 12px; padding: 8px 14px;
    border: 1px solid var(--outline-variant); border-radius: 10px; background: var(--surface-container-lowest);
}
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding: 6px 0 !important; border: 0; text-align: right; min-width: 0;
}
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td + td { border-top: 1px dashed var(--outline-variant); }
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); padding-top: 2px;
}
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td[data-label=""]::before,
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td[data-label="Actions"]::before,
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td[colspan]::before { display: none; }
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td[data-label="Actions"] { justify-content: flex-end; }
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td[colspan] { display: block; text-align: center; }
/* selection checkbox sits in the card's top-right corner */
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td:has(> .form-check-input) {
    position: absolute; top: 10px; right: 14px; padding: 0 !important; border: 0;
}
html.ledger .lg-stacked > table.lg-dtable > tbody > tr > td:has(> .form-check-input) + td { border-top: 0; padding-right: 32px !important; }
html.ledger .lg-dtable .lg-cell-val { display: contents; }
html.ledger .lg-stacked > table.lg-dtable .lg-cell-val { display: block; min-width: 0; text-align: right; overflow-wrap: anywhere; }
html.ledger .lg-stacked > table.lg-dtable .lg-cell-main { max-width: 100%; margin-left: auto; }
html.ledger .lg-stacked > table.lg-dtable .lg-cell-sub { white-space: normal; }
html.ledger .lg-stacked > table.lg-dtable .lg-cell-items > .d-flex { justify-content: flex-end; }
html.ledger .lg-stacked > table.lg-dtable .lg-inv-line { justify-content: flex-end; }