/* data-freshness.css — per-tab "last updated" + split Data Sync control.
 * Owned by workbook-owner. Prefix .df-*. Loaded after workbook.css. Light theme. */

/* ── Layer 1 · freshness dot + relative time on each bottom tab ── */
.df-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 5px; }
.df-rel { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  letter-spacing: .2px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Layer 2 · per-source block injected at the top of the tab ⌄ menu ── */
#dfMenuBlock { padding-top: 3px; padding-bottom: 2px; }
.df-mdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.df-mdot.computed { box-shadow: inset 0 0 0 1.5px #c4c9d4; background: transparent !important; }
.df-msrc-lbl { font-size: 9px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #c4c9d4;
  padding: 4px 10px 2px; }
.df-msrc { display: flex; align-items: center; gap: 8px; padding: 5px 10px; }
.df-msrc .df-mdot { width: 6px; height: 6px; }
.df-msrc-n { flex: 1; color: #211f1c; font-size: 12px; }
.df-msrc-t { color: #6b7280; font-size: 11px; font-variant-numeric: tabular-nums; }
.df-msrc-t.stale { color: #dc2626; font-weight: 600; }
.df-msrc-t.aging { color: #d97706; font-weight: 600; }
.df-mitem { display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin-top: 3px; border-radius: 6px;
  color: #345def; font-weight: 600; font-size: 12px; cursor: pointer; }
.df-mitem:hover { background: #eef2ff; }
.df-mico { display: flex; flex-shrink: 0; }
.df-mdiv { height: 1px; background: #f3f4f6; margin: 5px 6px; }

/* ── Layer 3 · split Data Sync control — sized to match the .exp-btn toolbar
   buttons (padding 3px 9px, 11px text, 5px radius; no fixed height) so it sits
   flush with Export rather than towering over it. ── */
.df-split { position: relative; display: inline-flex; align-items: center; gap: 7px; }
/* Freshness readout — inline (no pill), sits to the RIGHT of the button, shows the actual timestamp. */
.df-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.df-cdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
/* main + caret are one flush unit: no gap, and stretch so the caret matches the
   main's height (the caret has no text, so without stretch it renders shorter). */
.df-grp { display: inline-flex; align-items: stretch; }
/* Secondary (white) styling — matches Export so it doesn't compete with the
   solid-blue "Run Agent" primary CTA. The refresh icon is the only brand accent. */
.df-main, .df-caret { box-sizing: border-box; border: 1px solid #d1d5db; background: #fff; color: #374151;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.35; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.df-main { gap: 5px; padding: 3px 10px; border-right: none; border-radius: 5px 0 0 5px; white-space: nowrap; }
.df-caret { padding: 0 7px; border-left: 1px solid #e5e7eb; border-radius: 0 5px 5px 0; color: #6b7280; }
.df-main:hover, .df-caret:hover, .df-caret.open { background: #f9fafb; border-color: #d1d5db; }
.df-main:disabled, .df-main:disabled + .df-caret { cursor: default; opacity: .7; }
.df-main .df-ico { color: #345def; }
.df-main .df-ico svg { width: 12px; height: 12px; display: block; }
.df-caret svg { width: 11px; height: 11px; display: block; }
.df-ico { display: flex; }
.df-ico.spin { animation: df-spin 1s linear infinite; }
@keyframes df-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .df-ico.spin { animation: none; } }

/* freshness rollup panel under the caret */
.df-panel { position: absolute; z-index: 700; top: calc(100% + 6px); right: 0; min-width: 304px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 32px rgba(17,24,39,.16);
  padding: 6px; display: none; }
.df-panel.open { display: block; }
.df-phd { padding: 9px 11px; }
.df-plbl { font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #9ca3af; }
.df-pagg { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.df-pdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.df-pdiv { height: 1px; background: #f3f4f6; margin: 5px 6px; }
.df-prow { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.df-prow:hover { background: #f9fafb; }
.df-pn { flex: 1; font-size: 12.5px; color: #211f1c; }
.df-pt { font-size: 11.5px; color: #6b7280; font-variant-numeric: tabular-nums; }
.df-pt.stale { color: #dc2626; font-weight: 600; }
.df-pt.aging { color: #d97706; font-weight: 600; }
.df-pall { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  color: #345def; font-weight: 600; font-size: 12.5px; }
.df-pall:hover { background: #eef2ff; }