/* Shared desktop icon-rail + flyout chrome (used by client + technician nav). */

:root {
    --sidebar-collapsed-width: 64px;
}

@media (min-width: 850px) {
    /* Width + gutter follow collapsed mode from either JS class or Blazor .nav-collapsed */
    .sidebar.sidebar--collapsed,
    .sidebar:has(.nav-collapsed) {
        width: var(--sidebar-collapsed-width) !important;
    }

    html.sidebar-collapsed,
    html:has(.nav-collapsed) {
        --sidebar-width: var(--sidebar-collapsed-width);
    }

    .sidebar.sidebar--collapsed .sidebar-resize-handle,
    .sidebar:has(.nav-collapsed) .sidebar-resize-handle {
        width: 10px;
    }

    /* Icon rail visuals if JS class landed but Blazor flag lagged (or the reverse).
       Flyouts are excluded — they always show icon + text. */
    .sidebar.sidebar--collapsed .nav-link-label,
    .sidebar.sidebar--collapsed .nav-section-label,
    .sidebar.sidebar--collapsed .nav-chevron,
    .sidebar.sidebar--collapsed .nav-version,
    .sidebar.sidebar--collapsed .nav-brand-logo {
        display: none !important;
    }

    .sidebar.sidebar--collapsed .nav-flyout .nav-link-label {
        display: inline !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar.sidebar--collapsed .nav-brand-mark {
        display: inline-flex !important;
    }

    .sidebar.sidebar--collapsed .nav-scrollable .nav-item.px-3 {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .sidebar.sidebar--collapsed .nav-flyout .nav-item.px-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebar.sidebar--collapsed .nav-link,
    .sidebar.sidebar--collapsed a.nav-link {
        justify-content: center;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .sidebar.sidebar--collapsed .nav-flyout .nav-link,
    .sidebar.sidebar--collapsed .nav-flyout a.nav-link {
        justify-content: flex-start;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .sidebar.sidebar--collapsed .nav-flyout .nav-item--pinable > .nav-link,
    .sidebar.sidebar--collapsed .nav-flyout .nav-item--pinable > a.nav-link {
        padding-right: 2.25rem !important;
    }

    .sidebar.sidebar--collapsed .nav-link > .bi,
    .sidebar.sidebar--collapsed a.nav-link > .bi {
        margin-right: 0 !important;
    }

    .sidebar.sidebar--collapsed .nav-flyout .nav-link > .bi,
    .sidebar.sidebar--collapsed .nav-flyout a.nav-link > .bi {
        margin-right: 0.55rem !important;
    }
}

.nav-flyout {
    position: fixed;
    z-index: 1100;
    min-width: 14.5rem;
    max-width: 18rem;
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    padding: 0.4rem 0.35rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: linear-gradient(to bottom, #0b0b0b, #0367A2);
    box-shadow: 8px 10px 28px rgba(0, 0, 0, 0.35);
}

.nav-flyout-title {
    padding: 0.35rem 0.7rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.nav-flyout .nav-item {
    padding-bottom: 0.1rem;
}

.nav-flyout .nav-link,
.nav-flyout a.nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
    min-height: 2.15rem;
    display: flex;
    align-items: center;
    line-height: 1.25;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    padding: 0.25rem 0.65rem;
    font-size: 0.86rem;
}

.nav-flyout .nav-link:hover,
.nav-flyout a.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-flyout a.nav-link.active,
.nav-flyout .nav-link.active {
    background-color: rgba(255, 255, 255, 0.37);
    color: #fff;
}

.nav-flyout .nav-link-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-flyout .bi {
    display: inline-block;
    position: relative;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.55rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

.nav-flyout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
}

.sidebar-rail-toggle {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    margin-left: auto;
    margin-right: 0.15rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 4;
}

.sidebar-rail-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
}

.sidebar-rail-toggle-icon {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid rgba(255, 255, 255, 0.85);
    border-bottom: 2px solid rgba(255, 255, 255, 0.85);
    transform: rotate(135deg); /* point left = collapse */
    transition: transform 0.15s ease;
}

.sidebar-rail-toggle.is-collapsed .sidebar-rail-toggle-icon {
    transform: rotate(-45deg); /* point right = expand */
}

@media (min-width: 850px) {
    /* Collapsed rail: stack mark + toggle so nothing spills onto first nav icon */
    .nav-collapsed .nav-top-row,
    .sidebar.sidebar--collapsed .nav-top-row {
        min-height: 5.25rem;
        padding: 0.65rem 0.2rem !important;
    }

    .nav-collapsed .nav-brand-row,
    .sidebar.sidebar--collapsed .nav-brand-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        padding-right: 0;
    }

    .nav-collapsed .sidebar-rail-toggle,
    .sidebar.sidebar--collapsed .sidebar-rail-toggle {
        margin-left: 0;
        margin-right: 0;
    }

    .nav-collapsed .nav-scrollable,
    .sidebar.sidebar--collapsed .nav-scrollable {
        /* header is taller when collapsed; keep menu below it */
        height: calc(100vh - 5.25rem);
    }
}

@media (max-width: 849.98px) {
    .sidebar-rail-toggle {
        display: none;
    }
}

/* ---- Pinned menu items ---- */
.nav-section-pinned {
    min-width: 0;
}

.nav-section-pinned .nav-section-label {
    color: rgba(255, 220, 140, 0.75);
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem 0.35rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}

.nav-section-pinned .nav-item--pinable {
    min-width: 0;
}

.nav-section-pinned .nav-item--pinable > .nav-link,
.nav-section-pinned .nav-item--pinable > a.nav-link {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 0;
}

.nav-section-pinned .nav-link > .bi,
.nav-section-pinned a.nav-link > .bi {
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    height: 1.25rem;
    margin-right: 0.65rem !important;
}

.nav-section-pinned .nav-link-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expanded sidebar: keep icon + label on one row; truncate long labels. */
.sidebar .nav-scrollable .nav-link,
.sidebar .nav-scrollable a.nav-link,
.sidebar .nav-scrollable .nav-toggle,
.sidebar .nav-flyout .nav-link,
.sidebar .nav-flyout a.nav-link {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.sidebar .nav-scrollable .nav-link-label,
.sidebar .nav-flyout .nav-link-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item--pinable {
    position: relative;
    min-width: 0;
}

.nav-item--pinable > .nav-link,
.nav-item--pinable > a.nav-link {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-right: 2.05rem;
}

.nav-pin-btn {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    width: 1.55rem;
    height: 1.55rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
    z-index: 2;
}

.nav-item--pinable:hover .nav-pin-btn,
.nav-pin-btn.is-pinned,
.nav-pin-btn:focus-visible {
    opacity: 1;
}

.nav-pin-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 220, 140, 0.95);
}

.nav-pin-btn.is-pinned {
    color: #ffc107;
}

.nav-pin-btn-icon {
    width: 0.95rem;
    height: 0.95rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.173l.078.07c.22.197.548.546.902 1.022l.005.006c.39.515.733 1.21.733 2.002A.5.5 0 0 1 12 10h-3v3.5a.5.5 0 0 1-1 0V10H5a.5.5 0 0 1-.5-.5c0-.792.343-1.487.733-2.002l.005-.006c.354-.476.682-.825.902-1.022l.078-.07V2.277a2 2 0 0 1-.354-.298C4.342 1.674 4 1.18 4 .5a.5.5 0 0 1 .146-.354'/%3E%3C/svg%3E");
    /* currentColor doesn't work in data URI fill - use white/gold via filter on pinned */
    filter: brightness(0) invert(1);
    opacity: 0.55;
}

.nav-pin-btn.is-pinned .nav-pin-btn-icon {
    opacity: 1;
    filter: invert(76%) sepia(68%) saturate(1200%) hue-rotate(359deg) brightness(104%) contrast(104%);
}

.nav-submenu .nav-item--pinable > .nav-link,
.nav-submenu .nav-item--pinable > a.nav-link {
    padding-right: 1.9rem;
}

.nav-flyout .nav-item--pinable {
    min-width: 0;
}

.nav-flyout .nav-item--pinable > .nav-link,
.nav-flyout .nav-item--pinable > a.nav-link {
    padding-right: 2.25rem;
    min-width: 0;
    overflow: hidden;
}

.nav-flyout .nav-pin-btn {
    opacity: 0.55;
    right: 0.2rem;
    width: 1.55rem;
    height: 1.55rem;
}

.nav-flyout .nav-item--pinable:hover .nav-pin-btn,
.nav-flyout .nav-pin-btn.is-pinned {
    opacity: 1;
}

@media (min-width: 850px) {
    .nav-collapsed .nav-pin-btn,
    .sidebar.sidebar--collapsed .nav-pin-btn {
        /* Keep unpin available on pinned rail icons */
        right: 0.1rem;
        width: 1.1rem;
        height: 1.1rem;
    }

    .nav-collapsed .nav-section-pinned .nav-section-label,
    .sidebar.sidebar--collapsed .nav-section-pinned .nav-section-label {
        display: block !important;
        font-size: 0.5rem;
        letter-spacing: 0.02em;
        text-align: center;
        padding: 0.15rem 0.15rem 0.3rem;
        max-width: 100%;
    }

    .nav-collapsed .nav-section-pinned .nav-link-label,
    .sidebar.sidebar--collapsed .nav-section-pinned .nav-link-label {
        display: none !important;
    }

    .nav-collapsed .nav-section-pinned .nav-link > .bi,
    .sidebar.sidebar--collapsed .nav-section-pinned .nav-link > .bi {
        margin-right: 0 !important;
    }

    .nav-collapsed .nav-section:not(.nav-section-pinned) .nav-pin-btn:not(.is-pinned),
    .sidebar.sidebar--collapsed .nav-section:not(.nav-section-pinned) .nav-pin-btn:not(.is-pinned) {
        display: none;
    }

    .nav-collapsed .nav-section-pinned .nav-item--pinable > .nav-link,
    .sidebar.sidebar--collapsed .nav-section-pinned .nav-item--pinable > .nav-link {
        padding-right: 0.4rem;
        justify-content: center;
    }

    .nav-collapsed .nav-section-pinned .nav-pin-btn,
    .sidebar.sidebar--collapsed .nav-section-pinned .nav-pin-btn {
        opacity: 0;
    }

    .nav-collapsed .nav-section-pinned .nav-item--pinable:hover .nav-pin-btn,
    .sidebar.sidebar--collapsed .nav-section-pinned .nav-item--pinable:hover .nav-pin-btn {
        opacity: 1;
    }

    /* Flyouts: full-size pin + room so long labels don't sit under it */
    .nav-collapsed .nav-flyout .nav-pin-btn,
    .sidebar.sidebar--collapsed .nav-flyout .nav-pin-btn {
        display: inline-flex;
        right: 0.2rem;
        width: 1.55rem;
        height: 1.55rem;
    }

    .nav-collapsed .nav-flyout .nav-item--pinable > .nav-link,
    .nav-collapsed .nav-flyout .nav-item--pinable > a.nav-link,
    .sidebar.sidebar--collapsed .nav-flyout .nav-item--pinable > .nav-link,
    .sidebar.sidebar--collapsed .nav-flyout .nav-item--pinable > a.nav-link {
        padding-right: 2.25rem !important;
        justify-content: flex-start;
    }

    .nav-collapsed .nav-flyout .nav-link-label,
    .sidebar.sidebar--collapsed .nav-flyout .nav-link-label {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}