/* ========================================
   PROFESSIONAL TOP NAVIGATION BAR
   ======================================== */

:root {
    --topbar-height: 60px;
    --navbar-bg: #212529;
    --navbar-text: #ffffff;
    --navbar-hover: #495057;
    --accent-color: #4ecdc4;
    --navbar-border: none;
}

[data-theme="dark"] {
    --navbar-bg: #1a1f2e;
    --navbar-text: #e0e0e0;
    --navbar-hover: #2a3142;
    --accent-color: #4ecdc4;
    --navbar-border: 2px solid rgba(78, 205, 196, 0.3);
}

[data-theme="light"] {
    --navbar-bg: #ffffff;
    --navbar-text: #555555;
    --navbar-hover: #ecf0f1;
    --accent-color: #0052cc;
    --navbar-border: 2px solid rgba(0, 82, 204, 0.2);
}

/* ========================================
   NAVBAR STYLES
   ======================================== */

.navbar {
    background-color: var(--navbar-bg) !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: var(--navbar-border);
}

.navbar-dark .navbar-brand {
    color: var(--navbar-text) !important;
    font-weight: 700;
    font-size: clamp(1rem, 5vw, 1.25rem);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-dark .navbar-brand:hover {
    color: var(--accent-color) !important;
}

/* Light mode navbar adjustments */
[data-theme="light"] .navbar-dark {
    background-color: #ffffff !important;
}

[data-theme="light"] .navbar-dark .navbar-brand {
    color: #0052cc !important;
}

[data-theme="light"] .navbar-dark .navbar-brand:hover {
    color: #003d99 !important;
}

/* ========================================
   SIDEBAR TOGGLE BUTTON
   ======================================== */

.sidebar-toggle {
    border: none;
    background: transparent;
    color: var(--navbar-text);
    font-size: 1.5rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-right: 1rem;
}

.sidebar-toggle:hover {
    color: var(--accent-color);
}

.sidebar-toggle:focus {
    box-shadow: none;
    color: var(--accent-color);
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Light mode sidebar toggle */
[data-theme="light"] .sidebar-toggle {
    color: #0052cc;
}

[data-theme="light"] .sidebar-toggle:hover {
    color: #003d99;
}

/* ========================================
   HAND MENU TOGGLE (Settings)
   ======================================== */

.hand-menu-toggle {
    border: 2px solid var(--navbar-text) !important;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    transition: all 0.3s ease;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hand-menu-toggle:hover,
.hand-menu-toggle:focus,
.hand-menu-toggle[aria-expanded="true"] {
    background-color: var(--navbar-hover);
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.15);
}

.hand-menu-toggle:focus {
    outline: none;
}

.hand-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--navbar-text);
    transition: color 0.3s ease;
}

.hand-menu-toggle:hover .hand-menu-icon {
    color: var(--accent-color);
}

/* Light mode hand-menu-toggle */
[data-theme="light"] .hand-menu-toggle {
    border-color: #0052cc !important;
    color: #0052cc;
}

[data-theme="light"] .hand-menu-toggle:hover,
[data-theme="light"] .hand-menu-toggle:focus,
[data-theme="light"] .hand-menu-toggle[aria-expanded="true"] {
    background-color: #e8f0fb;
    border-color: #0052cc !important;
}

[data-theme="light"] .hand-menu-icon {
    color: #0052cc;
}

[data-theme="light"] .hand-menu-toggle:hover .hand-menu-icon {
    color: #003d99;
}

/* ========================================
   NAVIGATION MENU
   ======================================== */

.hand-nav-menu {
    transition: all 0.3s ease;
    background-color: transparent;
}

.navbar-expand-lg .hand-nav-menu {
    padding-top: 0.5rem;
}

.hand-nav-menu .nav-link {
    color: var(--navbar-text) !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hand-nav-menu .nav-link:hover {
    color: var(--accent-color) !important;
    background-color: var(--navbar-hover);
    border-left-color: var(--accent-color);
    transform: translateX(5px);
}

.hand-nav-menu .nav-link i {
    font-size: 1.1rem;
    min-width: 20px;
}

/* Light mode nav-link styles - MUST BE AFTER default styles */
[data-theme="light"] .navbar .hand-nav-menu .nav-link {
    color: #B8B8B8 !important;
}

[data-theme="light"] .navbar .hand-nav-menu .nav-link:hover {
    color: var(--accent-color) !important;
    background-color: #e8f0fb !important;
    border-left-color: var(--accent-color) !important;
}

[data-theme="light"] .navbar .hand-nav-menu .nav-link i {
    color: #B8B8B8 !important;
}

[data-theme="light"] .navbar .hand-nav-menu .nav-link:hover i {
    color: var(--accent-color) !important;
}

/* Mobile Menu Items */
.navbar-expand-lg .navbar-nav .nav-item {
    margin-bottom: 0;
}

.navbar-expand-lg .navbar-nav .nav-item.d-lg-none {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* ========================================
   LOGOUT BUTTONS
   ======================================== */

.btn-logout-mobile {
    background: none;
    border: none;
    color: var(--navbar-text) !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.btn-logout-mobile:hover,
.btn-logout-mobile:focus {
    color: #e74c3c !important;
    background-color: var(--navbar-hover);
    border-left-color: #e74c3c;
    transform: translateX(5px);
}

.btn-logout-mobile i {
    font-size: 1.1rem;
    min-width: 20px;
}

/* Light mode logout button styles */
[data-theme="light"] .btn-logout-mobile {
    color: #d32f2f !important;
}

[data-theme="light"] .btn-logout-mobile:hover,
[data-theme="light"] .btn-logout-mobile:focus {
    color: #b71c1c !important;
    background-color: #ffebee;
    border-left-color: #d32f2f;
}

.btn-logout-dropdown {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem !important;
    color: var(--navbar-text) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.btn-logout-dropdown:hover {
    color: #e74c3c !important;
    background-color: var(--navbar-hover);
}

/* ========================================
   DESKTOP STYLES
   ======================================== */

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        background-color: var(--navbar-bg);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    [data-theme="light"] .navbar-expand-lg .navbar-nav .dropdown-menu {
        background-color: #ffffff;
        border-color: #e2e8f0;
    }

    .navbar-dark .dropdown-menu .dropdown-item {
        color: var(--navbar-text);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    [data-theme="light"] .navbar-dark .dropdown-menu .dropdown-item {
        color: #2c3e50;
    }

    .navbar-dark .dropdown-menu .dropdown-item:hover {
        background-color: var(--navbar-hover);
        color: var(--accent-color);
    }

    .navbar-dark .dropdown-menu .dropdown-item i {
        min-width: 20px;
        text-align: center;
    }

    .navbar-nav .ms-2 {
        margin-left: 0.5rem !important;
    }

    .user-menu-link {
        padding: 0.5rem 1rem !important;
    }
}

/* ========================================
   MOBILE STYLES
   ======================================== */

@media (max-width: 991.98px) {
    .hand-nav-menu {
        margin-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 0.5rem;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        display: none;  /* Hidden by default */
    }

    /* Show menu when expanded */
    .hand-nav-menu.show {
        display: block !important;
    }

    [data-theme="light"] .hand-nav-menu {
        border-top-color: #e2e8f0;
    }

    .hand-nav-menu .nav-item {
        padding: 0.25rem 0;
    }

    .navbar-expand-lg .navbar-nav .d-none.d-lg-block {
        display: none !important;
    }

    .navbar-expand-lg .navbar-nav .d-lg-none {
        display: block !important;
    }

    .navbar-brand span {
        display: none;
    }

    /* Ensure menu toggle is visible and clickable */
    .hand-menu-toggle {
        order: 3;  /* Push to right */
        margin-left: auto;
        z-index: 1100;
    }

    /* Fix for navbar toggler alignment */
    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.sidebar-toggle:focus,
.hand-menu-toggle:focus,
.hand-nav-menu .nav-link:focus,
.btn-logout-mobile:focus,
.btn-logout-dropdown:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .hand-menu-toggle,
    .hand-nav-menu .nav-link,
    .sidebar-toggle {
        transition: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .navbar {
        position: static !important;
    }
}