:root {
    --bg: #e8f3ee;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-strong: rgba(255, 255, 255, 0.92);
    --ink: #17262d;
    --ink-soft: #5f7278;
    --ink-faint: rgba(23, 38, 45, 0.52);
    --accent: #ff6f5a;
    --accent-deep: #e95843;
    --mint: #67c6a3;
    --mint-deep: #2f7b64;
    --line: rgba(145, 190, 177, 0.34);
    --safe-top: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; min-height: 100%; }

body {
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 32%),
        linear-gradient(180deg, #edf6f1 0%, #dceee7 100%);
}

.page-notifications {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Screen ──────────────────────────────────────────────── */
.notifications-screen {
    --pavilla-shell-pad-x: clamp(1rem, 5vw, 2rem);
    position: relative;
    width: min(100%, 720px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 0 var(--pavilla-shell-pad-x) 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

/* ── Fixed top nav ───────────────────────────────────────── */
.notifications-top {
    color: var(--ink);
}

.notifications-nav-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.notifications-nav-group-start { justify-self: start; }
.notifications-nav-group-end   { justify-self: end; }

.notifications-message-link,
.notifications-notifications-link,
.notifications-explore-link,
.notifications-profile-link { display: inline-flex; }

.notifications-center { justify-self: center; }

.notifications-title {
    font-size: clamp(1.22rem, 4vw, 1.95rem);
    font-weight: 800;
    letter-spacing: 0.01em;
}

.notifications-icon {
    width: clamp(26px, 7vw, 36px);
    height: auto;
}

.notifications-icon.is-active { width: clamp(34px, 9vw, 44px); }

.notifications-notifications-link .notifications-icon,
.notifications-message-link .notifications-icon {
    filter: brightness(0) saturate(100%) invert(67%) sepia(53%) saturate(5340%) hue-rotate(329deg) brightness(102%) contrast(101%);
}

.notifications-notifications-link .notifications-icon {
    margin-left: 0.35rem;
}

.notifications-explore {
    width: clamp(30px, 7.8vw, 46px);
    height: auto;
    margin-right: 0.35rem;
}

/* ── Page head ───────────────────────────────────────────── */
.notifications-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notifications-back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(145, 190, 177, 0.38);
    background: rgba(255, 255, 255, 0.84);
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(24, 39, 48, 0.06);
}

.notifications-heading {
    flex: 1;
    font-size: clamp(1.3rem, 4.4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.1;
}

.notifications-mark-all-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.46rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 111, 90, 0.28);
    background: rgba(255, 255, 255, 0.86);
    color: var(--accent-deep);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

/* ── Filter pills ────────────────────────────────────────── */
.notifications-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.55rem;
    padding: 0.1rem 0 0.3rem;
}

.notifications-filters::-webkit-scrollbar { display: none; }

.notifications-filter {
    flex-shrink: 0;
    border: 1px solid rgba(145, 190, 177, 0.42);
    background: rgba(255, 255, 255, 0.78);
    color: #405960;
    border-radius: 999px;
    padding: 0.52rem 0.96rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.notifications-filter.is-active {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(233, 88, 67, 0.18);
}

/* ── Empty state ─────────────────────────────────────────── */
.notifications-empty {
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(24, 39, 48, 0.07);
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    padding: 1.5rem 1.15rem;
    text-align: center;
}

.notifications-empty[hidden] { display: none !important; }

.notifications-empty-title {
    font-size: 1.05rem;
    font-weight: 800;
}

.notifications-empty-copy {
    color: var(--ink-soft);
    line-height: 1.5;
    max-width: 40ch;
}

.notifications-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.notifications-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #fffaf8;
    box-shadow: 0 8px 18px rgba(233, 88, 67, 0.18);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.notifications-cta-secondary {
    background: rgba(26, 39, 48, 0.06);
    color: #40545d;
    box-shadow: none;
}

/* ── Notification list ───────────────────────────────────── */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.notifications-group {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(24, 39, 48, 0.07);
    padding: 0.82rem;
    display: grid;
    gap: 0.6rem;
}

.notifications-group-list { display: grid; gap: 0.45rem; }

.notifications-group-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ── Notification card ───────────────────────────────────── */
.notification-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 0.7rem;
    align-items: center;
    padding: 0.65rem 0.82rem;
    border-radius: 12px;
    background: var(--surface-strong);
    border: 1px solid rgba(145, 190, 177, 0.22);
    box-shadow: 0 1px 4px rgba(24, 39, 48, 0.04);
    cursor: pointer;
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.notification-card.is-unread {
    border-color: rgba(255, 111, 90, 0.28);
    box-shadow: 0 2px 8px rgba(233, 88, 67, 0.07);
}

.notification-card.is-birthday {
    background: linear-gradient(145deg, rgba(255, 255, 247, 0.96), rgba(255, 244, 225, 0.94));
    border-color: rgba(255, 184, 74, 0.32);
}

.notification-card:focus-visible {
    outline: 2.5px solid #ff715e;
    outline-offset: 3px;
}

.notification-copy { display: grid; gap: 0.18rem; }

.notification-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.36rem;
}

.notification-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}

.notification-card.is-birthday .notification-title { color: #8f4d16; }

.notification-pill {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 0.08rem 0.44rem;
    border-radius: 999px;
    background: rgba(26, 39, 48, 0.07);
    color: #52626a;
    font-size: 0.6rem;
    font-weight: 700;
}

.notification-pill.is-unread {
    background: rgba(255, 111, 90, 0.12);
    color: #b14a3b;
}

.notification-card.is-birthday .notification-pill {
    background: rgba(255, 184, 74, 0.14);
    color: #a35a14;
}

.notification-text {
    color: var(--ink-soft);
    line-height: 1.42;
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-card.is-birthday .notification-text { color: #6f5a46; }

.notification-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.32rem;
}

.notification-time {
    color: var(--ink-soft);
    font-size: 0.68rem;
    white-space: nowrap;
}

.notification-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 111, 90, 0.1);
}

.notification-card[data-kind="connections"] .notification-dot {
    background: var(--mint);
    box-shadow: 0 0 0 4px rgba(103, 198, 163, 0.12);
}

.notification-card:not(.is-unread) .notification-dot {
    background: rgba(26, 39, 48, 0.14);
    box-shadow: none;
}

/* ── Toast ───────────────────────────────────────────────── */
.notifications-toast {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translate(-50%, 12px);
    background: rgba(23, 38, 45, 0.82);
    color: #fff;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 1000;
}

.notifications-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ── Notification preview modal ─────────────────────────── */
.notifications-preview {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.notifications-preview[hidden] { display: none !important; }

.notifications-preview-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(228, 239, 234, 0.68);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.notifications-preview-card {
    position: relative;
    z-index: 1;
    width: min(92vw, 370px);
    border-radius: 20px;
    padding: 0.95rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(244, 251, 248, 0.93));
    border: 1px solid rgba(145, 190, 177, 0.26);
    box-shadow: 0 14px 36px rgba(24, 39, 48, 0.13);
    display: grid;
    gap: 0.6rem;
}

/* drag handle — mobile sheet only */
.notifications-preview-card::before {
    content: '';
    display: none;
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: rgba(23, 38, 45, 0.13);
    margin: 0 auto 0.15rem;
}

.notifications-preview-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(236, 245, 241, 0.96);
    color: #30444d;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notifications-preview-kicker {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(71, 104, 98, 0.8);
    padding-right: 2rem;
}

.notifications-preview-title {
    font-size: clamp(1rem, 4vw, 1.22rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ink);
}

.notifications-preview-text {
    font-size: 0.88rem;
    line-height: 1.52;
    color: var(--ink-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.notifications-preview-meta {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.notifications-preview-pill,
.notifications-preview-time {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0.1rem 0.48rem;
    border-radius: 999px;
    background: rgba(145, 190, 177, 0.12);
    color: #466069;
    font-size: 0.67rem;
    font-weight: 700;
}

.notifications-preview-actions { display: grid; gap: 0.42rem; }

.notifications-preview-open,
.notifications-preview-mark {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.notifications-preview-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(135deg, #ff7a60, #ff5f47);
    color: #fff7f3;
    box-shadow: 0 8px 18px rgba(255, 122, 96, 0.18);
}

.notifications-preview-mark {
    background: rgba(236, 245, 241, 0.92);
    color: #2e454d;
    border: 1px solid rgba(145, 190, 177, 0.22);
}

.notifications-credit {
    text-align: center;
    color: rgba(255, 113, 94, 0.85);
    font-size: clamp(0.72rem, 2vw, 0.9rem);
}

body.is-notification-preview-open { overflow: hidden; }

/* ── Hover ───────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .notifications-cta:hover,
    .notifications-mark-all-btn:hover,
    .notifications-filter:hover,
    .notifications-preview-open:hover,
    .notifications-preview-mark:hover,
    .notifications-preview-close:hover,
    .notification-card:hover { transform: translateY(-1px); }

    .notification-card:hover {
        box-shadow: 0 4px 12px rgba(24, 39, 48, 0.09);
    }
}

/* ── Mobile bottom-sheet modal ───────────────────────────── */
@keyframes notif-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (max-width: 580px) {
    .notifications-preview {
        align-items: flex-end;
        padding: 0;
    }

    .notifications-preview-card {
        width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 0.55rem 1rem max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
        animation: notif-sheet-up 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .notifications-preview-card::before {
        display: block;
    }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width: 1024px) {
    .notifications-screen {
        width: min(100%, 860px);
        padding: calc(clamp(1.2rem, 3vh, 2rem) + 3.8rem) clamp(2rem, 7vw, 4rem) 1.6rem;
    }
}

@media (max-width: 720px) {
    .notifications-screen {
        gap: 0.75rem;
        padding:
            0
            0.95rem
            1rem;
    }

    .notifications-top {
        gap: 0.55rem;
        padding: 0.52rem 0.95rem;
    }

    .notifications-nav-group { gap: 0.8rem; }

    .notifications-title { font-size: 1.6rem; }
}

@media (max-width: 420px) {
    .notifications-screen {
        gap: 0.7rem;
        padding:
            0
            0.82rem
            0.9rem;
    }

    .notifications-top { padding: 0.4rem 0.82rem; }
    .notifications-nav-group { gap: 0.6rem; }
    .notifications-icon { width: 30px; }
    .notifications-explore { width: 32px; margin-right: 0; }
    .notifications-title { font-size: 1.18rem; }
    .notifications-heading { font-size: 1.15rem; }

    .notifications-filter,
    .notifications-cta { min-height: 40px; }

    .notification-card,
    .notifications-empty { border-radius: 12px; padding: 0.58rem 0.72rem; }

    .notifications-filters { gap: 0.42rem; }
}

/* ── Dark theme ──────────────────────────────────────────── */
body.theme-super-admin .notifications-top,
body.theme-super-admin .notifications-empty,
body.theme-super-admin .notifications-group,
body.theme-super-admin .notification-card {
    background: linear-gradient(160deg, rgba(12, 18, 25, 0.96), rgba(18, 26, 34, 0.9)) !important;
    border-color: rgba(160, 200, 190, 0.14) !important;
    box-shadow: 0 8px 20px rgba(2, 8, 12, 0.22) !important;
}

body.theme-super-admin .notifications-back,
body.theme-super-admin .notifications-mark-all-btn,
body.theme-super-admin .notifications-filter {
    background: rgba(18, 26, 34, 0.92) !important;
    border-color: rgba(160, 200, 190, 0.14) !important;
    color: #d9f0ec !important;
}

body.theme-super-admin .notifications-mark-all-btn { color: #ffcabd !important; }

body.theme-super-admin .notifications-filter.is-active {
    background: linear-gradient(135deg, #ff7a60, #ff5f47) !important;
    border-color: transparent !important;
    color: #fff7f3 !important;
}

body.theme-super-admin .notifications-cta {
    background: linear-gradient(135deg, #ff7a60, #ff5f47) !important;
    color: #fff7f3 !important;
}

body.theme-super-admin .notifications-preview-backdrop {
    background: rgba(4, 8, 12, 0.88);
}

body.theme-super-admin .notifications-preview-card {
    background: linear-gradient(160deg, rgba(12, 18, 25, 0.98), rgba(18, 26, 34, 0.96));
    border-color: rgba(160, 200, 190, 0.14);
}

body.theme-super-admin .notifications-preview-title,
body.theme-super-admin .notifications-preview-text,
body.theme-super-admin .notifications-preview-pill,
body.theme-super-admin .notifications-preview-time { color: #d9f0ec !important; }

body.theme-super-admin .notifications-preview-mark {
    background: rgba(18, 26, 34, 0.96);
    border-color: rgba(160, 200, 190, 0.14);
    color: #d9f0ec;
}

body.theme-super-admin .notification-title,
body.theme-super-admin .notification-text,
body.theme-super-admin .notification-pill,
body.theme-super-admin .notifications-empty-title,
body.theme-super-admin .notifications-empty-copy { color: #d9f0ec !important; }

body.theme-super-admin .notification-card.is-unread {
    border-color: rgba(255, 111, 90, 0.28) !important;
}

@media (max-width: 820px) {
    .notifications-top,
    .notifications-group,
    .notification-card,
    .notifications-preview-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .notifications-message-link .notifications-icon,
    .notifications-notifications-link .notifications-icon {
        filter: brightness(0) saturate(100%) invert(67%) sepia(53%) saturate(5340%) hue-rotate(329deg) brightness(102%) contrast(101%) !important;
    }
}

.notifications-top.pavilla-shared-topbar {
    position: sticky !important;
    top: 0 !important;
}

.notifications-head {
    justify-content: space-between;
}

.notifications-heading {
    flex: initial;
}

/* ── Touch optimizations ── */
.notifications-filter,
.notification-card,
.notifications-mark-all-btn,
.notifications-cta,
.notifications-back,
.notifications-preview-open,
.notifications-preview-mark,
.notifications-preview-close { touch-action: manipulation; }

/* ── Skeleton loading ──────────────────────────────────────── */
@keyframes nsk-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.nsk-line {
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(145, 190, 177, 0.13) 25%,
        rgba(145, 190, 177, 0.28) 50%,
        rgba(145, 190, 177, 0.13) 75%
    );
    background-size: 200% 100%;
    animation: nsk-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
    display: block;
}

.nsk-group-title { height: 11px; width: 52px; margin-bottom: 0.3rem; }
.nsk-title       { height: 13px; flex: 1; min-width: 0; }
.nsk-pill        { height: 18px; width: 56px; border-radius: 999px; }
.nsk-text        { height: 11px; width: 82%; }
.nsk-text-b      { height: 11px; width: 60%; }
.nsk-time        { height: 10px; width: 38px; }

.nsk-topline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nsk-copy {
    display: flex;
    flex-direction: column;
    gap: 0.44rem;
    flex: 1;
    min-width: 0;
}

.nsk-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}

body.theme-super-admin .nsk-line {
    background: linear-gradient(
        90deg,
        rgba(160, 200, 190, 0.08) 25%,
        rgba(160, 200, 190, 0.18) 50%,
        rgba(160, 200, 190, 0.08) 75%
    );
    background-size: 200% 100%;
    animation: nsk-shimmer 1.5s ease-in-out infinite;
}