deerflow-code/frontend-web/src/pages/light-app-management.css

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

/**
 * 应用管理页 —— 深蓝色主题适配（《深蓝色 UI 规范》）
 * 浅色样式仍由组件内 Tailwind 承担；.dark 下本文件覆盖为 ZS-004 / ZS-002 令牌。
 */
.dark .light-app-management-page {
  color: var(--color-text);
}

/* ── 页头 / 文案 ─────────────────────────────────────────────────────── */
.dark .light-app-management-page .lam-title {
  color: var(--color-text-strong);
}

.dark .light-app-management-page .lam-desc {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-desc code {
  background: rgba(22, 119, 255, 0.12);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-primary-btn {
  background: var(--color-primary);
  box-shadow: none;
}

.dark .light-app-management-page .lam-primary-btn:hover {
  background: var(--color-primary-hover);
}

.dark .light-app-management-page .lam-primary-btn:active {
  background: var(--color-primary-active);
}

/* ── 工具条 / 搜索 / 视图切换 ─────────────────────────────────────────── */
.dark .light-app-management-page .lam-toolbar {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
}

.dark .light-app-management-page .lam-search-input {
  background: var(--color-bg-page);
  border-color: var(--color-border);
  color: var(--color-text);
}

.dark .light-app-management-page .lam-search-input::placeholder {
  color: var(--color-text-disabled);
}

.dark .light-app-management-page .lam-search-input:hover {
  background: var(--color-bg-card);
  border-color: var(--color-link);
}

.dark .light-app-management-page .lam-search-input:focus {
  background: var(--color-bg-card);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.16);
  outline: none;
}

.dark .light-app-management-page .lam-view-toggle,
.dark .light-app-management-page .lam-cat-toggle {
  background: var(--color-bg-page);
  border-color: var(--color-border);
}

.dark .light-app-management-page .lam-view-toggle-btn.is-active,
.dark .light-app-management-page .lam-cat-toggle-btn.is-active {
  background: var(--color-bg-card);
  color: var(--color-link);
  box-shadow: var(--shadow-1);
}

.dark .light-app-management-page .lam-view-toggle-btn:not(.is-active),
.dark .light-app-management-page .lam-cat-toggle-btn:not(.is-active) {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-view-toggle-btn:not(.is-active):hover,
.dark .light-app-management-page .lam-cat-toggle-btn:not(.is-active):hover {
  color: var(--color-text);
}

.dark .light-app-management-page .lam-count {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-count strong {
  color: var(--color-link);
}

/* ── 表格（§28）──────────────────────────────────────────────────────── */
.dark .light-app-management-page .lam-table-wrap {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
}

.dark .light-app-management-page .lam-table thead tr {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

.dark .light-app-management-page .lam-table tbody {
  border-color: var(--color-border);
}

.dark .light-app-management-page .lam-table tbody tr {
  border-color: var(--color-border);
}

.dark .light-app-management-page .lam-table tbody tr:hover {
  background: rgba(22, 119, 255, 0.08);
}

.dark .light-app-management-page .lam-row-name {
  color: var(--color-text);
}

.dark .light-app-management-page .lam-table tbody tr:hover .lam-row-name {
  color: var(--color-link);
}

.dark .light-app-management-page .lam-tag-window {
  border-color: rgba(245, 34, 45, 0.35);
  background: var(--func-error-bg);
  color: #ff7875;
}

.dark .light-app-management-page .lam-tag-iframe {
  border-color: rgba(22, 119, 255, 0.35);
  background: var(--func-info-bg);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-url {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-table tbody tr:hover .lam-url {
  color: var(--color-text);
}

.dark .light-app-management-page .lam-url a {
  color: inherit;
}

.dark .light-app-management-page .lam-url a:hover {
  color: var(--color-link);
}

.dark .light-app-management-page .lam-mount-tag {
  background: var(--func-info-bg);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-mount-dot {
  background: var(--color-primary);
}

.dark .light-app-management-page .lam-param-btn {
  border-color: var(--color-border);
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-param-btn:hover {
  background: rgba(22, 119, 255, 0.08);
  color: var(--color-text);
}

.dark .light-app-management-page .lam-param-popover {
  border-color: var(--color-border);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-3);
}

.dark .light-app-management-page .lam-param-popover-head {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-param-popover-close {
  color: var(--color-link);
}

.dark .light-app-management-page .lam-param-item {
  border-color: var(--color-border);
  background: var(--color-bg-page);
}

.dark .light-app-management-page .lam-param-key {
  color: #ff7875;
}

.dark .light-app-management-page .lam-param-val {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-status-on {
  color: var(--func-success);
}

.dark .light-app-management-page .lam-status-on-dot {
  background: var(--func-success);
}

.dark .light-app-management-page .lam-status-on-ping {
  background: var(--func-success);
}

.dark .light-app-management-page .lam-status-off {
  color: var(--color-text-disabled);
}

.dark .light-app-management-page .lam-status-off-dot {
  background: var(--color-text-disabled);
}

.dark .light-app-management-page .lam-icon-btn {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-icon-btn:hover {
  background: rgba(22, 119, 255, 0.08);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-icon-btn-danger:hover {
  background: var(--func-error-bg);
  color: var(--func-error);
}

.dark .light-app-management-page .lam-empty-icon {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  color: var(--color-text-disabled);
}

.dark .light-app-management-page .lam-empty-title {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-empty-sub {
  color: var(--color-text-disabled);
}

/* ── 卡片视图（§22 / §43）────────────────────────────────────────────── */
.dark .light-app-management-page .lam-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
}

.dark .light-app-management-page .lam-card:hover {
  box-shadow: var(--shadow-2);
}

.dark .light-app-management-page .lam-card-title {
  color: var(--color-text-strong);
}

.dark .light-app-management-page .lam-card:hover .lam-card-title {
  color: var(--color-link);
}

.dark .light-app-management-page .lam-card-desc {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-card-url-box {
  background: var(--color-bg-page);
}

.dark .light-app-management-page .lam-card-param {
  border-color: var(--color-border);
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-card-mount {
  background: var(--func-info-bg);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-card-footer {
  border-color: var(--color-border);
  background: rgba(12, 24, 54, 0.5);
}

/* ── 底部提示（§33 警告）────────────────────────────────────────────── */
.dark .light-app-management-page .lam-tip-box {
  background: var(--func-warning-bg);
  border: 1px solid rgba(250, 173, 20, 0.25);
  box-shadow: none;
}

.dark .light-app-management-page .lam-tip-head {
  border-color: rgba(250, 173, 20, 0.2);
  color: var(--func-warning);
}

.dark .light-app-management-page .lam-tip-list {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-tip-list strong {
  color: var(--color-text);
}

.dark .light-app-management-page .lam-tip-bullet {
  color: var(--func-warning);
}

/* ── 弹窗（§21 Modal）────────────────────────────────────────────────── */
.dark .light-app-management-page .lam-dialog-overlay {
  background: rgba(6, 14, 36, 0.6);
}

.dark .light-app-management-page .lam-dialog {
  border-color: var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-card), var(--color-bg-page));
  box-shadow: var(--shadow-3);
  color: var(--color-text);
}

.dark .light-app-management-page .lam-dialog-header {
  border-color: var(--color-border);
  border-bottom: none;
  padding-bottom: 0;
}

.dark .light-app-management-page .lam-dialog-header::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 16px;
  margin-bottom: 0;
  background: var(--gradient-title-line);
}

.dark .light-app-management-page .lam-dialog-icon {
  background: var(--func-info-bg);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-dialog-title {
  color: var(--color-text-strong);
}

.dark .light-app-management-page .lam-dialog-close {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-dialog-close:hover {
  background: rgba(22, 119, 255, 0.08);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-form-label {
  color: var(--color-text);
}

.dark .light-app-management-page .lam-form-label .lam-required {
  color: var(--func-error);
}

.dark .light-app-management-page .lam-form-label svg {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-form-hint {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-dialog .lam-input,
.dark .light-app-management-page .lam-dialog input[type="text"] {
  background: var(--color-bg-page);
  border-color: var(--color-border);
  color: var(--color-text);
}

.dark .light-app-management-page .lam-dialog .lam-input::placeholder,
.dark .light-app-management-page .lam-dialog input[type="text"]::placeholder {
  color: var(--color-text-disabled);
}

.dark .light-app-management-page .lam-dialog .lam-input:focus,
.dark .light-app-management-page .lam-dialog input[type="text"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.16);
  outline: none;
}

.dark .light-app-management-page .lam-param-panel {
  border-color: var(--color-border);
  background: var(--color-bg-page);
}

.dark .light-app-management-page .lam-param-row {
  border-color: var(--color-border);
  background: var(--color-bg-card);
}

.dark .light-app-management-page .lam-param-theme-box {
  background: var(--color-bg-page);
}

.dark .light-app-management-page .lam-param-empty {
  border-color: var(--color-border);
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-add-param-btn {
  border-color: var(--color-border-strong);
  background: var(--color-bg-card);
  color: var(--color-text);
}

.dark .light-app-management-page .lam-add-param-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-dialog-footer {
  border-color: var(--color-border);
}

.dark .light-app-management-page .lam-dialog-cancel {
  border-color: var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
}

.dark .light-app-management-page .lam-dialog-cancel:hover {
  border-color: var(--color-link);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-dialog-save {
  background: var(--color-primary);
  box-shadow: none;
}

.dark .light-app-management-page .lam-dialog-save:hover {
  background: var(--color-primary-hover);
}

.dark .light-app-management-page .lam-dialog-save:active {
  background: var(--color-primary-active);
}

.dark .light-app-management-page .lam-switch-on {
  background: var(--color-primary);
}

.dark .light-app-management-page .lam-switch-off {
  background: var(--color-text-disabled);
}

/* ── TDesign Select（§15）──────────────────────────────────────────── */
.dark .light-app-management-page .t-select .t-input,
.dark .light-app-management-page .t-select .t-input__wrap {
  background: var(--color-bg-page);
  border-color: var(--color-border);
  border-radius: var(--radius-input);
}

.dark .light-app-management-page .t-select .t-input__inner {
  color: var(--color-text);
}

.dark .light-app-management-page .t-select .t-input__inner::placeholder {
  color: var(--color-text-disabled);
}

.dark .light-app-management-page .t-select:hover .t-input,
.dark .light-app-management-page .t-select:hover .t-input__wrap {
  border-color: var(--color-link);
}

.dark .light-app-management-page .t-select.t-is-focused .t-input,
.dark .light-app-management-page .t-select.t-is-focused .t-input__wrap {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.16);
}

.dark .light-app-management-page .t-select .t-fake-arrow {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .t-select__dropdown {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  box-shadow: var(--shadow-2);
}

.dark .light-app-management-page .t-select-option {
  color: var(--color-text);
}

.dark .light-app-management-page .t-select-option:hover {
  background: rgba(22, 119, 255, 0.08);
}

.dark .light-app-management-page .t-select-option.t-is-selected {
  background: rgba(22, 119, 255, 0.16);
  color: var(--color-link);
}

/* shadcn Input / Textarea in dialog */
.dark .light-app-management-page .lam-dialog [data-slot="input"],
.dark .light-app-management-page .lam-dialog textarea {
  background: var(--color-bg-page);
  border-color: var(--color-border);
  color: var(--color-text);
}

.dark .light-app-management-page .lam-dialog [data-slot="input"]:focus-visible,
.dark .light-app-management-page .lam-dialog textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.16);
}

.dark .light-app-management-page .lam-param-theme-box span {
  color: var(--color-text-secondary);
}

/* TDesign 下拉挂载到 body 时的深蓝样式 */
.dark .lam-select-popup.t-popup {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  box-shadow: var(--shadow-2);
}

.dark .lam-select-popup .t-select-option {
  color: var(--color-text);
}

.dark .lam-select-popup .t-select-option:hover {
  background: rgba(22, 119, 255, 0.08);
}

.dark .lam-select-popup .t-select-option.t-is-selected {
  background: rgba(22, 119, 255, 0.16);
  color: var(--color-link);
}

.dark .light-app-management-page .lam-search-input + button,
.dark .light-app-management-page .lam-toolbar .absolute.text-neutral-400 {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-table .text-neutral-300 {
  color: var(--color-text-disabled);
}

.dark .light-app-management-page .lam-card-url-box button {
  color: var(--color-text-secondary);
}

.dark .light-app-management-page .lam-card-url-box button:hover {
  background: rgba(22, 119, 255, 0.08);
  color: var(--color-link);
}

/* ══════════════════════════════════════════════════════════════════════
   浅蓝主题覆盖（[data-theme="lightblue"]）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 注册应用按钮 ─────────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-primary-btn {
  background-color: #0062D9;
  box-shadow: 0 2px 6px rgba(0, 98, 217, 0.2);
}
[data-theme="lightblue"] .light-app-management-page .lam-primary-btn:hover {
  background-color: #0079FE;
}
[data-theme="lightblue"] .light-app-management-page .lam-primary-btn:active {
  background-color: #0056C6;
}

/* ── 搜索框 focus ────────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-search-input:focus {
  border-color: rgba(0, 98, 217, 0.4);
  box-shadow: 0 0 0 4px rgba(0, 98, 217, 0.1);
}

/* ── 视图切换激活态 ──────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-view-toggle-btn.is-active,
[data-theme="lightblue"] .light-app-management-page .lam-cat-toggle-btn.is-active {
  color: #0062D9;
}

/* ── 结果计数 ───────────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-count strong {
  color: #0062D9;
}

/* ── 表格行名 hover ──────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-table tr:hover .lam-row-name {
  color: #0062D9;
}

/* ── 参数弹窗 ───────────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-param-popover-close {
  color: #0062D9;
}
[data-theme="lightblue"] .light-app-management-page .lam-param-key {
  color: #0062D9;
}

/* ── 卡片标题 hover ──────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-card:hover .lam-card-title {
  color: #0062D9;
}

/* ── 弹窗图标 / 关闭按钮 ─────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-dialog-icon {
  background-color: #EAF4FF;
  color: #0062D9;
}
[data-theme="lightblue"] .light-app-management-page .lam-dialog-close:hover {
  color: #0062D9;
}

/* ── 添加路由参数按钮 hover ───────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-add-param-btn:hover {
  border-color: #0062D9;
  color: #0062D9;
}

/* ── 表单输入框 focus ────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-input:focus,
[data-theme="lightblue"] .light-app-management-page .lam-dialog input[type="text"]:focus {
  border-color: #0062D9;
  box-shadow: 0 0 0 1px #0062D9;
}
[data-theme="lightblue"] .light-app-management-page .lam-dialog [data-slot="input"]:focus-visible,
[data-theme="lightblue"] .light-app-management-page .lam-dialog textarea:focus-visible {
  border-color: #0062D9;
  box-shadow: 0 0 0 2px rgba(0, 98, 217, 0.16);
}

/* ── TDesign Select focus / hover ────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .t-select:hover .t-input,
[data-theme="lightblue"] .light-app-management-page .t-select:hover .t-input__wrap {
  border-color: rgba(0, 98, 217, 0.5);
}
[data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused .t-input,
[data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused .t-input__wrap {
  border-color: #0062D9;
  box-shadow: 0 0 0 2px rgba(0, 98, 217, 0.16);
}

/* ── 启用开关 ───────────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-switch-on {
  background-color: #0062D9;
}

/* ── 保存按钮 ───────────────────────────────────────────────────────── */
[data-theme="lightblue"] .light-app-management-page .lam-dialog-save {
  background-color: #0062D9;
  box-shadow: 0 2px 8px rgba(0, 98, 217, 0.2);
}
[data-theme="lightblue"] .light-app-management-page .lam-dialog-save:hover {
  background-color: #0079FE;
}
[data-theme="lightblue"] .light-app-management-page .lam-dialog-save:active {
  background-color: #0056C6;
}

/* ── iframe 菜单排序：拖拽行 + 拖拽手柄 ───────────────────────────────── */
.light-app-management-page .lam-reorder-row {
  cursor: grab;
}
.light-app-management-page .lam-reorder-row:active {
  cursor: grabbing;
}
/* 深蓝主题下手柄/箭头用次级文字色，避免在深底上发灰看不清 */
.dark .light-app-management-page .lam-drag-handle {
  color: #4A6491;
}
.dark .light-app-management-page .lam-reorder-row:hover .lam-drag-handle {
  color: #6E88B0;
}