/* CapChur Dark Theme - Modern & Sophisticated */

:root {
    --color-bg-primary: #121212;
    --color-bg-secondary: #1e1e1e;
    --color-bg-tertiary: #2d2d2d;
    --color-bg-card: #252525;
    --color-bg-hover: #333333;
    
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #6c7293;
    
    --color-accent-primary: #4CAF50; /* Green */
    --color-accent-secondary: #66BB6A; /* Light Green */
    --color-accent-tertiary: #2E7D32; /* Dark Green */
    
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-danger: #f44336;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

/* Base styles */
body {
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    color: var(--color-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
}

/* Navigation */
nav {
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-md);
}

nav a.nav-link {
    color: var(--color-text-secondary);
    transition: color 0.2s;
}

nav a.nav-link:hover {
    color: var(--color-text-primary);
}

/* Cards and Containers */
.card, .container, .bg-white {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: var(--shadow-md);
}

/* Buttons */
.btn-primary, .bg-blue-500, .bg-blue-600, .bg-blue-700 {
    background-color: var(--color-accent-primary) !important;
    border-color: var(--color-accent-primary) !important;
}

.btn-primary:hover, .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover {
    background-color: var(--color-accent-secondary) !important;
    border-color: var(--color-accent-secondary) !important;
}

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

.text-gray-900 {
    color: var(--color-text-primary) !important;
}

/* Inputs */
input, select, textarea {
    background-color: var(--color-bg-tertiary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-primary) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.25) !important;
}

/* Links */
a:not(.btn) {
    color: var(--color-accent-secondary);
    transition: color 0.2s;
}

a:not(.btn):hover {
    color: var(--color-accent-primary);
}

/* Borders */
.border, .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Placeholder */
::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 0.7;
}

/* Alerts and notifications */
.bg-red-100 {
    background-color: rgba(244, 67, 54, 0.15) !important;
    border-color: var(--color-danger) !important;
}

.text-red-700 {
    color: #ff7875 !important;
}

/* Footer */
footer {
    background-color: var(--color-bg-secondary) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Card hover effects */
.hover\:shadow-xl:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* Background overrides */
.bg-gradient-to-br, .from-gray-50, .to-gray-100, 
.from-blue-50, .to-blue-100 {
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%) !important;
}

/* Custom hover animations */
.transform:hover {
    transform: translateY(-4px) !important;
    transition: transform 0.3s ease-in-out !important;
}

/* Fix for specific pages button colors */

/* Custom API page */
.bg-indigo-600, .hover\:bg-indigo-700 {
    background-color: var(--color-accent-primary) !important;
    border-color: var(--color-accent-primary) !important;
}

.hover\:bg-indigo-700:hover {
    background-color: var(--color-accent-secondary) !important;
    border-color: var(--color-accent-secondary) !important;
}

.focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--color-accent-primary) !important;
}

.focus\:border-indigo-500:focus {
    border-color: var(--color-accent-primary) !important;
}

/* Capture Control page */
.bg-purple-600, .hover\:bg-purple-700 {
    background-color: var(--color-accent-primary) !important;
    border-color: var(--color-accent-primary) !important;
}

.hover\:bg-purple-700:hover {
    background-color: var(--color-accent-secondary) !important;
    border-color: var(--color-accent-secondary) !important;
}

/* For both text colors and backgrounds */
.text-indigo-500, .text-indigo-600, .text-indigo-700,
.text-purple-500, .text-purple-600, .text-purple-700,
.text-blue-500, .text-blue-600, .text-blue-700 {
    color: var(--color-accent-secondary) !important;
}

/* Gallery debug panel */
.bg-yellow-100 {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #ffd54f !important;
}

/* Better readability for text on dark backgrounds */
.p-4.media-viewer p.text-xs.text-gray-400,
.p-4.media-viewer p.text-xs.text-gray-500,
.p-4.media-viewer p.text-sm.font-medium.text-gray-700 {
    color: var(--color-text-secondary) !important;
}

/* Make green text more visible */
.text-green-500 {
    color: #66BB6A !important;
    font-weight: 500;
}

/* Active button/selected state */
.active-button, .selected {
    background-color: var(--color-accent-primary) !important;
    color: white !important;
    border-color: var(--color-accent-primary) !important;
}

/* Fix for form feedback and validation messages */
.text-red-500, .text-red-600 {
    color: #ff7875 !important;
}

.text-green-600 {
    color: #66BB6A !important;
}

/* Fix for disabled buttons */
button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Additional fixes for specific UI elements */

/* Make selection panel buttons consistent */
#selectionPanel button {
    background-color: var(--color-accent-primary) !important;
    color: white !important;
}

#selectionPanel button:hover {
    background-color: var(--color-accent-secondary) !important;
}

#cancelSelection {
    background-color: #616161 !important;
}

#cancelSelection:hover {
    background-color: #757575 !important;
}

/* Fix for the helmet numbers in capture control */
#buttons-container button {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#buttons-container button:hover {
    background-color: var(--color-accent-primary) !important;
    color: white !important;
}

#buttons-container button.selected,
#buttons-container button.active {
    background-color: var(--color-accent-primary) !important;
    color: white !important;
}

/* Better visibility for today button in capture control */
#todayButton {
    background-color: var(--color-accent-tertiary) !important;
    color: white !important;
}

#todayButton:hover {
    background-color: var(--color-accent-primary) !important;
}

/* Better visibility for gallery filter buttons */
#applyFilters, #refreshGallery {
    background-color: var(--color-accent-primary) !important;
}

#applyFilters:hover, #refreshGallery:hover {
    background-color: var(--color-accent-secondary) !important;
}

/* Fix for gallery view borders and backgrounds */
.border-t {
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}

/* Fix for SVG colors */
svg.text-blue-500, svg.text-indigo-500, svg.text-purple-500 {
    color: var(--color-accent-secondary) !important;
}

/* Fix for flatpickr calendar in custom API */
.flatpickr-calendar {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: var(--shadow-md) !important;
}

.flatpickr-day {
    color: var(--color-text-primary) !important;
}

.flatpickr-day.selected {
    background-color: var(--color-accent-primary) !important;
    border-color: var(--color-accent-primary) !important;
}

/* Camera monitoring boxes in capture control */
#camera1-status, #camera2-status, 
#camera1-uploads, #camera2-uploads,
.bg-gray-50 {
    background-color: var(--color-bg-tertiary) !important; 
    color: var(--color-text-secondary) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Debug panel improvements */
#debug {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#debug p {
    color: #ffd54f !important;
}

/* Better readability for status indicators */
#statusText, #fileCount {
    color: white !important;
    font-weight: 500;
}

/* Loading indicators */
.animate-spin {
    color: var(--color-accent-primary) !important;
}

/* Red buttons - keep red for end session, but make it match the theme better */
.bg-red-500 {
    background-color: #e57373 !important; /* Lighter red */
}

.hover\:bg-red-600:hover {
    background-color: #ef5350 !important;
}

/* Fix for file input */
input[type="file"] {
    background-color: transparent !important;
}

/* Improve logout button text contrast */
.bg-red-500, .hover\:bg-red-600 {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.02em !important;
}

/* New style for the status panel in gallery */
.status-panel {
    background-color: rgba(76, 175, 80, 0.15) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
    color: var(--color-text-primary) !important;
}

.status-panel p {
    color: var(--color-text-primary) !important;
    margin-bottom: 0.5rem;
}

.status-panel p:last-child {
    margin-bottom: 0;
}

#statusText, #fileCount {
    color: var(--color-accent-secondary) !important;
    font-weight: 600;
}