/* Global background */
body {
    background: #f5f7fb;
}

/* Centered cards */
.main-card {
    max-width: 600px;
    margin: 80px auto;
}

/* Login form slightly smaller */
.main-card.login-card {
    max-width: 500px;
}

/* Uniform button width */
.btn-custom {
    width: 200px;
}

/* Flash message spacing */
.flash-messages {
    margin-bottom: 15px;
}

.navbar-brand-gradient {
    background: linear-gradient(to right, red, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}


:root[data-theme='light'] {
    --bg-main: #f8f9fa;
    --bg-sidebar: #212529;
    --text-sidebar: #fff;
    --bg-card: #ffffff;
    --text-color: #212529;
}

:root[data-theme='dark'] {
    --bg-main: #1d1f21;
    --bg-sidebar: #111;
    --text-sidebar: #e6e6e6;
    --bg-card: #2b2b2b;
    --text-color: #e6e6e6;
}

body {
    background: var(--bg-main);
    color: var(--text-color);
}

/* Sidebar */
.sidebar {
    width: 240px;
    height: 100vh;
    position: fixed;
    top: 56px;
    left: 0;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    padding-top: 20px;
    transition: 0.3s ease;
}

.sidebar.collapsed {
    width: 75px;
}

.sidebar a {
    color: var(--text-sidebar);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.sidebar a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-icon-only {
    display: none;
}

.collapsed .sidebar-text {
    display: none;
}

.collapsed .sidebar-icon-only {
    display: inline-block;
}

/* Profile avatar */
.profile-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #6c757d;
    color: white;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

/* Main content */
.main-content {
    margin-left: 240px;
    padding: 20px;
    transition: 0.3s ease;
}

.collapsed+.main-content {
    margin-left: 75px;
}

/* Dark mode theme */
[data-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #ddd;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Dark mode footer */
[data-theme="dark"] .footer {
    color: #ccc;
    opacity: 0.8;
}