/* The notification bell and its dropdown.
   Loaded by the page shell, because the bell is on every page. These rules used to sit
   in notifications.css, which only the two notifications pages load, so everywhere else
   the dropdown fell back to an older copy of the same rules in base.css and looked
   different. One home, one appearance. */

/* Navbar notification dropdown styles */
.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: min(380px, calc(100vw - 1rem));
    width: min(420px, calc(100vw - 1rem));
    max-height: 500px;
    background: var(--bs-body-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

@media (max-width: 576px) {
    .notification-dropdown {
        right: 0;
        max-height: 70vh;
    }
}

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

.notification-dropdown .notification-header {
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-light);
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-dropdown .notification-header h6 {
    margin: 0;
    font-weight: 600;
    color: var(--bs-body-color);
    font-size: 1rem;
}

.notification-dropdown .notification-badge-count {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: var(--bs-secondary-bg);
    border-radius: var(--bs-border-radius);
}

.notification-dropdown .notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-dropdown .notification-item {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background-color 0.2s ease;
    background: var(--bs-body-bg);
    border-left: none;
    margin: 0;
    border-radius: 0;
}

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

.notification-dropdown .notification-item:hover {
    background-color: var(--bs-secondary-bg);
    transform: none;
    box-shadow: none;
}

/* Unread is a faint tint, a bar down the left edge and a heavier title, not a filled
   blue block. A block of brand colour behind the text drops the contrast of the text
   on top of it and makes an unread row the loudest thing on the screen, which is the
   opposite of the order things should be read in
   (nngroup.com/articles/visual-hierarchy-ux-definition/, read 22 September 2026).
   color-mix takes the tint from the theme's own primary, so it follows a theme change
   instead of being a second copy of the colour. */
.notification-dropdown .notification-item.unread {
    background-color: color-mix(in srgb, var(--bs-primary) 6%, transparent);
    border-left: 3px solid var(--bs-primary);
    margin-left: 0;
}

.notification-dropdown .notification-item.unread .notification-title {
    font-weight: 600;
}

.notification-dropdown .notification-icon {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
    flex-shrink: 0;
}

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

.notification-dropdown .notification-content .notification-title {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.notification-dropdown .notification-content .notification-text {
    font-size: 0.8125rem;
    line-height: 1.3;
    margin-bottom: 0.375rem;
    color: var(--bs-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-dropdown .notification-content .notification-time {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
}

.notification-dropdown .notification-status {
    flex-shrink: 0;
    align-self: flex-start;
}

.notification-dropdown .notification-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-light);
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    text-align: center;
}

.notification-dropdown .notification-footer a {
    color: var(--bs-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.notification-dropdown .notification-footer a:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

[data-theme="dark"] .notification-dropdown {
    background: var(--bs-dark);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .notification-dropdown .notification-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .notification-dropdown .notification-header h6 {
    color: #ffffff;
}

[data-theme="dark"] .notification-dropdown .notification-badge-count {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .notification-dropdown .notification-item {
    background: var(--bs-dark);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .notification-dropdown .notification-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .notification-dropdown .notification-item.unread {
    background-color: color-mix(in srgb, var(--bs-primary) 14%, transparent);
}

[data-theme="dark"] .notification-dropdown .notification-content .notification-title {
    color: #ffffff;
}

[data-theme="dark"] .notification-dropdown .notification-content .notification-text {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .notification-dropdown .notification-content .notification-time {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .notification-dropdown .notification-footer {
    background: rgba(255, 255, 255, 0.05);
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .notification-dropdown .notification-footer a {
    color: var(--bs-primary);
}

[data-theme="dark"] .notification-dropdown .notification-footer a:hover {
    color: var(--primary-light);
}

/* Custom scrollbar for notification list */
.notification-dropdown .notification-list::-webkit-scrollbar {
    width: 6px;
}

.notification-dropdown .notification-list::-webkit-scrollbar-track {
    background: transparent;
}

.notification-dropdown .notification-list::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: var(--bs-border-radius);
}

.notification-dropdown .notification-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

[data-theme="dark"] .notification-dropdown .notification-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .notification-dropdown .notification-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 576px) {
    .notification-dropdown {
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: var(--notification-dropdown-top, 4rem) !important;
        max-height: min(70vh, 30rem) !important;
    }

    .notification-dropdown .notification-list {
        max-height: calc(min(70vh, 30rem) - 7.25rem);
    }
}

/* Enhanced notification features */
.toggle-read-btn {
    transition: all 0.2s ease;
    min-width: 40px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-read-btn:hover {
    transform: scale(1.05);
}

/* Dropdown notification item: explicit title reset prevents link-color/underline bleed */
.notification-dropdown .notification-item .notification-title {
    text-decoration: none !important;
    color: var(--bs-body-color) !important;
}

[data-theme="dark"] .notification-dropdown .notification-item .notification-title {
    color: #ffffff !important;
}

/* Right-side slot: only holds the unread dot (or stays empty when read) */
.notification-dropdown .notification-actions {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-width: 12px;
    padding-top: 3px;
}

/* Meta row: timestamp + minimal toggle button on the same line */
.notification-dropdown .notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

/* Timestamp: keep on one line, never wrap */
.notification-dropdown .notification-time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toggle button: minimal icon-only, no border, no background */
.notification-dropdown .toggle-read-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    min-width: 0;
    /* 24px, the smallest a control may be. WCAG 2.2 success criterion 2.5.8 Target Size
       (Minimum): "the size of the target for pointer inputs is at least 24 by 24 CSS
       pixels" (w3.org/WAI/WCAG22/Understanding/target-size-minimum, read 22 September
       2026). It was 20px high. */
    min-height: 24px;
    height: auto;
    font-size: 0.8125rem;
    /* A muted colour rather than opacity on the whole button: opacity 0.55 faded the text
       against the row behind it and put it under the 4.5:1 contrast the same standard
       asks for, and it faded the icon and the words together with no way to tune either. */
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
    border-radius: var(--bs-border-radius);
}

.notification-dropdown .toggle-read-btn:hover {
    color: var(--bs-primary);
}

/* Keyboard focus keeps a ring. The rule here used to set outline: none on :focus-visible,
   which leaves someone tabbing through the panel with no way to see where they are.
   WCAG 2.2, 2.4.7 Focus Visible: "any keyboard operable user interface has a mode of
   operation where the keyboard focus indicator is visible"
   (w3.org/WAI/WCAG22/Understanding/focus-visible, read 22 September 2026). */
.notification-dropdown .toggle-read-btn:focus-visible {
    color: var(--bs-primary);
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.notification-dropdown .notification-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {
    /* In the dropdown at xs, the meta-row toggle stays compact — no full-width stretch */
    .notification-dropdown .toggle-read-btn {
        width: auto;
    }
}


/* Unread dot. Only the dropdown uses it; the list page shows the word "unread" instead. */
.notification-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* At 768px and below the dropdown stops hanging off the bell and becomes a panel
   pinned to both edges, because a 380px panel anchored to a button near the right
   edge runs off a 320px screen. The page behind it is locked so the panel scrolls
   and the page does not. */
@media (max-width: 768px) {
    body.notification-dropdown-open {
        overflow: hidden;
    }

    .notification-dropdown {
        position: fixed;
        left: 0.75rem !important;
        right: 0.75rem !important;
        top: var(--notification-dropdown-top, 4.25rem) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(72vh, 34rem) !important;
        z-index: 1080;
    }

    .notification-dropdown .notification-list {
        max-height: calc(min(72vh, 34rem) - 7.5rem);
    }

    .notification-dropdown .notification-item {
        padding: 0.75rem;
    }

    .notification-dropdown .notification-header {
        padding: 0.75rem;
    }

    .notification-dropdown .notification-footer {
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    /* Tighter edges than the 768 rule above, because at 320px a 0.75rem gutter on both
       sides takes 24px off a panel that is already the whole screen. */
    .notification-dropdown {
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: var(--notification-dropdown-top, 4rem) !important;
    }

    .notification-dropdown .notification-content .notification-title {
        font-size: 0.8125rem;
    }

    .notification-dropdown .notification-content .notification-text {
        font-size: 0.75rem;
    }

    .notification-dropdown .notification-content .notification-time {
        font-size: 0.6875rem;
    }

    .notification-dropdown .notification-header h6 {
        font-size: 0.875rem;
    }

    .notification-dropdown .notification-badge-count {
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
    }
}

/* The bell button itself, moved out of base.css where it sat apart from the
   dropdown it opens. */
.notification-badge {
    position: relative;
    width: var(--control-size);
    height: var(--control-size);
    padding: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    backdrop-filter: blur(10px);
    transition: all var(--transition-speed);
}

[data-theme="light"] .notification-badge {
    background-color: var(--surface);
    border: 1px solid var(--divider);
    color: var(--text-secondary);
}

[data-theme="light"] .notification-badge:hover {
    background-color: var(--card-bg);
    border-color: var(--primary);
    color: var(--primary);
}

[data-theme="light"] .notification-badge:hover .notification-count {
    border-color: var(--card-bg);
}

.notification-badge:hover {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.95);
    color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.notification-badge .notification-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--danger-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--bs-border-radius);
    min-width: 20px;
    text-align: center;
    border: 2px solid var(--navbar-bg);
    transition: all var(--transition-speed);
}

/* Above 1200px the panel is a fixed width rather than a share of the window. */
@media (min-width: 1200px) {
    .notification-dropdown {
        width: 380px;
        right: 0;
    }
}