/* ================================================
   DMU Notify — modern dark toast
   ================================================ */

.dmu-notify {
    --dmu-notify-accent-rgb: var(--info-rgb, 41, 138, 153);
    --dmu-notify-bg: var(--background-navcolor-dark, #161616);
    --dmu-notify-text: #f3f4f6;
    --dmu-notify-muted: rgba(255, 255, 255, 0.85);
    --dmu-notify-delay: 4000ms;

    position: relative;
    display: block !important;

    width: clamp(300px, 400px, calc(100vw - 60px)) !important;
    padding: 20px 48px 20px 72px !important;
    min-height: 82px;
    margin: 0;
    box-sizing: border-box;

    background:
        linear-gradient(to right,
            rgba(var(--dmu-notify-accent-rgb), 0.22) 0%,
            rgba(var(--dmu-notify-accent-rgb), 0.06) 40%,
            transparent 70%),
        var(--dmu-notify-bg);
    color: var(--dmu-notify-text);
    border: 1px solid rgba(var(--dmu-notify-accent-rgb), 0.22);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 14px 36px rgba(0, 0, 0, 0.45);

    overflow: hidden;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Per-type accent color */
.dmu-notify--success    { --dmu-notify-accent-rgb: var(--success-rgb, 65, 139, 56); }
.dmu-notify--danger     { --dmu-notify-accent-rgb: var(--danger-rgb, 182, 40, 54); }
.dmu-notify--warning    { --dmu-notify-accent-rgb: var(--warning-rgb, 235, 183, 26); }
.dmu-notify--info       { --dmu-notify-accent-rgb: var(--info-rgb, 41, 138, 153); }
.dmu-notify--primary    { --dmu-notify-accent-rgb: var(--primary-rgb, 27, 152, 208); }
.dmu-notify--secondary  { --dmu-notify-accent-rgb: var(--secondary-rgb, 97, 198, 216); }
.dmu-notify--tertiary   { --dmu-notify-accent-rgb: var(--tertiary-rgb, 84, 205, 180); }
.dmu-notify--quaternary { --dmu-notify-accent-rgb: var(--quaternary-rgb, 77, 127, 219); }
.dmu-notify--email      { --dmu-notify-accent-rgb: var(--primary-rgb, 27, 152, 208); }

/* Icon — solid filled circle, absolute-positioned for guaranteed 20px gap on every side it touches */
.dmu-notify__icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(var(--dmu-notify-accent-rgb));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 4px 12px rgba(var(--dmu-notify-accent-rgb), 0.35);
}

.dmu-notify__icon svg,
.dmu-notify__icon i {
    width: 18px;
    height: 18px;
    stroke-width: 2.25;
}

/* Body */
.dmu-notify__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dmu-notify__title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dmu-notify-text) !important;
    letter-spacing: -0.01em;
}

.dmu-notify__message {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dmu-notify-muted) !important;
    word-wrap: break-word;
}

/* Close — subtle, brightens on hover */
.dmu-notify__close {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 !important;
    width: 28px;
    height: 28px;
    position: absolute !important;
    top: 13px !important;
    right: 13px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.40);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.dmu-notify__close:hover,
.dmu-notify__close:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    outline: none;
}

.dmu-notify__close svg,
.dmu-notify__close i {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

/* Action button — appears when dmuNotify is called with a link */
.dmu-notify__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 10px;
    padding: 7px 12px;
    background: rgba(var(--dmu-notify-accent-rgb), 0.22);
    color: var(--dmu-notify-text);
    border: 1px solid rgba(var(--dmu-notify-accent-rgb), 0.40);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
    cursor: pointer;
}

.dmu-notify__action:hover,
.dmu-notify__action:focus-visible {
    background: rgba(var(--dmu-notify-accent-rgb), 0.36);
    border-color: rgba(var(--dmu-notify-accent-rgb), 0.62);
    color: var(--dmu-notify-text);
    text-decoration: none;
    outline: none;
}

.dmu-notify__action:active {
    transform: translateY(1px);
}

.dmu-notify__action svg,
.dmu-notify__action i {
    width: 14px;
    height: 14px;
    stroke-width: 2.25;
}

/* Progress bar — thin, smooth, GPU-accelerated */
.dmu-notify__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
}

.dmu-notify__progress::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    background: rgb(var(--dmu-notify-accent-rgb));
    opacity: 0.55;
    transform-origin: left center;
    animation: dmu-notify-progress var(--dmu-notify-delay, 4000ms) linear forwards;
    will-change: transform;
}

.dmu-notify:hover .dmu-notify__progress::after,
.dmu-notify:focus-within .dmu-notify__progress::after {
    animation-play-state: paused;
}

@keyframes dmu-notify-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ================================================
   Enter / exit animations
   ================================================ */
.dmu-notify--enter {
    animation: dmu-notify-in 360ms cubic-bezier(0.21, 1.02, 0.73, 1) both;
}

.dmu-notify--leave {
    animation: dmu-notify-out 240ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes dmu-notify-in {
    0%   { transform: translate3d(24px, 0, 0) scale(0.96); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

@keyframes dmu-notify-out {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(32px, 0, 0) scale(0.96); opacity: 0; }
}

/* Reduced motion: keep functional, drop choreography */
@media (prefers-reduced-motion: reduce) {
    .dmu-notify--enter,
    .dmu-notify--leave {
        animation-duration: 1ms;
    }
    .dmu-notify__progress::after {
        animation: none;
        transform: scaleX(0);
    }
}

/* ================================================
   DMU Notify — Bell modal & notification list
   ================================================ */

/* Modal dialog — desktop width constraint.
   Overrides .modal-right.large .modal-dialog (530px) from styles.css.
   The mobile media query below uses !important too and wins by source order. */
.dmu-notify-modal .modal-dialog {
    max-width: 650px !important;
}

/* Modal header — title + icon-only action buttons (no outlines) */
.dmu-notify-modal .modal-content {
    border-radius: 18px 0 0 18px;
    overflow: hidden;
}

.dmu-notify-modal__header {
    padding: 18px 22px !important;
    align-items: center;
}

.dmu-notify-modal__bell {
    width: 18px;
    height: 18px;
    color: var(--body);
    stroke-width: 2;
}

.dmu-notify-modal__title {
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--body) !important;
    margin: 0 !important;
}

.dmu-notify-modal__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgb(var(--primary-rgb, 27, 152, 208));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

/* Header icon buttons — plain, no outline */
.dmu-notify-modal__icon-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--body-rgb, 100, 100, 100), 0.65);
    cursor: pointer;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.dmu-notify-modal__icon-btn svg,
.dmu-notify-modal__icon-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.dmu-notify-modal__icon-btn:hover,
.dmu-notify-modal__icon-btn:focus-visible {
    background: rgba(var(--separator-rgb, 0, 0, 0), 0.08);
    outline: none;
}

.dmu-notify-modal__icon-btn--primary {
    color: rgb(var(--primary-rgb, 27, 152, 208));
}

.dmu-notify-modal__icon-btn--primary:hover,
.dmu-notify-modal__icon-btn--primary:focus-visible {
    background: rgba(var(--primary-rgb, 27, 152, 208), 0.12);
    color: rgb(var(--primary-rgb, 27, 152, 208));
}

.dmu-notify-modal__icon-btn--danger {
    color: rgb(var(--danger-rgb, 220, 53, 69));
}

.dmu-notify-modal__icon-btn--danger:hover,
.dmu-notify-modal__icon-btn--danger:focus-visible {
    background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
    color: rgb(var(--danger-rgb, 220, 53, 69));
}

.dmu-notify-modal__icon-btn--danger[disabled],
.dmu-notify-modal__icon-btn--danger:disabled {
    color: rgba(var(--body-rgb, 100, 100, 100), 0.35);
    background: transparent;
    cursor: not-allowed;
    pointer-events: none;
}

.dmu-notify-modal__icon-btn--close {
    color: rgba(var(--body-rgb, 100, 100, 100), 0.55);
}

/* Filter tabs — segmented control matching .dmu-mtg-seg-item from
   templates/modules/meetings/form.php so the two surfaces feel cohesive. */
.dmu-notify-modal__filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 14px 22px 0;
    overflow: hidden;
    transition:
        max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 200ms ease,
        padding-top 280ms cubic-bezier(0.4, 0, 0.2, 1),
        padding-bottom 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated hide — replaces the old d-none toggle so the row collapses
   smoothly when one bucket empties. setFiltersVisibility() in
   notification-actions.js pins max-height to the current offsetHeight
   first so the transition has a real numeric start to interpolate from. */
.dmu-notify-modal__filters--hidden {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

.dmu-notify-modal__filter {
    appearance: none;
    margin: 0;
    padding: 10px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #4e4e4e;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.dmu-notify-modal__filter:hover {
    border-color: #d1d5db;
}

.dmu-notify-modal__filter:focus-visible {
    outline: none;
    border-color: rgb(var(--primary-rgb, 27, 152, 208));
}

.dmu-notify-modal__filter--active,
.dmu-notify-modal__filter--active:hover,
.dmu-notify-modal__filter--active:focus-visible {
    border-color: rgb(var(--primary-rgb, 27, 152, 208));
    background: rgba(var(--primary-rgb, 27, 152, 208), 0.10);
    color: rgb(var(--primary-rgb, 27, 152, 208));
}

.dmu-notify-modal__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #F8F8F8;
    color: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.dmu-notify-modal__filter--active .dmu-notify-modal__filter-count {
    background: rgb(var(--primary-rgb, 27, 152, 208));
    color: #fff;
}

/* Dark theme parity — same hooks as the meetings segmented control. */
html[data-color^="dark-"] .dmu-notify-modal__filter {
    background: var(--background-theme);
    border-color: var(--separator);
    color: var(--body);
}

html[data-color^="dark-"] .dmu-notify-modal__filter:hover {
    border-color: var(--separator-darker);
}

html[data-color^="dark-"] .dmu-notify-modal__filter--active,
html[data-color^="dark-"] .dmu-notify-modal__filter--active:hover,
html[data-color^="dark-"] .dmu-notify-modal__filter--active:focus-visible {
    background: rgba(var(--primary-rgb), 0.18);
    border-color: rgba(var(--primary-rgb), 0.6);
    color: var(--primary);
}

html[data-color^="dark-"] .dmu-notify-modal__filter-count {
    background: rgba(var(--separator-rgb), 0.5);
}

html[data-color^="dark-"] .dmu-notify-modal__filter--active .dmu-notify-modal__filter-count {
    background: rgba(var(--primary-rgb), 0.28);
    color: var(--primary);
}

/* Body */
.dmu-notify-modal__body {
    padding: 0 !important;
}

/* List crossfade for tab switches. Only active when JS adds the fading
   class; background poll refreshes call renderFiltered(false) and skip
   this entirely so the list doesn't wash out on every cycle. */
#notifications-body {
    transition: opacity 160ms ease, transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

#notifications-body.dmu-notify-body--fading {
    opacity: 0;
    transform: translateY(-4px);
}

/* Notification list — flex with per-card margin-bottom rather than gap, so
   the spacing animates down with a leaving card and there's no lingering
   gap shadow once the row collapses. */
.dmu-notify-list {
    display: flex;
    flex-direction: column;
    padding: 16px 22px;
}

/* ================================================
   Notification card
   ================================================ */
.dmu-notify-card {
    --card-accent-rgb: var(--primary-rgb, 27, 152, 208);

    background: #F8F8F8;
    border: 1px solid rgba(var(--separator-rgb, 0, 0, 0), 0.22);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
    overflow: hidden;
    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        opacity 220ms ease,
        max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 280ms cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 280ms cubic-bezier(0.4, 0, 0.2, 1),
        padding-bottom 280ms cubic-bezier(0.4, 0, 0.2, 1),
        border-width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dmu-notify-card:last-child {
    margin-bottom: 0;
}

.dmu-notify-card--unread {
    background: #F8F8F8;
    border-color: rgba(var(--separator-rgb, 0, 0, 0), 0.24);
}

/* Leaving state — driven by JS that pins the current height first, so the
   transition has a real numeric start point to interpolate from. */
.dmu-notify-card--leaving {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}

.dmu-notify-card__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Card icon — solid colored circle (unread) / muted gray (read) */
.dmu-notify-card__icon {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgb(var(--card-accent-rgb));
    transition: background-color 280ms ease, color 280ms ease;
}

.dmu-notify-card__icon svg,
.dmu-notify-card__icon i {
    width: 18px;
    height: 18px;
    stroke-width: 2.25;
}

/* Per-type accent color */
.dmu-notify-card__icon--success    { --card-accent-rgb: var(--success-rgb, 65, 139, 56); }
.dmu-notify-card__icon--danger     { --card-accent-rgb: var(--danger-rgb, 182, 40, 54); }
.dmu-notify-card__icon--warning    { --card-accent-rgb: var(--warning-rgb, 235, 183, 26); }
.dmu-notify-card__icon--info       { --card-accent-rgb: var(--info-rgb, 41, 138, 153); }
.dmu-notify-card__icon--primary    { --card-accent-rgb: var(--primary-rgb, 27, 152, 208); }
.dmu-notify-card__icon--secondary  { --card-accent-rgb: var(--secondary-rgb, 97, 198, 216); }
.dmu-notify-card__icon--tertiary   { --card-accent-rgb: var(--tertiary-rgb, 84, 205, 180); }
.dmu-notify-card__icon--quaternary { --card-accent-rgb: var(--quaternary-rgb, 77, 127, 219); }

/* Read state — gray icon, retain shape but muted */
.dmu-notify-card__icon--read {
    background: rgba(var(--separator-rgb, 0, 0, 0), 0.35) !important;
    color: rgba(var(--body-rgb, 100, 100, 100), 0.75);
}

/* Unread dot — small accent ping on the icon, nudged inward toward the center.
   Halo matches the unread card background so the dot reads as floating on the
   card surface rather than the colored icon. */
.dmu-notify-card__dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--danger-rgb, 220, 53, 69));
    box-shadow: 0 0 0 2px #F8F8F8;
    transform-origin: center;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* When a card flips to read (optimistically or via re-render), fade + shrink
   the dot. The dot may still be in the DOM if the swap was optimistic — this
   rule masks it cleanly until the next innerHTML refresh strips it. */
.dmu-notify-card--read .dmu-notify-card__dot {
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
}

/* Card main — title + message stack */
.dmu-notify-card__main {
    flex: 1;
    min-width: 0;
}

.dmu-notify-card__title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--body);
    margin-bottom: 4px;
    word-wrap: break-word;
    transition: color 280ms ease;
}

.dmu-notify-card--read .dmu-notify-card__title {
    font-weight: 500;
    color: rgba(var(--body-rgb, 100, 100, 100), 0.85);
}

.dmu-notify-card__msg {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(var(--body-rgb, 100, 100, 100), 0.72);
    word-wrap: break-word;
}

/* Card footer — time on left, actions on bottom-right */
.dmu-notify-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-left: 52px; /* aligns with main column under the icon */
}

.dmu-notify-card__time {
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(var(--body-rgb, 100, 100, 100), 0.55);
    letter-spacing: 0.01em;
}

.dmu-notify-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Action link — text + arrow, no outline, primary color */
.dmu-notify-card__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: rgb(var(--primary-rgb, 27, 152, 208));
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.dmu-notify-card__action:hover,
.dmu-notify-card__action:focus-visible {
    background: rgba(var(--primary-rgb, 27, 152, 208), 0.10);
    color: rgb(var(--primary-rgb, 27, 152, 208));
    text-decoration: none;
    outline: none;
}

.dmu-notify-card__action svg,
.dmu-notify-card__action i {
    width: 14px;
    height: 14px;
    stroke-width: 2.25;
}

/* Delete button — plain trash icon, no outline */
.dmu-notify-card__delete {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--body-rgb, 100, 100, 100), 0.45);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.dmu-notify-card__delete:hover,
.dmu-notify-card__delete:focus-visible {
    color: rgb(var(--danger-rgb, 220, 53, 69));
    background: rgba(var(--danger-rgb, 220, 53, 69), 0.10);
    outline: none;
}

.dmu-notify-card__delete svg,
.dmu-notify-card__delete i {
    width: 15px;
    height: 15px;
    stroke-width: 2.25;
}

/* Empty state */
.dmu-notify-card__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 32px;
    min-height: 300px;
}

.dmu-notify-card__empty-icon {
    margin-bottom: 14px;
    opacity: 0.3;
    color: var(--body);
}

.dmu-notify-card__empty-icon svg,
.dmu-notify-card__empty-icon i {
    width: 48px;
    height: 48px;
    stroke-width: 1.75;
}

.dmu-notify-card__empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--body);
    margin: 0 0 4px 0;
}

.dmu-notify-card__empty-msg {
    font-size: 0.8125rem;
    color: rgba(var(--body-rgb, 100, 100, 100), 0.6);
    margin: 0;
}

/* Mobile — fullscreen modal */
@media (max-width: 767.98px) {
    .dmu-notify-modal .modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .dmu-notify-modal .modal-content {
        height: 100% !important;
        min-height: 100vh;
        border-radius: 0 !important;
        border: 0 !important;
    }
}