/* =========================================
 * HEADER - Notification & Preloader Styles
 * Tách từ includes/header.php inline
 * ========================================= */

/* --- NOTIFICATION --- */
.noti-wrapper { position: relative; margin-right: 15px; cursor: pointer; }
.noti-btn { font-size: 22px; color: var(--text-sec); transition: 0.2s; padding: 5px; }
.noti-btn:hover { color: var(--primary); }
.noti-badge { position: absolute; top: -2px; right: -2px; background: #ef4444; color: white; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-header); }
.noti-dropdown { display: none; position: absolute; top: 45px; right: -80px; width: 320px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); z-index: 1000; overflow: hidden; }
.noti-dropdown.active { display: block; animation: fadeIn 0.2s ease; }
.noti-header { padding: 12px 15px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: center; background: var(--bg-body); }
.noti-list { max-height: 350px; overflow-y: auto; }
.noti-item { padding: 12px 15px; border-bottom: 1px solid var(--border); display: block; text-decoration: none; transition: 0.2s; }
.noti-item.unread { background: #eff6ff; border-left: 3px solid var(--primary); }
.noti-item.read { background: transparent; border-left: 3px solid transparent; }
.noti-item.read:hover { background: #f8fafc; }
.noti-title { font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.noti-desc { font-size: 12px; color: var(--text-sec); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.noti-time { font-size: 10px; color: #94a3b8; margin-top: 5px; }
.noti-footer { text-align: center; padding: 10px; border-top: 1px solid var(--border); font-size: 12px; background: var(--bg-body); }
.noti-footer a { color: var(--primary); font-weight: 600; text-decoration: none; }
@media (max-width: 768px) {
    .noti-dropdown { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; max-width: none; box-shadow: 0 10px 100px rgba(0, 0, 0, 0.3); }
    .noti-dropdown::before { display: none; }
}

/* --- USER DROPDOWN --- */
.user-dropdown-wrap .dropdown-menu { width: 250px; }
@media screen and (max-width: 991px) { .pc-only { display: none; } }
@media screen and (max-width: 768px) {
    .user-dropdown-wrap .dropdown-menu {
        position: absolute;
        top: 50px;
        right: -10px;
        left: auto;
        width: 280px;
        max-height: calc(100vh - 100px);
        overflow-y: auto !important;
    }
    .user-dropdown-wrap .dropdown-menu::-webkit-scrollbar { width: 4px; }
    .user-dropdown-wrap .dropdown-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
}

/* --- PRELOADER --- */
#truyenflow-preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999;
    background: var(--bg-body, #ffffff);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#truyenflow-preloader.hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.preloader-inner { text-align: center; }
.preloader-logo {
    font-size: 56px; color: var(--primary, #4f46e5);
    margin-bottom: 20px;
    animation: preloaderPulse 1.2s ease-in-out infinite;
}
@keyframes preloaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.7; }
}
.preloader-bar {
    width: 200px; height: 4px;
    background: #e5e7eb; border-radius: 10px; overflow: hidden;
    margin: 0 auto 16px;
}
.preloader-bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--primary, #4f46e5), #818cf8);
    border-radius: 10px;
    animation: preloaderLoad 1.8s ease-in-out infinite;
}
@keyframes preloaderLoad {
    0% { width: 0%; margin-left: 0; }
    50% { width: 70%; margin-left: 0; }
    100% { width: 0%; margin-left: 100%; }
}
.preloader-text {
    font-size: 13px; color: var(--text-sec, #6b7280);
    font-weight: 500; letter-spacing: 0.5px;
}
html.dark-mode #truyenflow-preloader { background: #0f172a; }
html.dark-mode .preloader-text { color: #94a3b8; }
html.dark-mode .preloader-bar { background: #1e293b; }