/**
 * Notification Panel Styles
 * ========================
 * BEM structure for notification center components
 * Used by: app-header.php, resident-header.php
 */

/* ===== Panel Container ===== */
.notification-panel {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgb(228 228 231);
    /* zinc-200 */
}

.dark .notification-panel {
    border-color: rgb(39 39 42);
    /* zinc-800 */
}

/* Force visibility classes */
.notification-panel--force-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.notification-panel--force-hidden {
    display: none !important;
}

/* ===== CRITICAL: Force Positioning (Fix for expanding header) ===== */
/* Force absolute positioning for desktop panel when visible */
.notification-panel[data-variant="desktop"].notification-panel--force-visible {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 10000 !important;
    margin-top: 0.75rem !important;
    width: 24rem !important;
    border-bottom: 1px solid rgb(244 244 245);
    /* zinc-100 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(250 250 250 / 0.5);
    /* zinc-50/50 */
}

.notification-panel__header--styled {
    background: rgb(250 250 250 / 0.5);
}

.dark .notification-panel__header,
.dark .notification-panel__header--styled {
    border-bottom-color: rgb(39 39 42);
    /* zinc-800 */
    background: rgb(39 39 42 / 0.5);
    /* zinc-800/50 */
}

.notification-panel__header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ===== Title ===== */
.notification-panel__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(24 24 27);
    /* zinc-900 */
}

.dark .notification-panel__title {
    color: white;
}

.notification-panel__title-icon {
    color: rgb(59 130 246);
    /* blue-500 */
    font-size: 0.875rem;
}

.notification-panel__count-badge {
    background: rgb(219 234 254);
    /* blue-100 */
    color: rgb(29 78 216);
    /* blue-700 */
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}

.dark .notification-panel__count-badge {
    background: rgb(30 58 138 / 0.3);
    /* blue-900/30 */
    color: rgb(147 197 253);
    /* blue-300 */
}

/* ===== Action Buttons ===== */
.notification-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.notification-panel__action-btn {
    padding: 0.375rem;
    color: rgb(161 161 170);
    /* zinc-400 */
    border-radius: 0.375rem;
    transition: all 0.2s;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-panel__action-btn:hover {
    color: rgb(82 82 91);
    /* zinc-600 */
    background: rgb(244 244 245);
    /* zinc-100 */
}

.dark .notification-panel__action-btn:hover {
    color: rgb(212 212 216);
    /* zinc-300 */
    background: rgb(63 63 70);
    /* zinc-700 */
}

.notification-panel__action-btn--muted {
    color: rgb(59 130 246);
    /* blue-500 */
}

.notification-panel__close-btn:hover {
    color: rgb(239 68 68);
    /* red-500 */
    background: rgb(254 226 226);
    /* red-100 */
}

.dark .notification-panel__close-btn:hover {
    color: rgb(248 113 113);
    /* red-400 */
    background: rgb(127 29 29 / 0.3);
    /* red-900/30 */
}

/* ===== Notification List ===== */
.notification-panel__list {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.notification-panel__list[data-loading="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.notification-panel__list[data-empty="true"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* ===== Empty State ===== */
.notification-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: rgb(113 113 122);
    /* zinc-500 */
    text-align: center;
}

.dark .notification-panel__empty {
    color: rgb(161 161 170);
    /* zinc-400 */
}

.notification-panel__empty-icon {
    margin-bottom: 0.5rem;
    opacity: 0.5;
    font-size: 1.5rem;
}

.notification-panel__empty-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.notification-panel__empty-subtext {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* ===== Footer ===== */
.notification-panel__footer {
    padding: 0.5rem;
    border-top: 1px solid rgb(244 244 245);
    /* zinc-100 */
    background: rgb(250 250 250);
    /* zinc-50 */
    text-align: center;
}

.notification-panel__footer--styled {
    background: rgb(250 250 250);
}

.dark .notification-panel__footer,
.dark .notification-panel__footer--styled {
    border-top-color: rgb(39 39 42);
    /* zinc-800 */
    background: rgb(39 39 42 / 0.3);
    /* zinc-800/30 */
}

.notification-panel__footer-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(37 99 235);
    /* blue-600 */
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: color 0.2s;
}

.notification-panel__footer-link:hover {
    color: rgb(29 78 216);
    /* blue-700 */
}

.dark .notification-panel__footer-link {
    color: rgb(96 165 250);
    /* blue-400 */
}

.dark .notification-panel__footer-link:hover {
    color: rgb(147 197 253);
    /* blue-300 */
}

.notification-panel__footer-link i {
    font-size: 0.625rem;
}

/* ===== Notification Item ===== */
.notification-item {
    position: relative;
    padding: 0.75rem;
    border-bottom: 1px solid rgb(244 244 245);
    /* zinc-100 */
    cursor: pointer;
    transition: background-color 0.2s;
    overflow: hidden;
}

.notification-item:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .notification-item:hover {
        background-color: rgb(250 250 250);
        /* zinc-50 */
    }
}

.dark .notification-item {
    border-bottom-color: rgb(39 39 42);
    /* zinc-800 */
}

@media (hover: hover) {
    .dark .notification-item:hover {
        background-color: rgb(39 39 42);
        /* zinc-800 */
    }
}

.notification-item--styled {
    /* Applied by JS - additional styling if needed */
    contain: content;
}

.notification-item--read {
    opacity: 0.6;
}

@media (hover: hover) {
    .notification-item--read:hover {
        opacity: 0.8;
    }
}

/* ===== Item Glow Effect ===== */
.notification-item__glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

@media (hover: hover) {
    .notification-item:hover .notification-item__glow {
        opacity: 1;
    }
}

/* ===== Mark Toggle Button ===== */
.notification-item__mark-toggle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem;
    color: rgb(161 161 170);
    /* zinc-400 */
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    font-size: 0.75rem;
    z-index: 10;
}

.notification-item:hover .notification-item__mark-toggle,
.notification-item:focus-within .notification-item__mark-toggle {
    opacity: 1;
}

.notification-item__mark-toggle:hover {
    color: rgb(59 130 246);
    /* blue-500 */
    background: rgb(239 246 255);
    /* blue-50 */
}

.dark .notification-item__mark-toggle:hover {
    color: rgb(96 165 250);
    /* blue-400 */
    background: rgb(30 58 138 / 0.3);
    /* blue-900/30 */
}

/* ===== Item Content ===== */
.notification-item__content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* ===== Icon Wrapper ===== */
.notification-item__icon-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-item__icon-wrapper--styled {
    /* Applied by JS */
    contain: content;
}

.notification-item__icon-bg {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: rgb(239 246 255);
    /* blue-50 */
}

.dark .notification-item__icon-bg {
    background: rgb(30 58 138 / 0.3);
    /* blue-900/30 */
}

.notification-item--critical .notification-item__icon-bg {
    background: rgb(254 226 226);
    /* red-100 */
}

.dark .notification-item--critical .notification-item__icon-bg {
    background: rgb(127 29 29 / 0.3);
    /* red-900/30 */
}

.notification-item--system .notification-item__icon-bg {
    background: rgb(243 232 255);
    /* purple-100 */
}

.dark .notification-item--system .notification-item__icon-bg {
    background: rgb(88 28 135 / 0.3);
    /* purple-900/30 */
}

.notification-item__icon {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    color: rgb(59 130 246);
    /* blue-500 */
}

.notification-item--critical .notification-item__icon {
    color: rgb(239 68 68);
    /* red-500 */
}

.notification-item--system .notification-item__icon {
    color: rgb(168 85 247);
    /* purple-500 */
}

/* ===== Item Body ===== */
.notification-item__body {
    flex: 1;
    min-width: 0;
    /* Critical for text truncation */
    padding-right: 1.5rem;
    /* Space for mark-toggle button */
}

.notification-item__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===== Badge ===== */
.notification-item__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgb(239 68 68);
    /* red-500 */
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.notification-item__badge--styled {
    /* Applied by JS */
    contain: content;
}

.notification-item__badge-dot {
    width: 0.375rem;
    height: 0.375rem;
    background: white;
    border-radius: 9999px;
    animation: notification-pulse 2s ease-in-out infinite;
}

@keyframes notification-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ===== Title ===== */
.notification-item__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(24 24 27);
    /* zinc-900 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.dark .notification-item__title {
    color: rgb(250 250 250);
    /* zinc-50 */
}

.notification-item--read .notification-item__title {
    font-weight: 400;
}

/* ===== Meta ===== */
.notification-item__meta {
    font-size: 0.75rem;
    color: rgb(113 113 122);
    /* zinc-500 */
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .notification-item__meta {
    color: rgb(161 161 170);
    /* zinc-400 */
}

/* ===== Button Utilities (used by JS) ===== */
.button-opacity-reduced {
    opacity: 0.6;
}

.button-cursor-wait {
    cursor: wait;
}

/* ===== Body Lock ===== */
body.notification-panel-open {
    overflow: hidden;
}

@media (min-width: 640px) {
    .notification-panel__scrim {
        display: none;
    }
}