/* ============================================================
   Ilanda Notification UI Styles
   Notification center, toast alerts, and badge styling
   ============================================================ */

/* Notification bell/badge in header */
.notification-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 8px;
    color: var(--ink);
    transition: transform 0.2s ease;
}

.notification-bell:hover {
    transform: scale(1.1);
}

.notification-bell.has-unread::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: var(--brick);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--white);
}

/* Notification center dropdown */
.notification-center {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 360px;
    max-width: calc(100vw - 16px);
    background: var(--white);
    border: 1px solid var(--ink-soft);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: none;
    flex-direction: column;
    max-height: 480px;
    overflow: hidden;
}

.notification-center.open {
    display: flex;
}

.notification-center-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--parchment);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-center-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notification-center-header button {
    background: none;
    border: none;
    color: var(--mustard-dark);
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.notification-center-header button:hover {
    opacity: 0.8;
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--parchment-2);
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.notification-item:hover {
    background-color: var(--parchment-2);
}

.notification-item.unread {
    background-color: rgba(227, 167, 61, 0.05);
}

.notification-item.unread::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--mustard);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.notification-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

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

.notification-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px 0;
    word-break: break-word;
}

.notification-message {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

.notification-time {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 4px;
}

.notification-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13px;
}

.notification-loading {
    padding: 16px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 12px;
}

.notification-center-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--parchment);
    text-align: center;
}

.notification-center-footer a {
    font-size: 12px;
    color: var(--mustard-dark);
    text-decoration: none;
    font-weight: 600;
}

.notification-center-footer a:hover {
    text-decoration: underline;
}

/* Toast notification (bottom right) */
.notification-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--white);
    border-left: 4px solid var(--mustard);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    max-width: 320px;
    z-index: 2000;
    animation: slideIn 0.3s ease;
}

.notification-toast.error {
    border-left-color: var(--brick);
}

.notification-toast.success {
    border-left-color: var(--grass);
}

.notification-toast.info {
    border-left-color: var(--mustard);
}

.notification-toast h4 {
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.notification-toast p {
    margin: 0;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.4;
}

.notification-toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-toast-close:hover {
    color: var(--ink);
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Notification status indicator */
.notification-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notification-status::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--ink-soft);
    border-radius: 50%;
}

.notification-status.connected::before {
    background: var(--grass);
}

.notification-status.connecting::before {
    background: var(--mustard);
    animation: pulse 1.5s ease-in-out infinite;
}

.notification-status.disconnected::before {
    background: var(--brick);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Mobile responsive */
@media (max-width: 640px) {
    .notification-center {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
        max-height: 80dvh;
    }

    .notification-toast {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* ============================================================
   BROWSER PUSH NOTIFICATIONS
   
   The notification system automatically requests browser
   notification permission. When granted, users receive:
   
   ✓ Notifications on homescreen when browser is minimized
   ✓ Notifications when browser is running in background
   ✓ Sound and vibration alerts for urgent notifications
   ✓ Rich notifications with icons and action buttons
   
   How it works:
   1. User sees permission banner on first visit
   2. User clicks "Allow Notifications"
   3. Browser asks for permission (native OS dialog)
   4. User grants permission
   5. All future notifications appear on homescreen
   
   Urgent notifications (SOS, Payment, Emergency):
   - Require user interaction to dismiss
   - Include vibration pattern
   - May include action buttons
   - High priority delivery
   
   Regular notifications:
   - Auto-dismiss after 5 seconds
   - Notification center displays all received
   - Clickable to navigate to relevant page
   
   Browser compatibility:
   - Chrome/Edge: Full support
   - Firefox: Full support
   - Safari: Partial support (macOS 10.13+)
   - Mobile browsers: Full support (Android, iOS 16+)
   
   ============================================================ */