:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #333;
  --background-color: #F8F9FA;
  --card-bg: #fff;
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --border-color: #dee2e6;
  --header-bg: #e9ecef;
  --header-text: #495057;
  --input-bg: #fff;
  --input-border: #ced4da;
  --button-hover-bg: #0056b3;
  --link-color: #007bff;
  --link-hover-color: #0056b3;
  --footer-bg: #343a40;
  --footer-text: #f8f9fa;
  --sidebar-bg: #345573;
  --sidebar-text: white;
  --upperbar-bg: #fff;
  --upperbar-text: #333;
  --content-bg: #fff;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --hover-bg: #f2f2f2;
  --even-row-bg: #f8f9fa;
}

[data-theme="dark"] {
  --primary-color: #66b3ff;
  --secondary-color: #adb5bd;
  --text-color: #e0e0e0;
  --background-color: #2c2c2c;
  --card-bg: #3a3a3a;
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --border-color: #495057;
  --header-bg: #495057;
  --header-text: #e0e0e0;
  --input-bg: #4a4a4a;
  --input-border: #6c757d;
  --button-hover-bg: #4da6ff;
  --link-color: #66b3ff;
  --link-hover-color: #4da6ff;
  --footer-bg: #212529;
  --footer-text: #adb5bd;
  --sidebar-bg: #3a3a3a;
  --sidebar-text: #e0e0e0;
  --upperbar-bg: #3a3a3a;
  --upperbar-text: #e0e0e0;
  --content-bg: #3a3a3a;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  --hover-bg: #4a4a4a;
  --even-row-bg: #333333;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.video-title.disabled-video {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
  background-color: #6c757d;
  border-color: #495057;
}



.video-title.disabled-video:hover {
  transform: none;
  background-color: var(--border-color);
}