/* =============================================================================
   Navigation Sidebar Styles - Flowbite Compatible
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SVG Icon Support (CSS mask-image pattern)
   Renders SVG files with currentColor for CSS color inheritance.
   Works with Tailwind text-color classes just like Font Awesome icons.
   ----------------------------------------------------------------------------- */
.nav-svg-icon {
    /* The icon's own url is the only per-item value; every other mask property
       is the same for all of them, so the template hands over --nav-mask and
       this owns the rest. It used to write both mask-image declarations
       inline, twice per icon. */
    -webkit-mask-image: var(--nav-mask);
    mask-image: var(--nav-mask);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* -----------------------------------------------------------------------------
   Alert Badge Styles
   Badge is rendered as a sibling of the <a> inside <li class="relative">
   to avoid HTMX nesting conflicts when lazy-loading via hx-get.
   ----------------------------------------------------------------------------- */
.nav-badge {
    font-variant-numeric: tabular-nums;
}

/* Position the badge container absolutely within the relative <li> */
.nav-badge-container {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Allow clicks to pass through to the <a> beneath */
    z-index: 1;
}

/* Hide badge text when sidebar is collapsed, show dot instead */
#sidebar.sidebar-collapsed .nav-badge-container {
    right: 4px !important;
    top: 4px !important;
    transform: none !important;
}

#sidebar.sidebar-collapsed .nav-badge {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    padding: 0 !important;
    font-size: 0 !important;
}

/* -----------------------------------------------------------------------------
   Sidebar Base Styles - Flowbite
   ----------------------------------------------------------------------------- */

#sidebar {
    min-width: 250px;
    max-width: 250px;
    width: 250px;
    min-height: 100vh;
    height: 100vh;
    background: var(--patitur-sidebar-bg, var(--bg-sidebar));
    color: var(--fg-on-dark);
    font-family: var(--font-display);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
}

/* Ensure sidebar content area is scrollable and footer stays at bottom */
#sidebar > div {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden; /* Prevent container from scrolling */
}

/* Main content area should scroll */
#sidebar > div > ul {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 280px; /* Increased space for footer to prevent overlap */
    /* Hide scrollbar but maintain scroll functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#sidebar > div > ul::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Footer positioning */
#sidebar > div > div:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--patitur-sidebar-bg, var(--bg-sidebar));
    z-index: 10;
}

#sidebar.sidebar-collapsed {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
}

#sidebar.sidebar-collapsed > div {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* -----------------------------------------------------------------------------
   Top-level nav items typography (Dashboard, Alerts, Analyze, Manage, Organization)
   Design system variables with fallbacks per spec.
   ----------------------------------------------------------------------------- */
#sidebar > div > ul > li > a.nav-standalone-item,
#sidebar > div > ul > li > button.nav-dropdown-btn {
    color: var(--fg-on-dark) !important;
    font-family: var(--font-base) !important;
    font-size: var(--fs-md) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: var(--lh-normal) !important;
}

/* Icons inherit text color for consistency */
#sidebar > div > ul > li > a.nav-standalone-item .nav-svg-icon,
#sidebar > div > ul > li > a.nav-standalone-item i,
#sidebar > div > ul > li > button.nav-dropdown-btn .nav-svg-icon,
#sidebar > div > ul > li > button.nav-dropdown-btn i:not(.dropdown-chevron) {
    color: inherit !important;
}

/* SVG mask icons also need a fill colour — but Font Awesome <i> glyphs must
   NOT get a background or their ::before glyph is hidden behind a solid box
   (the "white square" bug). Scope background-color to .nav-svg-icon only. */
#sidebar > div > ul > li > a.nav-standalone-item .nav-svg-icon,
#sidebar > div > ul > li > button.nav-dropdown-btn .nav-svg-icon {
    background-color: currentColor !important;
}

#sidebar.sidebar-collapsed .sidebar-text {
    display: none !important;
}

#sidebar.sidebar-collapsed .sidebar-header-wrapper {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 0 !important;
}

#sidebar.sidebar-collapsed .sidebar-header-content {
    justify-content: center !important;
    width: 100% !important;
}

/* §6.3 — single collapse control. The former two-button
   collapse/expand pair is replaced by one chevron-double-left
   button that stays in place and rotates 180° (pointing right
   = "expand") when the rail is collapsed.
   ``width: 100%`` removed — it made the click target span the full
   64 px collapsed-rail width with the 16 px icon centered in it,
   which reads visually as "the chevron got bigger" even though the
   icon is unchanged. Natural button width keeps the chevron the
   same size at both states. */
#sidebar.sidebar-collapsed #sidebarCollapse {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#sidebarCollapseIcon {
    transition: transform 0.3s ease;
}

#sidebar.sidebar-collapsed #sidebarCollapseIcon {
    transform: rotate(180deg) !important;
}

#sidebar.sidebar-collapsed ul li {
    margin-bottom: 4px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#sidebar.sidebar-collapsed ul li a,
#sidebar.sidebar-collapsed ul li button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 48px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    background-color: color-mix(
        in srgb,
        var(--fg-body-strong) 50%,
        transparent
    ) !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

#sidebar.sidebar-collapsed ul li a i:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i:not(.dropdown-chevron) {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

#sidebar.sidebar-collapsed ul li a i:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i:not(.dropdown-chevron) {
    visibility: visible !important;
    display: inline-block !important;
}

#sidebar.sidebar-collapsed ul li a > span,
#sidebar.sidebar-collapsed ul li button > span {
    display: none !important;
    visibility: hidden !important;
}

#sidebar.sidebar-collapsed ul li a:hover,
#sidebar.sidebar-collapsed ul li button:hover {
    background-color: color-mix(
        in srgb,
        var(--fg-body-strong) 80%,
        transparent
    ) !important;
}

#sidebar.sidebar-collapsed ul li a.bg-gray-700,
#sidebar.sidebar-collapsed ul li button.bg-gradient-to-r {
    background: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
}

#sidebar.sidebar-collapsed ul li a > span,
#sidebar.sidebar-collapsed ul li button > span {
    display: none !important;
}

#sidebar.sidebar-collapsed ul li a .inline-flex:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button .inline-flex:not(.dropdown-chevron) {
    display: none !important;
}

#sidebar.sidebar-collapsed
    ul
    li
    svg:not([class*="fa"]):not([data-icon]):not(.dropdown-chevron) {
    display: none !important;
}

#sidebar.sidebar-collapsed ul li svg[class*="fa"],
#sidebar.sidebar-collapsed ul li svg[data-icon] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    color: color-mix(in srgb, var(--fg-on-dark) 80%, transparent) !important;
}

#sidebar.sidebar-collapsed ul[id$="-dropdown"] {
    display: none !important;
}

#sidebar.sidebar-collapsed .dropdown-tooltip {
    position: fixed !important;
    left: 64px !important;
    background-color: var(--bg-sidebar) !important;
    border: 1px solid color-mix(in srgb, var(--fg-on-dark) 10%, transparent) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
    display: block !important;
}

#sidebar.sidebar-collapsed .dropdown-tooltip li {
    margin: 0 !important;
}

#sidebar.sidebar-collapsed .dropdown-tooltip li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: color-mix(in srgb, var(--fg-on-dark) 80%, transparent) !important;
    text-decoration: none !important;
}

#sidebar.sidebar-collapsed .dropdown-tooltip li a:hover {
    background-color: color-mix(
        in srgb,
        var(--fg-body-strong) 80%,
        transparent
    ) !important;
    color: white !important;
}

#sidebar.sidebar-collapsed .dropdown-tooltip li a i {
    width: 20px !important;
    height: 20px !important;
    font-size: var(--fs-md) !important;
    margin-right: 12px !important;
    display: inline-block !important;
}

#sidebar.sidebar-collapsed .dropdown-tooltip li a span {
    display: inline-block !important;
    visibility: visible !important;
    color: inherit !important;
}

#sidebar.sidebar-collapsed ul li a i:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i.w-5:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i.h-5:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i.w-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i.w-5:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i.h-5:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i.w-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i.h-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i[class*="fa"]:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i[class*="fa"]:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i.w-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i.h-4:not(.dropdown-chevron) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: color-mix(in srgb, var(--fg-on-dark) 80%, transparent) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

#sidebar.sidebar-collapsed ul li a i::before,
#sidebar.sidebar-collapsed ul li button i::before,
#sidebar.sidebar-collapsed > div > div:last-child ul li a i::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    text-align: center !important;
}

#sidebar.sidebar-collapsed ul li a.bg-gray-700 i,
#sidebar.sidebar-collapsed ul li a.bg-gray-700:hover i,
#sidebar.sidebar-collapsed ul li button.bg-gradient-to-r i {
    color: white !important;
}

#sidebar.sidebar-collapsed > div > div:last-child ul li:not(:last-child) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 4px !important;
}

#sidebar.sidebar-collapsed > div > div:last-child ul li:not(:last-child) a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 48px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    background-color: color-mix(
        in srgb,
        var(--fg-body-strong) 50%,
        transparent
    ) !important;
}

#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li:not(:last-child)
    a:hover {
    background-color: color-mix(
        in srgb,
        var(--fg-body-strong) 80%,
        transparent
    ) !important;
}

#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li:not(:last-child)
    a
    span {
    display: none !important;
}

/* Ensure footer link icons remove any margin that might offset centering */
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li:not(:last-child)
    a
    i.mr-3,
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li:not(:last-child)
    a
    i[class*="mr-"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#sidebar.sidebar-collapsed > div > div:last-child ul li:not(:last-child) a i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: color-mix(in srgb, var(--fg-on-dark) 60%, transparent) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li:not(:last-child)
    a
    i::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    text-align: center !important;
}

#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li:not(:last-child)
    a:hover
    i {
    color: white !important;
}

#sidebar.sidebar-collapsed > div > div:last-child ul li:last-child {
    display: block !important;
    text-align: center !important;
    padding: 8px 0 !important;
}

#sidebar.sidebar-collapsed > div > div:last-child ul li:last-child p {
    font-size: var(--fs-2xs) !important;
    line-height: 1.2 !important;
}

#sidebar.sidebar-collapsed .user-profile-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

#sidebar.sidebar-collapsed .user-profile-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 48px !important;
    margin: 0 auto !important;
    border: none !important;
}

#sidebar.sidebar-collapsed .user-info,
#sidebar.sidebar-collapsed .user-chevron {
    display: none !important;
}

#sidebar.sidebar-collapsed .user-avatar-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0 !important;
    width: 32px !important; /* Smaller in collapsed state */
    height: 32px !important; /* Smaller in collapsed state */
    border-radius: 50% !important; /* Circular avatar - matches design system */
}

#sidebar.sidebar-collapsed .user-avatar-image {
    display: none !important;
}

#sidebar.sidebar-collapsed .user-avatar-initials {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--fs-md) !important;
    font-weight: bold !important;
    line-height: 1 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure sidebar is visible by default */
#sidebar {
    transform: translateX(0);
}

/* -----------------------------------------------------------------------------
   Sidebar Header
   ----------------------------------------------------------------------------- */

#sidebar .sidebar-header {
    flex-shrink: 0;
    padding: 15px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 64px; /* Minimum height to ensure alignment */
}

/* Collapsed sidebar header - horizontal layout with logo and caret on same line, centered */
#sidebar.sidebar-collapsed .sidebar-header {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 15px 0 !important; /* Remove horizontal padding for better centering */
    gap: 8px !important;
    min-height: 64px; /* Same height as expanded */
    width: 100%; /* Ensure full width for centering */
}

/* Header wrapper — pin to the logo's intrinsic 52px so the collapse
   chevron, which is 28×36 on its own, is vertically aligned with the
   "patitur" wordmark instead of riding 16px below it. Without this
   explicit height, the wrapper inherits stretched cross-axis sizing
   from the ancestor flex column and ``items-center`` ends up centering
   each child in a much taller box than the operator perceives. */
#sidebar .sidebar-header-wrapper {
    height: 52px;
}

/* Logo container */
#sidebar .patitur-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    height: 52px;
    flex: 1; /* Grow to fill space when expanded */
}

/* When collapsed, logo should not grow */
#sidebar.sidebar-collapsed .patitur-logo {
    flex: 0 0 auto !important; /* Don't grow when collapsed */
}

#sidebar .patitur-logo .logo-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        var(--patitur-green-primary) 0%,
        var(--patitur-green-secondary, var(--nav-active-gradient-end)) 100%
    );
    background-image: url("/static/img/patitur-logo-dark.png");
    background-size: 36px 36px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.4);
}

#sidebar .patitur-logo .logo-text {
    color: var(--patitur-green-primary);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    line-height: 52px;
    display: block;
}

/* Collapse button - High specificity selector ensures styles override any framework defaults */
#sidebar button.collapse-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--fg-on-dark) 70%, transparent);
    cursor: pointer;
    line-height: 1;
    box-shadow: none;
    transition: all 0.3s ease;
}

/* The logo's flex line escapes the parent's py-4 (16px) top inset, so the
   "patitur" wordmark renders 16px above the header wrapper's centre while the
   collapse button centres on the wrapper. Pull the button up by that same
   16px so the << chevron shares the wordmark's centreline. Expanded state
   only — the collapsed state re-centres the button via its own rule. */
#sidebar:not(.sidebar-collapsed) #sidebarCollapse {
    transform: translateY(-16px);
}

#sidebar button.collapse-btn:hover,
#sidebar button.collapse-btn:active {
    color: var(--fg-on-dark);
    background: color-mix(in srgb, var(--fg-on-dark) 10%, transparent);
    border-radius: 4px;
    box-shadow: none;
}

/* Focus outline for accessibility (WCAG 2.1 AA compliance) */
#sidebar button.collapse-btn:focus {
    color: var(--fg-on-dark);
    background: color-mix(in srgb, var(--fg-on-dark) 10%, transparent);
    border-radius: 4px;
    outline: 2px solid var(--patitur-green-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(1, 228, 191, 0.2);
}

#sidebar button.collapse-btn i {
    font-size: var(--fs-md);
    display: block;
    line-height: 1;
}

/* Collapsed sidebar header adjustments */
#sidebar.sidebar-collapsed .patitur-logo {
    justify-content: center;
    gap: 8px;
    height: 52px;
    flex: 0 0 auto;
    margin: 0;
}

#sidebar.sidebar-collapsed .patitur-logo .logo-text {
    display: none !important;
}

#sidebar.sidebar-collapsed .patitur-logo .logo-icon {
    width: 52px;
    height: 52px;
    background-size: 36px 36px;
    margin: 0;
    flex-shrink: 0;
}

#sidebar.sidebar-collapsed .collapse-btn {
    order: 2;
    margin: 0;
    align-self: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

/* -----------------------------------------------------------------------------
   Navigation Menu
   ----------------------------------------------------------------------------- */

#sidebar ul.list-unstyled.components {
    flex: 1;
    padding: 15px 0;
    margin-bottom: 0;
    overflow-y: auto;
}

#sidebar ul.list-unstyled.components li {
    margin-bottom: 2px;
}

#sidebar ul.list-unstyled.components li a {
    display: block;
    padding: 8px 20px;
    font-size: var(--fs-md);
    color: color-mix(in srgb, var(--fg-on-dark) 90%, transparent);
    text-decoration: none;
    text-align: left;
    transition: all 0.3s;
}

#sidebar ul.list-unstyled.components li a:hover,
#sidebar ul.list-unstyled.components li a:focus {
    color: var(--fg-on-dark);
    background: color-mix(in srgb, var(--fg-on-dark) 10%, transparent);
}

#sidebar ul.list-unstyled.components li a i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
}

/* Active menu item */
#sidebar .components li.active {
    background: linear-gradient(
        135deg,
        var(--patitur-green-primary) 0%,
        var(--patitur-green-secondary, var(--nav-active-gradient-end)) 100%
    );
    border-radius: 8px;
    margin: 4px 8px;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
}

#sidebar .components li.active > a {
    color: white;
    font-weight: 600;
}

/* =============================================================================
   DROPDOWN CHEVRON (CARET) - VISIBILITY AND ROTATION
   =============================================================================
   Carets are visible on items with subitems when sidebar is expanded.
   Uses CSS specificity instead of !important for maintainability.
   ============================================================================= */

/* Base: Carets visible when sidebar is NOT collapsed */
/* Using high specificity with ID selector to override Tailwind utility classes */
/* Order matters: more specific rules come after less specific ones */
aside#sidebar:not(.sidebar-collapsed) ul li button .dropdown-chevron,
aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button.nav-dropdown-btn
    .dropdown-chevron,
aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[data-collapse-toggle]
    .dropdown-chevron,
aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[aria-controls]
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed) ul li button .dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button.nav-dropdown-btn
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[data-collapse-toggle]
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed) ul li button[aria-controls] .dropdown-chevron {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 0;
    color: color-mix(in srgb, var(--fg-5) 70%, transparent);
    transition: transform 0.2s ease;
    pointer-events: none;
}

/* Hide carets when sidebar is collapsed */
/* Higher specificity than base rule - comes after base rule */
aside#sidebar.sidebar-collapsed ul li button .dropdown-chevron,
aside#sidebar.sidebar-collapsed ul li button.nav-dropdown-btn .dropdown-chevron,
aside#sidebar.sidebar-collapsed
    ul
    li
    button[data-collapse-toggle]
    .dropdown-chevron,
aside#sidebar.sidebar-collapsed ul li button[aria-controls] .dropdown-chevron,
#sidebar.sidebar-collapsed ul li button .dropdown-chevron,
#sidebar.sidebar-collapsed ul li button.nav-dropdown-btn .dropdown-chevron,
#sidebar.sidebar-collapsed ul li button[data-collapse-toggle] .dropdown-chevron,
#sidebar.sidebar-collapsed ul li button[aria-controls] .dropdown-chevron {
    display: none;
    visibility: hidden;
    opacity: 0;
}

/* Caret color: white when parent item is active (green gradient) */
aside#sidebar:not(.sidebar-collapsed) ul
    li
    button.bg-gradient-to-r
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button.bg-gradient-to-r
    .dropdown-chevron {
    color: var(--fg-on-dark);
}

/* Caret (>) rotation: collapsed = points right, expanded = points down */
aside#sidebar:not(.sidebar-collapsed) ul
    li
    button[aria-expanded="false"]
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[aria-expanded="false"]
    .dropdown-chevron {
    transform: rotate(0deg);
}

aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[aria-expanded="true"]
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[aria-expanded="true"]
    .dropdown-chevron {
    transform: rotate(90deg);
}

/* =============================================================================
   PARENT ITEM ACTIVE STATE - Green gradient with white text
   =============================================================================
   Parent items (buttons) when active should have green gradient background.
   Sub-items have their own style defined below.
   ============================================================================= */

/* Ensure all navigation items use border-box to prevent layout shift
   when borders are added/removed on hover/active states.
   !important needed to override Flowbite/Tailwind defaults. */
#sidebar ul li button,
#sidebar ul li a {
    box-sizing: border-box !important;
}

/* Parent button active state: green gradient */
#sidebar ul li button.bg-gradient-to-r.nav-dropdown-btn,
#sidebar ul li button.bg-gradient-to-r[data-collapse-toggle],
#sidebar ul li button.bg-gradient-to-r[aria-controls] {
    background: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
    background-image: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
    color: white !important;
    border: none !important;
    /* Ensure icon and text alignment doesn't shift during state changes.
       !important needed to override Flowbite/Tailwind utility classes. */
    display: flex !important;
    align-items: center !important;
}

/* Selected top-level: icons solid white #ffffff */
#sidebar
    ul
    li
    button.bg-gradient-to-r.nav-dropdown-btn
    i:not(.dropdown-chevron),
#sidebar
    ul
    li
    button.bg-gradient-to-r[data-collapse-toggle]
    i:not(.dropdown-chevron),
#sidebar ul li button.bg-gradient-to-r[aria-controls] i:not(.dropdown-chevron),
#sidebar ul li button.bg-gradient-to-r .nav-svg-icon {
    color: var(--fg-on-dark) !important;
}

/* background-color only for SVG mask icons — Font Awesome <i> glyphs use the
   ::before pseudo-element and would be hidden behind a solid background box
   (the "white square on click" bug). */
#sidebar ul li button.bg-gradient-to-r .nav-svg-icon {
    background-color: var(--bg-card) !important;
}

/* Standalone items (not in dropdowns) active state - green gradient */
#sidebar
    ul
    li:not([id$="-dropdown"])
    > a.bg-gradient-to-r:not(.nav-sub-item):not(.pl-11),
#sidebar a.nav-standalone-item.bg-gradient-to-r {
    background: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
    background-image: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
    color: white !important;
    border: none !important;
    /* Ensure icon and text alignment doesn't shift during state changes.
       !important needed to override Flowbite/Tailwind utility classes. */
    display: flex !important;
    align-items: center !important;
}

#sidebar
    ul
    li:not([id$="-dropdown"])
    > a.bg-gradient-to-r:not(.nav-sub-item):not(.pl-11)
    i,
#sidebar a.nav-standalone-item.bg-gradient-to-r i,
#sidebar a.nav-standalone-item.bg-gradient-to-r .nav-svg-icon {
    color: var(--fg-on-dark) !important;
}

/* background-color only for SVG mask icons, not Font Awesome <i> glyphs */
#sidebar a.nav-standalone-item.bg-gradient-to-r .nav-svg-icon {
    background-color: var(--bg-card) !important;
}

/* Standalone items hover when selected - maintain green gradient */
#sidebar a.nav-standalone-item.bg-gradient-to-r:hover {
    background: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
    background-image: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
    color: white !important;
    border: none !important;
    /* Ensure icon and text alignment doesn't shift during state changes.
       !important needed to override Flowbite/Tailwind utility classes. */
    display: flex !important;
    align-items: center !important;
}

/* Selected items maintain green gradient on hover */
#sidebar ul li button.bg-gradient-to-r.nav-dropdown-btn:hover,
#sidebar ul li button.bg-gradient-to-r[data-collapse-toggle]:hover,
#sidebar ul li button.bg-gradient-to-r[aria-controls]:hover {
    background: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
    background-image: linear-gradient(
        135deg,
        var(--color-brand-green) 0%,
        var(--nav-active-gradient-end) 100%
    ) !important;
    color: white !important;
    /* Ensure icon and text alignment doesn't shift during state changes.
       !important needed to override Flowbite/Tailwind utility classes. */
    display: flex !important;
    align-items: center !important;
}

#sidebar
    ul
    li
    button.bg-gradient-to-r.nav-dropdown-btn:hover
    i:not(.dropdown-chevron),
#sidebar
    ul
    li
    button.bg-gradient-to-r[data-collapse-toggle]:hover
    i:not(.dropdown-chevron),
#sidebar
    ul
    li
    button.bg-gradient-to-r[aria-controls]:hover
    i:not(.dropdown-chevron) {
    color: white !important;
}

/* =============================================================================
   SUB-ITEM ACTIVE STATE - Gray background with lighter border
   =============================================================================
   Sub-items when active should have gray background with lighter border,
   and white text (as shown in the reference image).
   ============================================================================= */

/* =============================================================================
   SUB-ITEM SELECTED STATE - Gray background with light border
   =============================================================================
   Sub-items when selected should have gray background with lighter border
   ============================================================================= */

/* Sub-items selected state: background matching hover, white text, outer stroke */
#sidebar ul[id$="-dropdown"] li a.nav-sub-item.bg-gradient-to-r,
#sidebar ul[id$="-dropdown"] li a.pl-11.bg-gradient-to-r,
#sidebar ul[id$="-dropdown"] li a[class*="pl-11"].bg-gradient-to-r,
#sidebar ul[id$="-dropdown"] li a.bg-gradient-to-r {
    background-color: rgba(
        55,
        65,
        81,
        0.6
    ) !important; /* Gray background matching hover */
    background-image: none !important;
    background: color-mix(
        in srgb,
        var(--fg-body-strong) 60%,
        transparent
    ) !important; /* Override any gradient */
    color: var(--fg-on-dark) !important; /* Full opacity white */
    border: 1px solid color-mix(in srgb, var(--border-base) 80%, transparent) !important; /* Outer stroke for selection */
    border-left: 2px solid
        color-mix(in srgb, var(--border-base) 90%, transparent) !important; /* Left accent stroke */
    font-weight: 500 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/* Sub-item icon color when selected - solid white #ffffff */
#sidebar ul[id$="-dropdown"] li a.nav-sub-item.bg-gradient-to-r i,
#sidebar ul[id$="-dropdown"] li a.pl-11.bg-gradient-to-r i,
#sidebar ul[id$="-dropdown"] li a[class*="pl-11"].bg-gradient-to-r i,
#sidebar ul[id$="-dropdown"] li a.bg-gradient-to-r i,
#sidebar ul[id$="-dropdown"] li a.bg-gradient-to-r .nav-svg-icon {
    color: var(--fg-on-dark) !important;
}

/* background-color only for SVG mask icons, not Font Awesome <i> glyphs */
#sidebar ul[id$="-dropdown"] li a.bg-gradient-to-r .nav-svg-icon {
    background-color: var(--bg-card) !important;
}

/* Sub-items hover when selected: maintain gray with border, slightly darker */
#sidebar ul[id$="-dropdown"] li a.nav-sub-item.bg-gradient-to-r:hover,
#sidebar ul[id$="-dropdown"] li a.pl-11.bg-gradient-to-r:hover,
#sidebar ul[id$="-dropdown"] li a[class*="pl-11"].bg-gradient-to-r:hover,
#sidebar ul[id$="-dropdown"] li a.bg-gradient-to-r:hover {
    background-color: color-mix(
        in srgb,
        var(--fg-body-strong) 60%,
        transparent
    ) !important;
    background-image: none !important;
    background: color-mix(
        in srgb,
        var(--fg-body-strong) 60%,
        transparent
    ) !important;
    color: white !important;
    border: 1px solid color-mix(in srgb, var(--border-base) 60%, transparent) !important; /* Maintain border on hover */
    /* Ensure icon and text alignment doesn't shift */
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/* Dropdown button expanded but not active - no special styling, keep typography (white) */
#sidebar button.nav-dropdown-btn[aria-expanded="true"]:not(.bg-gradient-to-r) {
    background-color: transparent !important;
    border: none !important;
    color: var(--fg-on-dark) !important;
}

/* Dropdown button expanded but not active - hover: gray bg, keep white text */
#sidebar
    button.nav-dropdown-btn[aria-expanded="true"]:not(.bg-gradient-to-r):hover {
    background-color: color-mix(
        in srgb,
        var(--fg-5) 10%,
        transparent
    ) !important;
    border: none !important;
    color: var(--fg-on-dark) !important;
}

/* =============================================================================
   HOVER STATES - Gray background without border
   =============================================================================
   Normal hover on any item/subitem: gray background without border
   ============================================================================= */

/* Parent button hover (not selected, not expanded) - keep white text */
#sidebar
    button.nav-dropdown-btn:not(.bg-gradient-to-r):hover:not(
        [aria-expanded="true"]
    ) {
    background-color: color-mix(
        in srgb,
        var(--fg-5) 10%,
        transparent
    ) !important;
    background-image: none !important;
    color: var(--fg-on-dark) !important;
    border: none !important;
    /* Ensure icon and text alignment doesn't shift during state changes.
       !important needed to override Flowbite/Tailwind utility classes. */
    display: flex !important;
    align-items: center !important;
}

/* Standalone item hover (not selected) - keep white text */
#sidebar a.nav-standalone-item:not(.bg-gradient-to-r):hover {
    background-color: color-mix(
        in srgb,
        var(--fg-5) 10%,
        transparent
    ) !important;
    background-image: none !important;
    color: var(--fg-on-dark) !important;
    border: none !important;
    /* Ensure icon and text alignment doesn't shift during state changes.
       !important needed to override Flowbite/Tailwind utility classes. */
    display: flex !important;
    align-items: center !important;
}

/* Sub-item hover (not selected) - dark gray background, lighter than sidebar */
#sidebar ul[id$="-dropdown"] li a.nav-sub-item:hover:not(.bg-gradient-to-r),
#sidebar ul[id$="-dropdown"] li a.pl-11:hover:not(.bg-gradient-to-r),
#sidebar ul[id$="-dropdown"] li a[class*="pl-11"]:hover:not(.bg-gradient-to-r) {
    background-color: color-mix(
        in srgb,
        var(--fg-body-strong) 50%,
        transparent
    ) !important;
    background-image: none !important;
    background: color-mix(
        in srgb,
        var(--fg-body-strong) 50%,
        transparent
    ) !important;
    color: var(--border-medium) !important;
    border: none !important;
    /* Ensure icon and text alignment doesn't shift during state changes.
       !important needed to override Flowbite/Tailwind utility classes. */
    display: flex !important;
    align-items: center !important;
}

/* Collapsed sidebar menu adjustments */
#sidebar.sidebar-collapsed ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#sidebar.sidebar-collapsed ul li a i {
    margin-right: 0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
}

#sidebar.sidebar-collapsed ul li a span {
    display: none;
}

.copyright {
    margin-top: 10px;
    padding: 8px 0; /* Restore original padding */
    border-top: 1px solid color-mix(in srgb, var(--fg-on-dark) 10%, transparent);
    text-align: center;
    color: var(
        --fg-on-dark
    ); /* Restore white color for better contrast (WCAG AA) */
    font-size: 0.75em; /* Restore original font size */
}

/* User profile section */
.user-profile-wrapper {
    margin-bottom: 16px;
}

.user-profile-link {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--fg-on-dark) 10%, transparent);
    transition: all 0.3s;
    text-decoration: none;
}

.user-profile-link:hover {
    background: color-mix(in srgb, var(--fg-on-dark) 5%, transparent);
    border-color: color-mix(in srgb, var(--fg-on-dark) 20%, transparent);
}

.user-avatar-container {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular avatar - matches design system */
    overflow: hidden;
    margin-right: 12px;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        var(--patitur-green-primary) 0%,
        var(--patitur-green-secondary, var(--nav-active-gradient-end)) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar-initials {
    color: white;
    font-weight: 600;
    font-size: var(--fs-base);
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-info > div:first-child {
    color: white;
    font-weight: 500;
    font-size: var(--fs-base);
    margin-bottom: 2px;
}

.user-info > div:last-child {
    color: color-mix(in srgb, var(--fg-on-dark) 60%, transparent);
    font-size: var(--fs-sm);
}

.user-chevron {
    color: color-mix(in srgb, var(--fg-on-dark) 60%, transparent);
    font-size: var(--fs-sm);
    margin-left: auto;
}

#sidebar.sidebar-collapsed .user-chevron {
    display: none;
}

/* Active user profile state - matches active navigation item styling */
.sidebar-user-profile.active .user-profile-link {
    background: linear-gradient(
        135deg,
        var(--patitur-green-primary) 0%,
        var(--patitur-green-secondary, var(--nav-active-gradient-end)) 100%
    ) !important;
    border-color: var(--patitur-green-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3) !important;
}

/* CRITICAL: Ensure icons are ALWAYS visible when sidebar is collapsed - Override Tailwind classes */
#sidebar.sidebar-collapsed
    aside#sidebar
    ul
    li
    button
    i.fas:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    aside#sidebar
    ul
    li
    button
    i.far:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    aside#sidebar
    ul
    li
    button
    i.fal:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    aside#sidebar
    ul
    li
    button
    i.fab:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i.w-5:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i.h-5:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i.w-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li a i.h-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i.w-5:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i.h-5:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i.w-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed ul li button i.h-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i.fas:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i.far:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i.fal:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i.fab:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i.w-4:not(.dropdown-chevron),
#sidebar.sidebar-collapsed
    > div
    > div:last-child
    ul
    li
    a
    i.h-4:not(.dropdown-chevron) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: color-mix(in srgb, var(--fg-on-dark) 80%, transparent) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

#sidebar.sidebar-collapsed ul li a i.w-5::before,
#sidebar.sidebar-collapsed ul li a i.h-5::before,
#sidebar.sidebar-collapsed ul li a i.w-4::before,
#sidebar.sidebar-collapsed ul li a i.h-4::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    text-align: center !important;
    font-family:
        "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free",
        "Font Awesome 5 Pro", sans-serif !important;
    font-weight: 900 !important;
}

/* FINAL OVERRIDE: Ensure ALL icons in collapsed sidebar are visible - handles both <i> and <svg> */
/* EXCEPT dropdown-chevron which should be hidden when sidebar is collapsed */
#sidebar.sidebar-collapsed i[class*="fa"]:not(.dropdown-chevron),
#sidebar.sidebar-collapsed svg[class*="fa"]:not(.dropdown-chevron),
#sidebar.sidebar-collapsed [class*="fa-"]:not(.dropdown-chevron) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: color-mix(in srgb, var(--fg-on-dark) 80%, transparent) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

#sidebar.sidebar-collapsed i[class*="fa"]:not(.dropdown-chevron)::before,
#sidebar.sidebar-collapsed [class*="fa-"]:not(.dropdown-chevron)::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-family:
        "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free",
        "Font Awesome 5 Pro", sans-serif !important;
    font-weight: 900 !important;
}

#sidebar.sidebar-collapsed svg[class*="fa"] {
    fill: currentColor !important;
    stroke: none !important;
}

/* SVG mask icons in collapsed sidebar - ensure proper sizing and visibility */
#sidebar.sidebar-collapsed .nav-svg-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    background-color: color-mix(
        in srgb,
        var(--fg-on-dark) 80%,
        transparent
    ) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Active state SVG icons in collapsed sidebar - white */
#sidebar.sidebar-collapsed ul li a.bg-gradient-to-r .nav-svg-icon,
#sidebar.sidebar-collapsed ul li button.bg-gradient-to-r .nav-svg-icon {
    background-color: white !important;
}

/* -----------------------------------------------------------------------------
   Dropdown Menu Items - Prevent Text Overflow
   ----------------------------------------------------------------------------- */

/* Ensure dropdown menu items don't wrap text under icons */
#sidebar ul[id$="-dropdown"] li a {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Ensure icons in dropdown items don't shrink and have proper spacing */
#sidebar ul[id$="-dropdown"] li a i {
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 16px;
    width: 16px;
    height: 16px;
    margin-right: 12px;
}

/* Ensure text spans in dropdown items don't wrap and maintain spacing */
#sidebar ul[id$="-dropdown"] li a span {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-left: 0 !important;
}

/* Prevent text from going under icon on hover */
#sidebar ul[id$="-dropdown"] li a:hover span {
    white-space: nowrap !important;
    overflow: visible !important;
}

/* =============================================================================
   FINAL CARET RULES - Maximum specificity, loaded last to override everything
   =============================================================================
   These rules come at the end of the file to ensure they override all other rules
   ============================================================================= */

/* Ensure carets are visible when sidebar is expanded - FINAL OVERRIDE */
/* These rules must come AFTER all other rules to ensure they override */
aside#sidebar:not(.sidebar-collapsed) ul li button .dropdown-chevron,
aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button.nav-dropdown-btn
    .dropdown-chevron,
aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[data-collapse-toggle]
    .dropdown-chevron,
aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[aria-controls]
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed) ul li button .dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button.nav-dropdown-btn
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[data-collapse-toggle]
    .dropdown-chevron,
#sidebar:not(.sidebar-collapsed) ul li button[aria-controls] .dropdown-chevron {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    max-width: 1rem;
    max-height: 1rem;
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: auto;
    margin-right: 0;
    color: color-mix(in srgb, var(--fg-5) 70%, transparent);
    transition: transform 0.2s ease;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* Hide carets when sidebar is collapsed - FINAL OVERRIDE */
aside#sidebar.sidebar-collapsed ul li button .dropdown-chevron,
aside#sidebar.sidebar-collapsed ul li button.nav-dropdown-btn .dropdown-chevron,
aside#sidebar.sidebar-collapsed
    ul
    li
    button[data-collapse-toggle]
    .dropdown-chevron,
aside#sidebar.sidebar-collapsed ul li button[aria-controls] .dropdown-chevron,
#sidebar.sidebar-collapsed ul li button .dropdown-chevron,
#sidebar.sidebar-collapsed ul li button.nav-dropdown-btn .dropdown-chevron,
#sidebar.sidebar-collapsed ul li button[data-collapse-toggle] .dropdown-chevron,
#sidebar.sidebar-collapsed ul li button[aria-controls] .dropdown-chevron {
    display: none;
    visibility: hidden;
    opacity: 0;
}

/* =============================================================================
   ABSOLUTE FINAL OVERRIDE - Ensure carets are ALWAYS visible when expanded
   =============================================================================
   This rule comes at the very end with maximum specificity to override everything
   ============================================================================= */
aside#sidebar:not(.sidebar-collapsed) ul
    li
    button.nav-dropdown-btn
    svg.dropdown-chevron,
aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[data-collapse-toggle]
    svg.dropdown-chevron,
aside#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[aria-controls]
    svg.dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button.nav-dropdown-btn
    svg.dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[data-collapse-toggle]
    svg.dropdown-chevron,
#sidebar:not(.sidebar-collapsed)
    ul
    li
    button[aria-controls]
    svg.dropdown-chevron {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    max-width: 1rem;
    max-height: 1rem;
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: auto;
    margin-right: 0;
    color: color-mix(in srgb, var(--fg-5) 70%, transparent);
    transition: transform 0.2s ease;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* -----------------------------------------------------------------------------
   Viewing Context Dropdown — section background colors
   Reference design-system.css vars (Figma Sidebar.tsx)
   ----------------------------------------------------------------------------- */
.viewing-context-section-setup {
    background-color: var(--color-vc-section-setup-bg);
}

.viewing-context-section-connected {
    background-color: var(--color-vc-section-connected-bg);
}

/* -----------------------------------------------------------------------------
   Tenant Scope Banner — slim chrome strip for org-admin viewing a specific
   tenant. Single line, ~36 px tall, gradient bg using the production
   --color-tenant-banner-gradient-* tokens (defined in design-system.css).
   Mirrors the v0.8.0 mockup at
   memory-bank/tasks/feature-v0.8.0-stage-1/analysis/phase-1/device-detail-tenant.html.

   Gating note: the X exit button visible inside this banner is only ever
   rendered for org admins (the include site checks
   `auth_ctx.can_see_all_tenants`). Tenant admins / tenant users never see
   the X — for them the banner itself never renders.
   ----------------------------------------------------------------------------- */
.tenant-scope-banner {
    background: linear-gradient(
        90deg,
        var(--color-tenant-banner-gradient-start) 0%,
        var(--color-tenant-banner-gradient-end) 100%
    );
    border-bottom: 1px solid var(--color-tenant-banner-border);
    color: var(--fg-on-dark);
    /* Negative margins offset the 20px padding on #content
       (current_user_main.css) so the banner is FLUSH to the top of the
       viewport and to the right edge of the sidebar. The horizontal
       padding inside the banner stays at 1.5rem so the icon + label
       still align under the breadcrumb chrome row below. */
    margin: -20px -20px 0 -20px;
    padding: 0.625rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.3;
}
.tenant-scope-banner-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fg-on-dark) 20%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fg-on-dark);
}
.tenant-scope-banner-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}
.tenant-scope-banner-label {
    color: color-mix(in srgb, var(--fg-on-dark) 85%, transparent);
    font-weight: 500;
}
.tenant-scope-banner-name {
    color: var(--fg-on-dark);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.tenant-scope-banner-status {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: color-mix(in srgb, var(--fg-on-dark) 18%, transparent);
    color: var(--fg-on-dark);
}
.tenant-scope-banner-status-healthy {
    background: color-mix(in srgb, var(--fg-on-dark) 18%, transparent);
}
.tenant-scope-banner-status-warning {
    background: rgba(255, 200, 100, 0.25);
    color: var(--status-warning-bg);
}
.tenant-scope-banner-status-critical {
    background: rgba(255, 100, 100, 0.3);
    color: var(--status-danger-bg);
}
.tenant-scope-banner-status-neutral {
    background: color-mix(in srgb, var(--fg-on-dark) 15%, transparent);
}
.tenant-scope-banner-exit {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 9999px;
    color: var(--fg-on-dark);
    background: color-mix(in srgb, var(--fg-on-dark) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--fg-on-dark) 25%, transparent);
    cursor: pointer;
    transition:
        background-color 0.12s,
        transform 0.12s;
    flex-shrink: 0;
    text-decoration: none;
}
.tenant-scope-banner-exit:hover {
    background: color-mix(in srgb, var(--fg-on-dark) 30%, transparent);
    transform: scale(1.05);
}
.tenant-scope-banner-exit svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Pushes the disclosure chevron to the end of the nav row. */
.dropdown-chevron--end {
    margin-left: auto;
}

/* -----------------------------------------------------------------------------
   Viewing Context Dropdown — chrome
   The trigger and its panel sit ON the dark rail, so they cannot take the
   light-ground control colours. Each carried a raw Tailwind slate step inline
   (gray-700 on the trigger, gray-800 + gray-600 on the panel, gray-600 again on
   both section dividers) — four restatements of the rail's own palette, none of
   which moved when the rail's tokens did.
   ----------------------------------------------------------------------------- */
.viewing-context-trigger {
    background-color: var(--bg-sidebar-hover);
}

.viewing-context-panel {
    background-color: var(--bg-sidebar);
    border: 1px solid color-mix(in srgb, var(--fg-on-dark) 20%, transparent);
}

/* The rule between one tenant group and the next. Same weight as the copyright
   rule above it, so the rail reads as one surface. */
.viewing-context-divider {
    border-top: 1px solid color-mix(in srgb, var(--fg-on-dark) 20%, transparent);
}

/* -----------------------------------------------------------------------------
   Sidebar shell
   The rail is pinned full-height by two elements, and both restated it inline —
   the outer one alongside Tailwind's own h-screen, which already says it.
   ----------------------------------------------------------------------------- */
.sidebar-shell {
    min-height: 100vh;
    height: 100vh;
}

/* The rail's own ground. Named separately from the shell because the pinned
   footer needs the colour without the full-height rule. */
.sidebar-ground {
    background-color: var(--bg-sidebar);
}

/* The scrolling body inside the rail. */
.sidebar-shell-inner {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-sidebar);
}

/* Hairlines on the rail. Both the footer's top rule and the profile link's
   outline were raw Tailwind slate steps, one shade apart for no reason. */
.sidebar-rule {
    border-top: 1px solid color-mix(in srgb, var(--fg-on-dark) 20%, transparent);
}

.sidebar-outline {
    border: 1px solid color-mix(in srgb, var(--fg-on-dark) 20%, transparent);
}