/* Okay, I understand. I will refine the CSS to ensure each menu item is neatly organized and styled, without altering any of the existing color schemes or aesthetic properties. This involves checking for consistent spacing, alignment, and perhaps subtle visual cues for interactive elements, all while preserving the current design integrity. I will ensure that the responsiveness of the design remains intact across various screen sizes.

Here's a breakdown of the CSS (`style.css`) and how it contributes to the visual appeal and organization of the navigation menu, along with a plan to "rapihkan setiap menu nya":

**Analysis of `style.css` for Menu Styling:**

The `style.css` file already has a well-structured section for the navigation menu:

```css */
/* Navigation Items */
.nav-menu {
    padding: 30px 20px; /* Provides internal spacing for the menu */
}

.nav-item {
    margin-bottom: 12px; /* Vertical spacing between each menu item */
    border-radius: 15px; /* Rounded corners for the item container */
    overflow: hidden; /* Ensures background gradient stays within borders */
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transitions for hover effects */
}

.nav-item::before { /* Gradient overlay for hover effect */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    transition: left 0.4s ease;
    z-index: 1;
}

.nav-item:hover::before {
    left: 0; /* Moves the gradient overlay on hover */
}

.nav-link {
    display: flex; /* Enables flexbox for icon and text alignment */
    align-items: center; /* Vertically centers icon and text */
    padding: 16px 20px; /* Internal padding for the clickable link area */
    color: #94a3b8; /* Default text color */
    text-decoration: none;
    position: relative;
    z-index: 2; /* Ensures text and icon are above the ::before pseudo-element */
    transition: all 0.4s ease; /* Smooth transitions for color and transform */
    border-radius: 15px; /* Matches parent border-radius */
}

.nav-link:hover {
    color: white; /* Text color on hover */
    transform: translateX(8px); /* Slight horizontal movement on hover */
}

.nav-link.active {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6); /* Active link background */
    color: white; /* Active link text color */
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); /* Shadow for active link */
}

.nav-icon {
    width: 45px;
    height: 45px;
    background: rgba(59, 130, 246, 0.1); /* Background for the icon container */
    border-radius: 12px; /* Rounded corners for the icon container */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px; /* Space between icon and text */
    transition: all 0.4s ease;
}

.nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.2); /* Active icon background */
    transform: scale(1.1); /* Slight scale for active icon */
}

.nav-link:hover .nav-icon {
    background: rgba(59, 130, 246, 0.3); /* Hover icon background */
    transform: scale(1.1) rotate(5deg); /* Scale and rotate on hover */
}

/* Base Styles 
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Enhanced Animations */
@media (min-width: 1025px) {
    .sidebar {
        width: 280px;
        left: 0;
        position: relative;
    }
    
    .sidebar-toggle {
        display: none;
    }
    
    .main-content {
        margin-left: 280px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Loading Animations */
.loading {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: rotate 1s ease-in-out infinite;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
    margin: 20px auto;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: zoomIn 0.4s ease-out;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.modal-icon.danger {
    background: linear-gradient(135deg, #fecaca, #fca5a5);
}

.modal-icon.success {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.modal-icon i {
    font-size: 36px;
    z-index: 2;
    position: relative;
}

.modal-icon.danger i {
    color: #dc2626;
    animation: pulse 2s infinite;
}

.modal-icon.success i {
    color: #059669;
    animation: pulse 2s infinite;
}

/* Enhanced Form Elements */
.form-floating {
    position: relative;
}

.form-floating input,
.form-floating select,
.form-floating textarea {
    padding: 20px 24px 8px 24px;
}

.form-floating label {
    position: absolute;
    top: 20px;
    left: 24px;
    transition: all 0.3s ease;
    pointer-events: none;
    color: #9ca3af;
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
}

.form-floating input:focus + label,
.form-floating input:not(:placeholder-shown) + label,
.form-floating select:focus + label,
.form-floating select:not([value=""]) + label,
.form-floating textarea:focus + label,
.form-floating textarea:not(:placeholder-shown) + label {
    top: 8px;
    font-size: 12px;
    color: #3b82f6;
    font-weight: 600;
}

.form-floating .has-value + label {
    top: 8px;
    font-size: 12px;
    color: #3b82f6;
    font-weight: 600;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin: 20px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 3px;
    transition: width 0.5s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Search and Filter Styles */
.search-container {
    position: relative;
    margin-bottom: 25px;
}

.search-input {
    width: 100%;
    padding: 16px 50px 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 25px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: rgba(215, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1);
    outline: none;
}

.search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 18px;
    transition: all 0.3s ease;
}

.search-input:focus + .search-icon {
    color: #3b82f6;
    transform: translateY(-50%) scale(1.2);
}

/* Badge Styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.badge-primary {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
}

.badge-success {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
}

.badge-warning {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    color: #92400e;
}

.badge-danger {
    background: linear-gradient(135deg, #fecaca, #fca5a5);
    color: #991b1b;
}

.badge:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.tooltip:hover::before,
.tooltip:hover::after {
    opacity: 1;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    border-radius: 4px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .form-section {
        background: rgba(31, 41, 55, 0.95);
        border: 1px solid rgba(75, 85, 99, 0.3);
    }
    
    label {
        color: #d1d5db;
    }
    
    input[type="text"], select, textarea {
        background: rgba(17, 24, 39, 0.9);
        border-color: #4b5563;
        color: #000203;
    }
    
    input[type="text"]:focus, select:focus, textarea:focus {
        border-color: #60a5fa;
        background: rgba(17, 24, 39, 0.95);
    }
    
    table {
        background: rgba(31, 41, 55, 0.95);
    }
    
    tr:hover {
        background: rgba(55, 65, 81, 0.6);
    }
    
    .modal-content {
        background: #1f2937;
        color: #f9fafb;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus styles for accessibility */
.btn:focus,
input:focus,
select:focus,
textarea:focus,
.nav-link:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .btn, .sidebar, .sidebar-toggle, .modal, .alert {
        display: none !important;
    }
    
    .form-section, table {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
    
    body {
        background: white !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid;
    }
    
    .btn-primary {
        border-color: #1d4ed8;
    }
    
    .btn-warning {
        border-color: #d97706;
    }
    
    .btn-danger {
        border-color: #dc2626;
    }
    
    input[type="text"], select, textarea {
        border-width: 3px;
    }
}

/* Additional utility classes */
.text-gradient {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.shadow-glow {
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.3);
}

.border-gradient {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
    border: 2px solid transparent;
}
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(40px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes fadeInDown {
    from { 
        opacity: 0; 
        transform: translateY(-40px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes fadeOutDown {
    from { 
        opacity: 1; 
        transform: translateY(0); 
    }
    to { 
        opacity: 0; 
        transform: translateY(30px); 
    }
}

@keyframes slideInLeft {
    from { 
        opacity: 0; 
        transform: translateX(-60px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes slideInRight {
    from { 
        opacity: 0; 
        transform: translateX(60px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes slideInUp {
    from { 
        opacity: 0; 
        transform: translateY(60px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes slideInDown {
    from { 
        opacity: 0; 
        transform: translateY(-60px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(5deg);
    }
    70% {
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translateX(8px) rotate(1deg); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4); }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-100px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes flipIn {
    from {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    to {
        opacity: 1;
        transform: rotateY(0);
    }
}

/* Animation Classes */
.animate-fadeIn { animation: fadeIn 0.6s ease-out forwards; }
.animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fadeInDown { animation: fadeInDown 0.8s ease-out forwards; }
.animate-slideInLeft { animation: slideInLeft 0.8s ease-out forwards; }
.animate-slideInRight { animation: slideInRight 0.8s ease-out forwards; }
.animate-slideInUp { animation: slideInUp 0.8s ease-out forwards; }
.animate-slideInDown { animation: slideInDown 0.8s ease-out forwards; }
.animate-bounceIn { animation: bounceIn 1s ease-out forwards; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-shake { animation: shake 0.8s ease-in-out; }
.animate-rotate { animation: rotate 1s linear infinite; }
.animate-wiggle { animation: wiggle 1s ease-in-out; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-slideInFromTop { animation: slideInFromTop 0.8s ease-out forwards; }
.animate-zoomIn { animation: zoomIn 0.6s ease-out forwards; }
.animate-flipIn { animation: flipIn 0.8s ease-out forwards; }

/* Hover Animations */
.hover-float:hover {
    transform: translateY(-8px) scale(1.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.hover-scale:hover {
    transform: scale(1.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
    transition: all 0.4s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg) scale(1.05);
    transition: all 0.4s ease;
}

.hover-wiggle:hover {
    animation: wiggle 0.8s ease-in-out;
}

/* Sidebar Styles */
.sidebar-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.sidebar-toggle:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

.sidebar-toggle.active {
    left: 270px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.sidebar-toggle.active:hover {
    transform: scale(1.1) rotate(-90deg);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}

/* Enhanced Sidebar */
.sidebar {
    width: 280px;
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 50%, #020617 100%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overflow-y: auto;
    border-right: 3px solid rgba(59, 130, 246, 0.3);
}

.sidebar.open {
    left: 0;
    box-shadow: 10px 0 50px rgba(0, 0, 0, 0.3);
}

.sidebar-header {
    padding: 30px 25px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.sidebar-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.8s ease;
}

.sidebar-header:hover::before {
    left: 100%;
}

.sidebar-logo {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.sidebar-logo::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: rotate 3s linear infinite;
}

.sidebar-logo i {
    font-size: 32px;
    color: white;
    z-index: 2;
    position: relative;
}

.sidebar-title {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.sidebar-subtitle {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Navigation Items */
.nav-menu {
    padding: 30px 20px;
}

.nav-item {
    margin-bottom: 12px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    transition: left 0.4s ease;
    z-index: 1;
}

.nav-item:hover::before {
    left: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    color: #94a3b8;
    text-decoration: none;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
    border-radius: 15px;
}

.nav-link:hover {
    color: white;
    transform: translateX(8px);
}

.nav-link.active {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.nav-icon {
    width: 45px;
    height: 45px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    transition: all 0.4s ease;
}

.nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.nav-link:hover .nav-icon {
    background: rgba(59, 130, 246, 0.3);
    transform: scale(1.1) rotate(5deg);
}

/* Form Styles */
.form-section {
    background: rgba(255, 255, 255, 0.95);
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
    transition: left 0.8s ease;
}

.form-section:hover::before {
    left: 100%;
}

.form-section:hover {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
    transform: translateY(-10px);
}

.form-group {
    margin-bottom: 30px;
    position: relative;
}

.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.form-header-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
}

.form-header-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: rotate 4s linear infinite;
}

.form-header-icon i {
    font-size: 24px;
    color: white;
    z-index: 2;
    position: relative;
}

/* Enhanced Input Styles */
label {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 700;
    color: #374151;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
}

.label-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    transition: all 0.3s ease;
}

input[type="text"], select, textarea {
    width: 100%;
    padding: 18px 24px;
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(145deg, #f9fafb, #ffffff);
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

input[type="text"]:focus, select:focus, textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.05);
    background: white;
    transform: translateY(-3px) scale(1.02);
}

input[type="text"]:hover, select:hover, textarea:hover {
    border-color: #9ca3af;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 18px;
    transition: all 0.3s ease;
    pointer-events: none;
}

.input-wrapper:focus-within .input-icon {
    color: #3b82f6;
    transform: translateY(-50%) scale(1.2);
}

/* Enhanced Button Styles */
.btn {
    padding: 16px 32px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    margin: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 140px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:active {
    transform: scale(0.95);
}

.btn i {
    margin-right: 10px;
    transition: all 0.3s ease;
    font-size: 18px;
}

.btn:hover i {
    transform: translateX(3px) scale(1.2);
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.6);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(239, 68, 68, 0.6);
}

.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 8px 30px rgba(107, 114, 128, 0.4);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(107, 114, 128, 0.6);
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 25px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

th, td {
    padding: 20px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(241, 245, 249, 0.8);
    transition: all 0.4s ease;
}

th {
    background: linear-gradient(135deg, #4f46e5, #7c3aed, #ec4899);
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.2px;
    position: relative;
    overflow: hidden;
}

th::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

th:hover::before {
    left: 100%;
}

tr {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

tr:hover {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.8));
    transform: translateX(8px) scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

tr:hover td {
    color: #1e293b;
    font-weight: 600;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px;
    border-radius: 20px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.8s ease;
}

.stat-card:hover::before {
    left: 100%;
}

.stat-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.stat-card:nth-child(1) { background: linear-gradient(135deg, #667eea, #764ba2); }
.stat-card:nth-child(2) { background: linear-gradient(135deg, #f093fb, #f5576c); }
.stat-card:nth-child(3) { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.stat-card:nth-child(4) { background: linear-gradient(135deg, #43e97b, #38f9d7); }

/* Alert Styles */
.alert {
    padding: 20px 25px;
    margin: 25px 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    animation: slideInFromTop 0.8s ease-out;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 1s ease;
}

.alert:hover::before {
    left: 100%;
}

.alert-success {
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.9), rgba(167, 243, 208, 0.9));
    color: #065f46;
    border-left: 5px solid #10b981;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.alert-error {
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.9), rgba(252, 165, 165, 0.9));
    color: #b91c1c;
    border-left: 5px solid #ef4444;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
}

/* Responsive Design - Mobile First */
@media (max-width: 480px) {
    .sidebar {
        width: 100vw;
        left: -100vw;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .sidebar-toggle {
        width: 45px;
        height: 45px;
        top: 15px;
        left: 15px;
    }
    
    .sidebar-toggle.active {
        left: calc(100vw - 60px);
    }
    
    .form-section {
        padding: 20px 15px;
        margin-bottom: 25px;
        border-radius: 15px;
    }
    
    .btn {
        width: 100%;
        margin: 6px 0;
        padding: 16px 20px;
        font-size: 14px;
        min-width: unset;
    }
    
    input[type="text"], select, textarea {
        padding: 16px 20px;
        font-size: 15px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .stat-card {
        padding: 20px;
    }
    
    table {
        font-size: 14px;
    }
    
    th, td {
        padding: 12px 8px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .sidebar {
        width: 320px;
        left: -320px;
    }
    
    .sidebar-toggle.active {
        left: 340px;
    }
    
    .form-section {
        padding: 25px 20px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .btn {
        padding: 14px 24px;
        min-width: 120px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 280px;
        left: -280px;
    }
    
    .sidebar-toggle.active {
        left: 300px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}