/* Custom Styles for Brain Power Calculator */

:root {
    --brain-primary: #F7CC00;
    /* Yellow Accent */
    --brain-secondary: #FFD700;
    /* Lighter Yellow */
    --brain-bg: #101010;
    /* Dark Background */
    --brain-card-bg: #181818;
    /* Slightly lighter for cards */
    --brain-text: #f3f4f6;
    /* Gray 100 */
    --brain-text-muted: #9ca3af;
    /* Gray 400 */
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--brain-text);
    background-color: var(--brain-bg) !important;
}

.text-primary {
    color: var(--brain-primary) !important;
}

.bg-primary {
    background-color: var(--brain-primary) !important;
    color: #111827 !important;
    /* Dark text on primary bg */
}

.btn-primary {
    background-color: var(--brain-primary);
    border-color: var(--brain-primary);
    color: #111827;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.btn-primary:disabled {
    background-color: #374151;
    border-color: #374151;
    color: #9ca3af;
}

/* Card Improvements */
.card {
    border-radius: 12px;
    transition: transform 0.2s;
    background-color: var(--brain-card-bg);
    border: 1px solid #374151;
    /* Gray 700 border */
    color: var(--brain-text);
}

.card:hover {
    transform: translateY(-2px);
    border-color: var(--brain-primary);
}

.shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Specific Card overrides for viability */
.card.bg-success {
    background-color: #059669 !important;
    border-color: #059669;
}

.card.bg-warning {
    background-color: #d97706 !important;
    border-color: #d97706;
    color: #fff !important;
}

.card.bg-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626;
}

/* Result Cards Specifics */
#outBrainPower {
    letter-spacing: -1px;
}

.display-3 {
    font-weight: 800;
}

/* Form Controls Dark Mode */
.form-control,
.form-select,
.form-range {
    background-color: #374151;
    border-color: #4b5563;
    color: #fff;
}

.form-control:focus,
.form-select:focus {
    background-color: #374151;
    border-color: var(--brain-primary);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25);
}

.form-check-input {
    background-color: #374151;
    border-color: #4b5563;
}

.form-check-input:checked {
    background-color: var(--brain-primary);
    border-color: var(--brain-primary);
}

.form-text,
.text-muted {
    color: var(--brain-text-muted) !important;
}

/* Footer link color */
footer {
    border-top-color: #374151 !important;
}