/* loans.css — "Needs your attention" home widget (CSP-safe, theme.css variables) */
/* Phase 3: the floating Smart Guide FAB/panel (.sg-fab/.sg-panel) has
   been removed. The same information now renders inline as a plain
   card (#needsAttentionWidget) at the top of Home. Its visual language
   (.card, .alert, .btn, .loan-actions, .form-help) already comes from
   the shared stylesheet — this file only adds the small amount of
   layout specific to the widget itself: the rolling prev/counter/next
   control row, and a light transition when the visible card changes. */

#needsAttentionWidget .loan-actions {
    align-items: center;
    justify-content: space-between;
}

#needsAttentionWidget .loan-actions .btn {
    width: auto;
}

#needsAttentionWidget .alert {
    animation: needsAttentionFade 0.25s ease;
}

@keyframes needsAttentionFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    /* style.css makes every .btn full width on small phones; keep the
       rolling controls (‹ Prev / n of total / Next ›) compact and on
       one row instead of stacking awkwardly. */
    #needsAttentionWidget .loan-actions {
        flex-wrap: nowrap;
    }
    #needsAttentionWidget .loan-actions .btn {
        flex: 0 0 auto;
    }
}