/*
 * Webroot/css/app-alerts.css
 *
 * THE alert design for the product: public pages, the authenticated shells, the student
 * app and the exam window. Loaded by Include/header-base.php, which every layout that
 * renders chrome includes — so this file is the single owner of how an alert looks, and
 * the duplicate `.alert` block that used to sit in inner-app.css is gone.
 *
 * MATCHES THE DASHBOARD. The "Needs you" feed introduced the product's severity
 * language: a stripe down the left edge, a bold line, a muted line under it, and the
 * severity colour spent on the stripe and the icon rather than on the words. A page-level
 * alert is the same component at a different scale, so it is built the same way, and the
 * two now read as one system instead of two.
 *
 * WHAT CHANGED FROM THE VERSION THIS REPLACES
 *
 *   - No gradient. Every variant was `linear-gradient(135deg, tint, #ffffff 72%)`, which
 *     put a diagonal wash behind body text and made the left half a different colour from
 *     the right.
 *   - No 28px drop shadow. `0 10px 28px rgba(15,23,42,.07)` lifted a full-width bar off
 *     the page as though it floated; an alert is part of the page it is reporting on.
 *   - The TEXT is neutral ink, not the severity colour. `color: #991b1b` on a paragraph
 *     of body copy reads as shouting and costs contrast; the stripe, the icon chip and
 *     any figure inside carry the severity, which is also how the dashboard rows do it.
 *   - The stripe is a 3px pseudo-element, not a 4px left border, so the radius on the
 *     corner stays true instead of being flattened by a thick border.
 *
 * `!important` is kept only where it was earning its keep: AdminLTE 2.4 and Bootstrap 3
 * remnants are still loaded ahead of this file on several pages and set `background`,
 * `border` and `color` on `.alert` from their own stylesheets. Everything else is plain.
 *
 * Colours are literal with var() fallbacks rather than bare tokens: this file is loaded
 * on the exam window and the kids shells, which do not all define the --ia-* scale.
 */

.alert {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 14px;
    padding: 12px 44px 12px 16px !important;
    border: 1px solid var(--ia-border, #e2e5ec) !important;
    border-radius: 10px !important;
    background: var(--ia-card-bg, #ffffff) !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
    color: var(--ia-text, #1e293b) !important;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    overflow: hidden;
}

/* The severity stripe. Inset by 1px so it sits inside the border rather than on it. */
.alert::after {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    width: 3px;
    border-radius: 3px;
    background: var(--ia-gray-300, #cbd5e1);
}

/* The icon chip. A drawn glyph and not the markup's <i class="fa">, because this file is
   loaded on layouts that do not all ship Font Awesome — there the element renders as an
   empty box. The <i> is hidden rather than removed from the markup so nothing else has
   to change to get a correct alert. */
.alert::before {
    content: 'i';
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #e0f2fe;
    color: #0369a1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
}
.alert > i.fa:first-child,
.alert > i.fas:first-child,
.alert > i.far:first-child { display: none !important; }

/* Content. An alert may carry a heading and a paragraph; both stay on the alert's ink so
   a variant cannot leave one of them unreadable. */
.alert p,
.alert h4 { margin: 0; color: inherit !important; }
.alert h4 { font-size: 14px; font-weight: 700; }
.alert p + p { margin-top: 3px; }
.alert strong, .alert b { font-weight: 700; }

.alert a {
    color: var(--ia-primary, #4f46e5) !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Variants ─────────────────────────────────────────────────────────────────────────
   One tinted surface, one stripe, one chip. The four match the dashboard's severities:
   critical #d03b3b, warning #eda100, info #2a78d6, plus success in the product's green.
   ──────────────────────────────────────────────────────────────────────────────────── */

.alert-success {
    border-color: #bbf7d0 !important;
    background: #f4fdf7 !important;
}
.alert-success::after  { background: #16a34a; }
.alert-success::before { content: '\2713'; background: #dcfce7; color: #15803d; }

.alert-danger,
.alert-error {
    border-color: #fbd0d0 !important;
    background: #fef6f6 !important;
}
.alert-danger::after,
.alert-error::after  { background: #d03b3b; }
.alert-danger::before,
.alert-error::before { content: '\00d7'; background: #fdecec; color: #b02020; font-size: 19px; }

.alert-warning {
    border-color: #fde68a !important;
    background: #fffbf2 !important;
}
.alert-warning::after  { background: #eda100; }
.alert-warning::before { content: '!'; background: #fef3c7; color: #8a6100; }

.alert-info {
    border-color: #c9e2fb !important;
    background: #f5faff !important;
}
.alert-info::after  { background: #2a78d6; }
.alert-info::before { content: 'i'; background: #e0f2fe; color: #1a5fad; }

.alert-default {
    border-color: var(--ia-border, #e2e5ec) !important;
    background: var(--ia-gray-50, #f8fafc) !important;
}
.alert-default::after  { background: var(--ia-gray-300, #cbd5e1); }
.alert-default::before { content: 'i'; background: var(--ia-gray-100, #f1f5f9); color: var(--ia-gray-600, #475569); }

/* ── Dismiss ──────────────────────────────────────────────────────────────────────────
   Both button shapes the codebase still emits: Bootstrap 5's .btn-close and the BS3/4
   .close it has not finished replacing. Vertically centred on the alert rather than on
   the first line, which is where it belongs on a one-line alert and close enough on a
   three-line one.
   ──────────────────────────────────────────────────────────────────────────────────── */
.alert .btn-close,
.alert .close {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0 !important;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 7px;
    background-color: transparent !important;
    color: var(--ia-text-muted, #64748b) !important;
    font-size: 19px;
    font-weight: 400;
    line-height: 26px;
    text-shadow: none;
    opacity: .6;
    box-shadow: none !important;
    float: none;
    cursor: pointer;
}
.alert .btn-close { background-size: 10px; }
.alert .btn-close:hover,
.alert .close:hover { background-color: rgba(15, 23, 42, .06) !important; opacity: 1; }
.alert .btn-close:focus-visible,
.alert .close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Phone ────────────────────────────────────────────────────────────────────────────
   Tighter, and the close button keeps a 26px target rather than shrinking with the box.
   ──────────────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 575.98px ) {
    .alert {
        gap: 10px;
        margin-bottom: 12px;
        padding: 11px 40px 11px 13px !important;
        border-radius: 9px !important;
        font-size: 13px;
    }
    .alert::before {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        border-radius: 6px;
        font-size: 13px;
    }
    .alert-danger::before,
    .alert-error::before { font-size: 17px; }
    .alert .btn-close,
    .alert .close { right: 8px; }
}