/**
 * 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: #a0a0a0;
  --text-muted: #6c757d;
  
  /* 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="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(--accent-fill-rest) !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"] .btn-primary {
  background: linear-gradient(135deg, var(--accent-fill-rest) 0%, #1a8ec5 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(43, 159, 212, 0.3);
  color: #ffffff;
}

[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, #3ab0e5 0%, var(--accent-fill-rest) 100%);
  box-shadow: 0 6px 24px rgba(43, 159, 212, 0.4);
  color: #ffffff;
}

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

[data-theme="dark"] .btn-outline-primary:hover {
  background: var(--accent-fill-rest);
  border-color: var(--accent-fill-rest);
  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);
}

[data-theme="dark"] .btn-success {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
}

[data-theme="dark"] .btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
}

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

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

/* Status badges - muted colors for dark mode */
[data-theme="dark"] .badge.bg-success {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

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

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

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

[data-theme="dark"] .badge.bg-primary {
  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"] .pagination .page-item.active .page-link {
  background: var(--accent-fill-rest);
  border-color: var(--accent-fill-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(--accent-fill-rest);
  border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--accent-fill-rest);
  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 */
[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}

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

[data-theme="dark"] a {
  color: var(--accent-fill-rest);
}

[data-theme="dark"] a:hover {
  color: var(--accent-fill-hover);
}

/* 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(--accent-fill-rest);
  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);
}

/* Links in dark mode */
[data-theme="dark"] a:not(.btn):not(.nav-link) {
  color: var(--accent-fill-rest);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):hover {
  color: var(--accent-fill-hover);
}

/* 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);
}