/* ============================================================
 * alerts.css — Site-wide Bootstrap 5 alert color rules
 * ForensicCrash.net
 * Created: 01MAY26
 *
 * Why this file exists:
 *   The site's main stylesheets do not define background, border,
 *   or text colors for Bootstrap's .alert variant classes. Result:
 *   <div class="alert alert-warning"> and friends render as white
 *   boxes with no visible borders, making flash messages and
 *   inline notices invisible across login, password reset, contact
 *   form, profile editor, etc.
 *
 *   This stylesheet supplies the standard Bootstrap 5.3 alert
 *   color palette via simple class selectors. !important is used
 *   to override any later-loading stylesheets that set these
 *   properties to white or unset.
 *
 * Deploy:
 *   1. Upload this file to /public_html/css/alerts.css
 *   2. Add the following line to includes/header.php near the
 *      other CSS <link> tags:
 *
 *      <link rel="stylesheet" href="<?= BASE_URL ?>css/alerts.css">
 *
 *   3. Hard-refresh any page (Ctrl+Shift+R) to bust the CSS cache.
 *
 * Verify:
 *   Trigger any flash — easiest test is a wrong password on the
 *   login page. You should see a colored alert band instead of
 *   a white box.
 * ============================================================ */

/* ---------- Light mode (default) ---------- */

.alert-success {
    color: #0a3622 !important;
    background-color: #d1e7dd !important;
    border-color: #a3cfbb !important;
}

.alert-info {
    color: #055160 !important;
    background-color: #cff4fc !important;
    border-color: #9eeaf9 !important;
}

.alert-warning {
    color: #664d03 !important;
    background-color: #fff3cd !important;
    border-color: #ffe69c !important;
}

.alert-danger {
    color: #58151c !important;
    background-color: #f8d7da !important;
    border-color: #f1aeb5 !important;
}

.alert-primary {
    color: #052c65 !important;
    background-color: #cfe2ff !important;
    border-color: #9ec5fe !important;
}

.alert-secondary {
    color: #2b2f32 !important;
    background-color: #e2e3e5 !important;
    border-color: #c4c8cb !important;
}

/* Links inside alerts inherit a darker shade of the alert text color */
.alert-success .alert-link  { color: #0a3622 !important; text-decoration: underline; }
.alert-info    .alert-link  { color: #055160 !important; text-decoration: underline; }
.alert-warning .alert-link  { color: #664d03 !important; text-decoration: underline; }
.alert-danger  .alert-link  { color: #58151c !important; text-decoration: underline; }
.alert-primary .alert-link  { color: #052c65 !important; text-decoration: underline; }


/* ---------- Dark mode overrides ---------- *
 * Keyed to both common dark-mode toggle conventions:
 *   body.dark-mode (jQuery-style toggle adding class to body)
 *   html[data-theme="dark"] (Bootstrap 5.3+ data-attribute)
 *
 * If the site's dark-mode toggle uses a different class or
 * attribute, update the selectors below to match. If dark mode
 * is irrelevant for alerts, this whole block can be deleted
 * with no impact on light-mode alert rendering.
 * ---------------------------------------------------------------- */

body.dark-mode .alert-success,
html[data-theme="dark"] .alert-success {
    color: #75b798 !important;
    background-color: #051b11 !important;
    border-color: #0f5132 !important;
}

body.dark-mode .alert-info,
html[data-theme="dark"] .alert-info {
    color: #6edff6 !important;
    background-color: #032830 !important;
    border-color: #055160 !important;
}

body.dark-mode .alert-warning,
html[data-theme="dark"] .alert-warning {
    color: #ffda6a !important;
    background-color: #332701 !important;
    border-color: #664d03 !important;
}

body.dark-mode .alert-danger,
html[data-theme="dark"] .alert-danger {
    color: #ea868f !important;
    background-color: #2c0b0e !important;
    border-color: #842029 !important;
}

body.dark-mode .alert-primary,
html[data-theme="dark"] .alert-primary {
    color: #6ea8fe !important;
    background-color: #031633 !important;
    border-color: #084298 !important;
}

body.dark-mode .alert-secondary,
html[data-theme="dark"] .alert-secondary {
    color: #a7acb1 !important;
    background-color: #161719 !important;
    border-color: #41464b !important;
}