/* ============================================================================
 * Certopact sidebar stylesheet
 * Owns every rule that drives the icon-rail sidebar:
 *   - .cp-hamburger toggle in the topbar
 *   - .cp-subnav vertical navigation (expanded + collapsed states)
 *   - layout offsets so main + footer reserve room for the sidebar
 *   - .cp-nav-backdrop mobile overlay
 *   - .cp-role-operator override that hides the chrome entirely
 *
 * Depends on CSS custom properties declared in certopact.css :root:
 *   --topnav-h, --sidebar-w, --sidebar-w-collapsed
 *   --paper, --cream, --line, --navy, --ink, --gold, --mid
 *
 * Load AFTER certopact.css so the variables are already defined.
 * ============================================================================ */

/* Hamburger toggle ------------------------------------------------------ */

.cp-hamburger {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Match the icon-rail width so the glyph lines up with the menu icons. */
    width: var(--sidebar-w-collapsed);
    height: 38px;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--navy);
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.cp-hamburger:hover,
.cp-hamburger:focus {
    color: var(--gold);
}

/* Sidebar navigation — icon-rail style; collapses to an icon-only rail --- */

.cp-subnav {
    position: fixed;
    top: var(--topnav-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background-color: var(--paper);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease;
    z-index: 1035;
}

.cp-subnav::-webkit-scrollbar {
    width: 6px;
}

.cp-subnav::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 3px;
}

/* Collapsed: shrink to just the icon column and hide the labels. */
body.cp-nav-collapsed .cp-subnav {
    width: var(--sidebar-w-collapsed);
}

body.cp-nav-collapsed .cp-subnav-link span {
    display: none;
}

.cp-subnav-link {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* The icon sits in a fixed square cell with a vertical divider — the cells
   stack into the left icon rail that stays visible when collapsed. */
.cp-subnav-link svg {
    flex: none;
    width: var(--sidebar-w-collapsed);
    height: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    border-right: 1px solid var(--line);
    color: var(--mid);
    background-color: transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.cp-subnav-link span {
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
}

.cp-subnav-link:hover,
.cp-subnav-link:focus {
    background-color: var(--cream);
}

.cp-subnav-link:hover svg,
.cp-subnav-link:focus svg {
    color: var(--navy);
    background-color: var(--cream);
}

.cp-subnav-link.active {
    color: var(--ink);
    font-weight: 700;
}

/* Active item: the whole icon cell fills navy and the glyph turns white. */
.cp-subnav-link.active svg,
.cp-subnav-link.active:hover svg,
.cp-subnav-link.active:focus svg {
    background-color: var(--navy);
    color: #fff;
}

/* Content reserves room for the sidebar; the offset follows its width.
   An extra 1.5rem breathing room past the sidebar (and on the right) keeps
   page content from sitting flush against the sidebar/edge regardless of
   whether a per-page wrapper is constrained or full-width. */
@media (min-width: 992px) {
    body:has(.cp-subnav) main,
    body:has(.cp-subnav) .cp-footer {
        padding-left: calc(var(--sidebar-w) + 1.5rem);
        padding-right: 1.5rem;
        transition: padding-left 0.25s ease;
    }

    body.cp-nav-collapsed:has(.cp-subnav) main,
    body.cp-nav-collapsed:has(.cp-subnav) .cp-footer {
        padding-left: calc(var(--sidebar-w-collapsed) + 1.5rem);
    }
}

/* Mobile: the icon rail always reserves its width; expanding the sidebar
   overlays the labels panel above a dimmed backdrop. */
@media (max-width: 991.98px) {
    body:has(.cp-subnav) main,
    body:has(.cp-subnav) .cp-footer {
        padding-left: calc(var(--sidebar-w-collapsed) + 1rem);
        padding-right: 1rem;
    }
}

.cp-nav-backdrop {
    position: fixed;
    inset: var(--topnav-h) 0 0 0;
    background: rgba(11, 18, 32, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 1034;
}

@media (max-width: 991.98px) {
    body:not(.cp-nav-collapsed) .cp-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }
}

/* Operator role: no menu at all — seamless, full-width experience ------- */
.cp-role-operator .cp-subnav,
.cp-role-operator .cp-hamburger,
.cp-role-operator .cp-nav-backdrop {
    display: none !important;
}

.cp-role-operator main,
.cp-role-operator .cp-footer {
    padding-left: 0 !important;
}