/**
 * 🎨 CockpitOS Base Minimal CSS
 * 
 * Nur die absolut notwendigen Base-Styles
 * Widget-spezifische Styles werden dynamisch geladen
 * 
 * Entwicklungsmantra: "Kleine Dateien, klare Verantwortlichkeiten, modulare Architektur!"
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (THEME VARIABLES)
   ============================================================================ */

:root {
  /* Base Colors - werden vom Theme überschrieben */
  --cockpit-primary: #007cba;
  --cockpit-secondary: #005a87;
  --cockpit-accent: #00a0d2;
  --cockpit-background: #ffffff;
  --cockpit-surface: #f8f9fa;
  --cockpit-text: #333333;
  --cockpit-text-light: #666666;
  --cockpit-border: #e0e0e0;
  --cockpit-success: #28a745;
  --cockpit-warning: #ffc107;
  --cockpit-error: #dc3545;
  
  /* Typography */
  --cockpit-font-heading: 'Inter', sans-serif;
  --cockpit-font-body: 'Inter', sans-serif;
  --cockpit-font-size-xs: 12px;
  --cockpit-font-size-sm: 14px;
  --cockpit-font-size-md: 16px;
  --cockpit-font-size-lg: 20px;
  --cockpit-font-size-xl: 24px;
  --cockpit-font-size-2xl: 32px;
  
  /* Spacing */
  --cockpit-spacing-xs: 4px;
  --cockpit-spacing-sm: 8px;
  --cockpit-spacing-md: 16px;
  --cockpit-spacing-lg: 24px;
  --cockpit-spacing-xl: 32px;
  --cockpit-spacing-2xl: 48px;
  
  /* Border Radius */
  --cockpit-radius-sm: 4px;
  --cockpit-radius-md: 8px;
  --cockpit-radius-lg: 12px;
  --cockpit-radius-xl: 16px;
  
  /* Shadows */
  --cockpit-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --cockpit-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --cockpit-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --cockpit-shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
  
  /* Transitions */
  --cockpit-transition-fast: 0.15s ease;
  --cockpit-transition-normal: 0.2s ease;
  --cockpit-transition-slow: 0.3s ease;
  
  /* Z-Index */
  --cockpit-z-dropdown: 1000;
  --cockpit-z-sticky: 1020;
  --cockpit-z-fixed: 1030;
  --cockpit-z-modal: 1040;
  --cockpit-z-popover: 1050;
  --cockpit-z-tooltip: 1060;
}

/* ============================================================================
   MINIMAL BASE STYLES
   ============================================================================ */

/* CockpitOS Widget Container */
.cockpit-os-widget {
  font-family: var(--cockpit-font-body);
  color: var(--cockpit-text);
  line-height: 1.6;
}

/* Theme Context Container */
.cockpit-os-themed {
  --theme-primary: var(--cockpit-primary);
  --theme-secondary: var(--cockpit-secondary);
  --theme-accent: var(--cockpit-accent);
  --theme-background: var(--cockpit-background);
  --theme-surface: var(--cockpit-surface);
  --theme-text: var(--cockpit-text);
  --theme-border: var(--cockpit-border);
}

/* ============================================================================
   UTILITY CLASSES (MINIMAL SET)
   ============================================================================ */

/* Text Colors */
.cockpit-text-primary { color: var(--cockpit-primary) !important; }
.cockpit-text-secondary { color: var(--cockpit-secondary) !important; }
.cockpit-text-accent { color: var(--cockpit-accent) !important; }
.cockpit-text-muted { color: var(--cockpit-text-light) !important; }

/* Background Colors */
.cockpit-bg-primary { background-color: var(--cockpit-primary) !important; }
.cockpit-bg-secondary { background-color: var(--cockpit-secondary) !important; }
.cockpit-bg-accent { background-color: var(--cockpit-accent) !important; }
.cockpit-bg-surface { background-color: var(--cockpit-surface) !important; }

/* Border Colors */
.cockpit-border-primary { border-color: var(--cockpit-primary) !important; }
.cockpit-border-secondary { border-color: var(--cockpit-secondary) !important; }
.cockpit-border-accent { border-color: var(--cockpit-accent) !important; }

/* Spacing Utilities */
.cockpit-p-0 { padding: 0 !important; }
.cockpit-p-sm { padding: var(--cockpit-spacing-sm) !important; }
.cockpit-p-md { padding: var(--cockpit-spacing-md) !important; }
.cockpit-p-lg { padding: var(--cockpit-spacing-lg) !important; }

.cockpit-m-0 { margin: 0 !important; }
.cockpit-m-sm { margin: var(--cockpit-spacing-sm) !important; }
.cockpit-m-md { margin: var(--cockpit-spacing-md) !important; }
.cockpit-m-lg { margin: var(--cockpit-spacing-lg) !important; }

/* Border Radius */
.cockpit-rounded-sm { border-radius: var(--cockpit-radius-sm) !important; }
.cockpit-rounded-md { border-radius: var(--cockpit-radius-md) !important; }
.cockpit-rounded-lg { border-radius: var(--cockpit-radius-lg) !important; }

/* Shadows */
.cockpit-shadow-sm { box-shadow: var(--cockpit-shadow-sm) !important; }
.cockpit-shadow-md { box-shadow: var(--cockpit-shadow-md) !important; }
.cockpit-shadow-lg { box-shadow: var(--cockpit-shadow-lg) !important; }

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

/* Hide/Show on different screen sizes */
@media (max-width: 767px) {
  .cockpit-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .cockpit-hide-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cockpit-hide-tablet { display: none !important; }
}

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

.cockpit-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.cockpit-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--cockpit-border);
  border-top-color: var(--cockpit-primary);
  border-radius: 50%;
  animation: cockpit-spin 1s linear infinite;
}

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

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

.cockpit-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;
}

/* Focus styles */
.cockpit-os-widget *:focus {
  outline: 2px solid var(--cockpit-primary);
  outline-offset: 2px;
}

/* ============================================================================
   SHOP GRID STYLES
   ============================================================================ */

.cockpit-os-shop-grid {
  display: grid;
  gap: var(--cockpit-spacing-lg);
  margin: var(--cockpit-spacing-lg) 0;
}

.cockpit-os-shop-grid.cockpit-os-columns-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cockpit-os-shop-grid.cockpit-os-columns-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cockpit-os-shop-grid.cockpit-os-columns-4 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.cockpit-os-shop-item {
  transition: var(--cockpit-transition-normal);
  overflow: hidden;
}

.cockpit-os-shop-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--cockpit-shadow-lg);
}

.cockpit-shop-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--cockpit-spacing-md);
}

.cockpit-shop-link:hover {
  text-decoration: none;
  color: inherit;
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .cockpit-os-shop-grid {
    grid-template-columns: 1fr;
    gap: var(--cockpit-spacing-md);
  }
}

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

@media print {
  .cockpit-os-widget {
    color: #000 !important;
    background: #fff !important;
  }

  .cockpit-hide-print {
    display: none !important;
  }
}