/*
 * Sympto brand theme over Bootstrap 5.
 * Colors from mfv2 project/static/css/style.css + customized bootstrap:
 *   navy #001a70 (primary / navbar), teal #66edd3 (accent),
 *   red #ff3f46 (danger).
 */

:root {
    --sympto-navy: #001a70;
    --sympto-teal: #66edd3;
    --sympto-teal-bg: #e1f9f4;
    --sympto-red: #ff3f46;
}

/* navbar: same navy as Sympto's navbar-inverse */
.navbar-sympto {
    background-color: var(--sympto-navy);
}

/* headings and links in Sympto navy (variable also covers .h1-.h6 classes) */
body {
    --bs-heading-color: var(--sympto-navy);
}

a {
    color: var(--sympto-navy);
}

/* primary buttons: filled navy, like Sympto's action buttons */
.btn-primary {
    --bs-btn-bg: var(--sympto-navy);
    --bs-btn-border-color: var(--sympto-navy);
    --bs-btn-hover-bg: #00114a;
    --bs-btn-hover-border-color: #00114a;
    --bs-btn-active-bg: #00114a;
    --bs-btn-active-border-color: #00114a;
    --bs-btn-disabled-bg: var(--sympto-navy);
    --bs-btn-disabled-border-color: var(--sympto-navy);
}

/* danger: Sympto red */
.btn-danger, .btn-outline-danger {
    --bs-btn-bg: var(--sympto-red);
    --bs-btn-border-color: var(--sympto-red);
    --bs-btn-hover-bg: #e02c33;
    --bs-btn-hover-border-color: #e02c33;
    --bs-btn-active-bg: #e02c33;
    --bs-btn-active-border-color: #e02c33;
}

.btn-outline-danger {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--sympto-red);
    --bs-btn-hover-color: #fff;
}

.text-danger, .alert-danger {
    color: var(--sympto-red);
}

/* progress bar: teal on navy text, like Sympto's active elements */
.progress-bar {
    background-color: var(--sympto-teal);
}

.spinner-border.text-primary {
    color: var(--sympto-teal) !important;
}

/* "built" badge: teal background with navy text (Sympto active style) */
.badge.text-bg-success {
    background-color: var(--sympto-teal) !important;
    color: var(--sympto-navy) !important;
}

.badge.text-bg-danger {
    background-color: var(--sympto-red) !important;
}

/* table header accents like Sympto's versions table */
.table thead th {
    color: var(--sympto-navy);
}

/* card top accent: the teal underline Sympto uses on active panels */
.card-accent {
    border-top: 3px solid var(--sympto-teal);
}

/* focus rings in teal instead of Bootstrap blue */
.form-control:focus {
    border-color: var(--sympto-teal);
    box-shadow: 0 0 0 0.25rem rgba(102, 237, 211, 0.35);
}