/* Shared portal-toolbar sync widget (spinner + status pill + refresh
 * button) used by any page that pulls state from a downstream service.
 * Extracted from the original .tasks-toolbar-* styles so the Billing
 * and Contracts views can adopt the same UX without duplication. The
 * legacy .tasks-toolbar-* classes are kept as aliases below so any
 * existing selectors keep matching. */

.sync-toolbar {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
}

.sync-toolbar-status {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 height: 36px;
 padding: 0 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 font-size: 13px;
 font-weight: 500;
 line-height: 1;
 color: var(--muted-foreground);
 white-space: nowrap;
 max-width: min(52vw, 28rem);
 overflow: hidden;
 text-overflow: ellipsis;
}

.sync-toolbar-status-spinner {
 width: 14px;
 height: 14px;
 border-width: 1.5px;
 flex-shrink: 0;
}

.sync-toolbar-status-synced svg {
 color: var(--message-success);
 flex-shrink: 0;
}

.sync-toolbar-status-stale {
 background: color-mix(
  in srgb,
  var(--message-warning) 12%,
  var(--card)
 );
 border-color: color-mix(
  in srgb,
  #f59e0b 40%,
  transparent
 );
 color: var(--message-warning);
 max-width: min(70vw, 36rem);
}

.sync-toolbar-status-stale svg {
 flex-shrink: 0;
}

.sync-toolbar-status-stale-text {
 font-weight: 500;
}

.sync-toolbar-status-stale .btn-link {
 font-size: inherit;
 font-weight: 600;
 padding: 0;
 min-height: 0;
 color: inherit;
 text-decoration: underline;
}

.sync-toolbar-status-stale
 .btn-link:hover {
 opacity: 0.85;
}