/* ============================================
   TORZA THEME — tokens + Bootstrap theme-skin
   Eigenaar: design tokens, surfaces, borders, shadows, dark/light varianten.
   Component layout (modal, pagination, buttons): assets/css/app.css
   ============================================ */
:root {
  --torza-radius: 4px;
  --torza-bg: #ffffff;
  --torza-surface: #f8fafc;
  --torza-text: #111827;

  /* Brand tokens — legacy aliases (CSS_ARCHITECTURE §2.7); prefer --color-brand-* in new CSS */
  --torza-primary: #140858;
  --torza-accent: #EE1D24;
  --torza-primary-light: #2a1a7a;
  --torza-accent-light: #ff4757;
  --torza-primary-hover: #0f0646;
  --bs-primary: var(--torza-primary);
  --bs-primary-rgb: 20, 8, 88;

  /* Semantic color tokens (step 5a — foundation; action component refs in app.css step 5b-1) */

  /* Brand — Torza identity (logo, nav chrome, Bootstrap --bs-primary) */
  --color-brand-primary: var(--torza-primary);
  --color-brand-primary-hover: var(--torza-primary-hover);
  --color-brand-primary-light: var(--torza-primary-light);
  --color-brand-accent: var(--torza-accent);
  --color-brand-accent-light: var(--torza-accent-light);

  /* Action — interactive CTAs (.btn-primary production palette) */
  --color-action-primary: #3B82F6;
  --color-action-primary-hover: #2563EB;
  --color-action-primary-active: #1D4ED8;
  --color-action-on-primary: #ffffff;

  /* Brand foreground on filled brand/accent surfaces (tenant branding may override via injection) */
  --color-brand-on-primary: #ffffff;
  --color-brand-accent-on: #ffffff;

  /* Link — hyperlinks (app.css step 5b-2; legacy --primary alias unchanged) */
  --color-link: #5B8DEF;
  --color-link-hover: color-mix(in oklab, #5B8DEF 85%, black);
  --color-link-dark: #93c5fd;
  --color-link-dark-hover: #bfdbfe;

  /* Status — preparatory (mirrors app.css --success/--warning/--danger/--info fallback) */
  --color-status-success: #2BB673;
  --color-status-warning: #F5A524;
  --color-status-danger: #EF5B5B;
  --color-status-info: #5B8DEF;

  /* Interaction — component hover/focus/active (step 5b-5a; legacy --primary / --torza-* misuse fix) */
  --color-interaction-primary: #5B8DEF;
  --color-interaction-hover: var(--torza-primary);
  --color-interaction-active: var(--torza-primary-light);
  --color-focus-ring: #5B8DEF;
  --color-component-active: #5B8DEF;

  /* Switch — track/thumb presentation (tz-switch in app.css) */
  --color-switch-track-off: #d5dde8;
  --color-switch-track-off-hover: #c8d2e0;
  --color-switch-track-on: var(--color-action-primary);
  --color-switch-track-on-hover: var(--color-action-primary-hover);
  --color-switch-track-on-active: var(--color-action-primary-active);
  --color-switch-border: #7d91a8;
  --color-switch-border-on: #1e3a8a;
  --color-switch-track-off-disabled: #dfe5ed;
  --color-switch-border-disabled: #9aadc0;
  --color-switch-track-on-disabled: #8fb4ea;
  --color-switch-border-on-disabled: #5a8fd4;
  --color-switch-track-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Button family — Variant 3 (design ref: knoppen-variant3.html) */
  --btn-precision-radius: 8px;
  --btn-shadow: 0 1px 2px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.04);
  --btn-focus-shadow: 0 0 0 0.2rem rgba(91, 141, 239, 0.3);

  --btn-primary-bg: #5b8def;
  --btn-primary-border: #5583d9;
  --btn-primary-hover-bg: #5080d6;
  --btn-primary-hover-border: #4a79cc;
  --btn-primary-active-bg: #4573c4;
  --btn-primary-active-border: #406aab;

  --btn-ghost-bg: #ffffff;
  --btn-ghost-border: #dde2ea;
  --btn-ghost-fg: #1e3a6e;
  --btn-ghost-hover-bg: #f5f7fb;
  --btn-ghost-hover-border: #cbd3df;
  --btn-ghost-hover-fg: #1e3a6e;
  --btn-ghost-active-bg: #eef1f6;
  --btn-ghost-active-border: #cbd3df;

  --btn-danger-surface: #fdecec;
  --btn-danger-border: #f3a3a3;
  --btn-danger-fg: #dc2626;
  --btn-danger-hover-surface: #fbdcdc;
  --btn-danger-hover-border: #ec8a8a;
  --btn-danger-hover-fg: #c81e1e;
  --btn-danger-active-surface: #fbdcdc;
  --btn-danger-active-border: #ec8a8a;
  --btn-danger-active-fg: #c81e1e;

  --btn-disabled-bg: #eceef3;
  --btn-disabled-border: #d9dde5;
  --btn-disabled-fg: #9aa1ad;

  --icon-btn-hit: 32px;
  --icon-btn-radius: 8px;
  --icon-btn-bg: #ffffff;
  --icon-btn-border: #dde2ea;
  --icon-btn-fg: #334155;
  --icon-btn-hover-bg: #f5f7fb;
  --icon-btn-hover-border: #cbd3df;
  --icon-btn-active-bg: #eef1f6;

  /* Chrome / shell semantic tokens (tenant branding v2 may override) */
  --tz-topbar-bg: #ffffff;
  --tz-topbar-fg: #0A0C10;
  --tz-topbar-theme-moon-fg: #64748b;
  --color-chrome-nav-bg: #f8fafc;
  --color-chrome-nav-fg: #0A0C10;
  --color-chrome-nav-active-bg: #cfe2fd;
  --color-chrome-nav-active-fg: #6d99f2;
  --color-chrome-nav-hover-bg: color-mix(in oklab, var(--color-brand-primary) 12%, transparent);
  /* Defaults must match pre-v2 selector formulas (parent of 6816da31) */
  --color-table-header-bg: var(--torza-bg-light);
  --color-table-header-fg: var(--torza-gray-700);
  --color-table-row-bg: var(--card, #FFFFFF);
  --color-table-row-alt: color-mix(in oklab, var(--torza-gray-200) 4%, var(--card));
  --color-table-row-hover: color-mix(in oklab, var(--color-interaction-primary) 6%, color-mix(in oklab, var(--torza-gray-200) 14%, var(--card)));

  /* Gray scale (legacy utilities; prefer --ui-* / --text where available) */
  --torza-gray-100: #f8f9fa;
  --torza-gray-200: #e9ecef;
  --torza-gray-300: #dee2e6;
  --torza-gray-400: #ced4da;
  --torza-gray-500: #adb5bd;
  --torza-gray-600: #6c757d;
  --torza-gray-700: #495057;
  --torza-gray-800: #343a40;

  /* Surface tokens (used by theme-skin overrides) */
  --torza-bg-light: #f8fafc;
  --torza-bg-dark: #0f172a;
  --torza-text-light: #0a0c10;
  --torza-text-dark: #e5e7eb;
  --torza-border-light: #e5e7eb;
  --torza-border-dark: #2e3440;
}

[data-bs-theme="dark"] {
  --torza-bg: #0f172a;
  --torza-surface: #111827;
  --torza-text: #f1f5f9;

  --torza-primary: #2a1a7a;
  --torza-accent: #ff4757;
  --torza-primary-hover: #3a2a8f;

  --torza-gray-100: #212529;
  --torza-gray-200: #343a40;
  --torza-gray-300: #495057;
  --torza-gray-400: #6c757d;
  --torza-gray-600: #ced4da;
  --torza-gray-700: #dee2e6;
  --torza-gray-800: #e9ecef;

  --tz-topbar-bg: #0f172a;
  --tz-topbar-fg: #e5e7eb;
  --color-chrome-nav-bg: #0f172a;
  --color-chrome-nav-fg: #e5e7eb;
  --color-chrome-nav-active-bg: #0f2245;
  --color-chrome-nav-active-fg: #517ed8;
  --color-chrome-nav-hover-bg: color-mix(in oklab, var(--color-brand-primary) 12%, transparent);

  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.18);
  --btn-focus-shadow: 0 0 0 0.2rem rgba(91, 141, 239, 0.35);

  --btn-primary-bg: #5788cc;
  --btn-primary-border: #5788cc;
  --btn-primary-hover-bg: #5b8def;
  --btn-primary-hover-border: #5b8def;
  --btn-primary-active-bg: #4f7fc0;
  --btn-primary-active-border: #4f7fc0;

  --btn-ghost-bg: var(--torza-surface);
  --btn-ghost-border: var(--torza-border-dark);
  --btn-ghost-fg: var(--torza-text-dark);
  --btn-ghost-hover-bg: #1a2433;
  --btn-ghost-hover-border: #3d4f66;
  --btn-ghost-hover-fg: #f1f5f9;
  --btn-ghost-active-bg: #243044;
  --btn-ghost-active-border: #3d4f66;

  --btn-danger-surface: #2a1518;
  --btn-danger-border: #8f4048;
  --btn-danger-fg: #fca5a5;
  --btn-danger-hover-surface: #351a1f;
  --btn-danger-hover-border: #a64d57;
  --btn-danger-hover-fg: #fecaca;
  --btn-danger-active-surface: #351a1f;
  --btn-danger-active-border: #a64d57;
  --btn-danger-active-fg: #fecaca;

  --btn-disabled-bg: #1c2430;
  --btn-disabled-border: #3a4556;
  --btn-disabled-fg: #64748b;

  --icon-btn-bg: var(--torza-surface);
  --icon-btn-border: var(--torza-border-dark);
  --icon-btn-fg: #cbd5e1;
  --icon-btn-hover-bg: #1a2433;
  --icon-btn-hover-border: #3d4f66;

  --color-switch-track-off: #334155;
  --color-switch-track-off-hover: #3d4f66;
  --color-switch-track-on: var(--color-action-primary);
  --color-switch-track-on-hover: var(--color-action-primary-hover);
  --color-switch-track-on-active: var(--color-action-primary-active);
  --color-switch-border: #6d8098;
  --color-switch-border-on: #1d4ed8;
  --color-switch-track-off-disabled: #3a4558;
  --color-switch-border-disabled: #75879c;
  --color-switch-track-on-disabled: #4d79c2;
  --color-switch-border-on-disabled: #5b8def;
  --color-switch-track-inset: inset 0 1px 2px rgba(0, 0, 0, 0.28);
  --icon-btn-active-bg: #243044;

  --color-table-header-bg: var(--torza-bg-dark);
  --color-table-header-fg: var(--torza-text-dark);
  --color-table-row-bg: var(--card, #0F172A);
  --color-table-row-alt: color-mix(in oklab, var(--torza-gray-200) 3%, var(--card));
  --color-table-row-hover: color-mix(in oklab, #fff 6%, color-mix(in oklab, var(--color-interaction-primary) 8%, var(--card)));
}

/* Component layout (modal, pagination, modal-footer buttons): assets/css/app.css */

/* ============================================
   DROPDOWNS — Bootstrap theme-skin (surfaces)
   ============================================ */
[data-bs-theme="dark"] .dropdown-item.active {
  background-color: var(--color-brand-primary);
  color: #ffffff;
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: #111827;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  padding: 0.4rem;
  min-width: 10rem;
}

[data-bs-theme="dark"] .dropdown-item {
  color: #e2e8f0;
  border-radius: 4px;
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus-visible {
  background-color: rgba(255,255,255,0.05);
  color: #ffffff;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-color: rgba(255,255,255,0.08);
}

[data-bs-theme="dark"] .dropdown-item svg,
[data-bs-theme="dark"] .dropdown-item i {
  opacity: 0.8;
  font-size: 1rem;
  margin-right: 0.3rem;
}

/* ============================================
   LIGHT THEME VARIANTEN
   ============================================ */
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  color: #111827;
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  background-color: #f8fafc;
  color: #111827;
  border-color: #e2e8f0;
  border-radius: 4px !important;
}

[data-bs-theme="light"] .dropdown-item {
  color: #111827;
}
[data-bs-theme="light"] .dropdown-item:hover {
  background-color: rgba(0,0,0,0.05);
}

/* --- Fix: Light mode form elements consistent radius --- */
[data-bs-theme="light"] .btn,
[data-bs-theme="light"] .dropdown-toggle,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .input-group-text {
  border-radius: 4px !important;
}