/* ==========================================================================
   LalinERP — "Modern Ledger" Design System
   --------------------------------------------------------------------------
   A warm, premium, editorial design language for the whole ERP.
   Single cohesive accent (garnet), warm paper canvas, charcoal ink,
   distinctive type (Bricolage Grotesque / Hanken Grotesk / JetBrains Mono).

   This file loads LAST so it overrides Bootstrap, Valex (styles.min.css),
   aurora.css, lalin-theme.css and aurora-override.css.
   Keep all design tokens here — pages should consume tokens, not hardcode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand — garnet / vermilion */
    --ld-brand:        #CB3A2A;
    --ld-brand-rgb:    203, 58, 42;
    --ld-brand-hover:  #A82E20;
    --ld-brand-press:  #8E2417;
    --ld-brand-tint:   rgba(203, 58, 42, 0.08);
    --ld-brand-tint-2: rgba(203, 58, 42, 0.14);

    /* Canvas & surfaces — warm paper */
    --ld-paper:        #F6F5F1;
    --ld-paper-2:      #F0EEE8;
    --ld-surface:      #FFFFFF;
    --ld-surface-2:    #FBFAF7;

    /* Ink */
    --ld-ink:          #1C1B19;
    --ld-ink-2:        #6B6862;
    --ld-ink-3:        #9A958C;

    /* Lines */
    --ld-border:       #E8E6DF;
    --ld-border-2:     #DAD7CE;

    /* Semantics */
    --ld-success:      #1E7A53;
    --ld-success-tint: rgba(30, 122, 83, 0.10);
    --ld-warning:      #B9791F;
    --ld-warning-tint: rgba(185, 121, 31, 0.13);
    --ld-danger:       #C0392B;
    --ld-danger-tint:  rgba(192, 57, 43, 0.10);
    --ld-info:         #2D6E7E;
    --ld-info-tint:    rgba(45, 110, 126, 0.10);

    /* Radius */
    --ld-r-xs: 7px;
    --ld-r-sm: 9px;
    --ld-r:    13px;
    --ld-r-lg: 18px;
    --ld-r-pill: 999px;

    /* Elevation — soft, warm-tinted */
    --ld-shadow-xs: 0 1px 2px rgba(28,27,25,.05);
    --ld-shadow-sm: 0 1px 2px rgba(28,27,25,.04), 0 2px 6px -2px rgba(28,27,25,.08);
    --ld-shadow:    0 1px 2px rgba(28,27,25,.04), 0 10px 26px -12px rgba(28,27,25,.16);
    --ld-shadow-lg: 0 2px 4px rgba(28,27,25,.04), 0 24px 48px -20px rgba(28,27,25,.24);

    /* Type */
    --ld-font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --ld-font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --ld-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* ---- Re-map Valex / Bootstrap tokens onto the Ledger palette ---- */
    --primary-rgb: var(--ld-brand-rgb);
    --primary: var(--ld-brand);
    --primary-color: #ffffff;
    --primary-border: var(--ld-brand);

    --bs-primary: var(--ld-brand);
    --bs-primary-rgb: var(--ld-brand-rgb);
    --bs-link-color: var(--ld-brand);
    --bs-link-hover-color: var(--ld-brand-hover);
    --bs-border-color: var(--ld-border);
    --bs-body-color: var(--ld-ink);
    --bs-body-bg: var(--ld-paper);

    --body-bg-rgb: 246, 245, 241;
    --default-body-bg-color: var(--ld-paper);
    --default-text-color: var(--ld-ink);
    --default-border: var(--ld-border);
    --menu-bg: var(--ld-surface);
    --header-bg: var(--ld-surface);
    --custom-white: var(--ld-surface);
    --input-border: var(--ld-border-2);
    --form-control-bg: var(--ld-surface);

    /* Re-map the legacy aurora-* layer so old rules inherit the new brand */
    --aurora-primary: var(--ld-brand);
    --aurora-primary-hover: var(--ld-brand-hover);
    --aurora-primary-light: var(--ld-brand-tint);
    --aurora-primary-dark: var(--ld-brand-press);
    --aurora-border-color: var(--ld-border);
    --aurora-text-primary: var(--ld-ink);
    --aurora-body-bg: var(--ld-paper);
    --aurora-sidebar-active: var(--ld-brand);
    --aurora-sidebar-text-active: var(--ld-brand);
    --aurora-sidebar-hover: var(--ld-brand-tint);
    --aurora-card-radius: var(--ld-r);
}

/* --------------------------------------------------------------------------
   2. Base typography & canvas
   -------------------------------------------------------------------------- */
body {
    font-family: var(--ld-font-body);
    background-color: var(--ld-paper) !important;
    color: var(--ld-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .card-title, .fw-semibold {
    font-family: var(--ld-font-display);
    letter-spacing: -0.02em;
    color: var(--ld-ink);
}

.page-title { font-weight: 600; }

/* Tabular figures everywhere numbers matter */
.table, .ld-num, .fc-num, .fs-24, .fs-22, .fs-20,
table td, table th,
.badge, .form-control, .form-select { font-variant-numeric: tabular-nums; }

/* Document / reference codes rendered in mono */
.ld-code, code, kbd, .text-mono { font-family: var(--ld-font-mono); }

a { color: var(--ld-brand); }
a:hover { color: var(--ld-brand-hover); }

.text-muted { color: var(--ld-ink-3) !important; }
.text-primary { color: var(--ld-brand) !important; }

/* App content gets a touch more breathing room */
.main-content.app-content { background-color: var(--ld-paper); }
.app-content > .container-fluid { padding-inline: 1.6rem; }

/* --------------------------------------------------------------------------
   3. Cards — soft, warm, layered
   -------------------------------------------------------------------------- */
.card,
.custom-card {
    background: var(--ld-surface);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-r) !important;
    box-shadow: var(--ld-shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover { box-shadow: var(--ld-shadow); }

.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ld-border);
    padding: 1.05rem 1.35rem;
    min-height: unset;
}
.card .card-header .card-title {
    font-family: var(--ld-font-display);
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ld-ink);
    margin: 0;
}
.card .card-body { padding: 1.35rem; }

/* --------------------------------------------------------------------------
   4. Buttons — restrained, single accent
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--ld-font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--ld-r-sm);
    padding: .5rem .95rem;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease, transform .05s ease;
}
.btn:active { transform: translateY(.5px); }
.btn-sm { padding: .38rem .72rem; font-size: .82rem; border-radius: var(--ld-r-xs); }
.btn-lg { padding: .7rem 1.3rem; border-radius: var(--ld-r); }

.btn-primary {
    background: var(--ld-brand);
    border-color: var(--ld-brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(var(--ld-brand-rgb), .25);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:active, .btn-primary.active {
    background: var(--ld-brand-hover) !important;
    border-color: var(--ld-brand-hover) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px rgba(var(--ld-brand-rgb), .45);
}

.btn-outline-primary {
    border-color: var(--ld-border-2);
    color: var(--ld-ink);
    background: var(--ld-surface);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--ld-brand-tint) !important;
    border-color: var(--ld-brand) !important;
    color: var(--ld-brand) !important;
}

.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-light {
    background: var(--ld-surface);
    border-color: var(--ld-border-2);
    color: var(--ld-ink-2);
}
.btn-secondary:hover, .btn-light:hover,
.btn-outline-secondary:hover, .btn-outline-light:hover {
    background: var(--ld-paper-2);
    border-color: var(--ld-border-2);
    color: var(--ld-ink);
}

/* Soft-tinted variants */
.btn-success { background: var(--ld-success); border-color: var(--ld-success); }
.btn-danger  { background: var(--ld-danger);  border-color: var(--ld-danger); }
.btn-warning { background: var(--ld-warning); border-color: var(--ld-warning); color:#fff; }
.btn-info    { background: var(--ld-info);    border-color: var(--ld-info); color:#fff; }

/* Ghost / icon action buttons (table row actions) */
.btn-icon { width: 2.1rem; height: 2.1rem; display:inline-flex; align-items:center; justify-content:center; padding:0; }

/* --------------------------------------------------------------------------
   5. DataTables export & length controls — calm neutral, not loud blue
   -------------------------------------------------------------------------- */
.dt-buttons .dt-button,
.dt-button.buttons-csv,
.dt-button.buttons-excel,
.dt-button.buttons-pdf,
.dt-button.buttons-print,
.dt-button.buttons-colvis,
div.dt-buttons > .btn {
    background: var(--ld-surface) !important;
    border: 1px solid var(--ld-border-2) !important;
    color: var(--ld-ink-2) !important;
    font-weight: 600;
    font-size: .8rem;
    border-radius: var(--ld-r-xs) !important;
    padding: .4rem .8rem !important;
    box-shadow: none !important;
    background-image: none !important;
    margin-inline-end: .4rem;
}
.dt-buttons .dt-button:hover,
div.dt-buttons > .btn:hover {
    background: var(--ld-brand-tint) !important;
    border-color: var(--ld-brand) !important;
    color: var(--ld-brand) !important;
}

/* "Show N entries" + search box */
.dataTables_length select,
.dataTables_filter input {
    border: 1px solid var(--ld-border-2);
    border-radius: var(--ld-r-xs);
    background: var(--ld-surface);
    color: var(--ld-ink);
    padding: .35rem .6rem;
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
    border-color: var(--ld-brand);
    box-shadow: 0 0 0 3px var(--ld-brand-tint);
    outline: none;
}

/* --------------------------------------------------------------------------
   6. Tables — editorial, breathable, tabular
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    color: var(--ld-ink);
    border-color: var(--ld-border);
}
.table > thead > tr > th,
.table thead th {
    background: var(--ld-surface-2);
    color: var(--ld-ink-3);
    font-family: var(--ld-font-body);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ld-border) !important;
    padding: .85rem 1rem;
    white-space: nowrap;
}
.table > tbody > tr > td,
.table tbody td {
    padding: .82rem 1rem;
    border-bottom: 1px solid var(--ld-border);
    border-top: 0;
    vertical-align: middle;
    color: var(--ld-ink);
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * {
    background-color: var(--ld-brand-tint) !important;
    --bs-table-accent-bg: var(--ld-brand-tint);
}
.table.table-bordered { border: 1px solid var(--ld-border); }

/* First column (often the record code) reads as a strong link in mono */
.table tbody td a.ld-code,
.table tbody td .ld-code { font-family: var(--ld-font-mono); font-weight: 600; color: var(--ld-brand); font-size: .85rem; }

/* --------------------------------------------------------------------------
   7. Badges — soft tints with a hairline, never loud solids
   -------------------------------------------------------------------------- */
.badge {
    font-family: var(--ld-font-body);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .34em .7em;
    border-radius: var(--ld-r-pill);
    border: 1px solid transparent;
    line-height: 1.2;
}
.badge.bg-primary, .badge.bg-primary-transparent {
    background: var(--ld-brand-tint) !important; color: var(--ld-brand) !important; border-color: rgba(var(--ld-brand-rgb), .22);
}
.badge.bg-success, .badge.bg-success-transparent {
    background: var(--ld-success-tint) !important; color: var(--ld-success) !important; border-color: rgba(30,122,83,.22);
}
.badge.bg-warning, .badge.bg-warning-transparent {
    background: var(--ld-warning-tint) !important; color: var(--ld-warning) !important; border-color: rgba(185,121,31,.24);
}
.badge.bg-danger, .badge.bg-danger-transparent {
    background: var(--ld-danger-tint) !important; color: var(--ld-danger) !important; border-color: rgba(192,57,43,.22);
}
.badge.bg-info, .badge.bg-info-transparent {
    background: var(--ld-info-tint) !important; color: var(--ld-info) !important; border-color: rgba(45,110,126,.22);
}
.badge.bg-secondary, .badge.bg-secondary-transparent, .badge.bg-light {
    background: var(--ld-paper-2) !important; color: var(--ld-ink-2) !important; border-color: var(--ld-border-2);
}

/* --------------------------------------------------------------------------
   8. KPI cards — flagship metric tiles
   -------------------------------------------------------------------------- */
.aurora-kpi-hover {
    position: relative;
    border-radius: var(--ld-r) !important;
    overflow: hidden;
}
.aurora-kpi-hover::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--ld-brand);
    opacity: .9;
}
.aurora-kpi-hover .card-body { padding: 1.25rem 1.35rem; }
.aurora-kpi-hover .text-muted.fs-12,
.aurora-kpi-hover span.d-block.fs-12 {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .68rem !important;
    font-weight: 700;
    color: var(--ld-ink-3) !important;
}
.aurora-kpi-hover h4 {
    font-family: var(--ld-font-display);
    font-weight: 700;
    font-size: 1.85rem;
    letter-spacing: -0.03em;
    color: var(--ld-ink);
    margin-top: .25rem;
}
.aurora-kpi-hover:hover { transform: translateY(-3px); box-shadow: var(--ld-shadow); }

/* The KPI icon chip */
.aurora-kpi-hover .avatar {
    border-radius: var(--ld-r-sm) !important;
    background: var(--ld-brand-tint) !important;
}
.aurora-kpi-hover .avatar i { color: var(--ld-brand) !important; }

/* Trend pills */
.aurora-kpi-hover .text-success { color: var(--ld-success) !important; font-weight: 700; }
.aurora-kpi-hover .text-danger  { color: var(--ld-danger)  !important; font-weight: 700; }

/* --------------------------------------------------------------------------
   9. Sidebar — quiet, refined, single accent
   -------------------------------------------------------------------------- */
.app-sidebar {
    background: var(--ld-surface) !important;
    border-inline-end: 1px solid var(--ld-border) !important;
    box-shadow: none;
}
.app-sidebar .main-sidebar-header {
    background: var(--ld-surface) !important;
    border-inline-end: 1px solid var(--ld-border);
    border-bottom: 1px solid var(--ld-border);
}
.app-sidebar .side-menu__item {
    border-radius: var(--ld-r-sm);
    margin: 1px .55rem;
    padding: .55rem .7rem;
    color: var(--ld-ink-2);
    font-weight: 500;
    font-size: .86rem;
    transition: background-color .16s ease, color .16s ease;
}
.app-sidebar .side-menu__item:hover {
    background: var(--ld-paper-2);
    color: var(--ld-ink);
}
.app-sidebar .side-menu__label { font-family: var(--ld-font-body); }
.app-sidebar .side-menu__icon { color: var(--ld-ink-3); }

/* Active item — garnet pill, not a thin red border */
.slide.active > .side-menu__item,
.slide.has-sub.open > .side-menu__item,
.side-menu__item.active {
    background: var(--ld-brand-tint) !important;
    color: var(--ld-brand) !important;
    border-inline-start: 0 !important;
    font-weight: 600;
}
.slide.active > .side-menu__item .side-menu__icon,
.side-menu__item.active .side-menu__icon { color: var(--ld-brand) !important; }
.slide.active > .side-menu__item::before {
    content:""; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
    width:3px; height:60%; border-radius:0 3px 3px 0; background: var(--ld-brand);
}
.app-sidebar .slide__category {
    color: var(--ld-ink-3);
    font-weight: 700;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Topbar — clean paper, hairline divider
   -------------------------------------------------------------------------- */
.app-header {
    background: var(--ld-surface) !important;
    border-bottom: 1px solid var(--ld-border) !important;
    box-shadow: none !important;
}
.app-header .header-link-icon { color: var(--ld-ink-2); }
.app-header .header-element .header-link:hover { color: var(--ld-brand); }

/* The brand logo wordmark */
.main-sidebar-header .header-logo .desktop-logo,
.app-sidebar .main-logo { font-family: var(--ld-font-display); }

/* --------------------------------------------------------------------------
   11. Breadcrumb & page header
   -------------------------------------------------------------------------- */
.page-header-breadcrumb .page-title { font-size: 1.55rem; font-weight: 600; }
.breadcrumb { font-size: .8rem; }
.breadcrumb-item, .breadcrumb-item a { color: var(--ld-ink-3); text-decoration: none; }
.breadcrumb-item.active { color: var(--ld-ink-2); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ld-border-2); }

/* --------------------------------------------------------------------------
   12. Forms & inputs
   -------------------------------------------------------------------------- */
.form-control, .form-select, .choices__inner, .input-group-text {
    background: var(--ld-surface);
    border: 1px solid var(--ld-border-2);
    border-radius: var(--ld-r-sm);
    color: var(--ld-ink);
    font-family: var(--ld-font-body);
    padding: .55rem .8rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus, .choices__inner:focus-within {
    border-color: var(--ld-brand);
    box-shadow: 0 0 0 3px var(--ld-brand-tint);
}
.form-label { font-weight: 600; font-size: .82rem; color: var(--ld-ink-2); margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--ld-brand); border-color: var(--ld-brand); }
.input-group-text { background: var(--ld-paper-2); color: var(--ld-ink-3); }

/* --------------------------------------------------------------------------
   13. Pagination
   -------------------------------------------------------------------------- */
.pagination .page-link {
    color: var(--ld-ink-2);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-r-xs) !important;
    margin: 0 2px;
    background: var(--ld-surface);
    min-width: 2.1rem; text-align: center;
}
.pagination .page-item.active .page-link {
    background: var(--ld-brand);
    border-color: var(--ld-brand);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(var(--ld-brand-rgb), .5);
}
.pagination .page-link:hover { background: var(--ld-brand-tint); color: var(--ld-brand); border-color: var(--ld-brand); }

/* --------------------------------------------------------------------------
   14. Tabs, alerts, dropdowns, modals
   -------------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--ld-border); }
.nav-tabs .nav-link { color: var(--ld-ink-2); font-weight: 600; border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--ld-brand); background: transparent; border-bottom-color: var(--ld-brand); }

.dropdown-menu {
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-r);
    box-shadow: var(--ld-shadow);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--ld-r-xs); font-size: .86rem; color: var(--ld-ink-2); }
.dropdown-item:hover { background: var(--ld-brand-tint); color: var(--ld-brand); }

.modal-content { border: 1px solid var(--ld-border); border-radius: var(--ld-r-lg); box-shadow: var(--ld-shadow-lg); }

.alert { border-radius: var(--ld-r); border: 1px solid var(--ld-border); }

/* --------------------------------------------------------------------------
   15. LalinAI bar — was a broken full-width red strip → tasteful floating pill
   -------------------------------------------------------------------------- */
.lalin-ai-bar {
    position: fixed;
    inset: auto 1.5rem 1.4rem auto;   /* bottom-right */
    left: auto; right: 1.5rem; bottom: 1.4rem;
    width: auto; height: auto;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.05rem;
    background: var(--ld-ink);
    color: #fff;
    border-radius: var(--ld-r-pill);
    box-shadow: var(--ld-shadow-lg);
    font-family: var(--ld-font-body);
    font-weight: 600; font-size: .85rem;
    cursor: pointer;
    z-index: 1045;
    transition: transform .18s ease, background-color .18s ease;
}
.lalin-ai-bar:hover { transform: translateY(-2px); background: var(--ld-brand); }
.lalin-ai-bar i { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   16. Misc polish
   -------------------------------------------------------------------------- */
.avatar { border-radius: var(--ld-r-sm); }
hr { border-color: var(--ld-border); opacity: 1; }
::selection { background: var(--ld-brand-tint-2); color: var(--ld-brand-press); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--ld-border-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--ld-border-2); border-radius: 99px; border: 2px solid var(--ld-paper); }
*::-webkit-scrollbar-thumb:hover { background: var(--ld-ink-3); }

/* --------------------------------------------------------------------------
   17. Floating action stack (bottom-right) + row-action icon buttons
   -------------------------------------------------------------------------- */
/* The chatbot FAB never had its stylesheet linked → rendered as a full-width
   block button. It is redundant with the .lalin-ai-bar pill, so retire it. */
.chatbot-fab, #chatbot-fab { display: none !important; }

/* Help button: lift it above the AI pill, restyle as a quiet circle */
#aurora-help-btn {
    bottom: 5.1rem !important;
    right: 1.5rem !important;
    background: var(--ld-surface) !important;
    color: var(--ld-ink-2) !important;
    border: 1px solid var(--ld-border) !important;
    box-shadow: var(--ld-shadow-sm) !important;
}
#aurora-help-btn:hover, #aurora-help-btn.ahb-active {
    background: var(--ld-brand-tint) !important;
    color: var(--ld-brand) !important;
    border-color: var(--ld-brand) !important;
}

/* Soft-light icon buttons used for table row actions — make them legible */
.btn-icon { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ld-r-xs); }
.btn-icon + .btn-icon { margin-inline-start: .3rem; }
.btn-primary-light, .btn-info-light {
    background: var(--ld-brand-tint) !important; color: var(--ld-brand) !important; border: 1px solid transparent !important;
}
.btn-warning-light {
    background: var(--ld-warning-tint) !important; color: var(--ld-warning) !important; border: 1px solid transparent !important;
}
.btn-danger-light {
    background: var(--ld-danger-tint) !important; color: var(--ld-danger) !important; border: 1px solid transparent !important;
}
.btn-success-light {
    background: var(--ld-success-tint) !important; color: var(--ld-success) !important; border: 1px solid transparent !important;
}
.btn-primary-light:hover, .btn-info-light:hover { background: var(--ld-brand) !important; color: #fff !important; }
.btn-warning-light:hover { background: var(--ld-warning) !important; color: #fff !important; }
.btn-danger-light:hover  { background: var(--ld-danger)  !important; color: #fff !important; }
.btn-success-light:hover { background: var(--ld-success) !important; color: #fff !important; }

/* Subtle paper texture on the canvas for warmth/depth */
.main-content.app-content::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    opacity: .5;
    background-image: radial-gradient(rgba(28,27,25,.018) 1px, transparent 1px);
    background-size: 22px 22px;
}
.app-content > .container-fluid { position: relative; z-index: 1; }

/* =========================================================================
   Mobile responsiveness — admin/management pages (Modern Ledger)
   Additive layer on top of the Valex responsive base. Keeps tables scrollable,
   page headers/toolbars wrapping, and content padding comfortable on phones.
   ========================================================================= */
@media (max-width: 991.98px){
  /* Header action toolbars never overflow the viewport */
  .page-header-breadcrumb{ gap: 12px; }
  .page-header-breadcrumb .btn-list,
  .page-header-breadcrumb .d-flex,
  .page-header-breadcrumb .ms-auto{ flex-wrap: wrap; row-gap: 8px; }
  .btn-group, .btn-list, .hstack{ flex-wrap: wrap; }
}
@media (max-width: 767.98px){
  /* Comfortable edge padding on phones */
  .main-content.app-content > .container-fluid{ padding-left: 14px; padding-right: 14px; }
  /* Smooth horizontal scroll for wide data tables */
  .table-responsive{ -webkit-overflow-scrolling: touch; }
  /* Stack page-header title + actions */
  .page-header-breadcrumb{ flex-direction: column; align-items: flex-start; }
  .page-header-breadcrumb .ms-auto{ margin-left: 0 !important; width: 100%; }
  /* Right-aligned card-header actions wrap under the title */
  .card-header{ flex-wrap: wrap; gap: 10px; }
  /* Tame oversized display headings */
  h1, .fs-1{ font-size: 1.5rem !important; }
  h2, .fs-2{ font-size: 1.3rem !important; }
  .card{ margin-bottom: 14px; }
  /* Long words / ids never push layout wider than the screen */
  .card-title, .page-title{ word-break: break-word; }
  /* Forms: single column on small screens */
  .row > [class*="col-"]{ margin-bottom: 2px; }
}
@media (max-width: 480px){
  .main-content.app-content > .container-fluid{ padding-left: 10px; padding-right: 10px; }
  .card-body{ padding: 1rem; }
  .btn-lg{ padding: .55rem 1rem; font-size: .95rem; }
  /* Modal dialogs use the full width on tiny screens */
  .modal-dialog{ margin: .5rem; }
}