/* Page-level accents for Optimize, Research, Brands, Track, and History. */

body.wf-dashboard-section .mode-overview-box {
  overflow: hidden;
}
body.wf-dashboard-section .mode-overview-box::before,
body.wf-dashboard-section #tpQuickForm .mode-overview-box::before {
  display: none !important;
}
body.wf-dashboard-section .mode-overview-header,
body.wf-dashboard-section #tpQuickForm .mode-overview-header {
  margin: 0 !important;
  padding: 20px 24px !important;
  background: var(--accent-grad) !important;
  color: #fff !important;
}
body.wf-dashboard-section .mode-overview-title {
  color: #fff !important;
  font-size: 20px !important;
  letter-spacing: -.025em;
}
body.wf-dashboard-section .mode-overview-icon {
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  color: #fff !important;
}
body.wf-dashboard-section .mode-overview-icon i { color: #fff !important; }
body.wf-dashboard-section .mode-overview-content,
body.wf-dashboard-section #tpQuickForm .mode-overview-content {
  padding: 20px 24px 24px !important;
}
body.wf-dashboard-section .mode-overview-section,
body.wf-dashboard-section #tpQuickForm .mode-overview-section {
  background: #fff9f6 !important;
  border-color: var(--border) !important;
}
body.wf-dashboard-section .mode-overview-section-title.what-it-does,
body.wf-dashboard-section .mode-overview-section-title.what-it-does i,
body.wf-dashboard-section #tpQuickForm .mode-overview-section-title.what-it-does i {
  color: var(--accent) !important;
}
body.wf-dashboard-section .mode-overview-section-title.when-to-use,
body.wf-dashboard-section .mode-overview-section-title.when-to-use i {
  color: #9f4b36 !important;
}
body.wf-dashboard-section .mode-overview-section-title.why-use-it,
body.wf-dashboard-section .mode-overview-section-title.why-use-it i {
  color: #aa6940 !important;
}

body.wf-dashboard-section #tpQuickForm .credit-estimate-bar {
  background: #fff7f3 !important;
  border-color: var(--border) !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: var(--radius) !important;
}
body.wf-dashboard-section #tpQuickForm .credit-estimate-icon {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
body.wf-dashboard-section #tpQuickForm .credit-estimate-item strong { color: var(--accent) !important; }
body.wf-dashboard-section .app-content :is(a, small, i)[style*="color:#0f4deb"],
body.wf-dashboard-section .app-content :is(a, small, i)[style*="color:#0d6efd"],
body.wf-dashboard-section .app-content :is(a, small, i)[style*="color: #0d6efd"],
body.wf-dashboard-section .app-content i[style*="color:#7c3aed"],
body.wf-dashboard-section .app-content i[style*="color:#3b82f6"] {
  color: var(--accent) !important;
}

/* Tables and tool results keep their existing structure and status colors. */
body.wf-dashboard-section .app-content :is(.table, table.dataTable, .pf-tbl) {
  border-color: var(--border);
}
body.wf-dashboard-section .app-content :is(.table, table.dataTable, .pf-tbl) thead th {
  background: #fff4f0;
  border-bottom-color: var(--accent-line);
  color: var(--accent-ink);
}
body.wf-dashboard-section .app-content :is(.table, table.dataTable, .pf-tbl) tbody tr:hover {
  background: #fff7f3;
}
body.wf-dashboard-section .app-content :is(.table, table.dataTable, .pf-tbl) td {
  border-bottom-color: var(--border);
}
body.wf-dashboard-section .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.wf-dashboard-section .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent-grad) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
body.wf-dashboard-section .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  color: var(--accent) !important;
}
body.wf-dashboard-section .dataTables_wrapper :is(input, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Processing and neutral history states use the dashboard red. */
body.wf-history .status-icon:is(.processing, .scheduled) { color: var(--accent) !important; }
body.wf-history .action-btn.view {
  background: var(--accent-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}
body.wf-history .stat-card.total,
body.wf-history .empty-state-icon { background: var(--accent-grad) !important; }
body.wf-history .stat-card.total :is(.stat-number, .stat-label) { color: #fff !important; }
body.wf-history .modal .modal-header.bg-info { background: var(--accent-grad) !important; }
body.wf-history .rt-badge.proc,
body.wf-history .rt-type {
  color: var(--accent-ink) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
}
body.wf-history a.rt-view { color: var(--accent) !important; }
body.wf-history .row-updated { animation: wf-history-highlight 2s ease-out; }
@keyframes wf-history-highlight {
  from { background: rgba(127, 29, 29, .14); }
  to { background: transparent; }
}

/* Research and planning controls with fixed blue fills. */
body.wf-dashboard-section .cr-plan-row.on,
body.wf-dashboard-section .tp-batchbar,
body.wf-dashboard-section .gp-linkrule,
body.wf-dashboard-section #crNote,
body.wf-dashboard-section #crBrandTermsEmpty {
  background: #fff7f3 !important;
  border-color: var(--accent-line) !important;
}
body.wf-dashboard-section :is(.cr-plan-row .meta .feat, .cr-plan-badge,
  .cr-strength .cat, .cr-tag-g, .cr-variant) {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  color: var(--accent-ink) !important;
}
body.wf-dashboard-section .gp-group > .hd .sel-all:hover { background: var(--accent-soft) !important; }
body.wf-dashboard-section .cr-share-h i,
body.wf-dashboard-section .cr-dlg-head i { color: var(--accent) !important; }

/* Brand manager: replace the old violet highlights while retaining status colors. */
body.wf-brands .bf-hero {
  background: radial-gradient(700px 300px at 0 0, rgba(127, 29, 29, .10), transparent 70%), #fffaf8;
  border-color: var(--border);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.wf-brands .bf-hero h2,
body.wf-brands .bf-brand-text h3 { color: var(--text); }
body.wf-brands .bf-hero p.bf-sub,
body.wf-brands .bf-form-label { color: var(--text-soft); }
body.wf-brands .bf-url-input { background: #fff; border-color: var(--border-strong); color: var(--text); }
body.wf-brands .bf-url-input:focus,
body.wf-brands .bf-select:focus { box-shadow: var(--ring); }
body.wf-brands .bf-add-btn,
body.wf-brands .bf-avatar { background: var(--accent-grad); box-shadow: 0 7px 19px rgba(127, 29, 29, .2); }
body.wf-brands .bf-add-btn:hover { box-shadow: 0 10px 24px rgba(127, 29, 29, .28); }
body.wf-brands .bf-table { background: #fff; border-color: var(--border); box-shadow: var(--shadow-card); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.wf-brands .bf-thead,
body.wf-brands .bf-detail-inner { background: #fff4f0; border-color: var(--border); }
body.wf-brands .bf-row { border-color: var(--border); }
body.wf-brands .bf-row-main:hover,
body.wf-brands .bf-row.open .bf-row-main { background: #fff7f3; }
body.wf-brands .bf-row.open .bf-chevron { border-color: var(--accent-line); }
body.wf-brands .bf-btn-connect,
body.wf-brands .bf-btn-primary,
body.wf-brands .bf-chip.has,
body.wf-brands .bf-section-label .bf-count,
body.wf-brands .bf-btn-ghost.bf-track-setup {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
}
body.wf-brands .bf-btn-connect:hover,
body.wf-brands .bf-btn-primary:hover,
body.wf-brands .bf-btn-ghost.bf-track-setup:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
body.wf-brands .bf-status.working { background: var(--accent-soft); color: var(--accent-ink); }
body.wf-brands .bf-bar-inner { background: var(--accent-grad); }
body.wf-brands .bf-empty i,
body.wf-brands .bf-dlg-h i { color: var(--accent); }

/* Tracking: chips and score highlights follow the shared palette. */
body.wf-track .tk-brand-chip:hover { box-shadow: 0 3px 12px rgba(127, 29, 29, .14); }
body.wf-track .tk-chip-add { background: var(--accent-soft); }
body.wf-track .pf-score.ok { color: var(--accent-ink); background: var(--accent-soft); }
body.wf-track .tk-dlg-h i { color: var(--accent) !important; }

@media (max-width: 768px) {
  body.wf-dashboard-section .mode-overview-header { padding: 17px 16px !important; }
  body.wf-dashboard-section .mode-overview-content { padding: 16px !important; }
  body.wf-dashboard-section .mode-overview-title { font-size: 17px !important; }
  body.wf-brands .bf-hero { padding: 24px 20px; }
}