/**
 * Dark Theme for Approval System
 * ==============================
 * A comprehensive dark theme using CSS custom properties.
 * Activated when data-theme="dark" is set on <html> element.
 */

/* Dark Theme Color Variables */
[data-theme="dark"] {
  /* Primary accent colors - slightly brighter for dark backgrounds */
  --accent-fill-rest: #2b9fd4;
  --accent-fill-hover: #3ab0e5;
  --accent-fill-active: #1a8ec5;
  
  /* Background layers - dark grays */
  --neutral-layer-1: #1a1a2e;
  --neutral-layer-2: #16213e;
  --neutral-layer-3: #0f0f1a;
  
  /* Text colors */
  --text-primary: #e8e8e8;
  --text-secondary: #b7c0d0;
  --text-muted: #aab4c4;
  color-scheme: dark;
  --link-color: #7ec8ef;
  --link-hover-color: #b6e4fc;
  --action-primary-rest: #1479aa;
  --action-primary-hover: #106b98;
  --action-primary-active: #0e5d86;
  --text-success: #4ade80;
  --text-danger: #f87171;
  --text-warning: #fbbf24;
  --text-info: #22d3ee;
  --bs-body-color-rgb: 232, 232, 232;
  --bs-body-bg-rgb: 22, 33, 62;
  --bs-secondary-color-rgb: 183, 192, 208;
  --bs-secondary-bg-rgb: 15, 15, 26;
  --bs-tertiary-bg-rgb: 15, 15, 26;
  --bs-emphasis-color-rgb: 232, 232, 232;
  --bs-border-color: #495366;
  --bs-link-color-rgb: 126, 200, 239;
  --bs-link-hover-color-rgb: 182, 228, 252;
  --bs-primary-text-emphasis: #7ec8ef;
  --bs-success-text-emphasis: #4ade80;
  --bs-danger-text-emphasis: #f87171;
  --bs-warning-text-emphasis: #fbbf24;
  --bs-info-text-emphasis: #22d3ee;
  --bs-secondary-text-emphasis: var(--text-secondary);
  --bs-light-text-emphasis: var(--text-primary);
  --bs-dark-text-emphasis: var(--text-primary);
  --bs-primary-bg-subtle: #1b3450;
  --bs-success-bg-subtle: #15382b;
  --bs-danger-bg-subtle: #422331;
  --bs-warning-bg-subtle: #3d3225;
  --bs-info-bg-subtle: #133647;
  --bs-secondary-bg-subtle: #252c3e;
  --bs-light-bg-subtle: #252c3e;
  --bs-dark-bg-subtle: #151b29;
  
  /* Border and stroke */
  --neutral-stroke: rgba(255, 255, 255, 0.1);
  
  /* Shadows - darker and more subtle */
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
  
  /* Form control colors */
  --input-bg: #1e1e32;
  --input-border: rgba(255, 255, 255, 0.15);
  --input-focus-bg: #252540;
  
  /* Card backgrounds */
  --card-bg: rgba(22, 33, 62, 0.9);
  --card-bg-hover: rgba(26, 40, 75, 0.95);
  
  /* Table colors */
  --table-bg: rgba(22, 33, 62, 0.8);
  --table-header-bg: rgba(43, 159, 212, 0.15);
  --table-hover-bg: rgba(43, 159, 212, 0.08);
  
  /* Navbar */
  --navbar-bg: rgba(15, 15, 26, 0.9);
  
  /* Footer */
  --footer-bg: rgba(15, 15, 26, 0.95);
  
  /* Alert colors - adjusted for dark theme */
  --alert-success-bg: rgba(34, 197, 94, 0.15);
  --alert-success-text: #4ade80;
  --alert-danger-bg: rgba(239, 68, 68, 0.15);
  --alert-danger-text: #f87171;
  --alert-warning-bg: rgba(245, 158, 11, 0.15);
  --alert-warning-text: #fbbf24;
  --alert-info-bg: rgba(6, 182, 212, 0.15);
  --alert-info-text: #22d3ee;
}

/* Body and main background */
[data-theme="dark"] body {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
  color: var(--text-primary);
}

/* Navbar */
[data-theme="dark"] .navbar {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--neutral-stroke);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* 应用使用 data-theme；只覆盖横向导航图标，不切换 Bootstrap 主题机制。 */
[data-theme="dark"] .app-ui .navbar-light .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="dark"] .navbar-brand {
  background: linear-gradient(135deg, var(--accent-fill-rest), #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .nav-link {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-link:hover {
  background: rgba(43, 159, 212, 0.15);
  color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link.active {
  color: var(--link-color) !important;
}

[data-theme="dark"] .dropdown-menu {
  background: var(--neutral-layer-2);
  border: 1px solid var(--neutral-stroke);
  box-shadow: var(--shadow-medium);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
  background: rgba(43, 159, 212, 0.15);
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
  border-color: var(--neutral-stroke);
}

/* Cards */
[data-theme="dark"] .card {
  background: var(--card-bg);
  border-color: var(--neutral-stroke);
  color: var(--text-primary);
}

[data-theme="dark"] .card-fluent {
  background: var(--card-bg);
  border: 1px solid var(--neutral-stroke);
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .card-fluent:hover {
  background: var(--card-bg-hover);
  box-shadow: var(--shadow-medium);
}

[data-theme="dark"] .card-stat {
  background: var(--card-bg);
  border: 1px solid rgba(43, 159, 212, 0.2);
}

[data-theme="dark"] .card-stat:hover {
  box-shadow: var(--shadow-hover);
}

[data-theme="dark"] .card-header {
  background: rgba(43, 159, 212, 0.1);
  border-bottom: 1px solid var(--neutral-stroke);
  color: var(--text-primary);
}

[data-theme="dark"] .card-body {
  color: var(--text-primary);
}

[data-theme="dark"] .card-footer {
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--neutral-stroke);
}

/* Tables */
[data-theme="dark"] .table {
  background: var(--table-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--neutral-stroke);
}

[data-theme="dark"] .table thead {
  background: var(--table-header-bg);
}

[data-theme="dark"] .table thead th {
  background: transparent !important;
  border-bottom: 2px solid rgba(43, 159, 212, 0.3);
  color: var(--text-primary) !important;
  font-weight: 600;
}

[data-theme="dark"] .table tbody {
  background: var(--table-bg);
}

[data-theme="dark"] .table tbody tr {
  background: transparent !important;
  border-color: var(--neutral-stroke);
  color: var(--text-primary);
}

[data-theme="dark"] .table tbody tr:hover {
  background: var(--table-hover-bg) !important;
}

[data-theme="dark"] .table tbody td {
  background: transparent !important;
  color: var(--text-primary);
  border-color: var(--neutral-stroke);
}

/* Fix for tables that use <th scope="row"> in tbody (e.g., Profile table on Dashboard) */
[data-theme="dark"] .table tbody th[scope="row"] {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--neutral-stroke);
  font-weight: 600;
}

[data-theme="dark"] .table-bordered {
  border-color: var(--neutral-stroke);
}

[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
  border-color: var(--neutral-stroke);
}

/* Table within cards */
[data-theme="dark"] .card .table {
  background: transparent !important;
}

[data-theme="dark"] .card .table tbody {
  background: transparent;
}

/* Table striped variant */
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Table hover variant */
[data-theme="dark"] .table-hover tbody tr:hover {
  background: var(--table-hover-bg) !important;
  color: var(--text-primary);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
}

/* Floating label support within filters grid in dark mode */
[data-theme="dark"] .filters-grid .form-floating > .form-control,
[data-theme="dark"] .filters-grid .form-floating > .form-select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
}

[data-theme="dark"] .filters-grid .form-floating > label {
  color: var(--text-secondary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: var(--input-focus-bg);
  border-color: var(--accent-fill-rest);
  box-shadow: 0 0 0 3px rgba(43, 159, 212, 0.2);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] .form-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .form-check-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}

[data-theme="dark"] .form-check-input:checked {
  background-color: var(--accent-fill-rest);
  border-color: var(--accent-fill-rest);
}

[data-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(43, 159, 212, 0.2);
}

[data-theme="dark"] .input-group-text {
  background: rgba(43, 159, 212, 0.1);
  border-color: var(--input-border);
  color: var(--text-secondary);
}

/* Buttons */
[data-theme="dark"] .app-ui .btn-primary:not(:where(.theme-isolated, .theme-isolated *, :disabled, .disabled)) {
  background: linear-gradient(135deg, var(--action-primary-rest) 0%, var(--action-primary-hover) 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(43, 159, 212, 0.3);
  color: #ffffff;
}

[data-theme="dark"] .app-ui .btn-primary:hover:not(:where(.theme-isolated, .theme-isolated *, :disabled, .disabled)) {
  background: linear-gradient(135deg, var(--action-primary-hover) 0%, var(--action-primary-active) 100%);
  box-shadow: 0 6px 24px rgba(43, 159, 212, 0.4);
  color: #ffffff;
}

[data-theme="dark"] .app-ui .btn-outline-primary:not(:where(.theme-isolated, .theme-isolated *)) {
  --bs-btn-hover-bg: var(--action-primary-rest);
  --bs-btn-hover-border-color: var(--action-primary-rest);
  --bs-btn-active-bg: var(--action-primary-active);
  --bs-btn-active-border-color: var(--action-primary-active);
  border-color: var(--link-color);
  color: var(--link-color);
}

[data-theme="dark"] .app-ui .btn-outline-primary:hover:not(:where(.theme-isolated, .theme-isolated *)) {
  background: var(--action-primary-rest);
  border-color: var(--action-primary-rest);
  color: #ffffff;
}

[data-theme="dark"] .app-ui .btn-outline-primary:is(:focus-visible, :active):not(:where(.theme-isolated, .theme-isolated *)) {
  background: var(--action-primary-active);
  border-color: var(--action-primary-active);
  color: #ffffff;
}

[data-theme="dark"] .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--neutral-stroke);
  color: var(--text-secondary);
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-light {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--neutral-stroke);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-light:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

/* success/danger 共用亮色主题的可读渐变及 hover，不重复覆盖交互状态。 */

/* Badges */
[data-theme="dark"] .badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .app-ui .badge.bg-secondary:not(:where(.theme-isolated, .theme-isolated *)) {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}

/* 保留暗色半透明状态底色；固定浅色预览不参与暗色组件覆盖。 */
[data-theme="dark"] .app-ui .badge.bg-success:not(:where(.theme-isolated, .theme-isolated *)) {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .app-ui .badge.bg-danger:not(:where(.theme-isolated, .theme-isolated *)) {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

[data-theme="dark"] .app-ui .badge.bg-warning:not(:where(.theme-isolated, .theme-isolated *)) {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] .app-ui .badge.bg-info:not(:where(.theme-isolated, .theme-isolated *)) {
  background: rgba(6, 182, 212, 0.2) !important;
  color: #22d3ee !important;
}

[data-theme="dark"] .app-ui .badge.bg-primary:not(:where(.theme-isolated, .theme-isolated *)) {
  background: rgba(43, 159, 212, 0.2) !important;
  color: #5bcefa !important;
}

/* Pagination */
[data-theme="dark"] .pagination {
  background: transparent;
}

[data-theme="dark"] .pagination .page-link {
  background: var(--card-bg);
  border-color: var(--neutral-stroke);
  color: var(--text-secondary);
}

[data-theme="dark"] .pagination .page-link:hover {
  background: var(--table-hover-bg);
  border-color: var(--accent-fill-rest);
  color: var(--text-primary);
}

[data-theme="dark"] .app-ui .pagination .page-item.active .page-link {
  background: var(--action-primary-rest);
  border-color: var(--action-primary-rest);
  color: #ffffff;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--neutral-stroke);
  color: var(--text-muted);
}

/* Alerts */
[data-theme="dark"] .alert {
  border: none;
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .alert-success {
  background: var(--alert-success-bg);
  color: var(--alert-success-text);
}

[data-theme="dark"] .alert-danger {
  background: var(--alert-danger-bg);
  color: var(--alert-danger-text);
}

[data-theme="dark"] .alert-warning {
  background: var(--alert-warning-bg);
  color: var(--alert-warning-text);
}

[data-theme="dark"] .alert-info {
  background: var(--alert-info-bg);
  color: var(--alert-info-text);
}

/* Modals */
[data-theme="dark"] .modal-content {
  background: var(--neutral-layer-2);
  border: 1px solid var(--neutral-stroke);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-header {
  border-bottom: 1px solid var(--neutral-stroke);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-body {
  background: var(--neutral-layer-2);
  color: var(--text-primary);
}

[data-theme="dark"] .modal-footer {
  border-top: 1px solid var(--neutral-stroke);
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Nav tabs */
[data-theme="dark"] .nav-tabs {
  border-bottom: 2px solid var(--neutral-stroke);
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--link-hover-color);
  border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--link-color);
  background-color: transparent;
  border-bottom-color: var(--accent-fill-rest);
}

/* List group */
[data-theme="dark"] .list-group-item {
  background: var(--card-bg);
  border-color: var(--neutral-stroke);
  color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
  background: var(--card-bg-hover);
}

[data-theme="dark"] .list-group-item.active {
  background: rgba(43, 159, 212, 0.2);
  border-color: var(--accent-fill-rest);
  color: var(--text-primary);
}

/* Footer */
[data-theme="dark"] .app-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--neutral-stroke);
  color: var(--text-muted);
}

/* Page header */
[data-theme="dark"] .page-header-title {
  color: var(--text-primary);
}

[data-theme="dark"] .page-header-subtitle {
  color: var(--text-muted);
}

/* Section card */
[data-theme="dark"] .section-card {
  background: var(--card-bg);
  border: 1px solid var(--neutral-stroke);
}

[data-theme="dark"] .section-card .title {
  color: var(--text-primary);
}

[data-theme="dark"] .section-card .subtitle {
  color: var(--text-muted);
}

/* Filters grid */
[data-theme="dark"] .filters-grid {
  background: rgba(22, 33, 62, 0.8);
  border: 1px solid var(--neutral-stroke);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .filters-grid .form-control,
[data-theme="dark"] .filters-grid .form-select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .filters-grid .form-control:focus,
[data-theme="dark"] .filters-grid .form-select:focus {
  background: var(--input-focus-bg);
  border-color: var(--accent-fill-rest);
}

[data-theme="dark"] .filters-grid label.form-label {
  color: var(--text-secondary);
}

/* Dashboard tiles */
[data-theme="dark"] .dashboard-tiles .card-stat {
  background: var(--card-bg);
  border: 1px solid rgba(43, 159, 212, 0.2);
}

[data-theme="dark"] .dashboard-tiles .card-stat:hover {
  background: var(--card-bg-hover);
}

/* Text utilities */
/* muted/secondary 由应用语义工具类和主题变量统一提供。 */

[data-theme="dark"] a:not(:where(.btn, .badge, .page-link, .nav-link, .dropdown-item, .vertical-nav-item, .vertical-nav-brand-link, .workflow-directory-row, .theme-isolated, .theme-isolated *)) {
  color: var(--link-color);
}

[data-theme="dark"] a:hover:not(:where(.btn, .badge, .page-link, .nav-link, .dropdown-item, .vertical-nav-item, .vertical-nav-brand-link, .workflow-directory-row, .theme-isolated, .theme-isolated *)) {
  color: var(--link-hover-color);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(43, 159, 212, 0.4);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(43, 159, 212, 0.6);
}

/* Approval watermark */
[data-theme="dark"] .approval-watermark-approved::before {
  color: rgba(74, 222, 128, 0.1);
}

[data-theme="dark"] .approval-watermark-pending::before {
  color: rgba(251, 191, 36, 0.1);
}

/* Attachment icons - keep vibrant colors */
[data-theme="dark"] .attachment-icon {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .attachment-item:hover {
  background-color: rgba(43, 159, 212, 0.08);
}

/* Empty state */
[data-theme="dark"] .text-center.text-muted.py-5::before {
  background: linear-gradient(135deg, rgba(43, 159, 212, 0.2), rgba(43, 159, 212, 0.1));
}

/* Auth card */
[data-theme="dark"] .auth-card .card {
  background: var(--card-bg);
}

/* Code and pre elements */
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-primary);
}

/* HR */
[data-theme="dark"] hr {
  border-color: var(--neutral-stroke);
}

/* Focus states */
[data-theme="dark"] *:focus-visible {
  outline: 2px solid var(--accent-fill-rest);
  outline-offset: 2px;
}

/* Settings grid */
[data-theme="dark"] .settings-grid .card-fluent {
  background: var(--card-bg);
}

[data-theme="dark"] .settings-grid .card-fluent:hover {
  background: var(--card-bg-hover);
}

/* Logo preview in settings */
[data-theme="dark"] .logo-preview {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--neutral-stroke);
}

/* Theme selector preview */
[data-theme="dark"] .theme-preview-card {
  background: var(--card-bg);
  border: 1px solid var(--neutral-stroke);
}

/* Registration disabled message */
[data-theme="dark"] .registration-disabled-alert {
  background: var(--alert-warning-bg);
  color: var(--alert-warning-text);
  border-radius: 0.75rem;
  padding: 1rem;
}

/* ============================================
   Vertical Navbar Dark Theme
   ============================================ */

/* Vertical sidebar background */
[data-theme="dark"] .vertical-nav {
  background: linear-gradient(180deg, #0b1727 0%, #0f1f35 100%);
}

/* Vertical nav items */
[data-theme="dark"] .vertical-nav-item {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .vertical-nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .vertical-nav-item.active {
  color: #ffffff;
  background: rgba(44, 123, 229, 0.2);
}

[data-theme="dark"] .vertical-nav-icon {
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .vertical-nav-item:hover .vertical-nav-icon {
  color: #ffffff;
}

[data-theme="dark"] .vertical-nav-item.active .vertical-nav-icon {
  color: #2c7be5;
}

/* Vertical nav section title */
[data-theme="dark"] .vertical-nav-section-title {
  color: rgba(255, 255, 255, 0.3);
}

/* Vertical nav brand */
[data-theme="dark"] .vertical-nav-brand-text {
  color: #ffffff;
}

/* Vertical nav divider */
[data-theme="dark"] .vertical-nav-divider {
  background: rgba(255, 255, 255, 0.08);
}

/* Vertical nav footer */
[data-theme="dark"] .vertical-nav-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .vertical-nav-footer-text {
  color: rgba(255, 255, 255, 0.3);
}

/* Vertical header */
[data-theme="dark"] .app-shell-vertical .app-header {
  background: rgba(15, 15, 26, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .vertical-header-toggle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

[data-theme="dark"] .vertical-header-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .vertical-header-user {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .vertical-header-user:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .vertical-header-user-name {
  color: var(--text-primary);
}

[data-theme="dark"] .vertical-header-user-role {
  color: var(--text-muted);
}

[data-theme="dark"] .vertical-header-breadcrumb {
  color: var(--text-muted);
}

/* Vertical nav backdrop */
[data-theme="dark"] .vertical-nav-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* Vertical nav toggle button */
[data-theme="dark"] .vertical-nav-toggle {
  background: var(--accent-fill-rest);
  box-shadow: 0 4px 12px rgba(44, 123, 229, 0.4);
}

/* Phoenix cards in dark theme */
[data-theme="dark"] .phoenix-card {
  background: var(--card-bg);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .phoenix-card-header {
  border-bottom: 1px solid var(--neutral-stroke);
}

[data-theme="dark"] .phoenix-card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .phoenix-stat-card {
  background: var(--card-bg);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .phoenix-stat-value {
  color: var(--text-primary);
}

[data-theme="dark"] .phoenix-stat-label {
  color: var(--text-muted);
}

/* Phoenix table in dark theme */
[data-theme="dark"] .phoenix-table {
  background: var(--table-bg);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .phoenix-table thead th {
  background: rgba(44, 123, 229, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .phoenix-table tbody td {
  border-bottom: 1px solid var(--neutral-stroke);
}

[data-theme="dark"] .phoenix-table tbody tr:hover {
  background: rgba(44, 123, 229, 0.05);
}

/* ============================================
   Request Detail Page Dark Theme
   ============================================ */

/* Tab content container */
[data-theme="dark"] .tab-content-dark {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Request description - word wrap for long content */
.request-description {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
  color: var(--text-primary);
}

[data-theme="dark"] .request-description {
  color: var(--text-primary);
}

/* Card fluent in dark mode */
[data-theme="dark"] .card-fluent {
  background: var(--card-bg);
  border: 1px solid var(--neutral-stroke);
  color: var(--text-primary);
}

[data-theme="dark"] .card-fluent .card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .card-fluent .card-body {
  color: var(--text-primary);
}

/* Section card in dark mode */
[data-theme="dark"] .section-card {
  background: var(--card-bg);
  border: 1px solid var(--neutral-stroke);
}

[data-theme="dark"] .section-card .title {
  color: var(--text-primary);
}

[data-theme="dark"] .section-card .subtitle {
  color: var(--text-secondary);
}

/* Nav tabs improved contrast */
[data-theme="dark"] .nav-tabs {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: none;
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary);
  border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--link-color);
  background: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: var(--card-bg);
}

/* List group items in dark mode */
[data-theme="dark"] .list-group-item {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--neutral-stroke);
  color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Form labels and text in dark mode */
[data-theme="dark"] .form-label {
  color: var(--text-secondary);
}

/* 普通链接才读取链接语义；按钮和侧栏由各自组件拥有前景色。 */
[data-theme="dark"] a:not(:where(.btn, .badge, .page-link, .nav-link, .dropdown-item, .vertical-nav-item, .vertical-nav-brand-link, .workflow-directory-row, .theme-isolated, .theme-isolated *)) {
  color: var(--link-color);
}

[data-theme="dark"] a:not(:where(.btn, .badge, .page-link, .nav-link, .dropdown-item, .vertical-nav-item, .vertical-nav-brand-link, .workflow-directory-row, .theme-isolated, .theme-isolated *)):hover {
  color: var(--link-hover-color);
}

/* Horizontal rule */
[data-theme="dark"] hr {
  border-color: var(--neutral-stroke);
}

/* Phoenix form controls in dark theme */
[data-theme="dark"] .phoenix-form-control {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .phoenix-form-control:focus {
  border-color: var(--accent-fill-rest);
  box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.2);
}

[data-theme="dark"] .phoenix-form-label {
  color: var(--text-secondary);
}

/* Phoenix buttons in dark theme */
[data-theme="dark"] .btn-phoenix-primary {
  background: linear-gradient(135deg, var(--accent-fill-rest) 0%, #1a68cc 100%);
  box-shadow: 0 4px 12px rgba(44, 123, 229, 0.4);
}

[data-theme="dark"] .btn-phoenix-primary:hover {
  background: linear-gradient(135deg, #3ab0e5 0%, var(--accent-fill-rest) 100%);
  box-shadow: 0 6px 20px rgba(44, 123, 229, 0.5);
}

[data-theme="dark"] .btn-phoenix-outline {
  border-color: var(--accent-fill-rest);
  color: var(--accent-fill-rest);
}

[data-theme="dark"] .btn-phoenix-outline:hover {
  background: var(--accent-fill-rest);
  color: #ffffff;
}

/* Vertical app shell footer */
[data-theme="dark"] .app-shell-vertical .app-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--neutral-stroke);
}

/* ============================================
   Flyout Menus Dark Theme (Fixed Position)
   ============================================ */

/* Theme flyout menu */
[data-theme="dark"] .vertical-nav-theme-menu {
  background: var(--card-bg);
  border: 1px solid var(--neutral-stroke);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .vertical-nav-theme-option {
  color: var(--text-secondary);
}

[data-theme="dark"] .vertical-nav-theme-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

[data-theme="dark"] .vertical-nav-theme-option.active {
  color: var(--accent-fill-rest);
}

/* Language flyout menu */
[data-theme="dark"] .vertical-nav-toggle-section .dropdown-menu {
  background: var(--card-bg);
  border: 1px solid var(--neutral-stroke);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .vertical-nav-toggle-section .dropdown-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .vertical-nav-toggle-section .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

[data-theme="dark"] .vertical-nav-toggle-section .dropdown-item.active {
  background: rgba(44, 123, 229, 0.2);
  color: var(--accent-fill-rest);
}

/* Bootstrap 5.3 在单元格和状态类上设置独立变量，不能仅改 body 前景。 */
[data-theme="dark"] .app-ui .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--neutral-stroke);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: var(--table-hover-bg);
  --bs-table-active-bg: var(--table-hover-bg);
}

[data-theme="dark"] .app-ui .bg-light:not(:where(.theme-isolated, .theme-isolated *)),
[data-theme="dark"] .app-ui .bg-white:not(:where(.theme-isolated, .theme-isolated *)) {
  background-color: var(--neutral-layer-2) !important;
}
[data-theme="dark"] .app-ui :is(.text-dark, .text-black):not(:where(.badge, .badge *, .btn, .btn *, .theme-isolated, .theme-isolated *)) {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .app-ui .badge:is(.bg-light, .bg-white):not(:where(.theme-isolated, .theme-isolated *)) {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .app-ui a:not(.btn):not(.badge):not(.page-link):not(.nav-link):not(.dropdown-item):not(.vertical-nav-item):not(.vertical-nav-brand-link):not(.workflow-directory-row):not(:where(.theme-isolated, .theme-isolated *)) {
  color: var(--link-color);
}
[data-theme="dark"] .app-ui a:not(.btn):not(.badge):not(.page-link):not(.nav-link):not(.dropdown-item):not(.vertical-nav-item):not(.vertical-nav-brand-link):not(.workflow-directory-row):not(:where(.theme-isolated, .theme-isolated *)):hover {
  color: var(--link-hover-color);
}

/* style.css 的语义工具类读取主题变量即可；不另加高权重的 dark 染色。 */

[data-theme="dark"] .app-ui code:not(:where(.theme-isolated, .theme-isolated *)) { color: var(--text-primary); }
[data-theme="dark"] .app-ui .alert-primary,
[data-theme="dark"] .app-ui .alert-secondary,
[data-theme="dark"] .app-ui .alert-light,
[data-theme="dark"] .app-ui .alert-dark {
  background: var(--neutral-layer-2);
  color: var(--text-primary);
}

[data-theme="dark"] .app-ui .vertical-nav-section-title,
[data-theme="dark"] .app-ui .vertical-nav-footer-text { color: var(--text-secondary); }