/**
 * KRISDYL - Power Management System
 * 
 * This file is part of the KRISDYL Power Management System built with CodeIgniter 4.
 * 
 * @author     Yerany Hernandez Martinez
 * @copyright  2025 Yerany Hernandez Martinez
 * @link       https://yerany.dev
 * @since      Version 1.0.0
 */

/* Theme System CSS */

/* Light Mode Styles (default) */
.theme-light {
    background-color: var(--theme-background) !important;
    color: var(--theme-text) !important;
}

.theme-light .main-header {
    background-color: var(--theme-background) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

.theme-light .content-wrapper {
    background-color: var(--theme-background) !important;
}

.theme-light .card {
    background-color: var(--theme-background) !important;
    border: 1px solid rgba(0,0,0,0.125) !important;
    color: var(--theme-text) !important;
}

.theme-light .form-control {
    background-color: var(--theme-background) !important;
    border: 1px solid #ced4da !important;
    color: var(--theme-text) !important;
}

.theme-light .btn-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.theme-light .breadcrumb-item a {
    color: var(--theme-primary) !important;
}

/* Dark Mode Styles */
.theme-dark {
    background-color: var(--theme-background) !important;
    color: var(--theme-text) !important;
}

.theme-dark .main-header {
    background-color: #2c2c2c !important;
    border-bottom: 1px solid #404040 !important;
}

.theme-dark .navbar-dark {
    background-color: #2c2c2c !important;
}

.theme-dark .main-sidebar {
    background-color: #212529 !important;
}

.theme-dark .content-wrapper {
    background-color: var(--theme-background) !important;
}

.theme-dark .card {
    background-color: #2c2c2c !important;
    border: 1px solid #404040 !important;
    color: var(--theme-text) !important;
}

.theme-dark .card-header {
    background-color: #333333 !important;
    border-bottom: 1px solid #404040 !important;
}

.theme-dark .form-control {
    background-color: #333333 !important;
    border: 1px solid #555555 !important;
    color: var(--theme-text) !important;
}

.theme-dark .form-control:focus {
    background-color: #404040 !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

.theme-dark .btn-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.theme-dark .info-box {
    background-color: #2c2c2c !important;
    color: var(--theme-text) !important;
}

.theme-dark .alert-success {
    background-color: #155724 !important;
    border-color: #1e7e34 !important;
    color: #d4edda !important;
}

.theme-dark .alert-danger {
    background-color: #721c24 !important;
    border-color: #842029 !important;
    color: #f8d7da !important;
}

.theme-dark .breadcrumb {
    background-color: #2c2c2c !important;
}

.theme-dark .breadcrumb-item a {
    color: var(--theme-primary) !important;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Auto mode detection */
@media (prefers-color-scheme: dark) {
    .theme-auto {
        background-color: #1a1a1a !important;
        color: #e8e8e8 !important;
    }
    
    .theme-auto .main-header {
        background-color: #2c2c2c !important;
    }
    
    .theme-auto .card {
        background-color: #2c2c2c !important;
        border: 1px solid #404040 !important;
        color: #e8e8e8 !important;
    }
}

/* Color picker customizations */
.form-control-color {
    width: 50px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 2px;
}

.theme-dark .form-control-color {
    border-color: #555555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }
}

/* Smooth transitions for theme switching */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.wrapper, .content-wrapper, .main-header, .main-sidebar, .card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}