/* Beautification & Logo Styles */

/* Font Improvement */
body {
    font-family: 'Inter', 'Outfit', sans-serif; /* Prefer Inter if available */
    letter-spacing: -0.01em;
}

/* Sidebar Logo */
.sidebar-logo {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    margin-bottom: 0.5rem;
    display: block;
}

.logo {
    margin-bottom: 2rem;
    text-align: center;
    /* Reset flex for image vertical stacking if needed, or keep row for icon+text */
    flex-direction: column; 
    align-items: flex-start;
}

/* Sidebar Icons & Spacing */
.nav-item {
    padding: 0.85rem 1rem;
    margin-bottom: 0.35rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent;
}

.nav-item i {
    width: 24px; /* Fixed width for alignment */
    text-align: center;
    margin-right: 0.75rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    transform: translateX(4px);
}

.nav-item:hover i {
    opacity: 1;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.2) 0%, rgba(79, 70, 229, 0) 100%);
    border-left-color: var(--primary-color);
    color: #a5b4fc;
    box-shadow: none; /* Remove old shadow */
}

.nav-item.active i {
    color: var(--primary-color);
    opacity: 1;
}

/* Glassmorphism Refinement */
.card, .table-container, .top-bar {
    background: rgba(30, 41, 59, 0.6); /* Slightly more transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.top-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -2px rgba(79, 70, 229, 0.4);
}

/* Inputs */
input, select, textarea {
    background-color: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

input:focus, select:focus, textarea:focus {
    background-color: rgba(15, 23, 42, 0.8);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); 
}