/* ============================================================
   Grid cell formatters — one consistent, theme-aware system.

   Single source of truth for how every grid cell "chip" looks.
   Formatters emit semantic markup (CSS classes only, no inline
   style, no innerHTML) and ALL visual styling lives here.

   Visual language (Apple/Linear-style soft chips):
     • Status / kind / enum  → soft-tinted pill + leading dot
                               (Bootstrap `badge rounded-pill text-bg-*`,
                                re-skinned below from solid → soft)
     • Email / phone / url    → width-aware link cell (icon + ellipsis)
     • Money / qty / % / order → plain tabular number (calm, no chrome)
     • Boolean                → check (✓) / dash (–) icon
     • File extension         → small soft tag with type colour

   Theme-awareness comes from Bootstrap 5.3 subtle tokens
   (--bs-*-bg-subtle / --bs-*-text-emphasis / --bs-*-border-subtle),
   which are redefined per theme, so every chip adapts to light/dark
   with accessible contrast automatically.
   ============================================================ */

/* ── Status / kind / enum pill ───────────────────────────────────────
   Formatters keep emitting Bootstrap's `badge rounded-pill text-bg-<tone>`.
   Inside a grid cell we override the solid fill with a soft tint so the
   whole app gets the same calm pill in one place — no per-formatter CSS. */
.slick-cell .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid transparent;
  vertical-align: middle;
  transition: filter var(--s-transition, 0.15s ease);
}
/* Leading status dot — pure CSS, inherits the pill's text colour */
.slick-cell .badge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* Tone map: solid Bootstrap utility → soft subtle trio (theme-aware) */
.slick-cell .badge.text-bg-secondary {
  color: var(--bs-secondary-color, #6e6e73) !important;
  background-color: var(--bs-secondary-bg-subtle) !important;
  border-color: var(--bs-border-color) !important;
}
.slick-cell .badge.text-bg-success {
  color: var(--bs-success-text-emphasis) !important;
  background-color: var(--bs-success-bg-subtle) !important;
  border-color: var(--bs-success-border-subtle) !important;
}
.slick-cell .badge.text-bg-danger {
  color: var(--bs-danger-text-emphasis) !important;
  background-color: var(--bs-danger-bg-subtle) !important;
  border-color: var(--bs-danger-border-subtle) !important;
}
.slick-cell .badge.text-bg-warning {
  color: var(--bs-warning-text-emphasis) !important;
  background-color: var(--bs-warning-bg-subtle) !important;
  border-color: var(--bs-warning-border-subtle) !important;
}
.slick-cell .badge.text-bg-info {
  color: var(--bs-info-text-emphasis) !important;
  background-color: var(--bs-info-bg-subtle) !important;
  border-color: var(--bs-info-border-subtle) !important;
}
.slick-cell .badge.text-bg-primary {
  color: var(--bs-primary-text-emphasis) !important;
  background-color: var(--bs-primary-bg-subtle) !important;
  border-color: var(--bs-primary-border-subtle) !important;
}
.slick-cell .badge.text-bg-light {
  color: var(--bs-secondary-color, #6e6e73) !important;
  background-color: var(--bs-secondary-bg-subtle) !important;
  border-color: var(--bs-border-color) !important;
}
.slick-cell .badge.text-bg-dark {
  color: var(--bs-emphasis-color, #1d1d1f) !important;
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}
/* Center-aligned status columns: keep the pill centered, not stretched */
.slick-cell.r .badge,
.slick-cell.c .badge { vertical-align: middle; }

/* ── Link cell (email / phone) ───────────────────────────────────────
   Width-aware: icon never shrinks, the value clips with an ellipsis so
   long emails never blow out the column or overlap neighbours.          */
.fmt-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: 0.85rem;
}
.fmt-link > i {
  flex: 0 0 auto;
  font-size: 0.8em;
  opacity: 0.75;
  color: var(--s-tool-icon, #86868b);
}
.fmt-link > a {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--bs-link-color);
  text-decoration: none;
}
.fmt-link > a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* ── URL favicon (rendered inside .fmt-link — same light style as email/phone) ── */
.fmt-link > img.fmt-favicon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 3px;
  object-fit: contain;
}
.fmt-url-bad { color: var(--bs-danger-text-emphasis); font-size: 0.85rem; }

/* ── Download icon button ────────────────────────────────────────────── */
.fmt-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bs-border-radius-sm, 7px);
  color: var(--s-tool-icon, #86868b);
  text-decoration: none;
  transition: background var(--s-transition, 0.15s ease), color var(--s-transition, 0.15s ease);
}
.fmt-download:hover {
  background: var(--s-row-bg-hover, var(--bs-tertiary-bg));
  color: var(--bs-link-color);
}

/* ── Plain tabular number (money / qty / percent / display-order) ──────
   No chrome — calm right-aligned figures. Tabular so digits don't jitter. */
.fmt-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fmt-num-muted {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--bs-secondary-color, #86868b);
}
/* Percent gets a faint signal tint via text colour only (no box) */
.fmt-pct-high { color: var(--bs-success-text-emphasis); }
.fmt-pct-mid  { color: var(--bs-warning-text-emphasis); }
.fmt-pct-low  { color: var(--bs-danger-text-emphasis); }

/* ── Boolean (check / dash) ──────────────────────────────────────────── */
.fmt-bool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.9rem;
}
.fmt-bool-yes { color: var(--bs-success); }
.fmt-bool-no  { color: var(--bs-secondary-color, #c7c7cc); opacity: 0.7; }

/* ── File-extension tag (small, type-coloured, soft) ─────────────────── */
.fmt-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: var(--bs-border-radius-sm, 7px);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fmt-tag-color, var(--bs-secondary-color));
  background-color: color-mix(in srgb, var(--fmt-tag-color, var(--bs-secondary-color)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fmt-tag-color, var(--bs-secondary-color)) 28%, transparent);
}
.fmt-tag > i { font-size: 0.85em; }
.fmt-ext-img { --fmt-tag-color: #3b82f6; } .fmt-ext-vid { --fmt-tag-color: #6366f1; }
.fmt-ext-aud { --fmt-tag-color: #22c55e; } .fmt-ext-pdf { --fmt-tag-color: #ef4444; }
.fmt-ext-doc { --fmt-tag-color: #2563eb; } .fmt-ext-xls { --fmt-tag-color: #16a34a; }
.fmt-ext-ppt { --fmt-tag-color: #f97316; } .fmt-ext-zip { --fmt-tag-color: #9ca3af; }
.fmt-ext-txt, .fmt-ext-file { --fmt-tag-color: #6b7280; }

/* ── Currency (flag + code) ──────────────────────────────────────────── */
.fmt-currency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fmt-currency > img {
  width: 20px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

/* ── UTC date/time (relative time + tooltip) ─────────────────────────── */
.s-utc-datetime {
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color, #6e6e73);
  cursor: default;
}

/* ── Inline thumbnail + grid inline-edit inputs (CSP-safe, off inline style) ── */
.inline-image-thumb { max-height: 38px; max-width: 68px; border-radius: 4px; object-fit: cover; }
.s-edit-num { width: 100%; height: 100%; box-sizing: border-box; }
.s-edit-check { width: 18px; height: 18px; cursor: pointer; }