/* Custom User Panel Styling - Modern SaaS Aesthetics */

:root {
    --user-primary: #206bc4;
    --user-primary-gradient: linear-gradient(135deg, #206bc4 0%, #0054a6 100%);
    --user-success-gradient: linear-gradient(135deg, #2fb344 0%, #228633 100%);
    --user-warning-gradient: linear-gradient(135deg, #f59f00 0%, #ca8a04 100%);
    --user-danger-gradient: linear-gradient(135deg, #d63939 0%, #ac2d2d 100%);
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --card-shadow-hover: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    --sidebar-width: 260px;
}

/* Sidebar Styling - Desktop Only Width */
@media (min-width: 992px) {
    .navbar-vertical {
        width: var(--sidebar-width) !important;
        background: #1d273b !important;
        border-right: none !important;
    }

    .page-wrapper {
        margin-left: var(--sidebar-width) !important;
    }
}

/* Sidebar Styling - Mobile & Base */
.navbar-vertical {
    background: #1d273b !important;
    border-right: none !important;
}

.navbar-vertical .nav-link {
    padding: 0.75rem 1.25rem !important;
    border-radius: 8px !important;
    margin: 0.25rem 0.75rem !important;
    transition: all 0.3s ease !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.navbar-vertical .nav-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    transform: translateX(5px);
}

.navbar-vertical .nav-item.active .nav-link {
    background: var(--user-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.3) !important;
}

.navbar-vertical .nav-link-icon {
    margin-right: 0.75rem !important;
    transition: transform 0.3s ease !important;
    width: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.navbar-vertical .nav-link:hover .nav-link-icon {
    transform: scale(1.2);
}

/* Sidebar Sub-menu Styling */
.navbar-vertical .dropdown-menu {
    background: #141b2d !important;
    border: none !important;
    padding: 0.25rem 0.5rem !important;
    margin-left: 1.5rem !important;
}

.navbar-vertical .dropdown-item {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    font-size: 0.85rem !important;
}

.navbar-vertical .dropdown-item:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding-left: 1.25rem !important;
}

.navbar-vertical .dropdown-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3) !important;
}

.navbar-brand-autodark {
    padding: 1.5rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 1rem !important;
}

/* Tabler Core Sidebar Collapse Support */
@media (min-width: 992px) {
    body.sidebar-collapsed .navbar-vertical {
        width: 5.5rem !important;
    }
}

/* Colorful Icons - Category Based */
.sidebar-dashboard .nav-link-icon {
    color: #4299e1;
}

.sidebar-links .nav-link-icon {
    color: #f59f00;
}

.sidebar-bio .nav-link-icon {
    color: #00bcd4;
}

.sidebar-qr .nav-link-icon {
    color: #ff9800;
}

.sidebar-ai .nav-link-icon {
    color: #2fb344;
}

.sidebar-analytics .nav-link-icon {
    color: #667eea;
}

.sidebar-wallet .nav-link-icon {
    color: #48bb78;
}

.sidebar-referral .nav-link-icon {
    color: #9f7aea;
}

.sidebar-support .nav-link-icon {
    color: #f56565;
}

.sidebar-settings .nav-link-icon {
    color: #607d8b;
}

/* Page Wrapper Padding */
.page-wrapper {
    padding-bottom: 2rem !important;
    background-color: #f8fafc !important;
}

/* Mobile Optimizations */
@media (max-width: 767.98px) {
    .card-body {
        padding: 1rem !important;
    }

    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .h1,
    h1 {
        font-size: 1.5rem !important;
    }

    .navbar-brand-autodark {
        padding: 1rem !important;
    }

    .page-header .btn {
        width: auto !important;
    }

    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* Mobile Sidebar Overlay Implementation */
@media (max-width: 991.98px) {
    .navbar-vertical {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: #1d273b !important;
        z-index: 1060 !important;
        display: block !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .navbar-vertical.show-mobile {
        transform: translateX(0);
    }

    .navbar-toggler {
        display: block !important;
        border: none !important;
        padding: 0.5rem !important;
        color: rgba(0, 0, 0, 0.5) !important;
    }

    /* Fix blank screen on first open: force inner collapse to display */
    .navbar-vertical .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Force Table Responsiveness */
.table-responsive {
    border: none !important;
    -webkit-overflow-scrolling: touch;
}

/* Stats Avatars with Gradients */
.avatar.bg-indigo {
    background: var(--user-primary-gradient) !important;
}

.avatar.bg-green {
    background: var(--user-success-gradient) !important;
}

.avatar.bg-yellow {
    background: var(--user-warning-gradient) !important;
}

.avatar.bg-pink {
    background: var(--user-danger-gradient) !important;
}

.avatar {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px !important;
}

/* Table Enhancements */
.table thead th {
    background: #f1f5f9 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    color: #64748b !important;
    border-top: none !important;
}

.table-vcenter td {
    vertical-align: middle !important;
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}