/* Global dual-theme support (default: dark) */
:root {
  --bg: #000000;
  --bg-grid: #000000;
  --panel: #171717;
  --muted: #171717;
  --border: #2a2a2a;
  --border-soft: #2a2a2a;
  --ink: #ffffff;
  --ink-dim: #cccccc;
  --ink-muted: #808080;
  --brand: #fabd23;
  --brand-text: #000000;
  --accent: #666666;
  --danger: #ef4444;
  --warn: #f59e0b;
  --ok: #3ecf8e;

  --ng-brand: #fabd23;
  --ng-brand-hover: #f59e0b;
  --ng-brand-light: rgba(251, 191, 36, 0.1);
  --ng-bg: #000000;
  --ng-panel: #141414;
  --ng-border: #2a2a2a;
  --ng-border-glass: #2a2a2a;
  --ng-ink: #ffffff;
  --ng-ink-dim: #cccccc;
  --ng-ink-muted: #808080;
  --ng-item-hover: #2f2f2f;
}

html[data-theme="light"] {
  --bg: #ffffff;
  --bg-grid: #ffffff;
  --panel: #ffffff;
  --muted: #eef2f7;
  --border: #d6dbe4;
  --border-soft: #c4ccd8;
  --ink: #111827;
  --ink-dim: #374151;
  --ink-muted: #6b7280;
  --brand: #fabd23;
  --brand-text: #000000;
  --accent: #6b7280;

  --ng-brand: #fabd23;
  --ng-brand-hover: #f59e0b;
  --ng-brand-light: rgba(251, 191, 36, 0.18);
  --ng-bg: #ffffff !important;
  --ng-panel: #f3f5f8;
  --ng-border: #d6dbe4;
  --ng-border-glass: #d6dbe4;
  --ng-ink: #111827;
  --ng-ink-dim: #374151;
  --ng-ink-muted: #6b7280;
  --ng-item-hover: #eef2f7;
}

html,
body {
  background: var(--ng-bg) !important;
  background-color: var(--ng-bg) !important;
  color: var(--ng-ink);
}

#appWrap,
.page-shell,
.page-wrap,
.main-content,
.content-wrap {
  background: var(--ng-bg) !important;
  background-color: var(--ng-bg) !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .ng-glass,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .table-wrapper,
html[data-theme="light"] .table-container,
html[data-theme="light"] .panel,
html[data-theme="light"] .connection-card,
html[data-theme="light"] .browser-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .file-card,
html[data-theme="light"] .doc-card,
html[data-theme="light"] .task-card,
html[data-theme="light"] .project-card,
html[data-theme="light"] .desktop-project-card,
html[data-theme="light"] table {
  background: #f3f5f8 !important;
  color: var(--ng-ink) !important;
  border-color: var(--ng-border) !important;
}

html[data-theme="light"] .page-header,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .actions-bar,
html[data-theme="light"] .table-header,
html[data-theme="light"] thead,
html[data-theme="light"] th,
html[data-theme="light"] .header-bar {
  background: #f3f5f8 !important;
  color: var(--ng-ink) !important;
  border-color: var(--ng-border) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .dropdown-menu {
  background: #f3f5f8 !important;
  color: #111827 !important;
  border-color: var(--ng-border) !important;
}

html[data-theme="light"] .ng-nav-item {
  color: var(--ng-ink-dim);
}

html[data-theme="light"] .ng-nav-item:hover {
  background: var(--ng-item-hover);
  color: var(--ng-ink);
}

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-slate-100 {
  color: #111827 !important;
}

html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/20,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-gray-700 {
  border-color: var(--ng-border) !important;
}

html[data-theme="light"] .bg-black,
html[data-theme="light"] .bg-zinc-900,
html[data-theme="light"] .bg-zinc-800,
html[data-theme="light"] .bg-gray-900,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-800 {
  background: var(--ng-panel) !important;
  color: var(--ng-ink) !important;
}

html[data-theme="light"] .text-slate-900,
html[data-theme="light"] .text-slate-800,
html[data-theme="light"] .text-slate-700,
html[data-theme="light"] .text-gray-900,
html[data-theme="light"] .text-gray-800 {
  color: #111827 !important;
}

html[data-theme="light"] .text-slate-600,
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-gray-600,
html[data-theme="light"] .text-gray-500 {
  color: #4b5563 !important;
}

html[data-theme="light"] select option {
  background: #ffffff;
  color: #111827;
}

/* Force app card surfaces to dark grey */
.card,
.ng-glass,
.panel,
.table-card,
.table-wrapper,
.table-container,
.connection-card,
.browser-card,
.settings-card,
.glass-card,
.file-card,
.doc-card,
.task-card,
.project-card,
.desktop-project-card,
.modal-content {
  background: #171717 !important;
  background-color: #171717 !important;
  color: #ffffff !important;
}