/* Sidebar Navigation Styles */

/* Base font size - 1rem = 10px (62.5% of 16px) */
html {
    font-size: 62.5%;
}

/* ============================================
   CONSISTENT MENU ITEM STYLES
   ============================================ */

/* Base transition for all menu items */
.sidebar-nav-item,
.sidebar-link,
.menu-item,
.child-nav-item,
.child-link {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-left-color 0.2s ease !important;
}

/* Sleeker menu items with rounded corners and side margins */
.sidebar-nav-item,
.sidebar-link {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    border-radius: 0.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1rem !important;
    border-left: 0.3rem solid transparent !important;
}

/* Hover effect for main menu items */
.sidebar-nav-item:hover,
.sidebar-link:hover,
.menu-item:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-radius: 0.5rem !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
}

/* Active state for main menu items */
.sidebar-nav-item.active,
.sidebar-link.active,
.menu-item.active {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-radius: 0.5rem !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
}

/* Sleeker child/submenu items */
.child-nav-item {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    border-radius: 0.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1rem !important;
    border-left: 0.3rem solid transparent !important;
}

/* Hover effect for child/submenu items */
.child-link:hover > .child-nav-item,
.nested-submenu .child-link:hover > .child-nav-item {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-radius: 0.5rem !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
}

/* Active state for child/submenu items */
.child-link.active .child-nav-item,
.child-link.active > .child-nav-item {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-radius: 0.5rem !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
    font-weight: 500;
}

/* ============================================
   SUBMENU TRIGGER STYLES (IT Glue, Microsoft, Firewall Status)
   ============================================ */

/* Base styles for submenu triggers */
.submenu-trigger-item {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-left-color 0.2s ease !important;
    border-radius: 0.5rem !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1rem !important;
    border-left: 0.3rem solid transparent !important;
}

/* Hover effect for submenu triggers (IT Glue, Microsoft, Firewall Status) */
.submenu-trigger-item:hover,
.child-nav-item.submenu-trigger-item:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
    border-radius: 0.5rem !important;
}

/* Prevent the parent .child-link.submenu-trigger from getting hover styles */
.child-link.submenu-trigger:hover > .child-nav-item:not(.submenu-trigger-item) {
    background-color: transparent !important;
    color: inherit !important;
    border-left-color: transparent !important;
}

/* Collapsed state for submenu triggers (Microsoft, BCDR, Firewall Status, IT Glue) */
.sidebar.collapsed .submenu-trigger-item,
.sidebar.collapsed .child-nav-item.submenu-trigger-item {
    justify-content: center !important;
    padding: 1.2rem !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

/* Hide chevron and text in submenu triggers when collapsed */
.sidebar.collapsed .submenu-trigger-item .nav-chevron,
.sidebar.collapsed .submenu-trigger-item > span {
    display: none !important;
}

/* ============================================
   ACTIVE CLIENT SECTION - VERTICAL ALIGNMENT
   ============================================ */

.active-client-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.active-client-display {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    padding-left: 1.3rem !important;
    padding-right: 1rem !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
    border-radius: 0.5rem !important;
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* ============================================
   CLIENT ROSTER SECTION - VERTICAL ALIGNMENT
   ============================================ */

.client-roster-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Client roster toggle button alignment */
#client-roster-toggle {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Client roster list items alignment - indented for nested look */
#client-roster-list .child-link {
    margin-left: 2.5rem !important;
    margin-right: 1rem !important;
    padding-left: 1.3rem !important;
    border-left: 0.3rem solid transparent !important;
    border-radius: 0.5rem !important;
}

#client-roster-list .child-link:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
}

#client-roster-list .child-link.active {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
}

/* ============================================
   NESTED SUBMENU CHILDREN - INDENTED FOR HIERARCHY
   ============================================ */

/* All nested submenu children should be indented to show hierarchy */
.nested-submenu .child-link,
.nested-submenu .child-nav-item {
    margin-left: 1.5rem !important;
    margin-right: 1rem !important;
}

/* Nested submenus inside nested submenus (e.g., IT Glue > Configurations) */
.nested-submenu .nested-submenu .child-link,
.nested-submenu .nested-submenu .child-nav-item {
    margin-left: 3.5rem !important;
}

/* Microsoft Graph nested children - 1.5rem margin */
#microsoftgraph-children-nested .child-link,
#microsoftgraph-children-nested .child-nav-item {
    margin-left: 1.5rem !important;
}

/* BCDR nested children - 1.5rem margin */
#bcdr-children-nested .child-link,
#bcdr-children-nested .child-nav-item {
    margin-left: 1.5rem !important;
}

/* ============================================
   NESTED SUBMENU ANIMATIONS
   ============================================ */

/* Base styles for nested submenu container */
.nested-submenu {
    overflow: hidden;
    margin-top: 0.5rem;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Collapsed state - hidden with animation */
.nested-submenu.collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease-out,
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.25s ease,
                padding 0.25s ease !important;
}

/* Expanded state - visible with animation */
.nested-submenu.expanded {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: 0.5rem;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease-in 0.05s,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                margin-top 0.25s ease !important;
}

/* Child items inside nested submenu - smooth animation */
.nested-submenu .child-link,
.nested-submenu > a,
.nested-submenu > div.child-link {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                border-left-color 0.2s ease !important;
}

.nested-submenu.expanded .child-link,
.nested-submenu.expanded > a,
.nested-submenu.expanded > div.child-link {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered delays using CSS custom properties for flexibility */
/* For dcc.Link elements (IT Glue, Microsoft, Firewall children) */
.nested-submenu.expanded > a:nth-of-type(1),
.nested-submenu.expanded > div.child-link:nth-of-type(1) {
    transition-delay: 0.04s, 0.04s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(2),
.nested-submenu.expanded > div.child-link:nth-of-type(2) {
    transition-delay: 0.08s, 0.08s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(3),
.nested-submenu.expanded > div.child-link:nth-of-type(3) {
    transition-delay: 0.12s, 0.12s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(4),
.nested-submenu.expanded > div.child-link:nth-of-type(4) {
    transition-delay: 0.16s, 0.16s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(5),
.nested-submenu.expanded > div.child-link:nth-of-type(5) {
    transition-delay: 0.20s, 0.20s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(6),
.nested-submenu.expanded > div.child-link:nth-of-type(6) {
    transition-delay: 0.24s, 0.24s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(7),
.nested-submenu.expanded > div.child-link:nth-of-type(7) {
    transition-delay: 0.28s, 0.28s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(8),
.nested-submenu.expanded > div.child-link:nth-of-type(8) {
    transition-delay: 0.32s, 0.32s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(9),
.nested-submenu.expanded > div.child-link:nth-of-type(9) {
    transition-delay: 0.36s, 0.36s, 0s, 0s !important;
}

.nested-submenu.expanded > a:nth-of-type(10),
.nested-submenu.expanded > div.child-link:nth-of-type(10) {
    transition-delay: 0.40s, 0.40s, 0s, 0s !important;
}

/* Reset delays when collapsing for faster hide */
.nested-submenu.collapsed .child-link,
.nested-submenu.collapsed > a,
.nested-submenu.collapsed > div.child-link {
    opacity: 0 !important;
    transform: translateX(-10px) !important;
    transition-delay: 0s !important;
}

/* ============================================
   CHEVRON ANIMATION
   ============================================ */

.nav-chevron {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Rotate chevron when submenu is expanded */
.nav-chevron.chevron-up {
    transform: rotate(-180deg);
}

.nav-chevron.chevron-down {
    transform: rotate(0deg);
}

/* ============================================
   CLIENT ROSTER SPECIFIC STYLES
   ============================================ */

.client-roster-section .child-link:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-radius: 0.5rem !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
}

.client-roster-section .child-link.active {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
    border-radius: 0.5rem !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.8) !important;
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */

/* Base text color for dark theme */
[data-theme="dark"] .sidebar-nav-item,
[data-theme="dark"] .sidebar-link,
[data-theme="dark"] .menu-item {
    color: #dee2e6 !important;
}

[data-theme="dark"] .nav-text {
    color: #dee2e6 !important;
}

[data-theme="dark"] .child-nav-item,
[data-theme="dark"] .child-link {
    color: #dee2e6 !important;
}

[data-theme="dark"] .back-text {
    color: #dee2e6 !important;
}

[data-theme="dark"] .sidebar-nav-item:hover,
[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .menu-item:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .sidebar-nav-item.active,
[data-theme="dark"] .sidebar-link.active,
[data-theme="dark"] .menu-item.active {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .child-link:hover > .child-nav-item,
[data-theme="dark"] .nested-submenu .child-link:hover > .child-nav-item {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .child-link.active .child-nav-item,
[data-theme="dark"] .child-link.active > .child-nav-item {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .submenu-trigger-item:hover,
[data-theme="dark"] .child-nav-item.submenu-trigger-item:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .active-client-display {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] #client-roster-list .child-link:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] #client-roster-list .child-link.active {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .client-roster-section .child-link:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

[data-theme="dark"] .client-roster-section .child-link.active {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-left: 0.3rem solid rgba(59, 130, 246, 0.5) !important;
}

/* ============================================
   REDUCED MOTION ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .nested-submenu,
    .nested-submenu.collapsed,
    .nested-submenu.expanded,
    .nested-submenu .child-link,
    .nested-submenu.expanded .child-link,
    .nav-chevron {
        transition: none !important;
        animation: none !important;
    }

    .nested-submenu.collapsed {
        max-height: 0;
        opacity: 0;
        display: none;
    }

    .nested-submenu.expanded {
        max-height: none;
        opacity: 1;
        display: flex;
    }

    .nested-submenu.expanded .child-link {
        opacity: 1;
        transform: none;
        transition-delay: 0s !important;
    }
}

/* ============================================
   FORTIGATE TABS STYLES
   ============================================ */

/* Page container */
.fortigate-page-container {
    width: 100%;
}

/* Page header */
.fortigate-page-header {
    margin-bottom: 2.5rem;
}

/* Tabs wrapper */
.fortigate-tabs-wrapper {
    width: 100%;
}

/* Hidden state for non-Client 4 */
.fortigate-tabs-wrapper.fortigate-tabs-hidden .fortigate-tabs-list {
    display: none;
}

/* Tab container */
.fortigate-tabs {
    width: 100%;
}

/* Tab list styling */
.fortigate-tabs-list {
    display: flex;
    gap: 0.8rem;
    border-bottom: 3px solid rgba(59, 130, 246, 0.2);
    padding-bottom: 0;
    margin-bottom: 2.5rem;
}

/* Individual tab styling - increased size */
.fortigate-tabs .mantine-Tabs-tab {
    font-size: 1.6rem;
    font-weight: 500;
    padding: 1.4rem 2.4rem;
    border: none;
    border-radius: 0.6rem 0.6rem 0 0;
    background-color: transparent;
    color: var(--color-dark-grey);
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

/* Tab hover effect */
.fortigate-tabs .mantine-Tabs-tab:hover {
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

/* Active tab styling */
.fortigate-tabs .mantine-Tabs-tab[data-active="true"] {
    background-color: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    font-weight: 600;
}

/* Active tab bottom border indicator */
.fortigate-tabs .mantine-Tabs-tab[data-active="true"]::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #2563eb;
    border-radius: 2px 2px 0 0;
}

/* Tab panel styling */
.fortigate-tab-panel {
    padding-top: 1.5rem;
}

/* Dark theme adjustments for tabs */
[data-theme="dark"] .fortigate-tabs-list {
    border-bottom-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .fortigate-tabs .mantine-Tabs-tab {
    color: #dee2e6;
}

[data-theme="dark"] .fortigate-tabs .mantine-Tabs-tab:hover {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

[data-theme="dark"] .fortigate-tabs .mantine-Tabs-tab[data-active="true"] {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .fortigate-tabs .mantine-Tabs-tab[data-active="true"]::after {
    background-color: #60a5fa;
}