/* ---------------------------------------------------------------------------
    managecrm.in theme layer — "billing desk" edition.

   The shell is deliberately quiet: a white navbar and a white navigation rail
   on a soft grey page, so the only saturated colour on screen belongs to the
   numbers and the document actions. Colours are expressed through Bootstrap
   5.3's CSS variables plus the --bh-* tokens below, so light and dark both come
   from one set of rules; only genuinely theme-specific values live in the
   [data-bs-theme="dark"] block near the bottom.
   --------------------------------------------------------------------------- */

:root {
    --bh-surface: var(--bs-body-bg);
    --bh-login-from: #e8f0ff;
    --bh-login-to: #f2ecfb;

    /* Shell ---------------------------------------------------------------
       Navbar and sidebar are near-white with hairline separators rather than
       solid dark panels; hierarchy comes from tint and weight instead of heavy
       fills. Every text token is kept at 4.5:1 or better against its surface. */
    --bh-shell-bg: #ffffff;
    --bh-shell-bg-alt: #f8fafd;
    --bh-shell-border: #e4e9f2;
    --bh-shell-text: #4d5b73;
    --bh-shell-text-strong: #16233a;
    --bh-shell-icon: #8593ab;
    --bh-shell-heading: #7c8aa3;
    --bh-shell-hover-bg: #f1f5fc;
    --bh-shell-active-bg: #eaf1ff;
    --bh-shell-active-text: #1d4fd8;

    --bh-page-bg: #f3f6fb;
    --bh-card-bg: #ffffff;
    --bh-card-border: #e6ebf4;
    --bh-card-shadow: 0 1px 2px rgba(16, 32, 64, .04), 0 8px 24px rgba(16, 32, 64, .05);
    --bh-muted: #6b7890;

    /* Accent family. Every module group, KPI tile and quick action picks one
       of these, so the same hue always means the same part of the business. */
    --bh-blue: #2563eb;
    --bh-indigo: #4f46e5;
    --bh-violet: #7c3aed;
    --bh-teal: #0d9488;
    --bh-cyan: #0891b2;
    --bh-green: #059669;
    --bh-amber: #d97706;
    --bh-rose: #e11d48;
    --bh-slate: #64748b;
}

body {
    font-size: .9rem;
    background-color: var(--bh-page-bg);
    color: var(--bs-body-color);
}

/* Top navbar --------------------------------------------------------------- */

.app-navbar {
    background: var(--bh-shell-bg);
    border-bottom: 1px solid var(--bh-shell-border);
    box-shadow: 0 1px 2px rgba(16, 32, 64, .04);
    min-height: 52px;
}

.app-navbar .navbar-brand {
    color: var(--bh-shell-text-strong);
    font-weight: 700;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Brand mark: the icon sits in its own tinted square so the wordmark stays
   plain text and the shell keeps exactly one saturated spot. */
.app-navbar .navbar-brand .bi {
    color: #fff;
    background: linear-gradient(140deg, var(--bh-blue), var(--bh-indigo));
    width: 30px;
    height: 30px;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .32);
}

.app-navbar .nav-link,
.app-navbar .navbar-user {
    color: var(--bh-shell-text);
    font-weight: 500;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: var(--bh-shell-active-text);
}

.app-navbar .navbar-user .bi {
    color: var(--bh-shell-icon);
}

.app-navbar .navbar-toggler {
    border-color: var(--bh-shell-border);
    color: var(--bh-shell-text);
    padding: .25rem .5rem;
}

.app-navbar .navbar-toggler-icon {
    /* Bootstrap bakes the stroke colour into a background image, so the stroke
       has to be supplied here rather than via a CSS variable. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234d5b73' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Global search: a soft pill rather than a bordered box, so the navbar stays
   calm until it is focused. */
.app-navbar form[role="search"] .input-group-text,
.app-navbar form[role="search"] .form-control {
    background: var(--bh-shell-bg-alt) !important;
    border-color: var(--bh-shell-border) !important;
    color: var(--bh-shell-text) !important;
}

.app-navbar form[role="search"] .input-group-text {
    border-right: 0;
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    padding-left: .75rem;
}

.app-navbar form[role="search"] .form-control {
    border-left: 0;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.app-navbar form[role="search"] .form-control:focus {
    box-shadow: none;
    background: var(--bh-shell-bg) !important;
    border-color: var(--bh-blue) !important;
}

.app-navbar form[role="search"] .form-control::placeholder {
    color: var(--bh-shell-icon);
}

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

.sidebar {
    min-height: calc(100vh - 52px);
    background: var(--bh-shell-bg);
    border-right: 1px solid var(--bh-shell-border);
    padding-left: 0;
    padding-right: 0;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: .75rem .5rem 0;
}

/* Doubled selector so it beats Bootstrap's md+
   `.offcanvas-md .offcanvas-body { padding: 0 }` reset. */
.sidebar .sidebar-inner {
    padding: .75rem .5rem 0;
}

.sidebar .offcanvas-header {
    border-bottom: 1px solid var(--bh-shell-border);
}

.sidebar .offcanvas-title {
    color: var(--bh-shell-text-strong);
    font-weight: 700;
}

.sidebar .offcanvas-title .bi {
    color: var(--bh-blue);
}

/* Create block: the action a billing desk repeats all day, pinned above the
   menu so it never scrolls out of reach. */
.sidebar-create {
    padding: 0 .25rem .75rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--bh-shell-border);
}

.sidebar-create-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .75rem;
    border-radius: .6rem;
    background: linear-gradient(135deg, var(--bh-blue), var(--bh-indigo));
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}

.sidebar-create-main:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .34);
}

.sidebar-create-row {
    display: flex;
    gap: .35rem;
    margin-top: .4rem;
}

.sidebar-create-row a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .3rem .2rem;
    border: 1px solid var(--bh-shell-border);
    border-radius: .5rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--bh-shell-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sidebar-create-row a:hover {
    background: var(--bh-shell-active-bg);
    border-color: var(--bh-shell-active-text);
    color: var(--bh-shell-active-text);
}

/* Menu rows --------------------------------------------------------------- */

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--bh-shell-text);
    font-weight: 500;
    font-size: .85rem;
    padding: .42rem .6rem;
    border-radius: .5rem;
    margin: .08rem 0;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar .nav-link span {
    /* Keep every menu label on one line; ellipsize rather than wrap. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .nav-link .bi {
    flex: 0 0 auto;
    font-size: .95rem;
    color: var(--bh-shell-icon);
    transition: color .15s ease;
}

.sidebar .nav-link:hover {
    background: var(--bh-shell-hover-bg);
    color: var(--bh-shell-text-strong);
}

.sidebar .nav-link:hover .bi {
    color: var(--bh-shell-text-strong);
}

.sidebar .nav-link.active {
    background: var(--bh-shell-active-bg);
    color: var(--bh-shell-active-text);
    font-weight: 600;
}

.sidebar .nav-link.active .bi {
    color: var(--bh-shell-active-text);
}

.sidebar-pinned {
    padding: 0 .25rem;
    margin-bottom: .35rem;
}

/* Collapsible module groups ------------------------------------------------
   Each group owns an accent hue (set per-group by .accent-*), used for its
   icon chip, its open-state rail and its active row. */
.nav-group {
    --g: var(--bh-slate);
    padding: 0 .25rem;
    margin-bottom: .1rem;
}

.nav-group.accent-blue   { --g: var(--bh-blue); }
.nav-group.accent-indigo { --g: var(--bh-indigo); }
.nav-group.accent-violet { --g: var(--bh-violet); }
.nav-group.accent-teal   { --g: var(--bh-teal); }
.nav-group.accent-cyan   { --g: var(--bh-cyan); }
.nav-group.accent-green  { --g: var(--bh-green); }
.nav-group.accent-amber  { --g: var(--bh-amber); }
.nav-group.accent-rose   { --g: var(--bh-rose); }
.nav-group.accent-slate  { --g: var(--bh-slate); }

.nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: none;
    border: 0;
    padding: .42rem .6rem;
    border-radius: .5rem;
    color: var(--bh-shell-text-strong);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left;
    transition: background-color .15s ease;
}

.nav-group-toggle:hover {
    background: var(--bh-shell-hover-bg);
}

.nav-group-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    color: var(--g);
    background: rgba(100, 116, 139, .10);
    background: color-mix(in srgb, var(--g) 12%, transparent);
}

.nav-group-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-group-caret {
    flex: 0 0 auto;
    font-size: .7rem;
    color: var(--bh-shell-icon);
    transition: transform .2s ease;
}

.nav-group-toggle.collapsed .nav-group-caret {
    transform: rotate(-90deg);
}

/* Rows inside a group hang off a thin rail in the group's own colour, so a
   long menu still reads as a set of blocks rather than one flat list. */
.nav-group-items {
    margin: .1rem 0 .35rem;
    padding-left: .95rem;
    border-left: 2px solid rgba(100, 116, 139, .20);
    border-left: 2px solid color-mix(in srgb, var(--g) 22%, transparent);
    margin-left: .95rem;
}

.nav-group-items .nav-link {
    font-size: .83rem;
    padding: .34rem .55rem;
}

.nav-group-items .nav-link.active {
    background: rgba(100, 116, 139, .10);
    background: color-mix(in srgb, var(--g) 11%, transparent);
    color: var(--g);
}

.nav-group-items .nav-link.active .bi {
    color: var(--g);
}

/* Logout row at the foot of the sidebar. The sidebar body is a flex column so
   mt-auto drops this row to the bottom whenever the menu above is shorter than
   the pane; on longer menus it simply trails the last item. */
.sidebar-logout {
    border-top: 1px solid var(--bh-shell-border);
    margin-top: .5rem;
    padding: .4rem .25rem .75rem;
}

.sidebar-logout .nav-link:hover,
.sidebar-logout .nav-link:hover .bi {
    background: rgba(225, 29, 72, .09);
    color: var(--bh-rose);
}

/* Mobile drawer: below md the sidebar is a Bootstrap offcanvas. Cap its width
   so the page stays visible behind the backdrop. */
@media (max-width: 767.98px) {
    .sidebar.offcanvas-start {
        --bs-offcanvas-width: 272px;
        width: 272px;
        max-width: 78vw;
        min-height: 0;
        border-right: 0;
        /* ONE scroll surface: the drawer itself scrolls the whole menu.
           A nested scroller (Bootstrap's .offcanvas-body overflow) inside the
           fixed drawer kept mis-computing its scroll range on Android — gaps
           past the end, upward swipes going dead. Scrolling the nav as a
           plain block avoids all of that. */
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Children keep their natural height so the drawer has something to
       scroll; flex would otherwise squash or stretch them to fit. */
    .sidebar .offcanvas-header,
    .sidebar .sidebar-inner.offcanvas-body {
        flex: 0 0 auto;
    }

    .sidebar .sidebar-inner.offcanvas-body {
        min-height: 0;
        overflow: visible; /* the drawer scrolls, not the body */
        padding: .75rem .5rem 1rem;
    }
}

/* Independent scroll panes ------------------------------------------------
   At md+ the sidebar and main content sit side by side (Bootstrap's own
   col-md-* breakpoint), so that's also where we lock the navbar in place and
   give the sidebar and main content each their own scrollbar. Below md the
   sidebar collapses into an offcanvas drawer, so the page is left to scroll
   normally there rather than fighting that mechanic with a split-pane layout
   that doesn't apply to a stacked view. */
@media (min-width: 768px) {
    html, body {
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
        overflow: hidden; /* the shell itself never scrolls — only the panes below do */
    }

    body > .navbar {
        flex: 0 0 auto;
    }

    body > .container-fluid {
        flex: 1 1 auto;
        min-height: 0; /* let this shrink so its children can scroll instead of overflowing the page */
        display: flex;
        flex-direction: column;
    }

    body > .container-fluid > .row {
        flex: 1 1 auto;
        min-height: 0;
    }

    .sidebar,
    main {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain; /* stop scroll chaining into the other pane */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar {
        min-height: 0; /* replaces the min-height:100vh rule above now that height is flex-driven */
    }

    /* A slim, unobtrusive scrollbar — the menu is long and a default-width bar
       eats into the label column. */
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: var(--bh-shell-border);
        border-radius: 3px;
    }

    /* Public pages (homepage, login, signup) are ordinary documents — undo the
       app shell's split-pane locks so they scroll normally. */
    body.public-page {
        display: block;
        overflow: visible;
        height: auto;
    }
    html:has(body.public-page) {
        height: auto;
    }
}

/* Dashboard --------------------------------------------------------------- */

.dash-head {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash-title {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--bs-emphasis-color);
}

.dash-sub {
    font-size: .82rem;
    color: var(--bh-muted);
}

.dash-period {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dash-period-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bh-muted);
    margin: 0;
}

.dash-period .form-select {
    width: auto;
    min-width: 140px;
    border-radius: .5rem;
    font-weight: 600;
}

/* Quick actions: the documents a billing desk starts from. A scrollable strip
   on phones so all six stay reachable without wrapping into a tall block. */
.quick-actions {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.quick-actions::-webkit-scrollbar {
    display: none;
}

.quick-action {
    --q: var(--bh-blue);
    flex: 1 1 0;
    min-width: 116px;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .7rem;
    background: var(--bh-card-bg);
    border: 1px solid var(--bh-card-border);
    border-radius: .75rem;
    text-decoration: none;
    color: var(--bs-body-color);
    box-shadow: var(--bh-card-shadow);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.quick-action:hover {
    transform: translateY(-2px);
    border-color: var(--q);
    border-color: color-mix(in srgb, var(--q) 45%, transparent);
    color: var(--bs-body-color);
}

.qa-blue   { --q: var(--bh-blue); }
.qa-indigo { --q: var(--bh-indigo); }
.qa-violet { --q: var(--bh-violet); }
.qa-teal   { --q: var(--bh-teal); }
.qa-cyan   { --q: var(--bh-cyan); }
.qa-green  { --q: var(--bh-green); }
.qa-amber  { --q: var(--bh-amber); }

.qa-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--q);
    background: rgba(100, 116, 139, .10);
    background: color-mix(in srgb, var(--q) 12%, transparent);
}

.qa-label {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.15;
}

/* KPI tiles: one accent each, the number carrying the weight. */
.kpi {
    --k: var(--bh-blue);
    position: relative;
    height: 100%;
    padding: 1rem 1rem .9rem;
    background: var(--bh-card-bg);
    border: 1px solid var(--bh-card-border);
    border-radius: .9rem;
    box-shadow: var(--bh-card-shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* A hairline of the tile's own colour along the top edge — enough to group the
   tile with its module without tinting the whole card. */
.kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--k);
}

.kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.5rem rgba(20, 30, 70, .09);
}

.kpi-blue   { --k: var(--bh-blue); }
.kpi-green  { --k: var(--bh-green); }
.kpi-amber  { --k: var(--bh-amber); }
.kpi-rose   { --k: var(--bh-rose); }
.kpi-violet { --k: var(--bh-violet); }
.kpi-teal   { --k: var(--bh-teal); }

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}

.kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--k);
    background: rgba(100, 116, 139, .10);
    background: color-mix(in srgb, var(--k) 12%, transparent);
}

.kpi-tag {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .45rem;
    border-radius: 1rem;
    color: var(--k);
    background: rgba(100, 116, 139, .10);
    background: color-mix(in srgb, var(--k) 10%, transparent);
    white-space: nowrap;
}

.kpi-label {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bh-muted);
}

.kpi-value {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
    margin: .1rem 0 .25rem;
    overflow-wrap: anywhere;
}

.kpi-foot {
    font-size: .76rem;
    color: var(--bh-muted);
}

.kpi-bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(100, 116, 139, .14);
    background: color-mix(in srgb, var(--k) 14%, transparent);
    overflow: hidden;
}

.kpi-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--k);
}

/* Six-month sales trend, drawn in plain divs — no chart library on the shell's
   critical path. */
.trend {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 180px;
}

.trend-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.trend-amount {
    font-size: .7rem;
    font-weight: 700;
    color: var(--bh-muted);
    margin-bottom: .25rem;
    white-space: nowrap;
}

.trend-track {
    flex: 1 1 auto;
    width: 100%;
    max-width: 46px;
    display: flex;
    align-items: flex-end;
    background: var(--bs-tertiary-bg);
    border-radius: .4rem;
    overflow: hidden;
}

.trend-fill {
    width: 100%;
    border-radius: .4rem;
    background: linear-gradient(180deg, var(--bh-blue), var(--bh-indigo));
    transition: height .4s ease;
}

.trend-col:last-child .trend-fill {
    /* The current month reads as the live one. */
    background: linear-gradient(180deg, var(--bh-green), #10b981);
}

.trend-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--bh-muted);
    margin-top: .35rem;
}

/* Outstanding parties: name, amount, and a bar sized against the biggest
   debtor, so the worst offender is obvious at a glance. */
.debtor-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.debtor-list li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--bh-card-border);
}

.debtor-list li:last-child {
    border-bottom: 0;
}

.debtor-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: baseline;
    margin-bottom: .3rem;
}

.debtor-name {
    font-size: .85rem;
    font-weight: 600;
    min-width: 0;
}

.debtor-due {
    font-size: .85rem;
    font-weight: 700;
    color: var(--bh-rose);
    white-space: nowrap;
}

.debtor-track {
    height: 5px;
    border-radius: 3px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}

.debtor-track span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--bh-amber), var(--bh-rose));
}

/* Attendance panel -------------------------------------------------------- */

.att-total {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .75rem;
}

.att-count {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bs-emphasis-color);
}

.att-of {
    font-size: .8rem;
    color: var(--bh-muted);
}

.att-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

.att-cell {
    --a: var(--bh-slate);
    padding: .5rem .6rem;
    border-radius: .6rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bh-muted);
    background: rgba(100, 116, 139, .09);
    background: color-mix(in srgb, var(--a) 9%, transparent);
    border: 1px solid rgba(100, 116, 139, .18);
    border: 1px solid color-mix(in srgb, var(--a) 18%, transparent);
}

.att-cell span {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--a);
    line-height: 1.2;
}

.att-present { --a: var(--bh-green); }
.att-half    { --a: var(--bh-cyan); }
.att-leave   { --a: var(--bh-amber); }
.att-absent  { --a: var(--bh-rose); }

/* Small counters for the master records — useful, but never the headline. */
.mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.mini-stat {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    background: var(--bh-card-bg);
    border: 1px solid var(--bh-card-border);
    border-radius: .75rem;
    text-decoration: none;
    color: var(--bh-muted);
    font-size: .8rem;
    transition: border-color .15s ease;
}

.mini-stat:hover {
    border-color: var(--bh-blue);
    color: var(--bh-muted);
}

.mini-stat .bi {
    color: var(--bh-blue);
    font-size: 1rem;
}

.mini-stat b {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bs-emphasis-color);
}

.empty-state {
    text-align: center;
    color: var(--bh-muted);
}

.empty-state .bi {
    display: block;
    font-size: 1.9rem;
    opacity: .45;
    margin-bottom: .4rem;
}

.status-pill {
    font-weight: 600;
    border-radius: 1rem;
    padding: .3em .7em;
}

/* Cards / tables ---------------------------------------------------------- */

/* A hairline plus a soft shadow keeps white cards legible on the light page
   background now that there is no dark chrome to frame them. */
.card {
    background-color: var(--bh-card-bg);
    border: 1px solid var(--bh-card-border);
    border-radius: .9rem;
    box-shadow: var(--bh-card-shadow);
}

.card .card-header {
    background: var(--bh-shell-bg-alt);
    border-bottom-color: var(--bh-card-border);
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.card .card-header .bi {
    color: var(--bh-blue);
}

.card .card-footer {
    background: var(--bh-shell-bg-alt);
    border-top-color: var(--bh-card-border);
}

/* Kept for the module pages that still use it. */
.stat-card {
    border: 1px solid var(--bh-card-border);
    border-left: 4px solid var(--bs-primary);
    border-radius: .9rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(20, 30, 70, .09) !important;
}

.stat-card .display-6 {
    font-weight: 700;
}

.table > thead th {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bh-muted);
    background: var(--bh-shell-bg-alt);
    border-bottom-color: var(--bh-card-border);
}

.table-sm td, .table-sm th {
    vertical-align: middle;
}

/* Theme switcher -----------------------------------------------------------
   The navbar has no .navbar-expand-* class (its collapsible content is the
   separate #sidebarMenu, not a .navbar-collapse), so Bootstrap's own rule
   that keeps `.navbar-nav .dropdown-menu` in-flow (`position: static`) at
   narrow widths never gets overridden back to `absolute`. Without this, the
   theme dropdown pushes the navbar taller instead of floating over it. */

.theme-switch .dropdown-menu {
    position: absolute !important;
    z-index: 1080;
}

.theme-switch .dropdown-item.active {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Login / OTP ------------------------------------------------------------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bh-login-from) 0%, var(--bh-login-to) 100%);
}

.login-card {
    max-width: 380px;
    width: 100%;
}

.login-theme-switch {
    position: fixed;
    top: 1rem;
    right: 1rem;
}

/* Invoice ----------------------------------------------------------------- */

.invoice-box {
    background: var(--bh-surface);
    padding: 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

/* Dark theme -------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --bh-surface: var(--bs-secondary-bg);
    --bh-page-bg: #0d1220;
    --bh-login-from: #16233f;
    --bh-login-to: #241a3d;

    /* The shell tokens flip here so the light rules above need no dark twins. */
    --bh-shell-bg: #141b2c;
    --bh-shell-bg-alt: #182031;
    --bh-shell-border: rgba(255, 255, 255, .09);
    --bh-shell-text: #a9b4c9;
    --bh-shell-text-strong: #ffffff;
    --bh-shell-icon: #7e8ba4;
    --bh-shell-heading: #7f8da8;
    --bh-shell-hover-bg: rgba(255, 255, 255, .06);
    --bh-shell-active-bg: rgba(59, 130, 246, .18);
    --bh-shell-active-text: #93b4ff;

    --bh-card-bg: #141b2c;
    --bh-card-border: rgba(255, 255, 255, .08);
    --bh-card-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --bh-muted: #97a3ba;

    /* Accents lighten a step so they hold their 4.5:1 on the dark cards. */
    --bh-blue: #60a5fa;
    --bh-indigo: #818cf8;
    --bh-violet: #a78bfa;
    --bh-teal: #2dd4bf;
    --bh-cyan: #22d3ee;
    --bh-green: #34d399;
    --bh-amber: #fbbf24;
    --bh-rose: #fb7185;
    --bh-slate: #94a3b8;
}

[data-bs-theme="dark"] .app-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a9b4c9' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* The brand chip and the create button keep their saturated blue in both
   themes, so their white text is set explicitly rather than inherited. */
[data-bs-theme="dark"] .app-navbar .navbar-brand .bi,
[data-bs-theme="dark"] .sidebar-create-main {
    background: linear-gradient(140deg, #2563eb, #4f46e5);
    color: #fff;
}

/* Bootstrap's .bg-light / .table-light / .badge.bg-light are fixed light
   colors that do not respond to data-bs-theme; remap them so existing markup
   stays readable in dark mode. */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .badge.bg-light.text-dark {
    color: var(--bs-body-color) !important;
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .kpi, .quick-action, .sidebar-create-main, .trend-fill, .nav-group-caret {
        transition: none;
    }
}

/* Print: always render the light, ink-friendly version. ------------------- */

@media print {
    html, body, .container-fluid, .container-fluid > .row, main {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    .no-print, .sidebar, .navbar, .theme-switch, .quick-actions, .dash-period {
        display: none !important;
    }
    main {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .invoice-box {
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
}