/* /Components/EnergyChart.razor.rz.scp.css */
/**
 * EnergyChart Component Stylesheet
 * 
 * This stylesheet provides comprehensive styling for the EnergyChart Blazor component,
 * including responsive design, chart containers, loading states, and interactive elements.
 * 
 * Features:
 * - Responsive chart containers with fixed aspect ratios
 * - Smooth transitions and animations
 * - Mobile-optimized layouts
 * - Loading state overlays
 * - Chart-specific styling for period and main charts
 * - Accessibility-compliant color contrasts
 * 
 * @author EnergyTracker Development Team
 * @version 1.0
 * @since 2024
 */

/* ==========================================================================
   Main Container Styling
   ========================================================================== */

/**
 * Primary container for the energy chart component
 * Provides base styling with rounded corners, border, and smooth transitions
 */
.energy-chart-container[b-fkebxvj541] {
    height: 90vh; /* oder 100% der Parent-Höhe */
    display: flex;
    flex-direction: column;
}


/* ==========================================================================
   Header Section Styling
   ========================================================================== */

/**
 * Chart header containing title and control buttons
 * Uses flexbox for optimal alignment and spacing
 */
.chart-header[b-fkebxvj541],
.time-navigation[b-fkebxvj541]{
    flex-shrink: 0;
    margin-bottom: 10px;
}

/**
 * Chart title styling
 * Ensures consistent typography and spacing
 */
.chart-title[b-fkebxvj541] {
    margin: 0;
    font-weight: 500;
    color: #495057;
}

/**
 * Chart title in maximized state (Legacy)
 * Overrides color for dark theme compatibility
 */
.maximized .chart-title[b-fkebxvj541] {
    color: white;
}

/* ==========================================================================
   Control Buttons Styling
   ========================================================================== */

/**
 * Container for chart control buttons
 * Provides consistent spacing between control elements
 */
.chart-controls[b-fkebxvj541] {
    display: flex;
    gap: 0.25rem;
}

/**
 * Individual control button styling
 * Ensures consistent size and spacing for all control buttons
 */
.chart-controls .btn[b-fkebxvj541] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/**
 * Control button styling in maximized state (Legacy)
 * Applies semi-transparent background for dark theme integration
 */
.maximized .chart-controls .btn[b-fkebxvj541] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/**
 * Control button hover state in maximized mode (Legacy)
 * Provides visual feedback for user interactions
 */
.maximized .chart-controls .btn:hover[b-fkebxvj541] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Chart Content Area
   ========================================================================== */

/**
 * Main content area containing chart containers
 * Provides base padding and positioning for chart elements
 */
.chart-content[b-fkebxvj541] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;  /* Scroll hier */
    overflow-x: hidden;
    align-items: center;
}

/* ==========================================================================
   Individual Chart Container Styling - RESPONSIVE
   ========================================================================== */

/**
 * Base styling for both period and main chart containers
 * Provides consistent appearance with subtle backgrounds and borders
 * JETZT MIT RESPONSIVE BREITEN FÜR ALLE BILDSCHIRMGRÖSZEN
 */
.period-chart-container[b-fkebxvj541],
.main-chart-container[b-fkebxvj541] {
    width: 90% !important; /* 90% der Fensterbreite für alle Bildschirmgrößen */
    max-width: 1920px !important; /* Maximale Breite für sehr große Bildschirme */
    margin: 0 auto 1rem auto !important; /* Zentriert die Container */
    box-sizing: border-box;
    position: relative; /* Wichtig für Chart.js responsive Verhalten */
}

/**
 * Period chart container with fixed height
 * Optimized for displaying consumption difference data
 */
.period-chart-container[b-fkebxvj541] {
    height: 300px !important;
}

/**
 * Main chart container with larger fixed height
 * Provides more space for cumulative meter reading visualization
 */
.main-chart-container[b-fkebxvj541] {
    height: 400px !important;
    margin-bottom: 15px;
}

/* ==========================================================================
   Chart Title Styling
   ========================================================================== */

/**
 * Styling for individual chart titles
 * Provides consistent typography and visual hierarchy
 */
.period-chart-title[b-fkebxvj541],
.main-chart-title[b-fkebxvj541] {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

/**
 * Icon styling within chart titles
 * Ensures consistent spacing and subtle color contrast
 */
.period-chart-title i[b-fkebxvj541],
.main-chart-title i[b-fkebxvj541] {
    margin-right: 0.5rem;
    color: #6c757d;
}

/* ==========================================================================
   Canvas Element Styling
   ========================================================================== */

/**
 * Canvas elements within chart containers
 * Ensures responsive sizing while maintaining aspect ratios
 */
.period-chart-container > canvas[b-fkebxvj541],
.main-chart-container > canvas[b-fkebxvj541] {
    width: 100% !important; /* Canvas nimmt volle Container-Breite */
    height: auto !important; /* Höhe automatisch basierend auf Aspect Ratio */
    max-width: 100% !important;
    display: block !important; /* Entfernt default inline-block spacing */
    margin: 0 auto 2rem !important; /* Zentriert das Canvas im Container */
}
.main-chart-container[b-fkebxvj541] {
    margin-top: 2rem !important;
}
/**
 * Alternative Canvas-Selektion für spezifische IDs
 */
canvas[id^="energyChart_"][b-fkebxvj541],
canvas[id^="periodChart_"][b-fkebxvj541] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
}

/**
 * General canvas styling for chart content
 * Provides fallback responsive behavior
 */
.chart-content canvas[b-fkebxvj541] {
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   Loading States and Overlays
   ========================================================================== */

/**
 * Loading indicator positioning and styling
 * Centers loading spinner with semi-transparent overlay
 */
.chart-loading[b-fkebxvj541] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255,255,255,0.95);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: center;
}

/**
 * Loading text styling
 * Provides consistent typography for loading messages
 */
.chart-loading p[b-fkebxvj541] {
    margin-top: 1rem;
    color: #6c757d;
}

/**
 * Loading indicator in maximized state (Legacy)
 * Adjusts styling for dark theme compatibility
 */
.maximized .chart-loading[b-fkebxvj541] {
    height: auto;
    color: #2c3e50;
}

/**
 * Alternative loading overlay implementation
 * Full-container overlay with centered content
 */
.chart-loading-overlay[b-fkebxvj541] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 0.5rem;
}

/* ==========================================================================
   Legacy Maximization Features
   ========================================================================== */

/**
 * Maximization overlay (Legacy - No longer used)
 * Provided click-to-close functionality for maximized state
 */
.maximized-overlay[b-fkebxvj541] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: -1;
}

/**
 * Maximize animation keyframes (Legacy)
 * Smooth transition effect for maximization
 */
@keyframes maximizeChart-b-fkebxvj541 {
    from {
        transform: scale(0.9);
        opacity: 0.8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/**
 * Animation application for maximized state (Legacy)
 * Provides smooth visual transition
 */
.maximized[b-fkebxvj541] {
    animation: maximizeChart-b-fkebxvj541 0.3s ease-out;
}

/* ==========================================================================
   Responsive Design - Mobile Optimization
   ========================================================================== */

/**
 * Mobile-specific styling adjustments
 * Optimizes layout and sizing for smaller screens
 * 
 * Breakpoint: 768px and below (tablets and mobile devices)
 */
@media (max-width: 768px) {
    /**
     * Reduced header padding for mobile
     * Conserves screen real estate
     */
    .chart-header[b-fkebxvj541] {
        padding: 0.75rem;
    }

    /**
     * Reduced content padding for mobile
     * Maximizes chart viewing area
     */
    .chart-content[b-fkebxvj541] {
        padding: 0.75rem;
    }

    /**
     * Smaller chart title for mobile
     * Improves readability on small screens
     */
    .chart-title[b-fkebxvj541] {
        font-size: 1rem;
    }

    /**
     * Compressed control button sizing
     * Optimizes touch interaction areas
     */
    .chart-controls .btn[b-fkebxvj541] {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
    }

    /**
     * Mobile: Chart Container nutzen fast die volle Breite
     */
    .period-chart-container[b-fkebxvj541],
    .main-chart-container[b-fkebxvj541] {
        width: 95% !important; /* Etwas mehr Platz auf mobilen Geräten */
        margin: 0 auto 0.75rem auto !important;
    }

    /**
     * Reduced period chart height for mobile
     * Optimizes vertical space usage
     */
    .period-chart-container[b-fkebxvj541] {
        height: 250px !important;
    }

    /**
     * Reduced main chart height for mobile
     * Balances visibility with screen space
     */
    .main-chart-container[b-fkebxvj541] {
        height: 300px !important;
    }

    /**
     * Maximized main chart height for mobile (Legacy)
     * Enhanced for full-screen mobile experience
     */
    .maximized .main-chart-container[b-fkebxvj541] {
        height: 350px !important;
    }

    /**
     * Reduced chart container padding for mobile
     * Maximizes chart area within containers
     */
    .period-chart-container[b-fkebxvj541],
    .main-chart-container[b-fkebxvj541] {
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    /**
     * Sehr kleine Bildschirme: Maximale Breite nutzen
     */
    .period-chart-container[b-fkebxvj541],
    .main-chart-container[b-fkebxvj541] {
        width: 98% !important;
        margin: 0 auto 0.5rem auto !important;
    }
}

/* ==========================================================================
   Horizontales Layout für Chart Header und Navigation
   ========================================================================== */

/**
 * Kombinierter Header Container - alle Elemente in einer Zeile
 */
.chart-header-combined[b-fkebxvj541] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap; /* Für mobile Geräte */
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

/**
 * Titel Sektion
 */
.chart-title-section[b-fkebxvj541] {
    flex-shrink: 0;
}

.chart-title-section .chart-title[b-fkebxvj541] {
    margin: 0;
    font-weight: 500;
    color: #495057;
    font-size: 1.1rem;
}

/**
 * Zeitraum Sektion
 */
.time-period-section[b-fkebxvj541] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.time-period-section .control-label[b-fkebxvj541] {
    margin: 0;
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}

.time-period-section .period-buttons[b-fkebxvj541] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.time-period-section .period-buttons .btn[b-fkebxvj541] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/**
 * Position Sektion
 */
.time-position-section[b-fkebxvj541] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.time-position-section .control-label[b-fkebxvj541] {
    margin: 0;
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}

.time-position-section .position-controls[b-fkebxvj541] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-position-section .position-controls .btn[b-fkebxvj541] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.time-position-section .position-info[b-fkebxvj541] {
    white-space: nowrap;
    margin: 0 0.25rem;
}

/**
 * Chart Controls Sektion (Refresh Button)
 */
.chart-controls-section[b-fkebxvj541] {
    margin-left: auto; /* Schiebt den Button nach rechts */
    flex-shrink: 0;
}

.chart-controls-section .btn[b-fkebxvj541] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* ==========================================================================
   Mobile Responsive Design
   ========================================================================== */

/**
 * Tablet und kleine Desktop-Bildschirme
 */
@media (max-width: 992px) {
    .chart-header-combined[b-fkebxvj541] {
        gap: 1rem;
    }

    .time-period-section[b-fkebxvj541],
    .time-position-section[b-fkebxvj541] {
        gap: 0.5rem;
    }

    .time-period-section .period-buttons .btn[b-fkebxvj541],
    .time-position-section .position-controls .btn[b-fkebxvj541] {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
    }
}

/**
 * Mobile Geräte - Stacked Layout
 */
@media (max-width: 768px) {
    .chart-header-combined[b-fkebxvj541] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .chart-title-section[b-fkebxvj541] {
        text-align: center;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 0.5rem;
    }

    .time-period-section[b-fkebxvj541],
    .time-position-section[b-fkebxvj541] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .time-period-section .control-label[b-fkebxvj541],
    .time-position-section .control-label[b-fkebxvj541] {
        text-align: center;
    }

    .time-period-section .period-buttons[b-fkebxvj541] {
        justify-content: center;
    }

    .time-position-section .position-controls[b-fkebxvj541] {
        justify-content: center;
    }

    .chart-controls-section[b-fkebxvj541] {
        margin-left: 0;
        text-align: center;
        border-top: 1px solid #dee2e6;
        padding-top: 0.5rem;
    }
}

/**
 * Sehr kleine Bildschirme
 */
@media (max-width: 480px) {
    .chart-header-combined[b-fkebxvj541] {
        padding: 0.5rem;
    }

    .time-period-section .period-buttons[b-fkebxvj541] {
        gap: 0.1rem;
    }

    .time-period-section .period-buttons .btn[b-fkebxvj541] {
        padding: 0.15rem 0.3rem;
        font-size: 0.75rem;
    }

    .time-position-section .position-controls .btn[b-fkebxvj541] {
        padding: 0.15rem 0.3rem;
        font-size: 0.75rem;
    }

    .time-position-section .position-info[b-fkebxvj541] {
        font-size: 0.8rem;
    }
}
/* ==========================================================================
   End of Stylesheet
   ========================================================================== */
/* /Components/EnergyCreate.razor.rz.scp.css */
/**
 * EnergyCreate Component Stylesheet
 * 
 * This stylesheet provides comprehensive styling for the EnergyCreate Blazor component,
 * which handles the creation of new energy log entries through a validated form interface.
 * 
 * Features:
 * - Modern gradient header design with engaging visual appeal
 * - Responsive grid layout for optimal form field arrangement
 * - Enhanced form controls with focus states and transitions
 * - Interactive button styling with hover effects
 * - Informational panel with structured content display
 * - Mobile-first responsive design approach
 * - Accessibility-compliant color contrasts and focus indicators
 * 
 * @author EnergyTracker Development Team
 * @version 1.0
 * @since 2024
 */

/* ==========================================================================
   Main Container Styling
   ========================================================================== */

/**
 * Primary container for the energy creation form component
 * Removes default padding to allow full-width header design
 */
.energy-create-container[b-1wqsg10xc5] {
    padding: 0;
}

/* ==========================================================================
   Header Section Styling
   ========================================================================== */

/**
 * Header section with gradient background and centered content
 * Creates an engaging visual entry point for the form
 * Uses CSS gradients for modern, professional appearance
 */
.create-header[b-1wqsg10xc5] {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 1.5rem;
    text-align: center;
}

/**
 * Header title styling
 * Ensures consistent typography and removes default margins
 */
.create-header h4[b-1wqsg10xc5] {
    margin: 0;
    font-weight: 500;
}

/**
 * Header icon styling
 * Provides consistent spacing between icon and text
 */
.create-header i[b-1wqsg10xc5] {
    margin-right: 0.5rem;
}

/* ==========================================================================
   Content Area Styling
   ========================================================================== */

/**
 * Main content area containing the form and informational elements
 * Provides generous padding for comfortable form interaction
 */
.create-content[b-1wqsg10xc5] {
    padding: 2rem;
}

/* ==========================================================================
   Form Layout and Structure
   ========================================================================== */

/**
 * Grid-based form row layout for optimal field arrangement
 * Uses CSS Grid for responsive two-column layout
 * Automatically collapses to single column on mobile devices
 */
.form-row[b-1wqsg10xc5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

/**
 * Individual form group container
 * Uses flexbox for vertical alignment of label and input
 */
.form-group[b-1wqsg10xc5] {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Form Labels and Typography
   ========================================================================== */

/**
 * Form label styling with enhanced typography
 * Includes icon support and consistent spacing
 * Uses flexbox for proper icon-text alignment
 */
.form-label[b-1wqsg10xc5] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #495057;
    display: flex;
    align-items: center;
}

/**
 * Icon styling within form labels
 * Ensures consistent spacing and sizing for better visual hierarchy
 */
.form-label i[b-1wqsg10xc5] {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* ==========================================================================
   Form Controls and Input Styling
   ========================================================================== */

/**
 * Enhanced form control styling for large input fields
 * Includes custom border, padding, and smooth transitions
 * Optimized for touch interaction on mobile devices
 */
.form-control-lg[b-1wqsg10xc5] {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    border-radius: 0.5rem;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}

/**
 * Focus state styling for form controls
 * Provides clear visual feedback with brand-colored border and shadow
 * Ensures accessibility compliance for keyboard navigation
 */
.form-control-lg:focus[b-1wqsg10xc5] {
    border-color: #28a745;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/* ==========================================================================
   Form Actions and Button Styling
   ========================================================================== */

/**
 * Container for form action buttons
 * Uses flexbox for centered alignment with consistent spacing
 */
.form-actions[b-1wqsg10xc5] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

/**
 * Enhanced button styling within form actions
 * Includes minimum width for consistent button sizes
 * Features smooth hover transitions for improved user experience
 */
.form-actions .btn[b-1wqsg10xc5] {
    min-width: 150px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

/**
 * Interactive hover effects for form action buttons
 * Provides subtle lift effect and shadow for engaging user feedback
 * Enhances perceived responsiveness of the interface
 */
.form-actions .btn:hover[b-1wqsg10xc5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/**
 * Icon styling within form action buttons
 * Ensures consistent spacing between icons and button text
 */
.form-actions .btn i[b-1wqsg10xc5] {
    margin-right: 0.5rem;
}

/* ==========================================================================
   Information Panel Styling
   ========================================================================== */

/**
 * Informational panel with subtle background and border
 * Provides context and usage instructions for form fields
 * Uses consistent border radius to match overall design language
 */
.info-panel[b-1wqsg10xc5] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 1rem;
}

/**
 * Information panel header styling
 * Includes icon support and consistent color scheme
 */
.info-panel h6[b-1wqsg10xc5] {
    color: #495057;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

/**
 * Icon styling within information panel header
 * Uses brand accent color for visual hierarchy
 */
.info-panel h6 i[b-1wqsg10xc5] {
    margin-right: 0.5rem;
    color: #17a2b8;
}

/* ==========================================================================
   Information List Styling
   ========================================================================== */

/**
 * Clean list styling for informational content
 * Removes default list styling for custom implementation
 */
.info-list[b-1wqsg10xc5] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/**
 * Individual list item styling with subtle separators
 * Provides clear content separation while maintaining readability
 */
.info-list li[b-1wqsg10xc5] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
    color: #6c757d;
}

/**
 * Removes border from the last list item
 * Ensures clean visual termination of the list
 */
.info-list li:last-child[b-1wqsg10xc5] {
    border-bottom: none;
}

/**
 * Emphasized text styling within information lists
 * Provides visual hierarchy for key terms and concepts
 */
.info-list strong[b-1wqsg10xc5] {
    color: #495057;
}

/* ==========================================================================
   Alert and Message Styling
   ========================================================================== */

/**
 * Enhanced alert styling with consistent design language
 * Includes icon support and improved visual prominence
 * Uses flexbox for proper icon-text alignment
 */
.alert[b-1wqsg10xc5] {
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

/**
 * Icon styling within alert messages
 * Ensures consistent spacing and sizing for alert icons
 */
.alert i[b-1wqsg10xc5] {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* ==========================================================================
   Responsive Design - Mobile Optimization
   ========================================================================== */

/**
 * Mobile-specific styling adjustments
 * Optimizes layout and interaction for smaller screens
 * 
 * Breakpoint: 768px and below (tablets and mobile devices)
 * 
 * Key adaptations:
 * - Single-column form layout for better mobile usability
 * - Reduced padding to maximize screen real estate
 * - Stacked button layout for improved touch interaction
 * - Full-width buttons with maximum width constraint
 */
@media (max-width: 768px) {
    /**
     * Converts two-column grid to single column for mobile
     * Maintains consistent spacing between form elements
     */
    .form-row[b-1wqsg10xc5] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /**
     * Reduced content padding for mobile optimization
     * Maximizes available space for form content
     */
    .create-content[b-1wqsg10xc5] {
        padding: 1.5rem;
    }

    /**
     * Vertical button layout for mobile devices
     * Improves touch interaction and prevents horizontal scrolling
     */
    .form-actions[b-1wqsg10xc5] {
        flex-direction: column;
        align-items: center;
    }

    /**
     * Full-width button styling with maximum width constraint
     * Ensures buttons are easily tappable while preventing excessive width
     */
    .form-actions .btn[b-1wqsg10xc5] {
        width: 100%;
        max-width: 250px;
    }

    .energy-input[b-1wqsg10xc5] {
        width: 6ch; /* Breite für 6 Ziffern */
        max-width: 100px;
        text-align: right; /* Rechtsbündige Ausrichtung für Zahlen */
        font-variant-numeric: tabular-nums; /* Monospace-Ziffern für bessere Ausrichtung */
    }

    /* Responsive Anpassung für kleinere Bildschirme */
    @media (max-width: 576px) {
        .energy-input[b-1wqsg10xc5] {
            max-width: 90px;
            width: 6ch;
        }
    }
}

/* ==========================================================================
   End of Stylesheet
   ========================================================================== */
/* /Components/EnergyDataTable.razor.rz.scp.css */
/**
 * EnergyDataTable Component Stylesheet
 * 
 * This stylesheet provides comprehensive styling for the EnergyDataTable Blazor component,
 * which displays energy consumption and production data in both statistical cards and tabular format.
 * 
 * Features:
 * - Modern gradient header with integrated controls
 * - Responsive statistics cards with hover effects and color-coded indicators
 * - Professional data table with sortable columns and enhanced typography
 * - Comprehensive state management styling (loading, empty, error states)
 * - Mobile-first responsive design with optimized layouts
 * - Accessibility-compliant color schemes and interaction patterns
 * - Monospace typography for numerical data precision
 * 
 * Color Scheme:
 * - Primary Gradient: #17a2b8 (Info Blue) to #007bff (Primary Blue)
 * - Success: #28a745 (Green for production/positive values)
 * - Danger: #dc3545 (Red for consumption/negative values)
 * - Warning: #ffc107 (Yellow for balance indicators)
 * - Info: #17a2b8 (Blue for metadata)
 * 
 * @author EnergyTracker Development Team
 * @version 1.0
 * @since 2024
 */

/* ==========================================================================
   Main Container Styling
   ========================================================================== */

/**
 * Primary container for the energy data table component
 * Removes default padding to allow full-width header design
 */
.energy-data-container[b-i882qdas5b] {
    padding: 0;
    height: 100vh; /* Vollständige Viewport-Höhe nutzen */
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Header Section Styling
   ========================================================================== */

/**
 * Header section with gradient background and flex layout
 * Creates a professional dashboard-like appearance with integrated controls
 * Uses CSS gradients from info blue to primary blue for visual appeal
 */
.data-header[b-i882qdas5b] {
    background: linear-gradient(135deg, #17a2b8, #007bff);
    color: white;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Header soll nicht schrumpfen */
}

/**
 * Header title styling
 * Ensures consistent typography and removes default margins
 */
.data-header h4[b-i882qdas5b] {
    margin: 0;
    font-weight: 500;
}

/**
 * Header title icon styling
 * Provides consistent spacing between icon and text
 */
.data-header h4 i[b-i882qdas5b] {
    margin-right: 0.5rem;
}

/* ==========================================================================
   Header Actions and Button Styling
   ========================================================================== */

/**
 * Base styling for buttons within header actions
 * Uses semi-transparent borders and backgrounds for integration with gradient
 */
.header-actions .btn[b-i882qdas5b] {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.1);
}

/**
 * Hover state for header action buttons
 * Increases opacity for better visual feedback while maintaining transparency
 */
.header-actions .btn:hover[b-i882qdas5b] {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: white !important;
}

/**
 * Disabled state for header action buttons
 * Reduces opacity and transparency to indicate unavailable actions
 */
.header-actions .btn:disabled[b-i882qdas5b] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.7;
}

/**
 * Focus state for header action buttons
 * Provides accessibility-compliant focus indicators
 */
.header-actions .btn:focus[b-i882qdas5b] {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

/* ==========================================================================
   Content Area Styling
   ========================================================================== */

/**
 * Main content area containing statistics cards and data table
 * Provides generous padding for comfortable viewing and interaction
 */
.data-content[b-i882qdas5b] {
    flex: 1;             /* nimmt den verfügbaren Platz */
    overflow: hidden;    /* kein eigener Scrollbalken */
    min-height: 0;       /* darf kleiner als Inhalt sein */
    display: flex;       /* wichtig: damit table-container als Flex-Item Höhe kriegt */
    flex-direction: column;
}

/* ==========================================================================
   Loading and Empty State Styling
   ========================================================================== */

/**
 * Centered container styling for loading and empty states
 * Uses flexbox for perfect centering with generous padding
 */
.loading-container[b-i882qdas5b],
.no-data-container[b-i882qdas5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/**
 * Text styling for loading and empty state messages
 * Provides subtle color and consistent spacing
 */
.loading-container p[b-i882qdas5b],
.no-data-container p[b-i882qdas5b] {
    margin-top: 1rem;
    color: #6c757d;
}

/* ==========================================================================
   Statistics Cards Layout and Base Styling
   ========================================================================== */

/**
 * Grid container for statistics cards
 * Uses CSS Grid with auto-fit for responsive card arrangement
 * Minimum card width ensures readability on all screen sizes
 */
.stats-container[b-i882qdas5b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-shrink: 0; /* Statistics sollen nicht schrumpfen */
}

/**
 * Individual statistics card styling
 * Includes hover effects and smooth transitions for enhanced interactivity
 * Uses flexbox for optimal icon-content alignment
 */
.stat-card[b-i882qdas5b] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.3s ease;
}

/**
 * Hover effect for statistics cards
 * Provides subtle lift and enhanced shadow for interactive feedback
 */
.stat-card:hover[b-i882qdas5b] {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Statistics Card Icon Styling
   ========================================================================== */

/**
 * Circular icon container within statistics cards
 * Fixed dimensions ensure consistent card layout regardless of icon size
 */
.stat-icon[b-i882qdas5b] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.5rem;
}

/* ==========================================================================
   Statistics Card Content Typography
   ========================================================================== */

/**
 * Statistics card subtitle styling
 * Uses uppercase and letter spacing for professional appearance
 */
.stat-content h6[b-i882qdas5b] {
    margin: 0 0 0.5rem 0;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/**
 * Statistics card main value styling
 * Bold typography for emphasis and clear data presentation
 */
.stat-content h4[b-i882qdas5b] {
    margin: 0;
    font-weight: 700;
    font-size: 1.5rem;
}

/* ==========================================================================
   Statistics Card Color Themes
   ========================================================================== */

/**
 * Production/Energy In card styling (Green theme)
 * Represents positive energy flow and production values
 */
.stat-in .stat-icon[b-i882qdas5b] {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.stat-in .stat-content h4[b-i882qdas5b] {
    color: #28a745;
}

/**
 * Consumption/Energy Out card styling (Red theme)
 * Represents energy consumption and outbound flow
 */
.stat-out .stat-icon[b-i882qdas5b] {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.stat-out .stat-content h4[b-i882qdas5b] {
    color: #dc3545;
}

/**
 * Balance card base styling (Yellow theme)
 * Base styling for energy balance calculations
 */
.stat-balance .stat-icon[b-i882qdas5b] {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

/**
 * Positive balance styling (Green theme)
 * Applied when energy production exceeds consumption
 */
.stat-positive .stat-content h4[b-i882qdas5b] {
    color: #28a745;
}

/**
 * Negative balance styling (Red theme)
 * Applied when energy consumption exceeds production
 */
.stat-negative .stat-content h4[b-i882qdas5b] {
    color: #dc3545;
}

/**
 * Count/Metadata card styling (Blue theme)
 * Used for numerical statistics and metadata display
 */
.stat-count .stat-icon[b-i882qdas5b] {
    background-color: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}

.stat-count .stat-content h4[b-i882qdas5b] {
    color: #17a2b8;
}

/* ==========================================================================
   Data Table Container and Base Styling
   ========================================================================== */

/**
 * Table container with rounded corners and shadow
 * Creates a card-like appearance for the data table
 */
.table-container[b-i882qdas5b] {
    flex: 1;             /* füllt die Höhe von data-content */
    overflow-y: auto;    /* nur hier scrollen */
    min-height: 0;       /* erlaubt echtes Scrollen */
    margin-left: auto;
    margin-right: auto;
}

.table-container table thead th[b-i882qdas5b] {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 2;
}

/**
 * Table base styling
 * Removes default margins for proper container integration
 */
.table[b-i882qdas5b] {
    margin: 0;
}

/* ==========================================================================
   Table Header Styling
   ========================================================================== */

/**
 * Table header styling with enhanced typography
 * Uses uppercase and letter spacing for professional appearance
 */
.table-header[b-i882qdas5b] {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.table-header th[b-i882qdas5b] {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 2;
}

/**
 * Sortable column header styling
 * Provides interactive feedback for clickable sorting columns
 */
.sortable[b-i882qdas5b] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.sortable:hover[b-i882qdas5b] {
    background-color: #e9ecef;
}

.sortable i[b-i882qdas5b] {
    margin-right: 0.5rem;
}

/* ==========================================================================
   Table Row and Cell Styling
   ========================================================================== */

/**
 * Table row hover effects
 * Provides subtle feedback for row interaction
 */
.table-row[b-i882qdas5b] {
    transition: background-color 0.2s ease;
}

.table-row:hover[b-i882qdas5b] {
    background-color: #f8f9fa;
}

/**
 * Table cell base styling
 * Consistent padding and borders for all table cells
 */
.table-row td[b-i882qdas5b] {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

/* ==========================================================================
   Specialized Cell Type Styling
   ========================================================================== */

/**
 * Date cell styling with enhanced font weight
 * Emphasizes temporal data for better scanning
 */
.date-cell[b-i882qdas5b] {
    font-weight: 500;
    color: #495057;
}

/**
 * Numerical cell styling with monospace font
 * Ensures proper alignment and readability of numerical data
 */
.number-cell[b-i882qdas5b] {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    font-weight: 600;
}

/**
 * Energy production value styling (Green)
 * Applied to energy input/production values
 */
.energy-in[b-i882qdas5b] {
    color: #28a745;
}

/**
 * Energy consumption value styling (Red)
 * Applied to energy output/consumption values
 */
.energy-out[b-i882qdas5b] {
    color: #dc3545;
}

/**
 * Balance cell styling with conditional colors
 * Dynamically styled based on positive/negative values
 */
.balance-cell.positive[b-i882qdas5b] {
    color: #28a745;
}

.balance-cell.negative[b-i882qdas5b] {
    color: #dc3545;
}

/**
 * User information cell styling
 * Subtle styling for metadata and user attribution
 */
.user-cell[b-i882qdas5b] {
    color: #6c757d;
    font-style: italic;
}

/* ==========================================================================
   Responsive Design - Tablet and Mobile Optimization
   ========================================================================== */

/**
 * Medium screen adaptations (768px and below)
 * Optimizes layout for tablet and mobile viewing
 * 
 * Key changes:
 * - Stacked header layout for better mobile UX
 * - Single-column statistics grid
 * - Reduced padding to maximize screen real estate
 * - Smaller icon and typography sizes
 */
@media (max-width: 768px) {
    /**
     * Header layout adaptation for mobile
     * Stacks title and actions vertically with centered alignment
     */
    .energy-data-container[b-i882qdas5b] {
        height: 100vh;
    }
    
    .data-header[b-i882qdas5b] {
        gap: 1rem;
        text-align: center;
    }

    /**
     * Reduced content padding for mobile
     * Maximizes available screen space for data display
     */
    .data-content[b-i882qdas5b] {
        padding: 1rem;
    }

    /**
     * Single-column statistics grid for mobile
     * Ensures optimal card readability on narrow screens
     */
    .stats-container[b-i882qdas5b] {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    /**
     * Reduced statistics card padding
     * Optimizes space usage while maintaining readability
     */
    .stat-card[b-i882qdas5b] {
        padding: 1rem;
        font-size: 10pt;
    }

    /**
     * Smaller table typography for mobile
     * Ensures table content fits within narrow screens
     */
    .table-responsive[b-i882qdas5b] {
        font-size: 0.875rem;
        flex: 1; /* Nimmt verfügbaren Platz ein */
        overflow-y: auto; /* Vertikales Scrollen ermöglichen */
        max-height: 100%;
    }

    /**
     * Compressed table cell padding
     * Maximizes data density while maintaining touch targets
     */
    .table-header th[b-i882qdas5b]
    {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 10;
        border: none;
        padding: 1rem;
        font-weight: 600;
        color: #495057;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    },
    .table-row td[b-i882qdas5b] {
        padding: 0.75rem 0.5rem;
    }

    /**
     * Smaller statistics card icons for mobile
     * Maintains proportion while conserving space
     */
    .stat-icon[b-i882qdas5b] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    /**
     * Reduced statistics card title size
     * Optimizes typography hierarchy for smaller screens
     */
    .stat-content h4[b-i882qdas5b] {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Extra Small Screen Optimization (576px and below)
   ========================================================================== */

/**
 * Additional optimizations for very small screens
 * Further reduces spacing and typography for optimal mobile experience
 */
@media (max-width: 576px) {
    /**
     * Reduced statistics container margin
     * Maximizes vertical space for table content
     */
    .stats-container[b-i882qdas5b] {
        margin-bottom: 1rem;
    }

    /**
     * Further reduced table typography
     * Ensures data remains readable on small screens
     */
    .table-responsive[b-i882qdas5b] {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   End of Stylesheet
   ========================================================================== */
/* /Layout/MainLayout.razor.rz.scp.css */
/**
 * MainLayout Component Stylesheet
 * 
 * This stylesheet provides comprehensive styling for the MainLayout Blazor component,
 * which serves as the application shell with responsive navigation functionality.
 * 
 * Features:
 * - Responsive navigation system with touch/mouse device detection
 * - Fixed positioning navigation bar with expandable panels
 * - Cross-platform compatibility (desktop, tablet, mobile)
 * - Modern design with gradients, shadows, and smooth transitions
 * - Accessibility-compliant interaction patterns
 * - Viewport-based responsive scaling
 * 
 * Navigation Concept:
 * - Minimal navigation trigger (thin bar) that expands on interaction
 * - Fixed positioning at top of viewport with centered alignment
 * - Different sizing for touch vs. non-touch devices
 * - Expandable panel with user authentication status and controls
 * 
 * @author EnergyTracker Development Team
 * @version 1.0
 * @since 2024
 */

/* ==========================================================================
   Page Layout Foundation
   ========================================================================== */

/**
 * Main page container with full viewport height
 * Uses flexbox for proper footer placement and content expansion
 * Ensures the layout always fills the entire viewport height
 */
.page[b-kdkig7yl4c] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Application Header and Navigation Positioning
   ========================================================================== */

/**
 * Fixed application header positioned at the top center of the viewport
 * Uses fixed positioning to remain visible during page scrolling
 * Centered horizontally using transform technique for pixel-perfect alignment
 * High z-index ensures navigation stays above other content
 */
.app-header[b-kdkig7yl4c] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* ==========================================================================
   Navigation Button Base Styling
   ========================================================================== */

/**
 * Primary navigation trigger button with modern design
 * Creates a subtle, minimal navigation interface that expands on interaction
 * Uses CSS gradients and box-shadows for depth and visual appeal
 * Full viewport width ensures easy interaction across the entire top area
 * 
 * Design Features:
 * - Gradient background for modern appearance
 * - Multiple box-shadows for depth (outer shadow + inner highlight)
 * - Smooth height transitions for responsive feedback
 * - Cursor pointer for clear interaction indication
 */
.nav-button[b-kdkig7yl4c] {
    width: 100vw;
    height: 1px;  /* Ultra-thin for desktop - expanded via media queries */
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
            0 2px 4px rgba(0,0,0,0.1),
            inset 0 1px 0 rgba(255,255,255,0.5);
    transition: height 0.3s ease;
}

/* ==========================================================================
   Device-Specific Navigation Button Sizing
   ========================================================================== */

/**
 * Touch device detection and optimization
 * Uses CSS media queries to detect touch-capable devices
 * Increases button size for better touch interaction on smartphones and tablets
 * 
 * Media Query Logic:
 * - hover: none = Device doesn't support hover (touch devices)
 * - pointer: coarse = Device has imprecise pointing device (finger)
 */
@media (hover: none) and (pointer: coarse) {
    .nav-button[b-kdkig7yl4c] {
        height: 15px;
        border-radius: 8px;
    }
}

/**
 * Screen size-based button sizing for tablets and small laptops
 * Alternative approach using viewport width for device detection
 * Covers cases where touch detection might not be reliable
 */
@media (max-width: 768px) {
    .nav-button[b-kdkig7yl4c] {
        height: 10px;
        border-radius: 8px;
    }
}

/**
 * Smartphone-specific navigation button optimization
 * Further increases button size for optimal thumb interaction
 * Reduces width slightly to prevent edge-of-screen interaction issues
 * Provides the most accessible touch target for small screens
 */
@media (max-width: 480px) {
    .nav-button[b-kdkig7yl4c] {
        height: 15px;
        border-radius: 8px;
        width: 180px;
    }
}

/* ==========================================================================
   Interactive States and Hover Effects
   ========================================================================== */

/**
 * Hover effects specifically for precision pointing devices
 * Only applies to devices with mouse/trackpad input for optimal UX
 * Prevents hover states on touch devices where they can cause issues
 * 
 * Enhanced hover state features:
 * - Lighter gradient for visual feedback
 * - Increased shadow for depth perception
 * - Stronger inner highlight for tactile feeling
 */
@media (hover: hover) and (pointer: fine) {
    .nav-button:hover[b-kdkig7yl4c] {
        background: linear-gradient(145deg, #f0f0f0, #ffffff);
        box-shadow:
                0 4px 8px rgba(0,0,0,0.15),
                inset 0 1px 0 rgba(255,255,255,0.7);
    }
}

/**
 * Fallback hover effect for broader compatibility
 * Provides hover feedback for devices that may not be caught by the media query
 * Identical styling to the media query version for consistent behavior
 */
.nav-button:hover[b-kdkig7yl4c] {
    background: linear-gradient(145deg, #f0f0f0, #ffffff);
    box-shadow:
            0 4px 8px rgba(0,0,0,0.15),
            inset 0 1px 0 rgba(255,255,255,0.7);
}

/**
 * Navigation button icon hiding
 * Completely removes any icons from the minimal navigation button design
 * Maintains clean, minimal appearance focused on the expandable panel concept
 */
.nav-button i[b-kdkig7yl4c] {
    display: none;
}

/* ==========================================================================
   Expandable Navigation Panel Styling
   ========================================================================== */

/**
 * Expandable navigation panel with centered positioning
 * Appears below the navigation button when triggered
 * Uses viewport-based sizing for responsive behavior across all devices
 * 
 * Positioning Strategy:
 * - Absolute positioning relative to the app-header
 * - Horizontal centering using left: 50% + translateX(-50%)
 * - Viewport-based width (95vw) for responsive scaling
 * - Maximum width constraint to prevent excessive width on large screens
 * 
 * Visual Design:
 * - White background for clear content visibility
 * - Subtle border and border-radius for modern card appearance
 * - Enhanced box-shadow for floating panel effect
 * - Generous padding for comfortable content spacing
 */
.nav-panel[b-kdkig7yl4c] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95vw;
    max-width: 95vw;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* ==========================================================================
   Navigation Panel Content Layout
   ========================================================================== */

/**
 * Navigation panel content container with flexible layout
 * Uses flexbox for optimal content arrangement and responsive behavior
 * 
 * Layout Features:
 * - Centered alignment for professional appearance
 * - Flexible gap spacing for comfortable element separation
 * - Flex-wrap for responsive content reflow
 * - Consistent spacing regardless of content amount
 */
.nav-content[b-kdkig7yl4c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/**
 * Navigation content text styling
 * Provides consistent typography for user status information
 * Uses system font stack for optimal readability across platforms
 */
.nav-content span[b-kdkig7yl4c] {
    font-size: 0.9rem;
    color: #495057;
    white-space: nowrap;
}

/**
 * Emphasized text within navigation content
 * Highlights important information like usernames
 * Stronger color for better visual hierarchy
 */
.nav-content strong[b-kdkig7yl4c] {
    color: #212529;
}

/* ==========================================================================
   Navigation Action Buttons
   ========================================================================== */

/**
 * Container for navigation action buttons (login, logout, profile)
 * Uses flexbox for consistent button spacing and alignment
 */
.nav-buttons[b-kdkig7yl4c] {
    display: flex;
    gap: 8px;
}

/**
 * Individual navigation action button styling
 * Compact sizing appropriate for navigation context
 * Consistent with overall design language
 */
.nav-buttons .btn[b-kdkig7yl4c] {
    font-size: 0.8rem;
    padding: 6px 12px;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

/**
 * Main content area with flexible growth
 * Flex: 1 ensures content area fills available space
 * Removes top padding to account for fixed navigation positioning
 * Important flag ensures this overrides any conflicting Bootstrap styles
 */
.content[b-kdkig7yl4c] {
    flex: 1;
    padding-top: 0px !important;
}

/* ==========================================================================
   Mobile-Specific Navigation Adaptations
   ========================================================================== */

/**
 * Mobile and tablet navigation panel adaptations
 * Optimizes panel sizing and layout for smaller screens
 * 
 * Key Adaptations:
 * - Minimum width ensures usability on small screens
 * - Maximum width with margin accounts for screen edges
 * - Vertical content layout for better mobile UX
 * - Reduced gap spacing for more compact appearance
 * 
 * Responsive Strategy:
 * - min-width: 280px ensures minimum usable width
 * - max-width: calc(100vw - 40px) provides comfortable screen margins
 * - flex-direction: column stacks content vertically for narrow screens
 */
@media (max-width: 768px) {
    .nav-panel[b-kdkig7yl4c] {
        min-width: 280px;
        max-width: calc(100vw - 40px);
    }

    .nav-content[b-kdkig7yl4c] {
        flex-direction: column;
        gap: 10px;
    }
}

/* ==========================================================================
   End of Stylesheet
   ========================================================================== */
/* /Pages/Home.razor.rz.scp.css */
/**
 * Home Page Component Stylesheet
 * 
 * This stylesheet provides comprehensive styling for the Home.razor page component,
 * which serves as the main dashboard interface for authenticated users in the EnergyTracker application.
 * 
 * Features:
 * - Clean, modern dashboard design with centered navigation
 * - Responsive button navigation with smooth hover effects
 * - Flexible content containers that adapt to different dashboard views
 * - Smooth view transitions with CSS animations
 * - Mobile-first responsive design with progressive enhancement
 * - Professional typography hierarchy for optimal readability
 * 
 * Dashboard Views:
 * - Chart View: Energy data visualization
 * - Create View: New energy entry form
 * - Data View: Tabular energy data display
 * 
 * Design Philosophy:
 * - Minimal, clean interface focused on data presentation
 * - Consistent visual hierarchy across all dashboard states
 * - Smooth transitions between different content views
 * - Responsive design that works across all device sizes
 * 
 * @author EnergyTracker Development Team
 * @version 1.0
 * @since 2024
 */

/* ==========================================================================
   Authenticated Content Header Styling
   ========================================================================== */

/**
 * Main dashboard title styling for authenticated users
 * Creates a clean, professional appearance with centered alignment
 * Uses lightweight font weight for modern, non-overwhelming presentation
 * 
 * Design Features:
 * - Centered text alignment for balanced visual hierarchy
 * - Dark blue-gray color (#2c3e50) for professional appearance
 * - Light font weight (300) for modern, elegant typography
 * - Generous bottom margin (2rem) for proper content separation
 */
.authenticated-content h2[b-hzm7a96wxg] {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 2rem;
    font-weight: 300;
}

/* ==========================================================================
   Dashboard Navigation System
   ========================================================================== */

/**
 * Primary dashboard navigation container
 * Creates a centered, card-like navigation interface with multiple view options
 * Uses flexbox for optimal button distribution and responsive behavior
 * 
 * Layout Features:
 * - Flexbox with centered justification for balanced button arrangement
 * - Consistent gap spacing (1rem) between navigation elements
 * - Light background (#f8f9fa) for subtle visual separation
 * - Rounded corners and border for modern card appearance
 * - Generous padding for comfortable interaction areas
 */
.dashboard-nav[b-hzm7a96wxg] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 0 auto 2rem; /* auto = horizontal mittig platzieren */
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
    width: fit-content; /* passt Breite an Inhalt an */
}
.dashboard-nav .btn[b-hzm7a96wxg] {
    min-width: unset;
}

/**
 * Interactive hover effects for dashboard navigation buttons
 * Provides engaging visual feedback to enhance user experience
 * Creates a subtle "lifting" effect that indicates interactivity
 * 
 * Hover Effects:
 * - Vertical translation (-2px) for subtle lift effect
 * - Enhanced box-shadow for depth perception
 * - Smooth transition creates professional, responsive feel
 */
.dashboard-nav .btn:hover[b-hzm7a96wxg] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/**
 * Icon spacing within dashboard navigation buttons
 * Ensures consistent spacing between icons and button text
 * Creates visual hierarchy and improves button readability
 */
.dashboard-nav .btn i[b-hzm7a96wxg] {
    margin-right: 0.5rem;
}

/* ==========================================================================
   Dashboard Content Area
   ========================================================================== */

/**
 * Main dashboard content container with flexible height management
 * Creates a responsive content area that adapts to different dashboard views
 * Uses flexbox for optimal content distribution and viewport utilization
 * 
 * Layout Strategy:
 * - Flexbox column layout for vertical content stacking
 * - Minimum height calculation (100vh - 200px) accounts for header and navigation
 * - Fixed height (800px) ensures consistent content area size
 * - Flexible design adapts to different content types (charts, forms, tables)
 */
.dashboard-content[b-hzm7a96wxg] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 200px);
    height: 100vh;
}

/* ==========================================================================
   View Container Styling
   ========================================================================== */

/**
 * Individual view container for dashboard content areas
 * Creates consistent, professional appearance for all dashboard views
 * Includes smooth entrance animations for enhanced user experience
 * 
 * Container Features:
 * - Flexible growth (flex: 1) to fill available content space
 * - Clean white background for optimal content visibility
 * - Rounded corners (0.5rem) for modern, card-like appearance
 * - Subtle box-shadow for depth and visual separation
 * - Hidden overflow to maintain clean container boundaries
 * - Smooth slide-in animation (slideIn) for view transitions
 */
.view-container[b-hzm7a96wxg] {
    flex: 1;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    overflow: hidden;
    animation: slideIn-b-hzm7a96wxg 0.3s ease-out;
}

/* ==========================================================================
   View Transition Animations
   ========================================================================== */

/**
 * Smooth slide-in animation for view container transitions
 * Creates professional, engaging transitions between different dashboard views
 * Enhances user experience by providing visual continuity during navigation
 * 
 * Animation Features:
 * - Initial state: 0 opacity with 20px downward offset
 * - Final state: Full opacity with natural positioning
 * - Duration: 0.3 seconds with ease-out timing function
 * - Provides smooth, professional transition feel
 * 
 * Usage: Applied automatically when view containers are rendered
 * Effect: Content slides up and fades in smoothly
 */
@keyframes slideIn-b-hzm7a96wxg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Responsive Design - Tablet and Mobile Optimization
   ========================================================================== */

/**
 * Tablet and medium screen adaptations (768px and below)
 * Optimizes dashboard navigation for touch interaction and narrower screens
 * 
 * Key Adaptations:
 * - Vertical navigation layout (flex-direction: column) for better touch targets
 * - Centered alignment maintains visual balance in vertical layout
 * - Full-width buttons with maximum width constraint for optimal touch zones
 * - Maintains professional appearance while improving usability
 */
@media (max-width: 768px) {
    .dashboard-nav[b-hzm7a96wxg] {
        /* flex-direction: column; ← ENTFERNT */
        justify-content: center; /* Buttons horizontal zentriert */
        align-items: center;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .dashboard-nav .btn[b-hzm7a96wxg] {
        width: calc(1em + 10px); /* Icon + padding */
        min-width: unset;
        padding: 0.5rem 5px;
    }
}

@media (max-width: 350px) {
    .dashboard-nav[b-hzm7a96wxg] {
        flex-direction: column; /* Nur bei extrem kleinen Bildschirmen */
        align-items: center;
    }

    .dashboard-nav .btn[b-hzm7a96wxg] {
        width: auto;
        min-width: 120px; /* Mindestbreite für Touch-Targets */
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   Mobile Phone Optimization (480px and below)
   ========================================================================== */

/**
 * Small screen and mobile phone specific optimizations
 * Further refines layout and typography for optimal mobile experience
 * 
 * Mobile Optimizations:
 * - Reduced padding (0.75rem) to maximize screen real estate
 * - Smaller gap spacing (0.75rem) for more compact navigation
 * - Flexible button sizing (min-width: auto) for content-based width
 * - Reduced font size (0.9rem) for better mobile readability
 * - Smaller main title (1.5rem) to fit mobile viewports comfortably
 * 
 * Design Goals:
 * - Maintain usability while maximizing content space
 * - Ensure touch targets remain accessible
 * - Preserve visual hierarchy in constrained space
 */
@media (max-width: 480px) {
    .dashboard-nav[b-hzm7a96wxg] {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .dashboard-nav .btn[b-hzm7a96wxg] {
        width: calc(1em + 10px); /* Icon + 5px links + 5px rechts */
        min-width: unset;
        padding: 0.5rem 5px;
    }

    .authenticated-content h2[b-hzm7a96wxg] {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   End of Stylesheet
   ========================================================================== */
/* /Pages/Login.razor.rz.scp.css */
/**
 * Login Page Component Stylesheet
 * 
 * This stylesheet provides comprehensive styling for the Login.razor page component,
 * which handles user authentication with enhanced security features and user experience.
 * 
 * Features:
 * - Centered login form with professional card design
 * - Rate limiting support with visual feedback and countdown timers
 * - Responsive design optimized for all device sizes
 * - Accessibility-compliant form controls and focus states
 * - Enhanced error messaging with contextual styling
 * - Already-logged-in state handling with user-friendly messaging
 * - Modern form styling with smooth transitions and hover effects
 * 
 * Security Features:
 * - Rate limiting visual feedback to prevent brute force attacks
 * - Disabled states for form controls during rate limiting
 * - Clear countdown timers for retry attempts
 * - Professional error messaging for failed authentication
 * 
 * Design Philosophy:
 * - Clean, minimal interface focused on security and usability
 * - Professional appearance that builds user trust
 * - Clear visual hierarchy for form elements and error states
 * - Responsive design that works seamlessly across all devices
 * 
 * @author EnergyTracker Development Team
 * @version 1.0
 * @since 2024
 */

/* ==========================================================================
   Login Container Layout
   ========================================================================== */

/**
 * Main login page container with centered content layout
 * Creates a professional, focused login experience with optimal viewport utilization
 * Uses flexbox for perfect centering across all screen sizes
 * 
 * Layout Features:
 * - Flexbox centering (both horizontal and vertical)
 * - Minimum height (70vh) ensures proper content placement
 * - Generous padding (2rem) provides comfortable spacing from viewport edges
 * - Responsive design foundation for mobile and desktop optimization
 */
.login-container[b-2xa5621w07] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 2rem;
}

/* ==========================================================================
   Already Logged In State Styling
   ========================================================================== */

/**
 * Container for already authenticated user messaging
 * Provides user-friendly feedback when accessing login page while authenticated
 * Maximum width ensures optimal readability across different screen sizes
 */
.already-logged-in[b-2xa5621w07] {
    max-width: 500px;
    width: 100%;
}

/**
 * Alert styling for already logged in message
 * Creates a clean, centered informational display
 * Uses rounded corners for modern, friendly appearance
 */
.already-logged-in .alert[b-2xa5621w07] {
    text-align: center;
    border-radius: 0.5rem;
}

/**
 * Heading styling within already logged in alert
 * Uses info color theme for consistent Bootstrap integration
 * Proper spacing ensures clear visual hierarchy
 */
.already-logged-in h4[b-2xa5621w07] {
    margin-bottom: 1rem;
    color: #0c5460;
}

/**
 * Paragraph spacing within already logged in alert
 * Provides comfortable reading spacing before action buttons
 */
.already-logged-in p[b-2xa5621w07] {
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Login Form Container Styling
   ========================================================================== */

/**
 * Main login form container with modern card design
 * Creates a professional, trustworthy appearance for authentication
 * 
 * Card Features:
 * - Maximum width (400px) optimized for form usability
 * - Full width responsiveness with max-width constraint
 * - Generous padding (2rem) for comfortable form interaction
 * - Subtle border and border-radius for modern card appearance
 * - Clean white background for optimal form visibility
 * - Subtle box-shadow for depth and visual separation
 */
.login-form[b-2xa5621w07] {
    max-width: 400px;
    width: 100%;
    padding: 2rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/**
 * Login form title styling
 * Creates clear visual hierarchy with professional typography
 * 
 * Typography Features:
 * - Centered alignment for balanced visual presentation
 * - Light font weight (300) for modern, non-aggressive appearance
 * - Neutral gray color (#495057) for professional tone
 * - Generous bottom margin (2rem) for proper form separation
 */
.login-form h2[b-2xa5621w07] {
    text-align: center;
    margin-bottom: 2rem;
    color: #495057;
    font-weight: 300;
}

/* ==========================================================================
   Form Group and Label Styling
   ========================================================================== */

/**
 * Form group container with consistent spacing
 * Provides proper vertical rhythm between form elements
 * Generous margin ensures comfortable form scanning and interaction
 */
.form-group[b-2xa5621w07] {
    margin-bottom: 1.5rem;
}

/**
 * Form label styling with enhanced readability
 * Creates clear visual hierarchy and improves form accessibility
 * 
 * Label Features:
 * - Block display for full-width label areas
 * - Medium font weight (500) for clear field identification
 * - Professional gray color for optimal contrast
 * - Proper spacing (0.5rem) between label and input
 */
.form-group label[b-2xa5621w07] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

/* ==========================================================================
   Input Field Styling
   ========================================================================== */

/**
 * Text and password input field styling
 * Provides modern, accessible form controls with enhanced user experience
 * 
 * Input Features:
 * - Full width for optimal mobile and desktop usability
 * - Comfortable padding (0.75rem) for easy interaction
 * - Subtle border styling with rounded corners
 * - Standard font size (1rem) for optimal readability
 * - Smooth transitions for focus states and interactions
 */
.form-group input[type="text"][b-2xa5621w07],
.form-group input[type="password"][b-2xa5621w07] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/**
 * Input field focus states for enhanced accessibility
 * Provides clear visual feedback for keyboard navigation and interaction
 * 
 * Focus Features:
 * - Blue border color for clear focus indication
 * - Removed default outline for custom focus styling
 * - Blue box-shadow for enhanced focus visibility
 * - Meets WCAG accessibility requirements for focus indicators
 */
.form-group input[type="text"]:focus[b-2xa5621w07],
.form-group input[type="password"]:focus[b-2xa5621w07] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/**
 * Disabled input field styling for rate limiting and other disabled states
 * Provides clear visual indication when form interaction is not available
 * 
 * Disabled Features:
 * - Gray background to indicate unavailable state
 * - Muted text color for reduced emphasis
 * - Not-allowed cursor for clear user feedback
 * - Reduced opacity for subtle disabled appearance
 */
.form-group input:disabled[b-2xa5621w07] {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
}

/* ==========================================================================
   Checkbox and Remember Me Styling
   ========================================================================== */

/**
 * Custom checkbox label styling for "Remember Me" functionality
 * Creates user-friendly checkbox interaction with proper alignment
 * 
 * Checkbox Features:
 * - Flexbox alignment for perfect icon-text positioning
 * - Pointer cursor for enhanced interactivity indication
 * - Normal font weight for secondary form elements
 * - Removed bottom margin for inline element behavior
 */
.checkbox-label[b-2xa5621w07] {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    font-weight: normal !important;
    margin-bottom: 0 !important;
}

/**
 * Checkbox input styling with enhanced visual prominence
 * Slightly larger checkbox for better touch interaction and visibility
 */
.checkbox-label input[type="checkbox"][b-2xa5621w07] {
    margin-right: 0.75rem;
    transform: scale(1.1);
}

/**
 * Disabled checkbox input styling
 * Maintains consistency with other disabled form elements
 */
.checkbox-label input:disabled[b-2xa5621w07] {
    cursor: not-allowed;
    opacity: 0.65;
}

/**
 * Disabled checkbox label styling using modern CSS :has() selector
 * Provides comprehensive disabled state styling for the entire checkbox area
 */
.checkbox-label:has(input:disabled)[b-2xa5621w07] {
    cursor: not-allowed;
    opacity: 0.65;
}

/* ==========================================================================
   Button Styling
   ========================================================================== */

/**
 * Base button styling for consistent form interaction
 * Provides professional appearance with smooth transitions
 * 
 * Button Features:
 * - Full width for optimal mobile and desktop usability
 * - Comfortable padding for easy clicking/tapping
 * - Rounded corners for modern appearance
 * - Standard typography for readability
 * - Smooth transitions for all interactive states
 */
.btn[b-2xa5621w07] {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    border: 1px solid transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/**
 * Primary button styling for main login action
 * Uses Bootstrap-consistent primary blue color scheme
 */
.btn-primary[b-2xa5621w07] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
}

/**
 * Primary button hover state with darker blue
 * Provides clear visual feedback for interactive elements
 * Only applies to non-disabled buttons for proper UX
 */
.btn-primary:hover:not(:disabled)[b-2xa5621w07] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/**
 * Disabled button styling for rate limiting and loading states
 * Clearly indicates when user interaction is not available
 * 
 * Disabled Features:
 * - Gray color scheme for inactive appearance
 * - Not-allowed cursor for clear user feedback
 * - Reduced opacity for subtle disabled indication
 */
.btn:disabled[b-2xa5621w07] {
    background-color: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
}

/* ==========================================================================
   Error Message Styling
   ========================================================================== */

/**
 * General error message styling for authentication failures
 * Provides clear, visible error feedback with professional appearance
 * 
 * Error Features:
 * - Red color scheme for clear error indication
 * - Top margin (1rem) for separation from form elements
 * - Comfortable padding for readable error messages
 * - Light red background for subtle emphasis
 * - Rounded corners for consistent design language
 * - Slightly smaller font size for secondary information
 */
.error[b-2xa5621w07] {
    color: #dc3545;
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

/**
 * Rate limiting specific error styling
 * Uses warning color scheme to differentiate from general errors
 * Indicates temporary security restriction rather than permanent failure
 */
.error.rate-limited[b-2xa5621w07] {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

/**
 * Countdown timer styling within rate limiting messages
 * Emphasizes the time remaining for retry attempts
 * 
 * Countdown Features:
 * - Bold font weight for emphasis and clear visibility
 * - Top margin for separation from main error message
 * - Slightly larger font size for importance
 */
.countdown[b-2xa5621w07] {
    font-weight: 600;
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

/* ==========================================================================
   Mobile Responsive Design
   ========================================================================== */

/**
 * Mobile optimization for small screens (576px and below)
 * Adapts login interface for optimal mobile user experience
 * 
 * Mobile Adaptations:
 * - Reduced container padding (1rem) to maximize screen usage
 * - Reduced minimum height (60vh) for better mobile proportion
 * - Simplified form styling with removed borders and shadows
 * - Smaller title font size for mobile viewport constraints
 * - Maintains usability while optimizing for limited screen space
 */
@media (max-width: 576px) {
    .login-container[b-2xa5621w07] {
        padding: 1rem;
        min-height: 60vh;
    }

    .login-form[b-2xa5621w07] {
        padding: 1.5rem;
        border: none;
        box-shadow: none;
    }

    .login-form h2[b-2xa5621w07] {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   End of Stylesheet
   ========================================================================== */