/* Sync indicator (syncChip.js) — design_handoff_round2 §4B. Light chip for office
   pages, dark chip for the field apps. */

.sync-wrap { position: relative; display: inline-flex; }

.sync-chip {
  height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 700 13px var(--font-body); background: #E6F4EC; color: #1F8B4D;
}
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #1F9D57; flex-shrink: 0; }
.sync-chip.sync-saving { background: #EAF2FC; color: #1462B8; }
.sync-chip.sync-saving .sync-dot { background: #2E7FD4; }
.sync-chip.sync-offline { background: #FBF4E6; color: #8A5A0A; }
.sync-chip.sync-offline .sync-dot { background: #E0930F; }
.sync-chip.sync-failed { background: #FCEDED; color: #A52A2A; }
.sync-chip.sync-failed .sync-dot { background: #E05252; }
.sync-chip:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }

/* dark (field apps, the office rail) */
.sync-dark .sync-chip { height: 36px; padding: 0 14px; font-size: 14px; gap: 8px; background: rgba(31,157,87,.15); border-color: rgba(31,157,87,.35); color: #8FE0B0; }
.sync-dark .sync-chip.sync-saving { background: rgba(46,127,212,.16); border-color: rgba(46,127,212,.4); color: #A9CCF2; }
.sync-dark .sync-chip.sync-offline { background: rgba(224,147,15,.16); border-color: rgba(224,147,15,.4); color: #F0BE63; }
.sync-dark .sync-chip.sync-failed { background: rgba(224,82,82,.16); border-color: rgba(224,82,82,.45); color: #F3A6A6; }
.sync-dark.sync-compact .sync-chip { height: 32px; padding: 0 12px; font-size: 13px; }

/* the list behind the chip */
.sync-pop {
  position: absolute; z-index: 3000; width: 320px; max-width: calc(100vw - 24px);
  background: #fff; color: var(--text-body, #102A43); border: 1px solid var(--card-border-alt, #E4EAF0);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(10,33,53,.28); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
}
.sync-pop[hidden] { display: none; }
.sync-place-below .sync-pop { top: calc(100% + 8px); right: 0; }
.sync-place-above .sync-pop { bottom: calc(100% + 8px); left: 0; }
.sync-place-right .sync-pop { bottom: 0; left: calc(100% + 12px); }
.sync-pop-title { font: 800 15px var(--font-display, 'Archivo', sans-serif); }
.sync-pop-sub { font: 500 13px/1.45 var(--font-body); color: var(--text-muted, #62748A); }
.sync-pop-list { display: flex; flex-direction: column; margin-top: 6px; max-height: 300px; overflow-y: auto; border-top: 1px solid #EEF2F6; }
.sync-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EEF2F6; }
.sync-row-main { flex: 1; min-width: 0; }
.sync-row-what { font: 700 13.5px var(--font-body); }
.sync-row-sub { font: 500 12px var(--font-body); color: var(--text-muted, #62748A); }
.sync-row.failed .sync-row-sub { color: #A52A2A; }
.sync-row-code { font: 600 11px var(--font-mono, monospace); color: #B07070; margin-top: 3px; word-break: break-all; }
.sync-row-btn { border: 1px solid var(--card-border-alt, #E4EAF0); background: #fff; border-radius: 8px; height: 30px; padding: 0 10px; font: 700 12.5px var(--font-body); color: var(--text-secondary, #3D4F60); cursor: pointer; flex-shrink: 0; }
.sync-pop-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.sync-btn-primary { height: 36px; padding: 0 14px; border-radius: 9px; border: none; background: #A52A2A; color: #fff; font: 700 13.5px var(--font-body); cursor: pointer; }