/* ============================================================================
   GOATLAS TOOLBOX - MAIN STYLESHEET
   Central entry point for all styles in the GoAtlas Toolbox application
   
   This modular CSS architecture provides:
   - Consistent design system with CSS custom properties
   - Light and dark theme support
   - Responsive design patterns
   - Accessible components
   - Utility-first approach with semantic components
   - Compatibility with Materialize CSS framework
   
   Architecture:
   1. Variables - Design tokens and custom properties
   2. Base - Reset, normalization, and base element styles
   3. Layout - Grid systems, containers, and responsive utilities
   4. Components - Reusable UI components
   5. Utilities - Utility classes for rapid development
   6. Themes - Light and dark theme implementations
   
   Version: 1.0.0
   Last Updated: 2025
============================================================================ */

/* ============================================================================
   IMPORT ORDER (CRITICAL - DO NOT CHANGE)
============================================================================ */

/* 1. Variables - Must be loaded first to define custom properties */
@import url('./variables.css?v=1.71');

/* 2. Base styles - Reset, normalization, and base element styling */
@import url('./base.css?v=1.71');

/* 3. Layout system - Grid, containers, and responsive utilities */
@import url('./layout.css?v=1.71');

/* 4. Components - Reusable UI components and patterns */
@import url('./components/buttons.css?v=1.71');
@import url('./components/forms.css?v=1.71');
@import url('./components/navigation.css?v=1.71');
@import url('./components/navbar.css?v=1.71');
@import url('./components/cards.css?v=1.71');
@import url('./components/feedback.css?v=1.71');
@import url('./components/layout-components.css?v=1.71');
@import url('./components/tables.css?v=1.71');
@import url('./components/lazy-loading.css?v=1.71');
@import url('./components/page-loader.css?v=1.71');

/* 5. Utilities - Utility classes for margins, padding, text, etc. */
@import url('./utilities.css?v=1.71');

/* 6. Themes - Light theme (default) and dark theme overrides */
@import url('./themes/light.css?v=1.71');
@import url('./themes/dark.css?v=1.71');

/* 7. Feature-specific component styles */
@import url('./features/settings-modal.css?v=1.71');
/* Navigation dark-mode fixes removed: dark mode should only change colors */

/* ============================================================================
   GLOBAL CONFIGURATION
============================================================================ */

/* Theme transition overlay styles inlined to avoid importing heavy, global
   transitions that could conflict with component animations. */
/* Smooth theme transition overlay (lightweight) */
.theme-transition-overlay { display: none !important; }
.theme-transition-overlay.active { display: none !important; }

/* CSS Houdini: animate a single theme progress variable and derive all tokens */
@property --theme-t {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Animate the theme progress when toggling body.dark-mode */
:root, body {
  --theme-t: 0;
  transition: --theme-t 0.6s ease-in-out;
}
body.dark-mode { --theme-t: 1; }

/* Resolve key semantic tokens via color-mix between light and dark endpoints.
   Declared after theme files so this wins the cascade. */
:root, body, body.dark-mode {
  /* Backgrounds */
  --bg-color: color-mix(in oklab,
    var(--color-grey-50) calc((1 - var(--theme-t)) * 100%),
    var(--color-dark-bg) calc(var(--theme-t) * 100%)
  );
  --bg-surface: color-mix(in oklab,
    var(--color-white) calc((1 - var(--theme-t)) * 100%),
    var(--color-dark-surface) calc(var(--theme-t) * 100%)
  );
  --bg-card: color-mix(in oklab,
    var(--color-white) calc((1 - var(--theme-t)) * 100%),
    var(--color-dark-surface) calc(var(--theme-t) * 100%)
  );
  --bg-input: color-mix(in oklab,
    var(--color-white) calc((1 - var(--theme-t)) * 100%),
    var(--color-dark-surface) calc(var(--theme-t) * 100%)
  );

  /* Text */
  --text-color: color-mix(in oklab,
    var(--color-grey-900) calc((1 - var(--theme-t)) * 100%),
    var(--color-dark-text) calc(var(--theme-t) * 100%)
  );
  --text-color-secondary: color-mix(in oklab,
    var(--color-grey-600) calc((1 - var(--theme-t)) * 100%),
    var(--color-dark-text-secondary) calc(var(--theme-t) * 100%)
  );

  /* Borders */
  --border-color: color-mix(in oklab,
    var(--color-grey-200) calc((1 - var(--theme-t)) * 100%),
    var(--color-dark-border) calc(var(--theme-t) * 100%)
  );

  /* Nav */
  --nav-bg: color-mix(in oklab,
    var(--color-nav-light) calc((1 - var(--theme-t)) * 100%),
    var(--color-nav-dark) calc(var(--theme-t) * 100%)
  );
}

/* FINAL: Fallback timing + gradient suppression during switch */
body.theme-transitioning,
body.theme-transitioning * { transition: all 0.6s ease-in-out !important; }
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after { background-image: none !important; }

/* Use View Transitions API when available to cross-fade the whole page */
html { view-transition-name: page; }
::view-transition-old(page),
::view-transition-new(page) {
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page),
  ::view-transition-new(page) { animation-duration: 0.01ms; }
}

/* (Debug) All 0.4s global transition rules removed so only the
   explicit theme-transitioning 2s block (at end of file) controls timing. */

/* ============================================================================
   SIDENAV LAYOUT FIXES (THEME-AGNOSTIC)
   Keep layout identical in light/dark; only colors change via themes.
============================================================================ */

/* Make sidenav a flex container with footer pinned to bottom */
#mobile-menu,
.sidenav {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

.sidenav .sidenav-item { flex-shrink: 0 !important; }
.sidenav .sidenav-footer {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Theme-driven colors for sidenav (color only; no layout differences) */
#mobile-menu,
.sidenav {
  background-color: var(--bg-surface) !important;
  color: var(--text-color) !important;
  border-right: 1px solid var(--border-color) !important;
}

.sidenav a,
.sidenav .sidenav-link { color: var(--text-color) !important; }

/* Ensure icons in the mobile menu follow theme colors */
#mobile-menu .material-icons,
.sidenav .material-icons,
.sidenav a .material-icons {
  color: var(--text-color) !important;
}

/* Optional: subtler hover without layout change */
.sidenav a:hover .material-icons {
  color: var(--text-color) !important;
  opacity: 0.85;
}

/* ============================================================================
   THEME SWITCHING UTILITIES
============================================================================ */

/* Theme switching button styles */
.theme-toggle {
  position: relative;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-colors);
  color: var(--text-color);
}

.theme-toggle:hover {
  background-color: var(--color-grey-100);
  border-color: var(--color-grey-300);
}

.theme-toggle:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Dark theme adjustments for theme toggle */
body.dark-mode .theme-toggle {
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}

body.dark-mode .theme-toggle:hover {
  background-color: var(--color-dark-surface-variant);
  border-color: var(--color-grey-600);
}

/* Theme toggle icon styles */
.theme-toggle .icon-light {
  display: block;
}

.theme-toggle .icon-dark {
  display: none;
}

body.dark-mode .theme-toggle .icon-light {
  display: none;
}

body.dark-mode .theme-toggle .icon-dark {
  display: block;
}

/* ============================================================================
   MATERIALIZE CSS INTEGRATION & OVERRIDES
============================================================================ */

/* Override Materialize CSS defaults to use our design system */
.btn, .btn-large, .btn-small {
  /* Use our button system while maintaining Materialize functionality */
  border-radius: var(--radius-base) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition-all) !important;
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-medium) !important;
}

.btn:hover, .btn-large:hover, .btn-small:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.btn:focus, .btn-large:focus, .btn-small:focus {
  box-shadow: var(--shadow-focus) !important;
}

/* Materialize card overrides */
.card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-base) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
}

.card .card-title {
  color: var(--text-color) !important;
  font-weight: var(--font-weight-bold) !important;
}

.card .card-content {
  color: var(--text-color) !important;
}

/* Materialize input field overrides */
.input-field input[type="text"],
.input-field input[type="email"],
.input-field input[type="password"],
.input-field input[type="number"],
.input-field textarea {
  background-color: var(--bg-input) !important;
  color: var(--text-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.input-field input[type="text"]:focus,
.input-field input[type="email"]:focus,
.input-field input[type="password"]:focus,
.input-field input[type="number"]:focus,
.input-field textarea:focus {
  border-bottom: 1px solid var(--color-primary) !important;
  box-shadow: 0 1px 0 0 var(--color-primary) !important;
}

.input-field label {
  color: var(--text-color-secondary) !important;
}

.input-field label.active {
  color: var(--color-primary) !important;
}

/* Materialize navigation overrides */
nav {
  background-color: var(--nav-bg) !important;
  box-shadow: var(--shadow-sm) !important;
}

nav .nav-wrapper {
  padding: 0 var(--space-4) !important;
}

/* Override Materialize CSS rule that hides sidenav-trigger on large screens */
nav a.sidenav-trigger {
  display: inline-block !important;
}

.sidenav-trigger {
  display: inline-block !important;
}

/* Materialize collection overrides */
.collection {
  border: 1px solid var(--border-color) !important;
  background-color: var(--bg-surface) !important;
}

.collection .collection-item {
  background-color: var(--bg-surface) !important;
  color: var(--text-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.collection .collection-item:hover {
  background-color: var(--color-grey-50) !important;
}

/* Materialize progress bar overrides */
.progress {
  background-color: var(--color-grey-200) !important;
}

.progress .determinate {
  background-color: var(--color-primary) !important;
}

.progress .indeterminate {
  background-color: var(--color-primary) !important;
}

/* ============================================================================
   BROWSER COMPATIBILITY & FALLBACKS
============================================================================ */

/* Internet Explorer 11 compatibility */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /* IE11 CSS custom properties fallback */
  :root {
    /* Provide fallback values for IE11 */
    background-color: #fafafa;
    color: #212121;
  }
  
  .card {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .btn {
    background-color: #2196f3;
    color: #ffffff;
  }
  
  /* Disable complex features for IE11 */
  .theme-toggle {
    display: none;
  }
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
  /* Fix for Safari input styling */
  .form-input,
  .form-textarea {
    -webkit-appearance: none;
  }
  
  /* Fix for Safari button styling */
  .btn {
    -webkit-appearance: none;
  }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
  /* Fix for Firefox scrollbar styling */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-grey-400) var(--color-grey-100);
  }
}

/* ============================================================================
   PRINT STYLES ENHANCEMENT
============================================================================ */

@media print {
  /* Hide non-essential elements when printing */
  .theme-toggle,
  .sidenav-trigger,
  .nav-right,
  .btn--secondary,
  .modal,
  .toast,
  .lightbox {
    display: none !important;
  }
  
  /* Ensure good contrast for printing */
  * {
    background: var(--color-white) !important;
    color: var(--color-black) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Preserve essential styling for printed content */
  .card {
    border: 1px solid var(--color-black) !important;
    margin-bottom: 1rem !important;
  }
  
  /* Ensure proper page breaks */
  .card,
  .section {
    page-break-inside: avoid;
  }
  
  /* Optimize typography for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    font-weight: bold;
  }
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
============================================================================ */

/* Enable hardware acceleration for smooth animations */
.card,
.btn,
.modal__content {
  will-change: transform;
  transform: translateZ(0);
}

/* Optimize font loading */
@font-display: swap;

/* Reduce repaints during theme switching */
.theme-switching * {
  will-change: auto;
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
============================================================================ */

/* Enhanced focus styles for keyboard navigation */
.btn:focus-visible,
.form-input:focus-visible,
.theme-toggle:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --text-color-secondary: #000000;
  }
  
  .card,
  .btn,
  .form-input {
    border: 2px solid #000000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .btn:hover,
  .card:hover {
    transform: none;
  }
}

/* Screen reader optimizations */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================================
   DEVELOPMENT HELPERS
============================================================================ */

/* Debug utilities for development (remove in production) */
.debug-grid {
  background-image: 
    linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.debug-outline * {
  outline: 1px solid red;
}

/* Development-only styles */
.dev-only {
  display: none;
}

/* ============================================================================
   THEME TRANSITION OVERRIDE (MUST BE LAST)
   Ensures theme switches fade over 2s, overriding earlier 0.4s rules.
============================================================================ */
body.theme-transitioning,
body.theme-transitioning * {
  transition: background 2s ease-in-out !important,
              background-color 2s ease-in-out !important,
              color 2s ease-in-out !important,
              border-color 2s ease-in-out !important,
              box-shadow 2s ease-in-out !important,
              fill 2s ease-in-out !important,
              stroke 2s ease-in-out !important;
}

body[data-env="development"] .dev-only {
  display: block;
}

/* ============================================================================
   COMPONENT LOADING STATES
============================================================================ */

/* Loading spinner component */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-grey-200);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton loading states */
.skeleton {
  background: linear-gradient(90deg, var(--color-grey-200) 25%, var(--color-grey-100) 50%, var(--color-grey-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

body.dark-mode .skeleton {
  background: linear-gradient(90deg, var(--color-grey-700) 25%, var(--color-grey-600) 50%, var(--color-grey-700) 75%);
  background-size: 200% 100%;
}

/* ============================================================================
   ERROR BOUNDARY STYLES
============================================================================ */

.error-boundary {
  padding: var(--space-8);
  text-align: center;
  background-color: var(--color-error);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  margin: var(--space-4);
}

.error-boundary h2 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.error-boundary .btn {
  background-color: var(--color-white);
  color: var(--color-error);
}

.error-boundary .btn:hover {
  background-color: var(--color-grey-100);
}

/* ============================================================================
   FOOTER
============================================================================ */

/* Main stylesheet footer - DO NOT REMOVE */
/* GoAtlas Toolbox Modular CSS Architecture v1.0.0 */
/* Built with modern CSS best practices and accessibility in mind */
/* Supports light/dark themes, responsive design, and cross-browser compatibility */