/**
 * ====================================================
 * DARK MODE THEME SYSTEM
 * ====================================================
 * CSS custom properties for light/dark themes
 * Toggle via navbar, persisted in localStorage
 * ====================================================
 */

/* ====================================================
   LIGHT THEME (Default)
   ==================================================== */
:root {
    /* Background colors */
    --bg-primary: none;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-hover: #f1f3f5;
    --bg-grads: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Text colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-tertiary: #adb5bd;
    --text-inverse: #ffffff;

    /* Border colors */
    --border-color: #dee2e6;
    --border-hover: #adb5bd;

    /* Brand colors */
    --brand-primary: #667eea;
    --brand-secondary: #764ba2;
    --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Success/Error/Warning colors */
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --success-text: #155724;

    --error-bg: #f8d7da;
    --error-border: #f5c6cb;
    --error-text: #721c24;

    --warning-bg: #fff3cd;
    --warning-border: #ffeaa7;
    --warning-text: #856404;

    --info-bg: #d1ecf1;
    --info-border: #bee5eb;
    --info-text: #0c5460;

    /* Card/Panel */
    --card-bg: #ffffff;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Input/Form */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus-border: #667eea;
    --input-disabled-bg: #e9ecef;

    /* Button */
    --btn-primary-bg: #667eea;
    --btn-primary-hover: #5568d3;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-hover: #5a6268;

    /* Video player */
    --player-bg: #000000;
    --player-controls-bg: rgba(0, 0, 0, 0.7);

    /* Scrollbar */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #888;
    --scrollbar-thumb-hover: #555;
}

/* ====================================================
   DARK THEME
   ==================================================== */
[data-theme="dark"] {
    /* Background colors */
    --bg-primary: #2d2d2d;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-hover: #404040;
    --bg-grads: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Text colors */
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --text-tertiary: #6c757d;
    --text-inverse: #212529;

    /* Border colors */
    --border-color: #404040;
    --border-hover: #555555;

    /* Brand colors (keep same) */
    --brand-primary: #7c8fff;
    --brand-secondary: #9066d9;
    --brand-gradient: linear-gradient(135deg, #7c8fff 0%, #9066d9 100%);

    /* Success/Error/Warning colors (darker) */
    --success-bg: #1e4620;
    --success-border: #2d5f2e;
    --success-text: #7bc67e;

    --error-bg: #4a1a1e;
    --error-border: #6d2c30;
    --error-text: #f1959b;

    --warning-bg: #4a3f1a;
    --warning-border: #6d5c2c;
    --warning-text: #f1d877;

    --info-bg: #1a3a4a;
    --info-border: #2c5566;
    --info-text: #77c5e1;

    /* Card/Panel */
    --card-bg: #2d2d2d;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* Input/Form */
    --input-bg: #1a1a1a;
    --input-border: #404040;
    --input-focus-border: #7c8fff;
    --input-disabled-bg: #3a3a3a;

    /* Button */
    --btn-primary-bg: #7c8fff;
    --btn-primary-hover: #6a7ae8;
    --btn-secondary-bg: #495057;
    --btn-secondary-hover: #383d42;

    /* Video player (keep same) */
    --player-bg: #000000;
    --player-controls-bg: rgba(0, 0, 0, 0.8);

    /* Scrollbar */
    --scrollbar-track: #2d2d2d;
    --scrollbar-thumb: #555;
    --scrollbar-thumb-hover: #777;
}

/* ====================================================
   APPLY THEME VARIABLES
   ==================================================== */

/* Body */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Containers - removed background override to allow page layouts to control */
/*.container,
.main-content {
    background-color: var(--bg-primary);
}*/

/* Cards/Panels */
.card,
.panel,
.box,
.video-card,
.folder-card {
    background-color: var(--card-bg);
    /* border removed - let individual CSS control borders */
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.card:hover,
.video-card:hover,
.folder-card:hover {
    box-shadow: var(--card-shadow-hover);
}

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

/* Text */
p,
span,
div {
    color: var(--text-primary);
}

.text-muted,
.text-secondary {
    color: var(--text-secondary) !important;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

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

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--input-disabled-bg);
}

/* Buttons */
.btn-primary {
    background: var(--btn-primary-bg);
    border: none;
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text-inverse);
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover);
}

/* Gradient buttons */
.btn-gradient {
    background: var(--brand-gradient);
}

/* Alerts */
.alert-success {
    background-color: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.alert-error,
.alert-danger {
    background-color: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

.alert-warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.alert-info {
    background-color: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}

/* Tables */
table {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

td {
    border-bottom: 1px solid var(--border-color);
}

tr:hover {
    background-color: var(--bg-hover);
}

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

a:hover {
    color: var(--brand-secondary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

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

/* Modals */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

/* Navbar (will be in component but theme-aware) */
nav {
    background: var(--brand-gradient);
}

/* File manager specific */
.file-item {
    background-color: var(--card-bg);
}

.file-item:hover {
    background-color: var(--bg-hover);
}

/* Video player specific */
video {
    background-color: var(--player-bg);
}

.video-controls {
    background-color: var(--player-controls-bg);
}

/* Code blocks (if any) */
pre,
code {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Badges */
.badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.badge-primary {
    background-color: var(--brand-primary);
    color: var(--text-inverse);
}

.badge-success {
    background-color: var(--success-border);
    color: var(--success-text);
}

.badge-danger {
    background-color: var(--error-border);
    color: var(--error-text);
}