/*
 * Inline alert / notice (Welle 1b; UI-Design-Principles Sec. 6/9). A persistent,
 * in-flow message (unlike the transient toast): what happened + what to do. The status
 * is carried by an ember-edge on the LEFT and an accompanying icon — never colour alone
 * (Sec. 9). Used across the auth, admin and instance panels.
 *
 * Class schema: gtx-alert, gtx-alert--<status> (ok|warn|danger|info),
 * gtx-alert__icon, gtx-alert__body.
 */

.gtx-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--gtx-s2);
    padding: var(--gtx-s3) var(--gtx-s4);
    border: 1px solid var(--gtx-line);
    border-left: 3px solid var(--gtx-idle);
    border-radius: var(--gtx-r-s);
    background: var(--gtx-surface);
    color: var(--gtx-text);
    font-size: var(--gtx-fs-ui);
}

.gtx-alert--ok { border-left-color: var(--gtx-ok); background: var(--gtx-ok-soft); }
.gtx-alert--warn { border-left-color: var(--gtx-warn); background: var(--gtx-warn-soft); }
.gtx-alert--danger { border-left-color: var(--gtx-danger); background: var(--gtx-danger-soft); }
.gtx-alert--info { border-left-color: var(--gtx-info); background: var(--gtx-info-soft); }

.gtx-alert__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.gtx-alert--ok .gtx-alert__icon { color: var(--gtx-ok); }
.gtx-alert--warn .gtx-alert__icon { color: var(--gtx-warn); }
.gtx-alert--danger .gtx-alert__icon { color: var(--gtx-danger); }
.gtx-alert--info .gtx-alert__icon { color: var(--gtx-info); }

.gtx-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}