body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #f0f4f8 0%, #e1e8ef 100%);
    min-height: 100vh;
    color: #1a1d20;
}

/* Login Container */
.login-container {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 3rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

.brand-logo {
    width: 400px;
    object-fit: contain;
    margin-bottom: 2rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.06));
    border: 2px solid #e1e8ef;
    background: white;
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #3c4043;
    border: 1px solid #dfe1e5;
    border-radius: 50px;
    padding: 14px 24px;
    font-weight: 500;
    font-size: 1.05rem;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
}

.google-btn:hover {
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    color: #3c4043;
}

/* Dashboard Styles */
.navbar-custom {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-custom {
    border: none;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] body {
    background: linear-gradient(135deg, #1a1d20 0%, #212529 100%);
    color: #f8f9fa;
}

[data-bs-theme="dark"] .login-container {
    background: rgba(33, 37, 41, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .brand-logo {
    border: 2px solid #343a40;
    background: #212529;
}

[data-bs-theme="dark"] .google-btn {
    background-color: #2b3035;
    color: #f8f9fa;
    border: 1px solid #495057;
}

[data-bs-theme="dark"] .google-btn:hover {
    background-color: #343a40;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .navbar-custom {
    background: rgba(33, 37, 41, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .card-custom {
    background: #212529;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .card-custom:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Custom Tooltip */
.info-icon {
    position: relative;
    cursor: help;
    color: #6c757d;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
}

.info-icon:hover {
    color: #0d6efd;
}

.info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33, 37, 41, 0.98);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, bottom 0.2s;
    pointer-events: none;
    z-index: 1050;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.info-icon::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(33, 37, 41, 0.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, bottom 0.2s;
    pointer-events: none;
    z-index: 1050;
}

.info-icon:hover::after,
.info-icon:hover::before {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 4px);
}

.info-icon:hover::before {
    bottom: 100%;
}

[data-bs-theme="dark"] .info-icon::after {
    background: rgba(248, 249, 250, 0.98);
    color: #212529;
}

[data-bs-theme="dark"] .info-icon::before {
    border-top-color: rgba(248, 249, 250, 0.98);
}