/* ============================================================
   Sync Recovery (offline dead-letter surface)
   ============================================================ */
.sync-recovery-empty {
    color: var(--text-secondary, #6b7280);
    font-size: var(--font-size-14);
    margin: 8px 0 0;
}
.sync-recovery-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sync-recovery-count { font-weight: 600; color: var(--text-primary, #1A1A2E); }
.sync-recovery-bulk { display: flex; gap: 8px; align-items: center; }
.sync-recovery-list { display: flex; flex-direction: column; gap: 8px; }
.sync-recovery-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md);
    background: var(--surface-secondary, #fafafa);
}
.sync-recovery-info { min-width: 0; flex: 1; }
.sync-recovery-title {
    font-weight: 600;
    color: var(--text-primary, #1A1A2E);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sync-recovery-meta { font-size: var(--font-size-12); color: var(--text-secondary, #6b7280); margin-top: 2px; }
.sync-recovery-error { font-size: var(--font-size-12); color: var(--color-red-text); margin-top: 4px; word-break: break-word; }
.sync-recovery-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.sync-recovery-discard {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary, #6b7280);
    font-size: var(--font-size-sm); padding: 6px 8px; border-radius: var(--radius-md);
    transition: color var(--duration-fast) var(--ease-in-out);
}
.sync-recovery-discard:hover { color: var(--color-red-text); }
/* A quota refusal is not an error the user can retry away — it is a plan
   decision. Amber, not red, and the message is advice rather than a fault. */
.sync-recovery-item--plan-limit { border-color: rgba(245, 158, 11, 0.45); }
.sync-recovery-item--plan-limit .sync-recovery-error { color: var(--color-amber-text); }
.sync-recovery-remove {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary, #6b7280);
    font-size: var(--font-size-sm); padding: 6px 8px; border-radius: var(--radius-md);
    transition: color var(--duration-fast) var(--ease-in-out);
}
.sync-recovery-remove:hover { color: var(--color-red-text); }
.sync-recovery-remove:focus-visible,
.sync-recovery-discard:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }
/* Dark mode is driven by `data-theme` on the root element (Settings.applyTheme;
   'system' removes the attribute and lets the media query decide), so an
   explicit choice has to win in BOTH directions: the OS preference alone would
   paint #B45309 on a dark app set to dark while the OS is light. Nothing in the
   app sets `body.dark-theme`. */
:root[data-theme="dark"] .sync-recovery-item--plan-limit .sync-recovery-error { color: var(--color-amber-text); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sync-recovery-item--plan-limit .sync-recovery-error { color: var(--color-amber-text); }
}