/* Sidebar Navigation Styles */

:root {
    --sidebar-width: 280px;
    --sidebar-bg: #1a1d29;
    --sidebar-hover: #252836;
    --sidebar-active: #2d3142;
    --sidebar-text: #e4e6eb;
    --sidebar-text-muted: #9ca3af;
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Sidebar Container */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}

/* Sidebar Header */
.sidebar-header {
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header h5 {
    color: var(--sidebar-text);
    font-weight: 600;
    margin: 0;
}

/* Sidebar User Info */
.sidebar-user {
    padding: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.user-avatar i {
    font-size: 1.5rem;
    color: white;
}

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 600;
    color: var(--sidebar-text);
    font-size: 0.95rem;
}

.user-role {
    font-size: 0.75rem;
    color: var(--sidebar-text-muted);
    margin-top: 0.15rem;
}

/* Sidebar Menu */
.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
}

/* Accordion Styles */
.sidebar-menu .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
}

.sidebar-menu .accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-menu .accordion-button {
    background: transparent;
    color: var(--sidebar-text);
    border: none;
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.sidebar-menu .accordion-button:hover {
    background: var(--sidebar-hover);
    color: white;
}

.sidebar-menu .accordion-button:not(.collapsed) {
    background: var(--sidebar-active);
    color: white;
}

.sidebar-menu .accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

.sidebar-menu .accordion-button:not(.collapsed)::after {
    opacity: 1;
}

/* Accordion Button Link (for non-collapsible items like Dashboard) */
.accordion-button-link {
    display: block;
    background: transparent;
    color: var(--sidebar-text);
    border: none;
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.accordion-button-link:hover {
    background: var(--sidebar-hover);
    color: white;
}

/* Accordion Body */
.sidebar-menu .accordion-body {
    padding: 0.5rem 0;
    background: rgba(0, 0, 0, 0.2);
}

/* Sidebar Links */
.sidebar-link {
    display: block;
    padding: 0.625rem 1.25rem 0.625rem 2.5rem;
    color: var(--sidebar-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    position: relative;
}

.sidebar-link:hover {
    background: var(--sidebar-hover);
    color: white;
    padding-left: 2.75rem;
}

.sidebar-link i {
    font-size: 0.875rem;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer .btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--sidebar-text);
}

.sidebar-footer .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Main Content Area */
.main-content {
    margin-left: var(--sidebar-width);
    background: #f8f9fa;
    transition: margin-left 0.3s ease;
}

/* Primary content wrapper for authenticated pages.
   Let content define the height and keep a modest
   bottom padding so the footer sits after all
   content in normal document flow. */
.content-wrapper {
    padding: 2rem;
    padding-bottom: 4.5rem;
    background: #f8f9fa;
}

/* Footer positioning for authenticated pages with sidebar.
   The footer background spans the full viewport width, but its
   inner content aligns with the main content column.

   The footer participates in normal document flow and only
   appears when the user reaches the bottom of the page. On
   mobile we drop the left padding so it centers under the
   main content. */
body.ts-has-sidebar .ts-footer {
    padding-left: var(--sidebar-width);
    transition: padding-left 0.3s ease;
}

/* Top Bar for Mobile */
.top-bar {
    display: none;
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1rem;
}

/* Mobile Sidebar Toggle */
.mobile-sidebar-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

.mobile-sidebar-toggle i {
    font-size: 1.5rem;
}

/* Scrollbar Styling */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    body.ts-has-sidebar .ts-footer {
        padding-left: 0;
    }
    
    .top-bar {
        display: block;
    }
    
    .mobile-sidebar-toggle {
        display: flex;
    }
}

/* Active Link Styling */
.sidebar-link.active,
.accordion-button-link.active {
    background: var(--primary-color);
    color: white;
}

.sidebar-link.active:hover {
    background: var(--primary-hover);
}

/* Badge Styles for Menu Items */
.sidebar-link .badge,
.accordion-button .badge {
    margin-left: auto;
    font-size: 0.7rem;
}

/* Animation for Accordion */
.accordion-collapse {
    transition: height 0.3s ease;
}

/* Improve text readability */
.sidebar * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hover effect for icons */
.sidebar-link:hover i,
.accordion-button:hover i,
.accordion-button-link:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Premium Feature Badge */
.premium-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    font-weight: 600;
}