/* ============================================================
   .uk-floating-card — unified canonical floating card (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the legacy declaration in style.css:
     .floating-card + .floating-card-icon (.uk-alert / .success)
                    + .floating-card-content + -title + -text + -time
                    + page-specific positional helpers .floating-alert /
                      .floating-resolved / .floating-monitor

   Slots (BEM-normalised):
     .uk-floating-card                     root card row
       .uk-floating-card-icon              40px rounded icon box
         (tone modifiers below)
       .uk-floating-card-content           vertical stack of title + text
         .uk-floating-card-title           bold small text
         .uk-floating-card-text            muted xs body
       .uk-floating-card-time              right-aligned auto timestamp

   Icon tone modifiers (replace plain .uk-alert / .success class names):
     --alert         error-tinted (red)
     --success       success-tinted (green) — fixed: legacy was a primary-bg
                     + success-color mismatch
     (default tone is primary)

   Positioning is the consumer's job — drop a wrapper with `position: relative`
   and use inline `style="position: absolute; top: …; left: …;"` on each card.
   The legacy `.floating-alert / -resolved / -monitor` page-specific helpers
   stay in style.css for the home hero until migration time.
   ============================================================ */

.uk-floating-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* ---------- Icon ---------- */
.uk-floating-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.uk-floating-card-icon svg {
    width: 20px;
    height: 20px;
}

.uk-floating-card-icon--alert {
    background: rgba(var(--color-error-rgb), 0.12);
    color: var(--color-error);
}

.uk-floating-card-icon--success {
    background: rgba(var(--color-success-rgb), 0.12);
    color: var(--color-success);
}

/* ---------- Content ---------- */
.uk-floating-card-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.uk-floating-card-title {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--color-text);
    line-height: 1.3;
}

.uk-floating-card-text {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.uk-floating-card-time {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    margin-left: auto;
    flex-shrink: 0;
}