/**
 * 🎨 Modern UI Enhancements - Rechnung.best
 * 
 * Material Design 3 + iOS HIG konformes Design-System
 * WCAG 2.1 AAA Accessibility Compliance
 * Performance-optimierte Animationen
 * 
 * VERSION: 2.0.0
 * STANDARDS: Material Design 3, iOS HIG, WCAG 2.1 AAA
 */

/* ===== MATERIAL DESIGN 3 COLOR SYSTEM ===== */
:root {
  /* MD3 System Colors */
  --md-sys-color-primary: #0071e3;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #c8e6ff;
  --md-sys-color-on-primary-container: #001d35;
  
  --md-sys-color-secondary: #52606e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d5e4f5;
  --md-sys-color-on-secondary-container: #0f1d29;
  
  --md-sys-color-tertiary: #68596d;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #efddf4;
  --md-sys-color-on-tertiary-container: #231928;
  
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-surface-variant: #dfe2eb;
  --md-sys-color-on-surface-variant: #42474e;
  
  --md-sys-color-background: #fefbff;
  --md-sys-color-on-background: #191c20;
  
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  
  --md-sys-color-success: #00c853;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #a7f0ba;
  --md-sys-color-on-success-container: #002106;
  
  --md-sys-color-warning: #ff9800;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #ffecb3;
  --md-sys-color-on-warning-container: #332800;
  
  /* MD3 Elevation Levels */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  
  /* MD3 Shape System */
  --md-sys-shape-none: 0px;
  --md-sys-shape-extra-small: 4px;
  --md-sys-shape-small: 8px;
  --md-sys-shape-medium: 12px;
  --md-sys-shape-large: 16px;
  --md-sys-shape-extra-large: 28px;
  --md-sys-shape-full: 9999px;
  
  /* MD3 Typography Scale */
  --md-sys-typescale-display-large: 400 57px/64px var(--font-family);
  --md-sys-typescale-display-medium: 400 45px/52px var(--font-family);
  --md-sys-typescale-display-small: 400 36px/44px var(--font-family);
  --md-sys-typescale-headline-large: 400 32px/40px var(--font-family);
  --md-sys-typescale-headline-medium: 400 28px/36px var(--font-family);
  --md-sys-typescale-headline-small: 400 24px/32px var(--font-family);
  --md-sys-typescale-title-large: 500 22px/28px var(--font-family);
  --md-sys-typescale-title-medium: 500 16px/24px var(--font-family);
  --md-sys-typescale-title-small: 500 14px/20px var(--font-family);
  --md-sys-typescale-body-large: 400 16px/24px var(--font-family);
  --md-sys-typescale-body-medium: 400 14px/20px var(--font-family);
  --md-sys-typescale-body-small: 400 12px/16px var(--font-family);
  --md-sys-typescale-label-large: 500 14px/20px var(--font-family);
  --md-sys-typescale-label-medium: 500 12px/16px var(--font-family);
  --md-sys-typescale-label-small: 500 11px/16px var(--font-family);
  
  /* Motion Tokens */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #8cc8ff;
    --md-sys-color-on-primary: #003355;
    --md-sys-color-primary-container: #004d77;
    --md-sys-color-on-primary-container: #c8e6ff;
    
    --md-sys-color-secondary: #b9c8d8;
    --md-sys-color-on-secondary: #243240;
    --md-sys-color-secondary-container: #3b4856;
    --md-sys-color-on-secondary-container: #d5e4f5;
    
    --md-sys-color-surface: #101418;
    --md-sys-color-on-surface: #e2e2e9;
    --md-sys-color-surface-variant: #42474e;
    --md-sys-color-on-surface-variant: #c2c7ce;
    
    --md-sys-color-background: #101418;
    --md-sys-color-on-background: #e2e2e9;
    
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
  }
}

/* ===== ENHANCED FOCUS SYSTEM (WCAG 2.1 AAA) ===== */
.enhanced-focus {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-small);
  box-shadow: 0 0 0 1px var(--md-sys-color-on-surface);
}

*:focus-visible {
  @extend .enhanced-focus;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline: 4px solid;
    outline-offset: 2px;
  }
}

/* ===== ENHANCED BUTTON SYSTEM ===== */
.btn-md3 {
  /* Material Design 3 Button Base */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  min-height: 44px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--md-sys-shape-full);
  
  font: var(--md-sys-typescale-label-large);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  
  /* State Layer */
  position: relative;
  overflow: hidden;
}

.btn-md3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-linear);
}

.btn-md3:hover::before {
  opacity: 0.08;
}

.btn-md3:focus-visible::before {
  opacity: 0.12;
}

.btn-md3:active::before {
  opacity: 0.16;
}

/* Button Variants */
.btn-md3-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-0);
}

.btn-md3-filled:hover {
  box-shadow: var(--md-sys-elevation-1);
}

.btn-md3-filled:active {
  box-shadow: var(--md-sys-elevation-0);
}

.btn-md3-outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-primary);
}

.btn-md3-text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 10px 12px;
}

/* ===== ENHANCED CARD SYSTEM ===== */
.card-md3 {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-medium);
  box-shadow: var(--md-sys-elevation-1);
  
  overflow: hidden;
  transition: box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.card-md3:hover {
  box-shadow: var(--md-sys-elevation-2);
}

.card-md3-elevated {
  box-shadow: var(--md-sys-elevation-1);
}

.card-md3-filled {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  box-shadow: var(--md-sys-elevation-0);
}

.card-md3-outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-0);
}

/* ===== ENHANCED INPUT SYSTEM ===== */
.input-md3 {
  position: relative;
  margin-bottom: 16px;
}

.input-md3-field {
  width: 100%;
  min-height: 56px;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-extra-small);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.input-md3-field:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: 15px; /* Compensate for thicker border */
}

.input-md3-label {
  position: absolute;
  top: 16px;
  left: 16px;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-large);
  pointer-events: none;
  
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.input-md3-field:focus + .input-md3-label,
.input-md3-field:not(:placeholder-shown) + .input-md3-label {
  top: -8px;
  left: 12px;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface);
  padding: 0 4px;
}

/* ===== ENHANCED NAVIGATION ===== */
.nav-md3 {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-2);
}

.nav-md3-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  border-radius: var(--md-sys-shape-full);
  
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.nav-md3-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-linear);
}

.nav-md3-item:hover::before {
  opacity: 0.08;
}

.nav-md3-item.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.nav-md3-item.active::before {
  opacity: 0;
}

/* ===== ENHANCED LOADING STATES ===== */
.skeleton-md3 {
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-variant) 25%,
    var(--md-sys-color-surface) 50%,
    var(--md-sys-color-surface-variant) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite var(--md-sys-motion-easing-emphasized);
}

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

.skeleton-text {
  height: 1em;
  border-radius: var(--md-sys-shape-extra-small);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-full);
}

.skeleton-button {
  height: 44px;
  border-radius: var(--md-sys-shape-full);
}

.skeleton-card {
  height: 120px;
  border-radius: var(--md-sys-shape-medium);
}

/* ===== ENHANCED ERROR STATES ===== */
.error-state-md3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
  color: var(--md-sys-color-on-surface);
}

.error-state-md3-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: var(--md-sys-color-error);
}

.error-state-md3-title {
  font: var(--md-sys-typescale-headline-small);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
}

.error-state-md3-message {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 24px;
  max-width: 400px;
}

.error-state-md3-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Error Types */
.error-state-network .error-state-md3-icon {
  color: var(--md-sys-color-warning);
}

.error-state-permission .error-state-md3-icon {
  color: var(--md-sys-color-error);
}

.error-state-validation .error-state-md3-icon {
  color: var(--md-sys-color-warning);
}

/* ===== ENHANCED TOAST SYSTEM ===== */
.toast-md3 {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 560px;
  padding: 16px;
  
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-medium);
  box-shadow: var(--md-sys-elevation-3);
  
  animation: toast-slide-in var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate);
}

@keyframes toast-slide-in {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.toast-md3-success {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.toast-md3-error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.toast-md3-warning {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

/* ===== ENHANCED FAB SYSTEM ===== */
.fab-md3 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--md-sys-shape-large);
  
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-3);
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.fab-md3:hover {
  box-shadow: var(--md-sys-elevation-4);
}

.fab-md3:active {
  box-shadow: var(--md-sys-elevation-2);
}

.fab-md3-large {
  width: 96px;
  height: 96px;
  border-radius: var(--md-sys-shape-extra-large);
}

.fab-md3-small {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-medium);
}

/* ===== ENHANCED ACCESSIBILITY ===== */
/* High Contrast Mode */
@media (prefers-contrast: high) {
  .btn-md3,
  .card-md3,
  .input-md3-field {
    border: 2px solid;
  }
  
  .nav-md3-item.active {
    border: 2px solid var(--md-sys-color-on-secondary-container);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .skeleton-md3 {
    animation: none;
    background: var(--md-sys-color-surface-variant);
  }
}

/* Screen Reader Only Content */
.sr-only-md3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Skip Links */
.skip-link-md3 {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 8px;
  text-decoration: none;
  z-index: 1001;
  border-radius: var(--md-sys-shape-small);
}

.skip-link-md3:focus {
  top: 6px;
}

/* ===== RESPONSIVE ENHANCEMENTS ===== */
@media (max-width: 768px) {
  .toast-md3 {
    left: 16px;
    right: 16px;
    transform: none;
    min-width: auto;
    max-width: none;
  }
  
  .fab-md3 {
    bottom: 80px; /* Above bottom navigation */
  }
  
  .error-state-md3-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .error-state-md3-actions .btn-md3 {
    justify-content: center;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* GPU Acceleration */
.btn-md3,
.card-md3:hover,
.fab-md3,
.toast-md3,
.nav-md3-item {
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

/* Contain Layout Shifts */
.card-md3,
.toast-md3,
.error-state-md3 {
  contain: layout style paint;
}

/* Optimize Repaints */
.skeleton-md3,
.btn-md3::before,
.nav-md3-item::before {
  contain: strict;
}