/*
   CraftGrid mobile navigation polish
   Presentation-only: keeps module text and drag/favourite/chevron controls
   separated on narrow off-canvas sidebars.
*/

@media (max-width: 991.98px) {
    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-group-toggle {
        column-gap: 6px;
    }

    /* Give the module label a real shrinking width so long names cannot
       occupy the control area. */
    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-group-toggle > .sidebar-link-content {
        flex: 1 1 auto;
        width: 0;
        min-width: 0;
        overflow: hidden;
    }

    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-group-toggle > .sidebar-link-content > span {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Keep the drag handle visually separated from a long module name.
       It is intentionally available for every top-level module. */
    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-drag-handle {
        flex: 0 0 22px;
        width: 22px;
        min-width: 22px;
        height: 30px;
        margin-left: 3px;
        margin-right: 1px;
    }

    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-favorite-button {
        flex: 0 0 30px;
        width: 30px;
        min-width: 30px;
        margin-left: 2px;
        margin-right: 2px;
    }

    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-chevron {
        flex: 0 0 18px;
        width: 18px;
        min-width: 18px;
        margin-left: 2px;
    }
}

@media (max-width: 575.98px) {
    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-group-toggle {
        padding-left: 10px;
        padding-right: 9px;
        column-gap: 4px;
    }

    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-drag-handle {
        flex-basis: 20px;
        width: 20px;
        min-width: 20px;
        margin-left: 2px;
    }

    .craftgrid-mobile-sidebar .erp-sidebar .sidebar-favorite-button {
        flex-basis: 28px;
        width: 28px;
        min-width: 28px;
    }
}

/* ---------------------------------------------------------
   Mobile shell cleanup
   Keep the global-search trigger behind the Bootstrap offcanvas
   so it cannot visually overlap the mobile navigation header.
   Typography is intentionally mobile-only; desktop remains untouched.
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .craftgrid-authenticated-shell .cg-header-global-search {
        z-index: 1030;
    }

    /* The expanded search overlay must still sit above the page content. */
    .craftgrid-authenticated-shell .cg-header-global-search.is-mobile-open {
        z-index: 1200;
    }

    .craftgrid-authenticated-shell .cg-header-global-search.is-mobile-open > .cg-global-search-bar,
    .craftgrid-authenticated-shell .cg-header-global-search.is-mobile-open > .cg-global-search-panel {
        z-index: 1200;
    }

    /* Use the native Windows/SaaS UI face on the narrow sidebar. It reads
       more naturally at touch size than the smaller Inter treatment used
       by the desktop navigation. */
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar .sidebar-group-toggle,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar .sidebar-link,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar .sidebar-submenu-link {
        font-family: "Segoe UI", Roboto, Arial, sans-serif;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar .sidebar-group-toggle > .sidebar-link-content > span,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar .sidebar-link > span {
        font-size: 14px;
        line-height: 1.25;
        font-weight: 500;
    }
}

@media (max-width: 575.98px) {
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar .sidebar-group-toggle > .sidebar-link-content > span,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar .sidebar-link > span {
        font-size: 14px;
    }
}

/* Keep the global search behind Bootstrap modals.
   On narrow viewports the search bar can be expanded to z-index 1200;
   that must not overlap Sales Visit modal headers, timers, or close buttons. */
@media (max-width: 991.98px) {
    body.modal-open .craftgrid-authenticated-shell .cg-header-global-search,
    body.modal-open .craftgrid-authenticated-shell .cg-header-global-search.is-mobile-open {
        z-index: 1030 !important;
    }

    body.modal-open .craftgrid-authenticated-shell .cg-header-global-search.is-mobile-open > .cg-global-search-bar,
    body.modal-open .craftgrid-authenticated-shell .cg-header-global-search.is-mobile-open > .cg-global-search-panel {
        z-index: 1030 !important;
    }
}

/* =========================================================
   CraftGrid One — mobile navigation final polish
   ---------------------------------------------------------
   Mobile-only presentation. Desktop navigation is intentionally
   left untouched.
   ========================================================= */
@media (max-width: 991.98px) {
    :root {
        --cg-mobile-nav-navy-deep: #102d44;
        --cg-mobile-nav-navy: #15374d;
        --cg-mobile-nav-navy-light: #17415a;
        --cg-mobile-nav-gold: #f0b92d;
        --cg-mobile-nav-text: rgba(255,255,255,.90);
        --cg-mobile-nav-muted: rgba(255,255,255,.58);
        --cg-mobile-nav-border: rgba(255,255,255,.09);
    }

    /* The offcanvas itself follows the exact top-navbar brand treatment. */
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar {
        width: min(340px, 88vw) !important;
        max-width: 340px !important;
        background: linear-gradient(180deg, var(--cg-mobile-nav-navy-deep) 0%, #0d2438 100%) !important;
        border-right: 1px solid rgba(255,255,255,.12) !important;
        box-shadow: 18px 0 42px rgba(0,0,0,.24) !important;
        overflow: hidden;
    }

    /* Header is now a proper CraftGrid One brand area, not a generic
       Bootstrap offcanvas header. */
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .offcanvas-header,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-header {
        min-height: 72px !important;
        height: 72px;
        padding: 0 14px 0 16px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(135deg, #102d44 0%, #15374d 62%, #17415a 100%) !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.14);
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: #fff !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-brand-mark {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        color: #f0b92d !important;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-brand-mark i {
        font-size: 1.02rem;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-brand-name {
        color: #ffffff !important;
        font-size: 18px;
        line-height: 1;
        font-weight: 750;
        letter-spacing: -.025em;
        white-space: nowrap;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-brand-name .cg-sidebar-brand-green {
        color: #55c99f !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-brand-name em {
        color: #ffffff !important;
        font-style: normal;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-close {
        width: 36px;
        height: 36px;
        margin: 0 !important;
        padding: 9px !important;
        flex: 0 0 36px;
        border-radius: 10px;
        opacity: .88;
        background-size: 15px;
        transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-close:hover,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar-close:focus-visible {
        opacity: 1;
        background-color: rgba(255,255,255,.10);
        transform: none;
    }

    .craftgrid-authenticated-shell #mobileSidebar .offcanvas-body {
        height: calc(100dvh - 72px) !important;
        background: linear-gradient(180deg, #102d44 0%, #0c2235 100%) !important;
        overflow: hidden auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.20) transparent;
    }

    .craftgrid-authenticated-shell #mobileSidebar .offcanvas-body::-webkit-scrollbar {
        width: 5px;
    }

    .craftgrid-authenticated-shell #mobileSidebar .offcanvas-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .craftgrid-authenticated-shell #mobileSidebar .offcanvas-body::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.20);
        border-radius: 999px;
    }

    /* _Sidebar is shared by desktop and mobile. Its mobile-only brand is
       redundant because the offcanvas header is now the single brand area. */
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-brand {
        display: none !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar {
        width: 100% !important;
        min-height: 100% !important;
        padding: 15px 10px 24px !important;
        background: transparent !important;
        color: var(--cg-mobile-nav-text) !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-section-label {
        margin: 3px 10px 9px !important;
        color: var(--cg-mobile-nav-muted) !important;
        font-size: 10px !important;
        line-height: 1.2;
        font-weight: 750 !important;
        letter-spacing: .16em !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-dashboard-link,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group-toggle {
        min-height: 48px !important;
        margin: 2px 4px !important;
        padding: 0 9px !important;
        border-radius: 10px !important;
        color: var(--cg-mobile-nav-text) !important;
        background: transparent !important;
        box-sizing: border-box;
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-dashboard-link:hover,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group-toggle:hover,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-dashboard-link:focus-visible,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group-toggle:focus-visible {
        color: #fff !important;
        background: rgba(255,255,255,.065) !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group[open] > .sidebar-group-toggle {
        background: rgba(255,255,255,.055) !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-link.active,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group:has(.sidebar-submenu-link.active) > .sidebar-group-toggle {
        color: #fff !important;
        background: linear-gradient(90deg, rgba(7,151,108,.28), rgba(7,151,108,.13)) !important;
        box-shadow: inset 3px 0 0 #55c99f, inset 0 0 0 1px rgba(85,201,159,.10) !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-link-content {
        min-width: 0;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group-toggle > .sidebar-link-content > span,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-dashboard-link > .sidebar-link-content > span {
        color: inherit !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        letter-spacing: -.005em;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group-toggle > .sidebar-link-content > i,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-dashboard-link > .sidebar-link-content > i {
        width: 22px;
        min-width: 22px;
        margin-right: 9px !important;
        text-align: center;
        color: rgba(255,255,255,.64) !important;
        font-size: .94rem !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group[open] > .sidebar-group-toggle > .sidebar-link-content > i,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group:has(.sidebar-submenu-link.active) > .sidebar-group-toggle > .sidebar-link-content > i {
        color: #72d4b2 !important;
    }

    /* Controls get consistent touch targets and no longer collide with
       long module names such as Finance & Accounting. */
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-drag-handle {
        flex: 0 0 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 36px !important;
        margin: 0 1px 0 4px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,.48) !important;
        border-radius: 7px;
        cursor: grab;
        touch-action: none;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-drag-handle:active {
        cursor: grabbing;
        background: rgba(255,255,255,.08);
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-favorite-button {
        flex: 0 0 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        height: 36px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,.44) !important;
        border-radius: 7px;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-favorite-button:hover,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-favorite-button:focus-visible {
        color: #f0b92d !important;
        background: rgba(240,185,45,.10) !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-favorite-button.is-favorite,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-favorite-button[aria-pressed="true"] {
        color: #f0b92d !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-chevron {
        flex: 0 0 18px !important;
        width: 18px !important;
        min-width: 18px !important;
        margin-left: 1px !important;
        color: rgba(255,255,255,.50) !important;
        font-size: .68rem !important;
    }

    /* Nested menu items are visibly subordinate but remain easy to tap. */
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu {
        margin: 1px 4px 5px 17px;
        padding: 3px 0 3px 10px;
        border-left: 1px solid rgba(255,255,255,.10);
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu-link,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu .sidebar-link {
        min-height: 42px !important;
        margin: 1px 0 !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
        color: rgba(255,255,255,.68) !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu-link:hover,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu-link:focus-visible {
        color: #fff !important;
        background: rgba(255,255,255,.055) !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu-link.active {
        color: #fff !important;
        background: rgba(7,151,108,.22) !important;
        box-shadow: inset 2px 0 0 #55c99f !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu-link > i {
        width: 20px;
        min-width: 20px;
        margin-right: 8px;
        color: rgba(255,255,255,.52) !important;
    }
}

@media (max-width: 575.98px) {
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar {
        width: min(340px, 90vw) !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .erp-sidebar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group-toggle,
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-dashboard-link {
        margin-left: 3px !important;
        margin-right: 3px !important;
    }
}


/* =========================================================
   CraftGrid One — mobile header brand refinement
   ---------------------------------------------------------
   Keep the brand readable on narrow screens while preserving
   the compact single-row header.
   ========================================================= */
@media (max-width: 575.98px) {
    .craftgrid-authenticated-shell .craftgrid-topbar .craftgrid-brand {
        max-width: 158px !important;
    }

    .craftgrid-authenticated-shell .craftgrid-topbar .craftgrid-brand .cg-brand-copy strong {
        font-size: 1.16rem !important;
        line-height: 1 !important;
        letter-spacing: -.025em !important;
        font-weight: 750 !important;
        white-space: nowrap !important;
    }

    /* CraftGrid One uses the product green + white brand treatment. */
    .craftgrid-authenticated-shell .craftgrid-topbar .craftgrid-brand .cg-brand-copy strong {
        color: #55C99F !important;
    }

    .craftgrid-authenticated-shell .craftgrid-topbar .craftgrid-brand .cg-brand-copy strong span {
        color: #55C99F !important;
    }

    .craftgrid-authenticated-shell .craftgrid-topbar .craftgrid-brand .cg-brand-copy strong em {
        color: #FFFFFF !important;
        font-style: normal;
    }
}


/* =========================================================
   Mobile module accordion — soft open/close motion
   ---------------------------------------------------------
   The sidebar uses native <details> for accessibility/state.
   We add a lightweight height/opacity transition to the submenu
   so expanding/collapsing a module feels deliberate rather than
   snapping open.
   ========================================================= */
@media (max-width: 991.98px) {
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu {
        overflow: hidden;
        will-change: max-height, opacity, transform;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu.cg-menu-animating {
        transition:
            max-height .24s cubic-bezier(.22, 1, .36, 1),
            opacity .18s ease,
            transform .24s cubic-bezier(.22, 1, .36, 1);
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu.cg-menu-open {
        opacity: 1;
        transform: translateY(0);
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu.cg-menu-closed {
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
    }

    /* Keep the chevron motion in sync with the accordion. */
    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-chevron {
        transition: transform .22s cubic-bezier(.22, 1, .36, 1),
                    color .15s ease;
    }

    .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-group[open] > .sidebar-group-toggle .sidebar-chevron {
        transform: rotate(90deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu,
        .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-submenu.cg-menu-animating,
        .craftgrid-authenticated-shell .craftgrid-mobile-sidebar .sidebar-chevron {
            transition: none !important;
        }
    }
}


/* Pointer-based module reordering feedback. Works for touch and mouse. */
.craftgrid-authenticated-shell .sidebar-module-dragging {
    opacity: .72;
    transform: scale(.99);
    transition: opacity .12s ease, transform .12s ease, box-shadow .12s ease;
    position: relative;
    z-index: 5;
}

.craftgrid-authenticated-shell .sidebar-module-drag-target > .sidebar-group-toggle {
    box-shadow: inset 3px 0 0 #72d4b2, inset 0 0 0 1px rgba(114, 212, 178, .18);
}

.craftgrid-authenticated-shell .sidebar-drag-handle {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
    .craftgrid-authenticated-shell .sidebar-module-dragging {
        transition: none;
        transform: none;
    }
}


/* -------------------------------------------------------------------------
   CraftGrid One — deliberate slow mobile slide-menu open/close
   Keep Bootstrap's offcanvas state handling, but explicitly control the
   transform transition so the drawer visibly glides instead of snapping.
   ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar,
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.showing,
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.hiding,
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.show {
        transition: transform .78s cubic-bezier(.22, 1, .36, 1) !important;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Bootstrap controls visibility; do not animate it independently. */
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar {
        visibility: hidden;
    }

    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.showing,
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.show:not(.hiding),
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.hiding {
        visibility: visible;
    }

    .craftgrid-authenticated-shell .offcanvas-backdrop.fade {
        transition: opacity .58s ease !important;
    }

    .craftgrid-authenticated-shell #mobileSidebar .offcanvas-header,
    .craftgrid-authenticated-shell #mobileSidebar .offcanvas-body {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar,
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.showing,
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.hiding,
    .craftgrid-authenticated-shell #mobileSidebar.craftgrid-mobile-sidebar.show {
        transition: none !important;
    }

    .craftgrid-authenticated-shell .offcanvas-backdrop {
        transition: none !important;
    }
}