/* Hub Styles, ALERT NOTIFICATIONS

/* ========================= */
/* Hub Section Visibility */
/* ========================= */
.hub-section {
    display: none;
}

.hub-section[style*="display: block"] {
    display: block !important;
}

/* ========================= */
/* Hub Navigation Dropdown */
/* ========================= */

/* Dropdown container - hidden by default */
#hubDropdown {
    display: none;
    animation: fadeIn 0.2s ease;
}

#hubDropdown.show {
    display: block !important;
}

/* Ensure dropdown buttons stack vertically */
#hubDropdown .account-tab-btn-enhanced {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

#hubDropdown .account-tab-btn-enhanced:last-child {
    margin-bottom: 0;
}

/* Optional: Add subtle animation for dropdown */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure dropdown items are tappable on mobile */
#hubDropdown .account-tab-btn-enhanced {
    min-height: 44px; /* iOS recommended tap target size */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================= */
/* FIX: Hub Popover Z-Index Priority */
/* ========================= */

/* Ensure hub sections don't interfere with popovers */
.hub-section {
    position: relative;
    z-index: 1;
}

/* Popover portal must be above everything */
.popover-portal {
    z-index: 9999999 !important;
    pointer-events: auto !important;
    position: fixed !important;
}

/* Ensure popover items are clickable */
.popover-portal .popover-item {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Prevent hub container from blocking popovers */
#hubContentContainer {
    position: relative;
    z-index: 1;
}

/* ===============================
   Hub Dropdown - Fixed Positioned Popover
   =============================== */
#hubDropdown {
    position: fixed; /* Changed from absolute */
    /* Position set by JavaScript */
    
    background: white;
    border: none;
    border-radius: 0 0 14px 14px;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.06);
    padding: 0;
    min-width: 160px;
    
    z-index: 10000;
    
    /* Hidden by default */
    display: none;
    opacity: 0;
    visibility: hidden;
    
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#hubDropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove wrapper styling */
#hubDropdown .account-tabs-scroll {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
}

/* Dropdown buttons - WhatsApp/Popover style */
#hubDropdown .account-tab-btn-enhanced {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 48px;
    position: relative;
    z-index: 10000;
    pointer-events: auto !important;
}

/* Last button - rounded bottom */
#hubDropdown .account-tab-btn-enhanced:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Dividers between buttons */
#hubDropdown .account-tab-btn-enhanced + .account-tab-btn-enhanced {
    border-top: 1px solid #f0f0f0;
}

/* Touch feedback */
#hubDropdown .account-tab-btn-enhanced:active {
    background: rgba(11, 125, 98, 0.12);
    transform: scale(0.98);
}

/* Desktop hover */
@media (hover: hover) {
    #hubDropdown .account-tab-btn-enhanced:hover {
        background: rgba(11, 125, 98, 0.08);
    }
}

/* Hide arrows in dropdown items */
#hubDropdown .account-tab-btn-enhanced .more-arrow {
    display: none !important;
}

/* ===============================
   Hub Navigation Card - No Changes
   =============================== */

/* Ensure card doesn't stretch */
#hubNavigationCard {
    position: relative;
    overflow: visible !important;
    z-index: 10;
}

/* Hub navigation button container */
.account-tabs-scroll {
    display: flex;
    gap: 8px;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.account-tabs-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Enhanced tab buttons */
.account-tab-btn-enhanced {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    background: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.account-tab-btn-enhanced:hover {
    background: rgba(11, 125, 98, 0.05);
    color: var(--brand);
}

.account-tab-btn-enhanced.active {
    background: rgba(11, 125, 98, 0.1);
    color: var(--brand);
    font-weight: 700;
}

.account-tab-btn-enhanced .more-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

/* More button arrow rotation */
#hubMoreBtn .more-arrow {
    transition: transform 0.3s ease;
}

#hubMoreBtn.open .more-arrow {
    transform: rotate(180deg);
}

/* Mobile Optimization */
@media (max-width: 640px) {
    #hubDropdown {
        min-width: 140px;
    }
    
    #hubDropdown .account-tab-btn-enhanced {
        padding: 16px;
        min-height: 52px;
        font-size: 16px;
    }
}

/* ===============================
   🔥 CRITICAL: Stop parent containers from breaking fixed positioning
   =============================== */
#hubContentContainer,
.hub-section,
#hubNavigationCard {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
}

/* Ensure alert buttons are fully interactive on touch devices */
button[data-action="set-alerts-with-afi"],
button[data-action="manage-alerts-link"],
span[data-action="manage-alerts-link"] {
    touch-action: manipulation !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(11, 125, 98, 0.1);
    position: relative;
    z-index: 10;
}

/* ==========================================
   Notification Item – Compact & Elegant
   ========================================== */

.notification-item {
    display: flex;
    gap: 8px;                 /* tighter */
    padding: 10px 12px;       /* BIG win */
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 6px;       /* tighter stack */
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
    padding-bottom: 36px; /* Make room for button at bottom */
}

/* Remove floaty feeling */
.notification-item:hover {
    background: #f9fafb;
    border-color: #0b7d62;
    transform: none;          /* IMPORTANT */
    box-shadow: none;
}

/* Unread – slimmer accent */
.notification-item.unread {
    background: #f0fdf4;
    border-left: 2px solid #0b7d62;
    padding-left: 10px;
}

/* Content */
.notification-content {
    flex: 1;
    min-width: 0;
}

/* Header */
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;       /* tighter */
    gap: 8px;
}

/* Title */
.notification-title {
    font-weight: 600;
    font-size: 13px;          /* smaller */
    color: #111827;
    line-height: 1.2;
}

/* Time */
.notification-time {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Message */
.notification-message {
    font-size: 13px;
    color: #374151;
    margin-bottom: 1px;
    line-height: 1.35;
}

/* Details */
.notification-details {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.3;
}

/* Delete button */
.notification-delete {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s ease;
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.notification-delete svg {
    width: 16px;
    height: 16px;
}

.notification-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Mobile */
@media (max-width: 640px) {
    .notification-item {
        padding: 9px 10px;
    }
}

.notification-action-btn {
    display: none !important;
}

/* Alert delete button - matches notification delete style */
.alert-delete {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.alert-delete svg {
    width: 16px;
    height: 16px;
}

.alert-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Alert route display - typography hierarchy */
.alert-route-primary {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 2px;
}

.alert-route-secondary {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.2;
    margin-bottom: 4px;
}

.alert-cargo {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}