/* ============================================================
   JOY•STORE Notifications — Frontend CSS v2
   Style glassmorphism cohérent avec JoyCoins + User System
   ============================================================ */

.joynotif-page {
    --jn-primary:       #8B0000;
    --jn-primary-dim:   rgba(139,0,0,0.10);
    --jn-primary-glow:  rgba(139,0,0,0.20);
    --jn-card:          rgba(255,255,255,0.04);
    --jn-card-unread:   rgba(139,0,0,0.09);
    --jn-border:        rgba(255,255,255,0.08);
    --jn-border-unread: rgba(139,0,0,0.28);
    --jn-text:          #ffffff;
    --jn-text-muted:    #999999;
    --jn-text-read:     #555555;
    --jn-blur:          12px;
    --jn-radius:        14px;
    --jn-radius-sm:     8px;
    --jn-transition:    0.2s cubic-bezier(0.4,0,0.2,1);

    background: transparent !important;
    color: var(--jn-text) !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 28px 20px !important;
    min-height: 60vh !important;
}

/* ── HEADER ── */
.joynotif-page__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.joynotif-page__title {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: var(--jn-text) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.joynotif-page__badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--jn-primary) !important;
    border: none !important;
}

/* ── BOUTONS ── */
.joynotif-front-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    border-radius: var(--jn-radius-sm) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all var(--jn-transition) !important;
    text-decoration: none !important;
}
.joynotif-front-btn--ghost {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--jn-border) !important;
    color: var(--jn-text-muted) !important;
    backdrop-filter: blur(var(--jn-blur)) !important;
    -webkit-backdrop-filter: blur(var(--jn-blur)) !important;
}
.joynotif-front-btn--ghost:hover {
    background: var(--jn-primary-dim) !important;
    border-color: var(--jn-primary) !important;
    color: var(--jn-text) !important;
}

/* ── FILTRES ── */
.joynotif-page__filters {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--jn-border) !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
}
.joynotif-page__filters::-webkit-scrollbar { display: none !important; }

.joynotif-filter-tab {
    padding: 7px 16px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    color: var(--jn-text-muted) !important;
    border: 1px solid var(--jn-border) !important;
    border-radius: var(--jn-radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all var(--jn-transition) !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,0.03) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    flex-shrink: 0 !important;
}
.joynotif-filter-tab:hover {
    color: var(--jn-text) !important;
    border-color: rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.06) !important;
}
.joynotif-filter-tab.active {
    background: var(--jn-primary) !important;
    color: #fff !important;
    border-color: var(--jn-primary) !important;
}
.joynotif-filter-count {
    background: rgba(0,0,0,0.3) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
}

/* ── LISTE ── */
.joynotif-page__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── CARTE base ── */
.joynotif-card {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 15px 16px !important;
    background: var(--jn-card) !important;
    border: 1px solid var(--jn-border) !important;
    border-radius: var(--jn-radius) !important;
    backdrop-filter: blur(var(--jn-blur)) !important;
    -webkit-backdrop-filter: blur(var(--jn-blur)) !important;
    transition: transform var(--jn-transition), box-shadow var(--jn-transition), background var(--jn-transition) !important;
}
.joynotif-card:hover {
    transform: translateY(-1px) !important;
    background: rgba(255,255,255,0.06) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
}

/* ── NON LUE ── légèrement teintée, bien visible */
.joynotif-card--unread {
    background: var(--jn-card-unread) !important;
    border-color: var(--jn-border-unread) !important;
    border-left: 3px solid var(--jn-primary) !important;
}
.joynotif-card--unread:hover {
    background: rgba(139,0,0,0.14) !important;
}

/* ── LUE ── plus estompée */
.joynotif-card--read {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(255,255,255,0.04) !important;
}
.joynotif-card--read .joynotif-card__title  { color: var(--jn-text-read) !important; }
.joynotif-card--read .joynotif-card__message { color: #444 !important; }

/* ── DOT PULSANT ── */
.joynotif-unread-dot {
    position: absolute !important;
    top: 13px !important; right: 13px !important;
    width: 7px !important; height: 7px !important;
    border-radius: 50% !important;
    background: var(--jn-primary) !important;
    animation: jn-pulse 2.5s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes jn-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(139,0,0,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(139,0,0,0); }
}

/* ── ICÔNE ── */
.joynotif-card__icon {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    color: var(--jn-primary) !important;
    background: var(--jn-primary-dim) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px !important;
}
.joynotif-card__icon svg {
    width: 100% !important; height: 100% !important;
    stroke: currentColor !important; fill: none !important;
}
.joynotif-card__icon-emoji {
    width: 34px !important; height: 34px !important;
    flex-shrink: 0 !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--jn-primary-dim) !important;
    border-radius: 10px !important;
}

/* ── CORPS ── */
.joynotif-card__body { flex: 1 !important; min-width: 0 !important; }
.joynotif-card__title {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--jn-text) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
}
.joynotif-card__message {
    font-size: 12px !important;
    color: var(--jn-text-muted) !important;
    line-height: 1.55 !important;
    margin: 0 0 9px 0 !important;
}
.joynotif-card__meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.joynotif-card__badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 9px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    background: var(--jn-primary) !important;
    color: #fff !important;
    border: none !important;
}
.joynotif-card__date {
    font-size: 10px !important;
    color: var(--jn-text-read) !important;
}
.joynotif-card__link {
    font-size: 11px !important;
    color: var(--jn-primary) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border: 1px solid rgba(139,0,0,0.35) !important;
    border-radius: 6px !important;
    transition: all var(--jn-transition) !important;
    background: transparent !important;
}
.joynotif-card__link:hover {
    background: var(--jn-primary-dim) !important;
    color: #fff !important;
    border-color: var(--jn-primary) !important;
}

/* ── ACTIONS ── */
.joynotif-card__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    opacity: 0 !important;
    transition: opacity var(--jn-transition) !important;
    flex-shrink: 0 !important;
}
.joynotif-card:hover .joynotif-card__actions { opacity: 1 !important; }
.joynotif-card-btn {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--jn-border) !important;
    border-radius: 7px !important;
    padding: 5px !important;
    cursor: pointer !important;
    color: var(--jn-text-muted) !important;
    transition: all var(--jn-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important; height: 28px !important;
}
.joynotif-card-btn:hover {
    color: var(--jn-text) !important;
    border-color: var(--jn-primary) !important;
    background: var(--jn-primary-dim) !important;
}
.joynotif-card-btn svg {
    width: 14px !important; height: 14px !important;
    stroke: currentColor !important; fill: none !important;
}

/* ── VIDE ── */
.joynotif-page__empty {
    text-align: center !important;
    padding: 70px 20px !important;
    color: var(--jn-text-read) !important;
}
.joynotif-page__empty-icon {
    font-size: 48px !important;
    display: block !important;
    margin-bottom: 14px !important;
    opacity: 0.35 !important;
}
.joynotif-page__empty p { font-size: 14px !important; color: var(--jn-text-read) !important; margin: 0 !important; }

/* ── NON CONNECTÉ ── */
.joynotif-page--guest {
    text-align: center !important;
    padding: 60px 40px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--jn-border) !important;
    border-radius: var(--jn-radius) !important;
    backdrop-filter: blur(var(--jn-blur)) !important;
    -webkit-backdrop-filter: blur(var(--jn-blur)) !important;
    color: var(--jn-text-muted) !important;
}

/* ── CLOCHE ── */
.joynotif-cloche-wrap { position: relative !important; display: inline-block !important; }
.joynotif-cloche-btn {
    position: relative !important;
    background: none !important; border: none !important;
    cursor: pointer !important; padding: 6px !important;
    color: inherit !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.joynotif-cloche-count {
    position: absolute !important; top: -2px !important; right: -4px !important;
    background: var(--jn-primary) !important; color: #fff !important;
    font-size: 10px !important; font-weight: 800 !important;
    padding: 1px 5px !important; border-radius: 10px !important;
    min-width: 16px !important; text-align: center !important; line-height: 1.4 !important;
    border: none !important;
}

/* ── DROPDOWN ── */
.joynotif-dropdown {
    position: absolute !important; right: 0 !important; top: calc(100% + 10px) !important;
    width: 320px !important;
    background: rgba(12,12,12,0.93) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.75) !important;
    border: 1px solid var(--jn-border) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 9999 !important; overflow: hidden !important;
}
.joynotif-dropdown__header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--jn-border) !important;
    font-size: 13px !important; font-weight: 700 !important;
    color: var(--jn-text) !important; background: transparent !important;
}
.joynotif-dropdown__mark-all {
    background: none !important; border: none !important;
    color: var(--jn-primary) !important; font-size: 11px !important;
    cursor: pointer !important; font-weight: 600 !important;
}
.joynotif-dropdown__list {
    max-height: 320px !important; overflow-y: auto !important;
    scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,0.08) transparent !important;
}
.joynotif-dropdown__item {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    cursor: pointer !important;
    transition: background var(--jn-transition) !important;
    background: transparent !important;
}
.joynotif-dropdown__item:hover { background: var(--jn-primary-dim) !important; }
.joynotif-dropdown__item-icon {
    width: 20px !important; height: 20px !important; flex-shrink: 0 !important;
    color: var(--jn-primary) !important; font-size: 18px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.joynotif-dropdown__item-icon svg {
    width: 100% !important; height: 100% !important; stroke: currentColor !important; fill: none !important;
}
.joynotif-dropdown__item-title {
    font-size: 12px !important; font-weight: 600 !important;
    color: var(--jn-text) !important; flex: 1 !important; line-height: 1.3 !important;
}
.joynotif-dropdown__item-date { font-size: 10px !important; color: var(--jn-text-read) !important; margin-top: 2px !important; }
.joynotif-dropdown__empty { padding: 28px !important; text-align: center !important; color: var(--jn-text-read) !important; font-size: 13px !important; }
.joynotif-dropdown__footer {
    padding: 12px 18px !important; border-top: 1px solid var(--jn-border) !important;
    text-align: center !important; background: transparent !important;
}
.joynotif-dropdown__footer a { font-size: 12px !important; color: var(--jn-primary) !important; font-weight: 600 !important; text-decoration: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .joynotif-page        { padding: 18px 12px !important; }
    .joynotif-page__title { font-size: 18px !important; }
    .joynotif-page__header { flex-direction: column !important; align-items: flex-start !important; }
    .joynotif-card        { padding: 12px 12px !important; gap: 10px !important; }
    .joynotif-card__actions { opacity: 1 !important; }
    .joynotif-card__title { font-size: 12px !important; }
    .joynotif-dropdown    { width: 94vw !important; right: -10px !important; }
    .joynotif-page__filters { gap: 5px !important; }
}