/* ==========================================================================
   Notifications UI — bell, dropdown, login popup, toasts
   Used by base.html (light) and admin/base.html (dark)
   ========================================================================== */

.bell-wrap {
    position: relative;
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
}

.bell-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 18px;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.bell-btn:hover,
.bell-btn:focus {
    background: rgba(0, 0, 0, 0.06);
    color: #fcb040;
    outline: none;
}
.bell-btn.dark { color: #e7e7ea; }
.bell-btn.dark:hover { background: rgba(255, 255, 255, 0.08); color: #fcb040; }

.bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e03131;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
.bell-badge.hidden { display: none; }
.bell-btn.dark + .bell-badge,
.bell-wrap.dark .bell-badge { box-shadow: 0 0 0 2px #1f2430; }

/* Dropdown panel */
.bell-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 480px;
    background: #fff;
    color: #222;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: notifFadeIn 0.14s ease-out;
}
.bell-dropdown.open { display: flex; }
.bell-dropdown.dark {
    background: #242a38;
    color: #e7e7ea;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

@keyframes notifFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bell-dropdown.dark .notif-header { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* [2026-06-10] Color moved here from an inline style in base.html /
   admin/base.html so the Nautilus palette (theme.css) can override it.
   Inline styles can't be themed without !important. */
.notif-header a[data-action="mark-all"] { color: #fcb040; }

.notif-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.1s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.notif-item:hover { background: rgba(252, 176, 64, 0.08); }
.bell-dropdown.dark .notif-item { border-bottom-color: rgba(255, 255, 255, 0.05); }
.bell-dropdown.dark .notif-item:hover { background: rgba(252, 176, 64, 0.1); }

.notif-item.unread { background: rgba(252, 176, 64, 0.06); }
.notif-item.unread::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #fcb040;
}

.notif-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(252, 176, 64, 0.15);
    color: #fcb040;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.notif-body-wrap { flex: 1; min-width: 0; }
.notif-title {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 2px 0;
    line-height: 1.3;
}
.notif-body {
    font-size: 12px;
    color: #666;
    margin: 0 0 4px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bell-dropdown.dark .notif-body { color: #a8afbd; }

.notif-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: #888;
}
.bell-dropdown.dark .notif-meta { color: #8b92a3; }

.notif-segment {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bell-dropdown.dark .notif-segment { background: rgba(255, 255, 255, 0.08); color: #c3cad9; }

.notif-empty {
    padding: 32px 16px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
.notif-empty i {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.notif-footer {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
}
.bell-dropdown.dark .notif-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}
.notif-footer a {
    flex: 1;
    padding: 10px 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #fcb040;
    text-decoration: none;
    transition: background 0.1s ease;
    cursor: pointer;
}
.notif-footer a:hover { background: rgba(252, 176, 64, 0.1); }
.notif-footer a + a { border-left: 1px solid rgba(0, 0, 0, 0.06); }
.bell-dropdown.dark .notif-footer a + a { border-left-color: rgba(255, 255, 255, 0.08); }

/* Login popup */
.notif-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, 0.55);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.notif-popup-overlay.open { display: flex; }

.notif-popup-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 480px;
}

.notif-popup-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    padding: 20px 22px;
    position: relative;
    animation: popupSlideIn 0.25s ease-out;
}
@keyframes popupSlideIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-popup-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.notif-popup-close:hover { background: rgba(0,0,0,0.05); color: #333; }

.notif-popup-title {
    margin: 0 30px 8px 0;
    font-size: 17px;
    font-weight: 700;
    color: #222;
    display: flex;
    align-items: center;
    gap: 10px;
}
.notif-popup-title i { color: #fcb040; }
.notif-popup-body {
    margin: 0 0 14px 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.notif-popup-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.notif-popup-actions a,
.notif-popup-actions button {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
}
.notif-popup-primary {
    background: #fcb040;
    color: #fff;
}
.notif-popup-primary:hover { background: #e89a2b; }
.notif-popup-secondary {
    background: transparent;
    color: #666;
}
.notif-popup-secondary:hover { background: rgba(0,0,0,0.05); }

@media (max-width: 768px) {
    /* Pin to the viewport, not to the bell button. The bell sits mid-topbar
     * (left of the user avatar), so anchoring to its right edge leaves the
     * dropdown half off-screen. position: fixed lets us hug the actual
     * viewport edge regardless of where the trigger lives. The top offset
     * adds safe-area-inset-top so installed-PWA mode on iPhone with the
     * notch doesn't bury the dropdown header under the status bar. */
    .bell-dropdown {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0) + 64px);
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        max-height: 70vh;
    }
}

/* Admin-only: anchor the dropdown to the right of the sidebar instead of
   to the bell's right edge. At widths ≥ 1025px the admin sidebar is 260px
   wide; the dropdown sits just inside the content area so it doesn't
   visually overlap the dark sidebar regardless of where the bell lives
   in the topbar. Below 1025px the admin sidebar is hidden (admin.css
   media rule) so the default right-anchored positioning is fine. */
@media (min-width: 1025px) {
    .admin-topbar .bell-dropdown {
        position: fixed;
        top: 70px;
        left: 270px;
        right: auto;
        width: 380px;
        max-width: calc(100vw - 280px);
        max-height: calc(100vh - 90px);
    }
}