/* PrimeReact MegaMenu Customization */

/* Reset global styles that conflict with PrimeReact */
.p-megamenu,
.p-megamenu *,
.p-megamenu-panel,
.p-megamenu-panel *,
.p-menuitem,
.p-menuitem *,
.p-menuitem-link,
.p-menuitem-link *,
.p-menuitem-content,
.p-menuitem-content *,
.p-menuitem-text {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

.p-menuitem a,
.p-menuitem span,
.p-megamenu a:not(.custom-btn),
.p-megamenu-panel a {
    text-decoration: none !important;
    border-bottom: none !important;
}

.p-megamenu-root-list,
.p-megamenu-submenu,
.p-submenu-list,
.p-menuitem {
    list-style: none !important;
    list-style-type: none !important;
}

/* Base MegaMenu Styles */
.p-megamenu {
    background: var(--white-color, #ffffff);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.p-megamenu>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
}

/* Logo / Brand */
.p-megamenu-start a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Hamburger Button - Hidden on Desktop */
.p-megamenu-button {
    display: none;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto;
}

.p-megamenu-button svg {
    width: 24px;
    height: 24px;
}

/* Main Menu List - Horizontal on Desktop */
.p-megamenu-root-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

/* Desktop only - override mobile on larger screens */
@media (min-width: 993px) {
    .p-megamenu-root-list {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

.p-menuitem {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Menu Item Content and Links */
.p-menuitem-content {
    display: flex;
    align-items: center;
}

.p-menuitem-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--text-color, #282d3b);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    gap: 0.5rem;
    border-radius: 4px;
}

.p-menuitem-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.p-menuitem-text {
    font-weight: 500;
}

.p-submenu-icon {
    width: 14px;
    height: 14px;
    margin-left: 0.25rem;
    transition: transform 0.2s;
}

.p-menuitem[aria-expanded="true"] > .p-menuitem-content .p-submenu-icon {
    transform: rotate(180deg);
}

/* Dropdown Panels */
.p-megamenu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    margin-top: 0.25rem;
    background: var(--white-color, #ffffff);
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
}

.p-megamenu-panel.p-megamenu-panel-active {
    display: block;
}

/* Nested panels inside submenu lists expand inline (accordion style) */
.p-submenu-list .p-menuitem .p-megamenu-panel {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--primary-color, #282d3b);
    border-radius: 0;
    margin: 0;
    margin-left: 1rem;
    background: rgba(0, 0, 0, 0.02);
    min-width: auto;
}

.p-submenu-list .p-menuitem .p-megamenu-panel.p-megamenu-panel-active {
    display: block;
}

.p-megamenu-grid {
    display: flex;
    padding: 0.5rem;
}

.p-megamenu-col-12 {
    flex: 0 0 100%;
    width: 100%;
}

/* Submenu Lists */
.p-megamenu-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-megamenu-submenu .p-menuitem {
    margin: 0;
}

.p-megamenu-submenu .p-menuitem-link {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.p-megamenu-submenu .p-menuitem-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.p-menuitem-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.p-menuitem-icon svg {
    width: 20px;
    height: 20px;
}

/* More Menu - Desktop Icons */
.p-menuitem-more .p-menuitem-icons-desktop {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.p-menuitem-more .p-menuitem-more-mobile {
    display: none;
}

/* Mobile Icons - Hidden on Desktop, Shown on Mobile */
.p-menuitem-icons-mobile {
    display: none;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
    margin-right: 1rem;
}

.p-menuitem-icon-link {
    padding: 0.375rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.p-menuitem-icon-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.p-menuitem-icon-link svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

/* User Menu */
.p-menuitem-user .p-menuitem-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
}

.p-menuitem-user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.p-menuitem-user-icon svg {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
}

/* User Submenu Alignment */
.p-menuitem-user .p-megamenu-panel {
    right: 0;
    left: auto;
}

/* Mobile Responsive Styles */
@media (max-width: 992px) {
    .p-megamenu {
        padding: 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .p-megamenu>div {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Show Hamburger Button */
    .p-megamenu-button {
        display: block;
        color: var(--text-color, #282d3b);
    }

    /* Hide Menu by Default on Mobile */
    .p-megamenu-root-list {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--white-color, #ffffff);
        border-top: 2px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 9999;
        padding: 0;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, padding 0.3s ease;
    }

    /* Show Menu When Active */
    .p-megamenu-root-list.p-megamenu-mobile-active {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
        padding: 1rem;
    }

    /* Stack Menu Items Vertically */
    .p-menuitem {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: var(--white-color, #ffffff);
    }

    .p-menuitem:last-child {
        border-bottom: none;
    }

    .p-menuitem-content {
        width: 100%;
    }

    .p-menuitem-link {
        width: 100%;
        justify-content: space-between;
        padding: 1rem;
        border-radius: 0;
        color: var(--text-color, #282d3b);
        font-weight: 500;
    }

    .p-menuitem-link:hover {
        background-color: rgba(0, 0, 0, 0.08);
    }

    /* Mobile Panels - Static Position */
    .p-megamenu-panel {
        position: static;
        box-shadow: none;
        border: none;
        border-left: 3px solid var(--primary-color, #282d3b);
        margin: 0;
        margin-left: 1rem;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.02);
    }

    .p-megamenu-panel.p-megamenu-panel-active {
        display: block;
    }

    .p-megamenu-submenu .p-menuitem-link {
        padding: 0.75rem 1rem;
    }

    /* Hide Desktop Icons, Show Mobile Dropdown */
    .p-menuitem-more .p-menuitem-icons-desktop {
        display: none;
    }

    .p-menuitem-more .p-menuitem-more-mobile {
        display: flex;
        width: 100%;
    }

    /* Show Mobile Icons */
    .p-menuitem-icons-mobile {
        display: flex;
        gap: var(--space-md, 12px);
        align-items: center;
        justify-content: flex-end;
    }

    /* Adjust mobile icon sizes */
    .p-menuitem-icons-mobile .p-menuitem-icon-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
        border-radius: var(--border-radius-md, 8px);
        transition: background-color var(--transition-duration, 0.3s);
        -webkit-user-select: none;
        user-select: none;
    }

    .p-menuitem-icons-mobile .p-menuitem-icon-link:active {
        background-color: var(--surface-hover, rgba(0, 0, 0, 0.05));
    }

    .p-menuitem-icons-mobile .p-menuitem-icon-link img {
        width: 20px;
        height: 20px;
        display: block;
    }

    .p-menuitem-icons-mobile .notification-badge {
        top: -6px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        font-size: 9px;
    }

    /* Notification trigger button touch-friendly */
    .p-menuitem-icons-mobile .notification-trigger {
        position: relative;
    }

    /* User Menu Mobile */
    .p-menuitem-user .p-megamenu-panel {
        right: auto;
        left: auto;
    }

    /* Adjust icon sizes for mobile */
    .p-menuitem-user-icon svg {
        width: 24px;
        height: 24px;
    }

    .p-submenu-icon {
        margin-left: auto;
    }
}

/* Small Mobile Devices */
@media (max-width: 576px) {
    .p-megamenu {
        padding: 0.5rem 0.75rem;
    }

    .p-megamenu-start svg {
        width: 30px;
        height: 30px;
    }

    .p-megamenu-button svg {
        width: 20px;
        height: 20px;
    }

    .p-menuitem-link {
        padding: 0.875rem 0.75rem;
        font-size: 0.95rem;
    }

    .p-megamenu-root-list {
        padding: 0.75rem;
    }
}

/* Tablet Responsive */
@media (min-width: 993px) and (max-width: 1200px) {
    .p-megamenu>div {
        max-width: 100%;
        padding: 0 1rem;
    }

    .p-megamenu-root-list {
        gap: 0.25rem;
    }

    .p-menuitem-link {
        padding: 0.625rem 0.75rem;
    }
}

/* Large Desktop */
@media (min-width: 1400px) {
    .p-megamenu>div {
        max-width: 1400px;
    }
}

/* Accessibility and Focus States */
.p-menuitem-link:focus {
    outline: 2px solid var(--primary-color, #282d3b);
    outline-offset: 2px;
}

.p-megamenu-button:focus {
    outline: 2px solid var(--primary-color, #282d3b);
    outline-offset: 2px;
}

/* Smooth Transitions */
.p-megamenu-panel,
.p-megamenu-root-list {
    transition: all 0.3s ease-in-out;
}

/* Prevent text selection on menu items during interaction */
.p-menuitem-link {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ==========================================================================
   NOTIFICATION DROPDOWN STYLES - PrimeReact Design System Integration
   ========================================================================== */

/* Notification Dropdown Container */
.notification-dropdown-container {
    position: relative;
    display: inline-block;
}

/* Notification Badge Styles */
.notification-trigger {
    position: relative;
    display: inline-block;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--error-color, #f44336) 0%, var(--error-color-dark, #d32f2f) 100%);
    color: var(--text-color, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs, 10px);
    font-weight: var(--font-bold, 700);
    line-height: 1;
    padding: 0 4px;
    border: 2px solid var(--surface-card, #ffffff);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(244, 67, 54, 0.3));
    z-index: 10;
    transition: all var(--transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
    animation: notificationBadgeBounce 0.6s ease-out;
}

.notification-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--transition-duration, 0.3s) ease;
}

.notification-badge:hover::before {
    opacity: 1;
}

/* Hide badge when count is 0 */
.notification-badge[data-count="0"],
.notification-badge:empty {
    display: none;
    transform: scale(0);
    opacity: 0;
}

/* Badge animation */
@keyframes notificationBadgeBounce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

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

    70% {
        transform: scale(0.9);
    }

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

/* Badge update animation */
@keyframes notificationBadgeUpdate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        background: linear-gradient(135deg, var(--success-color, #4caf50) 0%, var(--success-color-dark, #2e7d32) 100%);
    }

    100% {
        transform: scale(1);
    }
}

.notification-badge.updated {
    animation: notificationBadgeUpdate 0.4s ease-out;
}

/* Pulse animation for new notifications */
.notification-badge.new-notification {
    animation: notificationBadgePulse 1s ease-in-out;
}

@keyframes notificationBadgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: var(--shadow-sm, 0 2px 8px rgba(244, 67, 54, 0.3));
    }

    50% {
        transform: scale(1.1);
        box-shadow: var(--shadow-md, 0 4px 12px rgba(244, 67, 54, 0.5));
    }
}

/* Different sizes for different count ranges */
.notification-badge[data-count="1"],
.notification-badge[data-count="2"],
.notification-badge[data-count="3"],
.notification-badge[data-count="4"],
.notification-badge[data-count="5"] {
    min-width: 18px;
    height: 18px;
    font-size: var(--text-xs, 10px);
}

.notification-badge[data-count="6"],
.notification-badge[data-count="7"],
.notification-badge[data-count="8"],
.notification-badge[data-count="9"] {
    min-width: 20px;
    height: 20px;
    font-size: var(--text-xs, 11px);
}

.notification-badge[data-count^="1"],
.notification-badge[data-count^="2"],
.notification-badge[data-count^="3"],
.notification-badge[data-count^="4"],
.notification-badge[data-count^="5"],
.notification-badge[data-count^="6"],
.notification-badge[data-count^="7"],
.notification-badge[data-count^="8"],
.notification-badge[data-count^="9"] {
    min-width: 22px;
    height: 20px;
    font-size: var(--text-xs, 11px);
    border-radius: 10px;
}

/* For counts over 99 */
.notification-badge[data-count="99+"] {
    min-width: 28px;
    height: 20px;
    font-size: var(--text-xs, 9px);
    border-radius: 10px;
}

/* Hover effects for notification trigger */
.notification-trigger:hover .notification-badge {
    transform: scale(1.1);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(244, 67, 54, 0.4));
}

.notification-trigger:active .notification-badge {
    transform: scale(0.95);
    transition: transform var(--transition-duration, 0.1s) ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .notification-badge {
        top: -6px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        font-size: var(--text-xs, 9px);
        border-width: 1px;
    }

    .notification-badge[data-count^="1"],
    .notification-badge[data-count^="2"],
    .notification-badge[data-count^="3"],
    .notification-badge[data-count^="4"],
    .notification-badge[data-count^="5"],
    .notification-badge[data-count^="6"],
    .notification-badge[data-count^="7"],
    .notification-badge[data-count^="8"],
    .notification-badge[data-count^="9"] {
        min-width: 20px;
        height: 18px;
        font-size: var(--text-xs, 10px);
    }
}

/* Main Notification Dropdown Panel */
.notification-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    margin-top: 0.5rem;
    background: var(--surface-card, #ffffff);
    /* border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.1)); */
    border-radius: var(--border-radius, 4px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
    min-width: 380px;
    max-width: 400px;
    font-family: var(--font-family, 'Roboto', sans-serif);
}

.notification-dropdown.show {
    display: block;
}

/* Mobile notification dropdown positioning */
@media (max-width: 992px) {
    .notification-dropdown {
        position: fixed;
        top: auto;
        right: 1rem;
        left: 1rem;
        margin-top: 0;
        min-width: auto;
        max-width: none;
    }

    /* Mobile notification dropdown positioning for mobile icons */
    .p-menuitem-icons-mobile .notification-dropdown {
        position: fixed;
        top: 60px;
        right: 1rem;
        left: 1rem;
        margin-top: 0;
        min-width: auto;
        max-width: none;
        z-index: 1001;
    }

    /* Prevent page scroll when notification dropdown is open */
    body.notification-dropdown-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================================
   NOTIFICATION DROPDOWN CONTENT STYLES
   ========================================================================== */

/* Main notification dropdown structure */
.dropdown-menu-media {
    width: 360px;
    padding: 0;
    margin: 0;
}

/* Remove default list styling from all li elements */
.dropdown-menu-media>li {
    padding: 15px;
    margin: 0;
    list-style: none;
}

/* ==========================================================================
   NOTIFICATION HEADER STYLES
   ========================================================================== */

.dropdown-menu-media .dropdown-menu-header {
    position: relative;
    padding: var(--space-lg, 20px) var(--space-lg, 20px) var(--space-md, 15px);
    background: linear-gradient(135deg, var(--surface-card, #ffffff) 0%, var(--surface-section, #f8f9fa) 100%);
    border-bottom: 2px solid var(--primary-color-light, rgba(63, 81, 181, 0.1));
    border-radius: var(--border-radius, 4px) var(--border-radius, 4px) 0 0;
    box-shadow: inset 0 1px 0 var(--surface-border-light, rgba(255, 255, 255, 0.5));
}

.dropdown-menu-media .dropdown-menu-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #282d3b 0%, var(--info-color, #00bcd4) 100%);
    border-radius: var(--border-radius, 4px) var(--border-radius, 4px) 0 0;
}

.dropdown-menu-media .dropdown-menu-header>h3,
.dropdown-menu-media .dropdown-menu-header>h4,
.dropdown-menu-media .dropdown-menu-header>h5 {
    margin: 0;
    font-size: var(--text-xl, 18px);
    font-weight: var(--font-bold, 700);
    color: var(--text-color, #282d3b);
    letter-spacing: var(--letter-spacing-tight, -0.025em);
    text-shadow: 0 1px 2px var(--surface-border-light, rgba(0, 0, 0, 0.1));
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm, 10px);
}

.dropdown-menu-media .dropdown-menu-header>h3::before,
.dropdown-menu-media .dropdown-menu-header>h4::before,
.dropdown-menu-media .dropdown-menu-header>h5::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233f51b5'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15l-4-4 1.41-1.41L11 14.17l6.59-6.59L19 9l-8 8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    opacity: 0.8;
}

.dropdown-menu-media .dropdown-menu-header .badge,
.dropdown-menu-media .dropdown-menu-header .label {
    position: absolute;
    top: var(--space-md, 15px);
    right: var(--space-lg, 20px);
    transform: none;
    z-index: 2;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
    transition: all var(--transition-duration, 0.2s) ease;
    animation: notificationBadgePulse 2s ease-in-out infinite;
}

.dropdown-menu-media .dropdown-menu-header .label:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Enhanced label styles for notification header */
.dropdown-menu-media .dropdown-menu-header .label {
    padding: var(--space-xs, 0.375em) var(--space-sm, 0.75em);
    font-size: var(--text-xs, 11px);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.05em);
    border: 2px solid var(--surface-border, rgba(255, 255, 255, 0.3));
    backdrop-filter: blur(4px);
    background: rgba(244, 67, 54, 0.95);
    color: var(--text-color, #ffffff);
}

.dropdown-menu-media .dropdown-menu-header .label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    border-radius: inherit;
}

/* Pulse animation for notification badge */
@keyframes notificationBadgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
    }

    50% {
        transform: scale(1.05);
        box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.15));
    }
}

/* Responsive header adjustments */
@media (max-width: 576px) {
    .dropdown-menu-media .dropdown-menu-header {
        padding: var(--space-md, 15px);
    }

    .dropdown-menu-media .dropdown-menu-header>h3,
    .dropdown-menu-media .dropdown-menu-header>h4,
    .dropdown-menu-media .dropdown-menu-header>h5 {
        font-size: var(--text-lg, 16px);
    }

    .dropdown-menu-media .dropdown-menu-header .badge,
    .dropdown-menu-media .dropdown-menu-header .label {
        top: var(--space-sm, 10px);
        right: var(--space-md, 15px);
        font-size: var(--text-xs, 10px);
        padding: var(--space-xs, 0.25em) var(--space-sm, 0.5em);
    }
}

/* ==========================================================================
   NOTIFICATION LIST STYLES
   ========================================================================== */

.dropdown-menu-media .list-group.scrollable {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
    min-height: 100px;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm, 12px);
    border-radius: 0;
    background: var(--surface-card, #ffffff);
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    z-index: 1;
    /* Ensure scrolling works */
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* Custom scrollbar styling */
.dropdown-menu-media .list-group.scrollable::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu-media .list-group.scrollable::-webkit-scrollbar-track {
    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
    border-radius: var(--border-radius, 4px);
}

.dropdown-menu-media .list-group.scrollable::-webkit-scrollbar-thumb {
    background: var(--surface-border, rgba(0, 0, 0, 0.2));
    border-radius: var(--border-radius, 4px);
}

.dropdown-menu-media .list-group.scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--surface-border-hover, rgba(0, 0, 0, 0.3));
}

/* Scrollable container and content */
.dropdown-menu-media .list-group.scrollable .scrollable-container,
.dropdown-menu-media .list-group.scrollable .scrollable-content {
    position: relative;
    width: 100%;
    padding: 0;
    display: block;
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-menu-media .list-group.scrollable .scrollable-container {
    height: 100%;
    /* Remove overflow: hidden to allow scrolling */
    /* overflow: hidden; */
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-menu-media .list-group.scrollable .scrollable-content {
    display: block;
    width: 100%;
    /* Change from overflow: visible to auto for proper scrolling */
    overflow: auto;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1;
    /* Enable smooth touch scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    /* Additional properties for better touch scrolling */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Prevent rubber band scrolling on iOS */
    overscroll-behavior: contain;
    /* Ensure proper touch handling */
    touch-action: pan-y;
}

/* Hide legacy scrollbar elements */
.scrollable-bar {
    display: none !important;
}

/* ==========================================================================
   NOTIFICATION ITEM STYLES
   ========================================================================== */

.dropdown-menu-media .list-group-item {
    padding: 0;
    border: none;
    border-radius: var(--border-radius-md, 8px) !important;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    margin: var(--space-xs, 4px) var(--space-md, 12px);
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--surface-card, #ffffff);
}

.dropdown-menu-media .list-group-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            var(--surface-card, #ffffff) 0%,
            var(--surface-hover, rgba(248, 249, 250, 0.8)) 100%);
    opacity: 0;
    transition: opacity var(--transition-duration, 0.3s) ease;
    z-index: -1;
}

.dropdown-menu-media .list-group-item:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, 0.15));
}

.dropdown-menu-media .list-group-item:hover::before {
    opacity: 1;
}

.dropdown-menu-media .list-group-item:active {
    transform: translateY(0) scale(0.98);
    transition: transform var(--transition-duration, 0.1s) ease;
}

/* Media object within notification items */
.dropdown-menu-media .list-group-item .media {
    padding: var(--space-md, 16px);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md, 14px);
    border-radius: inherit;
    min-height: 60px;
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-menu-media .list-group-item .media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-lg, 20px);
    right: var(--space-lg, 20px);
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--surface-border, rgba(0, 0, 0, 0.06)) 10%,
            var(--surface-border, rgba(0, 0, 0, 0.06)) 90%,
            transparent 100%);
    opacity: 0.5;
}

.dropdown-menu-media .list-group-item:last-child .media::after,
.dropdown-menu-media .list-group-item:only-child .media::after {
    display: none;
}

/* Enhanced first item styling */
.dropdown-menu-media .list-group-item:first-child {
    margin-top: var(--space-sm, 8px);
}

.dropdown-menu-media .list-group-item:first-child .media {
    border-top: none;
}

/* Unread notification indicator */
.dropdown-menu-media .list-group-item.unread {
    background: linear-gradient(135deg,
            var(--info-color-light, rgba(0, 188, 212, 0.08)) 0%,
            var(--primary-color-light, rgba(63, 81, 181, 0.05)) 100%);
    border-left: 3px solid #282d3b;
}

.dropdown-menu-media .list-group-item.unread .media-heading {
    font-weight: var(--font-bold, 700);
    color: var(--primary-color-dark, #303f9f);
}

/* Notification types styling */
.dropdown-menu-media .list-group-item.success {
    border-left-color: var(--success-color, #4caf50);
}

.dropdown-menu-media .list-group-item.success .icon.icon-circle {
    background: linear-gradient(135deg, var(--success-color, #4caf50) 0%, var(--success-color-dark, #2e7d32) 100%);
}

.dropdown-menu-media .list-group-item.warning {
    border-left-color: var(--warning-color, #ff9800);
}

.dropdown-menu-media .list-group-item.warning .icon.icon-circle {
    background: linear-gradient(135deg, var(--warning-color, #ff9800) 0%, var(--warning-color-dark, #e65100) 100%);
}

.dropdown-menu-media .list-group-item.error {
    border-left-color: var(--error-color, #f44336);
}

.dropdown-menu-media .list-group-item.error .icon.icon-circle {
    background: linear-gradient(135deg, var(--error-color, #f44336) 0%, var(--error-color-dark, #c62828) 100%);
}

.dropdown-menu-media .list-group-item.info {
    border-left-color: var(--info-color, #00bcd4);
}

.dropdown-menu-media .list-group-item.info .icon.icon-circle {
    background: linear-gradient(135deg, var(--info-color, #00bcd4) 0%, var(--info-color-dark, #006064) 100%);
}

/* Enhanced focus states for accessibility */
.dropdown-menu-media .list-group-item:focus {
    outline: 2px solid var(--primary-color, #3f51b5);
    outline-offset: 2px;
    background-color: var(--surface-hover, rgba(0, 0, 0, 0.05));
}

/* Responsive adjustments for notification cards */
@media (max-width: 576px) {
    .dropdown-menu-media .list-group-item .media {
        padding: var(--space-sm, 12px);
        gap: var(--space-sm, 12px);
        min-height: 50px;
    }

    .dropdown-menu-media .list-group-item {
        margin: var(--space-xs, 2px) var(--space-sm, 8px);
    }

    .icon.icon-circle {
        width: 2em;
        height: 2em;
    }

    .icon.icon-circle::before {
        font-size: 1em;
    }

    .media-heading {
        font-size: var(--text-sm, 13px);
        -webkit-line-clamp: 1;
    }

    .media-meta {
        font-size: 7px;
        /* Уменьшен на ~30% с 10px */
    }
}

/* Smooth entrance animation for notification items */
@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dropdown-menu-media .list-group-item {
    /* animation: notificationSlideIn 0.4s ease-out; */
}

/* .dropdown-menu-media .list-group-item:nth-child(1) { animation-delay: 0.05s; }

.dropdown-menu-media .list-group-item:nth-child(2) { animation-delay: 0.1s; }

.dropdown-menu-media .list-group-item:nth-child(3) { animation-delay: 0.15s; }

.dropdown-menu-media .list-group-item:nth-child(4) { animation-delay: 0.2s; }

.dropdown-menu-media .list-group-item:nth-child(5) { animation-delay: 0.25s; }

.notification-empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md, 16px);
    opacity: 0.5;
}

/* Notification priority indicators */
.notification-priority-high .icon.icon-circle {
    animation: notificationIconPulse 2s ease-in-out infinite;
}

.notification-priority-medium .icon.icon-circle {
    animation: notificationIconPulse 3s ease-in-out infinite;
}

/* Custom scrollbar for better UX */
.dropdown-menu-media .list-group.scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            var(--primary-color-light, rgba(63, 81, 181, 0.3)) 0%,
            var(--info-color-light, rgba(0, 188, 212, 0.3)) 100%);
}

.dropdown-menu-media .list-group.scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            var(--primary-color, #3f51b5) 0%,
            var(--info-color, #00bcd4) 100%);
}

/* ==========================================================================
   MEDIA OBJECT COMPONENTS
   ========================================================================== */

.media-left,
.media>.pull-left {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.padding-right-10 {
    padding-right: var(--space-sm, 10px) !important;
}

.media-body {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    /* Prevent flex item from overflowing */
    display: flex;
    flex-direction: column;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.media-heading {
    font-size: var(--text-base, 14px);
    margin: 0 0 var(--space-xs, 6px) 0;
    font-weight: var(--font-semibold, 600);
    color: var(--text-color, #282d3b);
    line-height: var(--line-height-tight, 1.4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all var(--transition-duration, 0.3s) ease;
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;
}

.media-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color, #3f51b5), var(--info-color, #00bcd4));
    transition: width var(--transition-duration, 0.3s) ease;
}

.dropdown-menu-media .list-group-item:hover .media-heading {
    color: var(--primary-color, #3f51b5);
}

.dropdown-menu-media .list-group-item:hover .media-heading::after {
    width: 100%;
}

.media-meta {
    margin: 0;
    font-size: 8px;
    /* Уменьшен на ~30% с 11px */
    color: var(--text-color-secondary, #8a8a8a);
    display: flex;
    align-items: center;
    font-weight: var(--font-normal, 400);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.025em);
    visibility: visible !important;
}

/* Removed ::before pseudo-element to eliminate the dot */

/* ==========================================================================
   ICON STYLES
   ========================================================================== */

.icon {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 1em;
    height: 1em;
    line-height: 1;
    transition: all var(--transition-duration, 0.3s) ease;
}

.icon.icon-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    margin: 0;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
    transition: all var(--transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    background-clip: padding-box;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10;
}

.icon.icon-circle::before {
    position: relative;
    z-index: 2;
    color: var(--text-color, #ffffff);
    font-size: 1.1em;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.icon.icon-circle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: "";
    background: inherit;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

/* Enhanced icon hover effects */
.dropdown-menu-media .list-group-item:hover .icon.icon-circle {
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, 0.25));
    border-color: rgba(255, 255, 255, 0.3);
}

.dropdown-menu-media .list-group-item:hover .icon.icon-circle::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
}

/* Enhanced background colors for notification types */
.icon.icon-circle.bg-red-600 {
    background: linear-gradient(135deg, var(--error-color, #f44336) 0%, var(--error-color-dark, #d32f2f) 100%);
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
}

.icon.icon-circle.bg-green-600 {
    background: linear-gradient(135deg, var(--success-color, #4caf50) 0%, var(--success-color-dark, #388e3c) 100%);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.icon.icon-circle.bg-blue-600 {
    background: linear-gradient(135deg, var(--info-color, #00bcd4) 0%, var(--info-color-dark, #0097a7) 100%);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

.icon.icon-circle.bg-orange-600 {
    background: linear-gradient(135deg, var(--warning-color, #ff9800) 0%, var(--warning-color-dark, #f57c00) 100%);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

/* Pulse animation for urgent notifications */
@keyframes notificationIconPulse {

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

    50% {
        transform: scale(1.15);
        box-shadow: 0 6px 20px rgba(244, 67, 54, 0.6);
    }
}

.icon.icon-circle.urgent {
    animation: notificationIconPulse 2s ease-in-out infinite;
}

/* ==========================================================================
   LABEL STYLES
   ========================================================================== */

.label {
    padding: var(--space-xs, 0.375em) var(--space-sm, 0.75em);
    font-weight: var(--font-medium, 500);
    border-radius: var(--border-radius-md, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs, 11px);
    line-height: var(--line-height-tight, 1.2);
    color: var(--text-color, #ffffff);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    transition: all var(--transition-duration, 0.2s) ease;
    position: relative;
    overflow: hidden;
}

.label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-duration, 0.5s) ease;
}

.label:hover::before {
    left: 100%;
}

.label-round {
    border-radius: var(--border-radius-full, 1em);
    padding: var(--space-xs, 0.375em) var(--space-md, 1em);
}

.label-danger {
    background: linear-gradient(135deg, var(--error-color, #f44336) 0%, var(--error-color-dark, #d32f2f) 100%);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(244, 67, 54, 0.3));
}

.label-danger[href]:hover,
.label-danger[href]:focus {
    background: linear-gradient(135deg, var(--error-color-hover, #ef5350) 0%, var(--error-color, #f44336) 100%);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(244, 67, 54, 0.4));
    transform: translateY(-1px);
}

/* Additional label variants */
.label-success {
    background: linear-gradient(135deg, var(--success-color, #4caf50) 0%, var(--success-color-dark, #388e3c) 100%);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(76, 175, 80, 0.3));
}

.label-info {
    background: linear-gradient(135deg, var(--info-color, #00bcd4) 0%, var(--info-color-dark, #0097a7) 100%);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 188, 212, 0.3));
}

.label-warning {
    background: linear-gradient(135deg, var(--warning-color, #ff9800) 0%, var(--warning-color-dark, #f57c00) 100%);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(255, 152, 0, 0.3));
}

/* ==========================================================================
   BACKGROUND UTILITY CLASSES
   ========================================================================== */

.bg-red-600 {
    background-color: var(--red-600, #e53935) !important;
}

.bg-green-600 {
    background-color: var(--green-600, #43a047) !important;
}

.bg-blue-600 {
    background-color: var(--blue-600, #1e88e5) !important;
}

.bg-orange-600 {
    background-color: var(--orange-600, #fb8c00) !important;
}

.white {
    color: var(--text-color, #ffffff) !important;
}

/* ==========================================================================
   NOTIFICATION FOOTER STYLES
   ========================================================================== */

.dropdown-menu-media>.dropdown-menu-footer {
    background-color: var(--surface-section, #f8f9fa);
    border-top: 1px solid var(--surface-border, #e0e0e0);
    padding: var(--space-md, 15px) 0;
    position: relative;
    border-radius: 0 0 var(--border-radius, 4px) var(--border-radius, 4px);
    min-height: 50px;
    display: flex;
    align-items: center;
}

.dropdown-menu-media>.dropdown-menu-footer>a {
    padding: var(--space-md, 15px) var(--space-lg, 20px) !important;
    color: var(--text-color-secondary, #9e9e9e) !important;
    text-decoration: none;
    display: inline-block;
    transition: color var(--transition-duration, 0.2s) ease;
    font-size: var(--text-sm, 12px);
}

.dropdown-menu-media>.dropdown-menu-footer>a:hover {
    color: var(--primary-color, #3f51b5) !important;
    background-color: transparent !important;
}

/* Settings button - positioned on the left */
.dropdown-menu-media>.dropdown-menu-footer>.dropdown-menu-footer-btn {
    position: absolute;
    left: var(--space-lg, 20px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px !important;
    color: var(--text-color-secondary, #9e9e9e) !important;
    text-decoration: none;
    transition: all var(--transition-duration, 0.2s) ease;
    background: var(--surface-card, #ffffff);

    border-radius: var(--border-radius, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

.dropdown-menu-media>.dropdown-menu-footer>.dropdown-menu-footer-btn:hover {
    color: var(--primary-color, #3f51b5) !important;
    background: var(--surface-hover, rgba(0, 0, 0, 0.05)) !important;
    border-color: var(--primary-color, #3f51b5);
}

/* Mark all read button styling - positioned on the right */
.dropdown-menu-media>.dropdown-menu-footer>.dropdown-menu-footer-action {
    position: absolute;
    right: var(--space-lg, 20px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    background: #ffffff;
    color: var(--text-color, #ffffff);
    border: 0;

    font-size: var(--text-xs, 11px);
    font-weight: var(--font-medium, 500);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.025em);
    cursor: pointer;
    transition: all var(--transition-duration, 0.2s) ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    z-index: 2;
}

.dropdown-menu-media>.dropdown-menu-footer>.dropdown-menu-footer-action::before {
    content: '✓';
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-right: 2px;
}

/* Responsive adjustments for footer action button */
@media (max-width: 576px) {
    .dropdown-menu-media>.dropdown-menu-footer>.dropdown-menu-footer-action {
        padding: 5px 8px;
        font-size: var(--text-xs, 10px);
        right: var(--space-md, 15px);
    }

    .dropdown-menu-media>.dropdown-menu-footer>.dropdown-menu-footer-action::before {
        content: '';
    }
}

/* ==========================================================================
   ENHANCED MOBILE NOTIFICATION DROPDOWN STYLES
   ========================================================================== */

/* Optimized mobile notification dropdown container */
@media (max-width: 576px) {

    /* Notification dropdown positioning for small screens */
    .notification-dropdown {
        position: fixed;
        top: 50px;
        right: 0.5rem;
        left: 0.5rem;
        margin-top: 0;
        min-width: auto;
        max-width: none;
        width: calc(100% - 1rem);
        max-height: calc(100vh - 100px);
        border-radius: var(--border-radius-lg, 12px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        z-index: 1001;
    }

    /* Mobile dropdown menu media styles */
    .dropdown-menu-media {
        width: 100%;
        max-height: calc(100vh - 150px);
        border-radius: var(--border-radius-lg, 12px);
    }

    /* Mobile dropdown header optimization */
    .dropdown-menu-media .dropdown-menu-header {
        padding: var(--space-lg, 20px);
        background: linear-gradient(135deg, var(--primary-color, #3f51b5) 0%, var(--primary-color-dark, #283593) 100%);
        color: white;
        border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
        margin: 0;
    }

    /* Enhanced touch scrolling for mobile */
    .dropdown-menu-media .scrollable-content {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        /* Additional properties for better touch scrolling */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Prevent rubber band scrolling on iOS */
        overscroll-behavior: contain;
        /* Ensure proper touch handling */
        touch-action: pan-y;
    }

    .dropdown-menu-media .dropdown-menu-header h5 {
        margin: 0;
        font-size: var(--text-lg, 18px);
        font-weight: 600;
        color: white;
    }

    .dropdown-menu-media .dropdown-menu-header .label {
        background: var(--error-color, #f44336);
        color: white;
        border: none;
        font-size: var(--text-xs, 10px);
    }

    /* Mobile scrollable list optimization */
    .dropdown-menu-media .list-group.scrollable {
        max-height: calc(100vh - 250px);
        min-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        display: block;
        /* Ensure scrolling works */
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }

    /* Ensure scrollable container is visible */
    .dropdown-menu-media .list-group.scrollable .scrollable-container {
        display: block;
        width: 100%;
        height: 100%;
        /* Remove overflow: hidden to allow scrolling */
        /* overflow: hidden; */
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure scrollable content is visible */
    .dropdown-menu-media .list-group.scrollable .scrollable-content {
        display: block;
        width: 100%;
        /* Change to auto for proper scrolling */
        overflow: auto;
        padding: 0;
        /* Enable smooth touch scrolling on mobile */
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        /* Additional properties for better touch scrolling */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Prevent rubber band scrolling on iOS */
        overscroll-behavior: contain;
        /* Ensure proper touch handling */
        touch-action: pan-y;
    }

    /* Mobile notification item spacing */
    .dropdown-menu-media .list-group-item {
        margin: var(--space-xs, 4px) var(--space-md, 12px);
        padding: var(--space-md, 12px);
        min-height: 60px;
        border-radius: var(--border-radius-md, 8px);
    }

    /* Mobile notification media content */
    .dropdown-menu-media .list-group-item .media {
        display: flex;
        gap: var(--space-md, 12px);
        align-items: flex-start;
        padding: 0;
    }

    /* Mobile media body text */
    .dropdown-menu-media .list-group-item .media-body {
        flex: 1;
        overflow: hidden;
    }

    .dropdown-menu-media .list-group-item .media-heading {
        font-size: var(--text-base, 14px);
        font-weight: 500;
        margin: 0 0 4px 0;
        line-height: 1.3;
        color: var(--text-color, #333);
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dropdown-menu-media .list-group-item .media-text {
        font-size: var(--text-xs, 11px);
        color: var(--text-muted, #666);
        line-height: 1.4;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Mobile footer optimization - keep absolute positioning for mobile */
    .dropdown-menu-media .dropdown-menu-footer {
        padding: var(--space-md, 15px) 0;
        background: var(--surface-hover, #f9f9f9);
        border-top: 1px solid var(--surface-border, #e0e0e0);
        border-radius: 0 0 var(--border-radius-lg, 12px) var(--border-radius-lg, 12px);
        min-height: 50px;
    }

    /* Mobile settings button */
    .dropdown-menu-media .dropdown-menu-footer-btn {
        position: absolute;
        left: var(--space-lg, 20px);
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: var(--border-radius-md, 8px);
        background: var(--surface-card, white);
        color: var(--text-color, #333);
        border: 1px solid var(--surface-border, #ddd);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-duration, 0.3s);
    }

    .dropdown-menu-media .dropdown-menu-footer-btn:active {
        background: var(--primary-color, #3f51b5);
        color: white;
        border-color: var(--primary-color, #3f51b5);
    }

    /* Mobile mark all read button - white background, text only */
    .dropdown-menu-media .dropdown-menu-footer-action {
        position: absolute;
        right: var(--space-lg, 20px);
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
        padding: 0 16px;
        font-size: var(--text-sm, 13px);
        font-weight: 500;
        border: none;
        border-radius: var(--border-radius-md, 8px);
        background: #ffffff;
        color: #282d3b;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all var(--transition-duration, 0.3s);
        cursor: pointer;
    }

    /* Hide the checkmark icon on mobile */
    .dropdown-menu-media .dropdown-menu-footer-action::before {
        display: none;
    }

    .dropdown-menu-media .dropdown-menu-footer-action:hover {
        background: #ffffff;
        color: #282d3b;
    }

    .dropdown-menu-media .dropdown-menu-footer-action:active {
        background: var(--white-color, #ffffff);
        transform: translateY(-50%) scale(0.98);
        color: var(--section_text_color, #282d3b);
    }
}

/* Extra small screens (320px - 480px) */
@media (max-width: 480px) {
    .notification-dropdown {
        top: 45px;
        right: 0.25rem;
        left: 0.25rem;
        width: calc(100% - 0.5rem);
    }

    .dropdown-menu-media {
        border-radius: var(--border-radius-md, 8px);
    }

    .dropdown-menu-media .list-group.scrollable {
        height: 280px;
    }

    .dropdown-menu-media .list-group-item {
        margin: 2px 8px;
        padding: 10px;
        min-height: 55px;
    }

    .dropdown-menu-media .list-group-item .media-heading {
        font-size: 13px;
    }

    .dropdown-menu-media .list-group-item .media-text {
        font-size: 10px;
    }

    .dropdown-menu-media .dropdown-menu-footer {
        /* For very small screens, switch to flexbox layout */
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: var(--space-sm, 10px);
        position: relative;
    }

    .dropdown-menu-media .dropdown-menu-footer-btn,
    .dropdown-menu-media .dropdown-menu-footer-action {
        position: static;
        transform: none;
        width: 100%;
        height: 40px;
        margin: 0;
        background: #ffffff;
        color: #282d3b;
        border: none;
    }

    .dropdown-menu-media .dropdown-menu-footer-action:hover {
        background: #ffffff;
        color: #282d3b;
    }

    .dropdown-menu-media .dropdown-menu-footer-action:active {
        background: var(--white-color, #ffffff);
        transform: none;
        color: var(--section_text_color, #282d3b);
    }

    .dropdown-menu-media .dropdown-menu-footer-btn {
        order: 1;
    }

    .dropdown-menu-media .dropdown-menu-footer-action {
        order: 2;
    }
}

/* Tablet screens (577px - 768px) optimization */
@media (min-width: 577px) and (max-width: 768px) {
    .notification-dropdown {
        position: fixed;
        top: 50px;
        right: 1rem;
        left: 1rem;
        width: calc(100% - 2rem);
        max-height: calc(100vh - 100px);
    }

    .dropdown-menu-media {
        width: 100%;
        border-radius: var(--border-radius-lg, 12px);
    }

    .dropdown-menu-media .list-group.scrollable {
        max-height: 350px;
        min-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .dropdown-menu-media .list-group-item {
        margin: 6px 12px;
        padding: 14px;
        min-height: 65px;
    }

    .dropdown-menu-media .list-group-item .media-heading {
        font-size: var(--text-base, 14px);
    }

    /* Enhanced touch scrolling for tablets */
    .dropdown-menu-media .scrollable-content {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        /* Additional properties for better touch scrolling */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Prevent rubber band scrolling on iOS */
        overscroll-behavior: contain;
        /* Ensure proper touch handling */
        touch-action: pan-y;
    }
}

/* ==========================================================================
   MOBILE ANIMATION ENHANCEMENTS
   ========================================================================== */

/* Slide in animation for mobile dropdown */
@keyframes notificationDropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Notification slide in animation */
@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apply animations to mobile dropdown */
@media (max-width: 576px) {
    .notification-dropdown.show {
        animation: notificationDropdownSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Smooth transitions for mobile interactions */
    .notification-dropdown {
        transition: all var(--transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dropdown-menu-media .list-group-item {
        transition: all var(--transition-duration, 0.3s) ease;
    }

    /* Enhance touch feedback */
    .p-menuitem-icon-link {
        transition: all 0.15s ease;
    }

    .p-menuitem-icon-link:active {
        transform: scale(0.95);
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS FOR MOBILE
   ========================================================================== */

/* Focus states for keyboard navigation */
@media (max-width: 576px) {

    .notification-dropdown .list-group-item:focus,
    .dropdown-menu-media .dropdown-menu-footer button:focus {
        outline: 2px solid var(--primary-color, #3f51b5);
        outline-offset: 2px;
    }

    /* Reduce motion for users with vestibular disorders */
    @media (prefers-reduced-motion: reduce) {

        .notification-dropdown,
        .notification-dropdown.show,
        .dropdown-menu-media .list-group-item,
        .p-menuitem-icon-link {
            animation: none !important;
            transition: none !important;
        }
    }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION OPTIMIZATION
   ========================================================================== */

@media (max-width: 992px) and (orientation: landscape) {
    .notification-dropdown {
        max-height: 70vh;
        top: 50px;
    }

    .dropdown-menu-media .list-group.scrollable {
        height: 180px;
        max-height: calc(70vh - 150px);
    }

    .dropdown-menu-media .list-group-item {
        min-height: 50px;
        padding: 10px 12px;
    }

    .dropdown-menu-media .list-group-item .media {
        gap: 8px;
        min-height: auto;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT (if implemented)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    @media (max-width: 576px) {
        .notification-dropdown {
            background: var(--surface-card, #1e1e1e);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        }

        .dropdown-menu-media .dropdown-menu-header {
            background: linear-gradient(135deg, var(--primary-color, #5c6bc0) 0%, var(--primary-color-dark, #3f51b5) 100%);
        }

        .dropdown-menu-media .list-group.scrollable {
            background: var(--surface-card, #1e1e1e);
        }

        .dropdown-menu-media .dropdown-menu-footer {
            background: var(--surface-hover, #2a2a2a);
            border-top-color: var(--surface-border, #333);
        }

        .dropdown-menu-media .list-group-item {
            background: var(--surface-card, #1e1e1e);
            color: var(--text-color, #e0e0e0);
        }

        .dropdown-menu-media .list-group-item:hover {
            background: var(--surface-hover, #2a2a2a);
        }

        .dropdown-menu-media .list-group-item .media-heading {
            color: var(--text-color, #e0e0e0);
        }

        .dropdown-menu-media .list-group-item .media-text {
            color: var(--text-muted, #999);
        }
    }
}

/* Verification "click here" link in notification message */
.notification-verification-link {
    color: var(--p-primary-color, #2563eb) !important;
    text-decoration: underline !important;
    cursor: pointer;
}

.notification-verification-link:hover {
    text-decoration: underline !important;
    opacity: 0.9;
}