/* =====================================================
   AirNotez42 Notification Center
   ===================================================== */

.notification-center .app-topbar{
    margin-bottom:20px;
}

.notification-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:28px;
    border-radius:24px;
    background:
        radial-gradient(circle at top left, rgba(147,197,253,.22), transparent 34%),
        linear-gradient(135deg, rgba(43,87,179,.95), rgba(23,53,122,.92));
    border:1px solid rgba(127,179,255,.42);
    box-shadow:0 16px 36px rgba(0,0,0,.24);
    margin-bottom:24px;
}

.notification-hero h2{
    margin:0 0 8px;
    font-size:32px;
}

.notification-hero p{
    margin:0;
    color:#dbeafe;
}

.notification-hero-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(120px,1fr));
    gap:14px;
}

.notification-hero-stats div{
    text-align:center;
    padding:16px;
    border-radius:18px;
    background:rgba(79,140,255,.18);
    border:1px solid rgba(127,179,255,.32);
}

.notification-hero-stats strong{
    display:block;
    color:#fff;
    font-size:26px;
}

.notification-hero-stats span{
    display:block;
    color:#dbeafe;
    font-weight:700;
    margin-top:4px;
}

.notification-success{
    border-left:5px solid #22c55e!important;
}

.notification-error{
    border-left:5px solid #ef4444!important;
}

.notification-filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.notification-filter-row a{
    padding:10px 14px;
    border-radius:999px;
    background:rgba(79,140,255,.14);
    border:1px solid rgba(127,179,255,.3);
    color:#eaf3ff!important;
    font-weight:800;
}

.notification-filter-row a.active,
.notification-filter-row a:hover{
    background:rgba(79,140,255,.32);
    color:#fff!important;
}

.friend-request-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}

.friend-request-card{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:14px;
    align-items:center;
    padding:18px;
    border-radius:20px;
    background:rgba(79,140,255,.16);
    border:1px solid rgba(127,179,255,.32);
}

.friend-request-card img{
    width:64px;
    height:64px;
    border-radius:18px;
    object-fit:cover;
    border:1px solid rgba(127,179,255,.5);
}

.friend-request-card h3{
    margin:0;
}

.friend-request-card p{
    margin:4px 0;
}

.friend-request-card small{
    color:#c7dcff;
}

.friend-request-actions{
    grid-column:1 / -1;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

.friend-request-actions form{
    margin:0;
}

.notification-list{
    display:grid;
    gap:16px;
}

.notification-card{
    display:grid;
    grid-template-columns:58px minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    padding:18px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(43,87,179,.86), rgba(31,65,145,.86));
    border:1px solid rgba(127,179,255,.30);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    transition:.25s ease;
}

.notification-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(0,0,0,.25), 0 0 24px rgba(79,140,255,.22);
}

.notification-unread{
    border-color:rgba(134,239,172,.55);
    box-shadow:0 12px 30px rgba(0,0,0,.18), inset 4px 0 0 #22c55e;
}

.notification-read{
    opacity:.84;
}

.notification-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(79,140,255,.20);
    border:1px solid rgba(127,179,255,.36);
    font-size:28px;
}

.notification-title-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.notification-title-row h3{
    margin:0;
}

.notification-body p{
    margin:8px 0;
    line-height:1.55;
}

.notification-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.notification-meta span{
    font-size:13px;
    color:#c7dcff;
}

.notification-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.notification-type-message .notification-icon{background:rgba(96,165,250,.22);}
.notification-type-friend .notification-icon{background:rgba(34,197,94,.18);}
.notification-type-sale .notification-icon{background:rgba(250,204,21,.18);}
.notification-type-license .notification-icon{background:rgba(168,85,247,.18);}
.notification-type-guardian .notification-icon{background:rgba(14,165,233,.20);}

@media(max-width:900px){
    .notification-hero{
        display:block;
    }

    .notification-hero-stats{
        grid-template-columns:1fr;
        margin-top:18px;
    }

    .notification-card{
        grid-template-columns:1fr;
    }

    .notification-actions{
        justify-content:flex-start;
    }
}