/* =============================================================================
   Dark Mode Styles - Frontend Only
   DO NOT apply to /teketin (admin dashboard)
============================================================================= */

body.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

body.dark-mode.bg-light {
  background-color: #121212 !important;
}

/* Header & Logo */
body.dark-mode .bg-red {
  background-color: #8b0000 !important;
}

body.dark-mode .logo-link {
  color: #ffffff !important;
}

/* Navbar */
body.dark-mode .navbar {
  background-color: #1a1a1a !important;
  border-bottom-color: #8b0000 !important;
}

body.dark-mode .navbar .nav-link {
  color: #e0e0e0 !important;
}

body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar .nav-link.active {
  color: #ff5722 !important;
}

body.dark-mode .dropdown-menu {
  background-color: #1a1a1a;
  border-color: #333;
}

body.dark-mode .dropdown-item {
  color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
  background-color: #333;
  color: #ff5722;
}

/* Cards */
body.dark-mode .card,
body.dark-mode .video-card,
body.dark-mode .custom-video-card,
body.dark-mode .podcast-card {
  background-color: #1e1e1e;
  color: #e0e0e0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

body.dark-mode .card:hover,
body.dark-mode .video-card:hover,
body.dark-mode .custom-video-card:hover,
body.dark-mode .podcast-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
}

body.dark-mode .card-title,
body.dark-mode .card-title-category,
body.dark-mode .card-title2,
body.dark-mode .video-card .card-title,
body.dark-mode .custom-video-card .card-title {
  color: #e0e0e0 !important;
}

body.dark-mode .card-text,
body.dark-mode .video-card .card-text,
body.dark-mode .custom-video-card .card-text {
  color: #b0b0b0;
}

body.dark-mode .card-footer {
  background-color: #2a2a2a;
  color: #b0b0b0;
}

body.dark-mode .text-dark {
  color: #e0e0e0 !important;
}

body.dark-mode .text-muted {
  color: #888 !important;
}

/* Tabs */
body.dark-mode .nav-tabs {
  border-bottom-color: #333;
}

body.dark-mode .nav-tabs .nav-link {
  color: #b0b0b0;
  background-color: transparent;
}

body.dark-mode .nav-tabs .nav-link:hover {
  background-color: #2a2a2a;
  color: #e0e0e0 !important;
}

body.dark-mode .nav-tabs .nav-link.active {
  background-color: #8b0000 !important;
  color: #ffffff !important;
  border-color: #333 #333 #1e1e1e;
}

/* Buttons */
body.dark-mode .btn-outline-secondary {
  color: #e0e0e0;
  border-color: #555;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: #555;
  border-color: #555;
  color: #fff;
}

body.dark-mode .btn-outline-primary {
  color: #4a9eff;
  border-color: #4a9eff;
}

body.dark-mode .btn-outline-primary:hover {
  background-color: #4a9eff;
  color: #fff;
}

body.dark-mode .btn-danger {
  background-color: #8b0000;
  border-color: #8b0000;
}

body.dark-mode .btn-danger:hover {
  background-color: #a00000;
  border-color: #a00000;
}

body.dark-mode .btn-reset {
  color: #e0e0e0;
  border-color: #555;
}

body.dark-mode .btn-reset:hover {
  background-color: #555;
  color: #fff;
}

body.dark-mode .btn-watch {
  background-color: #8b0000;
}

body.dark-mode .btn-watch:hover {
  background-color: #a00000;
}

/* Footer */
body.dark-mode footer {
  background-color: #1a1a1a !important;
  color: #e0e0e0;
}

body.dark-mode footer .text-white {
  color: #e0e0e0 !important;
}

/* Forms */
body.dark-mode .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode .form-control:focus {
  background-color: #333;
  border-color: #8b0000;
  color: #e0e0e0;
}

body.dark-mode .form-label {
  color: #e0e0e0;
}

body.dark-mode textarea.form-control {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode .form-text {
  color: #888;
}

/* Tables */
body.dark-mode .table {
  color: #e0e0e0;
}

body.dark-mode .table-dark {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: #1e1e1e;
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: #2a2a2a;
}

body.dark-mode .modern-table-wrapper {
  background-color: #1e1e1e;
}

body.dark-mode table th {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode table td {
  border-color: #333;
}

body.dark-mode tr:nth-child(even) {
  background-color: #1e1e1e;
}

body.dark-mode tr:hover {
  background-color: #2a2a2a;
}

/* Badges */
body.dark-mode .badge {
  background-color: #333;
  color: #e0e0e0;
}

body.dark-mode .modern-badge {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #444;
}

body.dark-mode .green-badge {
  background-color: #1b4d1b;
  border-color: #2d7a2d;
}

body.dark-mode .orange-badge {
  background-color: #4d3319;
  border-color: #7a5229;
}

body.dark-mode .red-badge {
  background-color: #4d1919;
  border-color: #7a2929;
}

body.dark-mode .badge-secondary {
  background-color: #444;
}

body.dark-mode .badge-tag {
  background-color: #444;
}

body.dark-mode .badge-category {
  background-color: #8b0000;
}

body.dark-mode .badge-guest {
  background-color: #1a4d8b;
}

body.dark-mode .badge-date {
  background-color: #8b0000;
}

/* Alerts */
body.dark-mode .alert {
  background-color: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode .alert-danger {
  background-color: #4d1919;
  border-color: #7a2929;
  color: #ffcccc;
}

body.dark-mode .alert-success {
  background-color: #1b4d1b;
  border-color: #2d7a2d;
  color: #ccffcc;
}

/* Comments Section */
body.dark-mode .comment {
  background-color: #1e1e1e;
  border-color: #333;
}

body.dark-mode .comment-content {
  color: #e0e0e0;
}

body.dark-mode .comment-content h6 {
  color: #e0e0e0;
}

body.dark-mode .comment-content p {
  color: #b0b0b0;
}

body.dark-mode .user-icon {
  color: #888;
}

body.dark-mode .comment-section {
  background-color: #1e1e1e;
}

body.dark-mode .comment-section h4 {
  color: #e0e0e0;
}

body.dark-mode .like-button {
  color: #ff5722;
}

body.dark-mode .like-count {
  color: #888;
}

/* Video Player Container */
body.dark-mode .player-container {
  background-color: #1e1e1e;
}

body.dark-mode .video-info {
  color: #e0e0e0;
  background-color: #1e1e1e;
}

body.dark-mode .video-title {
  color: #e0e0e0;
}

body.dark-mode .video-stats {
  color: #b0b0b0;
}

body.dark-mode .video-section {
  background-color: #1a1a1a;
}

/* Description Section */
body.dark-mode .description {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .description h4 {
  color: #e0e0e0;
}

body.dark-mode .description p {
  color: #b0b0b0;
}

body.dark-mode .description ul li {
  color: #b0b0b0;
}

/* Sidebar (Category Page) */
body.dark-mode .sidebar {
  background-color: #1e1e1e;
  border: 1px solid #333;
}

body.dark-mode .sidebar-header {
  color: #e0e0e0;
  border-bottom-color: #333;
}

body.dark-mode .sidebar-header h4 {
  color: #e0e0e0;
}

body.dark-mode .filter-section h5 {
  color: #e0e0e0;
}

body.dark-mode .filter-search input {
  background-color: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode .filter-search input::placeholder {
  color: #888;
}

body.dark-mode .form-check-label {
  color: #e0e0e0;
}

body.dark-mode .form-check-input {
  background-color: #2a2a2a;
  border-color: #444;
}

body.dark-mode .form-check-input:checked {
  background-color: #8b0000;
  border-color: #8b0000;
}

body.dark-mode .filter-item {
  color: #b0b0b0;
}

body.dark-mode .filter-item:hover,
body.dark-mode .filter-item.active {
  color: #ff5722;
}

/* Offcanvas */
body.dark-mode .offcanvas {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .offcanvas-header {
  border-bottom-color: #333;
}

body.dark-mode .offcanvas-title {
  color: #e0e0e0;
}

body.dark-mode .btn-close {
  filter: invert(1);
}

/* Pagination */
body.dark-mode .pagination .page-link {
  background-color: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode .pagination .page-link:hover {
  background-color: #333;
  border-color: #555;
  color: #fff;
}

body.dark-mode .pagination .page-item.active .page-link {
  background-color: #8b0000;
  border-color: #8b0000;
}

/* Search Results */
body.dark-mode #searchResults {
  background-color: #1e1e1e;
  border-color: #444;
}

body.dark-mode #searchResults .result-item {
  color: #e0e0e0;
}

body.dark-mode #searchResults .result-item:hover {
  background-color: #2a2a2a;
}

/* Carousel */
body.dark-mode .carousel-caption {
  background-color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .carousel-item .position-relative {
  background-color: #1a1a1a;
}

/* Icons */
body.dark-mode .icon-style {
  color: #e0e0e0 !important;
}

body.dark-mode .icon-style:hover {
  color: #ff5722 !important;
}

/* Scroll Icons */
body.dark-mode .scroll-icon-left,
body.dark-mode .scroll-icon-right {
  color: #e0e0e0;
}

body.dark-mode .scroll-icon-left:hover,
body.dark-mode .scroll-icon-right:hover {
  color: #ff5722;
}

body.dark-mode .icons-container .btn {
  background: #8b0000 !important;
  color: #ffffff !important;
}

body.dark-mode .icons-container .btn:hover {
  background: #a00000 !important;
}

/* Page Heading */
body.dark-mode .category-title,
body.dark-mode .new-videos-header {
  color: #e0e0e0;
}

body.dark-mode .new-videos-header::after {
  background-color: #8b0000;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
  color: #e0e0e0;
}

/* Links */
body.dark-mode a {
  color: #4a9eff;
}

body.dark-mode a:hover {
  color: #6bb3ff;
}

body.dark-mode .text-decoration-none {
  color: inherit;
}

/* SVG Logo */
body.dark-mode .site-logo .st0 {
  fill: #e0e0e0;
}

/* Playlist */
body.dark-mode .playlist {
  background-color: #1e1e1e;
}

body.dark-mode .playlist li {
  background-color: #2a2a2a;
}

body.dark-mode .playlist li:hover {
  background-color: #333;
}

body.dark-mode .playlist li.active {
  background-color: #8b0000;
}

body.dark-mode .playlist span {
  color: #e0e0e0;
}

body.dark-mode .duration-badge {
  background-color: rgba(0, 0, 0, 0.8);
  color: #e0e0e0;
}

/* Video Cards Section */
body.dark-mode .video-cards-section h3 {
  color: #e0e0e0;
}

body.dark-mode .video-cards-section h3::after {
  background-color: #8b0000;
}

/* Toggle Switch */
body.dark-mode .toggle-switch label {
  background-color: #555;
}

body.dark-mode .toggle-switch input:checked + label {
  background-color: #28a745 !important;
}

/* Share Popup */
body.dark-mode .share-popup {
  background-color: #1e1e1e;
}

body.dark-mode .share-popup a {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode .share-popup a:hover {
  background-color: #333;
}

/* Lights Off Overlay */
body.dark-mode .lights-off-overlay {
  background-color: rgba(0, 0, 0, 0.95);
}

/* Page.php specific */
body.dark-mode .hp-text {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .hp-text h1,
body.dark-mode .hp-text h2,
body.dark-mode .hp-text h3 {
  color: #e0e0e0;
}

body.dark-mode .hp-text p {
  color: #b0b0b0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body.dark-mode .sidebar {
    background-color: #1a1a1a;
  }
  
  body.dark-mode .filter-toggle-btn {
    background-color: #2a2a2a !important;
    border-color: #444;
  }
  
  body.dark-mode .filter-toggle-btn:hover {
    background-color: #333 !important;
  }
}

/* Dark Mode Toggle Button */
#darkModeToggle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#darkModeToggle:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.2);
}

#darkModeToggle i {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

#darkModeToggle:hover i {
  transform: rotate(20deg);
}

body.dark-mode #darkModeToggle {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffa726;
}

body.dark-mode #darkModeToggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Smooth transitions for dark mode */
body,
.card,
.navbar,
.btn,
.form-control,
.table,
.badge,
.alert,
.sidebar,
.description,
.comment-section,
.video-section {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Prevent dark mode flash on page load */
body.dark-mode-loading {
  visibility: hidden;
}