/* public/css/bildirimler.css */

/* Ana container */
.container {
    max-width: 800px;
    margin: 40px auto; /* üstten boşluk + ortalama */
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Bildirim listesi */
.notification-list {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-top: 20px;
    width: 100%;
}

/* Tek tek bildirim kartları */
.notification-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Son bildirimin altında boşluk olmasın */
.notification-item:last-child {
    margin-bottom: 0;
}

/* Kullanıcı profil resmi */
.user-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

/* Bildirim iç yazı */
.notification-text {
    flex: 1;
}

/* Bildirim mesajı */
.notification-item .text {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    display: block;
}

/* Bildirim zamanı */
.notification-item .notification-time {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Okundu simgesi */
.notification-item .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #007782;
    margin-left: 10px;
}

/* Okunduysa gri olsun */
.notification-item .circle.read {
    background-color: #ccc;
}

/* Bildirim üst bar */
.bildirim-ust-bar {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e0f7fa; /* Açık buz mavisi */
    padding: 10px;
    border-radius: 8px;
}

.btn-sil {
    background-color: #007782;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.btn-sil:hover {
    background-color: #005f5f;
}

.kullanici-bilgi {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-bottom: 6px;
}

.kullanici-bilgi .kullanici-ad {
    color: #333;
    margin-right: 8px;
}

.kullanici-bilgi .kullanici-satis {
    color: #007782;
    font-weight: normal;
}

/* Sayfalama (Pagination) Bölümü */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination-wrapper nav {
    display: flex;
    align-items: center;
}

.pagination-wrapper .page-item {
    margin: 0 5px;
}

.pagination-wrapper .page-link {
    color: #007782;
    border: 1px solid #dee2e6;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s;
}

.pagination-wrapper .page-item.active .page-link {
    background-color: #007782;
    color: white;
    border-color: #007782;
}

.pagination-wrapper .page-link:hover {
    background-color: #007782;
    color: white;
}

/* Tüm Bildirimler Üst Başlığı (Container dışında) */
.bildirimler-baslik {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #007782;
}

/* Mobil ve Tablet için Düzenlemeler (768px ve altı) */
@media (max-width: 768px) {
    /* Ana container */
    .container {
        margin: 10px auto;
        padding: 10px;
        max-width: 100%;
        width: 100%; /* Tam genişlik garanti */
        box-sizing: border-box; /* Padding ve border'ı genişliğe dahil et */
    }

    /* Bildirim listesi */
    .notification-list {
        padding: 10px;
        margin-top: 10px;
        width: 100%;
    }

    /* Bildirim kartları */
    .notification-item {
        padding: 10px;
        flex-direction: column; /* Dikey düzen, taşmayı önler */
        align-items: flex-start;
        width: 100%; /* Kartların genişliği tam ekran */
    }

    /* Kullanıcı profil resmi */
    .user-image {
        width: 40px;
        height: 40px;
        margin-bottom: 10px; /* Alt boşluk ekleyerek hizalamayı iyileştir */
        margin-right: 0; /* Yan boşluk sıfırlandı */
    }

    /* Bildirim metni */
    .notification-text {
        font-size: 14px;
        width: 100%; /* Metnin taşmasını önler */
        word-wrap: break-word; /* Uzun metinleri kırar */
    }

    /* Bildirim mesajı */
    .notification-item .text {
        font-size: 14px;
        width: 100%;
        word-wrap: break-word; /* Uzun link veya metinler için */
    }

    /* Bildirim zamanı */
    .notification-item .notification-time {
        font-size: 10px;
        margin-top: 5px;
    }

    /* Okundu simgesi */
    .notification-item .circle {
        width: 8px;
        height: 8px;
        margin-left: 0; /* Hizalamayı düzelt */
        margin-top: 5px; /* Altına kaydır */
    }

    /* Bildirim üst bar */
    .bildirim-ust-bar {
        flex-direction: column;
        padding: 8px;
        font-size: 12px;
        gap: 10px; /* Elemanlar arası boşluk */
        align-items: flex-start;
    }

    .btn-sil {
        padding: 6px 10px;
        font-size: 12px;
        width: 100%; /* Tam genişlik */
        text-align: center;
    }

    /* Kullanıcı bilgisi */
    .kullanici-bilgi {
        font-size: 12px;
        width: 100%;
    }

    /* Sayfalama (Pagination) */
    .pagination-wrapper .page-link {
        padding: 6px 10px;
        font-size: 12px;
        width: auto;
        display: inline-block;
    }

    /* Üst başlık */
    .bildirimler-baslik {
        font-size: 22px;
        margin-top: 10px;
        text-align: center;
    }
}

/* Çok küçük ekranlar için (576px ve altı) */
@media (max-width: 576px) {
    .notification-item {
        padding: 8px; /* Daha az padding */
    }

    .notification-text {
        font-size: 13px; /* Küçük ekranlar için daha küçük yazı */
    }

    .bildirim-ust-bar {
        gap: 5px; /* Daha az boşluk */
    }

    .btn-sil {
        padding: 5px 8px; /* Daha küçük buton */
    }
}