/* General Dark Mode Variables & Base */
/* Assuming your main site already uses these, ensuring consistency */
:root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #222222;
    --dark-card-bg: #282828;
    --dark-border-color: #333;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-text-muted: #888;
    --dark-accent-green: #58d68d;
    --dark-accent-green-hover: #4ac77c;
    --dark-input-bg: #282828;
    --dark-input-border: #444;
    --dark-input-placeholder: #888;
    --dark-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --dark-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --dark-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* 1. Body & Global Background/Text */
body {
    background-color: var(--dark-bg-primary); /* Override light background */
    color: var(--dark-text-primary);          /* Override light text */
}

/* 2. Page Heading */
.page-heading,
.channel-header h1,
.channel-header h2 {
    color: var(--dark-accent-green) !important; /* Your vibrant green for headings */
}

/* 3. Search Bar */
.search-bar {
    background-color: var(--dark-bg-primary); /* Ensure background is dark */
}

.search-input {
    background-color: var(--dark-input-bg);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-input-border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.search-input::placeholder {
    color: var(--dark-input-placeholder);
}

.search-input:focus {
    border-color: var(--dark-accent-green);
    box-shadow: 0 0 0 3px rgba(88, 214, 141, 0.4);
}

#searchSubmitBtn {
    background-color: var(--dark-accent-green);
    color: var(--dark-bg-primary); /* Dark text on green button */
    border: none; /* Override any light borders */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#searchSubmitBtn:hover:not(:disabled) {
    background-color: var(--dark-accent-green-hover);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#searchSubmitBtn:disabled {
    background-color: #2f6f35; /* Darker disabled green */
    color: #888; /* Muted text for disabled */
}

/* 4. Checkbox Labels/Buttons */
.channel-filters label {
    color: var(--dark-text-primary); /* Light text for labels */
}

.channel-filters input[type="checkbox"] {
    border-color: var(--dark-accent-green); /* Green border */
    background-color: var(--dark-input-bg); /* Dark background when unchecked */
}

.channel-filters input[type="checkbox"]:checked {
    background-color: var(--dark-accent-green); /* Vibrant green when checked */
    border-color: var(--dark-accent-green);
}

.channel-filters input[type="checkbox"]:hover {
    border-color: var(--dark-accent-green-hover);
}

/* 5. Video Cards */
.video-tile {
    background-color: var(--dark-card-bg); /* Dark card background */
    box-shadow: var(--dark-card-shadow);
    border: 1px solid var(--dark-border-color); /* Subtle dark border */
}

.video-tile:hover {
    box-shadow: var(--dark-hover-shadow);
}

.video-tile h2 a {
    color: var(--dark-accent-green); /* Vibrant green for video titles */
}

.video-tile h2 a:hover {
    color: var(--dark-accent-green-hover); /* Slightly darker green on hover */
}

/* Ingredient Tags inside video tiles */
.ingredient-container span {
    background-color: #2f6f35; /* A darker green for tags */
    color: #e0e0e0; /* Light text on tags */
}

/* Iframes (YouTube videos themselves) - less control here, but ensure background behind them is dark */
iframe {
    background-color: #000; /* Fallback for iframe background if possible */
}

/* General Typography Utilities */
.text-muted {
    color: var(--dark-text-muted);
}

/* Section Titles (if used elsewhere on this page) */
.section-title {
    color: var(--dark-text-primary);
}

/* Divider */
.divider {
    background-color: var(--dark-border-color);
}

/* Details & Summary Blocks */
details {
    background-color: var(--dark-card-bg);
    border: 1px solid var(--dark-border-color);
    box-shadow: var(--dark-card-shadow);
}

summary {
    color: var(--dark-text-primary); /* Light text for summary */
}

.scrollable-list {
    color: var(--dark-text-secondary); /* Lighter grey for list items */
}

/* Channel Header details (from channel-style.css related to text) */
.channel-header h1,
.channel-header h2 {
    color: var(--dark-accent-green) !important;
}

.channel-header p {
    color: var(--dark-text-secondary);
}

/* Tags within channel-style.css */
.tag {
    background-color: #2f6f35; /* Darker green for tags */
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.tag:hover {
    background-color: #3a8a3a; /* Lighter green on hover */
}

/* Video Section / Info Section */
.video-section,
.info-section {
    background-color: var(--dark-card-bg);
    box-shadow: var(--dark-card-shadow);
    border: 1px solid var(--dark-border-color);
}

.video-card {
    background-color: var(--dark-card-bg);
    box-shadow: var(--dark-card-shadow);
    border: 1px solid var(--dark-border-color);
}

/* Pagination buttons (if used on this page, currently only on main search) */
.pagination-btn {
    background-color: var(--dark-accent-green);
    color: var(--dark-bg-primary);
    border: 1px solid var(--dark-accent-green);
}

.pagination-btn:disabled {
    background-color: #2f6f35;
    color: #888;
}

/* Footer (if loaded from component and using this styling) */
.footer {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-muted);
    border-top: 1px solid var(--dark-border-color);
}

/* Loader */
.loader {
    border-color: var(--dark-border-color);
    border-top-color: var(--dark-accent-green);
}

/* Empty state */
.empty-state {
    background-color: #282828;
    color: #e0e0e0;
    border: 1px dashed #58d68d;
}

/* Specific Summary details text */
.summary {
    color: var(--dark-text-primary);
}
.summary strong {
    color: var(--dark-accent-green);
}