/* Shared dark-mode overrides for all embedded FloSense HTMLs.
   Matches the parent app's dark palette:
   - page bg:      #0B0B10 / #0E0E14
   - surface:      #14141B
   - surface-2:    #1B1B24
   - border:       #26262F
   - text:         #E7E7EE
   - muted:        #9A9AA6
   - indigo:       #5252D8 (logo) / tints via alpha
*/
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background: #0E0E14 !important;
  color: #E7E7EE !important;
}

/* CSS var remap for cards that use --ink/--body/--muted/--border/--indigo-* */
html[data-theme="dark"] {
  --ink: #E7E7EE;
  --body: #C6C6CF;
  --muted: #9A9AA6;
  --border: #26262F;
  --border-2: #2E2E38;
  --bg-soft: #14141B;
  --bg-hover: #1B1B24;
  --indigo: #7D7BEA;
  --indigo-deep: #A6A5F0;
  --indigo-tint: rgba(82, 82, 216, 0.16);
  --amber-tint: rgba(217, 119, 6, 0.16);
  --ink-900: #E7E7EE;
  --ink-700: #C6C6CF;
  --ink-600: #A9A9B4;
  --ink-500: #8E8E99;
  --ink-400: #6E6E78;
  --ink-300: #5A5A64;
  --ink-200: #3F3F48;
  --ink-150: #33333B;
  --accent: #7D7BEA;
  --accent-dark: #5252D8;
  --accent-tint: rgba(82, 82, 216, 0.14);
  --accent-tint2: rgba(82, 82, 216, 0.22);
  --accent-text: #A6A5F0;
  --purple: #A78BFA;
  --purple-tint: rgba(124, 58, 237, 0.18);
  --teal: #2DD4BF;
  --teal-tint: rgba(13, 148, 136, 0.16);
  --blue: #60A5FA;
  --blue-tint: rgba(37, 99, 235, 0.16);
  --green: #22C55E;
  --green-text: #4ADE80;
  --green-tint: rgba(22, 163, 74, 0.18);
  --amber: #F59E0B;
  --amber-text: #FBBF24;
  --amber-border: rgba(217, 119, 6, 0.45);
  --red: #F87171;
  --red-text: #FCA5A5;
  --red-tint: rgba(220, 38, 38, 0.18);
  --red-border: rgba(220, 38, 38, 0.45);
}

/* Agent card structural surfaces */
html[data-theme="dark"] .card {
  background: #14141B !important;
  border-color: #26262F !important;
}
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  border-color: #26262F !important;
}

/* Common hardcoded light surfaces */
html[data-theme="dark"] [style*="#F1F5F9"],
html[data-theme="dark"] [style*="#F8FAFC"],
html[data-theme="dark"] [style*="#FAFBFC"] {
  background: #1B1B24 !important;
}

/* Status banners: keep semantic hue but darken surface */
html[data-theme="dark"] .status-banner {
  background: #1B1B24 !important;
  border-color: #2E2E38 !important;
  color: #C6C6CF !important;
}
html[data-theme="dark"] .status-banner.ok {
  background: rgba(22, 163, 74, 0.14) !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
  color: #4ADE80 !important;
}
html[data-theme="dark"] .status-banner.warn {
  background: rgba(217, 119, 6, 0.14) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
  color: #FBBF24 !important;
}
html[data-theme="dark"] .status-banner.mitigating {
  background: rgba(217, 119, 6, 0.14) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
  color: #FBBF24 !important;
}
html[data-theme="dark"] .status-banner.resolved {
  background: rgba(22, 163, 74, 0.14) !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
  color: #4ADE80 !important;
}
html[data-theme="dark"] .status-banner[style*="FEF2F2"],
html[data-theme="dark"] .status-banner[style*="FEE"] {
  background: rgba(220, 38, 38, 0.16) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #FCA5A5 !important;
}

/* Chips / rows / tracks with hardcoded pale fills */
html[data-theme="dark"] .source-chip,
html[data-theme="dark"] .pr-row,
html[data-theme="dark"] .impact-stat,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .alloc-row,
html[data-theme="dark"] .queue-row,
html[data-theme="dark"] .stage-row,
html[data-theme="dark"] .digest-row,
html[data-theme="dark"] .list-row,
html[data-theme="dark"] .stat-card {
  background: #1B1B24 !important;
  border-color: #2E2E38 !important;
  color: #C6C6CF !important;
}
html[data-theme="dark"] .source-chip.synced,
html[data-theme="dark"] .pr-row.flagged,
html[data-theme="dark"] .urgent-banner {
  background: rgba(82, 82, 216, 0.14) !important;
  border-color: rgba(82, 82, 216, 0.35) !important;
  color: #A6A5F0 !important;
}
html[data-theme="dark"] .bar-track {
  background: #26262F !important;
}
html[data-theme="dark"] .bubble {
  background: rgba(82, 82, 216, 0.18) !important;
  color: #A6A5F0 !important;
}
html[data-theme="dark"] .agent-badge {
  background: rgba(82, 82, 216, 0.22) !important;
  color: #A6A5F0 !important;
}

/* Any remaining pure-white surfaces or hardcoded light color inline */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFFFFF"],
html[data-theme="dark"] [style*="background: #FFFFFF"] {
  background: #14141B !important;
}

/* Product-loop stage (flosense-hero-loop.html) — background surfaces */
html[data-theme="dark"] #stage-wrap,
html[data-theme="dark"] #canvas,
html[data-theme="dark"] .scene,
html[data-theme="dark"] .main {
  background: #0E0E14 !important;
}
html[data-theme="dark"] .sidebar {
  background: #14141B !important;
  border-color: #26262F !important;
}
html[data-theme="dark"] .topbar {
  border-color: #26262F !important;
}
html[data-theme="dark"] .side-search-box {
  background: #1B1B24 !important;
  color: #9A9AA6 !important;
}
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .ghost-btn {
  background: #14141B !important;
  border-color: #26262F !important;
  color: #C6C6CF !important;
}
html[data-theme="dark"] .side-item {
  color: #C6C6CF !important;
}
html[data-theme="dark"] .side-item.active {
  background: rgba(82, 82, 216, 0.22) !important;
  color: #A6A5F0 !important;
}
html[data-theme="dark"] .side-badge {
  background: #26262F !important;
  color: #C6C6CF !important;
}
html[data-theme="dark"] .side-user {
  border-color: #26262F !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #33333B !important;
}

/* =========================================================
   Hero product loop (flosense-hero-loop.html) — comprehensive
   dark overrides. The file hardcodes light hexes for many
   surfaces (buttons, panels, rows, diff cards, action bar,
   detail pane, code blocks). Force them to the app palette.
   ========================================================= */
html[data-theme="dark"] #stage-wrap,
html[data-theme="dark"] #canvas,
html[data-theme="dark"] .scene,
html[data-theme="dark"] .main,
html[data-theme="dark"] .detail-pane,
html[data-theme="dark"] .action-bar,
html[data-theme="dark"] .diff-heads,
html[data-theme="dark"] .sec-card {
  background: #0E0E14 !important;
}
html[data-theme="dark"] .sidebar {
  background: #14141B !important;
  border-right-color: #26262F !important;
}
html[data-theme="dark"] .side-search-box {
  background: #1B1B24 !important;
  color: #9A9AA6 !important;
}
html[data-theme="dark"] .side-search-box kbd {
  background: #14141B !important;
  border-color: #26262F !important;
  color: #9A9AA6 !important;
}
html[data-theme="dark"] .side-item.active {
  background: rgba(82, 82, 216, 0.22) !important;
  color: #A6A5F0 !important;
}
html[data-theme="dark"] .side-badge {
  background: #26262F !important;
  color: #C6C6CF !important;
}
html[data-theme="dark"] .side-user-name,
html[data-theme="dark"] .topbar .crumb-cur,
html[data-theme="dark"] .sig-title,
html[data-theme="dark"] .agent-name {
  color: #E7E7EE !important;
}
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .ghost-btn,
html[data-theme="dark"] .agent-btn.secondary,
html[data-theme="dark"] .btn.line,
html[data-theme="dark"] .btn.danger {
  background: #14141B !important;
  border-color: #2E2E38 !important;
  color: #C6C6CF !important;
}
html[data-theme="dark"] .agent-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .insight-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .param-table,
html[data-theme="dark"] .diff-card {
  background: #14141B !important;
  border-color: #26262F !important;
}
html[data-theme="dark"] .sig-icon,
html[data-theme="dark"] .row-icon,
html[data-theme="dark"] .row-avatar,
html[data-theme="dark"] .mono-chip,
html[data-theme="dark"] .type-pill,
html[data-theme="dark"] .src-chip {
  background: #1B1B24 !important;
  color: #C6C6CF !important;
  border-color: #2E2E38 !important;
}
html[data-theme="dark"] .row {
  border-bottom-color: #26262F !important;
}
html[data-theme="dark"] .row.is-selected {
  background: rgba(82, 82, 216, 0.14) !important;
}
html[data-theme="dark"] .tab-btn {
  color: #9A9AA6 !important;
}
html[data-theme="dark"] .tab-btn.active {
  background: #26262F !important;
  color: #E7E7EE !important;
}
html[data-theme="dark"] .sort-btn {
  color: #9A9AA6 !important;
}
html[data-theme="dark"] .hr {
  background: #26262F !important;
}
html[data-theme="dark"] .diff-card-head {
  background: #1B1B24 !important;
  border-bottom-color: #26262F !important;
}
html[data-theme="dark"] .diff-col.rm {
  background: rgba(220, 38, 38, 0.14) !important;
}
html[data-theme="dark"] .diff-col.add {
  background: rgba(22, 163, 74, 0.14) !important;
}
html[data-theme="dark"] .diff-col.empty {
  background: #1B1B24 !important;
}
html[data-theme="dark"] .diff-vsep {
  background: #26262F !important;
}
html[data-theme="dark"] .action-bar {
  border-top-color: #26262F !important;
}
html[data-theme="dark"] .warn-box {
  background: rgba(217, 119, 6, 0.14) !important;
  border-color: rgba(217, 119, 6, 0.4) !important;
}
html[data-theme="dark"] .warn-box span {
  color: #FBBF24 !important;
}
html[data-theme="dark"] .code-block {
  background: #08080C !important;
  color: #E4E4E8 !important;
}
html[data-theme="dark"] .success-circle {
  background: rgba(22, 163, 74, 0.18) !important;
  color: #4ADE80 !important;
}
/* Dark-mode text color fallback for hardcoded ink #27272A */
html[data-theme="dark"] [style*="#27272A"] {
  color: #E7E7EE !important;
}