/* CapChur Dark Theme - Modern & Sophisticated */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;600;700&display=swap');

: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: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
}

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

/* Kiosk modal */
.kiosk-modal-content {
    background-color: var(--color-bg-card) !important;
}

.kiosk-modal-content h3 {
    color: var(--color-text-primary) !important;
}

.kiosk-modal-content p {
    color: var(--color-text-secondary) !important;
}

.kiosk-modal-content kbd {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.kiosk-modal-content button[onclick="closeKioskModal()"] {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-secondary) !important;
}

.kiosk-modal-content button[onclick="closeKioskModal()"]:hover {
    background-color: var(--color-bg-tertiary) !important;
}

/* Kiosk launch section dashed border */
.border-dashed {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.border-dashed:hover {
    border-color: var(--color-accent-primary) !important;
}

/* Icon background circles in dark mode */
.bg-green-100, .bg-blue-100, .bg-purple-100, .bg-amber-100 {
    background-color: var(--color-bg-tertiary) !important;
}

/* 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;
}

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

.date-input-wrap input[type="date"] {
    background-color: var(--color-bg-tertiary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-primary) !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,
.bg-gray-50:not(.cc-uploads-list) {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-secondary) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Camera phone cards already have their own dark styling — prevent .bg-white override */
.camera-phone-card {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    border-color: transparent !important;
}

/* Uploads collapsible header inside camera cards */
.camera-phone-card .cc-uploads-toggle {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.7) !important;
}
.camera-phone-card .cc-uploads-toggle:hover {
    background-color: rgba(255,255,255,0.05) !important;
    color: #fff !important;
}
.camera-phone-card .cc-uploads-toggle .chevron {
    color: rgba(255,255,255,0.4) !important;
}
.camera-phone-card .cc-uploads-list {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.7) !important;
}

/* Standalone uploads toggle (outside camera cards) */
.cc-uploads-toggle {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-text-primary) !important;
    padding: 0.625rem 0.75rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cc-uploads-toggle:hover {
    background-color: var(--color-bg-hover) !important;
    color: var(--color-text-primary) !important;
}

.cc-uploads-toggle .chevron {
    color: var(--color-text-secondary) !important;
}

/* Expanded uploads list: match camera card surface */
#camera1-uploads.cc-uploads-list,
#camera2-uploads.cc-uploads-list {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Customer info card */
.customer-info-card {
    border-left-color: var(--color-accent-primary) !important;
}

/* Photo strip card */
.photo-strip-card {
    background-color: var(--color-bg-card) !important;
    border-color: rgba(255,255,255,0.05) !important;
}
.photo-strip-card .photo-strip-header {
    border-bottom-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;
}

/* Gallery header status */
#statusText, #fileCount {
    font-weight: 600;
}