/* The one inline notice: every Bootstrap `.alert .alert-<kind>` in the CRM reads from here.
   Loaded by base.html and by the sign in pages that stand without it, so every value
   carries a fallback. Markup stays plain Bootstrap: <div class="alert alert-info">Text</div>.
   --al-tone is the kind; the icon is a mask filled with it, so it needs no icon font. */

.alert {
    --al-tone: var(--info-color, #06b6d4);
    --al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
    position: relative;
    margin-bottom: 12px;
    padding: 10px 14px 10px 38px;
    border: 1px solid color-mix(in srgb, var(--al-tone) 28%, var(--border-color, #e2e8f0));
    border-radius: 10px;
    background: color-mix(in srgb, var(--al-tone) 8%, var(--bg-primary, #ffffff));
    color: var(--text-primary, #0f172a);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    animation: alertIn .22s ease-out;
}
.alert::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 12px;
    width: 16px;
    height: 16px;
    background: var(--al-tone);
    -webkit-mask: var(--al-icon) center / contain no-repeat;
    mask: var(--al-icon) center / contain no-repeat;
}
/* A notice that is still working shows its spinner where the icon sits. */
.alert:has(> .spinner-border:first-child) { padding-left: 14px; }
.alert:has(> .spinner-border:first-child)::before { display: none; }
@keyframes alertIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.alert-success {
    --al-tone: var(--success-color, #10b981);
    --al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 14.2-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4z'/%3E%3C/svg%3E");
}
.alert-danger,
.alert-error {
    --al-tone: var(--danger-color, #ef4444);
    --al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.5 12.1-1.4 1.4-2.1-2.1-2.1 2.1-1.4-1.4 2.1-2.1-2.1-2.1 1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1z'/%3E%3C/svg%3E");
}
.alert-warning { /* pravilko-allow-amber-yellow: the Bootstrap and Django name for this kind; it renders in notice blue */
    --al-tone: var(--notice-color, #3b82f6);
    --al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22zm1 16h-2v-2h2zm0-4h-2V9h2z'/%3E%3C/svg%3E");
}
.alert-primary { --al-tone: var(--primary-color, #4f46e5); }
.alert-secondary,
.alert-light,
.alert-dark { --al-tone: var(--text-muted, #94a3b8); }

.alert a,
.alert .alert-link { color: var(--al-tone); font-weight: 600; }
.alert .alert-heading,
.alert h5,
.alert h6 { color: inherit; font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.alert > :last-child,
.alert ul:last-child,
.alert p:last-child { margin-bottom: 0; }
.alert ul { padding-left: 18px; }

/* Dismissible: a quiet close in the top right corner, drawn in the theme's text colour
   (Bootstrap's own is a black image that fades out on the light theme). */
.alert-dismissible { padding-right: 40px; }
.alert-dismissible .btn-close {
    --al-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.2 6.4 1.4 1.4-4.2 4.2 4.2 4.2-1.4 1.4-4.2-4.2-4.2 4.2-1.4-1.4 4.2-4.2-4.2-4.2 1.4-1.4 4.2 4.2z'/%3E%3C/svg%3E");
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 5px;
    background: var(--text-secondary, #475569);
    -webkit-mask: var(--al-x) center / 16px no-repeat;
    mask: var(--al-x) center / 16px no-repeat;
    filter: none;
    opacity: .7;
    box-shadow: none;
}
.alert-dismissible .btn-close:hover { opacity: 1; background: var(--text-primary, #0f172a); }
.alert-dismissible .btn-close:focus { box-shadow: none; opacity: 1; }