/* =============================================================================
   Calendar Sync Status — shared styles for scheduler badge and dialog panel
   ============================================================================= */

/* ── Scheduler card badge ──────────────────────────────────────────────────── */

/*
 * Small circular badge overlaid on the top-right corner of a Kendo Scheduler
 * event tile. Uses absolute positioning; .k-event already has position:relative.
 *
 * Rendered by CalendarEventItem (SalesSchedulerContainer.tsx).
 * One letter distinguishes the provider: "O" = Outlook, "G" = Google.
 */
.cal-sync-badge {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;      /* don't interfere with event click/drag */
    user-select: none;
    z-index: 1;                /* above event background, below tooltips */
}

.cal-sync-badge--synced {
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
}

.cal-sync-badge--error {
    background: #dc3545;
    color: #fff;
}

.cal-sync-badge--pending {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -1px;      /* tighten the ellipsis glyph */
}

/* ── Dialog sync status panel ──────────────────────────────────────────────── */

/*
 * Read-only informational strip injected by SalesCalendarEventDialog.afterLoadEntity
 * between the Serenity form (.s-Form) and the dialog button bar.
 *
 * Shows: provider name, account email, and relative last-sync timestamp.
 * Not shown for new (unsaved) records.
 */
.cal-sync-panel {
    margin: 4px 10px 10px;
    padding: 8px 14px;
    background: #f0f4ff;
    border: 1px solid #c8d4f0;
    border-radius: 5px;
    font-size: 0.84rem;
    line-height: 1.6;
    color: #333;
}

.cal-sync-panel--loading {
    color: #888;
    font-style: italic;
}

.cal-sync-panel--empty .cal-sync-panel__title {
    color: #888;
    font-weight: 400;
    font-style: italic;
}

.cal-sync-panel__title {
    font-weight: 600;
    color: #3c4a6e;
    margin-bottom: 4px;
}

.cal-sync-panel__entry {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 1px 0;
}

/* Green checkmark */
.cal-sync-panel__check {
    color: #28a745;
    font-size: 1em;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

/* Provider detail line — provider name is bolded by the JS renderer */
.cal-sync-panel__detail {
    color: #444;
}

/* Outlook/Microsoft provider accent */
.cal-sync-panel__provider--microsoft strong {
    color: #0078d4;
}

/* Google provider accent */
.cal-sync-panel__provider--google strong {
    color: #4285f4;
}