/* Global navbar sync indicator (icon + dropdown). Colours inherit from Bootstrap's
   [data-bs-theme] variables so it reads correctly in both light and dark. */

.sync-status #sync-status-icon {
    display: inline-block;
}

/* Spin the refresh icon while a sync is active. */
.sync-status #sync-status-icon.spin {
    animation: sync-status-spin 1.1s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .sync-status #sync-status-icon.spin {
        animation: none;
        opacity: 0.65;
    }
}

/* The icon button hugs its glyph so the "active" dot lands on the icon rather than on a line box
   taller than it. Scoped to the button on purpose: line-height inherits, and on the container it
   reached the whole dropdown, collapsing every line box in the menu to zero height. Anything with
   .text-truncate (overflow:hidden) was then clipped away entirely — which is why the mailbox name
   and the per-job summary rendered into the DOM but never appeared. */
.sync-status #sync-status-toggle {
    line-height: 0;
}

/* Small "active" dot in the corner of the icon button. */
.sync-status-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bs-success, #198754);
    box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
}

.sync-status-menu {
    /* Wide enough that a job's summary line ("32 messages scanned, 5 moved · Manual scan") fits
       without truncating. The root font is 14px, so this is 392px. */
    width: 28rem;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
}

/* Trim the trailing divider on the last rendered row. */
.sync-status-menu #sync-status-body > div:last-child {
    border-bottom: 0 !important;
}

.sync-status-progress {
    height: 0.5rem;
}

/* Smoothly animate the determinate bar as it fills between polls. */
.sync-status-progress .progress-bar {
    transition: width 0.4s ease;
}

/* The live activity line wraps so the full description is visible. */
.sync-status-activity {
    font-size: 0.8rem;
    line-height: 1.25;
    word-break: break-word;
}

.sync-status-heading {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.min-w-0 {
    min-width: 0;
}