/*
 * Dark-mode component overrides.
 *
 * tokens.css already re-points every design token for dark mode, which carries
 * most of the interface on its own. This file repairs the places that were
 * written with a literal light colour - `background:white`, `#fff`, pale tints
 * - because those would otherwise stay white while the text around them turns
 * light, which is the one failure mode a half-finished dark theme always has.
 *
 * Everything here is keyed on `[data-theme="dark"]`, which assets/js/theme.js
 * stamps on the root element before first paint (from the stored preference, or
 * from `prefers-color-scheme` when the visitor has never chosen). The media
 * query in tokens.css is the no-JavaScript fallback for the palette itself.
 */

[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* --- shell chrome --------------------------------------------------------- */
[data-theme="dark"] .topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); }
[data-theme="dark"] .drawer,
[data-theme="dark"] .kbd,
[data-theme="dark"] .command-palette,
[data-theme="dark"] .toast,
[data-theme="dark"] .modal,
[data-theme="dark"] .popover { background: var(--surface); color: var(--text); }
[data-theme="dark"] .modal-backdrop { background: rgba(3, 6, 14, .72); }

/* --- generic surfaces ----------------------------------------------------- */
[data-theme="dark"] .card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .table-row,
[data-theme="dark"] .pagination button,
[data-theme="dark"] .button.secondary,
[data-theme="dark"] .button.outline-primary,
[data-theme="dark"] .button-like,
[data-theme="dark"] .mini-select,
[data-theme="dark"] .search-input,
[data-theme="dark"] .segmented button.active,
[data-theme="dark"] .btn.danger,
[data-theme="dark"] .button.danger-outline { background: var(--surface); color: var(--text); }
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select,
[data-theme="dark"] .toolbar input,
[data-theme="dark"] .toolbar select,
[data-theme="dark"] .filter-bar select,
[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea { background: var(--surface-subtle); color: var(--text); }
[data-theme="dark"] .status-chip.neutral,
[data-theme="dark"] .badge.neutral { background: var(--surface-muted); color: var(--text-soft); }
[data-theme="dark"] .data-table tbody tr:hover { background: var(--surface-hover); }
[data-theme="dark"] .add-media-tile { background: var(--surface-subtle); }

/* --- application pages ---------------------------------------------------- */
[data-theme="dark"] .destination-card,
[data-theme="dark"] .destination-card.disabled,
[data-theme="dark"] .preview-platform,
[data-theme="dark"] .connect-menu,
[data-theme="dark"] .ai-tool,
[data-theme="dark"] .ai-tool-grid button,
[data-theme="dark"] .approval-card,
[data-theme="dark"] .approval-actions,
[data-theme="dark"] .inbox-layout,
[data-theme="dark"] .conversation-item,
[data-theme="dark"] .conversation-row,
[data-theme="dark"] .message-bubble,
[data-theme="dark"] .suggested-reply,
[data-theme="dark"] .suggested > div button,
[data-theme="dark"] .report-option,
[data-theme="dark"] .editor-shell,
[data-theme="dark"] .step-number,
[data-theme="dark"] .stepper b { background: var(--surface); color: var(--text); }
[data-theme="dark"] .kanban-column,
[data-theme="dark"] .messages,
[data-theme="dark"] .outgoing > div,
[data-theme="dark"] .message-bubble.outbound,
[data-theme="dark"] .conversation-row:hover { background: var(--surface-muted); color: var(--text); }
[data-theme="dark"] .week-grid-bg i { border-right-color: var(--border); border-bottom-color: var(--border); }
[data-theme="dark"] .calendar-event.primary { background: var(--primary-soft); }
[data-theme="dark"] .calendar-event.info { background: var(--blue-soft); }
[data-theme="dark"] .calendar-event.success { background: var(--green-soft); }
[data-theme="dark"] .calendar-event.warning { background: var(--orange-soft); border-color: var(--orange); }
[data-theme="dark"] .calendar-event.danger { background: var(--red-soft); border-color: var(--red); }
[data-theme="dark"] .internal-note,
[data-theme="dark"] .message-bubble.note { background: var(--yellow-soft); border-color: var(--yellow); color: var(--text); }
[data-theme="dark"] .donut:after,
[data-theme="dark"] .category-donut:after { background: var(--surface); }
[data-theme="dark"] .module-bar-list span { background: var(--surface-muted); }
[data-theme="dark"] .onboarding-progress i { background: var(--surface-muted); }

/* --- enterprise modules --------------------------------------------------- */
[data-theme="dark"] .module-notice { background: var(--yellow-soft); border-color: var(--yellow); color: var(--text); }
[data-theme="dark"] .module-notice span:last-child,
[data-theme="dark"] .module-notice p { color: var(--text-soft); }
[data-theme="dark"] .module-catalog-card,
[data-theme="dark"] .module-board-column > header span,
[data-theme="dark"] .module-work-card,
[data-theme="dark"] .automation-node { background: var(--surface); color: var(--text); }
[data-theme="dark"] .automation-canvas,
[data-theme="dark"] .settings-preview { background: linear-gradient(135deg, var(--surface-subtle), var(--surface-muted)); }

/* --- public marketing pages and authentication ---------------------------- */
[data-theme="dark"] .public-shell { background: var(--bg); color: var(--text); }
[data-theme="dark"] .public-header { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom-color: var(--border); }
[data-theme="dark"] .public-brand b { color: var(--primary-strong); }
[data-theme="dark"] .public-hero,
[data-theme="dark"] .public-page-hero,
[data-theme="dark"] .legal-hero,
[data-theme="dark"] .docs-hero { background: radial-gradient(circle at 78% 14%, var(--primary-soft) 0, transparent 32%), var(--bg); }
[data-theme="dark"] .public-feature-grid article,
[data-theme="dark"] .about-grid article,
[data-theme="dark"] .support-grid article,
[data-theme="dark"] .security-control-grid article,
[data-theme="dark"] .product-module-card,
[data-theme="dark"] .architecture-flow > div,
[data-theme="dark"] .public-integration-grid article,
[data-theme="dark"] .pricing-grid article,
[data-theme="dark"] .support-sla span,
[data-theme="dark"] .docs-search,
[data-theme="dark"] .docs-content section button,
[data-theme="dark"] .public-mobile-menu button,
[data-theme="dark"] .integration-filter button,
[data-theme="dark"] .public-product-visual,
[data-theme="dark"] .feature-visual span,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .auth-sso-button,
[data-theme="dark"] .passkey-button,
[data-theme="dark"] .password-field button,
[data-theme="dark"] .onboarding-card,
[data-theme="dark"] .public-contact-form { background: var(--surface); color: var(--text); }
[data-theme="dark"] .docs-search input { background: transparent; color: var(--text); }
[data-theme="dark"] .public-cta,
[data-theme="dark"] .architecture-band,
[data-theme="dark"] .public-values,
[data-theme="dark"] .support-sla,
[data-theme="dark"] .auth-shell { background: var(--surface-subtle); }
[data-theme="dark"] .visual-top,
[data-theme="dark"] .visual-sidebar { background: var(--surface-subtle); }
[data-theme="dark"] .visual-chart { background: linear-gradient(to top, var(--surface-muted), var(--surface)); }
[data-theme="dark"] .feature-visual { background: linear-gradient(145deg, var(--primary-soft), var(--surface)); }
[data-theme="dark"] .product-module-card > span:first-child { color: var(--surface-muted); }
[data-theme="dark"] .public-notice { background: var(--yellow-soft); border-color: var(--yellow); }
[data-theme="dark"] .public-notice p { color: var(--text-soft); }
[data-theme="dark"] .btn.light { background: var(--surface); border-color: var(--border-strong); color: var(--primary-strong); }
[data-theme="dark"] .legal-contact { background: var(--surface-muted); }
[data-theme="dark"] .public-footer { background: #05080f; }

/* Threads, X and TikTok brand marks are near black, so on a dark surface the
   badge disappears entirely. A hairline ring gives every badge an edge without
   touching the brand colour itself. */
[data-theme="dark"] .platform-badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30); }

/* --- theme toggle --------------------------------------------------------- */
.theme-toggle { cursor: pointer; }
.theme-toggle .icon { display: block; }