/**
 * ═══════════════════════════════════════════════════════════════════════════════════
 * ╔═══════════════════════════════════════════════════════════════════════════════╗
 * ║                  PF_dashboard - Advanced Dashboard Styles                     ║
 * ║                    CSS for PFWS Dashboard / POI Standard                      ║
 * ║                             PFWS Version 1.4.1.3.22                           ║
 * ╚═══════════════════════════════════════════════════════════════════════════════╝
 * ═══════════════════════════════════════════════════════════════════════════════════
 * 
 * @file        core/function/PF_dashboard/css/PF_dashboard.css
 * @author      Franz PFuisi <Kontakt via pfuisi.org/kontakt
 * @copyright   2006-2025 PFuisi Web Solutions
 * @license     Proprietary - All Rights Reserved
 * @version     1.4.1.3.21
 * @since       2024-09-15
 * @updated     2025-09-23
 * 
 * @description Advanced Dashboard Styling with:
 *              - Modern CSS Grid & Flexbox Layouts
 *              - Responsive Design (Mobile-First)
 *              - Dark Theme Support & Color Variables
 *              - High-Performance Animations
 *              - Accessibility Optimizations
 *              - PFWS 1.4.1.3.21 Design Standards
 * 
 * @changelog   
 *   2025-09-29: Saubere Router-Architektur - Module-Grid hinzugefügt
 *   2025-09-23: PFWS 1.4.1.3.21 Modernization - Performance & Accessibility
 *   2025-09-19: Overlay Integration & Close-Button Fixes
 *   2025-09-15: Initial Dashboard Styles Implementation
 */

/* ═══════════════════════════════════════════════════════════════
   🔥 DASHBOARD MODULE GRID - Clean Architecture
   ═══════════════════════════════════════════════════════════════ */

.pf-dashboard-modules {
    margin: 2rem 0;
}

.pf-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   �📊 DASHBOARD INFO SECTION - JavaScript Toggle
   ═══════════════════════════════════════════════════════════════ */

.dashboard-info-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 0;
}

.stat-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.9);
}

.stat-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: #2c3e50;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #34495e;
    margin: 0;
}

.stat-success {
    color: #27ae60 !important;
}

.stat-error {
    color: #e74c3c !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 0.75rem;
    }
    
    .stat-card h3 {
        font-size: 0.8rem;
    }
    
    .stat-value {
        font-size: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🦶 DASHBOARD FOOTER - Fixed Position
   ═══════════════════════════════════════════════════════════════ */
/* GELÖSCHT: Doppelte Deklaration - siehe Zeile ~2226 für vollständige Footer-Styles */

.pf-dashboard-main {
    padding: 2rem 1.5rem 80px 1.5rem; /* Top, Right, Bottom, Left - Abstand zum Rand */
    max-width: 1400px;
    margin: 0 auto; /* Zentriert den Inhalt */
}

.pf-module-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.pf-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: var(--color-primary);
}

.pf-module-card h3 {
    margin: 0 0 0.5rem 0;
    color: var(--color-primary);
    font-size: 1.1rem;
}

.pf-module-card p {
    margin: 0 0 1rem 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.pf-module-btn {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.pf-module-btn:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
    color: white;
}

.pf-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.pf-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
}

.pf-stat-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.pf-stat-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-primary);
}

.pf-stat-success {
    color: #28a745;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 DRAG & DROP SYSTEM - Interaktive Module
   ═══════════════════════════════════════════════════════════════ */

.pf-module-card[draggable="true"] {
    cursor: grab;
    user-select: none;
}

.pf-module-card[draggable="true"]:active {
    cursor: grabbing;
}

.pf-module-card.pf-dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: 1000;
}

.pf-drop-zone-active {
    background: rgba(0, 123, 255, 0.1);
    border: 2px dashed var(--color-primary);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════
   🔒 LIZENZ-SYSTEM - Module mit Berechtigungen
   ═══════════════════════════════════════════════════════════════ */

.pf-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pf-module-available {
    color: #28a745;
    font-size: 1.2rem;
}

.pf-module-locked {
    color: #dc3545;
    font-size: 1.2rem;
}

.pf-module-card.pf-module-locked {
    opacity: 0.6;
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

.pf-module-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pf-btn-minimize {
    background: var(--color-secondary);
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pf-btn-minimize:hover {
    background: var(--color-secondary-dark);
}

.pf-btn-locked {
    background: #6c757d;
    color: white;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   📱 DASHBOARD-ICONBAR - Statische Iconbar im Dashboard
   ═══════════════════════════════════════════════════════════════ */

.pf-dashboard-iconbar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    min-height: 60px;
    transition: all 0.3s ease;
}

.pf-dashboard-iconbar-container {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.pf-dashboard-iconbar-empty {
    color: var(--color-text-secondary);
    font-style: italic;
    text-align: center;
    width: 100%;
}

.pf-dashboard-iconbar-icon {
    background: var(--color-primary);
    color: white;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
    text-align: center;
}

.pf-dashboard-iconbar-icon:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.pf-dashboard-icon-symbol {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.pf-dashboard-icon-label {
    display: block;
    font-size: 0.7rem;
    text-transform: capitalize;
}

/* ═══════════════════════════════════════════════════════════════
   📢 NOTIFICATIONS - Dashboard-Meldungen
   ═══════════════════════════════════════════════════════════════
   ⚠️ ALTE DEFINITION ENTFERNT - Siehe neue .pf-notification bei Zeile ~2840
   Neues System mit besseren Animationen und Styling
   ═══════════════════════════════════════════════════════════════ */

.pf-notification-success {
    background: #28a745;
}

.pf-notification-error {
    background: #dc3545;
}

.pf-notification-info {
    background: #17a2b8;
}

.pf-notification-warning {
    background: #ffc107;
    color: #212529;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 🌐 PFWS 1.4.1.3.21 Design System - CSS Custom Properties
 * ═══════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Primary Color Palette */
  --pf-primary: #5c6bc0;
  --pf-primary-dark: #3949ab;
  --pf-primary-light: #9fa8da;
  --pf-accent: #7db6c7;
  --pf-accent-light: #a8cdd6;
  
  /* Neutrale Farben */
  --pf-bg: #f5f7fa;
  --pf-surface: #ffffff;
  --pf-surface-alt: #f8f9fc;
  --pf-border: #e0e6ed;
  --pf-text: #2c3e50;
  --pf-text-light: #7f8c8d;
  --pf-text-lighter: #bdc3c7;
  
  /* Statusfarben */
  --pf-success: #4caf50;
  --pf-warning: #ff9800;
  --pf-error: #f44336;
  --pf-info: #2196f3;
  
  /* Abstände und Schatten */
  --pf-radius: 12px;
  --pf-radius-sm: 8px;
  --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --pf-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --pf-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* Animationen */
  --pf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --pf-transition-fast: all 0.2s ease;
  
  /* Overlay-Variablen */
  --pf-overlay-bg: rgba(0, 0, 0, 0.7);
  --pf-overlay-z-index: 1000;
  --pf-overlay-inner-z-index: 1001;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 🎯 DASHBOARD-SPEZIFISCHE TOPNAV - Unabhängig von globaler Topnav
 * ═══════════════════════════════════════════════════════════════════════════════════ */

/* Dashboard Topnav Container */
.pf-dashboard-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(52, 73, 94, 0.95) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* Dashboard Navigation Left Section */
.pf-dashboard-nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pf-dashboard-burger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--pf-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: var(--pf-transition-fast);
}

.pf-dashboard-burger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pf-dashboard-burger-line {
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 1px;
  transition: var(--pf-transition-fast);
}

/* Burger Animation States */
.pf-dashboard-burger.active .pf-dashboard-burger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.pf-dashboard-burger.active .pf-dashboard-burger-line:nth-child(2) {
  opacity: 0;
}

.pf-dashboard-burger.active .pf-dashboard-burger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Burger Menu Container */
.pf-dashboard-burger-container {
  position: relative;
}

/* Burger Menu Dropdown */
.pf-dashboard-burger-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 350px;
  max-height: calc(100vh - 100px); /* Maximale Höhe relativ zum Viewport */
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1000;
  overflow: hidden; /* Nur für äußere Bounding-Box, kein Scroll */
  display: flex;
  flex-direction: column;
}

.pf-dashboard-burger-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Burger Menu Overlay */
.pf-dashboard-burger-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.pf-dashboard-burger-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Menu Header */
.pf-dashboard-burger-menu-header {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: white;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pf-dashboard-burger-menu-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Menu Content */
.pf-dashboard-burger-menu-content {
  padding: 15px 0;
  /* Kein Scrollbalken hier - nur in .pf-dashboard-burger-modules */
  overflow: visible;
  flex: 1; /* Nimmt verfügbaren Platz */
  min-height: 0; /* Wichtig für Flex-Scroll */
}

/* Menu Sections */
.pf-dashboard-burger-section {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pf-dashboard-burger-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.pf-dashboard-burger-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-weight: 600;
  color: #34495e;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: linear-gradient(90deg, rgba(52, 152, 219, 0.05) 0%, transparent 100%);
  border-left: 3px solid #3498db;
  margin-bottom: 8px;
  margin-top: 5px;
}

.pf-burger-section-icon {
  font-size: 1.1rem;
}

/* Menu Items */
.pf-dashboard-burger-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  text-decoration: none;
  color: #2c3e50;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.pf-dashboard-burger-item:hover {
  background: #f8f9fa;
  border-left-color: #3498db;
  color: #2c3e50;
}

.pf-dashboard-burger-item.pf-dashboard-burger-home:hover {
  border-left-color: #e74c3c;
}

.pf-dashboard-burger-item.pf-dashboard-burger-chatbot:hover {
  border-left-color: #2ecc71;
}

.pf-burger-icon {
  font-size: 1.3rem;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.pf-burger-text {
  flex: 1;
}

.pf-burger-title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}

.pf-burger-desc {
  display: block;
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-top: 2px;
}

/* Module Loading & Empty States */
.pf-dashboard-burger-loading {
  padding: 20px;
  text-align: center;
  color: #7f8c8d;
  font-style: italic;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.03) 0%, rgba(155, 89, 182, 0.03) 100%);
  border-radius: 8px;
  margin: 10px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

.pf-dashboard-burger-loading span {
  font-size: 0.9rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Loading Spinner Animation */
.pf-dashboard-burger-loading::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(52, 152, 219, 0.2);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Error State - Kein Spinner bei Fehler */
.pf-dashboard-burger-loading span[style*="color: #e74c3c"]::before,
.pf-dashboard-burger-loading span[style*="color:#e74c3c"]::before {
  content: none;
}

/* Error Details Styling */
.pf-dashboard-burger-loading div {
  background: rgba(231, 76, 60, 0.1);
  padding: 8px;
  border-radius: 4px;
  border-left: 3px solid #e74c3c;
  font-family: 'Courier New', monospace;
  text-align: left;
  line-height: 1.4;
  max-height: 200px;
  overflow-y: auto;
}

/* Burger Menu Modules - Scrollable Container */
.pf-dashboard-burger-modules {
  max-height: 400px; /* Erhöht für mehr sichtbare Module */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px; /* Platz für Scrollbar */
  margin-right: -5px; /* Kompensiert Padding */
}

/* Custom Scrollbar - Webkit (Chrome, Safari, Edge) */
.pf-dashboard-burger-modules::-webkit-scrollbar {
  width: 8px; /* Breitere Scrollbar */
}

.pf-dashboard-burger-modules::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin: 5px 0; /* Abstand oben/unten */
}

.pf-dashboard-burger-modules::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
}

.pf-dashboard-burger-modules::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #2980b9 0%, #1f5f8b 100%);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.pf-dashboard-burger-modules::-webkit-scrollbar-thumb:active {
  background: #1f5f8b;
}

/* Firefox Scrollbar */
.pf-dashboard-burger-modules {
  scrollbar-width: thin;
  scrollbar-color: #3498db rgba(0, 0, 0, 0.05);
}

/* Scroll Fade Indicators */
.pf-dashboard-burger-modules::before,
.pf-dashboard-burger-modules::after {
  content: '';
  position: sticky;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.pf-dashboard-burger-modules::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
  margin-bottom: -20px;
}

.pf-dashboard-burger-modules::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
  margin-top: -20px;
}

/* Module Items */
.pf-dashboard-burger-module,
.pf-dashboard-burger-module-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  text-decoration: none;
  color: #2c3e50;
  transition: background 0.2s ease, border-left-color 0.2s ease, transform 0.2s ease;
  border-left: 3px solid transparent;
  font-size: 0.9rem;
  cursor: pointer;
  position: relative;
  background: transparent;
  border-radius: 0 8px 8px 0;
  margin: 2px 0;
  min-height: 64px; /* Mindesthöhe für 2 Zeilen Content */
}

/* Content über Ripple-Effekt legen */
.pf-dashboard-burger-module-icon,
.pf-dashboard-burger-module-info {
  position: relative;
  z-index: 2; /* Über dem Ripple-Effekt */
  pointer-events: none; /* Klicks durchlassen zum Link */
}

/* Ripple-Effekt unter dem Content */
.pf-dashboard-burger-module .pf-ripple,
.pf-dashboard-burger-module-link .pf-ripple {
  position: absolute;
  z-index: 1; /* Unter dem Content */
  pointer-events: none; /* Klicks durchlassen */
}

.pf-dashboard-burger-module:hover,
.pf-dashboard-burger-module-link:hover {
  background: linear-gradient(90deg, rgba(52, 152, 219, 0.08) 0%, rgba(52, 152, 219, 0.15) 100%);
  border-left-color: #3498db;
  transform: translateX(3px);
  box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0.1);
}

.pf-dashboard-burger-module:active,
.pf-dashboard-burger-module-link:active {
  transform: translateX(1px);
  background: linear-gradient(90deg, rgba(52, 152, 219, 0.15) 0%, rgba(52, 152, 219, 0.2) 100%);
}

/* Active State - nur Farbe ändern, NICHT die Höhe! */
.pf-dashboard-burger-module.active,
.pf-dashboard-burger-module-link.active {
  background: linear-gradient(90deg, rgba(46, 204, 113, 0.15) 0%, rgba(46, 204, 113, 0.25) 100%);
  border-left-color: #2ecc71;
  color: #27ae60;
}

.pf-dashboard-burger-module.active .pf-dashboard-burger-module-name,
.pf-dashboard-burger-module-link.active .pf-dashboard-burger-module-name,
.pf-dashboard-burger-module.active .pf-burger-title,
.pf-dashboard-burger-module-link.active .pf-burger-title {
  color: #27ae60;
}

/* Module Icons */
.pf-dashboard-burger-module-icon,
.pf-dashboard-burger-module .pf-burger-icon {
  font-size: 1.3rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(46, 204, 113, 0.1) 100%);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.pf-dashboard-burger-module:hover .pf-dashboard-burger-module-icon,
.pf-dashboard-burger-module-link:hover .pf-dashboard-burger-module-icon,
.pf-dashboard-burger-module:hover .pf-burger-icon,
.pf-dashboard-burger-module-link:hover .pf-burger-icon {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(46, 204, 113, 0.2) 100%);
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

/* Module Info Container */
.pf-dashboard-burger-module-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* Für Text-Truncate */
}

/* Module Name/Title */
.pf-dashboard-burger-module-name,
.pf-dashboard-burger-module .pf-burger-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Module Meta Info */
.pf-dashboard-burger-module-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #7f8c8d;
}

.pf-dashboard-burger-module-type {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 4px;
  color: #3498db;
}

.pf-dashboard-burger-module-version {
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  color: #95a5a6;
}

.pf-dashboard-burger-module-license {
  font-size: 0.6rem;
  margin-left: auto;
}

.pf-dashboard-burger-module .pf-burger-desc {
  font-size: 0.75rem;
  color: #95a5a6;
  line-height: 1.2;
}

/* License Badge */
.pf-burger-license-badge {
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
  margin-left: auto;
  min-width: 24px;
  text-align: center;
}

/* More Modules Info */
.pf-dashboard-burger-more {
  padding: 10px 20px;
  text-align: center;
  font-size: 0.8rem;
  color: #7f8c8d;
  font-style: italic;
  border-top: 1px solid #ecf0f1;
  margin-top: 5px;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
  .pf-dashboard-burger-menu {
    width: 320px;
    left: -10px;
  }
  
  .pf-dashboard-burger-modules {
    max-height: 350px; /* Etwas kleiner auf Tablets */
  }
  
  .pf-dashboard-burger-module-name,
  .pf-dashboard-burger-module .pf-burger-title {
    font-size: 0.9rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
  .pf-dashboard-burger-menu {
    width: calc(100vw - 40px); /* Fast volle Breite auf Mobile */
    max-width: 320px;
    left: -10px;
  }
  
  .pf-dashboard-burger-modules {
    max-height: 300px; /* Noch kleiner auf Mobile */
  }
  
  .pf-dashboard-burger-module,
  .pf-dashboard-burger-module-link {
    padding: 8px 15px;
    gap: 10px;
  }
  
  .pf-dashboard-burger-module-icon,
  .pf-dashboard-burger-module .pf-burger-icon {
    width: 26px;
    height: 26px;
    font-size: 1.1rem;
  }
  
  .pf-dashboard-burger-module-name,
  .pf-dashboard-burger-module .pf-burger-title {
    font-size: 0.85rem;
  }
  
  .pf-dashboard-burger-module-meta {
    font-size: 0.7rem;
  }
}

.pf-dashboard-brand a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Dashboard Navigation Center Section */
.pf-dashboard-nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.pf-dashboard-quick-links {
  display: flex;
  gap: 1.5rem;
}

.pf-dashboard-quick-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: var(--pf-radius-sm);
  transition: var(--pf-transition-fast);
  font-weight: 500;
}

.pf-dashboard-quick-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* Dashboard Navigation Right Section */
.pf-dashboard-nav-right {
  display: flex;
  align-items: center;
}

.pf-dashboard-user-menu {
  position: relative;
}

.pf-dashboard-user-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: var(--pf-radius-sm);
  transition: var(--pf-transition-fast);
}

.pf-dashboard-user-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pf-dashboard-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.pf-dashboard-username {
  font-weight: 500;
}

/* Dashboard Dropdown Menu */
.pf-dashboard-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow-lg);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--pf-transition);
  z-index: 200;
  margin-top: 0.5rem;
}

.pf-dashboard-user-menu:hover .pf-dashboard-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pf-dashboard-user-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--pf-border);
}

.pf-dashboard-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--pf-primary-light);
}

.pf-dashboard-user-info strong {
  display: block;
  color: var(--pf-text);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.pf-dashboard-user-info span {
  color: var(--pf-text-light);
  font-size: 0.875rem;
}

.pf-dashboard-menu-links {
  padding: 1rem 0;
}

.pf-dashboard-menu-links a {
  display: block;
  color: var(--pf-text);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  transition: var(--pf-transition-fast);
}

.pf-dashboard-menu-links a:hover {
  background: var(--pf-surface-alt);
  color: var(--pf-primary);
}

.pf-dashboard-divider {
  height: 1px;
  background: var(--pf-border);
  margin: 0.5rem 0;
}

.pf-dashboard-menu-login-button,
.pf-dashboard-menu-logout-button {
  display: block;
  width: calc(100% - 3rem);
  margin: 0 1.5rem;
  padding: 0.75rem;
  text-align: center;
  text-decoration: none;
  border-radius: var(--pf-radius-sm);
  font-weight: 500;
  transition: var(--pf-transition-fast);
}

.pf-dashboard-menu-login-button {
  background: var(--pf-primary);
  color: white;
}

.pf-dashboard-menu-login-button:hover {
  background: var(--pf-primary-dark);
}

.pf-dashboard-menu-logout-button {
  background: var(--pf-error);
  color: white;
}

.pf-dashboard-menu-logout-button:hover {
  background: #d32f2f;
}

.pf-dashboard-menu-settings {
  padding: 1rem 1.5rem;
}

.pf-dashboard-menu-settings label {
  display: block;
  color: var(--pf-text-light);
  margin-bottom: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pf-dashboard-theme-switcher {
  padding: 1rem 1.5rem;
}

.pf-dashboard-theme-switcher label {
  display: block;
  color: var(--pf-text-light);
  margin-bottom: 0.5rem;
}

.pf-dashboard-theme-switcher select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .pf-dashboard-topnav {
    padding: 0.5rem 1rem;
  }
  
  .pf-dashboard-nav-center {
    display: none;
  }
  
  .pf-dashboard-username {
    display: none;
  }
  
  .pf-dashboard-dropdown {
    left: 0;
    right: 0;
    min-width: auto;
  }
}

/* ─────────────────────────────────────────────────────────────
 * 🧱 Grid-Layout für das Workspace-Dashboard
 * ───────────────────────────────────────────────────────────── */
.pf-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 0;
  margin-bottom: 80px;
}
/* ─────────────────────────────────────────────────────────────
 * 🖼️ Dashboard-Container & Hauptlayout
 * ───────────────────────────────────────────────────────────── */
.pf-dashboard {
  padding: 2.5rem;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  min-height: 100vh;
  color: var(--pf-text);
}
.pf-dashboard h2 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--pf-primary);
  position: relative;
  padding-bottom: 0.75rem;
}
.pf-dashboard h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--pf-primary), var(--pf-accent));
  border-radius: 2px;
}
.pf-dashboard > p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
  color: var(--pf-text-light);
}
/* ─────────────────────────────────────────────────────────────
 * 🔍 Dashboard-Filter-Bar - Erweiterte Stile
 * ───────────────────────────────────────────────────────────── */
.pf-dashboard-module-filter-bar {
  background-color: var(--pf-surface);
  border-radius: var(--pf-radius);
  padding: 20px;
  margin: 20px 0 30px;
  box-shadow: var(--pf-shadow-sm);
  border: 1px solid var(--pf-border);
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.pf-dashboard-module-filter-bar input,
.pf-dashboard-module-filter-bar select {
  padding: 12px 16px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  font-size: 14px;
  background-color: white;
  transition: var(--pf-transition);
  color: var(--pf-text);
  min-height: 44px;
}

.pf-dashboard-module-filter-bar input:focus,
.pf-dashboard-module-filter-bar select:focus {
  outline: none;
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.2);
}

.pf-dashboard-module-filter-search {
  flex: 1;
  min-width: 200px;
}

.pf-dashboard-module-filter-type,
.pf-dashboard-module-filter-category,
.pf-dashboard-module-filter-status,
.pf-dashboard-module-filter-license,
.pf-dashboard-module-filter-visibility,
.pf-dashboard-module-filter-author,
.pf-dashboard-module-filter-sort {
  min-width: 150px;
  max-width: 200px;
}
/* ─────────────────────────────────────────────────────────────
 * 📦 Pfuisi Box-Grundstruktur (KONSOLIDIERT - alle Eigenschaften hier)
 * ───────────────────────────────────────────────────────────── */
.pfuisi_boxes {
  /* Layout & Position */
  position: relative;
  display: flex;
  flex-direction: column;
  
  /* Sizing & Spacing */
  scroll-margin-top: calc(50vh - 100px);
  
  /* Visual Styling */
  border-radius: var(--pf-radius);
  background: var(--pf-surface);
  box-shadow: var(--pf-shadow-sm);
  
  /* Overflow & Cursor */
  overflow: hidden;
  cursor: pointer;
  
  /* Transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pfuisi_boxes:hover {
  box-shadow: var(--pf-shadow-lg);
  transform: translateY(-4px);
}

/* Gradient-Overlay beim Hover */
.pfuisi_boxes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(92, 107, 192, 0.05), rgba(244, 64, 129, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

.pfuisi_boxes:hover::before {
  opacity: 1;
}

/* Z-Index für Ripple-Effekt */
.pfuisi_boxes .pf-box-header,
.pfuisi_boxes .pf-box-body,
.pfuisi_boxes .pf-box-actions {
  position: relative;
  z-index: 1;
}
.pf-box-controls .pf-box-anchor {
  margin-left: 6px;
  font-size: 0.8rem;
  color: var(--pf-primary);
  text-decoration: none;
}
.pf-box-controls .pf-box-anchor:hover { text-decoration: underline; }

/* Glow-Effekt für pf-restore-focus - angepasste Version */
/* Einfacher Glow-Effekt für pf-restore-focus */
.pfuisi_boxes.pf-restore-focus {
  animation: pf-simple-glow 1.5s ease-out both;
}

@keyframes pf-simple-glow {
  0% {
    transform: scale(1);
    box-shadow: 
      0 0 20px 5px rgba(74, 158, 255, 0),
      0 0 40px 15px rgba(74, 158, 255, 0);
  }
  50% {
    transform: scale(1.015);
    box-shadow: 
      0 0 20px 5px rgba(74, 158, 255, 0.6),
      0 0 40px 15px rgba(74, 158, 255, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 
      0 0 20px 5px rgba(74, 158, 255, 0),
      0 0 40px 15px rgba(74, 158, 255, 0);
  }
}


/* 🎯 Highlight-Effekt für :target (Anker-Sprung & Restore) */
.pfuisi_boxes:target {
  outline: none !important;
  position: relative;
  animation: target-highlight 2s ease-out;
}

.pfuisi_boxes:target::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    transparent 10%, 
    #4a9eff 11%, 
    #00ff00 80%,
    transparent 90%
  );
  animation: border-flow 2s ease-out;
  pointer-events: none;
  z-index: 10;
}

@keyframes border-flow {
  0% { width: 0; opacity: 1; }
  60% { width: 100%; opacity: 1; }
  80% { width: 100%; opacity: 0; }
  100% { width: 100%; opacity: 0; }
}

@keyframes target-highlight {
  0% { 
    box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7);
    transform: scale(1);
  }
  10% { 
    box-shadow: 0 0 20px 10px rgba(74, 158, 255, 0.5);
    transform: scale(1.02);
  }
  30% { 
    box-shadow: 0 0 30px 15px rgba(74, 158, 255, 0.3);
    transform: scale(1.01);
  }
  100% { 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: scale(1);
  }
}



/* ─────────────────────────────────────────────────────────────
 * 📊 Fortschrittsbalken - Von 0 auf 100 bei Hover
 * ───────────────────────────────────────────────────────────── */
.pf-module-progress-bar {
  height: 4px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.pf-module-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pf-warning), var(--pf-success));
  transition: width 1.5s ease;
}
.pfuisi_boxes:hover .pf-module-progress-fill {
  width: 100%;
}
/* ─────────────────────────────────────────────────────────────
 * 🧩 Modul-Header - Elegantes Design
 * ───────────────────────────────────────────────────────────── */
.pf-box-header {
  position: relative;
  padding: 16px 20px;
  background: linear-gradient(to right, var(--pf-surface-alt), var(--pf-surface));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--pf-border);
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────
 * 🖼️ Modul-Icon als Drag-Handler (kleiner und mit Hover-Effekt)
 * ───────────────────────────────────────────────────────────── */
.pf-drag-handle {
  font-size: 1.2rem;
  margin-right: 12px;
  color: var(--pf-text-light);
  transition: var(--pf-transition);
  cursor: grab;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--pf-radius-sm);
  flex-shrink: 0;
}
.pf-drag-handle:hover {
  color: var(--pf-primary);
  background-color: rgba(92, 107, 192, 0.1);
}
.pf-drag-handle:active {
  cursor: grabbing;
  transform: scale(0.95);
}
.pf-ws-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pf-text);
  margin: 0;
  flex-grow: 1;
  transition: var(--pf-transition);
}
.pf-version {
  font-size: 0.75rem;
  color: var(--pf-text-lighter);
  font-weight: normal;
}
/* ─────────────────────────────────────────────────────────────
 * 📄 Box-Inhalte - Klare Typografie mit read-more
 * ───────────────────────────────────────────────────────────── */
.pf-box-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.pf-description-container {
  position: relative;
  margin-bottom: 1rem;
  flex-grow: 1;
}
.pf-description {
  margin: 0 0 10px 0;
  line-height: 1.5;
  color: var(--pf-text);
}
.pf-full-description {
  margin: 0 0 10px 0;
  line-height: 1.5;
  color: var(--pf-text);
}
.pf-read-more {
  background: none;
  border: none;
  color: var(--pf-primary);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  margin: 0;
  text-align: left;
  font-weight: 500;
  transition: var(--pf-transition);
  display: inline-block;
}
.pf-read-more:hover {
  color: var(--pf-primary-dark);
  text-decoration: underline;
}
.pf-read-more:focus {
  outline: none;
  text-decoration: underline;
}
/* ─────────────────────────────────────────────────────────────
 * 📊 Erweiterte Meta-Informationen - Schöne Darstellung
 * ───────────────────────────────────────────────────────────── */
.pf-box-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--pf-border);
  align-items: center;
}

.pf-meta-item {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--pf-text-light);
  background-color: rgba(92, 107, 192, 0.08);
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(92, 107, 192, 0.2);
  transition: var(--pf-transition);
  white-space: nowrap;
}

.pf-meta-item:hover {
  background-color: rgba(92, 107, 192, 0.15);
  border-color: rgba(92, 107, 192, 0.3);
  transform: scale(1.05);
}

.pf-meta-label {
  margin-right: 4px;
  font-weight: 500;
  opacity: 0.8;
}

.pf-meta-value {
  font-weight: 600;
  color: var(--pf-primary);
}

/* Lizenz-Info und Type-Badge Styling */
.pf-license-info {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  margin-right: 8px;
}

.pf-license-info:contains("🔒") {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  border: 1px solid #f44336;
  color: #c62828;
}

.pf-license-info:contains("🔓") {
  background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
  border: 1px solid #4caf50;
  color: #2e7d32;
}

.pf-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pf-type-badge.pf-type-base {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border: 1px solid #2196f3;
  color: #1565c0;
}

.pf-type-badge.pf-type-function {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  border: 1px solid #9c27b0;
  color: #6a1b9a;
}

.pf-type-badge.pf-type-tools {
  background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
  border: 1px solid #4caf50;
  color: #2e7d32;
}
/* ─────────────────────────────────────────────────────────────
 * 🔐 Login-Formular - Modernes Design
 * ───────────────────────────────────────────────────────────── */
.pf-module-login-mini-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.pf-module-login-mini-form input {
  padding: 12px 16px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-surface);
  color: var(--pf-text);
  width: 100%;
  box-sizing: border-box;
  font-size: 0.95rem;
  transition: var(--pf-transition-fast);
}
.pf-module-login-mini-form input:focus {
  outline: none;
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.2);
}
.pf-module-login-mini-form button {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--pf-primary), var(--pf-primary-dark));
  color: white;
  border: none;
  border-radius: var(--pf-radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--pf-transition);
  box-shadow: 0 2px 8px rgba(92, 107, 192, 0.3);
}
.pf-module-login-mini-form button:hover {
  background: linear-gradient(135deg, var(--pf-primary-dark), var(--pf-primary));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(92, 107, 192, 0.4);
}
/* ─────────────────────────────────────────────────────────────
 * 🚨 Fehlermeldungen & Lizenzhinweise - Modernes Design
 * ───────────────────────────────────────────────────────────── */
.pfws-alert {
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: var(--pf-radius-sm);
  font-weight: 500;
  box-shadow: var(--pf-shadow-sm);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pf-alert-error {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  border-left: 4px solid var(--pf-error);
  color: var(--pf-error);
}
.pf-license-warning {
  background: linear-gradient(135deg, #fff8e1, #ffe0b2);
  border-left: 4px solid var(--pf-warning);
  padding: 18px 22px;
  margin: 20px 0;
  border-radius: var(--pf-radius-sm);
  color: #e65100;
  box-shadow: var(--pf-shadow-sm);
  font-weight: 500;
}
.pf-license-hint {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-left: 4px solid var(--pf-info);
  padding: 18px 22px;
  margin: 20px 0;
  border-radius: var(--pf-radius-sm);
  color: #0d47a1;
  box-shadow: var(--pf-shadow-sm);
  font-weight: 500;
}
/* ─────────────────────────────────────────────────────────────
 * 🖼️ Steuerbuttons
 * ───────────────────────────────────────────────────────────── */
.pf-box-controls {
  display: flex;
  gap: 8px;
}
.pf-box-controls button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background-color: var(--pf-surface-alt);
  color: var(--pf-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--pf-transition-fast);
  font-size: 1rem;
}
.pf-box-controls button:hover {
  background-color: var(--pf-primary-light);
  color: white;
  transform: scale(1.1);
}
/* ─────────────────────────────────────────────────────────────
 * 📱 Responsive Design - Perfekt auf allen Geräten
 * ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  .pf-dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
  
  .pf-dashboard-module-filter-bar {
    gap: 10px;
  }
  
  .pf-dashboard-module-filter-bar input,
  .pf-dashboard-module-filter-bar select {
    min-width: 140px;
    font-size: 13px;
    padding: 10px 12px;
  }
}
@media screen and (max-width: 768px) {
  .pf-dashboard {
    padding: 1.5rem;
  }
  
  .pf-dashboard-main {
    padding: 1rem 0.75rem 80px 0.75rem; /* Mobile: weniger Seitenabstand */
  }
  
  .pf-dashboard h2 {
    font-size: 1.75rem;
  }
  
  .pf-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .pf-box-meta {
    flex-direction: column;
    gap: 6px;
  }
  
  .pf-dashboard-module-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pf-dashboard-module-filter-search,
  .pf-dashboard-module-filter-type,
  .pf-dashboard-module-filter-category,
  .pf-dashboard-module-filter-status,
  .pf-dashboard-module-filter-license,
  .pf-dashboard-module-filter-visibility,
  .pf-dashboard-module-filter-author,
  .pf-dashboard-module-filter-sort {
    min-width: 100%;
    max-width: none;
  }
}
@media screen and (max-width: 480px) {
  .pf-dashboard {
    padding: 1rem;
  }
  
  .pf-dashboard h2 {
    font-size: 1.5rem;
  }
  
  .pf-box-header {
    padding: 12px 14px;
  }
  
  .pf-box-body {
    padding: 16px;
  }
  
  .pf-drag-handle {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
  
  .pf-dashboard-module-filter-bar {
    padding: 15px;
    gap: 8px;
  }
  
  .pf-dashboard-module-filter-bar input,
  .pf-dashboard-module-filter-bar select {
    min-height: 40px;
    font-size: 12px;
    padding: 8px 10px;
  }
  
  .pf-meta-item {
    font-size: 0.75rem;
    padding: 3px 6px;
  }
}
/* ─────────────────────────────────────────────────────────────
 * 🧲 Dragging-Effekte - Verbesserte Animation
 * ───────────────────────────────────────────────────────────── */
.pfuisi_dragging {
  background: linear-gradient(135deg, #fff8e1, #ffecb3) !important;
  border: 2px dashed var(--pf-warning) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
  opacity: 0.95;
  animation: pfuisi_drag-pulse 0.6s infinite alternate;
  z-index: 100;
  transform: rotate(2deg);
}
@keyframes pfuisi_drag-pulse {
  0% { 
    transform: scale(1) rotate(2deg); 
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
  100% { 
    transform: scale(1.03) rotate(-1deg); 
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
  }
}
/* ─────────────────────────────────────────────────────────────
 * ✨ Spezialeffekte & Mikrointeraktionen
 * ───────────────────────────────────────────────────────────── */
/* Glüheffekt für aktive Elemente */
@keyframes pf-glow {
  0% { box-shadow: 0 0 5px rgba(92, 107, 192, 0.5); }
  50% { box-shadow: 0 0 20px rgba(92, 107, 192, 0.8); }
  100% { box-shadow: 0 0 5px rgba(92, 107, 192, 0.5); }
}
.pfuisi_boxes.active:hover {
  animation: pf-glow 2s infinite;
}
/* Subtile Hintergrundmuster */
.pf-dashboard::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(92, 107, 192, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(244, 64, 129, 0.05) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}
/* Schöner Loading-Indikator */
.pf-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(92, 107, 192, 0.3);
  border-radius: 50%;
  border-top-color: var(--pf-primary);
  animation: pf-spin 1s ease-in-out infinite;
}
@keyframes pf-spin {
  to { transform: rotate(360deg); }
}
/* ─────────────────────────────────────────────────────────────
 * 🌊 Welleneffekt bei Klick (Ripple-Effekt) - Reparierte Version
 * ───────────────────────────────────────────────────────────── */
.pf-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(0);
  animation: pf-ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes pf-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * ⚠️ DUPLIKATE ENTFERNT
 * Alle .pfuisi_boxes Styles konsolidiert bei Zeile ~1340
 * ═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────
 * 🔘 Button-Styles für Dashboard
 * ───────────────────────────────────────────────────────────── */
.pf-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--pf-radius-sm);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: var(--pf-transition);
  border: none;
  font-size: 1rem;
}
.pf-btn-primary {
  background: linear-gradient(135deg, var(--pf-primary), var(--pf-primary-dark));
  color: white;
  box-shadow: 0 2px 8px rgba(92, 107, 192, 0.3);
}
.pf-btn-primary:hover {
  background: linear-gradient(135deg, var(--pf-primary-dark), var(--pf-primary));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(92, 107, 192, 0.4);
}
.pf-btn-secondary {
  background: linear-gradient(135deg, var(--pf-text-light), var(--pf-text-lighter));
  color: white;
  box-shadow: 0 2px 8px rgba(127, 140, 141, 0.3);
}
.pf-btn-secondary:hover {
  background: linear-gradient(135deg, var(--pf-text-lighter), var(--pf-text-light));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(127, 140, 141, 0.4);
}
.pf-btn-info {
  background: linear-gradient(135deg, var(--pf-info), #1976d2);
  color: white;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}
.pf-btn-info:hover {
  background: linear-gradient(135deg, #1976d2, var(--pf-info));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}
/* ─────────────────────────────────────────────────────────────
 * 📊 Dashboard-Statistik-Informationen
 * ───────────────────────────────────────────────────────────── */
.pf-dashboard-stats {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding: 15px;
  background-color: var(--pf-surface-alt);
  border-radius: var(--pf-radius-sm);
  font-size: 0.9rem;
  color: var(--pf-text-light);
  box-shadow: var(--pf-shadow-sm);
}
.pf-dashboard-stats p {
  margin: 5px 0;
}
/* ─────────────────────────────────────────────────────────────
 * 📱 Zusätzliche Responsive-Anpassungen für Demo-Integration
 * ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .pf-dashboard-demo-header {
    padding: 20px;
  }
  
  .pf-dashboard-demo-header h2 {
    font-size: 1.8rem;
  }
  
  .pf-dashboard-demo-header p {
    font-size: 1rem;
  }
  
  /* Overlay-Anpassungen für mobile Geräte */
  .pf-overlay-inner {
    width: 95%;
    max-height: 95vh;
    top: 70px;
      border-radius: 0 0 var(--pf-radius) var(--pf-radius);
  margin-top: 70px;
  }
  
  .pf-overlay-header {
    padding: 12px 15px;
  }
  
  .pf-overlay-header h2 {
    font-size: 1.1em;
  }
  
  .pf-module-login-box {
    padding: 20px;
  }
}
@media screen and (max-width: 480px) {
  .pf-dashboard-demo-header {
    padding: 15px;
  }
  
  .pf-dashboard-demo-header h2 {
    font-size: 1.5rem;
  }
  
  .pf-dashboard-demo-header p {
    font-size: 0.9rem;
  }
  
  .pf-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  
  /* Weitere Overlay-Anpassungen für kleine Bildschirme */
  .pf-overlay-inner {
    width: 98%;
    padding: 10px;
  }
  
  .pf-module-login-box {
    padding: 15px;
  }
  
  .pf-module-login-title {
    font-size: 1.2rem;
  }
}
/* ─────────────────────────────────────────────────────────────
 * 📱 Box-Actions Styles
 * ───────────────────────────────────────────────────────────── */
.pf-box-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.pf-box-actions .pf-btn {
  flex: 1;
  text-align: center;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--pf-radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--pf-transition-fast);
  cursor: pointer;
  border: none;
}

.pf-box-actions .pf-btn-primary {
  background: linear-gradient(135deg, var(--pf-primary), var(--pf-primary-dark));
  color: white;
  box-shadow: 0 2px 4px rgba(92, 107, 192, 0.3);
}

.pf-box-actions .pf-btn-primary:hover {
  background: linear-gradient(135deg, var(--pf-primary-dark), var(--pf-primary));
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(92, 107, 192, 0.4);
}

.pf-box-actions .pf-btn-secondary {
  background: linear-gradient(135deg, var(--pf-text-light), var(--pf-text-lighter));
  color: white;
  box-shadow: 0 2px 4px rgba(127, 140, 141, 0.3);
}

.pf-box-actions .pf-btn-secondary:hover {
  background: linear-gradient(135deg, var(--pf-text-lighter), var(--pf-text-light));
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(127, 140, 141, 0.4);
}

/* Hover-Effekte für Links */
.pf-box-actions a[data-overlay="true"]:hover {
  color: white;
  text-decoration: none;
}

/* Responsive Anpassung für Buttons */
@media screen and (max-width: 768px) {
  .pf-box-actions {
    flex-direction: column;
  }
  
  .pf-box-actions .pf-btn {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────
 * 🔒 Lizenz-Status-Indikatoren
 * ───────────────────────────────────────────────────────────── */
.pf-locked-module {
  position: relative;
  border: 1px dashed var(--pf-warning);
  opacity: 0.9;
  background-color: rgba(0, 0, 0, 0.08) !important;
  filter: brightness(0.92);
}

.pf-locked-module .pf-box-header {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
}

.pf-locked-module .pf-box-body {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Locked Button: gleiche Funktion wie Maximize, aber mit Schloss-Icon */
.pf-maximize.pf-locked {
  opacity: 0.8;
}

.pf-maximize.pf-locked:hover {
  opacity: 1;
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6));
}

/* Lizenz-Level-Badges */
.pf-license-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
 * 📊 DASHBOARD-SPEZIFISCHER FOOTER - Unabhängig vom globalen Footer
 * ═══════════════════════════════════════════════════════════════════════════════════ */

.pf-dashboard-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100; /* UNTER dem Overlay (1000) - verdeckt keine Module! */
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(52, 73, 94, 0.95) 100%);
  backdrop-filter: blur(10px);
  border-top: 2px solid rgba(92, 107, 192, 0.3);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Footer verstecken wenn Overlay aktiv ist - JavaScript handled das jetzt */
body:has(.pf-overlay.active) .pf-dashboard-footer,
body:has(.pf-overlay.visible) .pf-dashboard-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pf-dashboard-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  color: #ffffff;
}

/* Dezente minimale System-Info */
.pf-dashboard-footer-minimal-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.pf-minimal-version {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffd700;
  font-weight: 600;
}

.pf-minimal-version::before {
  content: '🐯';
  font-size: 16px;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.pf-minimal-separator {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}

.pf-minimal-modules {
  color: rgba(255, 255, 255, 0.9);
}

.pf-minimal-user {
  color: #7db6c7;
  font-weight: 600;
}

/* Minimaler Footer-Container */
.pf-dashboard-footer-minimal {
  display: flex;
  align-items: center;
}

.pf-dashboard-copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}

/* Mobile Responsive für dezenten Dashboard Footer */
@media (max-width: 768px) {
  .pf-dashboard-footer {
    padding: 10px 15px;
  }
  
  .pf-dashboard-footer-content {
    flex-direction: column;
    gap: 8px;
  }
  
  .pf-dashboard-footer-minimal-info {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
  }
  
  .pf-dashboard-copyright {
    order: 2;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .pf-dashboard-footer {
    padding: 8px 12px;
  }
  
  .pf-dashboard-footer-minimal-info {
    font-size: 11px;
    gap: 6px;
  }
  
  .pf-minimal-version::before {
    font-size: 14px;
  }
  
  .pf-dashboard-copyright {
    font-size: 10px;
  }
}

/* Hover-Effekte für das Tiger-Icon */
.pf-minimal-version:hover::before {
  animation: tiger-glow 0.6s ease-in-out;
}

@keyframes tiger-glow {
  0% { 
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    transform: scale(1.1);
  }
  100% { 
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
    transform: scale(1);
  }
}

.pf-license-level-0 {
  background-color: #f5f5f5;
  color: #757575;
}

.pf-license-level-1 {
  background-color: #e3f2fd;
  color: #1976d2;
}

.pf-license-level-2 {
  background-color: #e8f5e9;
  color: #388e3c;
}

.pf-license-level-3 {
  background-color: #fff8e1;
  color: #ffa000;
}
/* ─────────────────────────────────────────────────────────────
 * 🧭 Smooth anchor scrolling for dashboard restores
 * ───────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
/* ═══════════════════════════════════════════════════════════════
   🚀 ERWEITERTE DASHBOARD-KOMPONENTEN - Advanced Features
   ═══════════════════════════════════════════════════════════════ */

/* ===== ERWEITERTE NAVIGATION ===== */
.pf-dashboard-nav-extended {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-nav-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.pf-nav-breadcrumb-item {
    color: var(--pf-text-secondary);
}

.pf-nav-breadcrumb-item.active {
    color: var(--pf-primary);
    font-weight: 600;
}

.pf-nav-breadcrumb-separator {
    color: var(--pf-text-muted);
    margin: 0 0.25rem;
}

.pf-nav-search {
    position: relative;
    margin-bottom: 1rem;
}

.pf-nav-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 2px solid var(--pf-border);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.pf-nav-search input:focus {
    border-color: var(--pf-primary);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    outline: none;
}

.pf-nav-search::before {
    content: '🔍';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pf-text-muted);
    font-size: 1rem;
}

.pf-nav-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pf-nav-filter {
    background: var(--pf-bg-secondary);
    border: 1px solid var(--pf-border);
    border-radius: 20px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-nav-filter:hover,
.pf-nav-filter.active {
    background: var(--pf-primary);
    color: white;
    border-color: var(--pf-primary);
}

/* ===== ERWEITERTE WIDGETS ===== */
.pf-widget-chart {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
    margin-bottom: 1.5rem;
}

.pf-widget-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pf-widget-chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pf-text);
    margin: 0;
}

.pf-widget-chart-controls {
    display: flex;
    gap: 0.5rem;
}

.pf-chart-control-btn {
    background: var(--pf-bg-secondary);
    border: 1px solid var(--pf-border);
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-chart-control-btn:hover,
.pf-chart-control-btn.active {
    background: var(--pf-primary);
    color: white;
    border-color: var(--pf-primary);
}

.pf-widget-chart-canvas {
    height: 300px;
    position: relative;
}

.pf-widget-calendar {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pf-calendar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pf-text);
}

.pf-calendar-nav {
    display: flex;
    gap: 0.5rem;
}

.pf-calendar-nav-btn {
    background: var(--pf-bg-secondary);
    border: 1px solid var(--pf-border);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-calendar-nav-btn:hover {
    background: var(--pf-primary);
    color: white;
    border-color: var(--pf-primary);
}

.pf-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.pf-calendar-day-header {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pf-text-secondary);
    padding: 0.5rem;
}

.pf-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
    position: relative;
}

.pf-calendar-day:hover {
    background: var(--pf-bg-secondary);
}

.pf-calendar-day.today {
    background: var(--pf-primary);
    color: white;
    font-weight: 600;
}

.pf-calendar-day.has-events::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--pf-warning);
    border-radius: 50%;
}

.pf-widget-timeline {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-timeline {
    position: relative;
    padding-left: 2rem;
}

.pf-timeline::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--pf-border);
}

.pf-timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
}

.pf-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    top: 0.5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pf-primary);
    border: 3px solid var(--pf-surface);
}

.pf-timeline-item.success::before {
    background: var(--pf-success);
}

.pf-timeline-item.warning::before {
    background: var(--pf-warning);
}

.pf-timeline-item.error::before {
    background: var(--pf-error);
}

.pf-timeline-time {
    font-size: 0.8rem;
    color: var(--pf-text-secondary);
    margin-bottom: 0.25rem;
}

.pf-timeline-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.25rem;
}

.pf-timeline-description {
    color: var(--pf-text-secondary);
    font-size: 0.9rem;
}

/* ===== ERWEITERTE FORMULARE ===== */
.pf-form-extended {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--pf-border);
}

.pf-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pf-form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .pf-form-row {
        grid-template-columns: 1fr;
    }
}

.pf-form-group {
    margin-bottom: 1rem;
}

.pf-form-label {
    display: block;
    font-weight: 500;
    color: var(--pf-text);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.pf-form-input,
.pf-form-select,
.pf-form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--pf-border);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: var(--pf-surface);
    color: var(--pf-text);
}

.pf-form-input:focus,
.pf-form-select:focus,
.pf-form-textarea:focus {
    border-color: var(--pf-primary);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    outline: none;
}

.pf-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.pf-form-file {
    position: relative;
    display: inline-block;
    width: 100%;
}

.pf-form-file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.pf-form-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px dashed var(--pf-border);
    border-radius: 8px;
    background: var(--pf-bg-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.pf-form-file-label:hover {
    border-color: var(--pf-primary);
    background: rgba(33, 150, 243, 0.05);
}

.pf-form-checkbox-group,
.pf-form-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.pf-form-checkbox,
.pf-form-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.pf-form-checkbox input,
.pf-form-radio input {
    margin: 0;
}

.pf-form-help {
    font-size: 0.8rem;
    color: var(--pf-text-secondary);
    margin-top: 0.25rem;
}

.pf-form-error {
    color: var(--pf-error);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pf-form-success {
    color: var(--pf-success);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===== NOTIFICATION SYSTEM ===== */
.pf-notifications {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
}

.pf-notification {
    background: var(--pf-surface);

    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transform: translateX(100%);
    opacity: 0;
    animation: pf-notification-slide-in 0.3s ease-out forwards;
    position: relative;
    overflow: hidden;
}

@keyframes pf-notification-slide-in {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.pf-notification.success {
    border-left-color: var(--pf-success);
}

.pf-notification.error {
    border-left-color: var(--pf-error);
}

.pf-notification.warning {
    border-left-color: var(--pf-warning);
}

.pf-notification.info {
    border-left-color: var(--pf-info);
}

.pf-notification-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.pf-notification-content {
    flex: 1;
}

.pf-notification-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.pf-notification-message {
    color: var(--pf-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.pf-notification-close {
    background: none;
    border: none;
    color: var(--pf-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pf-notification-close:hover {
    background: var(--pf-bg-secondary);
    color: var(--pf-text);
}

.pf-notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    animation: pf-notification-progress 5s linear forwards;
}

@keyframes pf-notification-progress {
    to {
        width: 100%;
    }
}

/* ===== MODAL SYSTEM ===== */
.pf-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.pf-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.pf-modal {
    background: var(--pf-surface);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pf-modal-overlay.open .pf-modal {
    transform: scale(1);
}

.pf-modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--pf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pf-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
    margin: 0;
}

.pf-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--pf-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.pf-modal-close:hover {
    background: var(--pf-bg-secondary);
    color: var(--pf-text);
}

.pf-modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.pf-modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--pf-border);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.pf-modal-size-sm {
    max-width: 400px;
}

.pf-modal-size-md {
    max-width: 600px;
}

.pf-modal-size-lg {
    max-width: 800px;
}

.pf-modal-size-xl {
    max-width: 1000px;
}

/* ===== LOADING STATES ===== */
.pf-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: inherit;
}

.pf-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--pf-border);
    border-top: 4px solid var(--pf-primary);
    border-radius: 50%;
    animation: pf-spinner 1s linear infinite;
}

@keyframes pf-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pf-loading-skeleton {
    background: linear-gradient(90deg, var(--pf-bg-secondary) 25%, transparent 50%, var(--pf-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: pf-skeleton 1.5s infinite;
    border-radius: 4px;
}

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

.pf-skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.pf-skeleton-text:last-child {
    width: 60%;
}

.pf-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.pf-skeleton-button {
    height: 2.5rem;
    width: 120px;
}

.pf-loading-dots {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.pf-loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pf-primary);
    animation: pf-loading-dots 1.4s infinite ease-in-out;
}

.pf-loading-dot:nth-child(1) { animation-delay: -0.32s; }
.pf-loading-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes pf-loading-dots {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== ERWEITERTE ANIMATIONEN ===== */
@keyframes pf-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pf-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pf-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pf-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pf-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pf-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pf-animate-fade-in-up {
    animation: pf-fade-in-up 0.6s ease-out;
}

.pf-animate-fade-in-down {
    animation: pf-fade-in-down 0.6s ease-out;
}

.pf-animate-fade-in-left {
    animation: pf-fade-in-left 0.6s ease-out;
}

.pf-animate-fade-in-right {
    animation: pf-fade-in-right 0.6s ease-out;
}

.pf-animate-scale-in {
    animation: pf-scale-in 0.4s ease-out;
}

.pf-animate-bounce-in {
    animation: pf-bounce-in 0.6s ease-out;
}

/* Staggered animations */
.pf-animate-stagger > * {
    animation: pf-fade-in-up 0.6s ease-out;
    animation-fill-mode: both;
}

.pf-animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.pf-animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.pf-animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.pf-animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.pf-animate-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.pf-animate-stagger > *:nth-child(6) { animation-delay: 0.6s; }

/* ===== ERWEITERTE UTILITY KLASSEN ===== */
.pf-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.pf-text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

.pf-shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.pf-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
}

.pf-shadow-lg {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
}

.pf-shadow-xl {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}

.pf-shadow-inner {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.pf-border-top {
    border-top: 1px solid var(--pf-border);
}

.pf-border-bottom {
    border-bottom: 1px solid var(--pf-border);
}

.pf-border-left {
    border-left: 1px solid var(--pf-border);
}

.pf-border-right {
    border-right: 1px solid var(--pf-border);
}

.pf-rounded-sm {
    border-radius: 4px;
}

.pf-rounded {
    border-radius: 6px;
}

.pf-rounded-md {
    border-radius: 8px;
}

.pf-rounded-lg {
    border-radius: 12px;
}

.pf-rounded-xl {
    border-radius: 16px;
}

.pf-rounded-full {
    border-radius: 50%;
}

.pf-position-relative {
    position: relative;
}

.pf-position-absolute {
    position: absolute;
}

.pf-position-fixed {
    position: fixed;
}

.pf-position-sticky {
    position: sticky;
}

.pf-overflow-hidden {
    overflow: hidden;
}

.pf-overflow-auto {
    overflow: auto;
}

.pf-overflow-scroll {
    overflow: scroll;
}

.pf-cursor-pointer {
    cursor: pointer;
}

.pf-cursor-default {
    cursor: default;
}

.pf-cursor-not-allowed {
    cursor: not-allowed;
}

/* ===== ERWEITERTE RESPONSIVE FEATURES ===== */
@media (max-width: 1200px) {
    .pf-dashboard-main {
        padding: 1.5rem 1rem 80px 1rem;
    }

    .pf-module-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 992px) {
    .pf-nav-filters {
        justify-content: center;
    }

    .pf-widget-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .pf-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pf-dashboard-main {
        padding: 1rem 0.75rem 80px 0.75rem;
    }

    .pf-module-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .pf-nav-extended {
        padding: 1rem;
    }

    .pf-widget-chart,
    .pf-widget-calendar,
    .pf-widget-timeline {
        padding: 1rem;
    }

    .pf-form-extended {
        padding: 1.5rem;
    }

    .pf-modal-header,
    .pf-modal-body,
    .pf-modal-footer {
        padding: 1rem 1.5rem;
    }

    .pf-notifications {
        left: 0.75rem;
        right: 0.75rem;
        top: 0.75rem;
    }
}

@media (max-width: 576px) {
    .pf-dashboard-main {
        padding: 0.75rem 0.5rem 80px 0.5rem;
    }

    .pf-nav-extended {
        padding: 0.75rem;
    }

    .pf-widget-chart,
    .pf-widget-calendar,
    .pf-widget-timeline {
        padding: 0.75rem;
    }

    .pf-form-extended {
        padding: 1rem;
    }

    .pf-modal {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }

    .pf-modal-header,
    .pf-modal-body,
    .pf-modal-footer {
        padding: 0.75rem 1rem;
    }

    .pf-notifications {
        left: 0.5rem;
        right: 0.5rem;
        top: 0.5rem;
    }
}

/* ===== DARK MODE ERWEITERUNGEN ===== */
@media (prefers-color-scheme: dark) {
    .pf-loading-overlay {
        background: rgba(33, 33, 33, 0.9);
    }

    .pf-modal-overlay {
        background: rgba(0, 0, 0, 0.8);
    }

    .pf-notification {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

    .pf-form-file-label {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
    }

    .pf-nav-search input {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .pf-nav-filter {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .pf-widget-chart,
    .pf-widget-calendar,
    .pf-widget-timeline {
        background: rgba(255, 255, 255, 0.05);
    }

    .pf-modal {
        background: rgba(255, 255, 255, 0.1);
    }

    .pf-notification-success {
        background: #4caf50;
    }

    .pf-notification-error {
        background: #f44336;
    }

    .pf-notification-warning {
        background: #ff9800;
    }

    .pf-notification-info {
        background: #2196f3;
    }
}

/* ===== ACCESSIBILITY ERWEITERUNGEN ===== */
@media (prefers-reduced-motion: reduce) {
    .pf-notification {
        animation: none;
        transform: translateX(0);
        opacity: 1;
    }

    .pf-modal-overlay,
    .pf-modal {
        transition: none;
    }

    .pf-loading-spinner,
    .pf-loading-dot {
        animation: none;
    }

    .pf-loading-skeleton {
        animation: none;
    }
}

/* Focus trap for modals */
.pf-modal:focus-within {
    outline: none;
}

/* High contrast mode enhancements */
@media (prefers-contrast: high) {
    .pf-modal-overlay {
        background: rgba(0, 0, 0, 0.9);
    }

    .pf-notification {
        border: 2px solid currentColor;
        border-left-width: 6px;
    }

    .pf-form-input,
    .pf-form-select,
    .pf-form-textarea {
        border-width: 3px;
    }

    .pf-form-file-label {
        border-width: 3px;
        border-style: solid;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .pf-notifications,
    .pf-modal-overlay,
    .pf-dashboard-footer {
        display: none !important;
    }

    .pf-dashboard-main {
        padding: 0 !important;
    }

    .pf-module-card,
    .pf-widget-chart,
    .pf-widget-calendar,
    .pf-widget-timeline {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        break-inside: avoid;
    }

    .pf-form-extended {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎨 DASHBOARD THEMING SYSTEM - Dynamic Theme Support
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --pf-bg-primary: #ffffff;
    --pf-bg-secondary: #f8f9fa;
    --pf-surface: #ffffff;
    --pf-text: #212121;
    --pf-text-secondary: #757575;
    --pf-text-muted: #9e9e9e;
    --pf-border: #e0e0e0;
    --pf-primary: #2196f3;
    --pf-primary-dark: #1976d2;
    --pf-success: #4caf50;
    --pf-warning: #ff9800;
    --pf-error: #f44336;
    --pf-info: #00bcd4;
}

[data-theme="dark"] {
    --pf-bg-primary: #121212;
    --pf-bg-secondary: #1e1e1e;
    --pf-surface: #1e1e1e;
    --pf-text: #ffffff;
    --pf-text-secondary: #b0b0b0;
    --pf-text-muted: #808080;
    --pf-border: #333333;
    --pf-primary: #64b5f6;
    --pf-primary-dark: #42a5f5;
    --pf-success: #81c784;
    --pf-warning: #ffb74d;
    --pf-error: #ef5350;
    --pf-info: #4dd0e1;
}

/* [data-theme="auto"] nutzt System-Präferenzen - keine benutzerdefinierten Styles nötig */

/* ═══════════════════════════════════════════════════════════════
   📱 MOBILE OPTIMIZATIONS - Touch & Gesture Support
   ═══════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Touch device optimizations */
    .pf-module-card:hover {
        transform: none;
    }

    .pf-nav-filter:hover {
        background: var(--pf-bg-secondary);
    }

    .pf-form-file-label:hover {
        border-color: var(--pf-border);
        background: var(--pf-bg-secondary);
    }

    /* Larger touch targets */
    .pf-modal-close,
    .pf-notification-close,
    .pf-chart-control-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🔧 DEBUGGING UTILITIES - Development Only
   ═══════════════════════════════════════════════════════════════ */

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

.pf-debug-borders * {
    border: 1px solid red !important;
}

.pf-debug-spacing * {
    background: rgba(255, 0, 0, 0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 PERFORMANCE OPTIMIZATIONS - GPU Acceleration
   ═══════════════════════════════════════════════════════════════ */

.pf-gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.pf-will-change-transform {
    will-change: transform;
}

.pf-will-change-opacity {
    will-change: opacity;
}

/* ═══════════════════════════════════════════════════════════════
   📊 DASHBOARD METRICS - Performance Monitoring
   ═══════════════════════════════════════════════════════════════ */

.pf-dashboard-metrics {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    background: var(--pf-surface);
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.75rem;
    font-family: monospace;
    z-index: 10000;
    opacity: 0.8;
}

.pf-dashboard-metrics:hover {
    opacity: 1;
}

.pf-metric-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.pf-metric-item:last-child {
    margin-bottom: 0;
}

.pf-metric-label {
    color: var(--pf-text-secondary);
}

.pf-metric-value {
    color: var(--pf-text);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   🎮 DASHBOARD GAMES - Interactive Elements
   ═══════════════════════════════════════════════════════════════ */

.pf-dashboard-game {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
    text-align: center;
}

.pf-game-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1rem;
}

.pf-game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.pf-game-cell {
    aspect-ratio: 1;
    background: var(--pf-bg-secondary);
    border: 2px solid var(--pf-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pf-game-cell:hover {
    background: var(--pf-primary);
    border-color: var(--pf-primary);
    color: white;
}

.pf-game-cell.x {
    color: var(--pf-primary);
}

.pf-game-cell.o {
    color: var(--pf-error);
}

.pf-game-status {
    font-size: 0.9rem;
    color: var(--pf-text-secondary);
    margin-bottom: 1rem;
}

.pf-game-reset {
    background: var(--pf-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-game-reset:hover {
    background: var(--pf-primary-dark);
}

/* ═══════════════════════════════════════════════════════════════
   🏆 DASHBOARD ACHIEVEMENTS - Gamification
   ═══════════════════════════════════════════════════════════════ */

.pf-achievements {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-achievements-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1rem;
}

.pf-achievement-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.pf-achievement {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.pf-achievement.unlocked {
    background: linear-gradient(135deg, var(--pf-success) 0%, var(--pf-success-dark) 100%);
    color: white;
    border-color: var(--pf-success);
}

.pf-achievement.locked {
    opacity: 0.6;
    filter: grayscale(100%);
}

.pf-achievement-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.pf-achievement-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.pf-achievement-description {
    font-size: 0.8rem;
    opacity: 0.8;
}

.pf-achievement-progress {
    margin-top: 0.5rem;
}

.pf-achievement-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.pf-achievement-progress-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   🎨 DASHBOARD CUSTOMIZER - Theme Builder
   ═══════════════════════════════════════════════════════════════ */

.pf-customizer {
    position: fixed;
    top: 50%;
    right: -300px;
    width: 300px;
    height: 80vh;
    background: var(--pf-surface);
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    transition: right 0.3s ease;
    z-index: 10000;
    overflow-y: auto;
}

.pf-customizer.open {
    right: 0;
}

.pf-customizer-toggle {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--pf-primary);
    color: white;
    border: none;
    border-radius: 6px 0 0 6px;
    width: 40px;
    height: 60px;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
}

.pf-customizer-section {
    margin-bottom: 1.5rem;
}

.pf-customizer-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1rem;
}

.pf-color-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pf-color-option {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
}

.pf-color-option:hover {
    transform: scale(1.1);
}

.pf-color-option.selected {
    border-color: var(--pf-text);
    transform: scale(1.1);
}

.pf-customizer-reset {
    width: 100%;
    background: var(--pf-error);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-customizer-reset:hover {
    background: var(--pf-error-dark);
}

/* ═══════════════════════════════════════════════════════════════
   📈 DASHBOARD ANALYTICS - Data Visualization
   ═══════════════════════════════════════════════════════════════ */

.pf-analytics-dashboard {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

.pf-analytics-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.pf-analytics-sidebar {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.pf-analytics-filters {
    margin-bottom: 1.5rem;
}

.pf-analytics-filter {
    margin-bottom: 1rem;
}

.pf-analytics-filter label {
    display: block;
    font-weight: 500;
    color: var(--pf-text);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.pf-analytics-filter select {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid var(--pf-border);
    border-radius: 6px;
    background: var(--pf-surface);
    color: var(--pf-text);
    font-size: 0.9rem;
}

.pf-analytics-summary {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.pf-analytics-summary-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.pf-analytics-summary-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pf-primary);
}

.pf-analytics-chart-large {
    grid-column: 1 / -1;
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-analytics-chart-large .pf-widget-chart-canvas {
    height: 400px;
}

/* ═══════════════════════════════════════════════════════════════
   🔄 DASHBOARD WORKFLOW - Process Management
   ═══════════════════════════════════════════════════════════════ */

.pf-workflow {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-workflow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.pf-workflow-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
}

.pf-workflow-steps {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.pf-workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    position: relative;
}

.pf-workflow-step::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 100%;
    width: 1rem;
    height: 2px;
    background: var(--pf-border);
}

.pf-workflow-step:last-child::after {
    display: none;
}

.pf-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 3px solid var(--pf-border);
    background: var(--pf-bg-secondary);
    transition: all 0.3s ease;
}

.pf-workflow-step.completed .pf-step-icon {
    background: var(--pf-success);
    border-color: var(--pf-success);
    color: white;
}

.pf-workflow-step.active .pf-step-icon {
    background: var(--pf-primary);
    border-color: var(--pf-primary);
    color: white;
    animation: pf-pulse 2s infinite;
}

@keyframes pf-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(33, 150, 243, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

.pf-step-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pf-text);
    text-align: center;
}

.pf-workflow-content {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
}

.pf-workflow-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pf-border);
}

/* ═══════════════════════════════════════════════════════════════
   🎯 DASHBOARD GOALS - KPI Tracking
   ═══════════════════════════════════════════════════════════════ */

.pf-goals {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-goals-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1.5rem;
}

.pf-goals-list {
    display: grid;
    gap: 1rem;
}

.pf-goal {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--pf-primary);
    transition: all 0.3s ease;
}

.pf-goal.completed {
    border-left-color: var(--pf-success);
    background: rgba(76, 175, 80, 0.1);
}

.pf-goal.overdue {
    border-left-color: var(--pf-error);
    background: rgba(244, 67, 54, 0.1);
}

.pf-goal-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.5rem;
}

.pf-goal-description {
    color: var(--pf-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pf-goal-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.pf-goal-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--pf-border);
    border-radius: 4px;
    overflow: hidden;
}

.pf-goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pf-primary) 0%, var(--pf-primary-dark) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.pf-goal.completed .pf-goal-progress-fill {
    background: linear-gradient(90deg, var(--pf-success) 0%, var(--pf-success-dark) 100%);
}

.pf-goal-progress-text {
    font-size: 0.8rem;
    color: var(--pf-text-secondary);
    font-weight: 600;
}

.pf-goal-due {
    font-size: 0.8rem;
    color: var(--pf-text-muted);
}

.pf-goal.overdue .pf-goal-due {
    color: var(--pf-error);
}

/* ═══════════════════════════════════════════════════════════════
   📅 DASHBOARD CALENDAR - Advanced Calendar
   ═══════════════════════════════════════════════════════════════ */

.pf-calendar-full {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-calendar-full-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.pf-calendar-full-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--pf-text);
}

.pf-calendar-full-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pf-calendar-full-nav-btn {
    background: var(--pf-bg-secondary);
    border: 1px solid var(--pf-border);
    border-radius: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

.pf-calendar-full-nav-btn:hover {
    background: var(--pf-primary);
    color: white;
    border-color: var(--pf-primary);
}

.pf-calendar-full-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--pf-border);
    border-radius: 8px;
    overflow: hidden;
}

.pf-calendar-full-day-header {
    background: var(--pf-bg-secondary);
    padding: 1rem 0.5rem;
    text-align: center;
    font-weight: 600;
    color: var(--pf-text);
    font-size: 0.9rem;
}

.pf-calendar-full-day {
    background: var(--pf-surface);
    min-height: 120px;
    padding: 0.5rem;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-calendar-full-day:hover {
    background: var(--pf-bg-secondary);
}

.pf-calendar-full-day.today {
    background: rgba(33, 150, 243, 0.1);
}

.pf-calendar-full-day.other-month {
    background: var(--pf-bg-secondary);
    opacity: 0.6;
}

.pf-calendar-full-day-number {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.25rem;
}

.pf-calendar-full-day.today .pf-calendar-full-day-number {
    color: var(--pf-primary);
    background: var(--pf-primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.pf-calendar-full-event {
    background: var(--pf-primary);
    color: white;
    font-size: 0.7rem;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-calendar-full-event.warning {
    background: var(--pf-warning);
}

.pf-calendar-full-event.error {
    background: var(--pf-error);
}

.pf-calendar-full-event.success {
    background: var(--pf-success);
}

/* ═══════════════════════════════════════════════════════════════
   📊 DASHBOARD REPORTS - Advanced Reporting
   ═══════════════════════════════════════════════════════════════ */

.pf-reports {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-reports-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.pf-reports-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
}

.pf-reports-controls {
    display: flex;
    gap: 0.75rem;
}

.pf-reports-export {
    background: var(--pf-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-reports-export:hover {
    background: var(--pf-primary-dark);
}

.pf-reports-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.pf-reports-table th,
.pf-reports-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--pf-border);
}

.pf-reports-table th {
    background: var(--pf-bg-secondary);
    font-weight: 600;
    color: var(--pf-text);
    font-size: 0.9rem;
}

.pf-reports-table tr:hover {
    background: rgba(33, 150, 243, 0.02);
}

.pf-reports-chart {
    margin-top: 2rem;
    height: 300px;
}

.pf-reports-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.pf-reports-summary-card {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.pf-reports-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pf-primary);
    margin-bottom: 0.25rem;
}

.pf-reports-summary-label {
    font-size: 0.9rem;
    color: var(--pf-text-secondary);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   🎮 DASHBOARD GAMES - Tic Tac Toe Implementation
   ═══════════════════════════════════════════════════════════════ */

.pf-tic-tac-toe {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.pf-tic-tac-toe-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1rem;
}

.pf-tic-tac-toe-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1rem auto;
    max-width: 200px;
}

.pf-tic-tac-toe-cell {
    aspect-ratio: 1;
    background: var(--pf-bg-secondary);
    border: 2px solid var(--pf-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pf-tic-tac-toe-cell:hover {
    background: var(--pf-primary);
    border-color: var(--pf-primary);
    color: white;
}

.pf-tic-tac-toe-cell.x::after {
    content: '×';
    color: var(--pf-primary);
}

.pf-tic-tac-toe-cell.o::after {
    content: '○';
    color: var(--pf-error);
}

.pf-tic-tac-toe-status {
    font-size: 1rem;
    color: var(--pf-text-secondary);
    margin: 1rem 0;
    min-height: 1.5rem;
}

.pf-tic-tac-toe-reset {
    background: var(--pf-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-tic-tac-toe-reset:hover {
    background: var(--pf-primary-dark);
}

/* ═══════════════════════════════════════════════════════════════
   🏆 DASHBOARD LEADERBOARD - Competitive Features
   ═══════════════════════════════════════════════════════════════ */

.pf-leaderboard {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-leaderboard-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1.5rem;
}

.pf-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pf-leaderboard-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.pf-leaderboard-item:hover {
    background: rgba(33, 150, 243, 0.05);
}

.pf-leaderboard-item.top-3 {
    background: linear-gradient(135deg, var(--pf-primary) 0%, var(--pf-primary-dark) 100%);
    color: white;
}

.pf-leaderboard-rank {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.pf-leaderboard-item.top-3 .pf-leaderboard-rank {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.pf-leaderboard-item:not(.top-3) .pf-leaderboard-rank {
    background: var(--pf-border);
    color: var(--pf-text);
}

.pf-leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pf-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--pf-text-white);
}

.pf-leaderboard-info {
    flex: 1;
}

.pf-leaderboard-name {
    font-weight: 600;
    color: var(--pf-text);
}

.pf-leaderboard-item.top-3 .pf-leaderboard-name {
    color: white;
}

.pf-leaderboard-score {
    font-size: 0.9rem;
    color: var(--pf-text-secondary);
}

.pf-leaderboard-item.top-3 .pf-leaderboard-score {
    color: rgba(255, 255, 255, 0.8);
}

.pf-leaderboard-points {
    font-weight: 700;
    color: var(--pf-primary);
    font-size: 1.1rem;
}

.pf-leaderboard-item.top-3 .pf-leaderboard-points {
    color: white;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 DASHBOARD MISSIONS - Quest System
   ═══════════════════════════════════════════════════════════════ */

.pf-missions {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-missions-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1.5rem;
}

.pf-missions-list {
    display: grid;
    gap: 1rem;
}

.pf-mission {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--pf-primary);
    transition: all 0.3s ease;
}

.pf-mission:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pf-mission.completed {
    border-left-color: var(--pf-success);
    background: rgba(76, 175, 80, 0.1);
}

.pf-mission.active {
    border-left-color: var(--pf-warning);
    background: rgba(255, 152, 0, 0.1);
}

.pf-mission-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.pf-mission-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.25rem;
}

.pf-mission-reward {
    background: var(--pf-success);
    color: white;
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.pf-mission-description {
    color: var(--pf-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pf-mission-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pf-mission-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--pf-border);
    border-radius: 3px;
    overflow: hidden;
}

.pf-mission-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pf-primary) 0%, var(--pf-primary-dark) 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pf-mission.completed .pf-mission-progress-fill {
    background: linear-gradient(90deg, var(--pf-success) 0%, var(--pf-success-dark) 100%);
}

.pf-mission-progress-text {
    font-size: 0.8rem;
    color: var(--pf-text-secondary);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   📈 DASHBOARD TRENDS - Data Trends
   ═══════════════════════════════════════════════════════════════ */

.pf-trends {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-trends-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1.5rem;
}

.pf-trends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.pf-trend {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.pf-trend-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.pf-trend-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pf-primary);
    margin-bottom: 0.25rem;
}

.pf-trend-label {
    font-size: 0.9rem;
    color: var(--pf-text-secondary);
    margin-bottom: 0.5rem;
}

.pf-trend-change {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.pf-trend-change.positive {
    color: var(--pf-success);
}

.pf-trend-change.negative {
    color: var(--pf-error);
}

.pf-trend-chart {
    height: 60px;
    margin-top: 0.5rem;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   🎨 DASHBOARD ARTICLES - Content Management
   ═══════════════════════════════════════════════════════════════ */

.pf-articles {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-articles-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1.5rem;
}

.pf-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.pf-article {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--pf-border);
}

.pf-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.pf-article-image {
    height: 150px;
    background: linear-gradient(135deg, var(--pf-primary) 0%, var(--pf-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
}

.pf-article-content {
    padding: 1rem;
}

.pf-article-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.pf-article-excerpt {
    color: var(--pf-text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.pf-article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--pf-text-muted);
}

.pf-article-author {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pf-article-date {
    color: var(--pf-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   💬 DASHBOARD FEEDBACK - User Feedback System
   ═══════════════════════════════════════════════════════════════ */

.pf-feedback {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--pf-border);
}

.pf-feedback-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 1.5rem;
}

.pf-feedback-form {
    margin-bottom: 2rem;
}

.pf-feedback-rating {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pf-feedback-star {
    font-size: 1.5rem;
    color: var(--pf-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-feedback-star:hover,
.pf-feedback-star.active {
    color: var(--pf-warning);
    transform: scale(1.1);
}

.pf-feedback-textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    border: 2px solid var(--pf-border);
    border-radius: 8px;
    background: var(--pf-surface);
    color: var(--pf-text);
    font-size: 0.9rem;
    resize: vertical;
    transition: all 0.3s ease;
}

.pf-feedback-textarea:focus {
    border-color: var(--pf-primary);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    outline: none;
}

.pf-feedback-submit {
    background: var(--pf-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-feedback-submit:hover {
    background: var(--pf-primary-dark);
}

.pf-feedback-list {
    display: grid;
    gap: 1rem;
}

.pf-feedback-item {
    background: var(--pf-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--pf-primary);
}

.pf-feedback-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pf-feedback-item-rating {
    color: var(--pf-warning);
    font-size: 0.9rem;
}

.pf-feedback-item-date {
    font-size: 0.8rem;
    color: var(--pf-text-muted);
}

.pf-feedback-item-text {
    color: var(--pf-text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   🎪 DASHBOARD WIDGETS - Additional Widget Types
   ═══════════════════════════════════════════════════════════════ */

.pf-widget-weather {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.pf-weather-temp {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.pf-weather-condition {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.pf-weather-details {
    display: flex;
    justify-content: space-around;
    font-size: 0.9rem;
}

.pf-widget-quote {
    background: linear-gradient(135deg, var(--pf-success) 0%, var(--pf-success-dark) 100%);
    color: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    position: relative;
}

.pf-quote-text {
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 1rem;
    position: relative;
}

.pf-quote-text::before,
.pf-quote-text::after {
    content: '"';
    font-size: 2rem;
    position: absolute;
    top: -10px;
}

.pf-quote-text::before {
    left: -20px;
}

.pf-quote-text::after {
    right: -20px;
}

.pf-quote-author {
    font-weight: 600;
    opacity: 0.9;
}

.pf-widget-news {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--pf-border);
}

.pf-news-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--pf-border);
}

.pf-news-item:last-child {
    border-bottom: none;
}

.pf-news-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.pf-news-time {
    font-size: 0.8rem;
    color: var(--pf-text-muted);
}

.pf-widget-tasks {
    background: var(--pf-surface);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--pf-border);
}

.pf-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.pf-task-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--pf-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-task-checkbox.checked {
    background: var(--pf-success);
    border-color: var(--pf-success);
}

.pf-task-checkbox.checked::after {
    content: '✓';
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-task-text {
    flex: 1;
    color: var(--pf-text);
}

.pf-task-text.completed {
    text-decoration: line-through;
    color: var(--pf-text-muted);
}

.pf-widget-birthdays {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
}

.pf-birthday-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.pf-birthday-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.pf-birthday-info {
    flex: 1;
}

.pf-birthday-name {
    font-weight: 600;
}

.pf-birthday-date {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════
   🎨 DASHBOARD THEMES - Extended Theme Support
   ═══════════════════════════════════════════════════════════════ */

[data-theme="blue"] {
    --pf-primary: #2196f3;
    --pf-primary-dark: #1976d2;
    --pf-primary-light: #64b5f6;
}

[data-theme="green"] {
    --pf-primary: #4caf50;
    --pf-primary-dark: #388e3c;
    --pf-primary-light: #81c784;
}

[data-theme="purple"] {
    --pf-primary: #9c27b0;
    --pf-primary-dark: #7b1fa2;
    --pf-primary-light: #ba68c8;
}

[data-theme="orange"] {
    --pf-primary: #ff9800;
    --pf-primary-dark: #f57c00;
    --pf-primary-light: #ffb74d;
}

[data-theme="red"] {
    --pf-primary: #f44336;
    --pf-primary-dark: #d32f2f;
    --pf-primary-light: #ef5350;
}

[data-theme="teal"] {
    --pf-primary: #009688;
    --pf-primary-dark: #00796b;
    --pf-primary-light: #4db6ac;
}

[data-theme="pink"] {
    --pf-primary: #e91e63;
    --pf-primary-dark: #c2185b;
    --pf-primary-light: #f48fb1;
}

[data-theme="indigo"] {
    --pf-primary: #3f51b5;
    --pf-primary-dark: #303f9f;
    --pf-primary-light: #7986cb;
}

[data-theme="cyan"] {
    --pf-primary: #00bcd4;
    --pf-primary-dark: #0097a7;
    --pf-primary-light: #4dd0e1;
}

[data-theme="lime"] {
    --pf-primary: #cddc39;
    --pf-primary-dark: #afb42b;
    --pf-primary-light: #e6ee9c;
}

/* ═══════════════════════════════════════════════════════════════
   📱 MOBILE ENHANCEMENTS - Advanced Mobile Features
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .pf-dashboard-main {
        padding: 0.5rem 0.25rem 80px 0.25rem;
    }

    .pf-module-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .pf-widget-chart,
    .pf-widget-calendar,
    .pf-widget-timeline,
    .pf-form-extended,
    .pf-modal {
        padding: 1rem;
    }

    .pf-notifications {
        left: 0.25rem;
        right: 0.25rem;
        top: 0.25rem;
    }

    .pf-customizer {
        width: 280px;
        right: -280px;
    }

    .pf-calendar-full-view {
        font-size: 0.8rem;
    }

    .pf-calendar-full-day {
        min-height: 80px;
        padding: 0.25rem;
    }

    .pf-leaderboard-item {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .pf-leaderboard-rank,
    .pf-leaderboard-avatar {
        width: 32px;
        height: 32px;
    }

    .pf-tic-tac-toe-board {
        max-width: 150px;
    }

    .pf-tic-tac-toe-cell {
        font-size: 1.5rem;
    }
}

/* Touch gesture support */
@media (hover: none) {
    .pf-module-card {
        transform: none;
    }

    .pf-nav-filter,
    .pf-chart-control-btn,
    .pf-form-file-label {
        transition: none;
    }

    /* Larger touch targets for mobile */
    .pf-modal-close,
    .pf-notification-close,
    .pf-customizer-toggle {
        min-width: 48px;
        min-height: 48px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY ENHANCEMENTS - Advanced A11y Features
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pf-notification,
    .pf-modal-overlay,
    .pf-loading-spinner,
    .pf-loading-dots,
    .pf-loading-skeleton {
        animation: none !important;
        transition: none !important;
    }

    .pf-animate-fade-in-up,
    .pf-animate-fade-in-down,
    .pf-animate-fade-in-left,
    .pf-animate-fade-in-right,
    .pf-animate-scale-in,
    .pf-animate-bounce-in,
    .pf-animate-stagger > * {
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .pf-modal-overlay {
        background: rgba(0, 0, 0, 0.95);
    }

    .pf-notification {
        border-width: 3px;
    }

    .pf-form-input,
    .pf-form-select,
    .pf-form-textarea,
    .pf-form-file-label {
        border-width: 3px;
    }

    .pf-widget-weather,
    .pf-widget-quote {
        border: 2px solid white;
    }
}

/* Focus management */
.pf-skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--pf-primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    transition: top 0.3s ease;
}

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

.pf-focus-trap:focus-within .pf-modal-content {
    outline: 2px solid var(--pf-primary);
    outline-offset: 2px;
}

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

.pf-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--pf-primary);
    color: white;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   🖨️ PRINT OPTIMIZATIONS - Advanced Print Styles
   ═══════════════════════════════════════════════════════════════ */

@media print {
    .pf-notifications,
    .pf-modal-overlay,
    .pf-dashboard-footer,
    .pf-customizer,
    .pf-nav-search,
    .pf-nav-filters {
        display: none !important;
    }

    .pf-dashboard-main {
        padding: 0 !important;
    }

    .pf-module-card,
    .pf-widget-chart,
    .pf-widget-calendar,
    .pf-widget-timeline,
    .pf-form-extended,
    .pf-modal,
    .pf-calendar-full,
    .pf-reports,
    .pf-analytics-dashboard,
    .pf-workflow,
    .pf-goals,
    .pf-achievements,
    .pf-missions,
    .pf-trends,
    .pf-articles,
    .pf-feedback,
    .pf-leaderboard,
    .pf-tic-tac-toe {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .pf-widget-chart-canvas,
    .pf-analytics-chart,
    .pf-reports-chart,
    .pf-trend-chart {
        display: none;
    }

    .pf-widget-chart::after,
    .pf-analytics-chart::after,
    .pf-reports-chart::after {
        content: '[Chart würde hier angezeigt werden]';
        display: block;
        text-align: center;
        padding: 2rem;
        background: #f5f5f5;
        border: 1px dashed #ccc;
        margin: 1rem 0;
    }

    .pf-calendar-full-day {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .pf-form-extended {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .pf-articles-grid {
        display: block;
    }

    .pf-article {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🔧 DEVELOPMENT UTILITIES - Debug & Testing Tools
   ═══════════════════════════════════════════════════════════════ */

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

.pf-debug-outline-thick * {
    outline: 2px solid red !important;
}

.pf-debug-grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    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;
    pointer-events: none;
    z-index: 9999;
}

.pf-debug-info {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    z-index: 10000;
    max-width: 300px;
}

.pf-debug-breakpoint::before {
    content: 'Breakpoint: ' attr(data-breakpoint);
    position: fixed;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10000;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 PERFORMANCE MONITORING - Real-time Metrics
   ═══════════════════════════════════════════════════════════════ */

.pf-performance-monitor {
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 11px;
    font-family: monospace;
    z-index: 10000;
    opacity: 0.9;
}

.pf-performance-monitor:hover {
    opacity: 1;
}

.pf-performance-metric {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.pf-performance-metric:last-child {
    margin-bottom: 0;
}

.pf-performance-label {
    color: var(--pf-text-secondary);
}

.pf-performance-value {
    color: var(--pf-text);
    font-weight: 600;
}

.pf-performance-value.good {
    color: var(--pf-success);
}

.pf-performance-value.warning {
    color: var(--pf-warning);
}

.pf-performance-value.error {
    color: var(--pf-error);
}

/* ═══════════════════════════════════════════════════════════════
   🎨 DASHBOARD ANIMATIONS - Advanced Animation Library
   ═══════════════════════════════════════════════════════════════ */

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

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

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

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

@keyframes pf-zoom-in {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pf-rotate-in {
    from {
        transform: rotate(-180deg) scale(0.5);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes pf-elastic {
    0% {
        transform: scale(0);
    }
    55% {
        transform: scale(1.15);
    }
    65% {
        transform: scale(0.95);
    }
    75% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pf-animate-slide-in-left {
    animation: pf-slide-in-left 0.6s ease-out;
}

.pf-animate-slide-in-right {
    animation: pf-slide-in-right 0.6s ease-out;
}

.pf-animate-slide-in-top {
    animation: pf-slide-in-top 0.6s ease-out;
}

.pf-animate-slide-in-bottom {
    animation: pf-slide-in-bottom 0.6s ease-out;
}

.pf-animate-zoom-in {
    animation: pf-zoom-in 0.6s ease-out;
}

.pf-animate-rotate-in {
    animation: pf-rotate-in 0.6s ease-out;
}

.pf-animate-elastic {
    animation: pf-elastic 0.8s ease-out;
}

/* ═══════════════════════════════════════════════════════════════
   📊 DASHBOARD CHARTS - Advanced Chart Styles
   ═══════════════════════════════════════════════════════════════ */

.pf-chart-tooltip {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
}

.pf-chart-tooltip-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 4px;
}

.pf-chart-tooltip-value {
    color: var(--pf-primary);
    font-weight: 600;
}

.pf-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.pf-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--pf-text-secondary);
}

.pf-chart-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.pf-chart-responsive {
    width: 100%;
    height: auto;
    min-height: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   🎪 DASHBOARD INTERACTIONS - Advanced Interactive Elements
   ═══════════════════════════════════════════════════════════════ */

.pf-interactive-card {
    position: relative;
    overflow: hidden;
}

.pf-interactive-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.pf-interactive-card:hover::before {
    left: 100%;
}

/* CSS-only Ripple-Effekt für statische Elemente (umbenennen zu .pf-ripple-static) */
.pf-ripple-static {
    position: relative;
    overflow: hidden;
}

.pf-ripple-static::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.pf-ripple-static:active::before {
    width: 300px;
    height: 300px;
}

.pf-hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pf-hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.pf-glow-on-hover {
    transition: box-shadow 0.3s ease;
}

.pf-glow-on-hover:hover {
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.3);
}

.pf-shimmer {
    position: relative;
    overflow: hidden;
}

.pf-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: pf-shimmer 2s infinite;
}

@keyframes pf-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ═══════════════════════════════════════════════════════════════
   🔒 DASHBOARD SECURITY - Security Indicators
   ═══════════════════════════════════════════════════════════════ */

.pf-security-indicator {
    position: fixed;
    top: 10px;
    left: 10px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10000;
    opacity: 0.8;
}

.pf-security-indicator:hover {
    opacity: 1;
}

.pf-security-indicator.secure {
    border-color: var(--pf-success);
    color: var(--pf-success);
}

.pf-security-indicator.warning {
    border-color: var(--pf-warning);
    color: var(--pf-warning);
}

.pf-security-indicator.error {
    border-color: var(--pf-error);
    color: var(--pf-error);
}

.pf-security-indicator-icon {
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   🌐 DASHBOARD CONNECTIVITY - Network Status
   ═══════════════════════════════════════════════════════════════ */

.pf-connectivity-status {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10000;
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pf-connectivity-status:hover {
    opacity: 1;
}

.pf-connectivity-status.online {
    border-color: var(--pf-success);
    color: var(--pf-success);
}

.pf-connectivity-status.offline {
    border-color: var(--pf-error);
    color: var(--pf-error);
}

.pf-connectivity-status.slow {
    border-color: var(--pf-warning);
    color: var(--pf-warning);
}

.pf-connectivity-icon {
    font-size: 12px;
    animation: pf-pulse 2s infinite;
}

/* ═══════════════════════════════════════════════════════════════
   💾 DASHBOARD STORAGE - Local Storage Indicators
   ═══════════════════════════════════════════════════════════════ */

.pf-storage-indicator {
    position: fixed;
    bottom: 90px;
    right: 10px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11px;
    z-index: 10000;
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pf-storage-indicator:hover {
    opacity: 1;
}

.pf-storage-bar {
    width: 100px;
    height: 4px;
    background: var(--pf-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.pf-storage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pf-success) 0%, var(--pf-warning) 70%, var(--pf-error) 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 DASHBOARD TARGETS - Goal Achievement Animations
   ═══════════════════════════════════════════════════════════════ */

@keyframes pf-celebration {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(1.1);
    }
}

@keyframes pf-confetti {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.pf-goal-achieved {
    animation: pf-celebration 0.6s ease-out;
}

.pf-goal-achieved::before {
    content: '🎉';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    animation: pf-bounce-in 0.6s ease-out;
}

.pf-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9999;
}

.pf-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--pf-primary);
    animation: pf-confetti 3s linear infinite;
}

.pf-confetti:nth-child(odd) {
    background: var(--pf-success);
}

.pf-confetti:nth-child(3n) {
    background: var(--pf-warning);
}

.pf-confetti:nth-child(5n) {
    background: var(--pf-error);
}

/* ═══════════════════════════════════════════════════════════════
   🎨 DASHBOARD PATTERNS - Background Patterns
   ═══════════════════════════════════════════════════════════════ */

.pf-pattern-dots {
    background-image: radial-gradient(circle, var(--pf-border) 1px, transparent 1px);
    background-size: 20px 20px;
}

.pf-pattern-grid {
    background-image:
        linear-gradient(var(--pf-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--pf-border) 1px, transparent 1px);
    background-size: 20px 20px;
}

.pf-pattern-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(33, 150, 243, 0.05) 10px,
        rgba(33, 150, 243, 0.05) 20px
    );
}

.pf-pattern-waves {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e0e0e0' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.pf-pattern-hexagons {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='24' viewBox='0 0 14 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e0e0e0' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpolygon points='7 3 13 7 13 17 7 21 1 17 1 7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   🎪 DASHBOARD EFFECTS - Special Visual Effects
   ═══════════════════════════════════════════════════════════════ */

.pf-glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pf-neon-effect {
    box-shadow:
        0 0 5px var(--pf-primary),
        0 0 10px var(--pf-primary),
        0 0 15px var(--pf-primary),
        0 0 20px var(--pf-primary);
}

.pf-rainbow-border {
    background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
    background-size: 400% 400%;
    animation: pf-rainbow 3s ease infinite;
    padding: 2px;
}

@keyframes pf-rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.pf-rainbow-border > * {
    background: var(--pf-surface);
    border-radius: inherit;
}

.pf-floating {
    animation: pf-floating 3s ease-in-out infinite;
}

@keyframes pf-floating {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.pf-typing {
    border-right: 2px solid var(--pf-primary);
    animation: pf-typing 1s steps(40, end), pf-blink-caret 0.75s step-end infinite;
}

@keyframes pf-typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes pf-blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--pf-primary); }
}

/* ═══════════════════════════════════════════════════════════════
   📱 PWA FEATURES - Progressive Web App Support
   ═══════════════════════════════════════════════════════════════ */

.pf-pwa-install-prompt {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pf-pwa-install-icon {
    font-size: 2rem;
}

.pf-pwa-install-content {
    flex: 1;
}

.pf-pwa-install-title {
    font-weight: 600;
    color: var(--pf-text);
    margin-bottom: 0.25rem;
}

.pf-pwa-install-description {
    color: var(--pf-text-secondary);
    font-size: 0.9rem;
}

.pf-pwa-install-actions {
    display: flex;
    gap: 0.5rem;
}

.pf-pwa-install-later {
    background: var(--pf-bg-secondary);
    border: 1px solid var(--pf-border);
    color: var(--pf-text);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-pwa-install-later:hover {
    background: var(--pf-border);
}

.pf-pwa-install-now {
    background: var(--pf-primary);
    border: 1px solid var(--pf-primary);
    color: white;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-pwa-install-now:hover {
    background: var(--pf-primary-dark);
}

.pf-pwa-update-available {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pf-primary);
    color: white;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pf-pwa-update-available:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   📊 DASHBOARD CHART WIDGET - Neue Komponente
   ═══════════════════════════════════════════════════════════════ */

.pf-dashboard-chart-container {
    background: var(--pf-dashboard-bg-primary, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--pf-dashboard-border, rgba(255, 255, 255, 0.2));
    box-shadow: 0 4px 15px var(--pf-dashboard-shadow, rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

.pf-dashboard-chart-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--pf-dashboard-shadow-hover, rgba(0, 0, 0, 0.15));
}

.pf-dashboard-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pf-dashboard-border-light, rgba(0, 0, 0, 0.1));
}

.pf-dashboard-chart-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pf-dashboard-text-primary, #2c3e50);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pf-dashboard-chart-controls {
    display: flex;
    gap: 0.5rem;
}

.pf-dashboard-chart-control {
    background: var(--pf-dashboard-bg-secondary, rgba(248, 250, 252, 0.8));
    border: 1px solid var(--pf-dashboard-border, rgba(0, 0, 0, 0.1));
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pf-dashboard-text-secondary, #5a6c7d);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pf-dashboard-chart-control:hover {
    background: var(--pf-dashboard-bg-hover, rgba(241, 245, 249, 0.9));
    border-color: var(--pf-dashboard-border-hover, rgba(0, 0, 0, 0.2));
    transform: translateY(-1px);
}

.pf-dashboard-chart-control.active {
    background: var(--pf-dashboard-accent-primary, #3498db);
    border-color: var(--pf-dashboard-accent-primary, #3498db);
    color: white;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.pf-dashboard-chart {
    position: relative;
    height: 300px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 DASHBOARD END - Final Styles
   ═══════════════════════════════════════════════════════════════ */

.pf-dashboard-complete {
    /* This class indicates that all dashboard styles have been loaded */
    opacity: 1;
    visibility: visible;
}

/* Ensure all dashboard elements are visible after styles load */
.pf-dashboard * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   📚 DASHBOARD DOCUMENTATION - Inline Comments for Maintenance
   ═══════════════════════════════════════════════════════════════ */

/*
DASHBOARD CSS ARCHITECTURE:

1. CSS Variables: Centralized theming system with light/dark mode support
2. Layout System: Flexbox and Grid-based responsive layouts
3. Component Library: Reusable UI components with consistent styling
4. Animation System: Performance-optimized animations with reduced-motion support
5. Accessibility: WCAG 2.1 compliant with keyboard navigation and screen reader support
6. Responsive Design: Mobile-first approach with progressive enhancement
7. Theme System: Dynamic theming with CSS custom properties
8. Performance: GPU acceleration and optimized rendering
9. Print Support: Print-friendly styles for documentation
10. PWA Features: Progressive Web App support and install prompts

USAGE:
- Add 'pf-dashboard' class to the main container
- Use component classes like 'pf-module-card', 'pf-widget-chart', etc.
- Apply theme with data-theme="light|dark|auto" on html element
- Use utility classes for common styling needs

MAINTENANCE:
- Keep CSS variables at the top for easy theming
- Use consistent naming conventions (pf- prefix)
- Test all components across different screen sizes
- Ensure accessibility compliance with automated tools
- Document any new components in this comment block
*/

/* End of PF_dashboard.css - Comprehensive Dashboard Styling Complete */

/* 
    LOGIN SUCCESS NOTIFICATION
    */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pf-dashboard-notification {
    animation: slideIn 0.3s ease-out;
}