/* Neo Skola TV - Theme Settings */

:root {
    /* Brand colors */
    --primary-color: #ED1C24;
    /* Red accent color */
    --secondary-color: #ffffff;
    /* White */
    --accent-color: #ED1C24;
    /* Red */
    --dark-bg: #000000;
    /* Black background */
    --dark-bg-secondary: #111111;
    /* Slightly lighter black for cards and containers */
    --dark-bg-tertiary: #222222;
    /* Even lighter black for hovers and highlights */
    --light-text: #ffffff;
    /* White text */
    --light-text-secondary: #dddddd;
    /* Slightly dimmed white text for less emphasis */
    --border-color: #333333;
    /* Border color for separators */

    /* Component-specific colors */
    --button-bg: #ED1C24;
    /* Button background */
    --button-text: #ffffff;
    /* Button text */
    --button-hover-bg: #ff3c42;
    /* Button hover state */
    --input-bg: #111111;
    /* Input fields background */
    --input-border: #333333;
    /* Input fields border */
    --card-bg: #111111;
    /* Card background */
    --active-item-bg: #222222;
    /* Active item background */
    --progress-bg: #333333;
    /* Progress bar background */
    --progress-fill: #ED1C24;
    /* Progress bar fill */

    /* Status colors */
    --success-color: #4CD964;
    /* Success messages */
    --warning-color: #FFCC00;
    /* Warning messages */
    --error-color: #FF3B30;
    /* Error messages */
}

/* Global theme styles */
body {
    background-color: var(--dark-bg);
    color: var(--light-text);
}

/* Card, container, and modal styling */
.card, .container, .modal-content {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
}

/* Button styling */
button, .button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
}

button:hover, .button:hover {
    background-color: var(--button-hover-bg);
}

button.secondary, .button.secondary {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--light-text);
}

button.secondary:hover, .button.secondary:hover {
    background-color: var(--dark-bg-tertiary);
}

/* Input styling */
input, select, textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--light-text);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
}

/* Tab and navigation styling */
.tab-button, .nav-item {
    color: var(--light-text);
}

.tab-button.active, .nav-item.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Progress bars */
.progress-bar-bg {
    background-color: var(--progress-bg);
}

.progress-bar-fill {
    background-color: var(--progress-fill);
}

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--button-hover-bg);
}

/* Headers and section titles */
h1, h2, h3, h4, h5, h6 {
    color: var(--light-text);
}

/* Separators */
hr {
    border-color: var(--border-color);
}

/* Status indicators */
.success {
    color: var(--success-color);
}

.warning {
    color: var(--warning-color);
}

.error {
    color: var(--error-color);
}

/* Loading indicators */
.loading-indicator {
    color: var(--light-text-secondary);
}

/* Video and thumbnail elements */
.video-item {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
}

.video-item:hover {
    border-color: var(--primary-color);
}

/* Category and tag styles */
.category-item, .tag {
    background-color: var(--dark-bg-secondary);
    color: var(--light-text);
    border: 1px solid var(--border-color);
}

.category-item:hover, .tag:hover {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--primary-color);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #444444;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

::-webkit-scrollbar-track {
    background: var(--dark-bg);
}