/*
 * Global dark mode color layer.
 * Scope: color/contrast only, no layout changes.
 */

html[data-color-scheme='dark'] {
  --bg: #111827;
  --fg: #e5e7eb;
  --panel: #1f2937;
  --panel-2: #0f172a;
  --border: #334155;
  --muted: #94a3b8;
  --accent: #60a5fa;
  --focus: #7dd3fc;
  --table-row: #1f2937;
  --table-row-alt: #111827;
  --table-hover: #263449;
  --danger: #f87171;
  --warning: #fbbf24;
  --success: #34d399;
}

html[data-color-scheme='dark'] body.app-layout,
html[data-color-scheme='dark'] .app-main,
html[data-color-scheme='dark'] .page-content,
html[data-color-scheme='dark'] .page-surface {
  background: var(--bg);
  color: var(--fg);
}

html[data-color-scheme='dark'] .app-main .panel,
html[data-color-scheme='dark'] .app-main .card,
html[data-color-scheme='dark'] .page-surface .panel,
html[data-color-scheme='dark'] .page-surface .card,
html[data-color-scheme='dark'] .params-panel,
html[data-color-scheme='dark'] .form-panel {
  background: var(--panel);
  color: var(--fg);
  border-color: var(--border);
}

html[data-color-scheme='dark'] #toptabs .nav-tabs a {
  background: #0f172a;
  color: var(--fg);
  border-color: var(--border);
}

html[data-color-scheme='dark'] #toptabs .nav-tabs a:hover,
html[data-color-scheme='dark'] #toptabs .nav-tabs a.active,
html[data-color-scheme='dark'] #toptabs .nav-tabs li.active a {
  background: #1e293b;
  color: #ffffff;
  border-color: var(--accent);
}

html[data-color-scheme='dark'] table thead th {
  background: var(--panel-2);
  color: var(--fg);
  border-color: var(--border);
}

html[data-color-scheme='dark'] table tbody td {
  color: var(--fg);
  border-color: var(--border);
}

html[data-color-scheme='dark'] table tbody tr {
  background: var(--table-row);
}

html[data-color-scheme='dark'] table tbody tr:nth-child(even) {
  background: var(--table-row-alt);
}

html[data-color-scheme='dark'] table tbody tr:hover {
  background: var(--table-hover);
}

html[data-color-scheme='dark'] input[type='text'],
html[data-color-scheme='dark'] input[type='email'],
html[data-color-scheme='dark'] input[type='password'],
html[data-color-scheme='dark'] input[type='number'],
html[data-color-scheme='dark'] input[type='date'],
html[data-color-scheme='dark'] input[type='search'],
html[data-color-scheme='dark'] select,
html[data-color-scheme='dark'] textarea {
  background: #0f172a;
  color: var(--fg);
  border-color: var(--border);
}

html[data-color-scheme='dark'] input:focus,
html[data-color-scheme='dark'] select:focus,
html[data-color-scheme='dark'] textarea:focus,
html[data-color-scheme='dark'] a:focus-visible,
html[data-color-scheme='dark'] button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

html[data-color-scheme='dark'] input:disabled,
html[data-color-scheme='dark'] select:disabled,
html[data-color-scheme='dark'] textarea:disabled {
  background: #1f2937;
  color: var(--muted);
  border-color: #3f4d61;
}

html[data-color-scheme='dark'] .button,
html[data-color-scheme='dark'] a.button,
html[data-color-scheme='dark'] button,
html[data-color-scheme='dark'] input[type='submit'],
html[data-color-scheme='dark'] input[type='button'] {
  background: #1e3a8a;
  color: #f8fafc;
  border-color: #3b82f6;
}

html[data-color-scheme='dark'] .button:hover,
html[data-color-scheme='dark'] a.button:hover,
html[data-color-scheme='dark'] button:hover,
html[data-color-scheme='dark'] input[type='submit']:hover,
html[data-color-scheme='dark'] input[type='button']:hover {
  background: #1d4ed8;
}

html[data-color-scheme='dark'] .button[disabled],
html[data-color-scheme='dark'] button[disabled],
html[data-color-scheme='dark'] input[disabled] {
  background: #374151;
  border-color: #4b5563;
  color: #cbd5e1;
}

html[data-color-scheme='dark'] .breadcrumbs,
html[data-color-scheme='dark'] .app-header__breadcrumbs,
html[data-color-scheme='dark'] .app-breadcrumb {
  background: #0f172a;
  color: var(--fg);
  border-color: var(--border);
}

html[data-color-scheme='dark'] .ct-modal,
html[data-color-scheme='dark'] .modal,
html[data-color-scheme='dark'] .ui-dialog {
  background: #111827;
  color: var(--fg);
  border-color: var(--border);
}

html[data-color-scheme='dark'] .ct-toast,
html[data-color-scheme='dark'] .toast,
html[data-color-scheme='dark'] .message,
html[data-color-scheme='dark'] .error {
  background: #0f172a;
  color: var(--fg);
  border-color: var(--border);
}

html[data-color-scheme='dark'] a {
  color: #93c5fd;
}

html[data-color-scheme='dark'] .error,
html[data-color-scheme='dark'] .text-danger {
  color: var(--danger);
}