/* CraftGrid One — approved Option 1 (Professional Blue) refinements.
   Presentation-only: preserves server-rendered routes, permissions, dashboard data,
   and all existing mobile/offcanvas navigation behavior. Loaded after legacy CSS. */

:root {
    --cg-option1-blue: #2f8ee5;
    --cg-option1-blue-bright: #48a7ff;
    --cg-option1-blue-soft: #cbe7ff;
    --cg-option1-blue-ink: #164d7b;
    --cg-option1-blue-tint: rgba(70, 160, 245, .18);
    --cg-option1-trial-bg: #fff2c2;
    --cg-option1-trial-border: #f0ca59;
    --cg-option1-trial-ink: #263e58;
}

/* 1. Option 1 blue active navigation: softer, calmer and consistent in both states. */
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar .sidebar-link.active,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-link.active {
    color: var(--cg-option1-blue-ink) !important;
    background: var(--cg-option1-blue-soft) !important;
    border-color: rgba(47, 142, 229, .20) !important;
    box-shadow: inset 3px 0 0 var(--cg-option1-blue), 0 2px 8px rgba(17, 79, 134, .10) !important;
    text-decoration: none !important;
}

body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar .sidebar-link.active .sidebar-link-content > i,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar .sidebar-link.active .sidebar-link-content > span,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-link.active .sidebar-link-content > i,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-link.active .sidebar-link-content > span {
    color: var(--cg-option1-blue-ink) !important;
}

/* A parent remains subtly marked when one of its submenu pages is active. */
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar .sidebar-group:has(> .sidebar-submenu .sidebar-submenu-link.active) > .sidebar-group-toggle,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-group:has(> .sidebar-submenu .sidebar-submenu-link.active) > .sidebar-group-toggle {
    color: #f4f8ff !important;
    background: var(--cg-option1-blue-tint) !important;
    box-shadow: inset 3px 0 0 var(--cg-option1-blue-bright) !important;
}

body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar .sidebar-link:not(.active):hover,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar .sidebar-group-toggle:hover,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-link:not(.active):hover,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-group-toggle:hover {
    background: rgba(83, 165, 240, .14) !important;
}

/* 2. The same three-line hamburger is used for both desktop states; only its color changes. */
@media (min-width: 992px) {
    html:not(.craftgrid-sidebar-expanded) body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-topbar .craftgrid-mobile-menu > i {
        color: #d9e7f5 !important;
        transition: color .16s ease;
    }

    html.craftgrid-sidebar-expanded body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-topbar .craftgrid-mobile-menu > i {
        color: var(--cg-option1-blue-bright) !important;
        transition: color .16s ease;
    }

    html.craftgrid-sidebar-expanded body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-topbar .craftgrid-mobile-menu {
        border-color: rgba(72, 167, 255, .42) !important;
        background: rgba(58, 139, 215, .12) !important;
    }
}

/* 3. Make the live trial countdown easy to notice without competing with search/profile. */
.craftgrid-authenticated-shell .craftgrid-topbar .cg-trial-header-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;
    min-height: 28px;
    margin-left: 8px !important;
    padding: 5px 10px !important;
    border: 1px solid var(--cg-option1-trial-border) !important;
    border-radius: 999px !important;
    background: var(--cg-option1-trial-bg) !important;
    color: var(--cg-option1-trial-ink) !important;
    box-shadow: 0 2px 8px rgba(205, 155, 26, .13) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
}

.craftgrid-authenticated-shell .craftgrid-topbar .cg-trial-header-pill > i {
    color: #9b6a00 !important;
    font-size: 12px !important;
    flex: 0 0 auto;
}

.craftgrid-authenticated-shell .craftgrid-topbar .cg-trial-header-pill [data-cg-trial-header-remaining] {
    color: inherit !important;
    font-weight: 600 !important;
}

/* 4. Company/tenant name should be normal-weight rather than Bootstrap medium/bold. */
.craftgrid-authenticated-shell .craftgrid-topbar .cg-company-context-name {
    color: rgba(241, 247, 255, .88) !important;
    font-size: .82rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

.craftgrid-authenticated-shell .craftgrid-topbar .cg-company-context-divider {
    color: rgba(220, 235, 249, .78) !important;
    margin-inline: 5px !important;
    font-weight: 400 !important;
}

/* 5. Normal-weight module names across compact, expanded and mobile navigation.
   Section headers and meaningful count chips retain their own hierarchy. */
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar .sidebar-link-content > span:not(.cg-work-nav-badge),
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar .sidebar-group-toggle > .sidebar-link-content > span:not(.cg-work-nav-badge),
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar .sidebar-submenu-link .sidebar-link-content > span:not(.cg-work-nav-badge),
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar .sidebar-submenu-link > span:not(.cg-work-nav-badge),
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-link-content > span:not(.cg-work-nav-badge),
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-group-toggle > .sidebar-link-content > span:not(.cg-work-nav-badge),
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-submenu-link .sidebar-link-content > span:not(.cg-work-nav-badge),
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar .sidebar-submenu-link > span:not(.cg-work-nav-badge) {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* Keep the approved compact labels readable, with word-boundary wrapping. */
@media (min-width: 992px) {
    body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar .sidebar-link-content > span:not(.cg-work-nav-badge) {
        font-size: 8.8px !important;
        line-height: 1.18 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    html.craftgrid-sidebar-expanded body.craftgrid-authenticated-shell:not(.craftgrid-subscription-gate-layout) .desktop-sidebar .sidebar-link-content > span:not(.cg-work-nav-badge) {
        font-size: .80rem !important;
        font-weight: 400 !important;
        line-height: 1.24 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    /* Small 3px visual nudge, while keeping the drag-handle hit area and grid intact. */
    html.craftgrid-sidebar-expanded body.craftgrid-authenticated-shell:not(.cg-no-sidebar-drag-adjust) .desktop-sidebar .sidebar-drag-handle {
        position: relative !important;
        left: 3px !important;
    }

    /* Keep the top-row controls aligned with a consistent compact rhythm. */
    body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-topbar .container-fluid {
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .cg-header-global-search {
        margin-left: 6px !important;
        margin-right: 8px !important;
        align-self: center !important;
    }
}

/* Hide unavailable/zero Work Management badges without affecting pending-work counts. */
body.craftgrid-authenticated-shell .desktop-sidebar .sidebar-group-toggle .cg-work-nav-badge,
body.craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group-toggle .cg-work-nav-badge,
body.craftgrid-authenticated-shell .desktop-sidebar .cg-work-nav-badge[hidden],
body.craftgrid-authenticated-shell .craftgrid-mobile-sidebar .cg-work-nav-badge[hidden] {
    display: none !important;
    visibility: hidden !important;
}

/* 6. Header alignment and a more polished personalized welcome on the dashboard. */
.craftgrid-authenticated-shell .craftgrid-topbar .craftgrid-icon-button,
.craftgrid-authenticated-shell .craftgrid-topbar .craftgrid-user-button,
.craftgrid-authenticated-shell .craftgrid-topbar .cg-header-global-search .cg-global-search-bar {
    align-self: center;
}

.cg-admin-v2 .cg-hero h1 {
    font-size: 27px !important;
    font-weight: 600 !important;
    letter-spacing: -.45px !important;
    line-height: 1.16 !important;
}

.cg-admin-v2 .cg-hero .cg-kicker {
    font-weight: 500 !important;
    letter-spacing: .10em !important;
}

.cg-admin-v2 .cg-hero .cg-subtitle {
    font-weight: 400 !important;
}

@media (max-width: 991.98px) {
    /* Keep mobile header/drawer sizing and the existing mobile color treatment. */
    .craftgrid-authenticated-shell .craftgrid-topbar .cg-trial-header-pill {
        display: none !important;
    }

    .cg-admin-v2 .cg-hero h1 {
        font-size: 23px !important;
        line-height: 1.2 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.craftgrid-authenticated-shell .craftgrid-topbar .craftgrid-mobile-menu > i,
    body.craftgrid-authenticated-shell .desktop-sidebar .sidebar-link,
    body.craftgrid-authenticated-shell .desktop-sidebar .sidebar-group-toggle {
        transition: none !important;
    }
}


/* Follow-up precision pass from the approved Option 1 mockup. */
@media (min-width: 992px) {
    /* Keep the Dashboard tile the same footprint as the other rail items; only
       its soft blue surface and icon/text colour change when active. */
    body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar a.sidebar-dashboard-link {
        box-sizing: border-box !important;
        min-height: 55px !important;
        height: 55px !important;
        margin: 0 0 4px !important;
        padding: 6px 2px 5px !important;
        border-radius: 9px !important;
    }

    html.craftgrid-sidebar-expanded body.craftgrid-authenticated-shell:not(.craftgrid-subscription-gate-layout) .desktop-sidebar a.sidebar-dashboard-link {
        min-height: 43px !important;
        height: auto !important;
        padding: 9px 10px !important;
        margin: 0 0 3px !important;
    }

    /* The breadcrumb and greeting area previously consumed too much vertical
       space. Pull the content upward and tighten only the dashboard page. */
    body.craftgrid-authenticated-shell .craftgrid-main-row > main:has(.cg-admin-v2) > .container-fluid.py-4.px-4 {
        padding-top: 8px !important;
        padding-bottom: 16px !important;
    }

    body.craftgrid-authenticated-shell .craftgrid-main-row > main:has(.cg-admin-v2) .cg-breadcrumb-wrap {
        margin-bottom: 4px !important;
    }

    body.craftgrid-authenticated-shell .cg-admin-v2 {
        padding-top: 5px !important;
        padding-bottom: 24px !important;
    }

    body.craftgrid-authenticated-shell .cg-admin-v2 .cg-hero {
        gap: 18px !important;
        margin-bottom: 11px !important;
    }

    body.craftgrid-authenticated-shell .cg-admin-v2 .cg-hero h1 {
        font-size: 25px !important;
        margin: 2px 0 3px !important;
        line-height: 1.16 !important;
    }

    body.craftgrid-authenticated-shell .cg-admin-v2 .cg-hero .cg-subtitle {
        font-size: 13px !important;
        line-height: 1.32 !important;
    }

    body.craftgrid-authenticated-shell .cg-admin-v2 .cg-section {
        margin-top: 14px !important;
    }

    /* Bring the trial pill closer to the approved mockup's size while preserving
       the compact 60px header and keeping all controls on one line. */
    body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-topbar .cg-trial-header-pill {
        min-width: 164px !important;
        min-height: 34px !important;
        padding: 7px 13px !important;
        gap: 7px !important;
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-topbar .cg-trial-header-pill > i {
        font-size: 13px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-topbar .cg-trial-header-pill {
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 4px 8px !important;
        font-size: 9px !important;
    }
}

/* Match the mockup's soft active treatment on the Dashboard route specifically.
   The Dashboard link targets Home/Index, but this landing page is AdminDashboard. */
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar a.sidebar-dashboard-link.active,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar a.sidebar-dashboard-link.active {
    color: var(--cg-option1-blue-ink) !important;
    background: var(--cg-option1-blue-soft) !important;
    box-shadow: inset 3px 0 0 var(--cg-option1-blue), 0 2px 8px rgba(17, 79, 134, .10) !important;
}

body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar a.sidebar-dashboard-link.active .sidebar-link-content > i,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .desktop-sidebar a.sidebar-dashboard-link.active .sidebar-link-content > span,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar a.sidebar-dashboard-link.active .sidebar-link-content > i,
body.craftgrid-authenticated-shell:not(.craftgrid-login-layout) .craftgrid-mobile-sidebar a.sidebar-dashboard-link.active .sidebar-link-content > span {
    color: var(--cg-option1-blue-ink) !important;
}


/* Final sidebar readability refinement — compact active surfaces (desktop only).
   Keep the link hit target usable while insetting the color surface, make the
   selected leaf obvious, and indicate active ancestors without coloring them
   as if they were also selected. Mobile drawer styles remain untouched. */
@media (min-width: 992px) {
    /* Top-level active item: same menu rhythm, but a slightly inset surface. */
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-link.active:not(.sidebar-submenu-link) {
        box-sizing: border-box !important;
        width: calc(100% - 10px) !important;
        margin: 3px 5px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(72, 145, 224, .28) !important;
        background: #dcecff !important;
        color: #174f8a !important;
        box-shadow: inset 2px 0 0 #2f80ed !important;
        text-decoration: none !important;
    }

    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-link.active:not(.sidebar-submenu-link) .sidebar-link-content > i,
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-link.active:not(.sidebar-submenu-link) .sidebar-link-content > span:not(.cg-work-nav-badge) {
        color: #174f8a !important;
        font-weight: 400 !important;
    }

    /* Active ancestors are context only: a faint tint and slim marker, not a
       full pale-blue selected block. This prevents Master Data/Products from
       competing visually with the actual selected child such as Items. */
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-group:has(> .sidebar-submenu .sidebar-submenu-link.active) > .sidebar-group-toggle {
        box-sizing: border-box !important;
        width: calc(100% - 10px) !important;
        margin: 2px 5px !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        background: rgba(91, 157, 226, .085) !important;
        color: #e6f1ff !important;
        box-shadow: inset 2px 0 0 rgba(103, 176, 255, .78) !important;
    }

    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-group:has(> .sidebar-submenu .sidebar-submenu-link.active) > .sidebar-group-toggle .sidebar-link-content > i,
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-group:has(> .sidebar-submenu .sidebar-submenu-link.active) > .sidebar-group-toggle .sidebar-link-content > span:not(.cg-work-nav-badge) {
        color: #e6f1ff !important;
        font-weight: 400 !important;
    }

    /* Only the actual selected submenu link gets the pale blue surface. Keep
       it slightly shorter and inset from the submenu guide for a tidy rhythm. */
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-submenu-link.active {
        box-sizing: border-box !important;
        width: calc(100% - 16px) !important;
        min-height: 34px !important;
        height: auto !important;
        margin: 2px 8px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        border: 1px solid rgba(72, 145, 224, .28) !important;
        border-radius: 7px !important;
        background: #dcecff !important;
        color: #174f8a !important;
        box-shadow: inset 2px 0 0 #2f80ed !important;
    }

    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-submenu-link.active .sidebar-link-content > i,
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-submenu-link.active .sidebar-link-content > span:not(.cg-work-nav-badge),
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-submenu-link.active > i,
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-submenu-link.active > span:not(.cg-work-nav-badge) {
        color: #174f8a !important;
        font-weight: 400 !important;
    }

    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-submenu-link.active:hover,
    html body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout)
        .desktop-sidebar .sidebar-link.active:not(.sidebar-submenu-link):hover {
        background: #cfe3ff !important;
        color: #123f70 !important;
        box-shadow: inset 2px 0 0 #2873d8 !important;
    }
}


/* Sidebar spacing refinement — approved compact-navigation mockup.
   Desktop collapsed rail only: tighten the vertical rhythm without changing
   sidebar width, typography, icon sizing, colors, routes, or expanded/mobile menus. */
@media (min-width: 992px) {
    html:not(.craftgrid-sidebar-expanded) body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar > .sidebar-modules > .sidebar-group {
        margin-top: 0 !important;
        margin-bottom: 1px !important;
    }

    html:not(.craftgrid-sidebar-expanded) body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar a.sidebar-link,
    html:not(.craftgrid-sidebar-expanded) body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar .sidebar-group-toggle {
        box-sizing: border-box !important;
        min-height: 49px !important;
        height: auto !important;
        margin-bottom: 2px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        gap: 2px !important;
    }

    html:not(.craftgrid-sidebar-expanded) body.craftgrid-authenticated-shell:not(.craftgrid-login-layout):not(.craftgrid-subscription-gate-layout) .desktop-sidebar a.sidebar-dashboard-link {
        min-height: 49px !important;
        height: 49px !important;
        margin: 0 0 2px !important;
        padding: 4px 2px !important;
    }
}