deerflow-code/frontend-web/src/strategy-components/components/task-components/css/strategy-data.css

@import "../../../../../docs/ui规范-深蓝/tokens.css";

/**
 * Strategy task components styles migrated from web-code/index.css
 * Used by TaskAnalyzes, SentimentAnalyzes, ActionAnalyzes and related children.
 */

/* ── CSS variables (light) ─────────────────────────────────────────────── */
.strategy-data {
  --color-main: #cf1322;
  --td-brand-color: #ce2d39;
  --bg-color: #fef6f6;
  --card-border: #fa9196;
  --text-color: #222222;

  --card-bg: 0 0% 100%;
  --card-hover: 0 86% 97%;
  --border-color: 0 76% 89%;
  --input-bg: 0 0% 100%;
  --input-border: 0 76% 89%;
}

/* ── CSS variables (dark) ────────────────────────────────────────────── */
.dark .strategy-data {
  --color-main: var(--color-primary);
  --td-brand-color: var(--color-primary);
  --bg-color: rgba(22, 119, 255, 0.12);
  --card-border: rgba(110, 136, 176, 0.32);
  --text-color: var(--color-text-strong);

  --card-bg: 220 59% 16%;
  --card-hover: 219 55% 22%;
  --border-color: 220 54% 29%;
  --input-bg: 220 71% 10%;
  --input-border: 220 35% 38%;
}

/* ── Theme card (TaskCard, KanbanColumn) ─────────────────────────────── */
.strategy-data .theme-card {
  background-color: hsl(var(--card-bg));
}

.strategy-data .theme-card-hover:hover {
  background-color: hsl(var(--card-hover));
}

.strategy-data .theme-transition {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* ── Scrollbar (KanbanColumn) ────────────────────────────────────────── */
.strategy-data .scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #ddd #f1f1f1;
}

.strategy-data .scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.strategy-data .scrollbar-thin::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.strategy-data .scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.strategy-data .scrollbar-thin::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.strategy-data::-webkit-scrollbar,
.strategy-data *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.strategy-data::-webkit-scrollbar-thumb,
.strategy-data *::-webkit-scrollbar-thumb {
  background: rgba(203, 213, 225, 0.75);
  border-radius: 999px;
}

.strategy-data::-webkit-scrollbar-track,
.strategy-data *::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.9);
  border-radius: 999px;
}

.dark .strategy-data .scrollbar-thin {
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.dark .strategy-data,
.dark .strategy-data * {
  scrollbar-width: thin;
  scrollbar-color: rgba(84, 145, 229, 0.58) rgba(8, 23, 42, 0.24);
}

.dark .strategy-data::-webkit-scrollbar-thumb,
.dark .strategy-data *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.78), rgba(45, 212, 191, 0.72));
  border: 1px solid rgba(8, 23, 42, 0.3);
}

.dark .strategy-data::-webkit-scrollbar-thumb:hover,
.dark .strategy-data *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.9), rgba(94, 234, 212, 0.82));
}

.dark .strategy-data::-webkit-scrollbar-track,
.dark .strategy-data *::-webkit-scrollbar-track {
  background: rgba(8, 23, 42, 0.68);
  border: 1px solid rgba(110, 136, 176, 0.12);
}

.dark .strategy-data .scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
}

.dark .strategy-data .scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.65);
}

.dark .strategy-data .scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.dark .strategy-data .t-input__wrap,
.dark .strategy-data .t-input-adornment,
.dark .strategy-data .t-date-range-picker__cell {
  background: rgba(8, 23, 42, 0.92);
  border-color: rgba(110, 136, 176, 0.3);
  color: var(--color-text-strong);
}

.dark .strategy-data .sentiment-date-range,
.dark .strategy-data .sentiment-date-range .t-range-input,
.dark .strategy-data .sentiment-date-range .t-input__wrap,
.dark .strategy-data .sentiment-date-range .t-range-input__inner,
.dark .strategy-data .sentiment-date-range .sentiment-date-range-input {
  background: rgba(8, 23, 42, 0.92) !important;
  color: #e6f4ff !important;
  border-color: rgba(110, 136, 176, 0.3) !important;
}

.dark .strategy-data .sentiment-date-range .t-range-input {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(110, 136, 176, 0.22);
}

.dark .strategy-data .sentiment-date-range .t-range-input__inner::placeholder,
.dark .strategy-data .sentiment-date-range .t-input__inner::placeholder {
  color: rgba(148, 163, 184, 0.82) !important;
}

.dark .strategy-data .sentiment-date-range .t-input__suffix,
.dark .strategy-data .sentiment-date-range .t-input-adornment,
.dark .strategy-data .sentiment-date-range .t-range-input__suffix {
  color: #8edcff !important;
}

.dark .strategy-data .t-input__wrap:hover,
.dark .strategy-data .t-date-range-picker__cell:hover {
  border-color: rgba(96, 165, 250, 0.45);
}

.dark .strategy-data .t-input__inner,
.dark .strategy-data .t-input-adornment__text,
.dark .strategy-data .t-date-range-picker__cell-text {
  color: var(--color-text-strong);
}

.dark .strategy-data .t-input__inner::placeholder {
  color: rgba(148, 163, 184, 0.82);
}

.dark .strategy-data .t-pagination .t-button,
.dark .strategy-data .t-pagination .t-pagination__btn {
  color: var(--color-text-strong);
  background: rgba(10, 30, 54, 0.86);
  border-color: rgba(110, 136, 176, 0.24);
}

.dark .strategy-data .sentiment-pagination,
.dark .strategy-data .sentiment-pagination .t-pagination-mini,
.dark .strategy-data .sentiment-pagination .t-pagination-mini__current,
.dark .strategy-data .sentiment-pagination .t-pagination-mini__current-input,
.dark .strategy-data .sentiment-pagination .t-input,
.dark .strategy-data .sentiment-pagination .t-input__wrap,
.dark .strategy-data .sentiment-pagination .t-input__inner {
  background: transparent !important;
  color: #e6f4ff !important;
}

.dark .strategy-data .t-pagination .t-input,
.dark .strategy-data .t-pagination .t-input__wrap,
.dark .strategy-data .t-pagination .t-input-adornment,
.dark .strategy-data .t-pagination .t-pagination__jump-number-input,
.dark .strategy-data .t-pagination .t-pagination__jump-number-input .t-input__wrap,
.dark .strategy-data .t-pagination .t-pagination__jump-number-input .t-input__inner {
  background: rgba(10, 30, 54, 0.92) !important;
  color: var(--color-text-strong) !important;
  border-color: rgba(110, 136, 176, 0.3) !important;
  box-shadow: none !important;
}

.dark .strategy-data .t-pagination .t-pagination__jump-number-input {
  border-radius: 10px;
}

.dark .strategy-data .sentiment-pagination .t-pagination-mini__current-input {
  border-bottom: 1px solid rgba(148, 163, 184, 0.75);
}

.dark .strategy-data .sentiment-pagination .t-pagination-mini__current-input:hover,
.dark .strategy-data .sentiment-pagination .t-pagination-mini__current-input:focus-within {
  border-bottom-color: #8edcff;
}

.dark .strategy-data .sentiment-pagination .t-pagination-mini__current,
.dark .strategy-data .sentiment-pagination .t-pagination-mini__current-input,
.dark .strategy-data .sentiment-pagination .t-pagination__btn-prev,
.dark .strategy-data .sentiment-pagination .t-pagination__btn-next {
  color: #e6f4ff !important;
}

.dark .strategy-data .sentiment-pagination .t-button,
.dark .strategy-data .sentiment-pagination .t-pagination__btn {
  background: rgba(10, 30, 54, 0.86) !important;
}

.dark .strategy-data .t-pagination .t-pagination__jump-number-input .t-input__inner,
.dark .strategy-data .t-pagination .t-input__inner {
  color: #e6f4ff !important;
  caret-color: #8edcff;
}

.dark .strategy-data .t-pagination .t-pagination__jump-number-input .t-input__inner::placeholder,
.dark .strategy-data .t-pagination .t-input__inner::placeholder {
  color: rgba(148, 163, 184, 0.82) !important;
}

.dark .strategy-data .t-pagination .t-button:hover,
.dark .strategy-data .t-pagination .t-pagination__btn:hover {
  background: rgba(13, 42, 78, 0.95);
}

.dark .strategy-data .t-pagination .t-pagination__current {
  color: #8edcff;
}

.dark .strategy-data .t-date-range-picker {
  min-width: 320px;
}

.sentiment-date-range-popup .t-date-picker__panel,
.sentiment-date-range-popup .t-date-range-picker__panel,
.sentiment-date-range-popup .t-date-picker__panel-body,
.sentiment-date-range-popup .t-date-picker__panel-content,
.sentiment-date-range-popup .t-date-picker__table,
.sentiment-date-range-popup .t-time-picker__panel {
  background: #0d1d33 !important;
  color: #e6f4ff !important;
}

.sentiment-date-range-popup .t-popup__content {
  background: #0d1d33 !important;
  border: 1px solid rgba(110, 136, 176, 0.24);
  box-shadow: 0 24px 60px rgba(2, 8, 20, 0.42);
}

.sentiment-date-range-popup .t-date-picker__cell,
.sentiment-date-range-popup .t-date-picker__cell-inner,
.sentiment-date-range-popup .t-date-picker__header,
.sentiment-date-range-popup .t-date-picker__text,
.sentiment-date-range-popup .t-button {
  color: #e6f4ff !important;
}

/* ── ActionAnalyzes task sidebar ─────────────────────────────────────── */
.strategy-data .task-item-active:hover {
  border: 1px solid var(--color-main);
}

.strategy-data .task-item-active:hover .item-active {
  background: var(--color-main);
  color: #ffffff;
}

.strategy-data .dark-theme:hover {
  background: #0062d966;
  color: #ffffff;
  border-color: #0062d9 !important;
  box-shadow: 0 3px 4px #8b8b8b0f;
}

.strategy-data .action-item:hover {
  border-color: var(--card-border);
}

.strategy-data .dark-theme.task-active,
.strategy-data .dark-theme .task-active {
  border-color: #0062d9 !important;
}

.strategy-data .task-active {
  background-color: var(--bg-color);
  border: 1px solid var(--color-main);
}

.strategy-data .task-active .item-active {
  background: var(--color-main);
  color: #ffffff;
}

.strategy-data .task-tab-color {
  color: var(--color-main);
}

.dark .strategy-data .dark-theme .task-tab-color {
  color: #ffffff !important;
}

.dark .strategy-data .dark-theme .t-progress__bar {
  background-color: #ffffff;
}

/* ── ActionColumn kanban backgrounds ─────────────────────────────────── */
.strategy-data .action-bg0 {
  background: linear-gradient(180deg, #f2f9ff, #fff 17.89% 100%);
}

.strategy-data .action-bg1 {
  background: linear-gradient(180deg, #fffaed, #fff 17.89% 100%);
}

.strategy-data .action-bg2 {
  background: linear-gradient(180deg, #f2fff9, #fff 17.89% 100%);
}

.strategy-data .action-bg3 {
  background: linear-gradient(180deg, #f5f5f5, #fff 17.89% 100%);
}

.strategy-data .dark-action-bg {
  background: rgba(3, 38, 80, 0.6) !important;
  border: 1px solid rgba(43, 143, 254, 0.6) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.08) !important;
}

.strategy-data .dark-action-item {
  background: #0062d91a;
  border: 1px solid #2b8ffe99;
  border-radius: 8px;
}

.strategy-data .dark-action-item:hover {
  background: #0062d966;
  border-color: #0062d9;
}

/* ── TDesign overrides inside task pages ─────────────────────────────── */
.strategy-data .t-loading,
.strategy-data .t-loading__parent {
  min-height: 0;
}

.strategy-data .t-loading--full {
  position: absolute;
  inset: 0;
}

.strategy-data .t-loading__overlay {
  background: rgb(255 255 255 / 60%);
}

.dark .strategy-data .t-loading__overlay {
  background: rgb(15 23 42 / 45%);
}

.strategy-data .t-pagination {
  justify-content: center;
}

.strategy-data .t-date-range-picker,
.strategy-data .t-date-picker,
.strategy-data .t-input {
  width: 100%;
  max-width: 360px;
}

.strategy-data .t-input__wrap,
.strategy-data .t-range-input {
  background: var(--td-bg-color-container, #fff);
}

.dark .strategy-data .t-input__wrap,
.dark .strategy-data .t-range-input {
  background: var(--td-bg-color-container, #1e293b);
  color: var(--td-text-color-primary, #e2e8f0);
}

.strategy-data .t-row,
.strategy-data .t-col {
  min-height: 0;
}

/* Popups are portaled to body — keep panels above app chrome */
.t-popup,
.t-date-picker__panel-container,
.t-date-range-picker__panel-container {
  z-index: 6500;
}

/* ── iframe embed pages (resource management, TY tasks, etc.) ─────────── */
.strategy-data .iframe-container {
  width: 100%;
  height: calc(100vh - 100px);
}

.strategy-data .full-size-iframe {
  width: 100%;
  height: 100%;
  border: none;
}