:root {
    /* Brand Colors */
    --primary-pink: #FF70C4;
    --primary-purple: #7167FF;
    --primary-gradient: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-purple) 100%);
    --dark-navy: #11112B;

    /* UI Palette */
    --bg-main: #F4F7FE;
    --bg-white: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --topbar-bg: rgba(255, 255, 255, 0.8);

    /* Text Colors */
    --text-main: #2D3748;
    --text-muted: #718096;
    --text-light: #A0AEC0;

    /* Shadows & Radii */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* Base Styles */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
    line-height: 1.6;
}

/* Sidebar Modernization */
.sidebar-wrapper {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: var(--shadow-sm) !important;
    top: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    z-index: 100 !important;
}

.sidebar-header {
    background: transparent !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 24px !important;
    height: 90px !important;
    width: 280px !important;
}

.sidebar-wrapper .metismenu {
    padding: 20px 16px !important;
}

.sidebar-wrapper .metismenu a {
    border-radius: var(--radius-md) !important;
    margin-bottom: 4px !important;
    padding: 12px 16px !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.sidebar-wrapper .metismenu a:hover {
    background: rgba(113, 103, 255, 0.05) !important;
    color: var(--primary-purple) !important;
}

.sidebar-wrapper .metismenu .mm-active>a {
    background: var(--primary-gradient) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(113, 103, 255, 0.25) !important;
}

.sidebar-wrapper .metismenu a .parent-icon {
    font-size: 18px !important;
}

/* Top Header Modernization */
.top-header {
    left: 280px !important;
    background: var(--topbar-bg) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: none !important;
    height: 80px !important;
    line-height: 80px !important;
}

.page-wrapper {
    margin-top: 0 !important;
}

.page-content-wrapper {
    margin-left: 280px !important;
    padding-top: 80px !important;
    min-height: 100vh !important;
}

/* Card Modernization */
.card {
    background: var(--bg-white) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

/* Button Modernization */
.btn-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(113, 103, 255, 0.2) !important;
}

.btn-light {
    background: #F4F7FE !important;
    border: 1px solid #E2E8F0 !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
}

.btn-light:hover {
    background: #E2E8F0 !important;
}

/* Form Control Modernization */
.form-control {
    background-color: #F4F7FE !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-main) !important;
    padding: 12px 16px !important;
    height: auto !important;
    transition: all 0.2s ease !important;
}

.form-control:focus {
    background-color: #FFFFFF !important;
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgba(113, 103, 255, 0.1) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--text-light) !important;
}

.form-group label {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
}

/* Typography Enhancements */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dark-navy) !important;
    font-weight: 700 !important;
}

/* Search Bar Improvement */
.search-bar input {
    background: #F4F7FE !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-main) !important;
    padding: 0 20px !important;
}

.search-bar input::placeholder {
    color: var(--text-light) !important;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #CBD5E0;
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .top-header {
        left: 0 !important;
    }

    .sidebar-wrapper {
        left: -280px !important;
    }

    .wrapper.toggled .sidebar-wrapper {
        left: 0 !important;
    }

    .page-content-wrapper {
        margin-left: 0 !important;
    }
}

/* Authentication Layout Fixes */
.section-authentication-login {
    background-color: var(--bg-main) !important;
    min-height: 100vh !important;
}

.section-authentication-login .card {
    overflow: hidden !important;
}

.login-img {
    object-fit: cover !important;
}