/* === NAVIGATION - SIDEBAR === */

/* Toggle button (mobile) */
.cw-nav-toggle {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: none;
}

/* Page layout wrapper */
.cw-page-wrapper {
    display: flex;
    height: calc(100vh - 80px);
    overflow: hidden;
}

/* Main sidebar container */
.cw-sidebar {
    width: 250px !important;
    flex-shrink: 0 !important;
    background: var(--cwh-white) !important;
    border-right: 1px solid var(--cwh-middle-blue) !important;
    overflow-y: auto !important;
    height: 100% !important;
    z-index: 10 !important;
    min-height: 0 !important;
}

/* Navigation wrapper */
.cw-sidebar-nav {
    padding: 8px 0 24px;
}

/* Section header */
.cw-sb-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--cwh-font-family);
    font-size: 10px;
    font-weight: var(--cwh-font-bold);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cwh-dark-blue);
    padding: 16px 16px 6px;
}
/* Section header chevron icon */
.cw-sb-header .nav-chevron {
    font-size: 16px;
    transition: transform 0.2s ease;
}
/* Section header chevron - collapsed state */
.cw-sb-header.collapsed .nav-chevron {
    transform: rotate(-90deg);
}

/* Divider */
.cw-sb-divider {
    border-top: 1px solid var(--cwh-middle-blue);
    margin: 8px 0;
}

/* Nav items */
.cw-sb-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 16px !important;
    color: var(--cwh-dark-blue) !important;
    font-family: var(--cwh-font-family) !important;
    font-size: 13px !important;
    font-weight: var(--cwh-font-medium) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    line-height: 1.4 !important;
}
/* Nav item - hover state */
.cw-sb-item:hover {
    background: var(--cwh-middle-blue) !important;
    color: var(--cwh-white) !important;
    text-decoration: none !important;
}
/* Nav item - active/selected state */
.cw-sb-item.cw-sb-active {
    background: var(--cwh-middle-blue) !important;
    color: var(--cwh-white) !important;
    font-weight: var(--cwh-font-bold) !important;
    border-left-color: var(--cwh-dark-blue) !important;
}
/* Nav item - deprecated state (legacy item scheduled for removal, still clickable) */
.cw-sb-item.cw-sb-deprecated {
    color: var(--cwh-light-grey) !important;
}
.cw-sb-item.cw-sb-deprecated:hover {
    background: var(--cwh-light-grey) !important;
    color: var(--cwh-white) !important;
}
/* Nav item icon */
.cw-sb-item i {
    font-size: 17px !important;
    width: 18px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Main content area */
.cw-main-area {
    flex: 1;
    overflow-y: auto;
    background: var(--cwh-white);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Body content grows to push footer down on short pages, but won't shrink on long pages */
#body {
    flex: 1 0 auto;
}

/* Scrollbars */
.cw-sidebar::-webkit-scrollbar,
.cw-main-area::-webkit-scrollbar {
    width: 6px;
}
/* Scrollbar track */
.cw-sidebar::-webkit-scrollbar-track,
.cw-main-area::-webkit-scrollbar-track {
    background: transparent;
}
/* Scrollbar thumb */
.cw-sidebar::-webkit-scrollbar-thumb,
.cw-main-area::-webkit-scrollbar-thumb {
    background: var(--cwh-light-grey);
    border-radius: 3px;
}

/* Footer — override theme absolute positioning so it flows naturally inside the scrollable main area */
.cw-main-area .footer {
    position: static !important;
    bottom: auto !important;
    left:   auto !important;
    right:  auto !important;
}

/* Mobile */
@media (max-width: 992px) {
    .cw-nav-toggle {
        display: block !important;
    }
    .cw-page-wrapper {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .cw-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 0 !important;
        overflow: hidden !important;
        border-right: none !important;
        border-bottom: 1px solid var(--cwh-middle-blue) !important;
        transition: max-height .3s ease !important;
    }
    .cw-sidebar.cw-sidebar-open {
        max-height: 600px !important;
        overflow-y: auto !important;
    }
    .cw-main-area {
        height: auto !important;
        overflow-y: visible !important;
    }
}

/* ── Breadcrumb (.cwh-breadcrumb) ───────────────────────────────────────────
   Pill-shaped breadcrumb that replaces Bootstrap's default text-only crumb
   chain with a brand-coloured navigation strip. Apply on the <ol> alongside
   .breadcrumb (so Bootstrap's flex/list reset still kicks in):

       <ol class="breadcrumb cwh-breadcrumb m-0">
         <li class="breadcrumb-item"><a onclick="...">Dashboard</a></li>
         <li class="breadcrumb-item"><a onclick="...">Corporate Users</a></li>
         <li class="breadcrumb-item active">Ramandeep Maan</li>
       </ol>

   Uses a chevron divider via ::before so the markup stays a plain Bootstrap
   breadcrumb — no extra spans, and no clobbering of the BS5 spec'd structure.
*/
.cwh-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 6px 14px;
    background: rgba(153, 209, 250, 0.18); /* var(--cwh-light-blue) at low alpha */
    border: 1px solid var(--cwh-border);
    border-radius: 999px;
    font-family: var(--cwh-font-family);
    font-size: 0.8125rem;
    line-height: 1.2;
}

.cwh-breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--cwh-middle-blue);
    font-weight: var(--cwh-font-medium);
}

.cwh-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}

/* Standard "/" separator in brand colour. */
.cwh-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    font-family: var(--cwh-font-family);
    font-weight: normal;
    color: var(--cwh-middle-blue);
    padding: 0 6px;
    opacity: 0.6;
}

.cwh-breadcrumb .breadcrumb-item a {
    color: var(--cwh-open-blue);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    transition: background-color 120ms ease, color 120ms ease;
    font-weight: var(--cwh-font-medium);
}

.cwh-breadcrumb .breadcrumb-item a:hover,
.cwh-breadcrumb .breadcrumb-item a:focus {
    background: var(--cwh-light-blue);
    color: var(--cwh-dark-blue);
    text-decoration: none;
}

.cwh-breadcrumb .breadcrumb-item.active {
    color: var(--cwh-dark-blue);
    font-weight: var(--cwh-font-bold);
    padding: 4px 10px;
}

/* First-crumb home glyph removed — plain text crumbs only, no font-icon deps. */