/* Desktop navbar hover/active states + collapsed (<=991px) nav-link spacing.
   Extracted from navbar.html inline styles (formerly lived in mobile.css). */

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.navbar-brand:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Overflow "More" trigger (nav_overflow_controller). Kept narrower than a full
   nav item (which carries an inline min-width: 90px) so folding a single link
   into it actually frees row space — a same-width trigger would net zero. */
#main-navbar .nav-overflow-more-toggle {
    min-width: 0;
}

/* Roomier "More" dropdown items — Bootstrap's default .dropdown-item padding
   (0.25rem 1rem) reads as cramped for these tappable nav destinations. */
#main-navbar .nav-overflow-more .dropdown-item {
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
}

#main-navbar .nav-overflow-more .dropdown-item i {
    font-size: 1.1rem;
    vertical-align: -0.05em;
}

@media (max-width: 991px) {
    .navbar-nav .nav-item {
        margin: 0.25rem 0 !important;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-radius: 0.5rem !important;
    }
}

/* Constant mobile notification bell — pinned to the banner's top-right.
   Out of flow (adds no layout space) and outside #page-header-zone so the
   skeleton swap never removes it. White icon already comes from .text-white. */
.notification-bell-mobile {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
    right: calc(env(safe-area-inset-right, 0px) + 0.5rem);
    z-index: 1020;
    margin: 0;
    /* Match the offline indicator's slide so the bell tracks it smoothly. */
    transition: top 0.25s ease;
}

/* When the offline indicator is showing, slide the floating bell down by the
   indicator's rendered height (~32px: 8px+8px padding + one line of 0.8rem text)
   so they don't overlap. The bell is a later sibling of #offline-indicator in
   base.html, so the general-sibling combinator reaches it; driven by the same
   .is-visible class offline-indicator.js toggles. */
#offline-indicator.is-visible ~ .notification-bell-mobile {
    top: calc(env(safe-area-inset-top, 0px) + 0.5rem + 24px);
}

/* Not-floating preference (Settings > Notifications): pin the bell in the
   banner's top-right and let it scroll away with the page, matching desktop.
   position:absolute anchors to the document, so the same top/right offsets
   place it over the banner instead of tracking the viewport. */
.notification-bell-mobile.is-static {
    position: absolute;
}

/* Solid backing so the bell stays visible after scrolling past the blue banner.
   Same blue as the banner, so over the banner it blends and looks unchanged;
   over the white app it stays visible. */
.notification-bell-mobile .nav-link,
.notification-bell-mobile .nav-link:hover,
.notification-bell-mobile .nav-link:focus,
.notification-bell-mobile .nav-link.show {
    background-color: var(--primary-color) !important;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Tap feedback: darken and press the bell in slightly while held. */
.notification-bell-mobile .nav-link:active {
    background-color: var(--primary-hover, #063f8c) !important;
    transform: scale(0.92);
}

/* Jingle the bell icon when the dropdown opens (Bootstrap adds .show on tap).
   transform-origin at the top makes it swing like a hung bell. Re-runs each
   open because .show is removed on close and re-added on the next tap. */
.notification-bell-mobile .nav-link .bi-bell {
    display: inline-block;
    transform-origin: top center;
}

.notification-bell-mobile .nav-link.show .bi-bell {
    animation: bell-jingle 0.6s ease-in-out;
}

@keyframes bell-jingle {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(16deg); }
    30%  { transform: rotate(-14deg); }
    45%  { transform: rotate(10deg); }
    60%  { transform: rotate(-7deg); }
    75%  { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}

/* Prominent unread count, modelled on PrivCall/element-call's NotificationBell.
   Fixed min-width/height + line-height keep it a solid pill (not collapsed to
   the digit) so single and double digits read consistently. */
.notification-count-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    border-radius: 10px;
}

/* Swipe-to-dismiss rows. touch-action: pan-y keeps native vertical scrolling
   while the controller owns horizontal drags. Transition animates snap-back
   and the dismiss fling; .is-dragging removes it so the finger tracks 1:1. */
.notification-item {
    touch-action: pan-y;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.15s ease;
}

.notification-item.is-dragging {
    transition: none;
}

/* Tap feedback: the controller adds .is-pressed on pointerdown and clears it on
   release/drag (CSS :active is unreliable on touch WebViews). Beats the bg-light
   utility on the read rows. */
.notification-item.is-pressed {
    background-color: var(--bs-gray-200, #e9ecef) !important;
}

/* PowerSync sync indicator (chippie-3n2v.24). Both icons render always; the
   [data-connected] state on the parent picks which is visible so no JS is
   needed beyond updateSyncIndicator() toggling the two data-* attributes. */
.sync-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 1.1rem;
}

.sync-indicator .sync-icon-online {
    display: none;
    color: #75d68a;
}

.sync-indicator .sync-icon-offline {
    color: #ffc107;
}

.sync-indicator[data-connected="true"] .sync-icon-offline {
    display: none;
}

.sync-indicator[data-connected="true"] .sync-icon-online {
    display: inline-block;
}

.sync-indicator[data-syncing="true"] i {
    animation: sync-indicator-spin 1s linear infinite;
}

@keyframes sync-indicator-spin {
    to {
        transform: rotate(360deg);
    }
}

/* PowerSync sync progress banner (chippie-3n2v.29). Same slide-in mechanic as
   .offline-indicator (static/css/offline-indicator.css) -- max-height 0 -> N
   transition, toggled via .is-visible -- but blue rather than amber since
   active syncing is a normal, positive state, not a degraded one. */
.sync-progress-banner {
    position: relative;
    z-index: 1030;
    overflow: hidden;
    max-height: 0;
    background: #0d6efd;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    padding: 0 12px;
    transition: max-height 0.25s ease, padding 0.25s ease;
}

.sync-progress-banner.is-visible {
    max-height: 44px;
    padding: 8px 12px;
}

.sync-progress-banner .bi {
    margin-right: 6px;
    animation: sync-indicator-spin 1s linear infinite;
}