/* CapChur Light Theme - Modern & Clean */

:root {
    --light-bg-primary: #f8f9fa;
    --light-bg-secondary: #ffffff;
    --light-bg-tertiary: #f1f3f5;
    
    --light-text-primary: #333333;
    --light-text-secondary: #4a5568;
    --light-text-muted: #718096;
    
    --light-accent-primary: #4CAF50; /* Green */
    --light-accent-secondary: #66BB6A; /* Light Green */
    --light-accent-tertiary: #2E7D32; /* Dark Green */
    
    --light-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --light-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
    --light-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05);
}

/* Apply light theme to both body and html for consistency */
html.light-mode,
body.light-mode,
.light-mode {
    background: var(--light-bg-primary) !important;
    color: var(--light-text-primary) !important;
}

/* Containers and cards */
.light-mode .container, 
.light-mode .bg-white,
.light-mode .card {
    background-color: var(--light-bg-secondary) !important;
    color: var(--light-text-primary) !important;
    box-shadow: var(--light-shadow-md) !important;
}

/* Form controls */
.light-mode input, 
.light-mode select,
.light-mode textarea {
    background-color: var(--light-bg-secondary) !important;
    border-color: #e2e8f0 !important;
    color: var(--light-text-primary) !important;
}

/* Specifically target date inputs */
.light-mode input[type="date"] {
    color-scheme: light !important;
    background-color: var(--light-bg-secondary) !important;
    color: var(--light-text-primary) !important;
}

.light-mode .date-input-icon {
    color: var(--light-text-secondary) !important;
}

/* Text colors */
.light-mode .text-gray-600, 
.light-mode .text-gray-700, 
.light-mode .text-gray-800 {
    color: var(--light-text-secondary) !important;
}

/* Borders */
.light-mode .border, 
.light-mode .border-gray-200,
.light-mode .border-t {
    border-color: #e2e8f0 !important;
}

/* Status panel */
.light-mode .status-panel {
    background-color: rgba(76, 175, 80, 0.1) !important;
    border: 1px solid rgba(76, 175, 80, 0.2) !important;
}

.light-mode .status-panel p {
    color: var(--light-text-primary) !important;
}

.light-mode #statusText, 
.light-mode #fileCount {
    color: var(--light-accent-tertiary) !important;
    font-weight: 600;
}

/* Buttons - Standard blue and indigo turn green */
.light-mode .bg-blue-500, 
.light-mode .bg-blue-600, 
.light-mode .bg-indigo-600 {
    background-color: var(--light-accent-primary) !important;
    color: white !important;
}

.light-mode .hover\:bg-blue-600:hover, 
.light-mode .hover\:bg-blue-700:hover,
.light-mode .hover\:bg-indigo-700:hover {
    background-color: var(--light-accent-secondary) !important;
}

/* Ensure green buttons remain green */
.light-mode .bg-green-500 {
    background-color: var(--light-accent-primary) !important; /* Use same green */
    color: white !important;
}

.light-mode .hover\:bg-green-600:hover {
    background-color: var(--light-accent-secondary) !important;
}

/* Preserve purple button color in capture control */
.light-mode .bg-purple-600 {
    background-color: var(--light-accent-primary) !important; /* Use green instead of purple */
    color: white !important;
}

.light-mode .hover\:bg-purple-700:hover {
    background-color: var(--light-accent-secondary) !important; /* Use lighter green on hover */
    color: white !important;
}

/* Preserve red button color in capture control */
.light-mode .bg-red-500 {
    background-color: #ef4444 !important; /* Keep this red */
    color: white !important;
}

.light-mode .hover\:bg-red-600:hover {
    background-color: #dc2626 !important; /* Keep red hover state */
    color: white !important;
}

/* Media display */
.light-mode .media-container {
    background-color: var(--light-bg-tertiary) !important;
}

/* Background colors */
.light-mode .bg-gray-50,
.light-mode .bg-gray-100 {
    background-color: var(--light-bg-tertiary) !important;
}

/* Selection panel */
.light-mode #selectionPanel {
    background-color: var(--light-bg-secondary) !important;
    box-shadow: var(--light-shadow-lg) !important;
}

/* Gallery media components */
.light-mode .p-4.media-viewer p {
    color: var(--light-text-secondary) !important;
}

/* Debug panel */
.light-mode #debug {
    border: 1px solid rgba(76, 175, 80, 0.2) !important;
}

/* Text highlighting and selection */
.light-mode ::selection {
    background-color: rgba(76, 175, 80, 0.2) !important;
    color: var(--light-text-primary) !important;
}

/* Camera monitoring boxes */
.light-mode #camera1-status, 
.light-mode #camera2-status, 
.light-mode #camera1-uploads, 
.light-mode #camera2-uploads {
    background-color: var(--light-bg-tertiary) !important;
    color: var(--light-text-secondary) !important;
    border-color: #e2e8f0 !important;
}

/* Main index page card fixes */
.light-mode a.block.bg-white {
    background-color: var(--light-bg-secondary) !important;
}

/* For backward compatibility */
body:not(.dark-mode) {
    background: var(--light-bg-primary) !important;
    color: var(--light-text-primary) !important;
}