/**
 * cockpit-laurent-home-alerts.css — Phase 4 Agent 4D.
 *
 * Plain language: styles the alerts feed on Laurent's home left
 * rail. BEM naming so tutorials / show-me DSL can target stable
 * class hooks. Uses CSS variables (var(--accent), var(--paper))
 * so the per-user theme picker (memory: feedback_portal_color_
 * approach) keeps cards in tune with the rest of Cockpit.
 */

.laurent-home-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--paper, #fafafa);
    border-radius: 8px;
}

.laurent-home-alerts__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.laurent-home-alerts__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink, #1f2328);
    letter-spacing: -0.01em;
}

.laurent-home-alerts__refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--accent, #0969da);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.laurent-home-alerts__refresh:hover {
    /* WHY: darker on hover via box-shadow rather than a different
       background — keeps the accent color the single source of
       truth so user theme picker stays clean. */
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1);
}

.laurent-home-alerts__refresh:active {
    transform: scale(0.98);
}

.laurent-home-alerts__refresh-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}

.laurent-home-alerts__refresh-icon[data-spinning="1"] {
    animation: laurent-alerts-spin 1s linear infinite;
}

@keyframes laurent-alerts-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.laurent-home-alerts__meta {
    font-size: 12px;
    color: var(--ink-muted, #57606a);
}

.laurent-home-alerts__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* -------------------------------------------------------------
   Card — one per signal.
   ------------------------------------------------------------- */

.laurent-home-alerts__card {
    border-radius: 8px;
    padding: 14px 16px;
    background: white;
    border-left: 4px solid #afb8c1;
    /* WHY: shadow rather than border on the other three sides so
       cards feel stacked rather than boxed-in. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lha-card--yellow {
    border-left-color: #d4a72c;
    background: #fffbea;
}

.lha-card--red {
    border-left-color: #cf222e;
    background: #fff1f0;
}

.lha-card--blue {
    border-left-color: #0969da;
    background: #eef6ff;
}

.laurent-home-alerts__card-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted, #57606a);
    margin-bottom: 6px;
}

.laurent-home-alerts__card-body {
    font-size: 14px;
    color: var(--ink, #1f2328);
    line-height: 1.45;
    margin: 0 0 10px 0;
}

.laurent-home-alerts__card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.laurent-home-alerts__card-primary {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    background: var(--accent, #0969da);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.laurent-home-alerts__card-primary:hover {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.1);
}

.laurent-home-alerts__card-secondary {
    padding: 8px 10px;
    background: white;
    color: var(--ink, #1f2328);
    border: 1px solid var(--border, #d0d7de);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.laurent-home-alerts__card-secondary:hover {
    background: #f6f8fa;
}

/* -------------------------------------------------------------
   Empty / loading / error states
   ------------------------------------------------------------- */

.laurent-home-alerts__empty,
.laurent-home-alerts__loading,
.laurent-home-alerts__error {
    padding: 24px 16px;
    text-align: center;
    background: white;
    border-radius: 8px;
    color: var(--ink-muted, #57606a);
}

.laurent-home-alerts__empty-icon {
    font-size: 24px;
    margin-bottom: 8px;
    color: #2da44e;
}

.laurent-home-alerts__empty-text {
    font-size: 14px;
}

.laurent-home-alerts__error {
    color: #cf222e;
    background: #fff1f0;
}

.laurent-home-alerts__support-hint {
    margin-top: 8px;
    color: var(--ink-muted, #57606a);
    font-size: 13px;
    line-height: 1.4;
}

.laurent-home-alerts__retry {
    margin-top: 10px;
    padding: 6px 14px;
    background: white;
    border: 1px solid #cf222e;
    color: #cf222e;
    border-radius: 4px;
    cursor: pointer;
}

/* -------------------------------------------------------------
   Toast
   ------------------------------------------------------------- */

.laurent-home-alerts__toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1f2328;
    color: white;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.laurent-home-alerts__toast--in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}