/* ---------------------------------------------------------------------------
    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 ----------------------------------------------------------------- */

/* The navigation rail is a deep navy panel in both themes. Every sidebar rule
   below is written against the --bh-shell-* tokens, so re-declaring that set
   here re-skins the whole rail — navbar and page keep the light values they
   inherit from :root. The accent family is swapped for its lighter variants at
   the same time, since the saturated light-theme blues do not hold 4.5:1 on
   navy. */
.sidebar {
    --bh-shell-bg: #151b26;
    --bh-shell-bg-alt: #1b222f;
    --bh-shell-border: rgba(255, 255, 255, .08);
    --bh-shell-text: #a9b6cd;
    --bh-shell-text-strong: #ffffff;
    --bh-shell-icon: #8493ae;
    --bh-shell-heading: #7f8da8;
    --bh-shell-hover-bg: rgba(255, 255, 255, .06);
    /* The active row is a solid teal pill, not a tint, so the current page is
       readable at a glance down the whole rail. */
    --bh-shell-active-bg: #12a594;
    --bh-shell-active-text: #ffffff;

    --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;

    min-height: calc(100vh - 52px);
    /* Bootstrap paints the mobile drawer with --bs-offcanvas-bg, so the token
       is pointed at the rail's own colour rather than fought with. */
    --bs-offcanvas-bg: var(--bh-shell-bg);
    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);
}

/* Bootstrap's close glyph is a dark SVG; invert it on the navy drawer. */
.sidebar .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

.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 .sidebar-create-main {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
}

.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: .88rem;
    padding: .55rem .7rem;
    border-radius: .55rem;
    margin: .1rem 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: 1.05rem;
    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;
    box-shadow: 0 2px 10px rgba(18, 165, 148, .28);
}

.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: .5rem .7rem;
    border-radius: .55rem;
    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;
}

/* Logging out is the one destructive row in the rail, so it carries its colour
   without waiting for a hover. */
.sidebar-logout .nav-link,
.sidebar-logout .nav-link .bi {
    color: var(--bh-rose);
}

.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 */
    }

    /* The rail is a fixed 248px rather than a grid fraction: the labels need a
       set amount of room, not a share of the viewport, and the content area
       gets every pixel the menu does not use. The markup keeps its col-* classes
       for the below-md drawer, so both widths are overridden here. */
    .sidebar.col-md-3,
    .sidebar.col-lg-2 {
        flex: 0 0 248px;
        width: 248px;
        max-width: 248px;
    }

    /* flex-basis 0 + min-width 0, never `auto`: the row is a wrapping flex
       container, so a content-sized main (a wide form, the template grid) grows
       past the free space and wraps onto the line below the rail, where the
       pane's own height clips it out of sight — the page then looks blank. */
    main.col-md-9,
    main.col-lg-10 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    /* At md+ Bootstrap neutralises the offcanvas with
       `.offcanvas-md { background-color: transparent !important }`, which
       outranks the plain background above and left the rail unpainted. This is
       the one place !important is warranted: it exists purely to beat that. */
    .sidebar.offcanvas-md {
        background-color: var(--bh-shell-bg) !important;
    }

    /* 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: each one is washed in its own accent — a soft tint fading to the
   card colour — so the four read as four different measures at a glance rather
   than as one white row. The tint stays under ~10% so the value keeps its
   contrast in both themes. */
.kpi {
    --k: var(--bh-blue);
    position: relative;
    height: 100%;
    padding: 1rem 1rem .9rem;
    background: var(--bh-card-bg);
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--k) 13%, var(--bh-card-bg)) 0%,
            color-mix(in srgb, var(--k) 4%, var(--bh-card-bg)) 58%,
            var(--bh-card-bg) 100%);
    border: 1px solid var(--bh-card-border);
    border: 1px solid color-mix(in srgb, var(--k) 20%, 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, sitting over the
   wash so the accent still has one saturated edge. */
.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);
}

/* A whole tile can be a shortcut into its own screen. The cover link sits over
   the card but under the breakdown's own links, so those still lead to their
   own pages. */
.kpi-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.kpi:has(.kpi-cover):hover {
    box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--k) 22%, transparent);
}

.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: #fff;
    background: var(--k);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--k) 35%, 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) 16%, var(--bh-card-bg));
    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;
    }
}

/* Party balance panel on the invoice form ---------------------------------
   Shows where this invoice leaves the party's running total. Read-only: the
   party's opening balance is never rewritten by an invoice. */

.balance-box {
    border: 1px solid var(--bh-card-border);
    border-left: 3px solid var(--bh-amber);
    border-radius: .6rem;
    padding: .6rem .75rem;
    background: var(--bh-shell-bg-alt);
}

.balance-box.is-clear {
    border-left-color: var(--bh-green);
}

.balance-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .82rem;
    padding: .18rem 0;
    color: var(--bh-muted);
}

.balance-row.balance-sub {
    border-top: 1px solid var(--bh-card-border);
    margin-top: .2rem;
    padding-top: .3rem;
}

.balance-row.balance-closing {
    border-top: 1px solid var(--bh-card-border);
    margin-top: .2rem;
    padding-top: .35rem;
    font-size: .95rem;
    font-weight: 800;
    color: var(--bh-amber);
}

.balance-box.is-clear .balance-closing {
    color: var(--bh-green);
}

/* Receivables breakdown inside the KPI tile: where the money is owed from.
   The rows add up to the tile's headline figure. */

.kpi-breakdown {
    list-style: none;
    margin: .5rem 0 .1rem;
    padding: .5rem 0 0;
    border-top: 1px dashed var(--bh-card-border);
}

.kpi-breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .74rem;
    padding: .16rem 0;
    color: var(--bh-muted);
}

.kpi-breakdown li > a {
    position: relative;
    z-index: 2;
    color: var(--bh-muted);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-breakdown li > a:hover {
    color: var(--k);
    text-decoration: underline;
}

.kpi-breakdown li > span {
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-body-color);
}

.kpi-breakdown .kpi-breakdown-total {
    border-top: 1px solid var(--bh-card-border);
    margin-top: .2rem;
    padding-top: .3rem;
    font-weight: 700;
    color: var(--k);
}

.kpi-breakdown .kpi-breakdown-total > span {
    color: var(--k);
    font-weight: 800;
}

/* Due reminders -----------------------------------------------------------
   A collections desk scrolls this list looking for the biggest and the latest,
   so the page is built for density: a one-line summary strip instead of KPI
   tiles, then one ~40px row per party carrying name, dues, due date, reachable
   channels and the send buttons on a single line. Rows are a CSS grid rather
   than a table so the same markup can re-flow to two lines on a phone. */

.rem-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--bh-card-bg);
    border: 1px solid var(--bh-card-border);
    border-radius: .6rem;
    box-shadow: var(--bh-card-shadow);
    overflow: hidden;
    margin-bottom: .75rem;
}

.rem-stat {
    --s: var(--bh-slate);
    padding: .5rem .8rem;
    border-left: 3px solid var(--s);
    min-width: 0;
}

.rem-stat + .rem-stat {
    box-shadow: inset 1px 0 0 var(--bh-card-border);
}

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

.rem-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--s);
}

.rem-stat-foot {
    font-size: .7rem;
    color: var(--bh-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rem-stat.s-rose   { --s: var(--bh-rose); }
.rem-stat.s-amber  { --s: var(--bh-amber); }
.rem-stat.s-blue   { --s: var(--bh-blue); }
.rem-stat.s-violet { --s: var(--bh-violet); }

/* Toolbar ------------------------------------------------------------------ */

.rem-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    align-items: center;
    margin-bottom: .5rem;
}

.rem-search {
    position: relative;
    flex: 1 1 14rem;
    min-width: 0;
}

.rem-search .bi {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--bh-muted);
    pointer-events: none;
}

.rem-search input {
    padding-left: 1.9rem;
    border-radius: 999px;
}

.rem-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.rem-chip {
    --c: var(--bh-slate);
    border: 1px solid var(--bh-card-border);
    background: var(--bh-card-bg);
    color: var(--bh-muted);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.rem-chip:hover {
    color: var(--c);
    border-color: var(--c);
}

.rem-chip.is-on {
    background: color-mix(in srgb, var(--c) 12%, transparent);
    border-color: color-mix(in srgb, var(--c) 45%, transparent);
    color: var(--c);
}

.rem-chip.chip-rose  { --c: var(--bh-rose); }
.rem-chip.chip-amber { --c: var(--bh-amber); }
.rem-chip.chip-green { --c: var(--bh-green); }
.rem-chip.chip-blue  { --c: var(--bh-blue); }

.rem-sort {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    color: var(--bh-muted);
}

.rem-sort .form-select {
    width: auto;
    font-size: .76rem;
    padding-top: .15rem;
    padding-bottom: .15rem;
    border-radius: 999px;
}

/* The list ---------------------------------------------------------------- */

.rem-list {
    background: var(--bh-card-bg);
    border: 1px solid var(--bh-card-border);
    border-radius: .6rem;
    box-shadow: var(--bh-card-shadow);
    overflow: hidden;
}

/* Column headings, shown only where the row keeps its single-line grid. */
.rem-head-row,
.rem-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(5.5rem, 1fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) var(--rem-send-col, 14.5rem);
    align-items: center;
    gap: .5rem .7rem;
}

.rem-head-row {
    /* Same 3px left rail as the rows, kept transparent, so both grids start at
       the same x and the headings sit over their own columns. */
    padding: .35rem .75rem;
    border-left: 3px solid transparent;
    background: var(--bh-shell-bg-alt);
    border-bottom: 1px solid var(--bh-card-border);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--bh-muted);
}

.rem-row {
    padding: .6rem .75rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--bh-card-border);
    min-height: 3.35rem;
    transition: background-color .12s;
}

.rem-item:last-child .rem-row {
    border-bottom: 0;
}

.rem-row:hover {
    background: var(--bh-shell-hover-bg);
}

.rem-item.is-overdue .rem-row {
    border-left-color: var(--bh-rose);
}

.rem-party {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.rem-dot {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--bh-slate) 14%, transparent);
    color: var(--bh-slate);
}

.rem-item.is-overdue .rem-dot {
    background: color-mix(in srgb, var(--bh-rose) 14%, transparent);
    color: var(--bh-rose);
}

.rem-party-text {
    min-width: 0;
}

.rem-name {
    font-weight: 600;
    font-size: .84rem;
    line-height: 1.25;
    color: var(--bs-emphasis-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rem-sub {
    font-size: .7rem;
    color: var(--bh-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rem-cell {
    font-size: .78rem;
    color: var(--bh-muted);
    text-align: right;
    min-width: 0;
}

.rem-cell .bi {
    font-size: .75rem;
}

.rem-amount {
    text-align: right;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
}

/* "late" stamp on an individual bill in the expanded invoice table. */
.rem-late {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .68rem;
    font-weight: 600;
    padding: 0 .35rem;
    border-radius: .3rem;
    background: color-mix(in srgb, var(--bh-rose) 14%, transparent);
    color: var(--bh-rose);
}

/* Send buttons. One soft pill per channel in that channel's colour, filling on
   hover. flex: none on every part of the group stops the pills stretching when
   the column is wide. */
.rem-send {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
}

.rem-send form {
    display: flex;
    flex: none;
    gap: .3rem;
}

.rem-btn {
    --b: var(--bh-slate);
    flex: none;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 0 .6rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--b) 13%, transparent);
    color: var(--b);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .12s, color .12s;
}

.rem-btn .bi {
    font-size: .82rem;
}

.rem-btn:hover:not(:disabled) {
    background: var(--b);
    color: #fff;
}

.rem-btn:disabled {
    opacity: .3;
}

.rem-btn.b-wa    { --b: #1ebe5d; }
.rem-btn.b-sms   { --b: var(--bh-green); }
.rem-btn.b-email { --b: var(--bh-blue); }
.rem-btn.b-both  { --b: var(--bh-violet); }

/* Under ~1200px the labels go and the pills become icon circles, so the send
   column narrows with them. */
@media (max-width: 1199.98px) {
    .rem-head-row,
    .rem-row {
        --rem-send-col: 8.5rem;
    }

    .rem-btn span {
        display: none;
    }

    .rem-btn {
        width: 1.8rem;
        padding: 0;
    }

    .rem-btn.b-both {
        width: auto;
        padding: 0 .5rem;
    }
}

.rem-toggle {
    background: none;
    border: 0;
    padding: .1rem .25rem;
    font-size: .78rem;
    color: var(--bh-muted);
}

.rem-toggle .bi {
    transition: transform .15s;
}

.rem-toggle:not(.collapsed) .bi {
    transform: rotate(180deg);
}

.rem-invoices {
    border-bottom: 1px solid var(--bh-card-border);
    background: var(--bh-shell-bg-alt);
}

.rem-invoices .table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    font-size: .76rem;
}

.rem-invoices .table > :not(caption) > * > * {
    padding: .25rem .5rem;
}

.rem-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1rem;
    padding: .45rem .75rem;
    background: var(--bh-shell-bg-alt);
    border-top: 1px solid var(--bh-card-border);
    font-size: .76rem;
    color: var(--bh-muted);
}

.rem-foot b {
    color: var(--bs-emphasis-color);
}

/* Below lg the two middle columns fold under the party name; below md the
   buttons get their own line. The row never scrolls sideways. */
@media (max-width: 991.98px) {
    .rem-head-row {
        display: none;
    }

    .rem-head-row,
    .rem-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .rem-row {
        padding: .65rem .7rem;
    }

    .rem-cell-invoices,
    .rem-cell-due {
        grid-column: 1;
        grid-row: 2;
        display: inline;
    }

    .rem-cell-due::before {
        content: " · ";
    }

    .rem-amount {
        grid-column: 2;
        grid-row: 1;
    }

    .rem-send {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 575.98px) {
    .rem-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rem-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rem-send {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
    }
}