/* Soft Gradient Backgrounds + Text Colors for Navbar, Sidebars, and Footer */
/* ====================================================================================================================================================== */

/* HEADER */
header {
    background: linear-gradient(135deg, #4f9cff, #809d85, #89d0ff);
    color: #614e01;
}

    header a,
    header i,
    header span {
        color: #3700b6;
    }

        header a:hover {
            color: #244800;
            font-weight: bold;
        }


/* LEFT SIDEBAR */
#leftSidebar {
    background: linear-gradient(180deg, #6d809e, black, #56327d);
    color: #7cff96;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-right: 1px solid rgb(0, 255, 195);
    overflow: hidden;
}

    #leftSidebar a,
    #leftSidebar i,
    #leftSidebar span {
        color: rgb(217, 229, 255);
        /* All dropdown-content a for left sidebar color */
        transition: background 0.2s ease, color 0.2s ease;
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

        /* Apply hover styling to any item inside #leftSidebar */
        #leftSidebar a:hover,
        #leftSidebar i:hover,
        #leftSidebar span:hover {
            background: rgb(19, 19, 20);
            font-weight: bold;
        }


/* RIGHT SIDEBAR */
#rightSidebar {
    background: linear-gradient(180deg, #4f3355, #121a11, #466559);
    color: #c3dee0;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-left: 1px solid rgb(60, 1, 255);
    overflow: hidden;
}

    #rightSidebar a,
    #rightSidebar i,
    #rightSidebar span {
        color: white;
        /* All dropdown-content a for right sidebar color */
        transition: background 0.2s ease, color 0.2s ease;
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

        /* Apply hover styling to any item inside #rightSidebar */
        #rightSidebar a:hover,
        #rightSidebar i:hover,
        #rightSidebar span:hover {
            background: rgb(43, 48, 67);
            font-weight: bold;
        }



/* FOOTER */
footer {
    background: linear-gradient(135deg, #c4ddff, #ebd6ff, #faffc3);
    color: black;
    padding: 1rem;
    text-align: center;
}

    footer a {
        color: #302020;
    }

        footer a:hover {
            color: #1c2831;
        }

/* ====================================================================================================================================================== */






/* ====================================================================================================================================================== */

/* Prevent text selection/copying in sidebars */
#leftSidebar,
#rightSidebar,
#leftSidebar *,
#rightSidebar * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    /* But allow selection on input/textarea elements within sidebars */
    #leftSidebar input,
    #leftSidebar textarea,
    #rightSidebar input,
    #rightSidebar textarea {
        user-select: auto;
        -webkit-user-select: auto;
        -moz-user-select: auto;
    }

/* ====================================================================================================================================================== */






/* ====================================================================================================================================================== */

/* Main Layout Css Start  */

/* Navbar */
header {
    z-index: 99999;
}

/* Sidebars */
#leftSidebar,
#rightSidebar {
    z-index: 9999;
    top: 4rem;
    height: calc(100vh - 4rem);
    position: fixed;
    transition: width 0.3s;
}

/* Sidebar content scroll */
#leftSidebarContent,
#rightSidebarContent {
    height: 100%;
    overflow-y: auto;
    flex-direction: column;
}

/* Hide scrollbar when sidebar is fully closed */
#leftSidebar[data-state="closed"] #leftSidebarContent,
#rightSidebar[data-state="closed"] #rightSidebarContent {
    overflow: hidden;
}

/* Collapsed state: only icons, hide text */
#leftSidebar[data-state="collapsed"] a span,
#rightSidebar[data-state="collapsed"] a span {
    display: none;
}

/* Tooltip for collapsed icons */
#leftSidebar[data-state="collapsed"] a[title]:hover::after,
#rightSidebar[data-state="collapsed"] a[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    margin-left: 0.5rem;
    background: #1f2937;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    font-size: 0.75rem;
    z-index: 99999;
}

.sidebar-dropdown.open .dropdown-content {
    display: flex;
    border-radius: 0.25rem;
    background: linear-gradient(135deg, #ceffca, #ffdf29);
}

/* Force dropdown text to black for BOTH sidebars #rightSidebar span , #leftSidebar span */
#rightSidebar .sidebar-dropdown .dropdown-content a,
#rightSidebar .sidebar-dropdown .dropdown-content a span,
#rightSidebar .sidebar-dropdown .dropdown-content span,
#rightSidebar .sidebar-dropdown .dropdown-content i {
    color: black;
    font-size: 0.875rem;
}

    /* Right Sidebar: Hover */
    #rightSidebar .sidebar-dropdown .dropdown-content a:hover,
    #rightSidebar .sidebar-dropdown .dropdown-content a:hover span,
    #rightSidebar .sidebar-dropdown .dropdown-content a:hover i {
        background: #6200ff;
        color: #f3ffc0;
    }

#leftSidebar .sidebar-dropdown .dropdown-content a,
#leftSidebar .sidebar-dropdown .dropdown-content a span,
#leftSidebar .sidebar-dropdown .dropdown-content span,
#leftSidebar .sidebar-dropdown .dropdown-content i {
    color: rgb(35, 0, 88);
    font-size: 0.875rem;
}

    /* Left Sidebar: Hover */
    #leftSidebar .sidebar-dropdown .dropdown-content a:hover,
    #leftSidebar .sidebar-dropdown .dropdown-content a:hover span,
    #leftSidebar .sidebar-dropdown .dropdown-content a:hover i {
        background: #008714;
        color: #ffbf00;
    }

/* Chevron rotation */
.sidebar-dropdown.open > a i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Page content */
#mainWrapper {
    overflow-y: auto;
    max-height: calc(100vh - 4rem);
}

/* Footer */
footer {
    z-index: 9999;
    position: relative;
}

/* General tweaks for smooth collapse */
#leftSidebar a,
#rightSidebar a {
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Fully hide content in closed state */
#leftSidebar[data-state="closed"],
#rightSidebar[data-state="closed"] {
    width: 0;
    pointer-events: none;
    /* disable interaction */
    overflow: hidden;
}

    #leftSidebar[data-state="closed"] a,
    #rightSidebar[data-state="closed"] a {
        display: none;
        /* hide links */
    }

    /* Ensure dropdown content is hidden in collapsed/closed states */
    #leftSidebar[data-state="collapsed"] .dropdown-content,
    #leftSidebar[data-state="closed"] .dropdown-content,
    #rightSidebar[data-state="collapsed"] .dropdown-content,
    #rightSidebar[data-state="closed"] .dropdown-content {
        display: none;
    }

/* Hide chevron in collapsed sidebar */
#leftSidebar[data-state="collapsed"] .fa-chevron-down,
#rightSidebar[data-state="collapsed"] .fa-chevron-down {
    display: none;
}

/* Collapsed: icons only */
#leftSidebar[data-state="collapsed"] a span,
#rightSidebar[data-state="collapsed"] a span {
    display: none;
}

/* Tooltips for collapsed icons */
#leftSidebar[data-state="collapsed"] a[title]:hover::after,
#rightSidebar[data-state="collapsed"] a[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    margin-left: 0.5rem;
    background: #1f2937;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    font-size: 0.75rem;
    z-index: 99999;
}

/* Smooth width transition */
#leftSidebar,
#rightSidebar {
    transition: width 0.3s, pointer-events 0.3s;
}

/* Main Layout Css End  */
/* ====================================================================================================================================================== */






/* ====================================================================================================================================================== */

/* Modern Sidebar Enhancements (Safe Additions) */

/* 1. THIN + COLORED SCROLLBAR */
#leftSidebarContent::-webkit-scrollbar,
#rightSidebarContent::-webkit-scrollbar {
    width: 6px;
}

#leftSidebarContent::-webkit-scrollbar-track,
#rightSidebarContent::-webkit-scrollbar-track {
    background: transparent;
}

#leftSidebarContent::-webkit-scrollbar-thumb,
#rightSidebarContent::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}

#leftSidebarContent:hover::-webkit-scrollbar-thumb,
#rightSidebarContent:hover::-webkit-scrollbar-thumb {
    background: #00ffd0;
}

/* Firefox scrollbar */
#leftSidebarContent,
#rightSidebarContent {
    scrollbar-width: thin;
    scrollbar-color: #ffa200 transparent;
}


/* ACTIVE DROPDOWN HEADER STYLE */

.sidebar-dropdown.open > a {
    background: rgb(97, 79, 0);
    border-radius: 0.5rem;
}

.sidebar-dropdown > a .fa-chevron-down {
    font-size: 0.2rem;
}

/* Sidebar Text Truncation + Hover Tooltip */
/* Limit sidebar link text to single line with ellipsis */
#leftSidebar .link-text,
#rightSidebar .link-text,
.sidebar-dropdown .dropdown-content a {
    display: inline-block;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* COLLAPSED SIDEBAR: ICON HOVER */

#leftSidebar[data-state="collapsed"] a:hover,
#rightSidebar[data-state="collapsed"] a:hover {
    background: rgb(155, 193, 255);
    color: #8000ff;
}

/* Sidebar title & text shrink in open state */
#leftSidebar[data-state="open"] .sidebar-collapse-text,
#rightSidebar[data-state="open"] .sidebar-collapse-text {
    font-size: 0.6rem;
    transition: font-size 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

/* Hide both title and text completely when sidebar is collapsed */
#leftSidebar[data-state="collapsed"] .sidebar-collapse-title,
#leftSidebar[data-state="collapsed"] .sidebar-collapse-text,
#rightSidebar[data-state="collapsed"] .sidebar-collapse-title,
#rightSidebar[data-state="collapsed"] .sidebar-collapse-text {
    display: none;
    opacity: 0;
}

/* Keep them centered */
#leftSidebar .sidebar-collapse-title,
#rightSidebar .sidebar-collapse-title,
#leftSidebar .sidebar-collapse-text,
#rightSidebar .sidebar-collapse-text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Line separator styling */
.sidebar-separator {
    width: 100%;
    border-top-width: 1px;
    border-color: rgb(132, 152, 111);
}

/* ====================================================================================================================================================== */






/* ====================================================================================================================================================== */

/* GLOBAL FOOTER STYLES — AFFECTS ONLY FOOTER TAG */
/* Footer-link links inside grid sections */
footer .footer-link {
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    footer .footer-link:hover {
        opacity: 1;
        transform: translateX(6px);
    }

footer a.group {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

    footer a.group:hover {
        transform: scale(1.07);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3);
    }

footer .footer-logo-enhanced {
    transition: transform 0.4s ease, filter 0.4s ease;
}

    footer .footer-logo-enhanced:hover {
        transform: scale(1.08) rotate(2deg);
        filter: drop-shadow(0 0 18px rgba(52, 6, 255, 0.735));
    }

/* ====================================================================================================================================================== */