/* VsisPanel Theme System - Light and Dark themes */

/* Light Theme (Default) */
:root[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f6f6f6;
    --bg-tertiary: #f6f6f6;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #868e96;
    --border-color: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);

    /* Card colors */
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Navbar colors */
    --navbar-bg: #343a40;
    --navbar-text: #ffffff;
    --navbar-hover: #495057;

    /* Button colors */
    --btn-primary-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --btn-secondary-bg: #6c757d;
    --btn-success-bg: #28a745;
    --btn-warning-bg: #ffc107;
    --btn-info-bg: #17a2b8;
    --btn-danger-bg: #dc3545;

    /* Form colors */
    --input-bg: #ffffff;
    --input-border: #e9ecef;
    --input-focus-border: #667eea;
    --input-focus-shadow: rgba(102, 126, 234, 0.25);

    /* Background gradient */
    --body-bg: linear-gradient(135deg, #d7d8dc 0%, #e9e7ea 100%);
}

/* Dark Theme */
:root[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #a0aec0;
    --border-color: #4a5568;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-lg: rgba(0, 0, 0, 0.5);

    /* Card colors */
    --card-bg: #2d3748;
    --card-border: #4a5568;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* Navbar colors */
    --navbar-bg: #1a202c;
    --navbar-text: #f7fafc;
    --navbar-hover: #2d3748;

    /* Button colors */
    --btn-primary-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --btn-secondary-bg: #4a5568;
    --btn-success-bg: #48bb78;
    --btn-warning-bg: #ed8936;
    --btn-info-bg: #4299e1;
    --btn-danger-bg: #f56565;

    /* Form colors */
    --input-bg: #2d3748;
    --input-border: #4a5568;
    --input-focus-border: #667eea;
    --input-focus-shadow: rgba(102, 126, 234, 0.25);

    /* Background gradient */
    --body-bg: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}

/* Apply theme variables to elements */
body {
    background: var(--body-bg) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    color: var(--text-primary) !important;
}

.navbar-dark {
    background-color: var(--navbar-bg) !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--navbar-text) !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    background-color: var(--navbar-hover) !important;
}

.form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.form-control:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow) !important;
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
}

.form-label {
    color: var(--text-primary) !important;
}

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

.btn-primary {
    background: var(--btn-primary-bg) !important;
    border: none !important;
}

.btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-bg) !important;
}

.btn-success {
    background-color: var(--btn-success-bg) !important;
    border-color: var(--btn-success-bg) !important;
}

.btn-warning {
    background-color: var(--btn-warning-bg) !important;
    border-color: var(--btn-warning-bg) !important;
}

.btn-info {
    background-color: var(--btn-info-bg) !important;
    border-color: var(--btn-info-bg) !important;
}

.btn-danger {
    background-color: var(--btn-danger-bg) !important;
    border-color: var(--btn-danger-bg) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--card-shadow) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.dropdown-divider {
    border-color: var(--border-color) !important;
}

/* Alert colors for dark theme */
[data-theme="dark"] .alert-danger {
    background-color: rgba(245, 101, 101, 0.1) !important;
    border-color: #f56565 !important;
    color: #fed7d7 !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(72, 187, 120, 0.1) !important;
    border-color: #48bb78 !important;
    color: #c6f6d5 !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(66, 153, 225, 0.1) !important;
    border-color: #4299e1 !important;
    color: #bee3f8 !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(237, 137, 54, 0.1) !important;
    border-color: #ed8936 !important;
    color: #fbd38d !important;
}

/* Theme transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme toggle button */
.theme-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Navbar theme toggle - smaller version */
.theme-toggle-navbar {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 24px;
}

.theme-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.theme-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.theme-toggle input:checked+.theme-slider {
    background-color: #667eea;
}

.theme-toggle input:checked+.theme-slider:before {
    transform: translateX(26px);
}

/* Icons in theme toggle */
.theme-slider .fa-sun {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #ffa500;
    font-size: 12px;
}

.theme-slider .fa-moon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #87ceeb;
    font-size: 12px;
}

/* Navbar theme toggle styles */
.theme-toggle-navbar input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider-navbar {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.theme-slider-navbar:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.theme-toggle-navbar input:checked+.theme-slider-navbar {
    background-color: #667eea;
}

.theme-toggle-navbar input:checked+.theme-slider-navbar:before {
    transform: translateX(18px);
}

.theme-slider-navbar .fa-sun {
    position: absolute;
    top: 6px;
    left: 6px;
    color: #ffa500;
    font-size: 10px;
}

.theme-slider-navbar .fa-moon {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #87ceeb;
    font-size: 10px;
}

/* Navbar language dropdown improvements */
.navbar-dark .dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.navbar-dark .dropdown-item {
    color: var(--text-primary);
}

.navbar-dark .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Navbar theme toggle in dark mode */
[data-theme="dark"] .theme-slider-navbar {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .theme-toggle-navbar input:checked+.theme-slider-navbar {
    background-color: #667eea;
}