/* ==========================================================================
   New_UI global theme layer
   --------------------------------------------------------------------------
   Restyles the app-wide sidebar (.pcoded-navbar) and topbar (.header-navbar /
   .navbar-header) to match the New_UI flat/dark aesthetic used by the
   LightDashboard prototype (CommanderERP.Web/Areas/LightDashboard), and adds
   a global light/dark theme layer driven by html[data-theme].

   This file is loaded LAST in _Layout.cshtml's <head>, after every bower/
   pcoded template stylesheet, so its rules can safely override the legacy
   admin-template defaults without editing those third-party files directly.

   Only visual (color/spacing/radius/typography) rules live here. No markup,
   route, or behavior-bearing classes (.pcoded-hasmenu, .pcoded-submenu,
   .pcoded-trigger, dropdown wiring, etc.) are renamed or removed - pcoded.min.js
   and the notification/profile dropdown scripts keep working unchanged.
   ========================================================================== */

:root {
    --ld-bg: #f5f6f8;
    --ld-card: #ffffff;
    --ld-border: #eaecf0;
    --ld-text: #1f2430;
    --ld-text-muted: #7c8394;
    --ld-sidebar-bg: #14161f;
    --ld-sidebar-text: #cfd2dc;
    --ld-sidebar-text-active: #ffffff;
    --ld-accent: #f4772e;
    --ld-accent-soft: #fdeee3;
    --ld-good: #17a76a;
    --ld-good-soft: #e6f7ef;
    --ld-track-bg: #eef0f4;
    --ld-input-bg: #ffffff;
    --ld-error-bg: #fdecea;
    --ld-error-border: #f5c6cb;
    --ld-error-text: #c0392b;
    --ld-shadow: 0 1px 2px rgba(20, 22, 31, 0.04), 0 8px 24px rgba(20, 22, 31, 0.05);
    color-scheme: light;
    /* Sidebar geometry. Declared on :root (not on the sidebar) so the content
       and header offsets below can derive from the SAME numbers - keeping them
       as separate literals is what let the header creep 14px over the sidebar's
       rounded top corner. */
    --ld-sidebar-inset: 14px;
    --ld-sidebar-w: 240px;
    --ld-sidebar-w-collapsed: 76px;
    /* inset + sidebar + matching gap before the content starts */
    --ld-content-offset: calc(var(--ld-sidebar-inset) * 2 + var(--ld-sidebar-w));
    --ld-content-offset-collapsed: calc(var(--ld-sidebar-inset) * 2 + var(--ld-sidebar-w-collapsed));
}

html[data-theme="dark"] {
    --ld-bg: #10121a;
    --ld-card: #1a1d29;
    --ld-border: #2c3040;
    --ld-text: #eef0f4;
    --ld-text-muted: #9aa1b3;
    --ld-accent-soft: rgba(244, 119, 46, 0.18);
    --ld-good-soft: rgba(23, 167, 106, 0.18);
    --ld-track-bg: #2c3040;
    --ld-input-bg: #232636;
    --ld-error-bg: rgba(192, 57, 43, 0.16);
    --ld-error-border: rgba(192, 57, 43, 0.4);
    --ld-error-text: #ff8a80;
    --ld-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

/* ---------- Base typography ---------- */

body {
    font-family: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background: var(--ld-bg) !important;
    color: var(--ld-text) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---------- Accent color app-wide ---------- */

.btn-primary {
    background-color: var(--ld-accent) !important;
    border-color: var(--ld-accent) !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: color-mix(in srgb, var(--ld-accent) 88%, black) !important;
        border-color: color-mix(in srgb, var(--ld-accent) 88%, black) !important;
    }

.btn-outline-primary {
    color: var(--ld-accent) !important;
    border-color: var(--ld-accent) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--ld-accent) !important;
        border-color: var(--ld-accent) !important;
        color: #fff !important;
    }

a {
    color: var(--ld-accent);
}

.text-saffron {
    color: var(--ld-accent) !important;
}

/* ==========================================================================
   Sidebar - .pcoded-navbar.ld-sidebar
   --------------------------------------------------------------------------
   _Layout.cshtml's <nav class="p-fixed pcoded-navbar ld-sidebar"> now carries
   the real ld-sidebar/ld-brand/ld-nav/ld-sidebar-footer classes from
   dashboard.css, and dashboard.css is linked ahead of this file, so all of
   the sidebar's colors/spacing/radius come from dashboard.css's own rules -
   nothing is re-approximated here. This block only contains the minimum
   needed to reconcile the legacy pcoded template's own layout CSS (fixed
   positioning/width/z-index that pcoded.min.js's mobile off-canvas toggle
   depends on) with dashboard.css's `.ld-sidebar` box model, plus bridging
   selectors for the two bits of markup that could not be lifted verbatim
   from dashboard.css (the dropdown-wrapped sidebar footer, and active-state
   detection which pcoded computes on the <li> while dashboard.css keys off
   `.ld-nav-item.ld-active` on the <a>).
   ========================================================================== */

/* The sidebar itself must NOT scroll - if it does, the brand, the collapse
   row and the user footer all scroll away with the menu (they were only
   reachable after scrolling, which is the bug this fixes). It is a fixed
   flex column: brand pinned at the top, the menu list as the single
   scrollable region in the middle, collapse row + user footer pinned at the
   bottom. overflow-x is explicitly hidden so no horizontal scrollbar can
   appear along the bottom of the rail. */
.pcoded-navbar.ld-sidebar {
    display: flex !important;
    flex-direction: column;
    border-right: none;
    box-shadow: none !important;
    overflow: hidden !important;
}

    .pcoded-navbar.ld-sidebar > .ld-brand,
    .pcoded-navbar.ld-sidebar > .ld-sidebar-collapse-wrap,
    .pcoded-navbar.ld-sidebar > .ld-sidebar-footer {
        flex: none;
    }

/* Desktop only: pin the sidebar full-height from the very top (instead of
   pcoded's default "start below a 70px topbar" behavior) and force its
   width/z-index to dashboard.css's 240px design. Left untouched below this
   breakpoint so pcoded.min.js's existing mobile off-canvas open/close
   mechanism (its own left/transform toggling) keeps working exactly as it
   did before this pass - only re-verify that behavior live on a phone-sized
   viewport, since it could not be exercised here. */
/* Floating "pill" sidebar (design reference: a rounded card inset from the
   viewport edges, not a flush full-height panel) - see the reference mock's
   rounded sidebar cards. --ld-sidebar-inset is the gap kept on every side;
   --ld-sidebar-w is the expanded width, reused below by the collapsed-state
   and main-content-offset rules so the numbers only live in one place. */
@media (min-width: 992px) {
    .pcoded-navbar.ld-sidebar {
        position: fixed !important;
        left: var(--ld-sidebar-inset) !important;
        top: var(--ld-sidebar-inset) !important;
        width: var(--ld-sidebar-w) !important;
        height: calc(100vh - (var(--ld-sidebar-inset) * 2)) !important;
        border-radius: 20px;
        box-shadow: 0 12px 32px -12px rgba(10, 11, 16, 0.35) !important;
        z-index: 1030;
    }
}

/* ==========================================================================
   Sidebar collapse animation
   --------------------------------------------------------------------------
   #mobile-collapse's click handler already ships in pcoded.min.js and flips
   `#pcoded`'s `vertical-nav-type` attribute between "expanded" (sidebar
   visible) and "offcanvas" - pcoded's own CSS then either shows the sidebar
   at full width or slides it fully off-screen via margin-left, instantly and
   with no transition, leaving a stale gap in the main content. Rather than
   touching that JS (out of scope - "avoid changing existing navigation
   logic"), this reinterprets the same "offcanvas" attribute state as a
   smooth icon-only rail instead of a full hide, and animates every dimension
   that changes so the sidebar, header and content resize together.
   ========================================================================== */
@media (min-width: 992px) {
    .pcoded-navbar.ld-sidebar,
    .ld-main,
    .header-navbar.pcoded-header {
        transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #pcoded[vertical-nav-type="offcanvas"] .pcoded-navbar.ld-sidebar {
        width: var(--ld-sidebar-w-collapsed) !important;
        margin-left: 0 !important;
        /* pcoded's own [vertical-nav-type="offcanvas"] .pcoded-navbar rule sets
           opacity:0 (it expects "offcanvas" to mean fully hidden) - override
           back to visible since we're repurposing this state as the icon rail. */
        opacity: 1 !important;
        transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
    }

    #pcoded[vertical-nav-type="offcanvas"] .ld-main {
        margin-left: var(--ld-content-offset-collapsed) !important;
    }

    #pcoded[vertical-nav-type="offcanvas"] .header-navbar.pcoded-header {
        margin-left: var(--ld-content-offset-collapsed) !important;
        width: calc(100% - var(--ld-content-offset-collapsed) - var(--ld-sidebar-inset)) !important;
    }

    /* Tighten the sidebar's own side padding so a 30px icon chip sits dead
       centre in the 76px rail (76 - 10 - 10 = 56 of content width). */
    #pcoded[vertical-nav-type="offcanvas"] .pcoded-navbar.ld-sidebar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Brand: center the "C" mark, fade out the "Commander/ERP" text */
    #pcoded[vertical-nav-type="offcanvas"] .ld-brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* Nav rows: center the icon, collapse the label to zero width instead of
       display:none so the fade-out can actually transition. */
    #pcoded[vertical-nav-type="offcanvas"] .pcoded-navbar .pcoded-item > li > a.ld-nav-item {
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0;
    }

    /* pcoded's own .pcoded-micon rule hard-codes `margin-left: 20px`, which beat
       the plain `margin: 0 auto` here and pushed every icon 20px right of the
       rail's centre. Zero it out and let the row's justify-content do the
       centering. */
    #pcoded[vertical-nav-type="offcanvas"] .pcoded-navbar .pcoded-item > li > a > .pcoded-micon.ld-nav-icon {
        margin: 0 !important;
    }

    /* The brand mark and the footer avatar sit in flex rows whose second child
       (the wordmark / the name+role block) collapses to zero width - but the
       row's `gap` is still applied, shifting the remaining item off-centre by
       half the gap. Remove the gap while collapsed. */
    #pcoded[vertical-nav-type="offcanvas"] .ld-brand,
    #pcoded[vertical-nav-type="offcanvas"] .ld-sidebar-footer .dropdown-toggle {
        gap: 0 !important;
    }

    #pcoded[vertical-nav-type="offcanvas"] .ld-sidebar-footer .ld-user-meta {
        max-width: 0;
        overflow: hidden;
    }

    /* Drop the footer's side padding while collapsed so the avatar centres on
       the full rail width, in line with the nav icons and the brand mark. The
       dropdown wrapper inside it shrink-wraps to the avatar, so the centering
       has to happen on the footer (the flex container) itself. */
    #pcoded[vertical-nav-type="offcanvas"] .ld-sidebar-footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center;
        gap: 0;
    }

    /* Submenus have nowhere to render their indented list at 76px - collapse
       them shut and hide the caret; parent items stay reachable as icons and
       expand again automatically once the sidebar re-opens. */
    #pcoded[vertical-nav-type="offcanvas"] .pcoded-navbar .pcoded-submenu {
        display: none !important;
    }

    #pcoded[vertical-nav-type="offcanvas"] .pcoded-navbar .pcoded-item > li.pcoded-hasmenu > a.ld-nav-item::after {
        display: none;
    }

    /* Sidebar footer: center the avatar, fade out name/role/chevron. The real
       flex row is .ld-sidebar-footer .dropdown-toggle (.ld-sidebar-footer
       itself is display:block - see the footer rules further down), so that
       is what needs centering, not the outer wrapper. */
    #pcoded[vertical-nav-type="offcanvas"] .ld-sidebar-footer .dropdown-toggle {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

}

/* Hover tooltip for a collapsed nav row (reference design). It is a single
   element appended to <body> and positioned by the small script in
   _Layout.cshtml - NOT a ::after on the row itself, because the scrolling
   .nav-list clips its own overflow and would cut the bubble off inside the
   rail. Content comes from each row's [data-tooltip], copied from its
   existing label text. */
.ld-nav-tooltip {
    position: fixed;
    z-index: 2000;
    background: #1a1d29;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

    .ld-nav-tooltip.is-visible {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    /* Little arrow pointing back at the icon. */
    .ld-nav-tooltip::before {
        content: "";
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-right-color: #1a1d29;
    }

/* Text labels fade+collapse together (opacity + max-width, not display:none,
   so the transition is visible) whenever their nav row is inside a collapsed
   ("offcanvas"-attribute) sidebar. Kept outside the min-width block only so
   the transition declaration itself always exists; the actual 0-width state
   only ever triggers at desktop widths via the selectors above/below. */
.ld-brand-text,
.pcoded-navbar .pcoded-item > li > a.ld-nav-item > .pcoded-mtext,
.ld-user-name,
.ld-user-role {
    transition: opacity 0.18s ease, max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 160px;
    opacity: 1;
}

@media (min-width: 992px) {
    #pcoded[vertical-nav-type="offcanvas"] .ld-brand-text,
    #pcoded[vertical-nav-type="offcanvas"] .pcoded-navbar .pcoded-item > li > a.ld-nav-item > .pcoded-mtext,
    #pcoded[vertical-nav-type="offcanvas"] .ld-user-name,
    #pcoded[vertical-nav-type="offcanvas"] .ld-user-role {
        opacity: 0;
        max-width: 0;
        margin: 0 !important;
        overflow: hidden;
    }
}

/* The one and only scroll region in the sidebar. */
.pcoded-navbar.ld-sidebar .nav-list {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* pcoded's own theme rules paint a lighter panel / rounded box / inset
   padding on these inner wrappers, which showed up as a grey card floating
   behind the menu items (and misaligned the icons in the collapsed rail).
   The sidebar's own background is the only one that should be visible. */
.pcoded-navbar.ld-sidebar .nav-list,
.pcoded-navbar.ld-sidebar .pcoded-inner-navbar,
.pcoded-navbar.ld-sidebar .pcoded-item,
.pcoded-navbar.ld-sidebar .ld-sidebar-collapse-wrap,
.pcoded-navbar.ld-sidebar .ld-sidebar-collapse-wrap .pcoded-item {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* The menu list scrolls with the wheel/trackpad but draws no scrollbar. A
   webkit scrollbar always consumes layout width, which made every menu row a
   few px narrower than the pinned collapse/footer rows below it - so the
   icons in the collapsed rail no longer lined up with the brand mark and the
   avatar. Hiding it keeps one consistent content width in both states (and
   matches the reference design, which shows no scrollbar either). Nothing is
   hidden below the fold any more now that the collapse row and the user
   footer are pinned outside this scroll area. */
.pcoded-navbar.ld-sidebar .nav-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .pcoded-navbar.ld-sidebar .nav-list::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

/* pcoded.min.js wraps .pcoded-inner-navbar in a jQuery slimScroll .slimScrollDiv
   on document-ready, with its own JS wheel handler and inline overflow/height.
   The inline script in _Layout.cshtml unwraps it again on window-load so the
   .nav-list above is the real scroll region; these rules just neutralize the
   wrapper for the brief window before that runs (and hide slimScroll's own
   scrollbar graphics, which no longer line up with this layout). */
.pcoded-navbar.ld-sidebar .slimScrollDiv {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
}

.pcoded-navbar.ld-sidebar .pcoded-inner-navbar.ld-nav {
    height: auto !important;
    overflow: visible !important;
}

.pcoded-navbar.ld-sidebar .slimScrollBar,
.pcoded-navbar.ld-sidebar .slimScrollRail {
    display: none !important;
}

.pcoded-navbar.ld-sidebar .pcoded-item {
    padding: 0;
}

    .pcoded-navbar.ld-sidebar .pcoded-item:after {
        content: none;
    }

    .pcoded-navbar.ld-sidebar .pcoded-item > li {
        margin: 0 0 2px;
    }

        .pcoded-navbar.ld-sidebar .pcoded-item > li > a.ld-nav-item {
            margin: 0;
        }

/* pcoded's own vertical-theme rules (style.css:
   `.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item > li > a` and
   `... > .pcoded-micon`) are compound/attribute selectors with higher
   specificity than dashboard.css's single-class `.ld-nav-item`/`.ld-nav-icon`,
   so they would otherwise win the cascade and keep the old boxed-icon/
   left-border-accent look even with the classes added. These overrides just
   restate dashboard.css's own ld-nav-item/ld-nav-icon numbers with enough
   specificity + !important to make them actually win, so the rendered result
   matches the reference instead of a hybrid of both designs. */
.pcoded-navbar .pcoded-item > li > a.ld-nav-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 9px 12px !important;
    margin: 0 0 4px !important;
    border-radius: 12px !important;
    border-left: none !important;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

    .pcoded-navbar .pcoded-item > li:not(.active):not(.pcoded-trigger) > a.ld-nav-item:hover {
        background: rgba(255, 255, 255, 0.06);
        transform: translateX(2px);
    }

/* In-sidebar "Collapse Sidebar" row. Lives outside the scrolling .nav-list
   so it stays pinned just above the user footer, with a hairline separating
   it from the menu that scrolls behind it. */
.pcoded-navbar.ld-sidebar .ld-sidebar-collapse-wrap {
    padding: 8px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* It is a utility control, not a destination - never let it pick up the
   accent "active page" pill that real nav rows get. */
.pcoded-navbar.ld-sidebar .ld-sidebar-collapse-item > a.ld-nav-item,
.pcoded-navbar.ld-sidebar .ld-sidebar-collapse-item.active > a.ld-nav-item,
.pcoded-navbar.ld-sidebar .ld-sidebar-collapse-item.pcoded-trigger > a.ld-nav-item {
    background: transparent !important;
    color: var(--ld-sidebar-text) !important;
    font-weight: 500 !important;
}

    .pcoded-navbar.ld-sidebar .ld-sidebar-collapse-item > a.ld-nav-item:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #fff !important;
    }

    .pcoded-navbar.ld-sidebar .ld-sidebar-collapse-item > a.ld-nav-item > .pcoded-micon.ld-nav-icon {
        background: rgba(255, 255, 255, 0.06) !important;
    }

/* Icon "chip": a small rounded square behind each nav icon, matching the
   reference design's boxed-icon look, instead of a bare glyph. */
.pcoded-navbar .pcoded-item > li > a > .pcoded-micon.ld-nav-icon,
.pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a .pcoded-micon.ld-nav-icon {
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-right: 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.06) !important;
    position: static !important;
    flex: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pcoded-navbar .pcoded-item > li.active > a.ld-nav-item > .pcoded-micon.ld-nav-icon,
.pcoded-navbar .pcoded-item > li.pcoded-trigger > a.ld-nav-item > .pcoded-micon.ld-nav-icon {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* pcoded's style.css absolutely-positions `.pcoded-mtext` (left/top, sized for
   its own collapsed/flyout-on-hover mode) so it sits on top of the icon
   instead of flowing next to it in our flat single-row layout - that was
   causing the icon+label overlap. Force it back into normal flex flow. */
.pcoded-navbar .pcoded-item > li > a.ld-nav-item > .pcoded-mtext,
.pcoded-navbar .pcoded-submenu li > a.ld-nav-item > .pcoded-mtext {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: inline-block !important;
    width: auto !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* Active leaf item and expanded parent items get the accent pill - this is
   the exact `.ld-nav-item.ld-active` rule from dashboard.css, just also
   keyed off the pcoded-computed `li.active`/`li.pcoded-trigger` state since
   that is what Html.IsActive/Html.IsActiveTreeNode already emit. */
.pcoded-navbar .pcoded-item > li.active > a.ld-nav-item,
.pcoded-navbar .pcoded-item > li.pcoded-trigger > a.ld-nav-item,
.pcoded-navbar .pcoded-submenu li.active > a.ld-nav-item {
    /* !important needed here: style.css's
       `.pcoded-navbar[navbar-theme="theme1"][active-item-theme="theme1"] .pcoded-item > li.active > a`
       carries two attribute selectors, giving it higher specificity than this
       rule despite loading first - without !important its hard-coded #0b6dff
       blue wins over our accent color. */
    background: var(--ld-accent) !important;
    color: #fff !important;
    font-weight: 600;
}

/* Submenus: keep pcoded's own show/hide + .pcoded-trigger behavior untouched,
   just present the expanded list as an indented flat list of ld-nav-item
   rows instead of a boxed accordion panel. */
.pcoded-navbar .pcoded-submenu {
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 2px 0 2px 14px !important;
}

    .pcoded-navbar .pcoded-submenu li > a.ld-nav-item {
        display: flex !important;
        align-items: center;
        gap: 10px;
        font-size: 12.5px;
        padding: 7px 12px !important;
        margin: 0 0 2px !important;
        border-radius: 10px !important;
        border-left: none !important;
    }

        /* pcoded draws a "›" caret before every submenu row (a feather glyph on
           .pcoded-mtext::before) - drop it, the icon chip and indent already
           communicate the nesting. */
        .pcoded-navbar .pcoded-submenu li > a.ld-nav-item::before,
        .pcoded-navbar .pcoded-submenu li > a.ld-nav-item::after,
        .pcoded-navbar .pcoded-submenu li > a.ld-nav-item > .pcoded-mtext::before,
        .pcoded-navbar .pcoded-submenu li > a.ld-nav-item > .pcoded-mtext::after {
            content: none !important;
            display: none !important;
        }

        .pcoded-navbar .pcoded-submenu li > a.ld-nav-item:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        /* Slightly smaller icon chip than a top-level row, so the hierarchy
           reads at a glance. */
        .pcoded-navbar .pcoded-submenu li > a.ld-nav-item > .pcoded-micon.ld-nav-icon {
            width: 26px !important;
            height: 26px !important;
            border-radius: 8px !important;
            font-size: 12px !important;
            margin: 0 !important;
            flex: none;
        }

/* Sidebar footer: the moved profile dropdown trigger. Reuses ld-sidebar-footer/
   ld-avatar/ld-user-name/ld-user-role from dashboard.css for the avatar+name+role
   look; this bridges only the extra dropdown-toggle/dropdown-menu wrapper that
   the reference design doesn't need (it has no working dropdown) but this app
   does, to keep Logout reachable. */
.ld-sidebar-footer {
    flex: none;
    /* flex (not block) so the collapsed state can centre the avatar on the
       rail via justify-content; left-aligned by default when expanded. */
    display: flex;
    align-items: center;
    padding: 0;
}

    .ld-sidebar-footer .dropdown-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 10px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        cursor: pointer;
    }

        .ld-sidebar-footer .dropdown-toggle::after {
            display: none;
        }

        .ld-sidebar-footer .dropdown-toggle .ld-avatar {
            width: 34px;
            height: 34px;
            object-fit: cover;
            border: none;
        }

        .ld-sidebar-footer .ld-user-meta {
            min-width: 0;
            overflow: hidden;
        }

            .ld-sidebar-footer .ld-user-meta .ld-user-name {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

/* Account/Role/Logout dropdown opened from the sidebar-footer avatar (and its
   mobile-topbar twin). Now that it lives outside .header-navbar it no longer
   picks up that old template's white-card styling (background/shadow/radius),
   so it fell back to a bare, unstyled Bootstrap .dropdown-menu - plain white
   box, default 4px padding, inline bold labels. Restyled here as its own
   proper ld-card-style menu; position/open-upward (.dropup) and the JS that
   toggles it are untouched. */
.ld-profile-menu.dropdown-menu {
    min-width: 220px;
    padding: 8px;
    margin-bottom: 10px !important;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(10, 11, 16, 0.35);
}

.ld-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 10px;
}

.ld-profile-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
    font-size: 14px;
}

.ld-profile-menu-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ld-profile-menu-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.ld-profile-menu-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ld-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-profile-menu-divider {
    height: 1px;
    background: var(--ld-border);
    margin: 6px 4px;
}

.ld-profile-menu-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #ef4444 !important;
    font-weight: 600;
    font-size: 13.5px;
    transition: background-color 0.15s ease;
}

    .ld-profile-menu-logout:hover {
        background: color-mix(in srgb, #ef4444 10%, var(--ld-card));
        text-decoration: none;
    }

    .ld-profile-menu-logout i,
    .ld-profile-menu-logout .svg-inline--fa {
        font-size: 15px;
    }

/* ==========================================================================
   Topbar - .header-navbar / .pcoded-header
   --------------------------------------------------------------------------
   Brand/logo and the tenant-name/profile clutter this bar used to show now
   live in the sidebar (brand) or the page's own .ld-header (tenant pill,
   avatar) on Dashboard/EmployeeDashboard, so this bar is reduced to a slim
   utility strip that only still needs to carry: the mobile nav toggle
   (#mobile-collapse, required by pcoded.min.js), the trial banner, the icon
   theme toggle, and the notification bell - each keeps its exact original
   markup/ids/JS wiring, only repositioned and restyled.
   ========================================================================== */

.header-navbar,
.header-navbar.pcoded-header {
    background: var(--ld-card) !important;
    color: var(--ld-text) !important;
    box-shadow: 0 1px 2px rgba(20, 22, 31, 0.04), 0 4px 14px rgba(20, 22, 31, 0.05) !important;
    border-bottom: 1px solid var(--ld-border);
    min-height: 56px;
}

/* The old "Commander ERP" wordmark + logo image: superseded by .ld-brand in
   the sidebar. Hidden at desktop widths only (where the sidebar's own brand
   is always visible) rather than deleted, so nothing breaks in the DOM and
   phones - where the sidebar is off-canvas until opened - still show a
   brand mark in the topbar. */
@media (min-width: 992px) {
    /* .navbar-logo itself (not just its children) carries the old template's
       fixed width/height/background meant to visually align with the OLD
       sidebar - hiding only the <a>/<img> inside it left an empty dark box
       the full width of that container sitting before the hamburger, which
       lives in a separate sibling element (.navbar-container .nav-left) and
       is unaffected by hiding .navbar-logo entirely. */
    .header-navbar .navbar-wrapper .navbar-logo {
        display: none !important;
    }

    .header-navbar .navbar-wrapper .navbar-container {
        margin-left: 0 !important;
    }

    .header-navbar .navbar-wrapper .navbar-container .nav-left li:last-child {
        display: none;
    }
}

/* Sidebar toggle (#mobile-collapse / .mobile-menu): a compact, professional
   icon button instead of a bare <a> with the browser's default blue focus
   outline around it. Same element/id/click-handler pcoded.min.js already
   wires up - purely visual. */
.header-navbar .mobile-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: var(--ld-text-muted) !important;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    outline: none;
}

    .header-navbar .mobile-menu:hover {
        background: var(--ld-track-bg);
        color: var(--ld-accent) !important;
    }

    .header-navbar .mobile-menu:focus-visible {
        border-color: var(--ld-accent);
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

    .header-navbar .mobile-menu i,
    .header-navbar .mobile-menu .svg-inline--fa {
        font-size: 15px;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

/* Rotate the icon a quarter-turn while the sidebar is collapsed, so the
   control itself gives a little feedback instead of looking static. */
#pcoded[vertical-nav-type="offcanvas"] .header-navbar .mobile-menu i,
#pcoded[vertical-nav-type="offcanvas"] .header-navbar .mobile-menu .svg-inline--fa {
    transform: rotate(90deg);
}

.header-navbar .navbar-wrapper .navbar-container .nav-left li,
.header-navbar .navbar-wrapper .navbar-container .nav-right li {
    color: var(--ld-text) !important;
}

/* Page title + tenant pill, relocated from every page's own (now removed)
   .ld-header into the previously near-empty topbar - see #ldHeaderPageTitle
   in _Layout.cshtml. nav-left/nav-right are legacy floated <li>s (not flex),
   so this row centers itself the same way the old tenant-name span did:
   fixed top offset tuned to the icon row's own vertical position. */
.header-navbar .navbar-wrapper .navbar-container .nav-left .ld-header-page-info {
    display: flex !important;
    align-items: center;
    gap: 17px;
    margin-top: -1px;
    /* the legacy li line-height (4.4, style.css) only sizes this row through the
       16px title text; pin that height so the tenant pill stays centred even when
       the title is empty */
    min-height: calc(16px * 4.4);
    max-width: 100%;
    overflow: hidden;
}

.ld-header-page-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ld-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flatten the pill inside the slim topbar row - the base .ld-pill (dashboard.css)
   is tuned for sitting next to a 22px page <h1>, which reads too tall/boxy here
   next to a 16px inline title. Scoped to this spot only, so the LightDashboard
   prototype pages that still use the base .ld-pill are untouched. */
.header-navbar .navbar-wrapper .navbar-container .nav-left .ld-header-page-info .ld-pill {
    padding: 0 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    height: 24px;
}

/* User-initials avatar, relocated the same way from every page's own
   .ld-header-right to the far right of the shared topbar. */
.header-navbar .navbar-wrapper .navbar-container .nav-right .ld-avatar {
    margin-top: 16px;
}

.header-navbar .navbar-wrapper .navbar-container .nav-left a,
.header-navbar .navbar-wrapper .navbar-container .nav-right a,
.header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-toggle {
    color: var(--ld-text-muted) !important;
}

.header-navbar .navbar-wrapper .navbar-container .header-notification .dropdown-toggle:hover {
    color: var(--ld-accent) !important;
}

.header-navbar .navbar-wrapper .navbar-container .nav-right .user-profile img {
    border: 2px solid var(--ld-accent-soft);
}

/* #userName now lives in the sidebar footer, and the sidebar is dark in BOTH
   themes - so it must use the sidebar's own text color. Painting it with
   --ld-text made it near-black on a near-black panel (invisible) in light
   theme. */
#userName {
    color: var(--ld-sidebar-text-active, #fff) !important;
    font-weight: 600;
}

.pcoded-navbar.ld-sidebar .ld-user-name {
    color: var(--ld-sidebar-text-active, #fff) !important;
}

.pcoded-navbar.ld-sidebar .ld-user-role {
    color: var(--ld-sidebar-text, #cfd2dc) !important;
    opacity: 0.75;
}

/* pcoded's own template conditionally puts `margin-left: 250px` on whichever
   element a page marks `.pcoded-content` (see style.css's
   [vertical-nav-type][vertical-effect] rules), to clear the old sidebar
   width. That offset now belongs solely to `.ld-main` below - applying it
   there once, for every page, regardless of whether that page's own markup
   happens to use `.pcoded-content` - so it is neutralized here to avoid
   doubling the indent on pages (like Dashboard/EmployeeDashboard) whose root
   element still carries `.pcoded-content` for other, unrelated styling. */
.pcoded-content {
    margin-left: 0 !important;
}

@media (min-width: 992px) {
    .ld-main {
        margin-left: var(--ld-content-offset);
    }

    /* Float the topbar as its own inset card, matching the sidebar's
       rounded/shadowed "pill" treatment (top/right insets, radius, shadow)
       instead of a flush full-bleed bar - a flush bar butting up against the
       sidebar's rounded top-right corner is what read as an ugly "cut"
       between the two. Purely a shape/shadow change: left position, height
       and the JS-measured content offset below the header are untouched. */
    .header-navbar.pcoded-header {
        margin-left: var(--ld-content-offset);
        width: calc(100% - var(--ld-content-offset) - var(--ld-sidebar-inset));
        border-radius: 20px;
        border-bottom: none;
        box-shadow: 0 12px 32px -16px rgba(10, 11, 16, 0.3), 0 1px 2px rgba(20, 22, 31, 0.04) !important;
    }
}

/* ==========================================================================
   App shell: header / content / footer
   --------------------------------------------------------------------------
   One place decides where the footer goes, for every page:
   - .pcoded-container is a full-viewport flex column, the content area takes
     the free space, so the footer sits at the bottom of the window on short
     pages and simply follows the content on long ones. (pcoded's own
     min-height: calc(100vh - 70px) on the content area plus a 38px bottom
     margin always pushed the footer below the fold instead.)
   - The footer uses the SAME offset token as .ld-main and the topbar, so it
     lines up with the content and moves with it when the sidebar collapses.
     pcoded's own footer offsets (245px expanded / 0 collapsed) belonged to the
     old 230px flush sidebar and left the footer tucked under the new one.
   ========================================================================== */
#pcoded .pcoded-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    #pcoded .pcoded-container > .pcoded-main-container {
        flex: 1 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

#pcoded .main-footer {
    flex: none;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    float: none;
    width: auto;
    max-width: 100%;
    /* Floating rounded card, same treatment as the topbar and the sidebar:
       inset from the right/bottom edges instead of a flush, square-cornered bar. */
    margin: 0 var(--ld-sidebar-inset) var(--ld-sidebar-inset);
    padding: 14px 20px;
    background-color: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 20px;
    box-shadow: 0 12px 32px -16px rgba(10, 11, 16, 0.3), 0 1px 2px rgba(20, 22, 31, 0.04);
    color: var(--ld-text-muted);
}

    /* the Bootstrap .row inside would otherwise poke 15px past each side */
    #pcoded .main-footer > .row {
        margin-left: 0;
        margin-right: 0;
    }

        #pcoded .main-footer > .row > [class*="col-"] {
            padding-left: 0;
            padding-right: 0;
        }

    #pcoded .main-footer .footer-text {
        overflow-wrap: anywhere;
    }

@media (min-width: 992px) {
    #pcoded .main-footer {
        margin-left: var(--ld-content-offset);
        transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #pcoded[vertical-nav-type="offcanvas"] .main-footer {
        margin-left: var(--ld-content-offset-collapsed);
    }
}

@media (max-width: 575px) {
    #pcoded .main-footer {
        margin: 0 10px 10px;
        padding: 12px 14px;
        border-radius: 16px;
        font-size: 13px;
        text-align: center;
    }
}

/* Notification / profile dropdown panels - purely visual chrome, logic untouched */
.notification-panel {
    background-color: var(--ld-card) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text);
    box-shadow: var(--ld-shadow) !important;
}

.notification-item {
    border-bottom-color: var(--ld-border) !important;
}

    .notification-item:hover {
        background-color: color-mix(in srgb, var(--ld-accent) 6%, var(--ld-card)) !important;
    }

.notification-user {
    color: var(--ld-text) !important;
}

.notification-msg {
    color: var(--ld-text-muted) !important;
}

.profile-notification {
    background-color: var(--ld-card) !important;
    color: var(--ld-text) !important;
}

/* App-wide theme toggle button placed in the topbar */
.app-theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
    color: var(--ld-text-muted);
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .app-theme-toggle-btn:hover {
        color: var(--ld-accent);
        border-color: var(--ld-accent);
    }

    .app-theme-toggle-btn i,
    .app-theme-toggle-btn .svg-inline--fa {
        pointer-events: none;
    }

/* Dashboard/EmployeeDashboard no longer carry their own page-level theme
   toggle/search box (removed per design feedback - a single compact icon
   toggle in the topbar, alongside the notification bell, is now the only
   theme control app-wide). Nothing to hide/de-duplicate here any more. */

/* ==========================================================================
   Global dark-mode layer for common Bootstrap primitives used app-wide.
   Scoped defensively (kept out of anything with explicit bg-* status
   classes) so status-coded UI like bg-success/bg-danger keeps working.
   ========================================================================== */

html[data-theme="dark"] .pcoded-content,
html[data-theme="dark"] .page-body,
html[data-theme="dark"] .main-body,
html[data-theme="dark"] .pcoded-main-container {
    background: var(--ld-bg) !important;
    color: var(--ld-text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .modal-content {
    background-color: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

    html[data-theme="dark"] .dropdown-item {
        color: var(--ld-text) !important;
    }

        html[data-theme="dark"] .dropdown-item:hover,
        html[data-theme="dark"] .dropdown-item:focus {
            background-color: color-mix(in srgb, var(--ld-accent) 12%, var(--ld-card)) !important;
            color: var(--ld-text) !important;
        }

html[data-theme="dark"] .table {
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

    html[data-theme="dark"] .table thead th {
        border-color: var(--ld-border) !important;
        color: var(--ld-text) !important;
    }

    html[data-theme="dark"] .table td,
    html[data-theme="dark"] .table th {
        border-color: var(--ld-border) !important;
    }

    html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, 0.03) !important;
    }

    html[data-theme="dark"] .table-hover tbody tr:hover {
        background-color: color-mix(in srgb, var(--ld-accent) 8%, var(--ld-card)) !important;
        color: var(--ld-text) !important;
    }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"] {
    background-color: var(--ld-input-bg) !important;
    border-color: var(--ld-border) !important;
    color: var(--ld-text) !important;
}

    html[data-theme="dark"] .form-control::placeholder {
        color: var(--ld-text-muted) !important;
    }

    html[data-theme="dark"] .form-control:disabled,
    html[data-theme="dark"] .form-control[readonly] {
        background-color: var(--ld-track-bg) !important;
    }

html[data-theme="dark"] .badge {
    color: #fff;
}

html[data-theme="dark"] .alert {
    background-color: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .nav-tabs {
    border-color: var(--ld-border) !important;
}

    html[data-theme="dark"] .nav-tabs .nav-link {
        color: var(--ld-text-muted) !important;
    }

        html[data-theme="dark"] .nav-tabs .nav-link.active {
            background-color: var(--ld-card) !important;
            color: var(--ld-text) !important;
            border-color: var(--ld-border) var(--ld-border) var(--ld-card) !important;
        }

html[data-theme="dark"] .breadcrumb {
    background-color: var(--ld-card) !important;
    color: var(--ld-text-muted) !important;
}

html[data-theme="dark"] .pagination .page-link {
    background-color: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

    html[data-theme="dark"] .pagination .page-item.active .page-link {
        background-color: var(--ld-accent) !important;
        border-color: var(--ld-accent) !important;
        color: #fff !important;
    }

    html[data-theme="dark"] .pagination .page-item.disabled .page-link {
        background-color: var(--ld-track-bg) !important;
        color: var(--ld-text-muted) !important;
    }

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-light {
    color: var(--ld-text) !important;
    border-color: var(--ld-border) !important;
}

html[data-theme="dark"] .main-footer,
html[data-theme="dark"] footer.main-footer {
    background-color: var(--ld-card) !important;
    color: var(--ld-text-muted) !important;
    border-top: 1px solid var(--ld-border);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .app-theme-toggle-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

/* ==========================================================================
   Collapsible ld-card sections (CompanyDashboard's "Company Goals" /
   "Consumption Goals: Monthly/Yearly" toggles) - a section heading row that
   sits above one or more .ld-card blocks, or inside a .ld-card-head, with a
   small chevron button wired to Bootstrap's existing data-toggle="collapse"
   (no new JS - same collapse.js already loaded everywhere). Reused instead of
   inventing page-local chrome so any other page collapsing an ld-card looks
   the same. ========================================================== */
.ld-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 14px;
    flex-wrap: wrap;
}

.ld-card-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ld-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .ld-card-collapse-btn:hover {
        background: var(--ld-track-bg);
        color: var(--ld-accent);
    }

    .ld-card-collapse-btn i,
    .ld-card-collapse-btn .svg-inline--fa {
        font-size: 15px;
        transition: transform 0.2s ease;
    }

    .ld-card-collapse-btn[aria-expanded="false"] i,
    .ld-card-collapse-btn[aria-expanded="false"] .svg-inline--fa {
        transform: rotate(-90deg);
    }

/* ==========================================================================
   daterangepicker (the "Date Range" picker on CompanyDashboard/Operations and
   .../ProposalReport) - the plugin's own CSS ships a hardcoded white/light
   popup with no theming hook, so it rendered as a jarring white card glued to
   the dark ld- UI (illegible borders, no dark-mode contrast). Reskinned with
   the same tokens/radius/shadow as the rest of the app instead of the
   plugin's built-in colors - applies in both themes since it uses the ld-*
   variables directly, no [data-theme] scoping needed. ========================================================== */
.daterangepicker {
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 12px;
    box-shadow: var(--ld-shadow);
    color: var(--ld-text);
    font-family: inherit;
}

    .daterangepicker:before {
        border-bottom-color: var(--ld-border);
    }

    .daterangepicker:after {
        border-bottom-color: var(--ld-card);
    }

    .daterangepicker .calendar-table {
        background: var(--ld-card);
        border-color: var(--ld-border);
    }

    .daterangepicker td,
    .daterangepicker th {
        color: var(--ld-text);
    }

    /* Prev/next month arrows: the plugin draws them as a CSS border-triangle
       (border-color, not color/fill), which our dark-themed calendar left at
       the plugin's default near-black border - nearly invisible against the
       now-dark background and with no hover affordance to signal they're
       clickable. Recolored to the theme's text color and given a hover chip
       so they read as an actual button, not decoration. */
    .daterangepicker th.prev,
    .daterangepicker th.next {
        border-radius: 8px;
        transition: background-color 0.15s ease;
    }

        .daterangepicker th.prev:hover,
        .daterangepicker th.next:hover {
            background: var(--ld-track-bg) !important;
        }

    .daterangepicker .prev span,
    .daterangepicker .next span {
        border-color: var(--ld-text) !important;
    }

    .daterangepicker td.off,
    .daterangepicker td.off.in-range,
    .daterangepicker td.off.start-date,
    .daterangepicker td.off.end-date {
        background: transparent;
        color: var(--ld-text-muted);
        opacity: 0.4;
    }

    .daterangepicker td.available:hover,
    .daterangepicker th.available:hover {
        background: var(--ld-track-bg);
        color: var(--ld-text);
    }

    .daterangepicker td.in-range {
        background: var(--ld-accent-soft);
        color: var(--ld-text);
    }

    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background: var(--ld-accent);
        color: #fff;
    }

    .daterangepicker .drp-calendar.left {
        border-color: var(--ld-border);
    }

    .daterangepicker .drp-buttons {
        border-top: 1px solid var(--ld-border);
    }

    .daterangepicker .drp-selected {
        color: var(--ld-text-muted);
    }

    .daterangepicker select.monthselect,
    .daterangepicker select.yearselect,
    .daterangepicker select.hourselect,
    .daterangepicker select.minuteselect,
    .daterangepicker select.secondselect,
    .daterangepicker select.ampmselect {
        background: var(--ld-input-bg);
        color: var(--ld-text);
        border: 1px solid var(--ld-border);
        border-radius: 6px;
    }

    .daterangepicker .cancelBtn {
        background: var(--ld-track-bg);
        color: var(--ld-text);
        border: none;
    }

        .daterangepicker .cancelBtn:hover {
            background: var(--ld-border);
            color: var(--ld-text);
        }

/* Select2 / native <select> styling lives in the "DROPDOWN SYSTEM" block at the end of
   this file - the single source of truth for every dropdown in the app. */

/* ==========================================================================
   DataTables (jQuery DataTables + the Bootstrap 4 integration) - same story as
   daterangepicker above: its default CSS is a hardcoded white table with no
   theming hook, so every table on a New_UI page rendered as a light box
   sitting on the dark ld- background. Reskinned with the ld-* tokens; applies
   in both themes. ========================================================== */
.dataTables_wrapper {
    color: var(--ld-text);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
    color: var(--ld-text-muted);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--ld-input-bg);
    color: var(--ld-text);
    border: 1px solid var(--ld-border);
    border-radius: 6px;
    padding: 4px 8px;
}

table.dataTable {
    color: var(--ld-text);
    border-color: var(--ld-border) !important;
}

    table.dataTable thead th,
    table.dataTable thead td {
        color: var(--ld-text);
        border-bottom: 2px solid var(--ld-border) !important;
    }

    table.dataTable tbody th,
    table.dataTable tbody td {
        border-color: var(--ld-border) !important;
    }

    table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--ld-bg);
        color: var(--ld-text);
        box-shadow: none;
    }

    table.dataTable.table-hover > tbody > tr:hover > * {
        background-color: var(--ld-track-bg);
        color: var(--ld-text);
    }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--ld-text) !important;
    border-radius: 6px;
    border: 1px solid transparent;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--ld-track-bg) !important;
        border-color: var(--ld-border) !important;
        color: var(--ld-text) !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--ld-accent) !important;
        border-color: var(--ld-accent) !important;
        color: #fff !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        color: var(--ld-text-muted) !important;
        background: transparent !important;
        border-color: transparent !important;
        opacity: 0.5;
    }

/* A chart card's year/month filter selects + PDF/Excel export buttons, sitting
   above a Chart.js canvas (see CompanyDashboard/Opportunity.cshtml) - centers
   them as a compact toolbar row instead of full-width stacked .form-control
   fields. Each Year/Month select is wrapped in a labeled .ld-filter-field
   (label above the select), which is taller than the plain PDF/Excel
   .btn-group sitting beside it - align-items: flex-end lines their bottom
   edges up instead of centering the shorter button group against the label's
   extra height (which reads as the buttons floating "up" out of alignment). */
.ld-report-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

    .ld-report-toolbar .ld-filter-field {
        gap: 4px;
    }

    .ld-report-toolbar select.form-control {
        width: auto;
        min-width: 110px;
        display: inline-block;
    }

    .ld-report-toolbar .btn-group {
        height: 38px;
    }

/* ==========================================================================
   SweetAlert2 (Swal.fire popups) - same story as daterangepicker/DataTables/
   Select2 above: the plugin ships a hardcoded plain-white card with no theming
   hook, so every Swal (location-permission prompts, delete confirmations,
   bulk clock-in/out warnings, etc. across the whole app) rendered as a jarring
   white box with a generic icon, completely out of step with the ld-card look
   everywhere else. Reskinned with the same tokens/radius/shadow/pill-buttons;
   applies in both themes since it uses the ld-* variables directly, no
   [data-theme] scoping needed. ========================================================== */
.swal2-popup {
    background: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px -20px rgba(10, 11, 16, 0.45) !important;
    padding-bottom: 26px !important;
}

.swal2-title {
    color: var(--ld-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.swal2-html-container {
    color: var(--ld-text-muted) !important;
    font-size: 14px !important;
}

    .swal2-html-container b,
    .swal2-html-container strong {
        color: var(--ld-text) !important;
    }

.swal2-close {
    color: var(--ld-text-muted) !important;
}

    .swal2-close:hover {
        color: var(--ld-text) !important;
    }

.swal2-icon {
    border-color: currentColor !important;
}

.swal2-icon.swal2-warning {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

.swal2-icon.swal2-error {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: color-mix(in srgb, #10b981 40%, transparent) !important;
}

.swal2-icon.swal2-info {
    border-color: var(--ld-accent) !important;
    color: var(--ld-accent) !important;
}

.swal2-icon.swal2-question {
    border-color: var(--ld-text-muted) !important;
    color: var(--ld-text-muted) !important;
}

.swal2-actions {
    gap: 10px !important;
}

.swal2-styled.swal2-confirm {
    background: var(--ld-accent) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    box-shadow: 0 2px 6px rgba(20, 22, 31, 0.12) !important;
}

.swal2-styled.swal2-cancel {
    background: var(--ld-track-bg) !important;
    color: var(--ld-text) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-deny {
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px var(--ld-accent-soft) !important;
}

.swal2-timer-progress-bar {
    background: var(--ld-accent) !important;
}

.swal2-validation-message {
    background: var(--ld-track-bg) !important;
    color: var(--ld-text) !important;
}

.swal2-backdrop-show {
    background: rgba(10, 11, 16, 0.55) !important;
}

/* ==========================================================================
   Topbar backdrop
   --------------------------------------------------------------------------
   The topbar is a floating, rounded, fixed "pill" (top: 12px, see style.css's
   [pcoded-header-position="fixed"]), so page content scrolling underneath was
   visible in the gap above it, beside it and in its rounded corners. A fixed
   strip in the page background colour sits between the scrolling content and
   the header (z-index 1027 < header 1028 < sidebar 1030), so nothing shows
   behind the header while scrolling. Desktop only - below 992px the topbar
   isn't a floating pill. Height = 12px top offset + header + a small gap.
   ========================================================================== */
@media (min-width: 992px) {
    #pcoded::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--ld-header-backdrop-h, 100px);
        background: var(--ld-bg);
        z-index: 1027;
        pointer-events: none;
    }
}

/* ==========================================================================
   CRM module (Clients, Properties, Client Representatives) - new design
   --------------------------------------------------------------------------
   Lists, follow-up popup and create/edit forms. Built on the shared ld-* tokens
   (--ld-accent, --ld-card, --ld-border ...) so it follows the light/dark theme.
   Everything that would otherwise be global (.btn, .form-control, table ids,
   #custom-buttons) is scoped under .crm-page - the class on each CRM page's
   root element - so other .ld-page screens are unaffected.
   ========================================================================== */
/* ==========================================================================
   Page head
   ========================================================================== */
.cl-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 2px 18px;
}

.cl-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cl-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 60%, #a855f7));
    box-shadow: 0 8px 20px -8px var(--ld-accent);
}

.cl-title h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ld-text);
}

.cl-title p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

.cl-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   KPI strip
   ========================================================================== */
.cl-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.cl-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--ld-shadow);
}

.cl-kpi-icon {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: color-mix(in srgb, var(--k) 15%, var(--ld-card));
    color: var(--k);
}

.cl-kpi-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.cl-kpi-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ld-text);
}

@media (max-width: 1199px) {
    .cl-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .cl-kpis {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Filters
   ========================================================================== */
.cl-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.cl-filter {
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
    border-radius: 12px;
    padding: 12px 14px;
}

.cl-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    margin-bottom: 8px;
}

    .cl-filter-label i,
    .cl-filter-label .svg-inline--fa {
        color: var(--ld-accent);
    }

.cl-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.cl-filter .select2-container {
    width: 100% !important;
}

@media (max-width: 1199px) {
    .cl-filters {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Card toolbar (Include inactive + exports)
   ========================================================================== */
.cl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.cl-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cl-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ld-text);
    user-select: none;
}

    .cl-switch input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.cl-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ld-text-muted) 35%, var(--ld-card));
    transition: background-color 0.18s ease;
}

    .cl-switch-track::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        transition: transform 0.18s ease;
    }

.cl-switch input:checked + .cl-switch-track {
    background: var(--ld-accent);
}

    .cl-switch input:checked + .cl-switch-track::after {
        transform: translateX(18px);
    }

.cl-switch input:focus-visible + .cl-switch-track {
    box-shadow: 0 0 0 3px var(--ld-accent-soft);
}

/* DataTables export buttons group */
.crm-page #custom-buttons .dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crm-page #custom-buttons .dt-button {
    border: 1px solid var(--ld-border) !important;
    background: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .crm-page #custom-buttons .dt-button:hover {
        background: var(--ld-accent-soft) !important;
        border-color: var(--ld-accent) !important;
        color: var(--ld-accent) !important;
    }

/* ==========================================================================
   Buttons
   ========================================================================== */
.crm-page .btn,
.cl-modal .btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 8px 16px;
    border: none;
    box-shadow: 0 2px 6px rgba(20, 22, 31, 0.12);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

    .crm-page .btn:hover,
    .cl-modal .btn:hover {
        transform: translateY(-1px);
        filter: brightness(0.96);
        box-shadow: 0 6px 14px rgba(20, 22, 31, 0.18);
    }

    .crm-page .btn.btn-sm,
    .cl-modal .btn.btn-sm {
        padding: 6px 14px;
        border-radius: 8px;
    }

.crm-page .btn-ghost,
.cl-modal .btn-ghost {
    background: transparent;
    color: var(--ld-text);
    border: 1px solid var(--ld-border);
    box-shadow: none;
}

    .crm-page .btn-ghost:hover,
    .cl-modal .btn-ghost:hover {
        background: var(--ld-accent-soft);
        color: var(--ld-accent);
        box-shadow: none;
    }

.crm-page .btn-purple {
    background: #7c3aed;
    color: #fff;
}

/* ==========================================================================
   Inputs inside the page (native + select2 are themed globally)
   ========================================================================== */
.crm-page .form-control,
.cl-modal .form-control {
    border: 1px solid var(--ld-border);
    background: var(--ld-input-bg);
    color: var(--ld-text);
    border-radius: 10px;
}

    .crm-page .form-control:focus,
    .cl-modal .form-control:focus {
        border-color: var(--ld-accent);
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

/* ==========================================================================
   Table
   ========================================================================== */
.crm-page #clientsTable,
.crm-page #propertyTable,
.crm-page #representativeTable,
.crm-page #opportunityTable,
.crm-page #bidsTable,
.crm-page #bidsVersionTable,
.crm-page #projectTable {
    border-collapse: separate;
    border-spacing: 0;
}

    .crm-page #clientsTable thead th,
    .crm-page #propertyTable thead th,
    .crm-page #representativeTable thead th,
    .crm-page #opportunityTable thead th,
    .crm-page #bidsTable thead th,
    .crm-page #bidsVersionTable thead th,
    .crm-page #projectTable thead th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        white-space: nowrap;
    }

    .crm-page #clientsTable tbody td,
    .crm-page #propertyTable tbody td,
    .crm-page #representativeTable tbody td,
    .crm-page #opportunityTable tbody td,
    .crm-page #bidsTable tbody td,
    .crm-page #bidsVersionTable tbody td,
    .crm-page #projectTable tbody td {
        vertical-align: middle;
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 13px;
        color: var(--ld-text);
    }

/* Horizontal scroller around just the <table> (see keepTableControlsFixed in site.js), so the
   "Show entries" / search / info / pagination rows stay put while the columns scroll. */
.dt-scroll-x {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dt-scroll-x > table {
    margin-bottom: 0 !important;
}

.cl-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.cl-muted {
    color: var(--ld-text-muted);
}

.cl-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--ld-accent) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

    .cl-link:hover {
        text-decoration: underline !important;
    }

    .cl-link i,
    .cl-link .svg-inline--fa {
        font-size: 11px;
        opacity: 0.8;
    }

.cl-org {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
    text-align: left;
}

.cl-avatar {
    --h: 220;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: hsl(var(--h) 65% 42%);
    background: hsl(var(--h) 80% 55% / 0.16);
}

    .cl-avatar::before {
        content: attr(data-initials);
    }

.cl-org-name {
    font-weight: 700;
    color: var(--ld-text);
    line-height: 1.3;
}

.cl-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
}

.cl-chip--plain {
    background: var(--ld-track-bg);
    color: var(--ld-text);
    border: 1px solid var(--ld-border);
}

.cl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    max-width: 240px;
    max-height: 56px;
    overflow: hidden;
}

.cl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

    .cl-pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

.cl-pill--ok {
    color: #10b981;
    background: color-mix(in srgb, #10b981 15%, var(--ld-card));
}

.cl-pill--bad {
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 14%, var(--ld-card));
}

.cl-pill--soft {
    color: #3b82f6;
    background: color-mix(in srgb, #3b82f6 14%, var(--ld-card));
}

.cl-pill--off {
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

.cl-when {
    white-space: nowrap;
    font-weight: 600;
    cursor: help;
}

/* size (34px / 12.5px) comes from the dropdown tokens - see DROPDOWN SYSTEM */
.cl-select {
    min-width: 128px;
    font-weight: 600;
}

.cl-actions {
    display: inline-flex;
    gap: 6px;
}

.cl-icon-btn {
    --c: var(--ld-accent);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none !important;
    color: var(--c) !important;
    background: color-mix(in srgb, var(--c) 14%, var(--ld-card));
    transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

    .cl-icon-btn:hover {
        transform: translateY(-1px);
        background: var(--c);
        color: #fff !important;
    }

.cl-icon-btn--property {
    --c: #7c3aed;
}

.cl-icon-btn--rep {
    --c: #10b981;
}

.cl-icon-btn--follow {
    --c: #0ea5e9;
}

.cl-empty {
    padding: 36px 0;
    text-align: center;
    color: var(--ld-text-muted);
}

    .cl-empty i,
    .cl-empty .svg-inline--fa {
        display: block;
        font-size: 30px;
        margin-bottom: 10px;
        opacity: 0.6;
    }

    /* a block <svg> is not centred by text-align like the <i> glyph was */
    .cl-empty .svg-inline--fa {
        margin-left: auto;
        margin-right: auto;
    }

/* ==========================================================================
   Follow-up modal
   ========================================================================== */
.cl-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: var(--ld-card);
    color: var(--ld-text);
    box-shadow: 0 24px 60px -20px rgba(10, 11, 16, 0.45);
}

.cl-modal .modal-header {
    background: linear-gradient(135deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 70%, #a855f7));
    color: #fff;
    border-bottom: none;
    padding: 18px 22px;
    display: flex;
    align-items: center;
}

    .cl-modal .modal-header .modal-title {
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cl-modal .modal-header .close {
        color: #fff;
        opacity: 0.9;
        text-shadow: none;
        background: rgba(255, 255, 255, 0.18);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
        margin: 0 0 0 auto;
        float: none;
        flex: none;
        font-size: 20px;
    }

        .cl-modal .modal-header .close:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.3);
        }

.cl-modal .modal-body {
    padding: 22px;
}

.cl-modal .modal-footer {
    border-top: 1px solid var(--ld-border);
    padding: 14px 22px;
}

.cl-modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.cl-meta-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    margin-right: 8px;
}

.cl-modal .nav-tabs {
    border: none;
    background: var(--ld-track-bg);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    display: inline-flex;
    flex-wrap: wrap;
}

    .cl-modal .nav-tabs .nav-link {
        border: none !important;
        border-radius: 9px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ld-text-muted);
        background: transparent;
    }

        .cl-modal .nav-tabs .nav-link.active {
            background: var(--ld-card) !important;
            color: var(--ld-accent) !important;
            box-shadow: 0 2px 8px rgba(20, 22, 31, 0.14);
        }

.cl-modal label.cl-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    margin-bottom: 6px;
}

.cl-modal .form-group {
    margin-bottom: 16px;
}

.cl-modal .input-group-text {
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
    border: 1px solid var(--ld-border);
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.cl-modal .input-group > .form-control {
    border-radius: 0 10px 10px 0;
}

.cl-modal #followupsTable {
    font-size: 12.5px;
}

.cl-service-tile {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 18px 12px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
    font-weight: 700;
    font-size: 13px;
}

    .cl-service-tile i,
    .cl-service-tile .svg-inline--fa {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

    /* Font Awesome all.js renders this icon as an <svg>: pad it so the glyph keeps its size inside the tile
   (svg.svg-inline--fa:not(:root) outranks Font Awesome's own box-sizing: content-box rule) */
    .cl-service-tile svg.svg-inline--fa:not(:root) {
        box-sizing: border-box;
        padding: calc((40px - 1em) / 2);
    }

/* ==========================================================================
   Create / Edit client form
   ========================================================================== */
.cl-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ld-text-muted) !important;
    text-decoration: none !important;
    margin: 0 2px 10px;
}

    .cl-back:hover {
        color: var(--ld-accent) !important;
    }

.cf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1099px) {
    .cf-layout {
        grid-template-columns: 1fr;
    }
}

.cf-side {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1099px) {
    .cf-side {
        position: static;
    }
}

.cf-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ld-border);
}

.cf-section-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
}

.cf-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ld-text);
    line-height: 1.2;
}

.cf-section-sub {
    font-size: 12px;
    color: var(--ld-text-muted);
    margin-top: 2px;
}

.cf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.cf-span-2 {
    grid-column: span 2;
}

@media (max-width: 767px) {
    .cf-grid {
        grid-template-columns: 1fr;
    }

    .cf-span-2 {
        grid-column: auto;
    }
}

.cf-field label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    margin-bottom: 6px;
}

.cf-field .form-control {
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
}

.cf-field textarea.form-control {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
}

.cf-field .select2-container {
    width: 100% !important;
}

.cf-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #ef4444;
}

    .cf-error:empty {
        display: none;
    }

.cf-alert {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

    .cf-alert:empty,
    .cf-alert.validation-summary-valid {
        display: none;
    }

    .cf-alert ul {
        margin: 0;
        padding-left: 18px;
    }

.cf-phone {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
}

.cf-side-card {
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--ld-shadow);
}

.cf-side-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    margin-bottom: 12px;
}

.cf-side-card .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cf-side-card .btn + .btn {
        margin-top: 8px;
    }

.cf-side-hint {
    font-size: 12.5px;
    color: var(--ld-text-muted);
    margin: 0 0 14px;
}

.cf-link-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none !important;
    color: var(--ld-text) !important;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .cf-link-btn + .cf-link-btn {
        margin-top: 8px;
    }

    .cf-link-btn:hover {
        border-color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

    .cf-link-btn i,
    .cf-link-btn > .svg-inline--fa {
        width: 30px;
        height: 30px;
        flex: none;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: var(--c, var(--ld-accent));
        background: color-mix(in srgb, var(--c, var(--ld-accent)) 15%, var(--ld-card));
    }

    /* Font Awesome all.js renders this icon as an <svg>: pad it so the glyph keeps its size inside the tile
   (svg.svg-inline--fa:not(:root) outranks Font Awesome's own box-sizing: content-box rule) */
    .cf-link-btn > svg.svg-inline--fa:not(:root) {
        box-sizing: border-box;
        padding: calc((30px - 1em) / 2);
    }

.cl-switch {
    position: relative;
}

/* --- Opportunities ------------------------------------------------------- */
.crm-page .cl-title-sm {
    font-size: 15px;
    font-weight: 800;
    color: var(--ld-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .crm-page .cl-title-sm i,
    .crm-page .cl-title-sm .svg-inline--fa {
        color: var(--ld-accent);
    }

.crm-page .op-insights {
    margin-bottom: 20px;
}

.crm-page .op-insights-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

/* Period selector: segmented control */
.crm-page .op-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

    .crm-page .op-seg button {
        border: none;
        background: transparent;
        color: var(--ld-text-muted);
        font-size: 12.5px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 9px;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .crm-page .op-seg button:hover {
            color: var(--ld-text);
        }

        .crm-page .op-seg button.is-active {
            background: var(--ld-card);
            color: var(--ld-accent);
            box-shadow: 0 2px 8px rgba(20, 22, 31, 0.14);
        }

.crm-page .op-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.crm-page .op-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-page .op-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1399px) {
    .crm-page .op-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1099px) {
    .crm-page .op-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .crm-page .op-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Insight card: tinted icon tile + accent edge, shares .cl-kpi-icon */
.crm-page .op-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 18px 18px 18px 22px;
    overflow: hidden;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 14px;
    box-shadow: var(--ld-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .crm-page .op-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--k);
    }

    .crm-page .op-card:hover {
        transform: translateY(-2px);
    }

.crm-page .op-body {
    flex: 1;
    min-width: 0;
}

.crm-page .op-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.crm-page .op-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ld-text);
}

.crm-page .op-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ld-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-page .op-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

    .crm-page .op-sub b {
        color: var(--ld-text);
    }

.crm-page .op-progress {
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--ld-track-bg);
    overflow: hidden;
}

    .crm-page .op-progress span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--k);
        transition: width 0.4s ease;
    }

.crm-page .op-mini {
    display: flex;
    gap: 22px;
    margin-top: 6px;
}

    .crm-page .op-mini div {
        display: flex;
        flex-direction: column;
    }

    .crm-page .op-mini b {
        font-size: 24px;
        font-weight: 800;
        line-height: 1.15;
        color: var(--ld-text);
    }

    .crm-page .op-mini span {
        font-size: 12px;
        color: var(--ld-text-muted);
    }

.crm-page .op-statuses {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
}

.crm-page .op-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ld-text);
}

    .crm-page .op-status-row span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crm-page .op-status-row b {
        flex: none;
        min-width: 28px;
        text-align: center;
        padding: 1px 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--k) 15%, var(--ld-card));
        color: var(--k);
    }

/* Quick-insights strip */
.crm-page .op-insight-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--ld-track-bg);
    border: 1px dashed var(--ld-border);
}

.crm-page .op-insight-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--ld-text);
}

    .crm-page .op-insight-title i,
    .crm-page .op-insight-title .svg-inline--fa {
        color: var(--ld-accent);
        margin-right: 6px;
    }

.crm-page .op-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-page .op-tag {
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--t);
    background: color-mix(in srgb, var(--t) 15%, var(--ld-card));
}

.crm-page .op-tag--warn { --t: #f59e0b; }
.crm-page .op-tag--bad { --t: #ef4444; }
.crm-page .op-tag--info { --t: #0ea5e9; }
.crm-page .op-tag--muted { --t: #94a3b8; }
.crm-page .op-tag--ok { --t: #10b981; }

/* Table cells */
.crm-page .op-code {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ld-text);
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.crm-page .op-person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.crm-page .op-photo {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 12px;
}

    .crm-page .op-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.crm-page .cl-icon-btn--bid {
    --c: #f59e0b;
}

.crm-page .cl-icon-btn--off {
    --c: var(--ld-text-muted);
    opacity: 0.55;
    cursor: not-allowed;
}

    .crm-page .cl-icon-btn--off:hover {
        transform: none;
        background: color-mix(in srgb, var(--c) 14%, var(--ld-card));
        color: var(--c) !important;
    }

/* Field + inline "add new" button (Opportunities Create/Edit: Source, Client) */
.crm-page .cf-with-btn {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

    .crm-page .cf-with-btn > .select2-container,
    .crm-page .cf-with-btn > select {
        flex: 1;
        min-width: 0;
    }

.crm-page .cf-add-btn {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    color: #fff !important;
    background: var(--ld-accent);
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.12s ease;
}

    .crm-page .cf-add-btn:hover {
        filter: brightness(0.94);
        transform: translateY(-1px);
    }

/* --- Bids -------------------------------------------------------------- */
.crm-page .cl-icon-btn--opportunity {
    --c: #f59e0b;
}

.crm-page .cl-icon-btn--version {
    --c: #ef4444;
}

.crm-page .cl-icon-btn--clone {
    --c: #10b981;
}

/* --- Projects ------------------------------------------------------------ */
.crm-page .cl-icon-btn--dashboard {
    --c: #0ea5e9;
}

.crm-page .cl-icon-btn--budget {
    --c: #06b6d4;
}

.crm-page .cl-icon-btn--consumption {
    --c: #ef4444;
}

.crm-page .cl-icon-btn--access {
    --c: #f59e0b;
}

.crm-page .cl-icon-btn--notes {
    --c: #7c3aed;
}

.crm-page .cl-icon-btn--workorder {
    --c: #3b82f6;
}

.crm-page .cl-icon-btn--upload {
    --c: #ec4899;
}

.crm-page .cl-icon-btn--tracking {
    --c: #64748b;
}

.crm-page .cl-icon-btn--gantt {
    --c: #22c55e;
}

/* Projects can have up to ~9 role-dependent action buttons per row - let them wrap
   instead of forcing the Action column absurdly wide. */
.crm-page #projectTable .cl-actions {
    flex-wrap: wrap;
    max-width: 180px;
}

/* Inline project-status select is upgraded to select2 in Projects/Index.cshtml
   (drawCallback) so its open dropdown is fully custom-styled instead of the
   OS-native popup - picks up the app-wide select2 theming (see ~line 1340). */
.crm-page .project-status-dropdown + .select2-container {
    min-width: 150px;
}

/* Inline bid-status select: same size as other cl-select boxes, colour-coded by status */
.crm-page .bid-status-dropdown {
    min-width: 150px;
    font-weight: 700;
    border: 1px solid transparent;
    color: var(--s);
    background-color: color-mix(in srgb, var(--s) 15%, var(--ld-card));
}

    .crm-page .bid-status-dropdown:focus {
        border-color: var(--s);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--s) 25%, transparent);
    }

.crm-page .bid-status-not-started { --s: #94a3b8; }
.crm-page .bid-status-pending { --s: #f59e0b; }
.crm-page .bid-status-awarded { --s: #10b981; }
.crm-page .bid-status-lost { --s: #ef4444; }

/* --- Bid Versions (BidVersion/Index) ------------------------------------ */

/* Email/signature history tables live inside .cl-modal, a sibling of .crm-page,
   not a descendant of it, so they need their own (unscoped-to-crm-page) rules. */
.cl-modal #emailHistoryTable,
.cl-modal #signatureHistoryTable {
    border-collapse: separate;
    border-spacing: 0;
}

    .cl-modal #emailHistoryTable thead th,
    .cl-modal #signatureHistoryTable thead th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        white-space: nowrap;
    }

    .cl-modal #emailHistoryTable tbody td,
    .cl-modal #signatureHistoryTable tbody td {
        vertical-align: middle;
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 13px;
        color: var(--ld-text);
    }

/* Toast used for copy/save confirmations - appended straight to <body>, so it must
   stay unscoped (outside both .crm-page and .cl-modal). */
.custom-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ld-card);
    color: var(--ld-text);
    border: 1px solid var(--ld-border);
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 12px 32px -12px rgba(10, 11, 16, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s ease;
    z-index: 9999;
}

    .custom-toast.show {
        opacity: 1;
        bottom: 50px;
    }

/* Signed-PDF download button gets a soft pulse once a signed copy exists */
.cl-icon-btn.signed-indicator {
    animation: bidv-pulse-green 2s infinite;
}

@keyframes bidv-pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
}

/* Warning banners inside the Send Proposal modal (email-already-sent / already-signed) */
.bidv-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
}

.bidv-alert--warn {
    color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 12%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

.bidv-alert--danger {
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

/* Signer/document info rows in the Signature Details modal */
.bidv-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ld-border);
    font-size: 13px;
}

    .bidv-detail-row:last-child {
        border-bottom: none;
    }

    .bidv-detail-row span {
        color: var(--ld-text-muted);
        flex: none;
    }

    .bidv-detail-row b {
        color: var(--ld-text);
        font-weight: 600;
        text-align: right;
    }

/* --- BidVersion Calculators ---------------------------------------------- */

/* Small confirm popups (delete / create-project) - no gradient header, just a
   plain card with a title icon coloured to match the action (red for delete). */
.cl-modal.cl-modal--plain .modal-header {
    background: transparent;
    color: var(--ld-text);
    border-bottom: 1px solid var(--ld-border);
    padding: 16px 20px;
}

    .cl-modal.cl-modal--plain .modal-header .modal-title {
        color: #ef4444;
    }

    .cl-modal.cl-modal--plain .modal-header .close {
        color: var(--ld-text-muted);
        background: transparent;
    }

        .cl-modal.cl-modal--plain .modal-header .close:hover {
            color: var(--ld-text);
            background: var(--ld-track-bg);
        }

.crm-page .bidv-total-card {
    margin-bottom: 20px;
    width: fit-content;
    min-width: 260px;
    max-width: 100%;
}

    .crm-page .bidv-total-card .op-value {
        font-size: clamp(18px, 2.4vw, 28px);
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

/* One calculator category (Stone, Asphalt, ...) */
.crm-page .bidv-calc-section {
    border-top: 3px solid var(--cc, var(--ld-accent));
}

.crm-page .bidv-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.crm-page .bidv-calc-item {
    position: relative;
    min-width: 0;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
    border-radius: 14px;
    padding: 16px 16px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .crm-page .bidv-calc-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -12px rgba(10, 11, 16, 0.4);
    }

.crm-page .bidv-calc-item-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--cc, var(--ld-accent));
    background: color-mix(in srgb, var(--cc, var(--ld-accent)) 15%, var(--ld-card));
}

.crm-page .bidv-calc-item-price {
    font-size: 19px;
    font-weight: 800;
    color: var(--ld-text);
    padding-right: 40px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.crm-page .bidv-calc-item-name {
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ld-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-page .bidv-calc-item-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ld-text-muted);
}

    .crm-page .bidv-calc-item-meta b {
        color: var(--ld-text);
    }

.crm-page .bidv-calc-item-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--ld-border);
}

    .crm-page .bidv-calc-item-footer a {
        flex: 1;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--ld-text-muted);
        text-decoration: none !important;
        padding: 4px 2px;
        border-radius: 8px;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .crm-page .bidv-calc-item-footer a:hover {
            color: var(--cc, var(--ld-accent));
            background: color-mix(in srgb, var(--cc, var(--ld-accent)) 12%, transparent);
        }

        .crm-page .bidv-calc-item-footer a:last-child {
            flex: none;
            width: 30px;
            color: var(--ld-text-muted);
        }

            .crm-page .bidv-calc-item-footer a:last-child:hover {
                color: #ef4444;
                background: color-mix(in srgb, #ef4444 12%, transparent);
            }

/* ==========================================================================
   Calculator pages (Views/Estimations/*Calculator.cshtml, *Proposal.cshtml)
   --------------------------------------------------------------------------
   These pages are built from many collapsible Bootstrap .card sections
   (Area, Products, Labour, Trucking, Dumping, Equipment, Cost Summary,
   Proposal Pricing ...), most of whose row-level content (one card per
   product/labour/trucking/... entry) is generated at runtime by page-specific
   JS (e.g. wwwroot/Tenant/js/StoneCalculator.js) reusing these same
   Bootstrap classes. So this reskins the classes themselves (scoped to
   .calc-page) instead of each page's markup, and applies equally to
   whatever the JS injects. The collapse/expand behaviour (script.js:
   .open-card-option / .minimize-card / .full-card / .reload-card, all
   walking up to the nearest .card / .card-block) is unchanged, since none
   of those class names are touched here or in the markup.
   ========================================================================== */
.calc-page {
    padding: 8px 24px 32px;
}

    @media (max-width: 576px) {
        .calc-page {
            padding: 8px 14px 24px;
        }
    }

.calc-page .card {
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 14px;
    box-shadow: var(--ld-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}

.calc-page .card.table-card {
    border-top: 3px solid var(--cc, var(--ld-accent));
}

.calc-page .card-header.bg-dark,
.calc-page .card-header.bg-secondary {
    background: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-bottom: 1px solid var(--ld-border);
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .calc-page .card-header h3,
    .calc-page .card-header h4 {
        margin: 0;
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ld-text);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .calc-page .card-header h3 i,
        .calc-page .card-header h4 i,
        .calc-page .card-header h3 .svg-inline--fa,
        .calc-page .card-header h4 .svg-inline--fa {
            color: var(--cc, var(--ld-accent));
        }

.calc-page .card-header-right,
.calc-page .card-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.calc-page .card-block,
.calc-page .card-body {
    background: transparent;
    color: var(--ld-text);
    padding: 16px 18px;
}

.calc-page .pagebody > .card-body {
    padding: 4px 0 0;
}

.calc-page .pagebody > .card-header {
    display: none;
}

/* Projects list cards (Consumption / dispatch Index pages) keep their header:
   it carries Total Consumed, Add New and Refresh, not just a duplicate title. */
.prj-page .pagebody > .card-header.bg-dark:has(> .card-header-right > .btn) {
    display: flex;
}

.calc-page .card-option {
    display: flex !important;
    align-items: center;
    gap: 2px;
}

    .calc-page .card-option li i,
    .calc-page .card-option li .svg-inline--fa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        color: var(--ld-text-muted) !important;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    /* Font Awesome all.js renders this icon as an <svg>: pad it so the glyph keeps its size inside the tile
   (svg.svg-inline--fa:not(:root) outranks Font Awesome's own box-sizing: content-box rule) */
    .calc-page .card-option li svg.svg-inline--fa:not(:root) {
        box-sizing: border-box;
        padding: calc((26px - 1em) / 2);
    }

        .calc-page .card-option li i:hover,
        .calc-page .card-option li .svg-inline--fa:hover {
            background: var(--ld-track-bg);
            color: var(--ld-text) !important;
        }

.calc-page .calc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--p);
    background: color-mix(in srgb, var(--p) 16%, var(--ld-card));
}

.calc-page .calc-pill--ok { --p: #10b981; }
.calc-page .calc-pill--amber { --p: #f59e0b; }
.calc-page .calc-pill--blue { --p: #3b82f6; }
.calc-page .calc-pill--orange { --p: #fb923c; }
.calc-page .calc-pill--purple { --p: #a855f7; }
.calc-page .calc-pill--teal { --p: #14b8a6; }
.calc-page .calc-pill--bad { --p: #ef4444; }

/* Project Dashboard: modern gradient progress bar, replaces the flat Bootstrap
   .progress/.progress-bar (light-gray track that didn't fit the dark theme). */
.calc-page .cl-progress {
    position: relative;
    height: 34px;
    border-radius: 10px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
    overflow: hidden;
    margin: 14px 0;
}

.calc-page .cl-progress-bar {
    height: 100%;
    min-width: 2px;
    border-radius: 9px 0 0 9px;
    transition: width 0.3s ease;
}

.calc-page .cl-progress-bar.is-ok { background: linear-gradient(135deg, #10b981, #059669); }
.calc-page .cl-progress-bar.is-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.calc-page .cl-progress-bar.is-bad { background: linear-gradient(135deg, #ef4444, #dc2626); }

.calc-page .cl-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ld-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small operator pill (the "=" / "+" between Cost / Trucking / Dumping totals) */
.calc-page .calc-pill--op {
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
    padding: 5px 9px;
}

.calc-page .calc-highlight {
    border-radius: 10px;
    border-left: 4px solid var(--p, var(--ld-accent));
    background: color-mix(in srgb, var(--p, var(--ld-accent)) 10%, var(--ld-track-bg));
    padding: 14px 4px;
    margin: 0 2px 14px;
}

    .calc-page .calc-highlight:last-child {
        margin-bottom: 0;
    }

.calc-page .calc-highlight--purple { --p: #a855f7; }
.calc-page .calc-highlight--green { --p: #10b981; }
.calc-page .calc-highlight--orange { --p: #fb923c; }
.calc-page .calc-highlight--teal { --p: #14b8a6; }
.calc-page .calc-highlight--amber { --p: #f59e0b; }

/* Consumption-tab navigation tiles (Views/Projects/Consumption.cshtml @functions
   Render*InfoBox helpers) - clickable card linking to that category's records.
   Replaces the old solid-pastel-background/black-text "small-box" look with a
   dark card + tinted icon + accent left border, keeping each category's own
   color as the accent (--k) instead of a full block fill. */
.calc-page .cl-nav-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
    border-left: 4px solid var(--k, var(--ld-accent));
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .calc-page .cl-nav-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -12px rgba(10, 11, 16, 0.4);
    }

.calc-page .cl-nav-tile-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: color-mix(in srgb, var(--k, var(--ld-accent)) 18%, var(--ld-card));
    color: var(--k, var(--ld-accent));
}

.calc-page .cl-nav-tile-body {
    min-width: 0;
    flex: 1;
}

.calc-page .cl-nav-tile-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calc-page .cl-nav-tile-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--ld-text);
    margin-top: 2px;
}

.calc-page .cl-nav-tile-meta {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ld-text-muted);
    margin-top: 1px;
}

.calc-page .form-control {
    background: var(--ld-input-bg);
    border: 1px solid var(--ld-border);
    color: var(--ld-text);
    border-radius: 8px;
}

    .calc-page .form-control:focus {
        border-color: var(--ld-accent);
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

    .calc-page .form-control:disabled,
    .calc-page .form-control[disabled] {
        background: var(--ld-track-bg);
        color: var(--ld-text-muted);
        opacity: 1;
    }

.calc-page .input-group-text {
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
    border: 1px solid var(--ld-border);
}

.calc-page label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.calc-page .btn {
    border-radius: 9px;
    font-weight: 600;
}

.calc-page .btn-light {
    background: var(--ld-accent) !important;
    border-color: var(--ld-accent) !important;
    color: #fff !important;
}

    .calc-page .btn-light:hover {
        filter: brightness(0.94);
    }

.calc-page .btn-tool {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: none;
    border-radius: 8px;
    background: var(--ld-track-bg);
    color: var(--ld-text-muted) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .calc-page .btn-tool:hover {
        background: var(--ld-accent-soft);
        color: var(--ld-accent) !important;
    }

    /* Section collapse toggles use a single fa-plus icon that rotates into an "x"
       when expanded, instead of stacking a separate fa-plus/fa-minus icon pair
       (which had no CSS/JS wiring anywhere to hide the inactive one). */
    .calc-page .btn-tool i,
    .calc-page .btn-tool .svg-inline--fa {
        transition: transform 0.2s ease;
    }

    .calc-page .btn-tool:not(.collapsed) i,
    .calc-page .btn-tool:not(.collapsed) .svg-inline--fa {
        transform: rotate(45deg);
    }

.calc-page .card.StoneRowCard,
.calc-page [class$="RowCard"] {
    border-top: none;
    border: 1px solid var(--ld-border);
}

    .calc-page .card.StoneRowCard > .card-header,
    .calc-page [class$="RowCard"] > .card-header {
        background: color-mix(in srgb, var(--cc, var(--ld-accent)) 22%, var(--ld-card)) !important;
        color: var(--ld-text) !important;
        border-bottom: 1px solid var(--ld-border);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        /* row headers come from JS templates with a Bootstrap p-1 (4px, !important)
           utility class baked in (e.g. StoneCalculator.js, AsphaltCalculator.js) -
           override it so the title/pills/buttons aren't crammed against the border */
        padding: 10px 14px !important;
    }

        .calc-page .card.StoneRowCard > .card-header .card-title,
        .calc-page [class$="RowCard"] > .card-header .card-title {
            color: var(--ld-text) !important;
            font-size: 13.5px;
            font-weight: 700;
            float: none;
            margin: 0;
        }

        .calc-page .card.StoneRowCard > .card-header .card-tools,
        .calc-page [class$="RowCard"] > .card-header .card-tools {
            float: none;
            margin-right: 0;
        }

.calc-page #aiAnalysisContainer .card.bg-success,
.calc-page #aiAnalysisContainer .card.bg-warning,
.calc-page #aiAnalysisContainer .card.bg-info {
    border: none;
    color: #fff !important;
}

.calc-page #aiAnalysisContainer .card.bg-success { background: #10b981 !important; }
.calc-page #aiAnalysisContainer .card.bg-warning { background: #f59e0b !important; }
.calc-page #aiAnalysisContainer .card.bg-info { background: #0ea5e9 !important; }

.calc-page .alert-info {
    background: color-mix(in srgb, #0ea5e9 14%, var(--ld-card));
    border-color: color-mix(in srgb, #0ea5e9 30%, transparent);
    color: var(--ld-text);
}

.calc-page table.table {
    color: var(--ld-text);
}

    .calc-page table.table thead.thead-light th {
        background: var(--ld-track-bg);
        color: var(--ld-text-muted);
        border-color: var(--ld-border);
    }

    .calc-page table.table td,
    .calc-page table.table th {
        border-color: var(--ld-border);
    }

    .calc-page table.table tr.table-primary td {
        background: var(--ld-accent-soft);
    }

    .calc-page table.table tr.table-success td {
        background: color-mix(in srgb, #10b981 14%, var(--ld-card));
    }

/* ==========================================================================
   Projects module (every /Projects page and its sub-modules: the Budget.. / Consumption..
   record pages, Project Daily Notes, Gantt / Tracking, Create/Edit/Access/
   Work Order/Upload Picture)
   --------------------------------------------------------------------------
   Every page root carries .prj-page (next to ld-page crm-page, plus calc-page
   on the summary pages), so everything below is scoped and cannot leak into
   other modules. Section cards reuse the calc-page ".card.table-card" +
   ".card-header.bg-dark" pattern with a per-section accent (--cc).
   ========================================================================== */

/* ---------- Shell card that holds the tab bar + page content ---------- */
.prj-page .prj-shell {
    overflow: visible;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 16px;
    box-shadow: var(--ld-shadow);
    padding: 16px 18px 4px;
    margin-bottom: 24px;
}

    .prj-page .prj-shell > .card-body {
        padding: 0;
    }

@media (max-width: 576px) {
    .prj-page .prj-shell {
        padding: 12px 12px 2px;
    }
}

/* ---------- Tab bars (_BudgetNavigation, _Consumption*Navigation) ---------- */
.prj-tabs {
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
}

    .prj-tabs .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        margin: 0;
        padding: 4px;
        overflow-x: auto;
        scrollbar-width: thin;
        background: var(--ld-track-bg);
        border: 1px solid var(--ld-border) !important;
        border-radius: 12px;
    }

    .prj-tabs .nav-tabs > .nav-item {
        flex: none;
        margin: 0;
    }

        .prj-tabs .nav-tabs > .nav-item > .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border: none !important;
            border-radius: 9px;
            background: transparent !important;
            color: var(--ld-text-muted) !important;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.3;
            white-space: nowrap;
            cursor: pointer;
            transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }

            .prj-tabs .nav-tabs > .nav-item > .nav-link i,
            .prj-tabs .nav-tabs > .nav-item > .nav-link .svg-inline--fa {
                font-size: 12px;
                opacity: 0.85;
            }

            .prj-tabs .nav-tabs > .nav-item > .nav-link:hover {
                color: var(--ld-text) !important;
                background: color-mix(in srgb, var(--ld-card) 55%, transparent) !important;
            }

            .prj-tabs .nav-tabs > .nav-item > .nav-link:focus-visible {
                outline: none;
                box-shadow: 0 0 0 3px var(--ld-accent-soft);
            }

            .prj-tabs .nav-tabs > .nav-item > .nav-link.active {
                background: var(--ld-card) !important;
                color: var(--ld-accent) !important;
                box-shadow: 0 2px 8px rgba(20, 22, 31, 0.12);
            }

            /* tabs without a destination page yet (kept non-navigating, as before) */
            .prj-tabs .nav-tabs > .nav-item > .nav-link.is-disabled {
                opacity: 0.45;
                cursor: not-allowed;
                box-shadow: none;
            }

                .prj-tabs .nav-tabs > .nav-item > .nav-link.is-disabled:hover {
                    background: transparent !important;
                    color: var(--ld-text-muted) !important;
                }

/* Second level (category) tabs: quieter underline style */
.prj-tabs--sub .nav-tabs {
    gap: 2px;
    padding: 0;
    background: transparent;
    border: none !important;
    border-bottom: 1px solid var(--ld-border) !important;
    border-radius: 0;
}

    .prj-tabs--sub .nav-tabs > .nav-item > .nav-link {
        padding: 9px 14px 10px;
        border-radius: 8px 8px 0 0;
        border-bottom: 2px solid transparent !important;
        margin-bottom: -1px;
    }

        .prj-tabs--sub .nav-tabs > .nav-item > .nav-link.active {
            background: transparent !important;
            box-shadow: none;
            border-bottom-color: var(--ld-accent) !important;
        }

/* ---------- Section cards ---------- */
/* style.css absolutely-positions .card-header-right (top:3px), which overlaps
   the title as soon as the header wraps - flow it inside the flex header. */
.prj-page .card .card-header .card-header-right {
    position: static;
    float: none;
    top: auto;
    right: auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

    .prj-page .card .card-header .card-header-right i,
    .prj-page .card .card-header .card-header-right .svg-inline--fa {
        margin: 0;
        color: inherit;
        font-size: inherit;
        line-height: 1;
    }

.prj-page .card .card-header h4 {
    min-width: 0;
    word-break: break-word;
}

.prj-page .card-header .calc-pill {
    white-space: normal;
    text-align: right;
}

.prj-page .card-header .btn-primary.btn-sm {
    padding: 6px 12px;
    font-size: 12.5px;
}

.prj-page .card.table-card:last-child {
    margin-bottom: 14px;
}

/* chart legend next to the summary doughnuts */
.prj-page .prj-legend {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    display: grid;
    gap: 6px;
    color: var(--ld-text);
}

    .prj-page .prj-legend li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 10px;
        background: var(--ld-track-bg);
        font-size: 13px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

        .prj-page .prj-legend li i,
        .prj-page .prj-legend li .svg-inline--fa {
            font-size: 10px;
            flex: none;
        }

/* Navigation tiles keep the legacy `.small-box.btn` classes for their click
   handlers - neutralise Bootstrap's .btn centring/nowrap on them. */
.prj-page .cl-nav-tile.btn {
    text-align: left;
    white-space: normal;
    font-weight: inherit;
    box-shadow: none;
    width: 100%;
}

.prj-page .cl-nav-tile:not(.btn) {
    cursor: default;
}

    .prj-page .cl-nav-tile:not(.btn):hover {
        transform: none;
        box-shadow: none;
    }

/* ---------- Static tables (budget line items etc.) ---------- */
.prj-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.prj-page .prj-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ld-text);
    font-size: 13px;
}

    .prj-page .prj-table thead th {
        background: var(--ld-track-bg);
        color: var(--ld-text-muted);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
        border: none;
        border-bottom: 1px solid var(--ld-border);
        padding: 11px 12px;
        vertical-align: middle;
    }

        .prj-page .prj-table thead th:first-child {
            border-radius: 10px 0 0 0;
        }

        .prj-page .prj-table thead th:last-child {
            border-radius: 0 10px 0 0;
        }

    .prj-page .prj-table tbody td {
        border: none;
        border-bottom: 1px solid var(--ld-border);
        padding: 11px 12px;
        vertical-align: middle;
        font-variant-numeric: tabular-nums;
    }

    .prj-page .prj-table tbody tr:hover > td {
        background: color-mix(in srgb, var(--ld-accent) 5%, var(--ld-card));
    }

    .prj-page .prj-table tbody tr.prj-total-row > td {
        background: var(--ld-accent-soft);
        color: var(--ld-text);
        font-weight: 700;
        border-bottom: none;
    }

        .prj-page .prj-table tbody tr.prj-total-row > td:first-child {
            border-radius: 0 0 0 10px;
        }

        .prj-page .prj-table tbody tr.prj-total-row > td:last-child {
            border-radius: 0 0 10px 0;
        }

    .prj-page .prj-table td:last-child .cl-icon-btn + .cl-icon-btn {
        margin-left: 4px;
    }

/* ---------- DataTables grids on the sub-module record pages ---------- */
.prj-page table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

    .prj-page table.dataTable thead th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        background: var(--ld-track-bg);
        white-space: nowrap;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .prj-page table.dataTable tbody td {
        vertical-align: middle;
        font-size: 13px;
        color: var(--ld-text);
        border-left: none !important;
        border-right: none !important;
    }

    .prj-page table.dataTable.table-bordered {
        border: none !important;
    }

.prj-page .dataTables_wrapper .row {
    row-gap: 8px;
}

/* ---------- Icon action buttons ---------- */
.cl-icon-btn--danger {
    --c: #ef4444;
}

.cl-icon-btn--edit {
    --c: var(--ld-accent);
}

.cl-icon-btn--view {
    --c: #0ea5e9;
}

.cl-icon-btn--ok {
    --c: #10b981;
}

.cl-icon-btn--move {
    --c: #7c3aed;
}

button.cl-icon-btn {
    padding: 0;
}

.cl-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent);
}

/* ---------- Page-level cards on the non-summary pages ---------- */
.prj-page .ld-card + .ld-card,
.pay-page .ld-card + .ld-card {
    margin-top: 18px;
}

.prj-page .prj-card-head,
.pay-page .prj-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ld-border);
}

    .prj-page .prj-card-head .cf-section-head,
    .pay-page .prj-card-head .cf-section-head {
        margin: 0;
        padding: 0;
        border: none;
    }

.prj-page .prj-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---------- Forms (Create / Edit project, sub-module record forms) ---------- */
.prj-page .cf-field .input-group > .form-control,
.pay-page .cf-field .input-group > .form-control {
    border-radius: 0 10px 10px 0;
}

.prj-page .cf-field .input-group-text,
.pay-page .cf-field .input-group-text {
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
    border: 1px solid var(--ld-border);
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.prj-page .cf-field .form-control[readonly],
.pay-page .cf-field .form-control[readonly],
.prj-page .cf-field .form-control:disabled,
.pay-page .cf-field .form-control:disabled {
    background: var(--ld-track-bg);
    color: var(--ld-text-muted);
    opacity: 1;
}

.prj-page .cf-field .cf-hint,
.pay-page .cf-field .cf-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ld-text-muted);
}

.prj-page .cf-span-full,
.pay-page .cf-span-full {
    grid-column: 1 / -1;
}

.prj-page .cf-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
    .prj-page .cf-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .prj-page .cf-grid--3 {
        grid-template-columns: 1fr;
    }
}

.prj-page .cf-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.prj-page .text-danger.field-validation-error,
.prj-page span.text-danger {
    font-size: 12px;
    color: #ef4444 !important;
}

/* Summary/read-only key-value rows */
.prj-page .prj-kv,
.pay-page .prj-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.prj-page .prj-kv-item,
.pay-page .prj-kv-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
    min-width: 0;
}

.prj-page .prj-kv-label,
.pay-page .prj-kv-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.prj-page .prj-kv-value,
.pay-page .prj-kv-value {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ld-text);
    word-break: break-word;
}

/* ---------- Access page: bootstrap-duallistbox ---------- */
.prj-page .bootstrap-duallistbox-container .box1,
.prj-page .bootstrap-duallistbox-container .box2 {
    margin-bottom: 12px;
}

.prj-page .bootstrap-duallistbox-container label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    margin-bottom: 6px;
}

.prj-page .bootstrap-duallistbox-container .info-container {
    margin-bottom: 8px;
}

.prj-page .bootstrap-duallistbox-container .info {
    font-size: 12px;
    color: var(--ld-text-muted);
}

.prj-page .bootstrap-duallistbox-container .badge {
    background: var(--ld-accent-soft) !important;
    color: var(--ld-accent) !important;
    border-radius: 999px;
    padding: 3px 8px;
    font-weight: 700;
}

.prj-page .bootstrap-duallistbox-container .filter {
    height: 40px;
    margin-bottom: 8px;
}

.prj-page .bootstrap-duallistbox-container select {
    width: 100%;
    min-height: 280px;
    padding: 6px;
    border: 1px solid var(--ld-border);
    border-radius: 12px;
    background: var(--ld-input-bg);
    color: var(--ld-text);
}

    .prj-page .bootstrap-duallistbox-container select option {
        padding: 8px 10px;
        margin-bottom: 2px;
        border-radius: 8px;
        font-size: 13.5px;
        color: var(--ld-text);
        cursor: pointer;
    }

        .prj-page .bootstrap-duallistbox-container select option:hover {
            background: var(--ld-track-bg);
        }

        .prj-page .bootstrap-duallistbox-container select option:checked {
            background: var(--ld-accent-soft) linear-gradient(0deg, var(--ld-accent-soft), var(--ld-accent-soft));
            color: var(--ld-accent);
        }

.prj-page .bootstrap-duallistbox-container .btn-group {
    display: flex;
    width: 100%;
    gap: 6px;
    margin-bottom: 8px;
}

    .prj-page .bootstrap-duallistbox-container .btn-group .btn {
        flex: 1;
        border-radius: 10px !important;
        background: var(--ld-track-bg);
        border: 1px solid var(--ld-border);
        color: var(--ld-text);
        box-shadow: none;
        padding: 8px 10px;
    }

        .prj-page .bootstrap-duallistbox-container .btn-group .btn:hover {
            background: var(--ld-accent-soft);
            border-color: var(--ld-accent);
            color: var(--ld-accent);
            transform: none;
        }

/* ---------- Upload picture / work order ---------- */
.prj-page .prj-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 18px;
    border: 2px dashed var(--ld-border);
    border-radius: 14px;
    background: var(--ld-track-bg);
    text-align: center;
    color: var(--ld-text-muted);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .prj-page .prj-dropzone:hover {
        border-color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

    .prj-page .prj-dropzone > i,
    .prj-page .prj-dropzone > .svg-inline--fa {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

    /* Font Awesome all.js renders this icon as an <svg>: pad it so the glyph keeps its size inside the tile
   (svg.svg-inline--fa:not(:root) outranks Font Awesome's own box-sizing: content-box rule) */
    .prj-page .prj-dropzone > svg.svg-inline--fa:not(:root) {
        box-sizing: border-box;
        padding: calc((52px - 1em) / 2);
    }

.prj-page .prj-preview {
    display: block;
    max-width: 100%;
    max-height: 520px;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

.prj-page .prj-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 18px;
    text-align: center;
}

    .prj-page .prj-hero-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

    .prj-page .prj-hero h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: var(--ld-text);
    }

    .prj-page .prj-hero p {
        margin: 0;
        max-width: 460px;
        font-size: 13.5px;
        color: var(--ld-text-muted);
    }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .prj-page .card .card-header.bg-dark {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .prj-page .card .card-header .card-header-right {
        margin-left: 0;
        justify-content: flex-start;
    }

    .prj-page .card-header .calc-pill {
        text-align: left;
    }

    .prj-page .cl-head-actions {
        width: 100%;
    }
}

/* ---------- Create / Edit project form ---------- */
.prj-page .cf-section-icon,
.pay-page .cf-section-icon {
    color: var(--c, var(--ld-accent));
    background: color-mix(in srgb, var(--c, var(--ld-accent)) 15%, var(--ld-card));
}

.prj-page .cf-with-btn > .input-group,
.pay-page .cf-with-btn > .input-group {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
}

.prj-page .cf-add-btn--ghost,
.pay-page .cf-add-btn--ghost {
    color: var(--ld-text) !important;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

    .prj-page .cf-add-btn--ghost:hover,
    .pay-page .cf-add-btn--ghost:hover {
        color: var(--ld-accent) !important;
        background: var(--ld-accent-soft);
        border-color: var(--ld-accent);
        filter: none;
    }

/* Work-order confirmation checklist: question | Yes/No | notes */
.prj-page .prj-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prj-page .prj-check-row {
    display: grid;
    grid-template-columns: minmax(170px, 230px) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 16px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

.prj-page .prj-check-q {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ld-text);
}

.prj-page .prj-check-notes .form-control {
    height: 38px;
    padding: 0 12px;
    font-size: 13.5px;
}

.prj-page .prj-check-notes .invalid-feedback:empty {
    display: none;
}

@media (max-width: 767px) {
    .prj-page .prj-check-row {
        grid-template-columns: 1fr auto;
    }

    .prj-page .prj-check-notes {
        grid-column: 1 / -1;
    }
}

/* Yes / No segmented radio pair (real radios, visually hidden) */
.prj-yn {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    border-radius: 10px;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
}

.prj-yn-opt {
    position: relative;
    margin: 0;
    cursor: pointer;
}

    .prj-yn-opt input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }

    .prj-yn-opt span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 52px;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ld-text-muted);
        transition: background-color 0.15s ease, color 0.15s ease;
        user-select: none;
    }

    .prj-yn-opt:hover span {
        color: var(--ld-text);
    }

    .prj-yn-opt input:checked + span {
        color: #fff;
        background: var(--ld-text-muted);
    }

    .prj-yn-opt input[value="true"]:checked + span {
        background: #10b981;
    }

    .prj-yn-opt input:focus-visible + span {
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

/* ---------- Gantt chart (Views/Projects/GanttChartManage.cshtml) ----------
   Replaces the page's old inline black/lime <style> block. Class names are
   the ones the page JS generates for the schedule grid, so only the look
   changes. */
.prj-gantt {
    --g-started: #3b82f6;
    --g-pending: #f59e0b;
    --g-completed: #10b981;
    overflow: hidden;
}

    .prj-gantt .dashboard-container {
        padding: 0;
        background: transparent;
    }

    .prj-gantt .loading,
    .prj-gantt .error {
        padding: 48px 16px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--ld-text-muted);
    }

    .prj-gantt .error {
        color: #ef4444;
    }

.prj-gantt-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 991px) {
    .prj-gantt-head {
        grid-template-columns: 1fr;
    }
}

.prj-gantt-key {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.prj-gantt .key-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.prj-gantt .key-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ld-text);
}

.prj-gantt .key-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: none;
}

    .prj-gantt .key-color.started {
        background: var(--g-started);
    }

    .prj-gantt .key-color.pending {
        background: var(--g-pending);
    }

    .prj-gantt .key-color.completed {
        background: var(--g-completed);
    }

.prj-gantt .progress-status {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
}

.prj-gantt-scroll {
    border: 1px solid var(--ld-border);
    border-radius: 12px;
}

.prj-gantt .schedule-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ld-card);
    font-size: 11.5px;
    color: var(--ld-text);
}

    .prj-gantt .schedule-table th,
    .prj-gantt .schedule-table td {
        height: 30px;
        padding: 4px 8px;
        text-align: center;
        vertical-align: middle;
        color: var(--ld-text);
        border-right: 1px solid var(--ld-border);
        border-bottom: 1px solid var(--ld-border);
    }

    .prj-gantt .schedule-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--ld-track-bg);
        color: var(--ld-text-muted);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .prj-gantt .schedule-table .task-header {
        white-space: nowrap;
    }

.prj-gantt .item-col { min-width: 70px; }
.prj-gantt .task-title-col { min-width: 170px; text-align: left !important; }
.prj-gantt .task-owner-col { min-width: 110px; }
.prj-gantt .start-date-col,
.prj-gantt .due-date-col { min-width: 84px; }
.prj-gantt .duration-col { min-width: 70px; }
.prj-gantt .complete-col { min-width: 76px; }

.prj-gantt .schedule-table .month-header {
    background: color-mix(in srgb, var(--ld-accent) 12%, var(--ld-card));
    color: var(--ld-accent);
    font-size: 10.5px;
}

.prj-gantt .schedule-table .date-header {
    min-width: 26px;
    width: 26px;
    padding: 4px 2px;
    font-size: 10px;
}

.prj-gantt .task-row {
    background: var(--ld-card);
}

    .prj-gantt .task-row:nth-child(even) {
        background: color-mix(in srgb, var(--ld-track-bg) 55%, var(--ld-card));
    }

    .prj-gantt .task-row:hover {
        background: color-mix(in srgb, var(--ld-accent) 6%, var(--ld-card));
    }

    .prj-gantt .task-row.section-header,
    .prj-gantt .section-divider {
        background: var(--ld-accent-soft);
        color: var(--ld-text);
        font-weight: 800;
        text-align: left !important;
        padding-left: 12px;
    }

.prj-gantt .task-cell-left {
    text-align: left !important;
    padding-left: 10px;
    font-weight: 600;
}

.prj-gantt .schedule-table td.date-cell {
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    padding: 2px;
    font-size: 10px;
    font-weight: 800;
    cursor: not-allowed;
}

    /* days inside the task's date range are clickable */
    .prj-gantt .schedule-table td.date-cell[data-within-range="true"] {
        cursor: pointer;
        background: color-mix(in srgb, var(--ld-text-muted) 18%, var(--ld-card));
    }

        .prj-gantt .schedule-table td.date-cell[data-within-range="true"]:hover {
            box-shadow: inset 0 0 0 2px var(--ld-accent);
        }

    .prj-gantt .schedule-table td.date-cell.progress-started {
        background: var(--g-started) !important;
        color: #fff;
    }

    .prj-gantt .schedule-table td.date-cell.progress-pending {
        background: var(--g-pending) !important;
        color: #1f2430;
    }

    .prj-gantt .schedule-table td.date-cell.progress-completed {
        background: var(--g-completed) !important;
        color: #fff;
    }

.prj-gantt .empty-cell {
    background: var(--ld-track-bg);
}

.cl-modal .prj-meta-value {
    font-weight: 700;
    color: var(--ld-text);
}

/* ---------- Upload picture: native file input ---------- */
.prj-page .prj-file-input {
    width: 100%;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

    .prj-page .prj-file-input::file-selector-button {
        margin-right: 10px;
        padding: 7px 14px;
        border: 1px solid var(--ld-border);
        border-radius: 9px;
        background: var(--ld-card);
        color: var(--ld-text);
        font-weight: 600;
        cursor: pointer;
    }

        .prj-page .prj-file-input::file-selector-button:hover {
            border-color: var(--ld-accent);
            color: var(--ld-accent);
        }

.prj-page .prj-dropzone small {
    font-size: 11.5px;
}

/* ---------- Project Tracking (Views/Projects/ProjectTracking.cshtml) ----------
   Replaces the page's old inline <style> block (green #4CAF50 header grid,
   global table/th/td/.modal-dialog overrides). Everything is now scoped to
   .prj-tracking (page) / .prj-tracking-modal (its modals, which live outside
   the page root). Class names are the ones the page JS generates. */
.prj-kv-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--ld-text-muted);
}

.prj-tracking .prj-col-4 { width: 4%; }
.prj-tracking .prj-col-6 { width: 6%; }
.prj-tracking .prj-col-15 { width: 15%; }
.prj-tracking .prj-col-20 { width: 20%; }
.prj-tracking .prj-col-21 { width: 21%; }
.prj-tracking .prj-col-25 { width: 25%; }

.prj-tracking .main-table-container {
    height: 500px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    position: relative;
    border: 1px solid var(--ld-border);
    border-radius: 12px;
}

.prj-tracking .table-fixed-header {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ld-text);
    font-size: 12.5px;
}

    .prj-tracking .table-fixed-header thead {
        position: sticky;
        top: 0;
        z-index: 10;
    }

        .prj-tracking .table-fixed-header thead th {
            background: var(--ld-track-bg);
            color: var(--ld-text-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 11px 8px;
            border-bottom: 1px solid var(--ld-border);
            vertical-align: middle;
        }

    .prj-tracking .table-fixed-header tbody td {
        padding: 10px 8px;
        border-bottom: 1px solid var(--ld-border);
        vertical-align: middle;
        text-align: left;
        word-break: break-word;
    }

    .prj-tracking .table-fixed-header .center {
        text-align: center;
    }

    .prj-tracking .table-fixed-header .serial-number {
        text-align: center;
        white-space: nowrap;
        font-weight: 700;
        color: var(--ld-text-muted);
        min-width: 30px;
    }

.prj-tracking .schedule-row {
    position: relative;
}

    .prj-tracking .schedule-row:hover > td {
        background: color-mix(in srgb, var(--ld-accent) 5%, var(--ld-card));
    }

/* hover actions on each job-schedule / document row */
.prj-tracking .row-actions {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    gap: 4px;
    z-index: 2;
}

.prj-tracking .schedule-row:hover .row-actions {
    display: flex;
}

.prj-tracking .action-btn {
    --c: var(--ld-accent);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none !important;
    border-radius: 8px;
    font-size: 11.5px;
    cursor: pointer;
    color: var(--c) !important;
    background: color-mix(in srgb, var(--c) 16%, var(--ld-card)) !important;
    box-shadow: 0 2px 6px rgba(20, 22, 31, 0.12);
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .prj-tracking .action-btn:hover {
        color: #fff !important;
        background: var(--c) !important;
    }

    .prj-tracking .action-btn.btn-info { --c: #0ea5e9; }
    .prj-tracking .action-btn.btn-success { --c: #10b981; }
    .prj-tracking .action-btn.btn-danger { --c: #ef4444; }

/* inline status select, colour-coded by the class the JS sets */
.prj-tracking .status-dropdown {
    height: 34px;
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 9px;
}

.prj-tracking .on-track-status {
    color: #b45309 !important;
    background-color: color-mix(in srgb, #f59e0b 16%, var(--ld-card)) !important;
    border-color: color-mix(in srgb, #f59e0b 40%, transparent) !important;
}

.prj-tracking .not-on-track-status {
    color: #dc2626 !important;
    background-color: color-mix(in srgb, #ef4444 14%, var(--ld-card)) !important;
    border-color: color-mix(in srgb, #ef4444 40%, transparent) !important;
}

.prj-tracking .completed-status {
    color: #059669 !important;
    background: color-mix(in srgb, #10b981 15%, var(--ld-card)) !important;
    border-color: color-mix(in srgb, #10b981 40%, transparent) !important;
}

html[data-theme="dark"] .prj-tracking .on-track-status { color: #fbbf24 !important; }
html[data-theme="dark"] .prj-tracking .not-on-track-status { color: #f87171 !important; }
html[data-theme="dark"] .prj-tracking .completed-status { color: #34d399 !important; }

.prj-tracking .file-view-link {
    color: var(--ld-accent);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .prj-tracking .file-view-link:hover {
        text-decoration: underline;
    }

.prj-tracking .text-small {
    font-size: 12px;
    opacity: 0.7;
    text-decoration: none;
}

    .prj-tracking .text-small:hover {
        opacity: 1;
    }

/* Special documents / contract amendments side by side */
.prj-tracking .split-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

    .prj-tracking .split-container > .ld-card + .ld-card {
        margin-top: 0;
    }

.prj-tracking .split-table .table-responsive-mobile {
    height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    border: 1px solid var(--ld-border);
    border-radius: 12px;
}

@media (max-width: 991px) {
    .prj-tracking .split-container {
        grid-template-columns: 1fr;
    }
}

/* scroll hints added by the page JS on small screens */
.prj-tracking .has-horizontal-scroll {
    position: relative;
}

.prj-tracking .scroll-indicator,
.prj-tracking-modal .standard-codes-table-container.has-scroll::after {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20, 22, 31, 0.75);
    color: #fff;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

/* full-page loader appended to .page-body */
.prj-tracking .overlay.dark {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 11, 16, 0.6);
}

.prj-tracking .overlay-content {
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

    .prj-tracking .overlay-content i,
    .prj-tracking .overlay-content .svg-inline--fa {
        display: block;
        margin-bottom: 14px;
        color: var(--ld-accent);
    }

    /* a block <svg> is not centred by text-align like the <i> glyph was */
    .prj-tracking .overlay-content .svg-inline--fa {
        margin-left: auto;
        margin-right: auto;
    }

/* ---------- Project Tracking modals ---------- */
.prj-tracking-modal .modal-content {
    position: relative;
}

.prj-tracking-modal .modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--ld-card) 90%, transparent);
}

    .prj-tracking-modal .modal-overlay .overlay-content {
        text-align: center;
        color: var(--ld-text);
        font-weight: 600;
    }

        .prj-tracking-modal .modal-overlay .overlay-content i,
        .prj-tracking-modal .modal-overlay .overlay-content .svg-inline--fa {
            display: block;
            margin-bottom: 12px;
            color: var(--ld-accent);
        }

        /* a block <svg> is not centred by text-align like the <i> glyph was */
        .prj-tracking-modal .modal-overlay .overlay-content .svg-inline--fa {
            margin-left: auto;
            margin-right: auto;
        }

.prj-tracking-modal .btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.prj-tracking-modal .form-control:disabled,
.prj-tracking-modal .file-input:disabled {
    background: var(--ld-track-bg);
    opacity: 0.7;
    cursor: not-allowed;
}

.prj-tracking-modal .standard-codes-table-container {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ld-border);
    border-radius: 12px;
}

.prj-tracking-modal .prj-codes-table {
    color: var(--ld-text);
    font-size: 12.5px;
    min-width: 560px;
}

    .prj-tracking-modal .prj-codes-table thead th {
        background: var(--ld-track-bg);
        color: var(--ld-text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border: none;
        border-bottom: 1px solid var(--ld-border);
        white-space: nowrap;
    }

    .prj-tracking-modal .prj-codes-table td {
        border: none;
        border-bottom: 1px solid var(--ld-border);
        vertical-align: middle;
    }

    .prj-tracking-modal .prj-codes-table .prj-col-num { width: 40px; }
    .prj-tracking-modal .prj-codes-table .prj-col-act { width: 64px; }

    .prj-tracking-modal .prj-codes-table .serial-number {
        text-align: center;
        font-weight: 700;
        color: var(--ld-text-muted);
    }

    .prj-tracking-modal .prj-codes-table .input-group-sm .form-control {
        border-radius: 0 8px 8px 0;
    }

    .prj-tracking-modal .prj-codes-table .input-group-sm > .file-input {
        border-radius: 8px;
    }

    .prj-tracking-modal .prj-codes-table .file-name {
        display: inline-block;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

.prj-tracking-modal .prj-or {
    margin: 0 6px;
    color: var(--ld-accent);
}

.prj-tracking-modal .prj-ref-box {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

.prj-tracking-modal .prj-ref-box-head {
    margin-bottom: 14px;
    text-align: center;
}

    .prj-tracking-modal .prj-ref-box-head small {
        color: var(--ld-text-muted);
    }

.prj-tracking-modal .prj-ref-box-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--ld-text);
}

    .prj-tracking-modal .prj-ref-box-title i,
    .prj-tracking-modal .prj-ref-box-title .svg-inline--fa {
        color: var(--ld-accent);
        margin-right: 6px;
    }

.prj-tracking-modal .prj-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    color: var(--ld-text-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

    .prj-tracking-modal .prj-or-divider::before,
    .prj-tracking-modal .prj-or-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--ld-border);
    }

    .prj-tracking-modal .prj-or-divider span {
        padding: 3px 12px;
        border-radius: 999px;
        border: 1px solid var(--ld-border);
        background: var(--ld-card);
    }

.prj-tracking-modal .prj-file-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    font-size: 13px;
}

    .prj-tracking-modal .prj-file-chip > i,
    .prj-tracking-modal .prj-file-chip > .svg-inline--fa {
        color: var(--ld-accent);
    }

/* ---------- Project Tracking: phones (was the page's inline mobile block) ---------- */
@media only screen and (max-width: 768px) {
    .prj-tracking .table-fixed-header {
        min-width: 600px;
        font-size: 11px;
    }

        .prj-tracking .table-fixed-header th,
        .prj-tracking .table-fixed-header td {
            padding: 6px 4px;
            white-space: nowrap;
        }

    .prj-tracking .row-actions {
        position: static;
        display: flex !important;
        justify-content: center;
        margin-top: 6px;
        transform: none;
    }

    .prj-tracking .schedule-row {
        position: static;
    }

    .prj-tracking .action-btn {
        width: 34px;
        height: 34px;
    }

    .prj-tracking-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .prj-tracking-modal .modal-body {
        padding: 15px;
        overflow-x: hidden;
    }

    .prj-tracking-modal .btn-add-code {
        width: 100%;
    }

    .prj-tracking-modal .standard-codes-table-container.has-scroll::after {
        content: "\2190  Swipe to see more  \2192";
    }

    .prj-tracking-modal .select2-container {
        width: 100% !important;
    }

    body:has(.prj-tracking) .daterangepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 40px) !important;
        max-width: 350px !important;
        z-index: 9999 !important;
    }

        body:has(.prj-tracking) .daterangepicker .ranges {
            display: none;
        }

    body:has(.prj-tracking).modal-open-mobile {
        position: fixed;
        width: 100%;
    }
}

/* ---------- Sub-module record forms (Budget.. / Consumption.. Create/Edit,
   Daily Notes, Dispatch requests) ---------- */
.prj-page .table-card form > .card-body,
.prj-page .card-block form > .card-body {
    padding: 18px;
    background: transparent;
}

.prj-page .card-block form > .card-body {
    padding: 2px 0 0;
}

.prj-page .table-card form .form-group {
    margin-bottom: 16px;
}

.prj-page .table-card form label,
.prj-page .table-card form .col-form-label,
.prj-page .table-card form .control-label {
    display: block;
    padding: 0;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

    .prj-page .table-card form label.form-check-label,
    .prj-page .table-card form label.custom-control-label {
        display: inline-block;
        text-transform: none;
        letter-spacing: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--ld-text);
    }

.prj-page .table-card form .form-control {
    min-height: 40px;
    border-radius: 10px;
}

.prj-page .table-card form textarea.form-control {
    min-height: 96px;
}

.prj-page .table-card form .input-group > .form-control,
.prj-page .table-card form .input-group > .select2-container .select2-selection {
    border-radius: 0 10px 10px 0;
}

.prj-page .table-card form .input-group > .form-control:first-child {
    border-radius: 10px;
}

.prj-page .table-card form .input-group-text {
    border-radius: 10px 0 0 10px;
    border-right: none;
}

.prj-page .table-card form .input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

    .prj-page .table-card form .input-group > .select2-container .select2-selection--single {
        min-height: 40px;
    }

.prj-page .table-card form .text-danger:empty,
.prj-page .table-card form .validation-summary-valid {
    display: none;
}

.prj-page .table-card form .validation-summary-errors {
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    color: #ef4444 !important;
    background: color-mix(in srgb, #ef4444 12%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

    .prj-page .table-card form .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

.prj-page .card-footer.prj-form-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    background: transparent !important;
    border-top: 1px solid var(--ld-border);
}

.prj-page .form-text.text-muted,
.prj-page small.text-muted {
    color: var(--ld-text-muted) !important;
}

.prj-page .file-item {
    border-color: var(--ld-border) !important;
    background: var(--ld-track-bg);
    border-radius: 10px !important;
}

/* grid header cells that may wrap (labor grids) */
.prj-page table.dataTable thead th.prj-th-wrap {
    white-space: normal !important;
}

/* adjacent icon buttons rendered into grid cells */
.prj-page table td .cl-icon-btn + .cl-icon-btn,
.prj-page table td .dropdown + .cl-icon-btn {
    margin-left: 4px;
}

.prj-page table td .cl-actions {
    justify-content: center;
    flex-wrap: wrap;
}

/* labels inside the move-labor / AI modals */
.cl-modal .control-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    margin-bottom: 6px;
}

.cl-modal .input-group-sm > .form-control,
.cl-modal .input-group > .select2-container {
    flex: 1 1 auto;
}

/* ---------- Daily Notes: attached-files dropdown (was an inline <style>) ---------- */
.files-dropdown .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    min-width: 300px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    box-shadow: var(--ld-shadow);
}

.files-dropdown .dropdown-item {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ld-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .files-dropdown .dropdown-item:hover {
        background: var(--ld-track-bg);
        color: var(--ld-text);
    }

.files-dropdown .file-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

    .files-dropdown .file-link i,
    .files-dropdown .file-link .svg-inline--fa {
        color: var(--ld-accent);
    }

.files-dropdown .badge {
    margin-left: 5px;
    border-radius: 999px;
    padding: 2px 7px;
    color: var(--ld-accent) !important;
    background: var(--ld-accent-soft) !important;
}

/* Section titles that page JS addresses as h3.card-title (it appends/removes a
   "Please Wait! Loading Data..." span) - same look as the h4 titles. */
.prj-page .card .card-header h3.card-title {
    float: none;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ld-text);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .prj-page .card .card-header h3.card-title i,
    .prj-page .card .card-header h3.card-title .svg-inline--fa {
        color: var(--cc, var(--ld-accent));
    }

    .prj-page .card .card-header h3.card-title span {
        font-size: 12px;
        font-weight: 600;
        color: var(--ld-text-muted);
    }

/* Loading overlay the grids/forms append to their section card */
.prj-page .card > .overlay.dark,
.prj-page .card > .overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: inherit;
    background: color-mix(in srgb, var(--ld-card) 78%, transparent);
    color: var(--ld-accent);
}

    .prj-page .card > .overlay > i,
    .prj-page .card > .overlay > .svg-inline--fa {
        color: var(--ld-accent) !important;
    }

/* ==========================================================================
   Task Schedules list (Views/JobSchedules/Index.cshtml) - .tsk-page
   Replaces the page's old inline <style> block (status select colours).
   ========================================================================== */
.tsk-page .pagebody {
    position: relative;
}

    /* delete in progress: page JS appends .overlay.dark to div.pagebody */
    .tsk-page .pagebody > .overlay {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        background: color-mix(in srgb, var(--ld-card) 78%, transparent);
        color: var(--ld-accent);
    }

/* toolbar title - page JS appends a "Please Wait!" span to h3.card-title */
.tsk-page h3.card-title {
    float: none;
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}

    .tsk-page h3.card-title span {
        font-size: 12px;
        font-weight: 600;
        color: var(--ld-text-muted);
    }

.tsk-page .cl-filter .form-control {
    height: 40px;
}

.tsk-page #grid {
    border-collapse: separate;
    border-spacing: 0;
}

    .tsk-page #grid thead th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        white-space: nowrap;
    }

    .tsk-page #grid tbody td {
        vertical-align: middle;
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 13px;
        color: var(--ld-text);
    }

        /* date column stays on one line (was #grid td:nth-child(5) inline) */
        .tsk-page #grid tbody td:nth-child(5) {
            white-space: nowrap;
        }

.tsk-page .tsk-project {
    font-weight: 700;
    white-space: nowrap;
}

.tsk-page .tsk-person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-weight: 600;
    min-width: 150px;
}

.tsk-page .tsk-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 12px;
    object-fit: cover;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.tsk-page .tsk-code {
    margin: 2px;
    text-decoration: none !important;
}

    .tsk-page .tsk-code:hover {
        background: var(--ld-accent);
        color: #fff;
    }

.tsk-page .tsk-dates {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

    .tsk-page .tsk-dates i,
    .tsk-page .tsk-dates .svg-inline--fa {
        font-size: 10px;
        color: var(--ld-text-muted);
    }

.tsk-page .tsk-note {
    display: inline-block;
    max-width: 320px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    color: var(--ld-text-muted);
}

.tsk-page #grid .cl-actions {
    justify-content: center;
    flex-wrap: nowrap;
}

/* inline status select, colour-coded by the class the JS sets */
.tsk-page .status-dropdown {
    width: 100%;
    min-width: 130px;
    max-width: 150px;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 700;
    border-radius: 10px !important;
    border: 1px solid var(--ld-border);
    cursor: pointer;
}

.tsk-page .on-track-status {
    color: #b45309 !important;
    background-color: color-mix(in srgb, #f59e0b 16%, var(--ld-card)) !important;
    border-color: color-mix(in srgb, #f59e0b 40%, transparent) !important;
}

.tsk-page .not-on-track-status {
    color: #dc2626 !important;
    background-color: color-mix(in srgb, #ef4444 14%, var(--ld-card)) !important;
    border-color: color-mix(in srgb, #ef4444 40%, transparent) !important;
}

.tsk-page .completed-status {
    color: #059669 !important;
    background-color: color-mix(in srgb, #10b981 15%, var(--ld-card)) !important;
    border-color: color-mix(in srgb, #10b981 40%, transparent) !important;
}

html[data-theme="dark"] .tsk-page .on-track-status { color: #fbbf24 !important; }
html[data-theme="dark"] .tsk-page .not-on-track-status { color: #f87171 !important; }
html[data-theme="dark"] .tsk-page .completed-status { color: #34d399 !important; }

.tsk-page .status-dropdown option {
    background: var(--ld-card);
    color: var(--ld-text);
}

/* ==========================================================================
   Task Schedule calendar (Views/JobSchedules/Calendar.cshtml) - .tsk-cal
   Replaces the page's old inline <style> block. FullCalendar 3.4 renders
   un-themed (.fc-unthemed / .fc-state-*), and pages.css paints its header
   #4099ff for every calendar in the app - overridden here for this page only.
   ========================================================================== */

/* ---------- Labor category legend (built by renderLegend()) ---------- */
.tsk-cal #calendar-legend {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

.tsk-cal .tsk-legend-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

    .tsk-cal .tsk-legend-title i,
    .tsk-cal .tsk-legend-title .svg-inline--fa {
        color: var(--ld-accent);
    }

.tsk-cal #calendar-legend .legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tsk-cal .legend-item {
    --lc: var(--ld-accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    color: var(--ld-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}

    .tsk-cal .legend-item:hover {
        transform: translateY(-1px);
        border-color: var(--lc);
    }

    .tsk-cal .legend-item .color-box {
        width: 10px;
        height: 10px;
        flex: none;
        border-radius: 50%;
        background: var(--lc);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc) 25%, transparent);
    }

    .tsk-cal .legend-item.active {
        border-color: var(--lc);
        background: color-mix(in srgb, var(--lc) 16%, var(--ld-card));
        color: var(--ld-text);
    }

    .tsk-cal .legend-item.show-all i,
    .tsk-cal .legend-item.show-all .svg-inline--fa {
        color: var(--ld-accent);
    }

    .tsk-cal .legend-item.show-all.active {
        border-color: var(--ld-accent);
        background: var(--ld-accent);
        color: #fff;
    }

        .tsk-cal .legend-item.show-all.active i,
        .tsk-cal .legend-item.show-all.active .svg-inline--fa {
            color: #fff;
        }

/* ---------- FullCalendar ---------- */
.tsk-cal .fc {
    color: var(--ld-text);
}

.tsk-cal .fc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

    .tsk-cal .fc-toolbar::after {
        display: none;
    }

    .tsk-cal .fc-toolbar > div {
        float: none !important;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 !important;
    }

    .tsk-cal .fc-toolbar .fc-left {
        order: 1;
    }

    .tsk-cal .fc-toolbar .fc-center {
        order: 0;
        display: block;
    }

    .tsk-cal .fc-toolbar .fc-right {
        order: 2;
    }

    .tsk-cal .fc-toolbar h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: var(--ld-text);
    }

.tsk-cal .fc-button-group {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    padding: 3px;
    border-radius: 10px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.tsk-cal .fc button,
.tsk-cal .fc .fc-button {
    height: 32px;
    padding: 0 12px !important;
    margin: 0 !important;
    float: none;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ld-text-muted) !important;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: capitalize;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .tsk-cal .fc button:hover {
        color: var(--ld-text) !important;
        background: color-mix(in srgb, var(--ld-card) 60%, transparent) !important;
    }

    .tsk-cal .fc button.fc-state-active {
        background: var(--ld-card) !important;
        color: var(--ld-accent) !important;
        box-shadow: 0 2px 8px rgba(20, 22, 31, 0.12) !important;
    }

    /* standalone "today" button */
    .tsk-cal .fc .fc-today-button {
        border: 1px solid var(--ld-border) !important;
        background: var(--ld-card) !important;
        color: var(--ld-text) !important;
    }

        .tsk-cal .fc .fc-today-button.fc-state-disabled {
            opacity: 0.5;
            cursor: default;
        }

.tsk-cal .fc-view-container {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ld-border);
}

.tsk-cal .fc-unthemed th,
.tsk-cal .fc-unthemed td,
.tsk-cal .fc-unthemed thead,
.tsk-cal .fc-unthemed tbody,
.tsk-cal .fc-unthemed .fc-divider,
.tsk-cal .fc-unthemed .fc-row,
.tsk-cal .fc-unthemed .fc-content,
.tsk-cal .fc-unthemed .fc-popover,
.tsk-cal .fc-unthemed .fc-list-view {
    border-color: var(--ld-border);
}

.tsk-cal .fc th,
.tsk-cal .fc-unthemed .fc-list-heading td {
    background: var(--ld-track-bg);
    color: var(--ld-text-muted);
    border-color: var(--ld-border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 2.6;
}

.tsk-cal .fc-view-container > .fc-view > table {
    border-style: hidden;
}

.tsk-cal .fc td {
    line-height: 1.4;
}

.tsk-cal .fc-day-number {
    padding: 6px 8px !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ld-text);
}

.tsk-cal .fc-other-month .fc-day-number {
    color: var(--ld-text-muted);
    opacity: 0.55;
}

.tsk-cal .fc-unthemed td.fc-today {
    background: var(--ld-accent-soft);
}

.tsk-cal .fc-today .fc-day-number {
    color: var(--ld-accent);
    font-weight: 800;
}

.tsk-cal .fc-nonbusiness,
.tsk-cal .fc-unthemed .fc-popover,
.tsk-cal .fc-unthemed .fc-list-empty {
    background: var(--ld-card);
}

.tsk-cal .fc-unthemed .fc-list-item:hover td {
    background: var(--ld-track-bg);
}

/* events */
.tsk-cal .fc-event {
    margin: 2px 4px;
    padding: 4px 8px !important;
    border-radius: 8px;
    border-width: 0 0 0 3px !important;
    border-left-color: rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(20, 22, 31, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .tsk-cal .fc-event:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(20, 22, 31, 0.25);
        opacity: 1;
        color: #fff !important;
    }

    .tsk-cal .fc-event .fc-content {
        color: #fff;
        white-space: normal;
    }

.tsk-cal .fc-title {
    margin: 1px;
    white-space: normal;
    text-wrap: wrap;
    position: sticky;
}

.tsk-cal .tsk-ev-cat {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tsk-cal .fc-more {
    font-weight: 700;
    color: var(--ld-accent) !important;
}

@media (max-width: 767px) {
    .tsk-cal .fc-toolbar {
        justify-content: center;
    }

        .tsk-cal .fc-toolbar .fc-center {
            width: 100%;
            text-align: center;
        }
}

/* ---------- Edit task popup (#editModal + _EditPartial.cshtml) ---------- */
.tsk-edit-modal .modal-body {
    padding: 0;
}

.tsk-edit-modal .tsk-loading {
    padding: 48px 16px;
    text-align: center;
    color: var(--ld-text-muted);
}

    .tsk-edit-modal .tsk-loading .spinner-border {
        color: var(--ld-accent);
    }

    .tsk-edit-modal .tsk-loading p {
        margin: 10px 0 0;
    }

.tsk-edit-modal .cf-alert {
    margin: 22px;
}

.tsk-edit-modal .tsk-edit-body {
    padding: 22px;
}

    .tsk-edit-modal .tsk-edit-body .form-group {
        margin-bottom: 16px;
    }

.tsk-edit-modal .input-group-text {
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
    border: 1px solid var(--ld-border);
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.tsk-edit-modal .input-group > .form-control,
.tsk-edit-modal .input-group > .select2-container .select2-selection {
    border-radius: 0 10px 10px 0 !important;
}

.tsk-edit-modal .input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

.tsk-edit-modal .text-danger:empty {
    display: none;
}

.tsk-edit-modal .text-danger {
    font-size: 12px;
    color: #ef4444 !important;
}

.tsk-edit-modal .tsk-codes-panel {
    margin: 4px 0 18px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

.tsk-edit-modal .tsk-codes-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .tsk-edit-modal .tsk-codes-head .cf-section-head {
        margin: 0;
        padding: 0;
        border: none;
    }

.tsk-edit-modal .edit-standard-codes-container {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ld-border) transparent;
}

    .tsk-edit-modal .edit-standard-codes-container:empty::before {
        content: "No codes yet - use Add Code.";
        display: block;
        padding: 14px;
        text-align: center;
        font-size: 12.5px;
        color: var(--ld-text-muted);
    }

    .tsk-edit-modal .edit-standard-codes-container .standard-code-row {
        margin: 0 0 8px;
        padding: 12px 6px;
        border-radius: 12px;
        border: 1px solid var(--ld-border);
        background: var(--ld-card);
        transition: border-color 0.15s ease;
    }

        .tsk-edit-modal .edit-standard-codes-container .standard-code-row:hover {
            border-color: var(--ld-accent);
        }

        .tsk-edit-modal .edit-standard-codes-container .standard-code-row:last-child {
            margin-bottom: 0;
        }

    .tsk-edit-modal .edit-standard-codes-container .serial-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 800;
        color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

.tsk-edit-modal .tsk-edit-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--ld-border);
}

.tsk-edit-modal #updateBtn:disabled,
.tsk-edit-modal #addCodeBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ==========================================================================
   News Bulletin feed (Views/NewsBulletin/Index.cshtml) - .nb-page
   Replaces the page's old inline <style> block (AdminLTE-style timeline that
   also redefined the global .bg-blue/.bg-red/... colours). The feed items are
   built by the page JS (.news-item > .time-label + div > i + .timeline-item),
   so only these classes are styled - the script is unchanged.
   ========================================================================== */
.nb-page .nb-feed {
    padding-top: 22px;
}

.nb-page .timeline {
    --rail-x: 21px;
    position: relative;
    margin: 0 0 8px;
    padding: 0;
}

    /* vertical rail */
    .nb-page .timeline::before {
        content: "";
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: var(--rail-x);
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(to bottom, var(--ld-accent), var(--ld-border) 30%);
    }

/* one post */
.nb-page .news-item {
    position: relative;
    padding-bottom: 22px;
}

    /* date pill, colour follows the bg-* class the JS assigns */
    .nb-page .news-item > .time-label {
        position: relative;
        margin: 0 0 12px 58px;
    }

        .nb-page .news-item > .time-label > span {
            --c: var(--ld-accent);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--c);
            background: color-mix(in srgb, var(--c) 15%, var(--ld-card));
        }

            .nb-page .time-label > .bg-blue { --c: #3b82f6; }
            .nb-page .time-label > .bg-red { --c: #ef4444; }
            .nb-page .time-label > .bg-green { --c: #10b981; }
            .nb-page .time-label > .bg-purple { --c: #8b5cf6; }
            .nb-page .time-label > .bg-cyan { --c: #06b6d4; }

    .nb-page .news-item > div:not(.time-label) {
        position: relative;
        margin-left: 58px;
    }

    /* node icon on the rail (envelope = text post, camera = with picture) */
    .nb-page .news-item > div:not(.time-label) > i,
    .nb-page .LastElement > i,
    .nb-page .news-item > div:not(.time-label) > .svg-inline--fa,
    .nb-page .LastElement > .svg-inline--fa {
        position: absolute;
        top: 6px;
        left: calc(var(--rail-x) - 58px - 15px + 1px);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 13px;
        color: var(--ld-accent) !important;
        background: var(--ld-accent-soft) !important;
        box-shadow: 0 0 0 4px var(--ld-card);
        z-index: 1;
    }

    /* Font Awesome all.js renders this icon as an <svg>: pad it so the glyph keeps its size inside the tile
   (svg.svg-inline--fa:not(:root) outranks Font Awesome's own box-sizing: content-box rule) */
    .nb-page .news-item > div:not(.time-label) > svg.svg-inline--fa:not(:root),
    .nb-page .LastElement > svg.svg-inline--fa:not(:root) {
        box-sizing: border-box;
        padding: calc((32px - 1em) / 2);
    }

        .nb-page .news-item > div:not(.time-label) > i.bg-yellow,
        .nb-page .news-item > div:not(.time-label) > .svg-inline--fa.bg-yellow {
            color: #d97706 !important;
            background: color-mix(in srgb, #f59e0b 18%, var(--ld-card)) !important;
        }

    /* post card */
    .nb-page .timeline-item {
        padding: 16px 18px;
        border-radius: 14px;
        border: 1px solid var(--ld-border);
        background: var(--ld-track-bg);
        color: var(--ld-text);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .nb-page .timeline-item:hover {
            border-color: color-mix(in srgb, var(--ld-accent) 45%, var(--ld-border));
            box-shadow: var(--ld-shadow);
        }

        .nb-page .timeline-item > .timeline-header {
            margin: 0 0 8px;
            padding: 0;
            border: none;
            font-size: 16px;
            font-weight: 800;
            line-height: 1.3;
            letter-spacing: -0.01em;
            color: var(--ld-text);
            word-break: break-word;
        }

        .nb-page .timeline-item > .timeline-body {
            padding: 0;
            font-size: 13.5px;
            line-height: 1.6;
            color: var(--ld-text-muted);
            word-break: break-word;
        }

            .nb-page .timeline-item > .timeline-body + .timeline-body {
                margin-top: 12px;
            }

            .nb-page .timeline-item > .timeline-body > img {
                display: block;
                max-width: 100% !important;
                max-height: 420px;
                margin: 0;
                border-radius: 12px;
                border: 1px solid var(--ld-border);
                object-fit: contain;
                background: var(--ld-card);
            }

/* end-of-feed marker */
.nb-page .LastElement {
    position: relative;
    height: 32px;
    margin-left: 58px;
}

/* load more / end of feed */
.nb-page .nb-more {
    display: flex;
    justify-content: center;
    padding: 6px 0 4px;
}

.nb-page #nomore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

    .nb-page #nomore i,
    .nb-page #nomore .svg-inline--fa {
        color: #10b981;
    }

@media (max-width: 576px) {
    .nb-page .timeline {
        --rail-x: 15px;
    }

    .nb-page .news-item > .time-label,
    .nb-page .news-item > div:not(.time-label),
    .nb-page .LastElement {
        margin-left: 44px;
    }

        .nb-page .news-item > div:not(.time-label) > i,
        .nb-page .LastElement > i,
        .nb-page .news-item > div:not(.time-label) > .svg-inline--fa,
        .nb-page .LastElement > .svg-inline--fa {
            left: calc(var(--rail-x) - 44px - 15px + 1px);
        }
}

/* ==========================================================================
   Manage News list (Views/News/Index.cshtml) - .nw-page
   ========================================================================== */
.nw-page #newsTable {
    border-collapse: separate;
    border-spacing: 0;
}

    .nw-page #newsTable thead th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        white-space: nowrap;
    }

    .nw-page #newsTable tbody td {
        vertical-align: top;
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 13px;
        color: var(--ld-text);
    }

        .nw-page #newsTable tbody td:nth-child(3),
        .nw-page #newsTable tbody td:nth-child(4) {
            text-align: center;
            width: 1%;
            white-space: nowrap;
        }

.nw-page .nw-title {
    display: inline-block;
    min-width: 140px;
    max-width: 240px;
    font-weight: 700;
    line-height: 1.35;
}

/* rich-text description preview: clamped height with a fade, pictures scaled down */
.nw-page .nw-desc {
    position: relative;
    max-height: 168px;
    overflow: hidden;
    text-align: left;
    line-height: 1.55;
    color: var(--ld-text-muted);
    word-break: break-word;
}

    .nw-page .nw-desc::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 42px;
        pointer-events: none;
        background: linear-gradient(to bottom, transparent, var(--ld-card));
    }

    .nw-page .nw-desc img {
        max-width: 220px !important;
        max-height: 140px !important;
        width: auto !important;
        height: auto !important;
        border-radius: 10px;
        border: 1px solid var(--ld-border);
        object-fit: cover;
    }

    .nw-page .nw-desc p,
    .nw-page .nw-desc h1,
    .nw-page .nw-desc h2,
    .nw-page .nw-desc h3,
    .nw-page .nw-desc h4 {
        margin: 0 0 6px;
        font-size: 13px;
        line-height: 1.55;
        color: inherit;
    }

.nw-page #newsTable tbody tr:hover .nw-desc::after {
    background: linear-gradient(to bottom, transparent, var(--ld-track-bg));
}

/* ==========================================================================
   Create / Edit News (Views/News/Create.cshtml, Edit.cshtml) - .nwf-page
   Summernote (bs4 build) is reskinned here only; its toolbar carries
   Bootstrap's .card-header class, which the page script also tints inline.
   ========================================================================== */
.nwf-page .note-editor.note-frame {
    border: 1px solid var(--ld-border) !important;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ld-input-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .nwf-page .note-editor.note-frame.focus,
    .nwf-page .note-editor.note-frame:focus-within {
        border-color: var(--ld-accent) !important;
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

.nwf-page .note-editor .note-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px !important;
    background: var(--ld-track-bg) !important;
    border-bottom: 1px solid var(--ld-border) !important;
}

    .nwf-page .note-editor .note-toolbar > .note-btn-group {
        margin: 0 !important;
    }

.nwf-page .note-editor .note-btn {
    height: 32px;
    min-width: 32px;
    padding: 0 9px;
    border: 1px solid var(--ld-border) !important;
    background: var(--ld-card) !important;
    color: var(--ld-text) !important;
    box-shadow: none !important;
}

    .nwf-page .note-editor .note-btn:hover,
    .nwf-page .note-editor .note-btn.active {
        background: var(--ld-accent-soft) !important;
        color: var(--ld-accent) !important;
        border-color: var(--ld-accent) !important;
    }

.nwf-page .note-editor .note-btn-group > .note-btn:first-child {
    border-radius: 8px 0 0 8px;
}

.nwf-page .note-editor .note-btn-group > .note-btn:last-child,
.nwf-page .note-editor .note-btn-group > .note-btn-group:last-child > .note-btn {
    border-radius: 0 8px 8px 0;
}

.nwf-page .note-editor .note-btn-group > .note-btn:only-child {
    border-radius: 8px;
}

.nwf-page .note-editor .note-dropdown-menu,
.nwf-page .note-editor .dropdown-menu {
    border-radius: 10px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    color: var(--ld-text);
    box-shadow: var(--ld-shadow);
}

    .nwf-page .note-editor .dropdown-item,
    .nwf-page .note-editor .note-dropdown-item {
        color: var(--ld-text);
    }

        .nwf-page .note-editor .dropdown-item:hover,
        .nwf-page .note-editor .note-dropdown-item:hover {
            background: var(--ld-track-bg);
            color: var(--ld-text);
        }

.nwf-page .note-editor .note-editing-area .note-editable {
    min-height: 320px;
    padding: 16px 18px;
    background: var(--ld-input-bg) !important;
    color: var(--ld-text) !important;
    font-size: 14px;
    line-height: 1.6;
}

    .nwf-page .note-editor .note-editing-area .note-editable img {
        max-width: 100%;
        border-radius: 10px;
    }

.nwf-page .note-editor .note-placeholder {
    color: var(--ld-text-muted);
}

.nwf-page .note-editor .note-statusbar {
    background: var(--ld-track-bg) !important;
    border-top: 1px solid var(--ld-border) !important;
}

    .nwf-page .note-editor .note-statusbar .note-resizebar .note-icon-bar {
        border-top-color: var(--ld-text-muted);
    }

.nwf-page .note-editor .note-codable {
    background: #14161f;
    color: #e5e7eb;
}

/* Summernote dialogs (insert link / picture / video) are appended to the editor */
.nwf-page .note-modal .modal-content {
    border-radius: 16px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    color: var(--ld-text);
}

.nwf-page .note-modal .modal-header,
.nwf-page .note-modal .modal-footer {
    border-color: var(--ld-border);
}

/* side cards */
.nwf-page .nwf-current {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

.nwf-page .nwf-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 20px 14px;
    border: 2px dashed var(--ld-border);
    border-radius: 14px;
    background: var(--ld-track-bg);
    text-align: center;
    color: var(--ld-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .nwf-page .nwf-drop:hover {
        border-color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

    .nwf-page .nwf-drop > i,
    .nwf-page .nwf-drop > .svg-inline--fa {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

    /* Font Awesome all.js renders this icon as an <svg>: pad it so the glyph keeps its size inside the tile
   (svg.svg-inline--fa:not(:root) outranks Font Awesome's own box-sizing: content-box rule) */
    .nwf-page .nwf-drop > svg.svg-inline--fa:not(:root) {
        box-sizing: border-box;
        padding: calc((46px - 1em) / 2);
    }

    .nwf-page .nwf-drop small {
        font-size: 11.5px;
    }

.nwf-page .nwf-file {
    width: 100%;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

    .nwf-page .nwf-file::file-selector-button {
        margin-right: 10px;
        padding: 7px 14px;
        border: 1px solid var(--ld-border);
        border-radius: 9px;
        background: var(--ld-card);
        color: var(--ld-text);
        font-weight: 600;
        cursor: pointer;
    }

.nwf-page .cf-side-hint i,
.nwf-page .cf-side-hint .svg-inline--fa {
    color: var(--ld-accent);
    margin-right: 4px;
}

/* server-side validation summary (Edit) */
.nwf-page .nwf-summary .validation-summary-errors {
    display: block;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

    .nwf-page .nwf-summary .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

/* ==========================================================================
   Payroll module - .pay-page
   Views/Payroll (History, Download CSV, Active Payroll, Clock Out, Move Labor,
   Employee / Project Summary), Performance/SetPerformancePay and the Time Log
   Level 1 / Level 2 approval pages. Modals sit outside the page root, so they
   carry their own classes (.pay-approval-modal, .pay-perf-modal).
   ========================================================================== */

/* extra status / action colours used across the module */
.cl-pill--warn {
    color: #d97706;
    background: color-mix(in srgb, #f59e0b 16%, var(--ld-card));
}

html[data-theme="dark"] .cl-pill--warn {
    color: #fbbf24;
}

.cl-icon-btn--move { --c: #f59e0b; }
.cl-icon-btn--warn { --c: #f97316; }
.cl-icon-btn--notify { --c: #ec4899; }

/* icon buttons that also carry a short label ("1", "2", check/cross) */
.pay-page .cl-icon-btn.pay-lvl,
.pay-page .cl-icon-btn.pay-approve {
    width: auto;
    min-width: 32px;
    padding: 0 9px;
    gap: 5px;
    font-weight: 800;
    font-size: 12px;
}

.pay-page .pay-lvl--1 { --c: #7c3aed; }
.pay-page .pay-lvl--2 { --c: #3b82f6; }
.pay-page .pay-approve { --c: #10b981; }

    .pay-page .pay-approve .text-success,
    .pay-page .pay-approve .text-danger {
        color: inherit !important;
    }

.pay-page #payrollHistoryTable .cl-actions,
.pay-page table.dataTable .cl-actions {
    justify-content: center;
    flex-wrap: wrap;
    max-width: 190px;
    margin: 0 auto;
}

/* header total */
.pay-page .pay-total {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
    white-space: nowrap;
}

/* filter extras */
.pay-page .cl-filter .form-control {
    height: 40px;
}

.pay-page .cl-filter .select2-container {
    width: 100% !important;
}

.pay-page .pay-toolbar-filter {
    align-items: flex-end;
}

.pay-page .pay-date-filter {
    min-width: 280px;
    flex: 0 1 360px;
}

.pay-page .pay-filter-card {
    padding-top: 16px;
    padding-bottom: 16px;
}

    .pay-page .pay-filter-card .pay-date-filter {
        max-width: 420px;
    }

.pay-page .pay-toggles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
    margin: -4px 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

@media (max-width: 991px) {
    .pay-page .pay-toggles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pay-page .pay-toggles {
        grid-template-columns: 1fr;
    }
}

.pay-page .pay-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* grids */
.pay-page table.dataTable,
.pay-page .pay-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

    .pay-page table.dataTable thead th,
    .pay-page .pay-table thead th {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        white-space: normal;
        vertical-align: middle;
        min-width: 90px;
    }

    .pay-page table.dataTable tbody td,
    .pay-page .pay-table tbody td {
        vertical-align: middle;
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 13px;
        color: var(--ld-text);
    }

.pay-page .pay-th-check {
    min-width: 110px !important;
}

.pay-page .pay-check-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.pay-page .pay-table input[type="checkbox"],
.pay-page .pay-check-all input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ld-accent);
    cursor: pointer;
    vertical-align: middle;
}

.pay-page .pay-person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-weight: 600;
    min-width: 150px;
}

.pay-page .pay-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    object-fit: cover;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.pay-page .pay-project {
    font-weight: 700;
}

.pay-page .pay-code {
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    color: var(--ld-text-muted);
}

.pay-page .pay-money {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ld-text);
}

/* injured / incorrect-time flags */
.pay-page .pay-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 12px;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

    .pay-page .pay-flag.is-on {
        color: #ef4444;
        background: color-mix(in srgb, #ef4444 15%, var(--ld-card));
    }

/* project summary sections */
.pay-page .pay-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .pay-page .pay-section-head .cf-section-head {
        margin: 0;
        padding: 0;
        border: none;
    }

.pay-page .pay-section {
    border-top: 3px solid var(--cc, var(--ld-accent));
}

.pay-page .pay-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* shared export-button styling for the extra DataTables button holders */
.pay-page #custom-Category-buttons .dt-buttons,
.pay-page #custom-SubTask-buttons .dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pay-page #custom-Category-buttons .dt-button,
.pay-page #custom-SubTask-buttons .dt-button {
    border: 1px solid var(--ld-border) !important;
    background: var(--ld-card) !important;
    color: var(--ld-text) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

    .pay-page #custom-Category-buttons .dt-button:hover,
    .pay-page #custom-SubTask-buttons .dt-button:hover {
        background: var(--ld-accent-soft) !important;
        border-color: var(--ld-accent) !important;
        color: var(--ld-accent) !important;
    }

/* small single-card forms (Download CSV) */
.pay-page .pay-narrow {
    max-width: 640px;
}

.pay-page .pay-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ld-border);
}

/* time log form (clock-out / approval) */
.pay-page .pay-yn input:disabled + span {
    cursor: default;
}

.pay-page .pay-yn .prj-yn-opt:has(input:disabled) {
    cursor: default;
}

.pay-page .pay-time {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ld-text);
}

    .pay-page .pay-time i,
    .pay-page .pay-time .svg-inline--fa {
        color: var(--ld-accent);
    }

.pay-page .pay-decision .btn {
    white-space: normal;
    line-height: 1.35;
}

/* ionRangeSlider on the approval Edit pages */
.pay-page .pay-range {
    padding: 4px 8px 0;
}

.pay-page .irs--flat .irs-line,
.pay-page .irs--round .irs-line,
.pay-page .irs .irs-line {
    background: var(--ld-track-bg);
    border-color: var(--ld-border);
}

.pay-page .irs--flat .irs-bar,
.pay-page .irs--round .irs-bar,
.pay-page .irs .irs-bar {
    background: var(--ld-accent);
    border-color: var(--ld-accent);
}

.pay-page .irs--flat .irs-handle > i:first-child,
.pay-page .irs--flat .irs-handle.state_hover > i:first-child,
.pay-page .irs--flat .irs-handle:hover > i:first-child {
    background: color-mix(in srgb, var(--ld-accent) 85%, black);
}

.pay-page .irs--flat .irs-from,
.pay-page .irs--flat .irs-to,
.pay-page .irs--flat .irs-single,
.pay-page .irs--round .irs-from,
.pay-page .irs--round .irs-to,
.pay-page .irs--round .irs-single {
    background: var(--ld-accent);
    font-weight: 700;
}

    .pay-page .irs--flat .irs-from::before,
    .pay-page .irs--flat .irs-to::before,
    .pay-page .irs--flat .irs-single::before {
        border-top-color: var(--ld-accent);
    }

.pay-page .irs-grid-text,
.pay-page .irs-min,
.pay-page .irs-max {
    color: var(--ld-text-muted) !important;
    background: transparent !important;
}

.pay-page .irs-grid-pol {
    background: var(--ld-border);
}

/* approval flow (Edit page card + modal list) */
.pay-flow ul#rejection-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .pay-flow ul#rejection-notes-list > li {
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid var(--ld-border) !important;
        background: var(--ld-track-bg) !important;
        color: var(--ld-text);
        font-size: 12.5px;
        line-height: 1.55;
    }

        .pay-flow ul#rejection-notes-list > li.text-muted {
            color: var(--ld-text-muted);
            text-align: center;
        }

        .pay-flow ul#rejection-notes-list > li .badge {
            border-radius: 999px;
            padding: 3px 9px;
            font-size: 11px;
            font-weight: 700;
        }

        .pay-flow ul#rejection-notes-list > li .badge.bg-success {
            background: color-mix(in srgb, #10b981 18%, var(--ld-card)) !important;
            color: #059669 !important;
        }

        .pay-flow ul#rejection-notes-list > li .badge.bg-danger {
            background: color-mix(in srgb, #ef4444 16%, var(--ld-card)) !important;
            color: #dc2626 !important;
        }

        .pay-flow ul#rejection-notes-list > li .badge.bg-secondary {
            background: var(--ld-card) !important;
            color: var(--ld-text-muted) !important;
        }

        .pay-flow ul#rejection-notes-list > li .text-primary {
            color: var(--ld-accent) !important;
        }

        .pay-flow ul#rejection-notes-list > li strong {
            color: var(--ld-text);
        }

.pay-page .pay-flow-card .pay-flow {
    max-height: 360px;
    overflow-y: auto;
}

.pay-approval-modal .pay-flow {
    margin: 16px 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--ld-border);
}

.pay-approval-modal .pay-flow-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

    .pay-approval-modal .pay-flow-title i,
    .pay-approval-modal .pay-flow-title .svg-inline--fa {
        color: var(--ld-accent);
    }

.pay-approval-modal .pay-flow-scroll {
    max-height: 220px;
    overflow-y: auto;
}

/* key/value grid in the approval modal (the modal lives outside .pay-page) */
.pay-approval-modal .pay-kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pay-approval-modal .pay-kv-wide {
    grid-column: 1 / -1;
}

.pay-approval-modal .prj-kv-item {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
    min-width: 0;
}

.pay-approval-modal .prj-kv-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.pay-approval-modal .prj-kv-value {
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ld-text);
    word-break: break-word;
}

@media (max-width: 575px) {
    .pay-approval-modal .pay-kv {
        grid-template-columns: 1fr;
    }
}

/* map popup */
.pay-map {
    height: 500px;
    width: 100%;
}

@media (max-width: 575px) {
    .pay-map {
        height: 360px;
    }
}

/* set performance pay */
.pay-page .pay-summary {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--ld-border);
}

.pay-perf-modal .pay-perf-total {
    font-size: 15px;
    font-weight: 800;
    color: var(--ld-text);
    font-variant-numeric: tabular-nums;
}

.pay-perf-modal .pay-param {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

    .pay-perf-modal .pay-param--master {
        border-color: color-mix(in srgb, var(--ld-accent) 45%, var(--ld-border));
        background: var(--ld-accent-soft);
    }

.pay-perf-modal .pay-param-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ld-text);
}

.pay-perf-modal .pay-param-amount {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
    font-variant-numeric: tabular-nums;
}

.pay-perf-modal .cl-switch input:disabled + .cl-switch-track {
    opacity: 0.6;
    cursor: not-allowed;
}

.pay-perf-modal .cl-empty i,
.pay-perf-modal .cl-empty .svg-inline--fa {
    color: var(--ld-accent);
}

/* ==========================================================================
   Account Settings (Views/Account/Index.cshtml) - .acc-page
   --------------------------------------------------------------------------
   Replaces the old bg-info / bg-green / bg-danger / bg-primary / bg-orange
   accordion headers, input-group-prepend icon boxes and the float:right +/-
   buttons. The sections keep their original accordion ids and collapse
   targets (#collapseOne..Six), so Bootstrap's collapse.js drives the new
   .acc-toggle buttons exactly as it drove the old header links. The cost
   percentage and goal fields are laid out as compact matrices that fold into
   labelled cards when their section gets narrow (container queries).
   ========================================================================== */

/* per-section accent (--c is also read by .cf-link-btn icons in the side nav) */
.acc-c-green { --c: #10b981; }
.acc-c-indigo { --c: #6366f1; }
.acc-c-sky { --c: #0ea5e9; }
.acc-c-red { --c: #ef4444; }
.acc-c-blue { --c: #3b82f6; }
.acc-c-amber { --c: #f59e0b; }

.acc-page .acc-sec {
    scroll-margin-top: 96px;
}

    .acc-page section.acc-sec,
    .acc-page .acc-sec > .ld-card {
        box-shadow: inset 3px 0 0 var(--c, var(--ld-accent)), var(--ld-shadow);
    }

    .acc-page .acc-sec .cf-section-icon {
        color: var(--c, var(--ld-accent));
        background: color-mix(in srgb, var(--c, var(--ld-accent)) 15%, var(--ld-card));
    }

/* ---------- Collapsible section header ---------- */
.acc-page .acc-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .acc-page .acc-toggle:focus {
        outline: none;
    }

    .acc-page .acc-toggle:focus-visible {
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

.acc-page .acc-toggle-text {
    flex: 1;
    min-width: 0;
}

    .acc-page .acc-toggle-text > span {
        display: block;
    }

.acc-page .acc-chevron {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .acc-page .acc-chevron > * {
        font-size: 13px;
        transition: transform 0.2s ease;
    }

.acc-page .acc-toggle:hover .acc-chevron {
    color: var(--c, var(--ld-accent));
    background: color-mix(in srgb, var(--c, var(--ld-accent)) 15%, var(--ld-card));
}

.acc-page .acc-toggle.collapsed .acc-chevron > *,
.acc-page .acc-toggle[aria-expanded="false"] .acc-chevron > * {
    transform: rotate(-90deg);
}

.acc-page .acc-sec-body {
    container-type: inline-size;
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--ld-border);
}

/* ---------- Inputs with a leading icon / unit ---------- */
.acc-page .acc-input {
    position: relative;
    min-width: 0;
}

    /* icons sit in a span: Font Awesome's all.js swaps the <i> for an <svg> */
    .acc-page .acc-ico {
        display: flex;
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        font-size: 13px;
        color: var(--ld-text-muted);
        pointer-events: none;
        transition: color 0.15s ease;
    }

    .acc-page .acc-ico ~ .form-control {
        padding-left: 40px;
    }

    .acc-page .acc-input:focus-within > .acc-ico {
        color: var(--ld-accent);
    }

    .acc-page .acc-pct::after,
    .acc-page .acc-cur::before {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        font-weight: 600;
        color: var(--ld-text-muted);
        pointer-events: none;
    }

    .acc-page .acc-pct::after {
        content: "%";
        right: 12px;
    }

    .acc-page .acc-cur::before {
        content: "$";
        left: 12px;
        z-index: 1;
    }

.acc-page .acc-matrix .acc-pct .form-control {
    padding-right: 30px;
}

.acc-page .acc-matrix .acc-cur .form-control {
    padding-left: 26px;
}

.acc-page .cf-phone {
    grid-template-columns: 112px minmax(0, 1fr);
}

.acc-page .acc-phones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 18px;
    margin-bottom: 16px;
}

/* ---------- Matrix (Bid Settings + goals) ---------- */
.acc-page .acc-matrix {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acc-page .acc-cols-2 { --n: 2; }
.acc-page .acc-cols-4 { --n: 4; }

.acc-page .acc-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.15fr) repeat(var(--n), minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--ld-border);
    border-radius: 12px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .acc-page .acc-row:not(.acc-row-head):hover,
    .acc-page .acc-row:not(.acc-row-head):focus-within {
        border-color: color-mix(in srgb, var(--c, var(--ld-accent)) 45%, var(--ld-border));
        background: color-mix(in srgb, var(--c, var(--ld-accent)) 5%, transparent);
    }

.acc-page .acc-row-head {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.acc-page .acc-row-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ld-text);
    line-height: 1.25;
}

    .acc-page .acc-row-label .acc-row-ico {
        width: 30px;
        height: 30px;
        flex: none;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12.5px;
        color: var(--c, var(--ld-accent));
        background: color-mix(in srgb, var(--c, var(--ld-accent)) 15%, var(--ld-card));
    }

.acc-page .acc-cell-label {
    display: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
    margin-bottom: 4px;
}

.acc-page .acc-matrix .form-control {
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

    .acc-page .acc-matrix .form-control::-webkit-outer-spin-button,
    .acc-page .acc-matrix .form-control::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

@container (max-width: 640px) {
    .acc-page .acc-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acc-page .acc-row-head {
        display: none;
    }

    .acc-page .acc-row-label {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .acc-page .acc-cell-label {
        display: block;
    }
}

@container (max-width: 340px) {
    .acc-page .acc-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Payroll configuration ---------- */
.acc-page .acc-weekday {
    max-width: 420px;
    margin-bottom: 20px;
}

    .acc-page .acc-weekday .form-control:disabled {
        opacity: 1;
        cursor: not-allowed;
        background: var(--ld-track-bg);
        color: var(--ld-text);
    }

.acc-page .acc-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.02em;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

.acc-page .acc-ranges {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acc-page .acc-range {
    padding: 14px 18px 6px;
    border: 1px solid var(--ld-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--c) 5%, var(--ld-card));
}

.acc-page .acc-range-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .acc-page .acc-range-head label {
        margin: 0;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ld-text);
    }

.acc-page .acc-dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent);
}

.acc-page .irs--flat .irs-line {
    background: var(--ld-track-bg);
}

.acc-page .irs--flat .irs-bar {
    background: var(--c, var(--ld-accent));
}

.acc-page .irs--flat .irs-handle > i:first-child,
.acc-page .irs--flat .irs-handle.state_hover > i:first-child,
.acc-page .irs--flat .irs-handle:hover > i:first-child {
    background: color-mix(in srgb, var(--c, var(--ld-accent)) 80%, black);
}

.acc-page .irs--flat .irs-from,
.acc-page .irs--flat .irs-to,
.acc-page .irs--flat .irs-single {
    background: var(--c, var(--ld-accent));
    font-weight: 700;
}

    .acc-page .irs--flat .irs-from::before,
    .acc-page .irs--flat .irs-to::before,
    .acc-page .irs--flat .irs-single::before {
        border-top-color: var(--c, var(--ld-accent));
    }

.acc-page .irs--flat .irs-min,
.acc-page .irs--flat .irs-max,
.acc-page .irs-grid-text {
    color: var(--ld-text-muted) !important;
    background: var(--ld-track-bg) !important;
}

.acc-page .irs-grid-pol {
    background: var(--ld-border);
}

/* ---------- Side card ---------- */
.acc-page .acc-org {
    text-align: center;
}

.acc-page .acc-org-avatar {
    width: 64px;
    height: 64px;
    margin: 4px auto 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 60%, #a855f7));
    box-shadow: 0 10px 24px -10px var(--ld-accent);
}

.acc-page .acc-org-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--ld-text);
    overflow-wrap: anywhere;
}

.acc-page .acc-org-site {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
    overflow-wrap: anywhere;
}

.acc-page .acc-org .cf-side-hint {
    margin: 14px 0;
}

.acc-page .cf-side .cf-link-btn {
    padding: 7px 10px;
    font-size: 12.5px;
}

    .acc-page .cf-side .cf-link-btn + .cf-link-btn {
        margin-top: 6px;
    }

    .acc-page .cf-side .cf-link-btn .acc-link-ico {
        width: 26px;
        height: 26px;
        flex: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: var(--c, var(--ld-accent));
        background: color-mix(in srgb, var(--c, var(--ld-accent)) 15%, var(--ld-card));
    }

/* ==========================================================================
   Billing & Subscription - .bil-page / .pr-page
   --------------------------------------------------------------------------
   Views/Subscription (Index, UpdatePaymentMethod, UpgradePlan + its modals
   and the _PrivacyPolicyContent / _TermsAndConditionsContent partials,
   Unauthorized, Expired) and Views/PricingPlan/Pricing.cshtml.
   Replaces the per-page <style> blocks those views used to carry. Built on
   the ld-* tokens so it follows the light/dark theme; Expired and the public
   Pricing page render inside _AuthLayout (light tokens, no dashboard.css),
   so nothing they use depends on .ld-card.
   Icons that get a box/tile are wrapped in a span, because Font Awesome's
   all.js swaps the <i> for an <svg> on the in-app layout.
   ========================================================================== */

/* per-element tone (--c) */
.bil-tone-green { --c: #10b981; }
.bil-tone-blue { --c: #3b82f6; }
.bil-tone-amber { --c: #f59e0b; }
.bil-tone-red { --c: #ef4444; }
.bil-tone-violet { --c: #8b5cf6; }
.bil-tone-accent { --c: var(--ld-accent); }

.bil-page .cf-section-icon {
    color: var(--c, var(--ld-accent));
    background: color-mix(in srgb, var(--c, var(--ld-accent)) 15%, var(--ld-card));
}

.bil-ico {
    display: inline-flex;
    align-items: center;
}

.bil-grow {
    flex: 1;
    min-width: 0;
}

.bil-label {
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.bil-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ld-text);
}

.bil-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, var(--ld-card));
    vertical-align: 1px;
}

/* ---------- Billing overview (Index) ---------- */
.bil-layout {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1099px) {
    .bil-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bil-col {
    min-width: 0;
}

.bil-page .bil-plan {
    padding: 0;
    overflow: hidden;
}

.bil-plan-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 22px 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 55%, #a855f7));
}

    .bil-plan-hero::before,
    .bil-plan-hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        pointer-events: none;
    }

    .bil-plan-hero::before {
        width: 220px;
        height: 220px;
        right: -70px;
        top: -90px;
    }

    .bil-plan-hero::after {
        width: 140px;
        height: 140px;
        right: 60px;
        bottom: -80px;
        background: rgba(255, 255, 255, 0.08);
    }

    .bil-plan-hero > * {
        position: relative;
        z-index: 1;
    }

.bil-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bil-plan-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.bil-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
}

.bil-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent);
}

.bil-plan-name {
    margin: 14px 0 2px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}

.bil-plan-price {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

    .bil-plan-price span {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        opacity: 0.85;
    }

.bil-plan-sub {
    margin: 6px 0 0;
    font-size: 12.5px;
    opacity: 0.88;
}

.bil-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 18px 20px 0;
}

.bil-fact {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--ld-track-bg);
}

    .bil-fact dt {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
    }

    .bil-fact dd {
        margin: 4px 0 0;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ld-text);
        overflow-wrap: anywhere;
    }

.bil-fact-wide {
    grid-column: 1 / -1;
}

.bil-pm {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bil-pm-brand {
    width: 38px;
    height: 26px;
    flex: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--ld-text);
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
}

.bil-pm-exp {
    font-weight: 600;
    color: var(--ld-text-muted);
}

.bil-alert {
    display: flex;
    gap: 12px;
    margin: 14px 20px 0;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--c) 30%, var(--ld-border));
    background: color-mix(in srgb, var(--c) 9%, var(--ld-card));
}

    .bil-alert p {
        margin: 4px 0 8px;
        font-size: 13px;
        color: var(--ld-text);
    }

.bil-alert-ico {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 18%, var(--ld-card));
}

.bil-alert-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c);
    line-height: 1.35;
}

.bil-page .bil-alert .bil-alert-muted {
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

.bil-page .btn.bil-btn-soft {
    color: var(--c);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
    box-shadow: none;
}

    .bil-page .btn.bil-btn-soft:hover {
        color: #fff;
        background: var(--c);
    }

.bil-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 20px;
}

.bil-page .bil-actions .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
}

.bil-page .btn.bil-btn-danger {
    color: #ef4444;
    background: transparent;
    border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
    box-shadow: none;
}

    .bil-page .btn.bil-btn-danger:hover {
        color: #fff;
        background: #ef4444;
    }

/* payment retries */
.bil-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .bil-table th {
        padding: 8px 10px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        background: var(--ld-track-bg);
    }

        .bil-table th:first-child {
            border-radius: 8px 0 0 8px;
        }

        .bil-table th:last-child {
            border-radius: 0 8px 8px 0;
        }

    .bil-table td {
        padding: 10px;
        border-bottom: 1px solid var(--ld-border);
        color: var(--ld-text);
        vertical-align: top;
    }

    .bil-table tr:last-child td {
        border-bottom: 0;
    }

.bil-retry-no {
    width: 70px;
    font-weight: 800;
}

.bil-retry-date {
    width: 150px;
    color: var(--ld-text-muted) !important;
    white-space: nowrap;
}

.bil-retry-reason {
    color: #ef4444 !important;
    font-weight: 600;
}

/* history timeline */
.bil-count {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

.bil-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bil-tl-item {
    position: relative;
    padding: 0 0 16px 52px;
}

    .bil-tl-item:last-child {
        padding-bottom: 0;
    }

    .bil-tl-item:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 17px;
        top: 40px;
        bottom: 4px;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(var(--c), var(--ld-border));
        opacity: 0.55;
    }

.bil-tl-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, var(--ld-card));
    box-shadow: 0 0 0 4px var(--ld-card);
}

.bil-tl-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .bil-tl-card:hover {
        border-color: color-mix(in srgb, var(--c) 45%, var(--ld-border));
        box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--c) 70%, transparent);
    }

.bil-tl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.bil-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, var(--ld-card));
}

.bil-tl-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--ld-text-muted);
}

.bil-tl-title {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ld-text);
}

.bil-flow {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

.bil-flow-to {
    color: var(--ld-accent);
}

.bil-calc {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, #f59e0b 45%, var(--ld-border));
    background: color-mix(in srgb, #f59e0b 8%, var(--ld-card));
}

.bil-calc-title {
    font-size: 12px;
    font-weight: 700;
    color: color-mix(in srgb, #d97706 80%, var(--ld-text));
}

.bil-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.bil-tl-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--ld-border);
}

/* ---------- Card forms (UpdatePaymentMethod, UpgradePlan) ---------- */
.bil-input {
    position: relative;
}

.bil-input-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    font-size: 13px;
    color: var(--ld-text-muted);
    pointer-events: none;
}

.bil-page .bil-input .form-control {
    padding-left: 40px;
}

.bil-input:focus-within .bil-input-ico {
    color: var(--ld-accent);
}

.bil-stripe-box {
    height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid var(--ld-border);
    background: var(--ld-input-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .bil-stripe-box.focused {
        border-color: var(--ld-accent);
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

.bil-stripe-mount {
    width: 100%;
}

.bil-errors {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #ef4444;
}

    .bil-errors:empty {
        display: none;
    }

.bil-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ld-border);
}

.bil-page .btn.bil-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

    .bil-page .btn.bil-submit .spinner-border {
        width: 1.1rem;
        height: 1.1rem;
        border-width: 0.15em;
    }

    .bil-page .btn.bil-submit:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }

.bil-page .btn.bil-submit-block {
    width: 100%;
    margin-top: 18px;
    padding: 13px 16px;
    font-size: 15px;
}

.bil-cc {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.586;
    padding: 20px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--ld-accent) 55%, transparent) 0%, transparent 45%),
                radial-gradient(circle at 10% 110%, rgba(168, 85, 247, 0.45) 0%, transparent 50%),
                linear-gradient(135deg, #1f2430, #34384d);
    box-shadow: 0 24px 44px -24px rgba(10, 11, 16, 0.7);
}

.bil-cc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bil-cc-chip {
    width: 40px;
    height: 30px;
    border-radius: 7px;
    background: linear-gradient(135deg, #f7d88b, #c9a24a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.bil-cc-wave {
    display: inline-flex;
    font-size: 18px;
    opacity: 0.75;
    transform: rotate(90deg);
}

.bil-cc-number {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
}

.bil-cc-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.bil-cc-label {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.bil-cc-value {
    font-size: 13px;
    font-weight: 600;
}

.bil-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .bil-points li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--ld-text);
    }

.bil-point-ico {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, var(--ld-card));
}

/* ---------- Checkout (UpgradePlan) ---------- */
.bil-head-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
}

.bil-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1099px) {
    .bil-checkout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bil-summary {
    position: sticky;
    top: 96px;
}

@media (max-width: 1099px) {
    .bil-summary {
        position: static;
        order: -1;
    }
}

.bil-features {
    list-style: none;
    margin: 0;
    padding: 16px 20px 0;
    display: grid;
    gap: 8px;
}

    .bil-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: var(--ld-text);
    }

.bil-feature-ico {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
}

.bil-breakdown {
    margin: 16px 20px 20px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ld-track-bg);
}

.bil-breakdown-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ld-text);
}

.bil-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    font-size: 12.5px;
}

    .bil-breakdown-row span {
        color: var(--ld-text-muted);
    }

    .bil-breakdown-row strong {
        color: var(--ld-text);
        white-space: nowrap;
    }

    .bil-breakdown-row .bil-credit {
        color: #10b981;
    }

.bil-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 8px;
    padding-top: 12px;
    /* sits on --ld-track-bg, which equals --ld-border in dark mode */
    border-top: 1px dashed color-mix(in srgb, var(--ld-text) 20%, transparent);
}

    .bil-total span {
        font-size: 13px;
        font-weight: 700;
        color: var(--ld-text);
    }

    .bil-total strong {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--ld-accent);
    }

.bil-how {
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    border-radius: 10px;
    border: 1px dashed var(--ld-border);
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ld-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .bil-how:hover {
        color: var(--ld-accent);
        border-color: var(--ld-accent);
    }

.bil-agree {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ld-track-bg);
}

.bil-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    color: var(--ld-text);
    cursor: pointer;
}

    .bil-check input {
        width: 18px;
        height: 18px;
        flex: none;
        margin: 0;
        accent-color: var(--ld-accent);
        cursor: pointer;
    }

.bil-link {
    font-weight: 700;
    color: var(--ld-accent) !important;
}

    .bil-link:hover {
        text-decoration: underline;
    }

.bil-secure-note {
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--ld-text-muted);
}

/* checkout modals (calculation + legal) */
.bil-modal .modal-dialog {
    max-width: 560px;
}

.bil-modal.legal-modal .modal-dialog {
    max-width: 720px;
}

.bil-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .bil-modal-title p {
        margin: 2px 0 0;
        font-size: 12.5px;
        opacity: 0.88;
    }

    .bil-modal-title .modal-title {
        margin: 0;
    }

.bil-modal-ico {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.18);
}

.bil-modal .modal-footer {
    justify-content: center;
}

.bil-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .bil-steps li {
        display: flex;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--ld-border);
        background: var(--ld-card);
    }

        .bil-steps li p {
            margin: 4px 0 0;
            font-size: 12.5px;
            line-height: 1.55;
            color: var(--ld-text-muted);
        }

            .bil-steps li p strong {
                color: var(--ld-text);
            }

            .bil-steps li p .bil-step-result {
                color: var(--c);
            }

    .bil-steps .bil-step-final {
        border-color: color-mix(in srgb, var(--c) 40%, var(--ld-border));
        background: color-mix(in srgb, var(--c) 8%, var(--ld-card));
    }

.bil-step-no {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, var(--ld-card));
}

.bil-step-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ld-text);
}

.legal-modal .modal-body {
    max-height: 62vh;
    overflow-y: auto;
}

.legal-content {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ld-text-muted);
}

    .legal-content h4 {
        margin: 20px 0 8px;
        font-size: 15px;
        font-weight: 800;
        color: var(--ld-text);
    }

        .legal-content h4:first-child {
            margin-top: 0;
        }

    .legal-content h5 {
        margin: 14px 0 6px;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ld-text);
    }

    .legal-content p {
        margin: 0 0 10px;
    }

    .legal-content ul {
        margin: 0 0 10px;
        padding-left: 18px;
    }

    .legal-content li {
        margin-bottom: 4px;
    }

    .legal-content strong {
        color: var(--ld-text);
    }

    .legal-content table {
        width: 100%;
        margin: 8px 0 14px;
        border-collapse: collapse;
        font-size: 12.5px;
    }

        .legal-content table th,
        .legal-content table td {
            padding: 8px 10px;
            border: 1px solid var(--ld-border);
            vertical-align: top;
        }

        .legal-content table th {
            font-weight: 700;
            color: var(--ld-text);
            background: var(--ld-track-bg);
        }

    .legal-content .doc-meta {
        display: inline-block;
        margin-bottom: 14px;
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--ld-text-muted);
        background: var(--ld-track-bg);
    }

/* ---------- Notice pages (Unauthorized in-app, Expired on _AuthLayout) ---------- */
.bil-notice {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.bil-notice-full {
    min-height: 100vh;
    padding: 24px 16px;
    background: radial-gradient(circle at 12% 18%, color-mix(in srgb, #ef4444 10%, transparent) 0%, transparent 40%),
                radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--ld-accent) 10%, transparent) 0%, transparent 40%),
                var(--ld-bg);
}

.bil-notice-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 520px;
    padding: 40px 32px 32px;
    border-radius: 20px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    box-shadow: var(--ld-shadow);
    text-align: center;
}

    .bil-notice-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #a855f7));
    }

    .bil-notice-card h2 {
        margin: 6px 0 10px;
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: var(--ld-text);
    }

    .bil-notice-card p {
        max-width: 420px;
        margin: 0 auto 24px;
        font-size: 14px;
        line-height: 1.65;
        color: var(--ld-text-muted);
    }

.bil-notice-ico {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, var(--ld-card));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 6%, transparent);
}

.bil-notice-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c);
}

.bil-notice-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bil-page .bil-notice-actions .btn,
.bil-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
}

/* Expired lives on _AuthLayout, where the .crm-page button styles don't apply */
.bil-btn {
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.12s ease, filter 0.12s ease, border-color 0.15s ease, color 0.15s ease;
}

    .bil-btn:hover {
        transform: translateY(-1px);
    }

.bil-btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 75%, #f59e0b));
    box-shadow: 0 10px 22px -12px var(--ld-accent);
}

    .bil-btn-primary:hover {
        filter: brightness(0.96);
    }

.bil-btn-ghost {
    color: var(--ld-text) !important;
    border: 1px solid var(--ld-border);
}

    .bil-btn-ghost:hover {
        color: var(--ld-accent) !important;
        border-color: var(--ld-accent);
    }

/* ---------- Pricing (Views/PricingPlan/Pricing.cshtml) - .pr-page ----------
   Rendered both in-app (_Layout, light/dark) and publicly (_AuthLayout).
   The billing toggle / setBillingCycle() script still drives .toggle-btn.active,
   .pricing-card display, .price-num, price-subtext-* and the cta-* links. */
.pr-page {
    position: relative;
    color: var(--ld-text);
}

.pr-public {
    min-height: 100vh;
    padding: 40px 20px 48px;
    background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--ld-accent) 16%, transparent) 0%, transparent 45%),
                var(--ld-bg);
}

    .pr-public .pricing-hero,
    .pr-public .pricing-cards-container {
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
    }

.pr-page .pricing-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 36px 24px 30px;
    border-radius: 24px;
    border: 1px solid var(--ld-border);
    text-align: center;
    background: linear-gradient(165deg, color-mix(in srgb, var(--ld-accent) 13%, var(--ld-card)) 0%, var(--ld-card) 62%);
    box-shadow: var(--ld-shadow);
}

    .pr-page .pricing-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(color-mix(in srgb, var(--ld-text) 14%, transparent) 1px, transparent 1px);
        background-size: 18px 18px;
        -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
        mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
        opacity: 0.5;
        pointer-events: none;
    }

    .pr-page .pricing-hero > * {
        position: relative;
    }

.pr-page .pr-back {
    position: absolute;
    top: 18px;
    left: 20px;
    margin: 0;
}

.pr-page .pricing-hero-logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.pr-page .pricing-hero-logo {
    max-width: 100px;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
}

.pr-page .pricing-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ld-accent);
    background: var(--ld-card);
    border: 1px solid color-mix(in srgb, var(--ld-accent) 35%, var(--ld-border));
}

.pr-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ld-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-accent) 25%, transparent);
}

.pr-page .pricing-hero-title {
    max-width: 760px;
    margin: 0 auto 12px;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ld-text);
}

    .pr-page .pricing-hero-title span {
        background: linear-gradient(90deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 45%, #a855f7));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.pr-page .pricing-hero-subtitle {
    max-width: 620px;
    margin: 0 auto 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ld-text-muted);
}

.pr-page .billing-toggle-container {
    display: flex;
    justify-content: center;
}

.pr-page .billing-toggle-pill {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

.pr-page .toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ld-text-muted);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    .pr-page .toggle-btn:focus {
        outline: none;
    }

    .pr-page .toggle-btn:focus-visible {
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

    .pr-page .toggle-btn.active {
        color: var(--ld-text);
        background: var(--ld-card);
        box-shadow: 0 2px 8px rgba(20, 22, 31, 0.12);
    }

.pr-page .discount-tag {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: #10b981;
    background: color-mix(in srgb, #10b981 15%, var(--ld-card));
}

.pr-page .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    align-items: stretch;
    padding-top: 12px;
}

/* card tone from the family icon class */
.pr-page .icon-free-trial { --c: #64748b; }
.pr-page .icon-starter { --c: #3b82f6; }
.pr-page .icon-growth { --c: var(--ld-accent); }
.pr-page .icon-enterprise { --c: #8b5cf6; }
.pr-page .icon-custom { --c: #10b981; }

.pr-page .pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    border-radius: 20px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    box-shadow: var(--ld-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .pr-page .pricing-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--c, var(--ld-accent)) 45%, var(--ld-border));
        box-shadow: 0 24px 44px -26px color-mix(in srgb, var(--c, var(--ld-accent)) 60%, rgba(20, 22, 31, 0.4));
    }

    .pr-page .pricing-card.recommended {
        border: 1.5px solid var(--ld-accent);
        background: linear-gradient(180deg, color-mix(in srgb, var(--ld-accent) 8%, var(--ld-card)) 0%, var(--ld-card) 45%);
        box-shadow: 0 24px 48px -26px var(--ld-accent);
    }

    .pr-page .pricing-card.custom-card {
        background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, var(--ld-card)) 0%, var(--ld-card) 45%);
    }

.pr-page .card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 55%, #a855f7));
    box-shadow: 0 8px 18px -8px var(--ld-accent);
}

.pr-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.pr-page .card-icon-placeholder {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, var(--ld-card));
}

.pr-page .plan-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--ld-text);
}

.pr-page .plan-best-for {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ld-text-muted);
}

.pr-page .price-container {
    margin-bottom: 16px;
}

.pr-page .price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.pr-page .price-value {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ld-text);
}

    .pr-page .price-value.pr-price-text {
        font-size: 24px;
        letter-spacing: -0.01em;
    }

.pr-page .price-period {
    font-size: 13px;
    font-weight: 600;
    color: var(--ld-text-muted);
}

.pr-page .price-sub-label {
    min-height: 18px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ld-text-muted);
}

.pr-page .cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    /* the text is swapped by setBillingCycle(), so the arrow lives in CSS */
    .pr-page .cta-btn::after {
        content: "\2192";
        margin-left: 8px;
        transition: transform 0.15s ease;
    }

    .pr-page .cta-btn:hover {
        transform: translateY(-1px);
    }

        .pr-page .cta-btn:hover::after {
            transform: translateX(3px);
        }

    .pr-page .cta-btn.pr-cta-accent,
    .pr-page .cta-btn.pr-cta-accent:hover {
        color: #fff;
        background: linear-gradient(135deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 75%, #f59e0b));
        box-shadow: 0 12px 24px -14px var(--ld-accent);
    }

    .pr-page .cta-btn.pr-cta-dark,
    .pr-page .cta-btn.pr-cta-dark:hover {
        color: var(--ld-card);
        background: var(--ld-text);
    }

    .pr-page .cta-btn.pr-cta-ghost {
        color: var(--ld-text);
        background: transparent;
        border-color: var(--ld-border);
    }

        .pr-page .cta-btn.pr-cta-ghost:hover {
            color: var(--ld-accent);
            border-color: var(--ld-accent);
        }

    .pr-page .cta-btn:hover {
        filter: brightness(0.97);
    }

.pr-page .card-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

    .pr-page .card-separator::before,
    .pr-page .card-separator::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--ld-border);
    }

.pr-page .features-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pr-page .feature-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--ld-border);
}

    .pr-page .feature-item:last-child {
        border-bottom: 0;
    }

.pr-page .feature-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

.pr-feat-ico {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--c, var(--ld-accent));
    background: var(--ld-track-bg);
}

.pr-page .feature-value {
    font-size: 12.5px;
    font-weight: 700;
    text-align: right;
    color: var(--ld-text);
}

.pr-page .pricing-footer-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 16px;
}

    .pr-page .pricing-footer-labels > span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ld-text);
        background: var(--ld-card);
        border: 1px solid var(--ld-border);
    }

.pr-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #10b981;
    background: color-mix(in srgb, #10b981 15%, var(--ld-card));
}

.pr-page .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ld-text-muted) !important;
    text-decoration: none !important;
}

    .pr-page .back-btn:hover {
        color: var(--ld-accent) !important;
    }

@media (max-width: 767px) {
    .pr-page .pr-back {
        position: static;
        display: inline-flex;
        margin-bottom: 14px;
    }

    .pr-page .pricing-hero {
        padding: 24px 16px;
    }

    .pr-public {
        padding: 20px 14px 32px;
    }

    .bil-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .bil-form-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   PDF Layout (Views/PDFLayout/Index.cshtml) - .pdl-page
   --------------------------------------------------------------------------
   Replaces the page's old inline <style> block (dropzone, custom-switch) and
   the inline styles on its controls. The mock PDF pages keep their exact
   geometry (moved from inline styles into the .pdl-p1-* / .pdl-p2-* /
   .pdl-wo-* rules below, same values); only the Razor-rendered brand colors
   stay inline, because the page script updates those live via
   .preview-footer-bg / .preview-footer-text / .preview-header-line /
   .preview-proposal-inner-border.
   ========================================================================== */

/* ---------- Engine toggle bar ---------- */
.pdl-page .pdl-engine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.pdl-engine-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 320px;
}

.pdl-engine-ico {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #6366f1;
    background: color-mix(in srgb, #6366f1 15%, var(--ld-card));
}

.pdl-engine-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ld-text);
}

.pdl-engine-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

.pdl-engine-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* Bootstrap custom-switch, restyled as a pill toggle */
.pdl-page .pdl-switch {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 6px 16px 6px 64px;
    border-radius: 999px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
}

    .pdl-page .pdl-switch .custom-control-label {
        position: static;
        margin: 0;
        padding: 0;
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--ld-text);
        cursor: pointer;
        user-select: none;
    }

        .pdl-page .pdl-switch .custom-control-label::before {
            top: 50%;
            left: 10px;
            width: 44px;
            height: 24px;
            margin-top: -12px;
            border-radius: 999px;
            border: 0;
            background: color-mix(in srgb, var(--ld-text-muted) 45%, var(--ld-card));
            box-shadow: none;
            transition: background-color 0.2s ease;
        }

        .pdl-page .pdl-switch .custom-control-label::after {
            top: 50%;
            left: 13px;
            width: 18px;
            height: 18px;
            margin-top: -9px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s ease;
        }

    .pdl-page .pdl-switch .custom-control-input:checked ~ .custom-control-label::before {
        background: var(--ld-accent);
    }

    .pdl-page .pdl-switch .custom-control-input:checked ~ .custom-control-label::after {
        background: #fff;
        transform: translateX(20px);
    }

    .pdl-page .pdl-switch .custom-control-input:focus-visible ~ .custom-control-label::before {
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

/* ---------- Two-column layout ---------- */
.pdl-layout {
    display: grid;
    grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1199px) {
    .pdl-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pdl-group + .pdl-group {
    margin-top: 22px;
}

.pdl-group-title {
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

/* ---------- Logo drop zone ---------- */
.pdl-drop {
    padding: 22px;
    border-radius: 14px;
    border: 2px dashed var(--ld-border);
    background: color-mix(in srgb, var(--ld-track-bg) 55%, var(--ld-card));
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .pdl-drop:hover,
    .pdl-drop.is-dragover {
        border-color: var(--ld-accent);
        background: color-mix(in srgb, var(--ld-accent) 7%, var(--ld-card));
    }

.pdl-drop-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .pdl-drop-prompt small {
        font-size: 12px;
        color: var(--ld-text-muted);
    }

.pdl-drop-ico {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
}

.pdl-drop-title {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ld-text);
}

    .pdl-drop-title span {
        color: var(--ld-accent);
    }

.pdl-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    /* checkerboard so transparent logos read correctly */
    background-color: #fff;
    background-image: linear-gradient(45deg, #eef0f4 25%, transparent 25%),
                      linear-gradient(-45deg, #eef0f4 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #eef0f4 75%),
                      linear-gradient(-45deg, transparent 75%, #eef0f4 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

    .pdl-logo-frame img {
        max-height: 120px;
        max-width: 100%;
        object-fit: contain;
        border-radius: 4px;
    }

.pdl-drop-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pdl-page .btn.pdl-btn-danger {
    color: #ef4444;
    background: transparent;
    border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
    box-shadow: none;
}

    .pdl-page .btn.pdl-btn-danger:hover {
        color: #fff;
        background: #ef4444;
    }

/* ---------- Color rows ---------- */
.pdl-color {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    transition: border-color 0.15s ease;
}

    .pdl-color + .pdl-color {
        margin-top: 10px;
    }

    .pdl-color:focus-within {
        border-color: color-mix(in srgb, var(--ld-accent) 55%, var(--ld-border));
    }

.pdl-page .pdl-swatch {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 0 1px var(--ld-border), 0 4px 10px -4px rgba(0, 0, 0, 0.35);
}

    .pdl-page .pdl-swatch::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .pdl-page .pdl-swatch::-webkit-color-swatch {
        border: 0;
        border-radius: 12px;
    }

    .pdl-page .pdl-swatch::-moz-color-swatch {
        border: 0;
        border-radius: 12px;
    }

.pdl-color-info {
    min-width: 0;
}

    .pdl-color-info label {
        display: block;
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--ld-text);
        cursor: pointer;
    }

    .pdl-color-info small {
        display: block;
        margin-top: 2px;
        font-size: 11.5px;
        color: var(--ld-text-muted);
    }

.pdl-color-ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pdl-page .form-control.pdl-hex {
    width: 96px;
    height: 36px;
    padding: 0 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.pdl-page .pdl-color-ctrl .btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .pdl-color {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .pdl-color-ctrl {
        grid-column: 1 / -1;
    }
}

.pdl-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ld-border);
}

.pdl-page .pdl-actions .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
}

/* ---------- Preview card ---------- */
.pdl-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.pdl-preview-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pdl-page .pdl-tabs {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
    overflow-x: auto;
}

    .pdl-page .pdl-tabs .nav-link {
        /* legacy template gives the active pill a 1px #0275d8 bottom border */
        border: 0 !important;
        padding: 7px 14px;
        border-radius: 9px;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        color: var(--ld-text-muted);
        background: transparent;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .pdl-page .pdl-tabs .nav-link:hover {
            color: var(--ld-text);
        }

        .pdl-page .pdl-tabs .nav-link.active {
            color: var(--ld-text);
            background: var(--ld-card);
            box-shadow: 0 2px 8px rgba(20, 22, 31, 0.14);
        }

/* design-tool style canvas the paper sits on */
.pdl-canvas {
    min-height: 620px;
    padding: 28px 16px;
    border-radius: 14px;
    overflow-x: auto;
    background-color: color-mix(in srgb, var(--ld-track-bg) 70%, var(--ld-bg));
    background-image: radial-gradient(color-mix(in srgb, var(--ld-text) 16%, transparent) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* ---------- Mock PDF pages (geometry mirrors the generated PDF) ---------- */
.pdl-paper {
    position: relative;
    width: 440px;
    height: 570px;
    margin: 0 auto;
    padding: 1.5rem;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    color: #333;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 30px 60px -30px rgba(0, 0, 0, 0.45);
    transition: all 0.3s ease;
}

    .pdl-paper strong {
        font-weight: 700;
    }

.pdl-right {
    text-align: right;
}

.pdl-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pdl-logo-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-align: center;
    color: #6c757d;
    border: 1px dashed #ccc;
}

.pdl-logo-empty-mini {
    font-size: 6px;
}

.pdl-logo-empty-wo {
    width: 100px;
    font-size: 8px;
}

.pdl-line {
    height: 8px;
    width: 100%;
    margin-bottom: 5px;
    border-radius: 2px;
    background-color: #f5f5f5;
}

.pdl-line-sm {
    height: 6px;
    margin-bottom: 4px;
}

.pdl-w95 { width: 95%; }
.pdl-w90 { width: 90%; }
.pdl-w75 { width: 75%; }

/* proposal page 1 (cover) */
.pdl-paper-cover {
    border: 4px solid #333;
}

.pdl-p1-border {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    border: 2px solid;
    pointer-events: none;
}

.pdl-p1-logo {
    position: absolute;
    top: 70px;
    left: 40px;
    width: 170px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdl-p1-info {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 160px;
    height: 210px;
    padding: 12px;
    font-size: 8px;
    line-height: 1.5;
    color: #333;
    background-color: #e6e6e6;
}

    .pdl-p1-info strong {
        display: block;
    }

    .pdl-p1-info .pdl-doc-type {
        margin-bottom: 6px;
        font-size: 9px;
    }

    .pdl-p1-info span {
        display: block;
        margin-bottom: 4px;
        color: #666;
    }

        .pdl-p1-info span.pdl-tight {
            margin-bottom: 0;
        }

        .pdl-p1-info span.pdl-bold {
            font-weight: 700;
        }

.pdl-p1-spec {
    position: absolute;
    top: 270px;
    left: 45px;
    right: 45px;
    font-size: 9px;
    line-height: 1.6;
}

.pdl-spec-title {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #333;
}

.pdl-p1-contact {
    position: absolute;
    bottom: 120px;
    left: 16px;
    right: 16px;
    height: 60px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: #fff;
    background-color: #3c3c3c;
}

    .pdl-p1-contact strong {
        display: block;
        font-size: 9px;
    }

.pdl-p1-footer {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
    height: 50px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdl-p1-footer-text {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

/* proposal page 2+ */
.pdl-p2-header {
    position: absolute;
    top: 10px;
    left: 25px;
    right: 25px;
    height: 50px;
}

.pdl-p2-logo-row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}

.pdl-p2-logo {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdl-p2-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 6px;
    color: #444;
}

.pdl-head-line {
    height: 1px;
    flex-grow: 1;
}

.pdl-p2-body {
    position: absolute;
    top: 75px;
    left: 25px;
    right: 25px;
    font-size: 8px;
    line-height: 1.8;
}

.pdl-p2-title {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    color: #333;
}

/* footer shared by page 2+ and the work order */
.pdl-doc-footer {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    height: 45px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

    .pdl-doc-footer strong {
        display: block;
        font-size: 8px;
    }

/* work order */
.pdl-wo-logo {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdl-wo-logo-img {
    max-height: 100%;
    max-width: 120px;
    object-fit: contain;
}

.pdl-wo-title {
    margin-bottom: 8px;
    text-align: center;
}

    .pdl-wo-title > div:first-child {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
    }

.pdl-wo-rule {
    width: 100%;
    height: 1px;
    background-color: #ddd;
}

.pdl-wo-band {
    height: 15px;
    padding: 2px 8px;
    display: flex;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
}

.pdl-wo-band-gap {
    margin-top: 1rem;
}

.pdl-wo-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0.5rem 0 1rem;
    font-size: 7px;
    line-height: 1.4;
    color: #333;
}

.pdl-wo-table {
    width: 100%;
    margin-top: 4px;
    border-collapse: collapse;
    font-size: 7px;
}

    .pdl-wo-table thead tr {
        background-color: #f5f5f5;
    }

    .pdl-wo-table th,
    .pdl-wo-table td {
        padding: 3px;
        border: 1px solid #ddd;
    }

/* ==========================================================================
   Users module (Views/Users: Index, Create, Edit, UploadPicture) - .usr-page
   --------------------------------------------------------------------------
   Built on the CRM page kit (cl-head, cl-kpis, ld-card, cf-* forms). The
   Performance Pay modal (Users/Index + Performance/_UserPerformanceParameters)
   and the Reset Password modal (Users/Edit) sit outside the page root, so
   their rules are scoped to .usr-perf-modal / .usr-reset-modal instead.
   ========================================================================== */

/* ---------- Users table ---------- */
.usr-page .usr-avatar {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

    .usr-page .usr-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.usr-page .usr-username {
    font-weight: 600;
    color: var(--ld-text);
    word-break: break-word;
}

.usr-page .usr-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.usr-page .usr-role {
    --h: 220;
    color: hsl(var(--h) 60% 42%);
    background: hsl(var(--h) 80% 55% / 0.14);
}

.usr-page .cl-icon-btn--perf {
    --c: #06b6d4;
}

.usr-page #usersTable td {
    vertical-align: middle;
}

/* ---------- Forms ---------- */
.usr-page .usr-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.usr-page .usr-span-all {
    grid-column: 1 / -1;
}

@media (max-width: 991px) {
    .usr-page .usr-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .usr-page .usr-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* $ prefix inside the pay-rate inputs */
.usr-page .usr-money {
    position: relative;
}

    .usr-page .usr-money > span {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: var(--ld-text-muted);
        pointer-events: none;
    }

    .usr-page .usr-money > .form-control {
        padding-left: 34px;
    }

/* Password input with a show / hide button inside it (Create page + Reset Password modal) */
.usr-pass {
    position: relative;
}

    .usr-pass > .form-control {
        padding-right: 46px;
    }

.usr-pass-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ld-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .usr-pass-toggle:hover,
    .usr-pass-toggle:focus-visible {
        outline: none;
        background: var(--ld-accent-soft);
        color: var(--ld-accent);
    }

.usr-page .usr-reset-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, #f5941e 55%, transparent);
    font-weight: 700;
    color: #f5941e !important;
    background: color-mix(in srgb, #f5941e 12%, var(--ld-card));
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .usr-page .usr-reset-btn:hover {
        color: #fff !important;
        background: #f5941e;
    }

/* Toggle list in the side card */
.usr-page .usr-toggles {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .usr-page .usr-toggles .cl-switch {
        position: relative;
        align-items: flex-start;
        line-height: 1.35;
    }

    .usr-page .usr-toggles .cl-switch-track {
        flex: none;
        margin-top: -1px;
    }

.usr-page .usr-help {
    margin-left: 4px;
    color: var(--ld-accent);
    cursor: help;
}

/* Profile card at the top of the Edit side column */
.usr-page .usr-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.usr-page .usr-photo {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--ld-accent) !important;
    background: var(--ld-accent-soft);
    box-shadow: 0 0 0 4px var(--ld-card), 0 0 0 6px var(--ld-accent-soft);
    text-decoration: none !important;
}

    .usr-page .usr-photo > img {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

.usr-page .usr-photo-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: var(--ld-accent);
    border: 3px solid var(--ld-card);
    transition: transform 0.15s ease;
}

.usr-page .usr-photo:hover .usr-photo-edit {
    transform: scale(1.1);
}

.usr-page .usr-profile-name {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--ld-text);
}

/* ---------- Goals (Edit) ---------- */
.usr-page .usr-goal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .usr-page .usr-goal-head .cf-section-head {
        flex: 1;
        margin: 0;
        padding: 0;
        border: none;
    }

.usr-page .usr-goals > .collapse,
.usr-page .usr-goals > .collapsing {
    margin-top: 16px;
    padding-top: 2px;
    border-top: 1px solid var(--ld-border);
}

.usr-page .usr-goal-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ld-accent);
}

    .usr-page .usr-goal-sub::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--ld-border);
    }

/* MyNumberBoxWithIconFor output: .form-group > label + .input-group + .invalid-feedback */
.usr-page .usr-goal-grid .form-group {
    margin: 0;
}

.usr-page .usr-goal-grid label {
    font-weight: 700 !important;
}

.usr-page .usr-goal-grid .input-group {
    flex-wrap: nowrap;
}

    .usr-page .usr-goal-grid .input-group > .form-control {
        border-radius: 0 10px 10px 0;
    }

.usr-page .usr-goal-grid .input-group-text {
    width: 44px;
    justify-content: center;
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
    border: 1px solid var(--ld-border);
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.usr-page .usr-goal-grid .invalid-feedback:empty {
    display: none;
}

/* ---------- Upload picture ---------- */
.usr-page .usr-pic-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

@media (max-width: 767px) {
    .usr-page .usr-pic-grid {
        grid-template-columns: 1fr;
    }
}

.usr-page .usr-pic-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.usr-page .usr-pic-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 240px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
    border: 1px solid var(--ld-border);
}

    .usr-page .usr-pic-frame > img {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: var(--ld-card);
    }

.usr-page .usr-pic-caption {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.usr-page .usr-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    border-radius: 16px;
    border: 2px dashed color-mix(in srgb, var(--ld-accent) 40%, var(--ld-border));
    background: color-mix(in srgb, var(--ld-accent) 5%, var(--ld-card));
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .usr-page .usr-drop:hover {
        border-color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

.usr-page .usr-drop-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    font-size: 22px;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
}

.usr-page .usr-drop-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--ld-text);
}

.usr-page .usr-drop-sub {
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

.usr-page .usr-drop input[type=file] {
    max-width: 100%;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ld-text);
}

    .usr-page .usr-drop input[type=file]::file-selector-button {
        margin-right: 12px;
        padding: 8px 16px;
        border: none;
        border-radius: 8px;
        font-weight: 700;
        color: #fff;
        background: var(--ld-accent);
        cursor: pointer;
    }

/* ---------- Performance Pay modal (Users/Index) ---------- */
.usr-perf-modal .modal-body {
    max-height: 62vh;
    overflow-y: auto;
}

.usr-perf-loading {
    padding: 40px 0;
    text-align: center;
    color: var(--ld-accent);
}

    .usr-perf-loading p {
        margin: 12px 0 0;
        font-size: 13px;
        color: var(--ld-text-muted);
    }

.usr-perf-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

    .usr-perf-hint i,
    .usr-perf-hint .svg-inline--fa {
        color: var(--ld-accent);
    }

.usr-perf-table {
    color: var(--ld-text);
}

    .usr-perf-table thead th {
        border-top: none;
        border-bottom: 1px solid var(--ld-border);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        background: transparent;
    }

    .usr-perf-table td {
        border-top: 1px solid var(--ld-border);
        padding: 10px 12px;
    }

    .usr-perf-table .usr-perf-name {
        font-size: 14px;
        font-weight: 700;
    }

    .usr-perf-table .input-group {
        flex-wrap: nowrap;
    }

    .usr-perf-table .input-group-text {
        width: 38px;
        justify-content: center;
        font-weight: 700;
    }

    .usr-perf-table .form-control {
        height: 40px;
        font-size: 14px;
    }

.usr-perf-empty {
    padding: 28px 0;
}

.usr-perf-foot {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.usr-perf-total {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--ld-accent-soft);
}

.usr-perf-total-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.usr-perf-total-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--ld-accent);
    font-variant-numeric: tabular-nums;
}

.usr-perf-actions {
    display: flex;
    gap: 8px;
}

/* ---------- Reset Password modal (Users/Edit) ---------- */
.usr-reset-modal .modal-header {
    background: linear-gradient(135deg, #f5941e, color-mix(in srgb, #f5941e 70%, #ef4444));
}

.usr-reset-modal .form-control {
    height: 44px;
}

.usr-reset-modal .usr-reset-submit {
    color: #fff !important;
    background: #f5941e;
    border-color: #f5941e;
}

    .usr-reset-modal .usr-reset-submit:hover {
        filter: brightness(0.95);
    }

/* ==========================================================================
   Configuration pages - .cfg-page
   --------------------------------------------------------------------------
   TypeOfWorks, SubTasks, ClientType, PropertyTypes, Source, ProposalItems,
   GeneralBidItems (Index / Create / Edit) and PerformancePay/Index. Built on
   the CRM page kit (cl-head, cl-kpis, ld-card, cf-* forms); these rules only
   cover what those pages add on top.
   ========================================================================== */

/* ---------- List pages ---------- */
.cfg-page .cfg-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .cfg-page .cfg-kpis {
        grid-template-columns: 1fr;
    }
}

.cfg-page .cfg-card-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .cfg-page .cfg-card-title span {
        font-size: 15px;
        font-weight: 800;
        color: var(--ld-text);
    }

    .cfg-page .cfg-card-title small {
        font-size: 12px;
        color: var(--ld-text-muted);
    }

.cfg-page .cfg-table td {
    vertical-align: middle;
}

.cfg-page .cfg-desc {
    display: inline-block;
    max-width: 520px;
    color: var(--ld-text-muted);
    white-space: normal;
    word-break: break-word;
}

/* Proposal item category, tinted per category name */
.cfg-page .cfg-cat {
    --h: 220;
    color: hsl(var(--h) 60% 42%);
    background: hsl(var(--h) 80% 55% / 0.14);
}

/* General bid items */
.cfg-page .cfg-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.cfg-page .cfg-unit {
    white-space: nowrap;
    color: var(--ld-text-muted);
    font-weight: 600;
}

.cfg-page .cfg-num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ld-text);
}

.cfg-page .cfg-num--total {
    font-weight: 800;
    color: var(--ld-accent);
}

/* ---------- Forms ---------- */
.cfg-page .cf-field label i,
.cfg-page .cf-field label .svg-inline--fa {
    margin-right: 4px;
    color: var(--ld-accent);
}

/* $ prefix inside the price inputs */
.cfg-page .cfg-money {
    position: relative;
}

    .cfg-page .cfg-money > span {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: var(--ld-text-muted);
        pointer-events: none;
    }

    .cfg-page .cfg-money > .form-control {
        padding-left: 34px;
    }

.cfg-page .cfg-money--total > span {
    color: var(--ld-accent);
}

.cfg-page .cfg-money--total > .form-control,
.cfg-page .cfg-money--total > .form-control[readonly] {
    font-weight: 800;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
    border-color: color-mix(in srgb, var(--ld-accent) 35%, var(--ld-border));
}

.cfg-page .cfg-modified {
    margin-top: 16px;
}

    .cfg-page .cfg-modified .form-control[readonly] {
        background: var(--ld-track-bg);
    }

/* Bid variables list (Proposal Items / Edit) */
.cfg-page .cfg-vars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .cfg-page .cfg-vars li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        background: var(--ld-track-bg);
        border: 1px solid var(--ld-border);
    }

    .cfg-page .cfg-vars b {
        display: block;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        color: var(--ld-text);
        word-break: break-all;
    }

    .cfg-page .cfg-vars small {
        display: block;
        margin-top: 2px;
        font-size: 11.5px;
        color: var(--ld-text-muted);
    }

.cfg-page .cfg-var-btn {
    --c: #ef4444;
    flex: none;
}

/* ---------- Performance Pay - .ppy-page ---------- */
.ppy-page .ppy-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.ppy-page .ppy-role {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex: 1 1 320px;
}

    .ppy-page .ppy-role .cf-section-icon {
        width: 44px;
        height: 44px;
    }

.ppy-page .ppy-role-field {
    flex: 1;
    max-width: 420px;
}

.ppy-page .ppy-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

    .ppy-page .ppy-hint i,
    .ppy-page .ppy-hint .svg-inline--fa {
        color: var(--ld-accent);
    }

.ppy-page .ppy-table thead th {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.ppy-page .ppy-table td {
    vertical-align: middle;
}

.ppy-page .ppy-name {
    font-weight: 600;
    color: var(--ld-text);
}

.ppy-page .ppy-name-text {
    margin-right: 8px;
}

/* The always-on "Production vs Man Hours" row (class set by the page script) */
.ppy-page .mandatory-row td {
    background: color-mix(in srgb, #f59e0b 9%, var(--ld-card));
}

    .ppy-page .mandatory-row td:first-child {
        box-shadow: inset 4px 0 0 #f59e0b;
        font-weight: 700;
    }

.ppy-page .ppy-lock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: #d97706;
    background: color-mix(in srgb, #f59e0b 18%, var(--ld-card));
}

/* Visible checkbox shown as a toggle */
.ppy-page .ppy-toggle {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

    .ppy-page .ppy-toggle input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.ppy-page .ppy-toggle-track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ld-text-muted) 35%, var(--ld-card));
    transition: background-color 0.18s ease;
}

    .ppy-page .ppy-toggle-track::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        transition: transform 0.18s ease;
    }

.ppy-page .ppy-toggle input:checked + .ppy-toggle-track {
    background: var(--ld-accent);
}

    .ppy-page .ppy-toggle input:checked + .ppy-toggle-track::after {
        transform: translateX(18px);
    }

.ppy-page .ppy-toggle input:focus-visible + .ppy-toggle-track {
    box-shadow: 0 0 0 3px var(--ld-accent-soft);
}

.ppy-page .ppy-toggle input:disabled + .ppy-toggle-track {
    background: #f59e0b;
    cursor: not-allowed;
}

/* $ prefix inside the amount inputs */
.ppy-page .ppy-amount {
    position: relative;
}

    .ppy-page .ppy-amount > span {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: var(--ld-text-muted);
        pointer-events: none;
    }

    .ppy-page .ppy-amount > .form-control {
        height: 40px;
        padding-left: 32px;
        font-variant-numeric: tabular-nums;
    }

        .ppy-page .ppy-amount > .form-control:disabled {
            opacity: 0.55;
            background: var(--ld-track-bg);
        }

.ppy-page .ppy-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ld-border);
}

/* ==========================================================================
   Suppliers module - .sup-page
   --------------------------------------------------------------------------
   Suppliers (Index / Create / Edit) and the Asphalt / Stone / Concrete / Metal
   plant pages (Index / Create / Edit / Products / WasteProducts). Built on the
   CRM page kit. The Products pages' scripts find the form via $(".pagebody"),
   so each page keeps one <div class="pagebody"> around its form.
   ========================================================================== */

/* ---------- List pages ---------- */
.sup-page .sup-card-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .sup-page .sup-card-title span {
        font-size: 15px;
        font-weight: 800;
        color: var(--ld-text);
    }

    .sup-page .sup-card-title small {
        font-size: 12px;
        color: var(--ld-text-muted);
    }

.sup-page .sup-table td {
    vertical-align: middle;
}

/* Grids: same compact scale as the CRM / Projects grids (small uppercase headers, 13px cells),
   so the 11-column Suppliers grid fits the card instead of pushing Active / Action off-screen.
   Shared with the Services grids (.svc-page .svc-table). */
.sup-page table.dataTable.sup-table,
.svc-page table.dataTable.svc-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

    .sup-page table.dataTable.sup-table thead th,
    .svc-page table.dataTable.svc-table thead th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        background: var(--ld-track-bg);
        white-space: nowrap;
        vertical-align: middle;
        padding: 12px 28px 12px 12px;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

        .sup-page table.dataTable.sup-table thead th:first-child,
        .svc-page table.dataTable.svc-table thead th:first-child {
            border-radius: 10px 0 0 0;
        }

        .sup-page table.dataTable.sup-table thead th:last-child,
        .svc-page table.dataTable.svc-table thead th:last-child {
            border-radius: 0 10px 0 0;
        }

        .sup-page table.dataTable.sup-table thead th.sorting_disabled,
        .svc-page table.dataTable.svc-table thead th.sorting_disabled {
            padding-right: 12px;
        }

    .sup-page table.dataTable.sup-table tbody td,
    .svc-page table.dataTable.svc-table tbody td {
        font-size: 13px;
        color: var(--ld-text);
        padding: 12px 10px;
        border-left: none !important;
        border-right: none !important;
    }

    .sup-page table.dataTable.sup-table .cl-org,
    .svc-page table.dataTable.svc-table .cl-org {
        min-width: 180px;
    }

    .sup-page table.dataTable.sup-table .cl-avatar,
    .svc-page table.dataTable.svc-table .cl-avatar {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 12px;
    }

    .sup-page table.dataTable.sup-table .cl-link,
    .svc-page table.dataTable.svc-table .cl-link {
        font-size: 12.5px;
    }

    .sup-page table.dataTable.sup-table .cl-chip,
    .svc-page table.dataTable.svc-table .cl-chip {
        margin-top: 4px;
        padding: 2px 9px;
        font-size: 11px;
    }

    .sup-page table.dataTable.sup-table .sup-web,
    .sup-page table.dataTable.sup-table .sup-manager {
        font-size: 13px;
    }

.sup-page .sup-web,
.sup-page .sup-manager {
    white-space: nowrap;
    font-weight: 600;
    color: var(--ld-text);
}

    .sup-page .sup-web i,
    .sup-page .sup-web .svg-inline--fa,
    .sup-page .sup-manager i,
    .sup-page .sup-manager .svg-inline--fa {
        margin-right: 4px;
        color: var(--ld-text-muted);
    }

.sup-page .cl-icon-btn--products {
    --c: #10b981;
}

.sup-page .cl-icon-btn--waste {
    --c: #f59e0b;
}

/* ---------- Plant tabs (General Info / Products / Waste Products) ---------- */
.sup-page .sup-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.sup-page .sup-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    color: var(--ld-text-muted) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .sup-page .sup-tab:hover {
        color: var(--ld-accent) !important;
    }

    .sup-page .sup-tab.active {
        background: var(--ld-card);
        color: var(--ld-accent) !important;
        box-shadow: 0 2px 8px rgba(20, 22, 31, 0.14);
        pointer-events: none;
    }

/* ---------- Products / Waste Products ---------- */
/* % suffix inside the tax-rate input */
.sup-page .sup-suffix {
    position: relative;
}

    .sup-page .sup-suffix > .form-control {
        padding-right: 40px;
    }

    .sup-page .sup-suffix > span {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: var(--ld-text-muted);
        pointer-events: none;
    }

.sup-page .cf-field .form-control:disabled {
    background: var(--ld-track-bg);
    color: var(--ld-text);
    opacity: 1;
}

.sup-page .sup-price-table td {
    vertical-align: middle;
}

    .sup-page .sup-price-table td:first-child {
        font-weight: 700;
        color: var(--ld-text);
    }

/* Inputs rendered into the grid by the page script */
.sup-page .sup-price-table .input-group {
    flex-wrap: nowrap;
    max-width: 220px;
    margin: 0 auto;
}

    .sup-page .sup-price-table .input-group > .form-control {
        height: 38px;
        border-radius: 10px 0 0 10px;
        font-variant-numeric: tabular-nums;
    }

        .sup-page .sup-price-table .input-group > .form-control:disabled {
            background: var(--ld-accent-soft);
            color: var(--ld-accent);
            font-weight: 700;
            opacity: 1;
        }

.sup-page .sup-price-table .input-group-text {
    width: 38px;
    justify-content: center;
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
    border: 1px solid var(--ld-border);
    border-left: none;
    border-radius: 0 10px 10px 0;
}

.sup-page .sup-savebar {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ld-border);
}

/* ==========================================================================
   Products module - .prd-page (also carries .cfg-page)
   --------------------------------------------------------------------------
   Asphalt / Emulsion / Stone / Crack Seal / Sealer / Striping / Concrete /
   Metal / Waste products (Index / Create / Edit). Reuses the Configuration
   page rules (cfg-kpis, cfg-desc, cfg-num, cfg-money); these two helpers are
   shared with any .cfg-page form.
   ========================================================================== */
.cfg-page .cfg-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
    .cfg-page .cfg-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* % suffix inside the tax-rate input */
.cfg-page .cfg-suffix {
    position: relative;
}

    .cfg-page .cfg-suffix > .form-control {
        padding-right: 40px;
    }

    .cfg-page .cfg-suffix > span {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: var(--ld-text-muted);
        pointer-events: none;
    }

/* ==========================================================================
   Services module - .svc-page (also carries .cfg-page)
   --------------------------------------------------------------------------
   Trucking Services (truck types), Trucks, Striping Services, Labor Services,
   Equipment Services (equipment types) and Equipments (Index / Create / Edit).
   Grids share the compact .sup-table rules above; forms reuse cf-* and the
   cfg-money / cfg-suffix helpers.
   ========================================================================== */

/* Card title + "Include Inactive" switch on the Trucks / Equipments grids */
.svc-page .svc-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 22px;
}

/* Truck / equipment number */
.svc-page .svc-plate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ld-text);
    white-space: nowrap;
}

    .svc-page .svc-plate i,
    .svc-page .svc-plate .svg-inline--fa {
        font-size: 12px;
        color: var(--ld-accent);
    }

.svc-page table.dataTable.svc-table .cl-chip {
    margin-top: 0;
}

.svc-page table.dataTable.svc-table td.svc-num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Long "Maintenance Cycle Length (Miles)" style headers wrap instead of widening the grid */
.svc-page table.dataTable.svc-table thead th.svc-th-wrap {
    white-space: normal;
    min-width: 120px;
    line-height: 1.35;
}

/* Maintenance due: themed bar (replaces the Bootstrap .progress) + % and remaining label */
.svc-page .svc-due {
    min-width: 170px;
    max-width: 240px;
    margin: 0 auto;
}

.svc-page .svc-due-track {
    height: 8px;
    border-radius: 999px;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
    overflow: hidden;
}

.svc-page .svc-due-fill {
    height: 100%;
    min-width: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #059669);
}

    .svc-page .svc-due-fill.progress-bar-warning {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .svc-page .svc-due-fill.progress-bar-danger {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

.svc-page .svc-due-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ld-text-muted);
    white-space: nowrap;
}

.svc-page .svc-due-pct {
    font-weight: 800;
    color: var(--ld-text);
    font-variant-numeric: tabular-nums;
}

/* Icon inside a cfg-suffix unit slot (Labor "Total Man") */
.svc-page .cfg-suffix > span .svg-inline--fa,
.svc-page .cfg-suffix > span i {
    font-size: 12px;
}

/* ==========================================================================
   Truck Fuels - .tf-page (also carries .cfg-page .svc-page)
   --------------------------------------------------------------------------
   TruckFuels Index / Create / Edit. Index: KPI strip (totals), a filter card
   (date range + 4 selects) and the compact .svc-table grid.
   ========================================================================== */
.tf-page .tf-filter-card {
    margin-bottom: 20px;
}

.tf-page .tf-filter-title {
    margin-bottom: 14px;
}

.tf-page .tf-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 0;
}

@media (max-width: 1399px) {
    .tf-page .tf-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .tf-page .tf-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .tf-page .tf-filters {
        grid-template-columns: 1fr;
    }
}

/* Native selects, the date range input and select2 all sit at one height */
.tf-page .cl-filter .form-control {
    height: 40px;
    font-size: 13.5px;
}

.tf-page .cl-filter .cf-error:empty {
    display: none;
}

/* Grid cells */
.tf-page .tf-project,
.tf-page .tf-person {
    font-weight: 600;
    color: var(--ld-text);
}

.tf-page .tf-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tf-page .tf-amount {
    color: #10b981;
    white-space: nowrap;
}

.tf-page .tf-pay {
    --h: 262;
    color: hsl(var(--h) 70% 60%);
    background: hsl(var(--h) 80% 60% / 0.14);
}

/* 13 columns: let the two-word headers wrap onto two lines so the grid fits the card */
.tf-page table.dataTable.svc-table thead th.svc-th-wrap {
    min-width: 76px;
}

/* "Is Odometer Reading Countable?" switch, lined up with the input beside it */
.tf-page .tf-switch-field {
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
}

/* ==========================================================================
   Truck Inspections - .tki-page (also carries .cfg-page .svc-page)
   --------------------------------------------------------------------------
   TruckInspections Index / CreateNew / Inspection_Edit. The checklist keeps
   the original radio ids/names/values; the radios are visually hidden (not
   display:none, so jQuery Validate still checks them) and drawn as a
   Pass / Fail / N/A segmented control.
   ========================================================================== */

/* ---------- Index ---------- */
/* Truck filter: one filter tile (same look as the Truck Fuel filters) between the toolbar and the grid */
.tki-page .tki-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ld-border);
}

.tki-page .tki-truck-filter {
    width: 340px;
    max-width: 100%;
}

    .tki-page .tki-truck-filter .form-control {
        height: 40px;
        font-size: 13.5px;
    }

    .tki-page .tki-truck-filter .cf-error:empty {
        display: none;
    }

.tki-page .tki-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .tki-page .tki-date i,
    .tki-page .tki-date .svg-inline--fa {
        font-size: 12px;
        color: var(--ld-text-muted);
    }

.tki-page .tki-defects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 760px;
}

/* Chip text comes from data-label, so the cell's only text node is the .sr-only original value */
.tki-page .tki-defect,
.tki-page .tki-clean {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

    .tki-page .tki-defect::before,
    .tki-page .tki-clean::before {
        content: attr(data-label);
    }

.tki-page .tki-defect {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.tki-page .tki-clean {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.tki-page .tki-person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--ld-text);
    white-space: nowrap;
}

.tki-page .tki-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ld-border);
    background: var(--ld-track-bg);
}

/* ---------- Forms: daily-requirement banner ---------- */
.tki-page .tki-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border-radius: 14px;
    background: color-mix(in srgb, #f59e0b 12%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--ld-border));
}

.tki-page .tki-banner-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.18);
}

.tki-page .tki-banner-title {
    font-weight: 800;
    color: var(--ld-text);
    margin-bottom: 2px;
}

.tki-page .tki-banner p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ld-text-muted);
}

/* ---------- Forms: checklist ---------- */
.tki-page .tki-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

@media (max-width: 1399px) {
    .tki-page .tki-list {
        grid-template-columns: 1fr;
    }
}

.tki-page .tki-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 14px;
    padding: 10px 12px 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--ld-border);
    background: var(--ld-track-bg);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tki-page .tki-item--critical {
    border-left: 3px solid #ef4444;
}

/* An item marked Fail, and an item left unanswered on submit */
.tki-page .tki-item:has(input[id$="_false"]:checked) {
    border-color: rgba(239, 68, 68, 0.55);
    background: color-mix(in srgb, #ef4444 8%, var(--ld-track-bg));
}

.tki-page .tki-item:has(.field-validation-error) {
    border-color: #ef4444;
}

.tki-page .tki-item-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ld-text);
}

.tki-page .tki-critical {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.tki-page .tki-item-error {
    grid-column: 1 / -1;
}

    .tki-page .tki-item-error .cf-error {
        display: block;
        margin-top: 6px;
    }

        .tki-page .tki-item-error .cf-error:empty {
            display: none;
        }

.tki-page .tki-seg {
    position: relative;
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
}

    .tki-page .tki-seg input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

.tki-page .tki-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ld-text-muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .tki-page .tki-opt i,
    .tki-page .tki-opt .svg-inline--fa {
        font-size: 11px;
    }

    .tki-page .tki-opt:hover {
        background: var(--ld-track-bg);
        color: var(--ld-text);
    }

.tki-page .tki-seg input:focus-visible + .tki-opt {
    outline: 2px solid var(--ld-accent);
    outline-offset: 1px;
}

.tki-page .tki-seg input:checked + .tki-opt--pass {
    background: #10b981;
    color: #fff;
}

.tki-page .tki-seg input:checked + .tki-opt--fail {
    background: #ef4444;
    color: #fff;
}

.tki-page .tki-seg input:checked + .tki-opt--na {
    background: #64748b;
    color: #fff;
}

.tki-page .tki-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    background: color-mix(in srgb, #ef4444 12%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #ef4444 40%, var(--ld-border));
}

    .tki-page .tki-alert > i,
    .tki-page .tki-alert > .svg-inline--fa {
        margin-top: 2px;
        font-size: 16px;
        color: #ef4444;
    }

    .tki-page .tki-alert strong {
        display: block;
        color: #ef4444;
    }

    .tki-page .tki-alert span {
        color: var(--ld-text-muted);
    }

.tki-page .tki-ai-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ---------- Forms: supervisor priority ---------- */
.tki-page .tki-required {
    color: #ef4444;
}

.tki-page .tki-priority {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 6px;
}

@media (max-width: 767px) {
    .tki-page .tki-priority {
        grid-template-columns: 1fr;
    }
}

.tki-page .tki-prio {
    --p: #ef4444;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--ld-border);
    background: var(--ld-track-bg);
    font-weight: 700;
    color: var(--ld-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tki-page .tki-prio--medium {
    --p: #f59e0b;
}

.tki-page .tki-prio--low {
    --p: #3b82f6;
}

.tki-page .tki-prio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.tki-page .tki-prio-dot {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--p);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .tki-page .tki-prio-dot::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--p);
        transform: scale(0);
        transition: transform 0.15s ease;
    }

.tki-page .tki-prio:hover,
.tki-page .tki-prio:has(input:checked) {
    border-color: var(--p);
}

.tki-page .tki-prio:has(input:checked) {
    background: color-mix(in srgb, var(--p) 14%, var(--ld-card));
}

    .tki-page .tki-prio:has(input:checked) .tki-prio-dot::after {
        transform: scale(1);
    }

.tki-page .tki-prio:has(input:focus-visible) {
    outline: 2px solid var(--p);
    outline-offset: 2px;
}

.tki-page .tki-sup-comments {
    margin-top: 16px;
}

/* ---------- Forms: side checklist tally ---------- */
.tki-page .tki-progress {
    height: 8px;
    margin-bottom: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.tki-page .tki-progress-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--ld-accent);
    transition: width 0.2s ease;
}

    .tki-page .tki-progress-bar.is-done {
        background: #10b981;
    }

.tki-page .tki-progress-label {
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

    .tki-page .tki-progress-label span {
        font-weight: 800;
        color: var(--ld-text);
    }

.tki-page .tki-tally {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.tki-page .tki-tally-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    border-radius: 10px;
    background: var(--ld-track-bg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

    .tki-page .tki-tally-item span {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0;
    }

.tki-page .tki-tally-item--pass span {
    color: #10b981;
}

.tki-page .tki-tally-item--fail span {
    color: #ef4444;
}

.tki-page .tki-tally-item--na span {
    color: #94a3b8;
}

/* ==========================================================================
   Truck Maintenance - .tm-page (also carries .cfg-page .svc-page)
   --------------------------------------------------------------------------
   TruckMaintenance/Index: KPI strip by status, a status filter tile + the
   Include Inactive switch, and the compact .svc-table grid.
   ========================================================================== */
.tm-page .tm-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ld-border);
}

.tm-page .tm-status-filter {
    width: 340px;
    max-width: 100%;
}

    .tm-page .tm-status-filter .form-control {
        height: 40px;
        font-size: 13.5px;
    }

/* Priority: icon + label, tinted by level */
.tm-page .tm-prio {
    --p: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--p);
    background: color-mix(in srgb, var(--p) 14%, var(--ld-card));
    border: 1px solid color-mix(in srgb, var(--p) 30%, transparent);
}

    .tm-page .tm-prio i,
    .tm-page .tm-prio .svg-inline--fa {
        font-size: 11px;
    }

.tm-page .tm-prio--critical {
    --p: #ef4444;
}

.tm-page .tm-prio--high {
    --p: #f97316;
}

.tm-page .tm-prio--medium {
    --p: #0ea5e9;
}

.tm-page .tm-prio--low {
    --p: #10b981;
}

/* Status: cl-pill (dot + label) in the status colour */
.tm-page .tm-status {
    --s: #94a3b8;
    color: var(--s);
    background: color-mix(in srgb, var(--s) 14%, var(--ld-card));
}

.tm-page .tm-status--pending {
    --s: #f59e0b;
}

.tm-page .tm-status--assigned {
    --s: #0ea5e9;
}

.tm-page .tm-status--progress {
    --s: #6366f1;
}

.tm-page .tm-status--done {
    --s: #10b981;
}

/* Requested date: date over time */
.tm-page .tm-when {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .tm-page .tm-when span {
        font-weight: 600;
        color: var(--ld-text);
    }

    .tm-page .tm-when small {
        font-size: 11.5px;
        color: var(--ld-text-muted);
    }

/* Assigned to: avatar + name, role underneath */
.tm-page table.dataTable.svc-table .tm-person {
    min-width: 200px;
}

.tm-page .tm-person small {
    display: block;
    font-size: 11.5px;
    color: var(--ld-text-muted);
}

.tm-page .tm-unassigned {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
    border: 1px dashed var(--ld-border);
    white-space: nowrap;
}

    .tm-page .tm-unassigned i,
    .tm-page .tm-unassigned .svg-inline--fa {
        font-size: 11px;
    }

.tm-page .tm-notes {
    display: inline-block;
    max-width: 320px;
    color: var(--ld-text-muted);
    white-space: normal;
    word-break: break-word;
}

/* ---------- Truck Maintenance forms (Create Request) ---------- */
.tm-page .tm-span-all {
    grid-column: 1 / -1;
}

.tm-page .tm-req {
    margin-left: 2px;
    color: #ef4444;
}

.tm-page .tm-optional {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

.tm-page .tm-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ld-text-muted);
}

.tm-page .tm-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    background: var(--ld-accent-soft);
    border: 1px solid color-mix(in srgb, var(--ld-accent) 25%, var(--ld-border));
}

    .tm-page .tm-note > i,
    .tm-page .tm-note > .svg-inline--fa {
        margin-top: 2px;
        color: var(--ld-accent);
    }

    .tm-page .tm-note p {
        margin: 0;
        line-height: 1.5;
        color: var(--ld-text-muted);
    }

    .tm-page .tm-note strong {
        color: var(--ld-text);
    }

/* Server-side "Please correct the errors below" banner (dismissible) */
.tm-page .tm-form-alert {
    position: relative;
    padding-right: 44px;
}

    .tm-page .tm-form-alert .close {
        position: absolute;
        top: 8px;
        right: 12px;
        padding: 0 4px;
        font-size: 20px;
        color: #ef4444;
        opacity: 0.8;
        text-shadow: none;
    }

/* ==========================================================================
   Equipment modules (Fuels / Maintenances / Inspection)
   --------------------------------------------------------------------------
   The pages reuse the Truck kits: EquipmentFuels -> .tf-page, EquipmentMaintenances
   -> .tm-page, EquipmentInspection -> .tki-page. These rules only add what the
   equipment pages need on top (wrapped-label checklist radios, file inputs,
   the maintenance Details page).
   ========================================================================== */

/* ---------- Grid cells ---------- */
.tm-page .tm-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .tm-page .tm-date i,
    .tm-page .tm-date .svg-inline--fa {
        font-size: 12px;
        color: var(--ld-text-muted);
    }

.tki-page .tki-title {
    font-weight: 700;
    color: var(--ld-text);
}

/* ---------- Inspection checklists: two lists side by side ---------- */
.tki-page .tki-checklists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

@media (max-width: 1399px) {
    .tki-page .tki-checklists {
        grid-template-columns: 1fr;
    }
}

.tki-page .tki-list--single {
    grid-template-columns: 1fr;
}

/* Radios wrapped in their label (the equipment forms render radios with asp-for only, no ids) */
.tki-page .tki-opt {
    position: relative;
}

    .tki-page .tki-opt > input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

.tki-page .tki-opt--pass:has(input:checked) {
    background: #10b981;
    color: #fff;
}

.tki-page .tki-opt--fail:has(input:checked) {
    background: #ef4444;
    color: #fff;
}

.tki-page .tki-opt--na:has(input:checked) {
    background: #64748b;
    color: #fff;
}

.tki-page .tki-opt:has(input:focus-visible) {
    outline: 2px solid var(--ld-accent);
    outline-offset: 1px;
}

.tki-page .tki-item:has(.tki-opt--fail input:checked) {
    border-color: rgba(239, 68, 68, 0.55);
    background: color-mix(in srgb, #ef4444 8%, var(--ld-track-bg));
}

.tki-page .tki-item--warn {
    border-left: 3px solid #f59e0b;
}

.tki-page .tki-critical--warn {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.14);
}

/* ---------- Maintenance forms: file input, cost row, subject banner ---------- */
.tm-page .eqm-file {
    height: 44px;
}

    .tm-page .eqm-file .custom-file-input {
        height: 44px;
        cursor: pointer;
    }

    .tm-page .eqm-file .custom-file-label {
        height: 44px;
        margin: 0;
        padding: 0 118px 0 14px;
        line-height: 42px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
        color: var(--ld-text-muted);
        background: var(--ld-input-bg);
        border: 1px solid var(--ld-border);
        border-radius: 10px;
    }

        .tm-page .eqm-file .custom-file-label::after {
            height: 42px;
            padding: 0 18px;
            line-height: 42px;
            font-weight: 700;
            color: var(--ld-accent);
            background: var(--ld-accent-soft);
            border-left: 1px solid var(--ld-border);
            border-radius: 0 10px 10px 0;
        }

    .tm-page .eqm-file .custom-file-input:focus ~ .custom-file-label {
        border-color: var(--ld-accent);
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
    }

.tm-page .eqm-file-current {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

    .tm-page .eqm-file-current i,
    .tm-page .eqm-file-current .svg-inline--fa {
        color: var(--ld-accent);
    }

.tm-page .eqm-costs {
    margin-top: 16px;
}

.tm-page .eqm-remarks {
    margin-top: 16px;
}

.tm-page .eqm-subject {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--ld-accent-soft);
    border: 1px solid color-mix(in srgb, var(--ld-accent) 25%, var(--ld-border));
}

.tm-page .eqm-subject-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--ld-accent);
    background: var(--ld-card);
}

.tm-page .eqm-subject-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.tm-page .eqm-subject-value {
    color: var(--ld-text);
}

/* ---------- Maintenance Details ---------- */
.tm-page .eqm-label {
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.tm-page .eqm-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px 40px;
}

.tm-page .eqm-pill-lg {
    padding: 6px 14px;
    font-size: 13.5px;
}

.tm-page .eqm-elapsed {
    flex: 1;
    min-width: 240px;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, #6366f1 12%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #6366f1 30%, var(--ld-border));
}

.tm-page .eqm-elapsed-value {
    color: var(--ld-text);
}

    .tm-page .eqm-elapsed-value strong {
        font-size: 16px;
        color: #818cf8;
    }

.tm-page .eqm-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0;
}

@media (max-width: 767px) {
    .tm-page .eqm-dl {
        grid-template-columns: 1fr;
    }
}

.tm-page .eqm-dl dt {
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.tm-page .eqm-dl dd {
    margin: 0;
    font-weight: 600;
    color: var(--ld-text);
    word-break: break-word;
}

.tm-page .eqm-dl-wide {
    grid-column: 1 / -1;
}

    .tm-page .eqm-dl-wide dd {
        font-weight: 500;
        white-space: pre-line;
    }

/* Workflow history timeline */
.tm-page .eqm-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tm-page .eqm-timeline li {
        position: relative;
        display: flex;
        gap: 14px;
        padding-bottom: 18px;
    }

        .tm-page .eqm-timeline li:last-child {
            padding-bottom: 0;
        }

        /* connector line between steps */
        .tm-page .eqm-timeline li:not(:last-child)::before {
            content: "";
            position: absolute;
            top: 34px;
            bottom: 0;
            left: 16px;
            width: 2px;
            background: var(--ld-border);
        }

        .tm-page .eqm-timeline li.is-done:not(:last-child)::before {
            background: color-mix(in srgb, #10b981 45%, var(--ld-border));
        }

.tm-page .eqm-step-icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.tm-page .eqm-timeline li.is-done .eqm-step-icon {
    color: #fff;
    background: #10b981;
    border-color: #10b981;
}

.tm-page .eqm-step-body {
    padding-top: 4px;
}

.tm-page .eqm-step-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 700;
    color: var(--ld-text);
}

.tm-page .eqm-step-meta {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--ld-text-muted);
}

.tm-page .eqm-timeline li:not(.is-done) .eqm-step-title {
    color: var(--ld-text-muted);
}

/* Cost tiles */
.tm-page .eqm-costs-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 767px) {
    .tm-page .eqm-costs-tiles {
        grid-template-columns: 1fr;
    }
}

.tm-page .eqm-cost {
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--k) 10%, var(--ld-card));
    border: 1px solid color-mix(in srgb, var(--k) 28%, var(--ld-border));
}

.tm-page .eqm-cost-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--k);
    font-variant-numeric: tabular-nums;
}

.tm-page .eqm-picture {
    text-align: center;
    color: var(--ld-text-muted);
}

    .tm-page .eqm-picture img {
        border-radius: 12px;
    }

    .tm-page .eqm-picture .spinner-border {
        color: var(--ld-accent);
    }

.tm-page .eqm-side-dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
    font-size: 13px;
}

    .tm-page .eqm-side-dl dt {
        font-weight: 600;
        color: var(--ld-text-muted);
    }

    .tm-page .eqm-side-dl dd {
        margin: 0;
        font-weight: 600;
        color: var(--ld-text);
        text-align: right;
        word-break: break-word;
    }

/* ==========================================================================
   Pavement Business Scores - .pbs-page / Commander Prospects - .prs-page
   (both also carry .cfg-page .svc-page)
   ========================================================================== */

/* ---------- Pavement: list ---------- */
.pbs-page .pbs-id {
    display: inline-block;
    min-width: 38px;
    padding: 3px 9px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

.pbs-page .pbs-score {
    --s: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--s);
    background: color-mix(in srgb, var(--s) 15%, var(--ld-card));
    border: 1px solid color-mix(in srgb, var(--s) 32%, transparent);
}

.pbs-page .pbs-score--high {
    --s: #10b981;
}

.pbs-page .pbs-score--mid {
    --s: #f59e0b;
}

.pbs-page .pbs-score--low {
    --s: #ef4444;
}

.pbs-page .pbs-when,
.prs-page .prs-follow {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .pbs-page .pbs-when span,
    .prs-page .prs-follow span {
        font-weight: 600;
        color: var(--ld-text);
    }

    .pbs-page .pbs-when small,
    .prs-page .prs-follow small {
        font-size: 11.5px;
        color: var(--ld-text-muted);
    }

/* ---------- Pavement: View (read-only results) ---------- */
.pbs-page .pbs-hero {
    display: flex;
    align-items: center;
    gap: 22px;
}

.pbs-page .pbs-hero-score {
    flex: none;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--ld-accent), color-mix(in srgb, var(--ld-accent) 60%, #ef4444));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ld-accent) 30%, transparent);
}

.pbs-page .pbs-hero-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.pbs-page .pbs-hero-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pbs-page .pbs-hero-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--ld-text);
}

.pbs-page .pbs-hero-sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ld-text-muted);
}

.pbs-page .pbs-questions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pbs-page .pbs-q {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ld-border);
}

    .pbs-page .pbs-q:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.pbs-page .pbs-q-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--ld-text);
    line-height: 1.45;
}

.pbs-page .pbs-q-num {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--ld-accent);
    background: var(--ld-accent-soft);
}

.pbs-page .pbs-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 34px;
}

.pbs-page .pbs-opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
    border: 1px solid var(--ld-border);
}

    .pbs-page .pbs-opt i,
    .pbs-page .pbs-opt .svg-inline--fa {
        font-size: 12px;
        opacity: 0.7;
    }

    .pbs-page .pbs-opt.is-selected {
        color: #fff;
        background: var(--ld-accent);
        border-color: var(--ld-accent);
    }

        .pbs-page .pbs-opt.is-selected i,
        .pbs-page .pbs-opt.is-selected .svg-inline--fa {
            opacity: 1;
        }

.pbs-page .pbs-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 0;
}

    .pbs-page .pbs-contact dt {
        margin-top: 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
    }

        .pbs-page .pbs-contact dt:first-child {
            margin-top: 0;
        }

    .pbs-page .pbs-contact dd {
        margin: 0;
        font-weight: 600;
        color: var(--ld-text);
        word-break: break-word;
    }

        .pbs-page .pbs-contact dd .cl-link {
            white-space: normal;
            word-break: break-all;
        }

@media (max-width: 575px) {
    .pbs-page .pbs-hero {
        flex-direction: column;
        text-align: center;
    }

    .pbs-page .pbs-opts {
        padding-left: 0;
    }
}

/* ---------- Commander Prospects ---------- */
.prs-page .prs-strong {
    font-weight: 600;
    color: var(--ld-text);
}

.prs-page .prs-city {
    color: var(--ld-text);
}

.prs-page table.dataTable.svc-table .prs-name {
    min-width: 150px;
}

.prs-page .prs-ext {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

    .prs-page .prs-ext::before {
        content: "ext ";
        opacity: 0.7;
    }

.prs-page .prs-follow {
    padding: 4px 10px;
    border-radius: 10px;
}

    .prs-page .prs-follow.is-upcoming {
        background: color-mix(in srgb, #0ea5e9 12%, var(--ld-card));
    }

        .prs-page .prs-follow.is-upcoming span {
            color: #0ea5e9;
        }

    .prs-page .prs-follow.is-past {
        background: var(--ld-track-bg);
    }

/* Phone rows: type | number | extension */
.prs-page .prs-phone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 16px 18px;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .prs-page .prs-phone {
        grid-template-columns: 1fr;
    }
}

.prs-page .prs-row {
    margin-top: 16px;
}

/* ==========================================================================
   DROPDOWN SYSTEM - the one design every dropdown in the app uses
   --------------------------------------------------------------------------
   Covers select2 (single + multiple, searchable or not), the native <select>
   (closed box + what little of the option list a browser lets us colour) and
   their hover / focus / open / selected / disabled / readonly / error states.

   wwwroot/js/dropdown-enhancer.js upgrades every plain <select> to select2, so
   in practice the select2 rules below are what the user sees everywhere; the
   native rules keep the box identical before the upgrade runs and for the few
   selects that stay native on purpose (colour-coded status pills, date-picker
   month/year pickers).

   This block sits at the END of the file on purpose: legacy style.css and the
   per-module sections above must not be able to restyle a dropdown. A module
   may only change the size tokens (--dd-h / --dd-fs / --dd-pad-x / --dd-radius).
   ========================================================================== */
:root {
    --dd-h: 40px;          /* trigger height */
    --dd-radius: 10px;     /* trigger radius */
    --dd-fs: 14px;         /* trigger font size */
    --dd-pad-x: 12px;      /* trigger horizontal padding */
    --dd-arrow-gap: 22px;  /* room reserved for the arrow */
    --dd-error: #ef4444;
}

/* Size variants - tokens only, never new declarations */
.cf-field {
    --dd-h: 44px;          /* the redesigned forms use 44px inputs */
    --dd-pad-x: 14px;
}

.select2-container.dd-sm,
select.cl-select,
select.cl-select + .select2-container,
select.form-control-sm,
select.form-control-sm + .select2-container,
select.custom-select-sm,
.input-group-sm > select,
.input-group-sm > .select2-container,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .select2-container {
    --dd-h: 34px;
    --dd-fs: 12.5px;
    --dd-pad-x: 10px;
    --dd-radius: 9px;
}

/* ---------- 1. Trigger box: select2 ---------- */
.select2-container {
    max-width: 100%;
    vertical-align: middle;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--ld-input-bg);
    border: 1px solid var(--ld-border);
    border-radius: var(--dd-radius);
    min-height: var(--dd-h);
    font-size: var(--dd-fs);
    color: var(--ld-text);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: var(--dd-h);
    padding: 0;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        flex: 1;
        min-width: 0;
        background: transparent;
        color: var(--ld-text);
        font-size: var(--dd-fs);
        line-height: calc(var(--dd-h) - 2px);
        padding: 0 calc(var(--dd-pad-x) + var(--dd-arrow-gap)) 0 var(--dd-pad-x);
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: var(--ld-text-muted);
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        position: absolute;
        top: 0;
        right: var(--dd-pad-x);
        width: 10px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .select2-container--default .select2-selection--single .select2-selection__arrow b,
        .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
            position: static;
            margin: 0;
            border-style: solid;
            border-width: 5px 4px 0 4px;
            border-color: var(--ld-text-muted) transparent transparent transparent;
            transition: transform 0.15s ease;
        }

    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: var(--ld-accent) transparent transparent transparent;
        transform: rotate(180deg);
    }

    .select2-container--default .select2-selection--single .select2-selection__clear {
        margin-right: 4px;
        color: var(--ld-text-muted);
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
    }

        .select2-container--default .select2-selection--single .select2-selection__clear:hover {
            color: var(--dd-error);
        }

/* multiple: chips + inline search */
.select2-container--default .select2-selection--multiple {
    padding: 3px 6px;
    cursor: text;
}

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding: 0;
        margin: 0;
    }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
            float: none;
            margin: 0;
        }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background: var(--ld-accent-soft);
        border: 1px solid var(--ld-accent);
        border-radius: 7px;
        color: var(--ld-accent);
        padding: 2px 9px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.6;
    }

        .select2-container--default .select2-selection--multiple .select2-selection__choice span {
            color: inherit;
        }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: var(--ld-accent);
        background: transparent;
        border: none;
        margin-right: 6px;
        font-weight: 700;
    }

    .select2-container--default .select2-selection--multiple .select2-search--inline {
        flex: 1 1 60px;
        min-width: 60px;
    }

    .select2-container--default .select2-selection--multiple .select2-search__field {
        background: transparent;
        border: none;
        color: var(--ld-text);
        font-size: var(--dd-fs);
        margin: 0;
        padding: 0 4px;
        height: calc(var(--dd-h) - 10px);
        max-width: 100%;
    }

        .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
            color: var(--ld-text-muted);
            opacity: 1;
        }

    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        color: var(--ld-text-muted);
        font-size: 18px;
        font-weight: 400;
    }

/* hover */
.select2-container--default:not(.select2-container--disabled):hover .select2-selection--single,
.select2-container--default:not(.select2-container--disabled):hover .select2-selection--multiple {
    border-color: color-mix(in srgb, var(--ld-accent) 55%, var(--ld-border));
}

/* focus + open (select2's own theme squares the corners next to the panel) */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border: 1px solid var(--ld-accent);
    border-radius: var(--dd-radius);
    box-shadow: 0 0 0 3px var(--ld-accent-soft);
}

/* disabled + readonly */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple,
select[readonly] + .select2-container--default .select2-selection--single,
select[readonly] + .select2-container--default .select2-selection--multiple {
    background: var(--ld-track-bg);
    border-color: var(--ld-border);
    box-shadow: none;
    cursor: not-allowed;
}

    .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered,
    select[readonly] + .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--ld-text-muted);
    }

    .select2-container--default.select2-container--disabled .select2-selection__arrow b,
    select[readonly] + .select2-container--default .select2-selection__arrow b {
        opacity: 0.5;
    }

    .select2-container--default.select2-container--disabled .select2-selection__clear,
    .select2-container--default.select2-container--disabled .select2-selection__choice__remove {
        display: none;
    }

/* error (jQuery Validation / Bootstrap / the pages that flag .select2-selection directly) */
select.input-validation-error + .select2-container--default .select2-selection,
select.is-invalid + .select2-container--default .select2-selection,
select.error + .select2-container--default .select2-selection,
.has-error .select2-container--default .select2-selection,
.has-danger .select2-container--default .select2-selection,
.select2-container--default .select2-selection.is-invalid {
    border-color: var(--dd-error) !important;
}

select.input-validation-error + .select2-container--focus .select2-selection,
select.input-validation-error + .select2-container--open .select2-selection,
select.is-invalid + .select2-container--focus .select2-selection,
select.is-invalid + .select2-container--open .select2-selection,
.select2-container--focus .select2-selection.is-invalid,
.select2-container--open .select2-selection.is-invalid {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-error) 22%, transparent) !important;
}

/* ---------- 2. Open panel ---------- */
.select2-dropdown,
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    background: var(--ld-card);
    border: 1px solid var(--ld-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 18, 28, 0.18), 0 2px 6px rgba(15, 18, 28, 0.08);
    color: var(--ld-text);
    overflow: hidden;
    z-index: 2050;
    max-width: calc(100vw - 16px);
}

.select2-container--open .select2-dropdown--below {
    margin-top: 4px;
}

.select2-container--open .select2-dropdown--above {
    margin-top: -4px;
}

/* search box */
.select2-container--default .select2-search--dropdown {
    padding: 10px 10px 8px;
}

    .select2-container--default .select2-search--dropdown .select2-search__field {
        height: 38px;
        padding: 0 12px;
        background: var(--ld-input-bg);
        border: 1px solid var(--ld-border);
        border-radius: 9px;
        color: var(--ld-text);
        font-size: 14px;
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border: 1px solid var(--ld-accent);
            box-shadow: 0 0 0 3px var(--ld-accent-soft);
        }

/* option rows */
.select2-container--default .select2-results > .select2-results__options {
    padding: 6px;
    max-height: min(260px, 45vh);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ld-text-muted) 55%, transparent) transparent;
}

.select2-container--default .select2-search--dropdown:not(.select2-search--hide) + .select2-results > .select2-results__options {
    padding-top: 0;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ld-text-muted) 55%, transparent);
    border-radius: 8px;
}

.select2-container--default .select2-results__option {
    padding: 9px 12px;
    margin: 0 0 2px;
    border-radius: 8px;
    color: var(--ld-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
    transition: background-color 0.1s ease, color 0.1s ease;
}

    .select2-container--default .select2-results__option:last-child {
        margin-bottom: 0;
    }

    /* selected */
    .select2-container--default .select2-results__option[aria-selected="true"] {
        background: var(--ld-accent-soft);
        color: var(--ld-accent);
        font-weight: 700;
    }

    /* hover / keyboard highlight */
    .select2-container--default .select2-results__option--highlighted[aria-selected],
    .select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
        background: var(--ld-accent);
        color: #fff;
    }

    .select2-container--default .select2-results__option[aria-disabled="true"] {
        color: var(--ld-text-muted);
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* "No results found" / "Searching..." */
    .select2-container--default .select2-results__option.select2-results__message,
    .select2-container--default .select2-results__option.loading-results {
        color: var(--ld-text-muted);
        font-weight: 500;
        cursor: default;
    }

    /* optgroups */
    .select2-container--default .select2-results__option[role="group"] {
        padding: 0;
        margin: 0;
    }

.select2-container--default .select2-results__group {
    padding: 8px 12px 4px;
    color: var(--ld-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- 3. Trigger box: native <select> ---------- */
select.form-control:where(:not([multiple]):not([size])),
select.form-select:where(:not([multiple]):not([size])),
select.custom-select:where(:not([multiple]):not([size])),
.dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: var(--dd-h);
    padding: 0 calc(var(--dd-pad-x) + var(--dd-arrow-gap)) 0 var(--dd-pad-x);
    font-size: var(--dd-fs);
    line-height: normal;
    color: var(--ld-text);
    background-color: var(--ld-input-bg);
    background-image: linear-gradient(45deg, transparent 50%, var(--ld-text-muted) 50%), linear-gradient(135deg, var(--ld-text-muted) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 4px 5px, 4px 5px;
    background-position: right calc(var(--dd-pad-x) + 4px) center, right var(--dd-pad-x) center;
    border: 1px solid var(--ld-border);
    border-radius: var(--dd-radius);
    box-shadow: none;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    /* these beat the module rules that use padding / background shorthands on .form-control
       (a "background:" shorthand would otherwise wipe the arrow) */
    select.form-control:not([multiple]):not([size]),
    select.form-select:not([multiple]):not([size]),
    select.custom-select:not([multiple]):not([size]),
    .dataTables_wrapper .dataTables_length select {
        padding-right: calc(var(--dd-pad-x) + var(--dd-arrow-gap)) !important;
        background-image: linear-gradient(45deg, transparent 50%, var(--ld-text-muted) 50%), linear-gradient(135deg, var(--ld-text-muted) 50%, transparent 50%);
        background-repeat: no-repeat;
        background-size: 4px 5px, 4px 5px;
        background-position: right calc(var(--dd-pad-x) + 4px) center, right var(--dd-pad-x) center;
    }

    select.form-control:where(:not([multiple]):not([size])):hover:not(:disabled),
    select.form-select:where(:not([multiple]):not([size])):hover:not(:disabled),
    select.custom-select:where(:not([multiple]):not([size])):hover:not(:disabled),
    .dataTables_wrapper .dataTables_length select:hover {
        border-color: color-mix(in srgb, var(--ld-accent) 55%, var(--ld-border));
    }

    select.form-control:where(:not([multiple]):not([size])):focus,
    select.form-select:where(:not([multiple]):not([size])):focus,
    select.custom-select:where(:not([multiple]):not([size])):focus,
    .dataTables_wrapper .dataTables_length select:focus {
        border-color: var(--ld-accent);
        box-shadow: 0 0 0 3px var(--ld-accent-soft);
        outline: none;
    }

    select.form-control:disabled,
    select.form-select:disabled,
    select.custom-select:disabled,
    select.form-control[readonly],
    select.form-select[readonly],
    select.custom-select[readonly] {
        background-color: var(--ld-track-bg);
        color: var(--ld-text-muted);
        cursor: not-allowed;
        opacity: 1;
    }

    select.form-control.input-validation-error,
    select.form-control.is-invalid,
    select.form-select.is-invalid,
    select.custom-select.is-invalid,
    html[data-theme="dark"] select.input-validation-error,
    html[data-theme="dark"] select.is-invalid {
        border-color: var(--dd-error) !important;
    }

        select.form-control.input-validation-error:focus,
        select.form-control.is-invalid:focus {
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-error) 22%, transparent);
        }

/* The native list is drawn by the OS; this is all a browser lets us set. */
select option,
select optgroup {
    background-color: var(--ld-card);
    color: var(--ld-text);
}

    select option:checked {
        background-color: var(--ld-accent);
        color: #fff;
    }

    select option:disabled {
        color: var(--ld-text-muted);
    }

/* ---------- 4. Layout helpers ---------- */
/* select2 inside a Bootstrap input-group behaves like the .form-control it replaced */
.input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

.input-group > .select2-container:not(:last-child) .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-prepend ~ .select2-container .select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* inline toolbars / table cells: never collapse below a usable width */
.select2-container.dd-auto {
    min-width: 72px;
}

.dataTables_wrapper .dataTables_length .select2-container {
    margin: 0 6px;
    text-align: left;
}

/* ---------- 5. Responsive ---------- */
@media (max-width: 575px) {
    .select2-container--default .select2-results__option {
        padding: 11px 12px;
        font-size: 14px;
    }

    /* 16px stops iOS zooming the page when the search box takes focus */
    .select2-container--default .select2-search--dropdown .select2-search__field {
        height: 42px;
        font-size: 16px;
    }

    .select2-container--default .select2-results > .select2-results__options {
        max-height: min(300px, 50vh);
    }
}


/* ==========================================================================
   Tenant registration (Views/Auth/Register.cshtml)
   Dark two-column signup: product copy left, stepped form card right.
   The three .rg-step sections are one <form> posted once; the step script
   in the view only toggles [hidden]. Tokens are scoped to .rg-shell so the
   dark palette never leaks into the rest of the (light) app.
   ========================================================================== */
.rg-shell {
    --rg-bg: #1c212b;
    --rg-card: #252a35;
    --rg-card-border: #383e4c;
    --rg-input-bg: #1a1f28;
    --rg-input-border: #3a4150;
    --rg-input-hover: #4d5567;
    --rg-text: #f3f4f6;
    --rg-text-soft: #c9cdd6;
    --rg-muted: #9aa1b0;
    --rg-placeholder: #6f7787;
    --rg-accent: #f7931e;
    --rg-accent-ring: rgba(247, 147, 30, 0.22);
    --rg-error: #f2695c;
    --rg-error-ring: rgba(242, 105, 92, 0.2);
    --rg-good: #3fcf7f;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    background: var(--rg-bg);
    color: var(--rg-text);
    font-family: "Barlow", "Inter", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* !important: the global body rule at the top of this file uses it too */
body.login-page:has(.rg-shell),
body.login-page:has(.rg-shell) .theme-loader {
    background: #1c212b !important;
}

.rg-grid {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 72px;
    align-items: start;
}

/* ---------- Left: product copy ---------- */
.rg-intro {
    position: sticky;
    top: 56px;
    padding-top: 6px;
}

.rg-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 22px;
    box-shadow: 0 10px 24px -10px rgba(247, 147, 30, 0.6);
}

.rg-intro h1 {
    font-family: "Barlow Condensed", "Barlow", sans-serif;
    font-weight: 800;
    font-size: clamp(38px, 4.4vw, 54px);
    line-height: 1.02;
    color: var(--rg-text);
    margin: 0 0 12px;
}

.rg-lead {
    font-size: 17px;
    line-height: 1.5;
    color: var(--rg-muted);
    max-width: 420px;
    margin: 0 0 26px;
}

.rg-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 34px;
    display: grid;
    gap: 12px;
}

    .rg-checks li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        color: var(--rg-text);
    }

        .rg-checks li::before {
            content: "";
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--rg-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%231c212b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
        }

.rg-quote {
    max-width: 400px;
    margin: 0;
    padding: 4px 0 4px 16px;
    border-left: 2px solid var(--rg-accent);
}

    .rg-quote p {
        font-size: 15px;
        line-height: 1.5;
        color: var(--rg-text-soft);
        margin: 0 0 6px;
    }

    .rg-quote cite {
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        color: var(--rg-text);
    }

/* ---------- Right: form card ---------- */
.rg-card {
    background: var(--rg-card);
    border: 1px solid var(--rg-card-border);
    border-radius: 14px;
    padding: 28px 28px 24px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
    scroll-margin-top: 16px;
}

.rg-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--rg-muted);
    margin-bottom: 8px;
}

.rg-progress-track {
    height: 5px;
    border-radius: 999px;
    background: #161a22;
    overflow: hidden;
}

.rg-progress-bar {
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: var(--rg-accent);
    transition: width 0.35s ease;
}

.rg-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 13px 16px;
    border: 1px solid rgba(247, 147, 30, 0.45);
    border-radius: 10px;
    background: rgba(247, 147, 30, 0.1);
}

.rg-plan-text {
    min-width: 0;
}

.rg-plan-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rg-accent);
    margin-bottom: 2px;
}

.rg-plan-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--rg-text);
    line-height: 1.25;
}

.rg-plan-meta {
    font-size: 13px;
    color: var(--rg-muted);
}

.rg-shell .rg-plan-change {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--rg-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .rg-shell .rg-plan-change:hover {
        color: #ffb257;
    }

.rg-form {
    margin-top: 22px;
}

.rg-step.is-entering {
    animation: rgStepIn 0.28s ease;
}

@keyframes rgStepIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rg-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin-bottom: 14px;
    background: none;
    border: 0;
    font-size: 14px;
    color: var(--rg-muted);
    cursor: pointer;
}

    .rg-back:hover {
        color: var(--rg-text);
    }

    .rg-back:focus-visible {
        outline: 2px solid var(--rg-accent);
        outline-offset: 3px;
        border-radius: 4px;
    }

.rg-step-title {
    font-family: inherit;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rg-text);
    margin: 0 0 4px;
}

.rg-step-sub {
    font-size: 14px;
    color: var(--rg-muted);
    margin: 0 0 20px;
}

.rg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 12px;
}

.rg-field {
    min-width: 0;
    margin-bottom: 16px;
}

.rg-shell .rg-field label,
.rg-shell .rg-pay-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rg-text);
    margin-bottom: 7px;
}

.rg-shell .rg-pay-label {
    margin: 4px 0 12px;
    color: var(--rg-muted);
    font-weight: 500;
}

/* Inputs + selects */
.rg-shell .rg-field .form-control,
.rg-stripe-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--rg-text);
    background: var(--rg-input-bg);
    border: 1px solid var(--rg-input-border);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rg-shell .rg-field select.form-control {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239aa1b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}

    .rg-shell .rg-field select.form-control option {
        background: var(--rg-input-bg);
        color: var(--rg-text);
    }

.rg-shell .rg-field .form-control::placeholder {
    color: var(--rg-placeholder);
    opacity: 1;
}

.rg-shell .rg-field .form-control:hover,
.rg-stripe-input:hover {
    border-color: var(--rg-input-hover);
}

.rg-shell .rg-field .form-control:focus,
.rg-stripe-input.focused {
    outline: none;
    color: var(--rg-text);
    background-color: var(--rg-input-bg);
    border-color: var(--rg-accent);
    box-shadow: 0 0 0 3px var(--rg-accent-ring);
}

/* Browser autofill would otherwise paint the dark inputs pale blue */
.rg-shell .rg-field .form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--rg-text);
    caret-color: var(--rg-text);
    box-shadow: 0 0 0 1000px var(--rg-input-bg) inset;
}

/* Error state: server-side (tag-helper class) or a field the user has
   touched that fails its own required/type rule */
.rg-shell .rg-field .form-control.input-validation-error,
.rg-shell .rg-field .form-control:user-invalid {
    border-color: var(--rg-error);
}

    .rg-shell .rg-field .form-control.input-validation-error:focus,
    .rg-shell .rg-field .form-control:user-invalid:focus {
        box-shadow: 0 0 0 3px var(--rg-error-ring);
    }

/* Success state once the user has filled a field correctly */
.rg-shell .rg-field input.form-control:user-valid:not(:placeholder-shown),
.rg-shell .rg-field select.form-control:user-valid {
    border-color: var(--rg-good);
}

.rg-stripe-input {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .rg-stripe-input > * {
        width: 100%;
    }

/* Messages */
.rg-shell .text-danger {
    color: var(--rg-error) !important;
}

.rg-shell .rg-field .text-danger {
    display: block;
    margin-top: 6px;
    font-size: 13px;
}

    .rg-shell .rg-field .text-danger:empty {
        display: none;
    }

.rg-card-errors {
    font-size: 13px;
    margin: -4px 0 16px;
}

    .rg-card-errors:empty {
        display: none;
    }

.rg-summary.validation-summary-valid {
    display: none;
}

.rg-summary.validation-summary-errors {
    margin-bottom: 18px;
    padding: 10px 14px;
    font-size: 13.5px;
    border: 1px solid rgba(242, 105, 92, 0.45);
    border-radius: 8px;
    background: rgba(242, 105, 92, 0.1);
}

    .rg-summary.validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

/* Password show/hide */
.rg-pass {
    position: relative;
}

.rg-shell .rg-pass .form-control {
    padding-right: 60px;
}

.rg-pass-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 6px 8px;
    background: none;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rg-muted);
    cursor: pointer;
}

    .rg-pass-toggle:hover {
        color: var(--rg-text);
    }

    .rg-pass-toggle:focus-visible {
        outline: 2px solid var(--rg-accent);
    }

/* Primary CTA */
.rg-btn {
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: #1d1508;
    background: linear-gradient(180deg, #ffa733 0%, #ee7c12 100%);
    box-shadow: 0 12px 26px -12px rgba(247, 147, 30, 0.75);
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

    .rg-btn:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: 0 16px 30px -12px rgba(247, 147, 30, 0.85);
    }

    .rg-btn:active {
        transform: none;
    }

    .rg-btn:focus-visible {
        outline: 2px solid #ffd29a;
        outline-offset: 2px;
    }

    /* Only set while the existing submit handler is working */
    .rg-btn:disabled {
        opacity: 0.75;
        cursor: progress;
        transform: none;
        filter: none;
    }

.rg-shell .rg-btn .spinner-border.text-light {
    color: currentColor !important;
}

.rg-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--rg-muted);
}

    .rg-trust span::before {
        content: "\2713";
        margin-right: 4px;
        font-weight: 700;
        color: var(--rg-good);
    }

.rg-signin {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--rg-muted);
}

    .rg-shell .rg-signin a {
        color: var(--rg-text);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .rg-shell .rg-signin a:hover {
            color: var(--rg-accent);
        }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .rg-shell {
        padding: 40px 20px;
    }

    .rg-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 410px);
        gap: 36px;
    }

    .rg-card {
        padding: 24px 22px 22px;
    }
}

@media (max-width: 767.98px) {
    .rg-shell {
        align-items: flex-start;
        padding: 28px 16px 40px;
    }

    .rg-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 520px;
        gap: 26px;
    }

    .rg-intro {
        position: static;
        padding-top: 0;
    }

    .rg-logo {
        width: 44px;
        height: 44px;
        margin-bottom: 16px;
    }

    .rg-intro h1 {
        font-size: 36px;
    }

    .rg-lead {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .rg-checks {
        margin-bottom: 0;
        gap: 9px;
    }

        .rg-checks li {
            font-size: 15px;
        }

    .rg-quote {
        display: none;
    }

    .rg-card {
        padding: 22px 18px 20px;
    }

    /* 16px stops iOS zooming into the field on focus */
    .rg-shell .rg-field .form-control {
        font-size: 16px;
    }
}

@media (max-width: 359.98px) {
    .rg-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rg-step.is-entering {
        animation: none;
    }

    .rg-progress-bar,
    .rg-btn {
        transition: none;
    }
}

/* =========================================================================
   Project Daily Notes: notes restricted to Admins / Tenant Admins
   (ProjectDailyNotes.IsTenantAdminOnly). Same pill shape as .calc-pill, but
   scoped to .prj-page because the Daily Notes list has no .calc-page root.
   ========================================================================= */
.prj-page .dn-restricted-pill {
    --p: #a855f7;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--p);
    background: color-mix(in srgb, var(--p) 16%, var(--ld-card));
}

.prj-page .dn-restricted-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.prj-page table tr.dn-restricted > td {
    background-color: color-mix(in srgb, #a855f7 6%, transparent);
}

    .prj-page table tr.dn-restricted > td:first-child {
        box-shadow: inset 3px 0 0 #a855f7;
    }

/* ==========================================================================
   SaaS Admin area (Areas/Admin: Dashboard, Customized Pricing Plans,
   Subscriptions, Tenants Index/Create/Edit, Users Index/Create) - .adm-page
   --------------------------------------------------------------------------
   Areas/Admin/Views/Shared/_Layout.cshtml now loads dashboard.css + this file
   and uses the same ld-sidebar / topbar markup as the main _Layout. Pages are
   built on the CRM page kit (cl-head, ld-card, cl-toolbar, cl-pill, cf-* forms,
   cl-modal); the rules below only cover what the admin pages add on top.
   Replaces the old inline <style> blocks of Subscriptions and Tenants/Index.
   ========================================================================== */

/* ---------- Card title + toolbar ---------- */
.adm-page .adm-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--ld-text);
    line-height: 1.3;
}

.adm-page .adm-toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Search box with a leading icon (Customized Plans, Subscriptions) */
.adm-page .adm-search {
    position: relative;
    width: 280px;
    max-width: 100%;
}

    .adm-page .adm-search > i,
    .adm-page .adm-search > .svg-inline--fa {
        position: absolute;
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--ld-text-muted);
        pointer-events: none;
        z-index: 1;
    }

    .adm-page .adm-search > .form-control {
        height: 38px;
        padding-left: 36px;
        font-size: 13px;
    }

@media (max-width: 575px) {
    .adm-page .cl-toolbar-right,
    .adm-page .adm-search {
        width: 100%;
    }
}

/* ---------- Segmented tabs (Tenants Active/Inactive, Subscriptions Trial/Paid/UnPaid) ---------- */
.adm-page .adm-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: none;
    border-radius: 12px;
    background: var(--ld-track-bg);
}

    .adm-page .adm-tabs .nav-item {
        margin: 0;
    }

    .adm-page .adm-tabs .nav-link {
        --c: var(--ld-accent);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: none !important;
        border-radius: 9px;
        padding: 7px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ld-text-muted) !important;
        background: transparent !important;
        box-shadow: none;
        text-decoration: none !important;
        transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

        .adm-page .adm-tabs .nav-link:hover {
            color: var(--ld-text) !important;
        }

        .adm-page .adm-tabs .nav-link.active {
            background: var(--ld-card) !important;
            color: var(--c) !important;
            box-shadow: 0 2px 8px rgba(20, 22, 31, 0.14);
        }

        .adm-page .adm-tabs .nav-link > i,
        .adm-page .adm-tabs .nav-link > .svg-inline--fa {
            font-size: 12px;
            color: var(--c);
        }

.adm-page .adm-tab-count {
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, var(--ld-card));
}

.adm-page .adm-tabs .nav-link.active .adm-tab-count {
    color: #fff;
    background: var(--c);
}

/* ---------- Tables ---------- */
.adm-page .adm-table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

    .adm-page .adm-table thead th {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ld-text-muted);
        white-space: nowrap;
        background: var(--ld-track-bg);
        border-top: none;
        border-bottom: 1px solid var(--ld-border);
    }

        .adm-page .adm-table thead th:first-child {
            border-top-left-radius: 10px;
        }

        .adm-page .adm-table thead th:last-child {
            border-top-right-radius: 10px;
        }

    .adm-page .adm-table tbody td {
        vertical-align: middle;
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 13px;
        color: var(--ld-text);
        border-top: 1px solid var(--ld-border);
    }

    .adm-page .adm-table tbody tr:first-child td {
        border-top: none;
    }

/* static (non-DataTables) grids: let long headers wrap so the table fits next to the sidebar */
.adm-page #customPlansTable thead th,
.adm-page .subscription-table thead th {
    white-space: normal;
    vertical-align: middle;
}

.adm-page .adm-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Extra pill tones next to cl-pill--ok / --soft / --off / --bad */
.adm-page .adm-pill--warn {
    color: #d97706;
    background: color-mix(in srgb, #f59e0b 16%, var(--ld-card));
}

.adm-page .adm-pill--dark {
    color: var(--ld-text);
    background: color-mix(in srgb, var(--ld-text) 12%, var(--ld-card));
}

/* Payment status (Subscriptions): icon + label badge */
.adm-page .adm-status {
    --s: var(--ld-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--s);
    background: color-mix(in srgb, var(--s) 14%, var(--ld-card));
}

    .adm-page .adm-status > i,
    .adm-page .adm-status > .svg-inline--fa {
        font-size: 11px;
    }

.adm-page .adm-status--ok {
    --s: #10b981;
}

.adm-page .adm-status--trial {
    --s: #0ea5e9;
}

.adm-page .adm-status--warn {
    --s: #d97706;
}

.adm-page .adm-status--bad {
    --s: #ef4444;
}

/* ---------- Dashboard tiles ---------- */
.adm-page .adm-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1199px) {
    .adm-page .adm-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .adm-page .adm-tiles {
        grid-template-columns: 1fr;
    }
}

.adm-page .adm-tile {
    --c: var(--ld-accent);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    box-shadow: var(--ld-shadow);
    color: var(--ld-text) !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .adm-page .adm-tile:hover {
        transform: translateY(-2px);
        border-color: var(--c);
        box-shadow: 0 10px 24px -12px var(--c);
    }

.adm-page .adm-tile-icon {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, var(--ld-card));
}

.adm-page .adm-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.adm-page .adm-tile-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.adm-page .adm-tile-sub {
    font-size: 12px;
    color: var(--ld-text-muted);
    margin-top: 2px;
}

.adm-page .adm-tile-go {
    font-size: 12px;
    color: var(--ld-text-muted);
    transition: color 0.15s ease, transform 0.15s ease;
}

.adm-page .adm-tile:hover .adm-tile-go {
    color: var(--c);
    transform: translateX(2px);
}

/* ---------- Forms ---------- */
/* Empty cell that starts the email pair on its own row (Tenants Create/Edit) */
@media (max-width: 767px) {
    .adm-page .adm-field-gap {
        display: none;
    }
}

/* Customized plan modal (outside the page root, scoped by the modal itself) */
#createCustomPlanModal .adm-modal-section {
    margin: 24px 0 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ld-border);
}

#createCustomPlanModal .adm-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767px) {
    #createCustomPlanModal .adm-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Subscriptions: organization info button, Blocked state, Action column ---------- */
.adm-page .adm-org-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.adm-page .adm-info-btn {
    width: 22px;
    height: 22px;
    flex: none;
    padding: 0;
    border: 1px solid var(--ld-border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    color: var(--ld-text-muted);
    background: var(--ld-card);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .adm-page .adm-info-btn:hover,
    .adm-page .adm-info-btn:focus-visible,
    .adm-page .adm-info-btn[aria-expanded="true"] {
        outline: none;
        color: #fff;
        border-color: var(--ld-accent);
        background: var(--ld-accent);
        transform: scale(1.08);
    }

.adm-blocked-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #dc2626;
    background: color-mix(in srgb, #ef4444 14%, var(--ld-card));
    border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
}

    .adm-blocked-badge > i,
    .adm-blocked-badge > .svg-inline--fa {
        font-size: 10px;
    }

html[data-theme="dark"] .adm-blocked-badge {
    color: #f87171;
}

.adm-page .adm-table tr.is-blocked > td {
    background-color: color-mix(in srgb, #ef4444 7%, transparent);
}

    .adm-page .adm-table tr.is-blocked > td:first-child {
        box-shadow: inset 3px 0 0 #ef4444;
    }

.adm-page .adm-block-actions {
    justify-content: center;
}

    .adm-page .adm-block-actions .cl-icon-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
        transform: none;
        color: var(--c) !important;
        background: color-mix(in srgb, var(--c) 14%, var(--ld-card));
    }

/* Organization details popup (appended to <body>, outside the page root) */
.adm-org-pop {
    position: absolute;
    z-index: 1060;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--ld-border);
    background: var(--ld-card);
    color: var(--ld-text);
    box-shadow: 0 18px 44px -14px rgba(10, 11, 16, 0.35);
    font-size: 12.5px;
}

    .adm-org-pop[hidden] {
        display: none;
    }

.adm-org-pop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.adm-org-pop-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.adm-org-pop-sub {
    font-size: 11.5px;
    color: var(--ld-text-muted);
}

.adm-org-pop-close {
    width: 26px;
    height: 26px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--ld-text-muted);
    background: var(--ld-track-bg);
}

    .adm-org-pop-close:hover {
        color: var(--ld-accent);
        background: var(--ld-accent-soft);
    }

.adm-org-pop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}

.adm-org-pop-section {
    margin: 12px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--ld-border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ld-text-muted);
}

.adm-org-pop-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
    padding: 3px 0;
}

    .adm-org-pop-row > span {
        color: var(--ld-text-muted);
    }

    .adm-org-pop-row > strong {
        font-weight: 600;
        word-break: break-word;
    }

/* ---------- Login: "Blocked By Admin" popup (Views/Auth/Login.cshtml, SweetAlert2) ---------- */
.swal2-popup.lg-blocked-popup {
    border-radius: 16px;
    padding: 28px 24px 24px;
}

.lg-blocked-popup .lg-blocked-msg {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #b91c1c;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.lg-blocked-popup .lg-blocked-btn {
    min-width: 120px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    color: #fff;
    background: #f5941e;
    box-shadow: 0 4px 6px rgba(245, 148, 30, 0.2);
    cursor: pointer;
}

    .lg-blocked-popup .lg-blocked-btn:hover {
        filter: brightness(0.95);
    }