/* Digital Magnifying Glass PWA - Main Styles */

/* CSS Custom Properties for consistent theming */
:root {
  /* Colors */
  --primary-bg: #0a0a0a;
  --secondary-bg: #1a1a1a;
  --surface-bg: #2a2a2a;
  --accent-bg: #3a3a3a;

  --primary-text: #ffffff;
  --secondary-text: #cccccc;
  --muted-text: #999999;

  --primary-blue: #0066cc;
  --success-green: #00cc66;
  --warning-orange: #ff8800;
  --error-red: #cc0000;

  --border-color: #404040;
  --shadow-color: rgba(0, 0, 0, 0.5);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Typography */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  /* Layout */
  --control-height: 3rem;
  --border-radius: 0.5rem;
  --transition: all 0.2s ease-in-out;

  /* Z-index layers */
  --z-loading: 1000;
  --z-controls: 900;
  --z-settings: 800;
  --z-permission: 700;
}

/* High contrast mode overrides */
.high-contrast {
  --primary-bg: #000000;
  --secondary-bg: #000000;
  --surface-bg: #333333;
  --primary-text: #ffffff;
  --secondary-text: #ffffff;
  --border-color: #ffffff;
  --primary-blue: #66b3ff;
}

/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: 16px;
}

body {
   font-family: var(--font-family-primary);
   background: var(--primary-bg);
   color: var(--primary-text);
   height: 100vh;
   overflow: hidden;
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
 }

/* Application Container */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--primary-bg);
}

/* Viewfinder Container */
.viewfinder-container {
  position: relative;
  flex: 1;
  background: var(--primary-bg);
  overflow: hidden;
}

.camera-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
}

.processing-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Freeze Frame Display */
.freeze-frame {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--primary-bg);
   z-index: 2;
   display: none;
}

.freeze-frame[aria-hidden="false"] {
   display: block;
}

.frozen-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
}

.freeze-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Loading Indicator */
.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: var(--z-loading);
  background: rgba(0, 0, 0, 0.8);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius);
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Control Panel */
.control-panel {
  position: relative;
  z-index: var(--z-controls);
  background: var(--secondary-bg);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Top Controls */
.top-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Zoom Controls */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  justify-content: center;
}

.zoom-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.zoom-slider {
  width: 120px;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
}

.zoom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.zoom-level {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--secondary-text);
  min-width: 3rem;
  text-align: center;
}


/* Bottom Controls */
.bottom-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Status Bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--muted-text);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--primary-bg);
  border-top: 1px solid var(--border-color);
}

.privacy-notice {
  font-weight: 500;
}

/* Control Buttons */
.control-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-bg);
  color: var(--primary-text);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition);
  min-height: var(--control-height);
  position: relative;
  overflow: hidden;
}

.control-btn:hover {
  background: var(--accent-bg);
  border-color: var(--primary-blue);
}

.control-btn:active {
  transform: translateY(1px);
}

.control-btn.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
}

.btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.btn-text {
  font-weight: 500;
}

/* Specific button styles */
.flashlight-btn.active {
  background: var(--warning-orange);
  border-color: var(--warning-orange);
  color: white;
}

.freeze-btn.active {
  background: var(--success-green);
  border-color: var(--success-green);
  color: white;
}


/* Accessibility button */
.accessibility-btn.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
}

/* Settings Panel */
.settings-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: var(--z-settings);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.settings-panel.show {
  display: flex;
}

.settings-content {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

.settings-content h3 {
  margin-bottom: var(--spacing-lg);
  color: var(--primary-text);
}

.setting-group {
  margin-bottom: var(--spacing-lg);
}

.setting-group:last-child {
  margin-bottom: 0;
}

.setting-group h4 {
  margin-bottom: var(--spacing-md);
  color: var(--secondary-text);
  font-size: var(--font-size-sm);
}

.setting-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.setting-toggle:hover {
  background: var(--surface-bg);
}

.toggle-slider {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background: var(--border-color);
  border-radius: 0.75rem;
  transition: var(--transition);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
}

.setting-toggle input:checked + .toggle-slider {
  background: var(--primary-blue);
}

.setting-toggle input:checked + .toggle-slider::before {
  transform: translateX(1rem);
}

.privacy-info {
  color: var(--secondary-text);
  font-size: var(--font-size-sm);
}

.privacy-info ul {
  margin-top: var(--spacing-sm);
  padding-left: var(--spacing-md);
}

.privacy-info li {
  margin-bottom: var(--spacing-xs);
}

/* Permission Notice */
.permission-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: var(--z-permission);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.permission-content {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  max-width: 400px;
  text-align: center;
}

.permission-content h2 {
  margin-bottom: var(--spacing-md);
  color: var(--primary-text);
}

.permission-content p {
  margin-bottom: var(--spacing-lg);
  color: var(--secondary-text);
  line-height: 1.5;
}

.permission-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

/* Offline Notice */
.offline-notice {
  position: fixed;
  top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  background: var(--warning-orange);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  z-index: 1000;
  display: none;
}

.offline-notice.show {
  display: block;
}

/* Focus styles for accessibility */
.control-btn:focus,
.zoom-slider:focus {
   outline: 2px solid var(--primary-blue);
   outline-offset: 2px;
 }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .control-panel,
  .status-bar,
  .settings-panel,
  .permission-notice {
    display: none !important;
  }

  .viewfinder-container {
    position: static !important;
    height: auto !important;
  }
}