/* ─────────────────────────────────────────────────────────────────────────
   Telios UI — component theming. Brand overrides for the third-party libs the
   runtime (telios-ui.js) lazy-loads, plus form-validation states. Inherited via
   base.html so every page gets the branded look with zero per-page CSS.
   Visual tokens come from tokens.css (single source of truth).
   ──────────────────────────────────────────────────────────────────────── */

/* ---- Grid.js (TanStack Table equivalent) — branded over the mermaid theme -- */
.gridjs-wrapper { box-shadow: none; border: 1px solid var(--border); border-radius: var(--radius); }
.gridjs-table { font-family: Inter, system-ui, sans-serif; }
.tui-grid-th, .gridjs-th {
  background: var(--off-white); color: var(--navy); font-weight: 600;
  border-color: var(--border); padding: 12px 16px; font-size: 13px;
}
.tui-grid-td, .gridjs-td {
  color: var(--text-secondary); border-color: var(--border);
  padding: 12px 16px; font-size: 14px;
}
.gridjs-tr:hover .gridjs-td { background: var(--blue-light); }
.gridjs-search-input {
  border: 1.5px solid var(--border); border-radius: 10px; font-family: inherit;
  padding: 8px 12px; outline: none;
}
.gridjs-search-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.28); }
.gridjs-pagination .gridjs-pages button { border-color: var(--border); color: var(--text-secondary); }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.gridjs-pagination .gridjs-summary { color: var(--text-muted); }

/* ---- ApexCharts (Recharts/Tremor equivalent) — typographic polish --------- */
.apexcharts-canvas { font-family: Inter, system-ui, sans-serif !important; }
.apexcharts-tooltip {
  border: 1px solid var(--border) !important; box-shadow: var(--tw-shadow, 0 8px 28px -8px rgba(15,34,56,0.18)) !important;
  border-radius: 10px !important;
}
.apexcharts-tooltip-title { background: var(--off-white) !important; border-bottom: 1px solid var(--border) !important; font-weight: 600; }

/* ---- Forms — Just-Validate (RHF + Zod equivalent) error states ------------ */
.tui-field-error { border-color: #C0392B !important; }
.tui-field-error:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15) !important; }
.tui-field-error-label { color: #C0392B; font-size: 13px; margin-top: 4px; display: block; }

/* ---- Motion reveal — keep content visible if JS/Motion never runs ---------- */
/* (telios-ui.js only sets opacity:0 inline AFTER Motion has loaded, so no FOUC
   and no hidden content when JS is disabled. Nothing needed here, documented
   intentionally.) */

/* ---- Trusted-by logo marquee (modern B2B) -------------------------------- */
/* Seamless infinite scroll: the track holds two identical logo sets and slides
   -50% (one full set). Edge mask fades logos in/out. Pauses on hover. Falls back
   to a static, centered, wrapped row under prefers-reduced-motion. */
.tui-marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.tui-marquee { display: flex; width: max-content; animation: tui-marquee-scroll 50s linear infinite; }
.tui-marquee:hover { animation-play-state: paused; }
@keyframes tui-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tui-marquee-mask { -webkit-mask-image: none; mask-image: none; }
  .tui-marquee { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .tui-marquee-dup { display: none; }
}

/* ---- Highlighted "winner" feature card (navy) — bright-gold check bullets -- */
.feature-win .prose-telios ul { list-style: none; padding-left: 0; }
.feature-win .prose-telios li { position: relative; padding-left: 1.6em; }
.feature-win .prose-telios li::marker { content: ""; }
.feature-win .prose-telios li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--gold-bright); font-weight: 700;
}