/* DYCOS — Browser component layer styles (production open-source web components)
 * Charte/Flatpickr/Cleave/Sortable/Tippy live here — tokens only, WCAG AA. */

/* ── Chart.js canvas hosting ── */
[data-dycos-chart] { width: 100% !important; }

/* Keep chart cards from jumping while Chart.js lays out */
.card canvas[data-dycos-chart] { min-height: 200px; }

/* ── Flatpickr — theme overrides to match Dycos brand (dark default) ── */
.flatpickr-calendar { font-family: var(--font-ui, 'IBM Plex Sans Arabic', system-ui); border-radius: var(--r-lg, 14px); box-shadow: var(--elevation-2, 0 12px 32px rgba(0,0,0,.18)); }
.flatpickr-calendar .flatpickr-day.selected { background: var(--gold, #D4AF37); border-color: var(--gold, #D4AF37); }
.flatpickr-calendar .flatpickr-day.today { border-color: var(--gold2, #c5a059); }
.flatpickr-calendar .flatpickr-day:hover { background: color-mix(in srgb, var(--gold, #D4AF37) 18%, transparent) !important; }
.flatpickr-calendar.dark { background: var(--panel, #0b1120); color: var(--txt, #e5e7eb); }
.flatpickr-calendar.dark .flatpickr-months .flatpickr-month { color: var(--txt, #e5e7eb); }
.flatpickr-calendar.dark .flatpickr-weekday { color: var(--mut, #9ca3af); }
.flatpickr-calendar.dark .flatpickr-day:not(.selected):not(.disabled) { color: var(--txt, #e5e7eb); }
.flatpickr-calendar.dark .flatpickr-day.prevMonthDay, .flatpickr-calendar.dark .flatpickr-day.nextMonthDay { color: color-mix(in srgb, var(--mut, #9ca3af) 55%, transparent); }
.flatpickr-calendar.dark .flatpickr-current-month input.cur-year, .flatpickr-calendar.dark .flatpickr-current-month .cur-month { color: var(--txt, #e5e7eb); }
.flatpickr-calendar.dark .flatpickr-am-pm, .flatpickr-calendar.dark .numInputWrapper span { color: var(--mut, #9ca3af); }

/* ── Sortable drag states ── */
.dycos-drag-ghost { opacity: .45; background: var(--panel2, #1a2236); outline: 2px dashed var(--gold, #D4AF37); outline-offset: -2px; }
.dycos-drag-chosen { background: color-mix(in srgb, var(--gold, #D4AF37) 10%, transparent); }
.dycos-drag-swap { background: color-mix(in srgb, var(--ok, #10b981) 14%, transparent); }

/* ── Tippy themes (light/dark tokens) ── */
.tippy-box[data-theme~='dycos-dark'] { background: var(--panel, #0b1120); color: var(--txt, #e5e7eb); border: 1px solid var(--line, #223); box-shadow: var(--elevation-2); }
.tippy-box[data-theme~='dycos-dark'] > .tippy-arrow { color: var(--panel, #0b1120); }
.tippy-box[data-theme~='dycos-light'] { background: var(--panel, #fff); color: var(--txt, #111827); border: 1px solid var(--line, #e5e7eb); box-shadow: var(--elevation-2); }
.tippy-box[data-theme~='dycos-light'] > .tippy-arrow { color: var(--panel, #fff); }

/* WCAG: focus-visible ring for css-driven tooltip targets (keep keyboard reachable) */
.tippy-target:focus-visible { outline: 2px solid var(--gold, #D4AF37); outline-offset: 2px; border-radius: 4px; }

/* Forced-colors safety for the new component chrome */
@media (forced-colors: active) {
  .dycos-drag-ghost { outline-color: Highlight; }
  .flatpickr-calendar.dark { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-dycos-chart] { animation: none !important; }
}