/* ============================================================================
 * 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;
}

/* Sectioned sidebar (multi-product tenants) ---------------------------- */
/* The sidebar groups links by product. Each group has a small uppercase
   label header so the user can see at a glance which product the links
   belong to. The active product's section visually leads; other sections
   still show all links underneath. In collapsed (icon-rail) state, only
   the divider remains. */

.cp-subnav-section {
    display: flex;
    flex-direction: column;
}

/* Category headers — bold, ink-coloured, clearly a section divider not a hint.
   Carries a leading icon so the section is identifiable even when the sidebar
   is collapsed to the icon rail (text hides, icon stays). */
.cp-subnav-section-label {
    padding: 0.9rem 0.85rem 0.55rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--navy);
    background-color: var(--cream);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Constrain the section-label icon — without this it has no intrinsic size
   and SVGs with no width/height attributes grow to fill available space. */
.cp-subnav-section-label svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* First section's label doesn't need a top border (the sidebar's own top edge
   already provides one visually). */
.cp-subnav-section:first-child > .cp-subnav-section-label {
    border-top: none;
}

/* Active section accent — gold left edge keyline only. Background stays
   cream like the other section labels so adjacent labels look consistent. */
.cp-subnav-section--active > .cp-subnav-section-label {
    border-left: 3px solid var(--gold);
    padding-left: calc(0.85rem - 3px);
}

/* In collapsed icon-rail mode: hide the label text, keep the icon centred. */
body.cp-nav-collapsed .cp-subnav-section-label {
    justify-content: center;
    padding: 0.7rem 0;
    gap: 0;
}

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

/* In collapsed mode, drop the left-edge keyline (no room on the narrow rail)
   and tint the active section's icon gold instead. */
body.cp-nav-collapsed .cp-subnav-section--active > .cp-subnav-section-label {
    border-left: none;
    padding-left: 0;
    color: var(--gold);
}

/* Expand/collapse menu group (e.g. Settings with sub-pages) ------------ */
/* Parent: a <button> that toggles its children's visibility. Visually
   identical to a regular .cp-subnav-link but with a chevron at the right
   that rotates on expand. Children are .cp-subnav-link--sub — indented
   under the icon column so they read as a nested level. */

/* Toggle uses a <button> instead of <a> — explicitly reset browser defaults
   that would make it render differently from sibling .cp-subnav-link anchors
   (padding, border, background, font-family, box-sizing). Note: we ONLY
   override font-family (buttons default to system fonts); font-weight,
   font-size, color, line-height all cascade correctly from .cp-subnav-link
   provided we don't use the `font: inherit` shorthand, which would
   short-circuit those class-level rules. */
.cp-subnav-link--toggle {
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}

/* Chevron — needs an explicit override of .cp-subnav-link svg (which gives
   every menu icon a 44px-wide bordered cell). Higher selector specificity
   strips the icon-cell treatment so the chevron sits inline as a small glyph.
   align-self: center forces vertical centering — the parent flex container
   uses align-items: stretch, which would otherwise pin a fixed-height
   child like this 14×14 chevron to the top of the row. */
.cp-subnav-link--toggle .cp-subnav-chevron {
    flex: none;
    align-self: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border-right: none;
    background-color: transparent;
    margin-left: auto;
    margin-right: 0.85rem;
    color: var(--mid);
    transition: transform 0.2s ease, color 0.15s ease-in-out;
}

.cp-subnav-link--toggle:hover .cp-subnav-chevron,
.cp-subnav-link--toggle:focus .cp-subnav-chevron {
    background-color: transparent;
    color: var(--navy);
}

.cp-subnav-link--toggle.is-expanded .cp-subnav-chevron {
    transform: rotate(180deg);
    color: var(--navy);
}

/* Children container — same background as main menu links so the indent
   area reads as continuous space, not a separate column. */
.cp-subnav-children {
    display: none;
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
}

.cp-subnav-children.is-expanded {
    display: flex;
    flex-direction: column;
}

/* Sub-links: text-only, no icon column. Padding lives on the inner <span>
   so the link's hover/active background can fill edge-to-edge without
   leaving a coloured stripe on the left. */
.cp-subnav-link--sub {
    height: 34px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid rgba(11, 18, 32, 0.05);
    padding-left: 0;
}

/* Indent the text past where the icon column ends so sub-items visually
   align under their parent menu item's label. */
.cp-subnav-link--sub > span {
    padding-left: calc(var(--sidebar-w-collapsed) + 0.5rem);
}

/* Hover — barely-tinted navy on white to give light interactive feedback
   without matching the cream of the category labels above. */
.cp-subnav-link--sub:hover,
.cp-subnav-link--sub:focus {
    background-color: rgba(11, 31, 58, 0.04);
    color: var(--navy);
}

/* Active — soft gold wash echoes the gold left-edge accent, and is
   visually distinct from the cream-coloured category labels. */
.cp-subnav-link--sub.active {
    background-color: rgba(176, 136, 64, 0.10);
    color: var(--navy);
    font-weight: 700;
    border-left: 3px solid var(--gold);
}

/* Compensate for the 3px gold left-border so active label aligns with siblings. */
.cp-subnav-link--sub.active > span {
    padding-left: calc(var(--sidebar-w-collapsed) + 0.5rem - 3px);
}

/* Sub-links are text-only — no icon to display. */
.cp-subnav-link--sub svg {
    display: none;
}

/* In collapsed icon-rail mode: toggle button stays as a regular icon row
   (chevron hidden, click goes nowhere — user expands sidebar to reach
   children). Children container is fully hidden. */
body.cp-nav-collapsed .cp-subnav-chevron {
    display: none;
}

body.cp-nav-collapsed .cp-subnav-children {
    display: none !important;
}