/*
 * De ce exista:
 * Acest fisier stilizeaza ecranul separat de notificari din shell-ul V2.
 *
 * Responsabilitate:
 * Pastreaza lista, sumarul si cardurile de notificari clare pe mobil, fara sa
 * aglomereze header-ul sau Profilul.
 *
 * Ce NU face:
 * Nu stilizeaza shell-ul global si nu contine reguli pentru alte ecrane.
 *
 * Depinde de:
 * layout.css, components.css si template-ul notifications.blade.php.
 */

.v2-screen--notifications {
    display: grid;
    gap: 14px;
}

.v2-notification-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(229, 231, 235, 0.96);
    box-shadow: var(--z-shadow);
}

.v2-notification-card.is-unread {
    border-color: rgba(22, 163, 74, 0.35);
    box-shadow: 0 16px 34px rgba(22, 163, 74, 0.09);
}

.v2-notification-card.is-read,
.v2-notification-card.is-empty {
    background: rgba(249, 250, 251, 0.98);
}

.v2-notification-card p {
    margin: 0;
    color: #4b5563;
    line-height: 1.55;
}

.v2-notification-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.v2-notification-card-time {
    font-size: 0.82rem;
    color: #6b7280;
}

.v2-notification-card-meta {
    font-size: 0.84rem;
    color: #6b7280;
}

.v2-notifications-summary-card .v2-muted {
    margin-top: 4px;
}

@media (max-width: 420px) {
    .v2-notification-card-top {
        flex-direction: column;
        align-items: flex-start;
    }
}