/**
 * Dark Mode Support
 * 
 * Dark mode styles that respect user preference
 */

@media (prefers-color-scheme: dark) {
    :root {
        --stf-bg-dark: #0a0a0a;
        --stf-bg-darker: #000000;
        --stf-text-dark: #e0e0e0;
        --stf-border-dark: #333333;
    }
    
    body {
        background-color: var(--stf-bg-dark);
        color: var(--stf-text-dark);
    }
    
    .lcars-panel {
        background-color: var(--stf-bg-darker);
        border-color: var(--stf-border-dark);
    }
    
    .content-panel {
        background-color: rgba(26, 26, 26, 0.8);
        color: var(--stf-text-dark);
    }
    
    input, textarea, select {
        background-color: #1a1a1a;
        color: var(--stf-text-dark);
        border-color: var(--stf-border-dark);
    }
    
    table {
        background-color: var(--stf-bg-darker);
    }
    
    th, td {
        border-color: var(--stf-border-dark);
    }
}

/* Dark mode toggle */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--stf-primary, #FF6600);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.dark-mode-toggle:hover {
    background-color: #ff8800;
}

/* Manual dark mode class */
body.dark-mode {
    background-color: #0a0a0a;
    color: #e0e0e0;
}

body.dark-mode .lcars-panel {
    background-color: #000000;
}

body.dark-mode .content-panel {
    background-color: rgba(26, 26, 26, 0.8);
}