/* ============================================
   ALERTS — canonical uk-alert / banner system
   New code uses .uk-alert. Legacy .callout-*,
   .info-box / .warning-box, and .trial-banner
   keep their existing rules until migrated.
   ============================================ */

/* ============================================
   Base
   ============================================ */
.uk-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-secondary);
    line-height: var(--line-relaxed);
}

.uk-alert-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.uk-alert-icon svg {
    width: var(--icon-md);
    height: var(--icon-md);
}

.uk-alert-content {
    flex: 1;
    min-width: 0;
    font-size: var(--font-md);
}

.uk-alert-title {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-md);
}

.uk-alert-content > p {
    margin: 0;
}

.uk-alert-content > p + p {
    margin-top: var(--space-sm);
}

/* ============================================
   Variants — semantic color tints
   Each sets bg, border, icon color, and
   colors the optional .uk-alert-title.
   ============================================ */
.uk-alert--tip {
    background: rgba(var(--color-primary-rgb), 0.06);
    border-color: rgba(var(--color-primary-rgb), 0.25);
}
.uk-alert--tip .uk-alert-icon { color: var(--color-primary-light); }
.uk-alert--tip .uk-alert-title { color: var(--color-primary-light); }

.uk-alert--info {
    background: rgba(var(--color-info-rgb), 0.06);
    border-color: rgba(var(--color-info-rgb), 0.25);
}
.uk-alert--info .uk-alert-icon { color: var(--color-info); }
.uk-alert--info .uk-alert-title { color: var(--color-info); }

.uk-alert--warning {
    background: rgba(var(--color-warning-rgb), 0.06);
    border-color: rgba(var(--color-warning-rgb), 0.3);
}
.uk-alert--warning .uk-alert-icon { color: var(--color-warning); }
.uk-alert--warning .uk-alert-title { color: var(--color-warning); }

.uk-alert--success {
    background: rgba(var(--color-success-rgb), 0.06);
    border-color: rgba(var(--color-success-rgb), 0.25);
}
.uk-alert--success .uk-alert-icon { color: var(--color-success); }
.uk-alert--success .uk-alert-title { color: var(--color-success); }

.uk-alert--error {
    background: rgba(var(--color-error-rgb), 0.06);
    border-color: rgba(var(--color-error-rgb), 0.3);
}
.uk-alert--error .uk-alert-icon { color: var(--color-error); }
.uk-alert--error .uk-alert-title { color: var(--color-error); }

.uk-alert--maintenance {
    background: rgba(var(--color-maintenance-rgb), 0.06);
    border-color: rgba(var(--color-maintenance-rgb), 0.3);
}
.uk-alert--maintenance .uk-alert-icon { color: var(--color-maintenance); }
.uk-alert--maintenance .uk-alert-title { color: var(--color-maintenance); }

/* Neutral — explicit name for the default tone-less look. Useful
   when the uk-alert is informational but should not pull color emphasis
   away from the surrounding content. */
.uk-alert--neutral {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--color-border);
}
.uk-alert--neutral .uk-alert-icon { color: var(--color-text-muted); }
.uk-alert--neutral .uk-alert-title { color: var(--color-text); }

/* ============================================
   Inline link inside the uk-alert body
   Uses the same tinted underline treatment as .form-note
   so the styling reads as consistent across the site;
   the colour follows whichever tone the uk-alert is in.
   ============================================ */
.uk-alert-link {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.45);
    transition: border-color 0.15s ease;
}

.uk-alert-link:hover,
.uk-alert-link:focus-visible {
    border-bottom-color: var(--color-primary);
}

.uk-alert--info .uk-alert-link { color: var(--color-info); border-bottom-color: rgba(var(--color-info-rgb), 0.45); }
.uk-alert--info .uk-alert-link:hover { border-bottom-color: var(--color-info); }
.uk-alert--success .uk-alert-link { color: var(--color-success); border-bottom-color: rgba(var(--color-success-rgb), 0.45); }
.uk-alert--success .uk-alert-link:hover { border-bottom-color: var(--color-success); }
.uk-alert--warning .uk-alert-link { color: var(--color-warning); border-bottom-color: rgba(var(--color-warning-rgb), 0.45); }
.uk-alert--warning .uk-alert-link:hover { border-bottom-color: var(--color-warning); }
.uk-alert--error .uk-alert-link { color: var(--color-error); border-bottom-color: rgba(var(--color-error-rgb), 0.45); }
.uk-alert--error .uk-alert-link:hover { border-bottom-color: var(--color-error); }
.uk-alert--maintenance .uk-alert-link { color: var(--color-maintenance); border-bottom-color: rgba(var(--color-maintenance-rgb), 0.45); }
.uk-alert--maintenance .uk-alert-link:hover { border-bottom-color: var(--color-maintenance); }
.uk-alert--neutral .uk-alert-link { color: var(--color-text); border-bottom-color: rgba(255, 255, 255, 0.3); }
.uk-alert--neutral .uk-alert-link:hover { border-bottom-color: var(--color-text); }

/* ============================================
   Action slot — CTA buttons at the end of the body
   Use inside .uk-alert-content after the prose.
   ============================================ */
.uk-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.uk-alert-actions .btn {
    flex-shrink: 0;
}

/* ============================================
   Compact size — for tight inline notices
   Smaller padding, smaller icon, sm font.
   ============================================ */
.uk-alert--compact {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
    border-radius: var(--radius-md);
    line-height: var(--line-normal);
}

.uk-alert--compact .uk-alert-icon {
    margin-top: 1px;
}

.uk-alert--compact .uk-alert-icon svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.uk-alert--compact .uk-alert-content {
    font-size: var(--font-sm);
}

.uk-alert--compact .uk-alert-title {
    font-size: var(--font-sm);
    margin-bottom: 2px;
}

.uk-alert--compact .uk-alert-actions {
    margin-top: var(--space-sm);
}

/* ============================================
   Banner modifier — wider, centered, larger icon
   For section-level promotional or status banners
   (canonical replacement for .trial-banner).
   ============================================ */
.uk-alert--banner {
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-xl);
}

.uk-alert--banner .uk-alert-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid currentColor;
    margin-top: 0;
    /* tone the border down — currentColor tinted by alpha via filter is overkill;
       keep it simple: rely on per-variant override below */
}

.uk-alert--banner.uk-alert--tip .uk-alert-icon {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

.uk-alert--banner.uk-alert--info .uk-alert-icon {
    background: rgba(var(--color-info-rgb), 0.12);
    border-color: rgba(var(--color-info-rgb), 0.3);
}

.uk-alert--banner.uk-alert--warning .uk-alert-icon {
    background: rgba(var(--color-warning-rgb), 0.12);
    border-color: rgba(var(--color-warning-rgb), 0.3);
}

.uk-alert--banner.uk-alert--success .uk-alert-icon {
    background: rgba(var(--color-success-rgb), 0.12);
    border-color: rgba(var(--color-success-rgb), 0.3);
}

.uk-alert--banner.uk-alert--error .uk-alert-icon {
    background: rgba(var(--color-error-rgb), 0.12);
    border-color: rgba(var(--color-error-rgb), 0.3);
}

.uk-alert--banner .uk-alert-icon svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

@media (max-width: 640px) {
    .uk-alert--banner {
        padding: var(--space-md);
    }
}