/*
    === CORPORATE DESIGN SYSTEM ===

    Q: Why is there a border at the top of the sidebar?
    A: There should NOT be a border at the top of the sidebar. The sidebar's border is only on the right side, as defined below.
    If you are seeing a border at the top, check for:
      - Inherited styles from other CSS files
      - Browser default styles
      - The .logo-wrapper previously had a border-bottom, but it is set to 0px here (effectively no border)
*/

/* === CORPORATE DESIGN SYSTEM === */

:root {
    --primary-color: #5A6F9C;
    --secondary-color: #6A7DAA;
    --accent-blue: #7A8BB8;
    --accent-orange: #DD6B20;
    --accent-orange-muted: #ED8936;
    --accent-orange-light: #F6AD55;
    --success-color: #38A169;
    --warning-color: #D69E2E;
    --danger-color: #E53E3E;
    --light-bg: #F8FAFC;
    --card-bg: #FFFFFF;
    --border-color: #E2E8F0;
    --text-primary: #2D3748;
    --text-muted: #718096;
    --text-light: #A0AEC0;
    --gradient-primary: linear-gradient(135deg, #5A6F9C, #6A7DAA);
    --gradient-secondary: linear-gradient(135deg, #6A7DAA, #7A8BB8);
    --gradient-accent: linear-gradient(135deg, #7A8BB8, #8DA1C6);
    --gradient-light: linear-gradient(135deg, #8DA1C6, #A4B8D4);
    --gradient-success: linear-gradient(135deg, #38A169, #48BB78);
    --gradient-warning: linear-gradient(135deg, #D69E2E, #ECC94B);
    --gradient-orange: linear-gradient(135deg, #DD6B20, #ED8936);
    --gradient-orange-muted: linear-gradient(135deg, #ED8936, #F6AD55);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.4;
}

#wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
}

/* === LOGO WRAPPER === */
.logo-wrapper {
    position: fixed;
    top: 5px; /* Position logo 5px down from the top */
    left: 0;
    width: 250px;
    height: 100px;
    z-index: 1051;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important; /* Remove all borders */
    border-bottom: 0px solid rgba(255, 255, 255, 0.1); /* No border at the bottom */
    box-shadow: none !important; /* Remove any box shadows */
    outline: none !important; /* Remove any outlines */
    /* Match the navbar/sidebar gradient */
}


.sidebar-logo-overlapping {
    max-height: 90px;
    width: auto;
    margin: 0;  /* ensure no spacing */
    padding: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Overlapping Logo Effect */
.sidebar-logo-overlap {
    position: absolute;
    top: 5px; /* Position logo to start 5px down from the top */
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
    z-index: 1050; /* Higher than navbar (1030) to appear in front */
}


/* === SIDEBAR === */
.sidebar {
    width: 250px;
    background: var(--gradient-primary);
    position: fixed;
    top: 50px; /* Align with navbar bottom */
    left: 0;
    height: calc(100vh - 60px); /* Adjust height to account for navbar */
    z-index: 1000;
    overflow-y: auto;
    overflow-x: visible; /* Ensure submenus aren't clipped */
    transition: width 0.3s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* Only right border */
    border-top: none !important; /* Explicitly ensure no top border */
    border-bottom: none !important; /* Explicitly ensure no bottom border */
    border-left: none !important; /* Explicitly ensure no left border */
    box-shadow: 2px 0 4px rgba(90, 111, 156, 0.08);
    outline: none !important; /* Remove any outlines */
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar-inner {
    /* Increased padding-top to 10rem to push sidebar text further down.
       If this still has no effect, check for specificity issues or if another rule is overriding this one.
       You may need to use !important or increase selector specificity. */
    padding-top: 6rem !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Remove bullets from sidebar navigation */
.sidebar-nav,
.sidebar-nav ul,
.sidebar-nav li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Lower the starting position of sidebar nav text */
.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 1.25rem 1rem 0.75rem 1rem; /* Increased top padding from 1.25rem to 2.25rem */
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-nav .nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    border-right: 3px solid white;
}

.sidebar-nav .nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.sidebar-nav .nav-link i {
    width: 20px;
    margin-right: 0.75rem;
}

/* Chevron rotation for collapsed/expanded state */
.sidebar-nav .nav-link[data-bs-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.3s ease;
}

.sidebar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down,
.sidebar-nav .nav-link[data-bs-toggle="collapse"]:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-nav .nav-link span,
.sidebar.collapsed .sidebar-section-title {
    display: none;
}

.sidebar.collapsed .sidebar-nav .nav-link {
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.sidebar.collapsed .sidebar-nav .nav-link i {
    margin-right: 0;
    font-size: 1rem;
}

/* Submenu navigation items - ensure collapse divs are visible when shown */
/* Bootstrap's default collapse behavior - we override for sidebar */
.sidebar-nav .collapse:not(.show) {
    display: none !important;
}

.sidebar-nav .collapse.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* During Bootstrap's collapsing animation */
.sidebar-nav .collapse.collapsing {
    display: block !important;
    height: auto !important;
    transition: height 0.35s ease;
}

/* Submenu navigation items - icons and spacing */
.sidebar-nav .collapse .nav-link {
    padding-left: 2.5rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    font-size: 0.9rem;
}

.sidebar-nav .collapse .nav-link i {
    width: 18px;
    margin-right: 0.75rem;
    opacity: 0.9;
    flex-shrink: 0;
    display: inline-block;
}

.sidebar-nav .collapse .nav-link:hover i {
    opacity: 1;
}

/* Ensure icons are visible in submenu */
.sidebar-nav .nav.flex-column .nav-link i {
    display: inline-block;
    color: rgba(255, 255, 255, 0.9);
}

/* Ensure submenu ul is visible */
.sidebar-nav .collapse ul,
.sidebar-nav .collapse.show ul,
.sidebar-nav .collapse.showing ul {
    display: block !important;
    list-style: none;
    padding-left: 0;
    margin: 0;
    visibility: visible !important;
}

/* Ensure submenu items are visible */
.sidebar-nav .collapse.show .nav-item,
.sidebar-nav .collapse.showing .nav-item {
    display: list-item !important;
    visibility: visible !important;
}

/* === SECTION NAVIGATION (Always visible submenus) === */
.sidebar-nav .nav-section {
    margin-bottom: 0.5rem;
}

.sidebar-nav .section-header {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 1rem 0.5rem 1rem;
    margin-bottom: 0;
    cursor: default;
    pointer-events: none;
}

.sidebar-nav .section-header:hover {
    background: transparent;
    transform: none;
}

.sidebar-nav .section-links {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-nav .section-links .nav-item {
    display: block !important;
    visibility: visible !important;
}

.sidebar-nav .section-links .nav-link {
    padding-left: 2.5rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.sidebar-nav .section-links .nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.sidebar-nav .section-links .nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    border-right: 3px solid white;
}

.sidebar-nav .section-links .nav-link i {
    width: 18px;
    margin-right: 0.75rem;
    opacity: 0.9;
}

.sidebar-nav .section-links .nav-link:hover i,
.sidebar-nav .section-links .nav-link.active i {
    opacity: 1;
}

/* === NAVBAR TOP === */
.navbar-top {
    background: var(--gradient-primary);
    border: none !important; /* Remove all borders */
    border-bottom: none !important; /* Explicitly ensure no bottom border */
    border-top: none !important; /* Explicitly ensure no top border */
    border-left: none !important; /* Explicitly ensure no left border */
    border-right: none !important; /* Explicitly ensure no right border */
    padding: 0.25rem 0.75rem;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    box-shadow: none !important; /* Remove any box shadows */
    outline: none !important; /* Remove any outlines */
}

/* Override any Bootstrap navbar borders */
.navbar {
    border: none !important;
}

.navbar-dark {
    border: none !important;
}

/* Ensure no borders on any navigation elements */
.navbar-nav,
.nav-item,
.nav-link {
    border: none !important;
}

/* Ensure no borders on container elements */
.container-fluid {
    border: none !important;
}

/* Ensure no borders on dropdown elements */
.dropdown-menu {
    border: none !important;
}

.dropdown-item {
    border: none !important;
}

/* Additional Bootstrap navbar overrides */
.navbar-expand-lg {
    border: none !important;
}

.navbar > .container-fluid {
    border: none !important;
}

/* Override any potential Bootstrap border utilities */
.border-0 {
    border: none !important;
}

/* Ensure no borders on any Bootstrap components */
.btn,
.form-control,
.card,
.list-group {
    border: none !important;
}

.navbar-top .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: 0.2s ease;
}

.navbar-top .avatar:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.navbar-top .dropdown-toggle {
    padding: 0.5rem;
    color: white;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.navbar-top .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* User count display styling */
.user-count-display {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.user-count-display:hover {
    background: rgba(255, 255, 255, 0.15);
}

.user-count-display i {
    font-size: 1rem;
    opacity: 0.9;
}

.user-count-display #active-user-count {
    font-weight: 600;
    margin: 0 0.25rem;
}

.user-count-display small {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Responsive adjustments for user count */
@media (max-width: 768px) {
    .user-count-display {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .user-count-display i {
        font-size: 0.875rem;
    }
    
    .user-count-display small {
        display: none;
    }
}

.navbar-top .dropdown-toggle::after {
    display: none;
}

/* === MAIN CONTENT === */
.main-content {
    flex: 1;
    margin-left: 250px;
    padding: 1rem;
    margin-top: 60px;
    transition: margin-left 0.3s ease;
    background: var(--light-bg);
    border: none !important; /* Remove all borders */
}

.main-content.expanded {
    margin-left: 60px;
}

/* === RESPONSIVE === */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        width: 250px;
        top: 60px;
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .main-content,
    .main-content.expanded {
        margin-left: 0;
    }
    .logo-wrapper {
        width: 100%;
    }
}

/* === FOOTER === */
.footer {
    background: var(--card-bg);
    border-top: none; /* Removed border-top to eliminate unwanted line */
    padding: 1.5rem 0;
    margin-top: auto;
}

.footer-logo {
    max-height: 40px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* === A11Y & UTILITIES === */
[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

/* === FILTER BAR COMPONENTS === */

/* Corporate Filter Bar Styles */
.filter-bar {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(90, 111, 156, 0.08);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.filter-section {
    padding: 0.75rem;
    border-radius: 6px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.filter-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    flex: 1;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.filter-group-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Corporate Button Styles */
.corporate-btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.corporate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(90, 111, 156, 0.15);
}

.corporate-btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

.corporate-btn-secondary {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.corporate-btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.corporate-btn-outline:hover {
    background: var(--light-bg);
    color: var(--text-primary);
}

/* Corporate Form Controls */
.corporate-dropdown {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.corporate-input-group {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.corporate-input-group .form-control {
    border: none;
    background: var(--card-bg);
    color: var(--text-primary);
}

.corporate-input-group .input-group-text {
    background: var(--light-bg);
    border: none;
    color: var(--text-muted);
}

/* Status Badge Styles */
.status-badge {
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.2rem 0.5rem;
}

.status-badge-success {
    background: var(--gradient-success);
    color: white;
}

.status-badge-warning {
    background: var(--gradient-warning);
    color: white;
}

/* Filter Row Layout */
.filter-row {
    display: flex;
    gap: 1rem;
}

.filter-row .col-12,
.filter-row .col-lg-6 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.filter-row .filter-section {
    flex: 1;
    min-height: 120px;
    height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
    }
    
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-row .filter-section {
        min-height: auto;
    }
}