/* 1. Global & Theme Management */
:root {
    --card-bg: #ffffff;
    --input-bg: #f8f9fa;
    --main-text: #1e293b;
    --border-color: #f1f5f9;
}

[data-bs-theme="dark"] {
    --card-bg: #212529; /* Samakan dengan header/footer */
    --input-bg: #2c3034;
    --main-text: #f8fafc;
    --border-color: #343a40;
}

.profile-page { background-color: var(--bs-body-bg); }
.bg-card-custom { background-color: var(--card-bg) !important; color: var(--main-text); }
.text-main { color: var(--main-text) !important; }
.border-card-custom { border-color: var(--card-bg) !important; }

/* 2. Stat Cards */
.stat-card:hover {
    transform: translateY(-3px);
    background-color: var(--bs-primary) !important;
    border-color: rgba(255,255,255,0.1);
}
.stat-card:hover .text-muted, .stat-card:hover .text-main, .stat-card:hover i {
    color: white !important;
}

/* 3. Inputs */
.premium-input {
    background-color: var(--input-bg) !important;
    border: 2px solid transparent !important;
    color: var(--main-text) !important;
    transition: all 0.3s ease;
}
.premium-input:focus {
    border-color: var(--bs-primary) !important;
    background-color: var(--card-bg) !important;
    box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb), 0.1) !important;
}

/* 4. Utilities */
.fw-black { font-weight: 900; }
.shadow-primary { box-shadow: 0 10px 20px rgba(var(--bs-primary-rgb), 0.3); }
.text-gradient {
    background: linear-gradient(45deg, var(--bs-primary), #6f42c1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Dark Mode Button fix */
[data-bs-theme="dark"] .dark-btn-outline {
    border-color: #495057 !important;
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .dark-btn-outline:hover {
    background: #495057 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .profile-page { padding-top: 15px; }
    .card-body { padding: 1.5rem !important; }
    .icon-shape { padding: 0.8rem !important; }
}