/**
 * AgentsGo 3.0 — Dark Mode CSS
 * Must be loaded AFTER the page's own <style> so overrides take effect.
 * Targets [data-theme="dark"] on <html>.
 */

/* ========== Core Variable Overrides ========== */
[data-theme="dark"] {
  /* --accent stays the same per-module (red/blue/green/purple) */
  /* --accent-h stays the same */

  --bg: #0f1117;
  --card: #1a1b23;
  --text: #e5e7eb;
  --sec: #9ca3af;
  --line: #2d2f3a;

  /* Aliases used by different modules */
  --bg-elevated: #1a1b23;
  --bg-sunken: #12131a;

  /* Tag backgrounds */
  --tag-bg: #1e1020;
  --accent-l: #1e1020;

  /* Semantic colors — slightly brighter for dark bg */
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --purple: #a78bfa;
  --blue: #60a5fa;
  --grn: #34d399;

  /* Market-specific aliases */
  --pri: var(--accent);
  --pri-hover: var(--accent-h, var(--accent));
  --star: #fbbf24;

  /* Table-specific */
  --th-bg: #1e1f2a;
  --td-border: #2a2b36;

  /* Code */
  --code-bg: #1e1f2a;
}

/* ========== Body & Page Background ========== */
[data-theme="dark"] body,
[data-theme="dark"] .list,
[data-theme="dark"] .list-head,
[data-theme="dark"] .list-search,
[data-theme="dark"] .detail-top {
  background: var(--card);
}

[data-theme="dark"] .content,
[data-theme="dark"] .app {
  background: var(--bg);
}

/* ========== Navigation ========== */
[data-theme="dark"] .nav,
[data-theme="dark"] .gn-bar,
[data-theme="dark"] .nav-hd {
  background: var(--card);
  border-color: var(--line);
}

[data-theme="dark"] .nav-l1,
[data-theme="dark"] .nav-l2,
[data-theme="dark"] .nav-l0,
[data-theme="dark"] .nav-sub-grp-t {
  color: var(--sec);
}
[data-theme="dark"] .nav-l1:hover,
[data-theme="dark"] .nav-l2:hover,
[data-theme="dark"] .nav-l0:hover,
[data-theme="dark"] .nav-sub-grp-t:hover {
  background: var(--tag-bg);
  color: var(--accent);
}
[data-theme="dark"] .nav-l2.active,
[data-theme="dark"] .nav-l0.active {
  background: var(--tag-bg);
  color: var(--accent);
}

/* ========== Cards & Panels ========== */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .sec-card,
[data-theme="dark"] .agent-card,
[data-theme="dark"] .kb-card,
[data-theme="dark"] .post-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .wf-card,
[data-theme="dark"] .dept-card,
[data-theme="dark"] .perm-item,
[data-theme="dark"] .wf-result,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .type-card,
[data-theme="dark"] .content-card {
  background: var(--card);
  border-color: var(--line);
}

/* ========== Tables ========== */
[data-theme="dark"] table {
  background: var(--card);
  color: var(--text);
}
[data-theme="dark"] th {
  background: var(--th-bg);
  color: var(--sec);
  border-color: var(--line);
}
[data-theme="dark"] td {
  border-color: var(--td-border);
  color: var(--text);
}
[data-theme="dark"] tr:hover td {
  background: rgba(255,255,255,.03);
}

/* ========== Inputs ========== */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg);
  border-color: var(--line);
  color: var(--text);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6b7280;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--accent);
  background: var(--card);
}

/* ========== Buttons ========== */
[data-theme="dark"] .top-btn.outline,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .kb-abtn {
  border-color: var(--line);
  color: var(--sec);
}
[data-theme="dark"] .top-btn.outline:hover,
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .kb-abtn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ========== Tags & Badges ========== */
[data-theme="dark"] .item-badge.ai,
[data-theme="dark"] .mg-badge.ai,
[data-theme="dark"] .agent-tag {
  background: #2a1525;
  color: var(--accent);
}
[data-theme="dark"] .item-badge.human,
[data-theme="dark"] .mg-badge.human {
  background: #2a2510;
  color: var(--amber);
}

/* ========== Status Tags ========== */
[data-theme="dark"] .agent-status.online {
  background: #0d2818;
  color: var(--green);
}
[data-theme="dark"] .agent-status.offline {
  background: var(--td-border);
  color: var(--sec);
}

/* ========== Group Titles & List Items ========== */
[data-theme="dark"] .group-title {
  background: var(--card);
  color: var(--text);
}
[data-theme="dark"] .group-title:hover {
  background: var(--bg);
}
[data-theme="dark"] .list-item {
  border-color: var(--line);
}
[data-theme="dark"] .list-item:hover,
[data-theme="dark"] .list-item.selected {
  background: var(--tag-bg);
}

/* ========== Hint Bar ========== */
[data-theme="dark"] .hint-bar {
  background: linear-gradient(90deg, #1e1020, #1a1510);
  border-color: var(--line);
  color: var(--sec);
}
[data-theme="dark"] .hint-bar .hb-title {
  color: var(--text);
}
[data-theme="dark"] .hint-bar .hb-tag.red { background: #2a1525; color: var(--accent); }
[data-theme="dark"] .hint-bar .hb-tag.blue { background: #0f1a2e; color: var(--blue); }
[data-theme="dark"] .hint-bar .hb-tag.green { background: #0d2818; color: var(--green); }
[data-theme="dark"] .hint-bar .hb-tag.amber { background: #2a2510; color: var(--amber); }
[data-theme="dark"] .hint-bar .hb-tag.purple { background: #1a1030; color: var(--purple); }

/* ========== Scene Tags (content pages) ========== */
[data-theme="dark"] .scene-tag { background: #2a1525; }
[data-theme="dark"] .src-m { background: #1a1030; }
[data-theme="dark"] .src-i { background: #0f1a2e; color: var(--blue); }

/* ========== Mini Position Bars ========== */
[data-theme="dark"] .mini-pos { border-color: var(--line); }
[data-theme="dark"] .mini-pos .mp-bar { background: var(--td-border); }

/* ========== Func Rows ========== */
[data-theme="dark"] .func-row { border-color: var(--line); }
[data-theme="dark"] .act-item { border-color: var(--line); }

/* ========== Drawer ========== */
[data-theme="dark"] .drawer {
  background: var(--card);
}
[data-theme="dark"] .drawer-item:hover {
  background: var(--tag-bg);
}

/* ========== Toast ========== */
[data-theme="dark"] .toast {
  color: #fff;
}

/* ========== Mobile Elements ========== */
[data-theme="dark"] .mobile-nav-btn,
[data-theme="dark"] .mobile-menu-btn {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}
[data-theme="dark"] .mobile-tab-bar {
  background: var(--card);
  border-color: var(--line);
}

/* ========== Toggle Button ========== */
#dmToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--card, #fff);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  transition: transform .15s, box-shadow .15s;
}
#dmToggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
/* In mobile, move toggle above tab bar */
@media(max-width:768px){
  #dmToggle {
    bottom: 72px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}

/* ========== Language Toggle Button ========== */
#langToggle {
  position: fixed;
  bottom: 20px;
  right: 70px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--card, #fff);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  transition: transform .15s, box-shadow .15s;
  color: var(--text, #111827);
  font-family: 'Poppins', 'PingFang SC', sans-serif;
}
#langToggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
@media(max-width:768px){
  #langToggle {
    bottom: 72px;
    right: 58px;
    width: 38px;
    height: 38px;
    font-size: 12px;
  }
}

/* ========== Scrollbar (subtle dark) ========== */
[data-theme="dark"] ::-webkit-scrollbar { width: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3b46; border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4b56; }

/* ========== Selection ========== */
[data-theme="dark"] ::selection {
  background: var(--accent);
  color: #fff;
}

/* ========== Empty / Error State Components ========== */
.ag-empty-state,
.ag-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  min-height: 300px;
}
.ag-empty-icon,
.ag-error-icon {
  font-size: 56px;
  margin-bottom: 16px;
  line-height: 1;
}
.ag-empty-title,
.ag-error-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #111827);
  margin-bottom: 8px;
}
.ag-error-code {
  font-size: 12px;
  font-weight: 600;
  color: var(--red, #E11D48);
  background: rgba(225,29,72,.08);
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-family: 'Courier New', monospace;
}
.ag-empty-desc,
.ag-error-desc {
  font-size: 14px;
  color: var(--sec, #6b7280);
  max-width: 360px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.ag-empty-btn,
.ag-error-btn {
  padding: 8px 24px;
  border-radius: 20px;
  border: 1.5px solid var(--accent, #E11D48);
  background: transparent;
  color: var(--accent, #E11D48);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.ag-empty-btn:hover,
.ag-error-btn:hover {
  background: var(--accent, #E11D48);
  color: #fff;
}
[data-theme="dark"] .ag-error-code {
  background: rgba(248,113,113,.12);
  color: var(--red, #f87171);
}
