/* 
 * Myspace Premium Custom Theme
 * Overrides default Material Dashboard styles for a modern SaaS look
 */

/* 1. Typography */
body, h1, h2, h3, h4, h5, h6, .navbar-brand, .nav-link-text, .btn {
    font-family: 'Outfit', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

/* 2. Color Palette & Gradients */
.bg-gray-200 {
    background-color: #f8fafc !important; /* Soft slate gray */
}

.bg-gradient-dark {
    background-image: linear-gradient(195deg, #0f172a 0%, #1e293b 100%) !important;
}

.bg-gradient-primary {
    background-image: linear-gradient(195deg, #2563eb 0%, #1d4ed8 100%) !important;
}

.bg-gradient-info {
    background-image: linear-gradient(195deg, #0ea5e9 0%, #0284c7 100%) !important;
}

.text-dark {
    color: #0f172a !important;
}

/* 3. Depth, Shadows & Glassmorphism */
.card {
    border-radius: 1.25rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
}

.card-header {
    border-radius: 1.25rem 1.25rem 0 0 !important;
}

.table-responsive .table tbody tr {
    transition: all 0.2s ease;
}

.table-responsive .table tbody tr:hover {
    background-color: #f1f5f9;
}

/* 4. Micro-Animations */
.btn {
    transition: all 0.3s ease !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

.card.hover-card {
    transition: all 0.3s ease;
}

.card.hover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Navbar specific subtle shadow */
#navbarBlur {
    backdrop-filter: saturate(200%) blur(30px);
    background-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

/* Avatar soft borders */
.avatar {
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}