/* ---------------------------------------------------------------------------
   BillHR theme layer.

   Colors are expressed through Bootstrap 5.3's CSS variables 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: #0d6efd;
    --bh-login-to: #6610f2;

    /* Navy sidebar / navbar reskin ---------------------------------------- */
    --bh-navy-start: #0c1339;
    --bh-navy-end: #141b45;
    --bh-navy-text: #aab3d6;
    --bh-navy-text-strong: #ffffff;
    --bh-navy-icon: #7f8cd9;
    --bh-navy-heading: #6f86e8;
    --bh-navy-hover-bg: rgba(255, 255, 255, .07);
    --bh-navy-border: rgba(255, 255, 255, .08);
    --bh-accent-start: #2f6fed;
    --bh-accent-end: #1d4fd8;
    --bh-page-bg: #f2f4fa;
}

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

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

.navbar.bg-dark {
    background: linear-gradient(135deg, var(--bh-navy-start) 0%, var(--bh-navy-end) 100%) !important;
    border-bottom: 1px solid var(--bh-navy-border);
}

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

.sidebar {
    min-height: calc(100vh - 48px);
    background: linear-gradient(180deg, var(--bh-navy-start) 0%, var(--bh-navy-end) 100%);
    border-right: 1px solid var(--bh-navy-border);
}

/* 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 a toggleable in-flow panel (Bootstrap's .collapse),
   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 */
    }
}

.sidebar .nav-link {
    color: var(--bh-navy-text);
    font-weight: 500;
    font-size: 1rem;
    padding: .55rem 1rem;
    border-radius: .6rem;
    margin: .1rem .6rem;
    transition: background-color .15s ease, color .15s ease;
}

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

.sidebar .nav-link .bi {
    margin-right: 8px;
    color: var(--bh-navy-icon);
}

.sidebar .nav-link.active,
.sidebar .nav-link.active .bi {
    color: #fff;
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--bh-accent-start) 0%, var(--bh-accent-end) 100%);
    box-shadow: 0 4px 12px rgba(29, 79, 216, .35);
}

.sidebar-heading {
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--bh-navy-heading) !important;
    font-weight: 700;
}

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

.card {
    border: none;
    border-radius: .9rem;
}

.stat-card {
    border: none;
    border-left: 6px 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, .1) !important;
}

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

.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: var(--bs-body-bg);
    --bh-login-from: #0a2a6b;
    --bh-login-to: #2d0f5e;
}

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

/* 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 {
        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;
    }
}