/* Shared Dashboard Styles (Common between gamer and shop owner dashboards) */

/* Profile Cards */
.profile-card {
    background: var(--bg-primary); 
    border-radius: var(--border-radius); 
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color); 
    margin-bottom: 15px; 
    transition: var(--transition);
}

.profile-card:hover { 
    box-shadow: var(--shadow-md); 
    transform: translateY(-2px); 
}

.card-header {
    display: flex; 
    align-items: center; 
    padding: 12px 16px; 
    border-bottom: 1px solid var(--border-color);
}

.card-header h2 {
    font-size: 1.1rem; 
    font-weight: 600; 
    margin: 0; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: var(--text-primary);
}

.card-body { 
    padding: 16px; 
}

.profile-card,
.card-header,
.card-body,
.view-all-link {
    min-width: 0;
}

.card-header h2,
.card-body,
.view-all-link {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Links and Buttons */
.view-all-link {
    margin-left: auto; 
    font-size: 0.9rem; 
    color: var(--primary); 
    text-decoration: none; 
    transition: var(--transition);
}

.view-all-link:hover { 
    text-decoration: underline; 
    color: var(--primary-dark); 
}

.nav-link-btn {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 8px 16px; 
    border-radius: 8px;
    text-decoration: none; 
    color: var(--text-primary);
    font-weight: 500; 
    transition: var(--transition);
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.nav-link-btn:hover { 
    background: var(--primary); 
    color: var(--text-light);
    transform: translateY(-2px); 
}

/* Badges */
.badge {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background: var(--primary);
    color: var(--text-light); 
    padding: 2px 8px; 
    border-radius: 10px; 
    font-size: var(--text-xs);
    font-weight: var(--font-semibold); 
    line-height: 1; 
    white-space: nowrap; 
    vertical-align: baseline; 
    transition: var(--transition);
}

.badge-primary { background-color: var(--primary); }
.badge-secondary { background-color: var(--secondary); }
.badge-success { background-color: var(--success); }
.badge-danger { background-color: var(--danger); }
.badge-warning { background-color: var(--warning); }
.badge-info { background-color: var(--info); }

/* Dashboard Content Spacing */
.dashboard-content {
    padding: clamp(12px, 2.2vw, 30px) !important;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    min-height: 100vh !important;
    position: relative !important;
    overflow-x: clip;
}

/* Dark Mode Overrides for Common Elements */
[data-theme="dark"] .profile-card { 
    background: var(--bg-card); 
}

[data-theme="dark"] .username, 
[data-theme="dark"] .profile-btn { 
    color: var(--text-light) !important; 
}

[data-theme="dark"] .nav-link.active {
    background: color-mix(in srgb, var(--bg-card) 20%, transparent); 
    box-shadow: var(--shadow-md); 
    border-left: 4px solid var(--text-light);
}

@media (max-width: 768px) { 
    .nav-link-btn span { 
        display: none; 
    } 
    .dashboard-content {
        gap: var(--spacing-md);
    }
}

@media (max-width: 400px) {
    .card-header {
        padding: 10px 12px;
    }

    .card-body {
        padding: 12px;
    }
}