@import '_content/MudBlazor/MudBlazor.min.css';

/* --- Energetika Design System Variables --- */
:root {
    /* Smooth, Saturated Gradients */
    --grad-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --grad-solar: linear-gradient(135deg, #FFD93D 0%, #FF8C42 100%);
    --grad-consumer: linear-gradient(135deg, #6DD5FA 0%, #2980B9 100%);
    --grad-group: linear-gradient(135deg, #A8E6CF 0%, #3DBE8D 100%);
    --grad-energy: linear-gradient(135deg, #FF9A9E 0%, #FAD0C4 100%);

    /* Education Pastel Palette */
    --pastel-green: #e1f5fe;
    /* Light backdrop */
    --pastel-green-text: #2e7d32;
    --pastel-green-glow: rgba(76, 175, 80, 0.4);

    --edu-household: #E8F5E9;
    --edu-household-text: #2E7D32;
    --edu-business: #FFF3E0;
    --edu-business-text: #E65100;
    --edu-svj: #E3F2FD;
    --edu-svj-text: #1565C0;
    --edu-edc: #F3E5F5;
    --edu-edc-text: #7B1FA2;
    --edu-community: #FCE4EC;
    --edu-community-text: #C2185B;
    --edu-general: #F5F5F5;
    --edu-general-text: #424242;

    /* Hero & Dark Dashboard Palette */
    --hero-bg: #0f172a;
    --hero-card-bg: rgba(23, 23, 23, 0.7);
    --hero-border: rgba(255, 255, 255, 0.08);
    --hero-text-primary: #f8fafc;
    --hero-text-secondary: #94a3b8;
    
    --electric-blue: #3b82f6;
    --electric-blue-glow: rgba(59, 130, 246, 0.5);
    --solar-gold: #fbbf24;
    --solar-gold-glow: rgba(251, 191, 36, 0.5);
    --grid-purple: #8b5cf6;
    --grid-purple-glow: rgba(139, 92, 246, 0.5);
    --success-green: #10b981;
    --success-green-glow: rgba(16, 185, 129, 0.5);
}

html,
body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8f9fa;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* --- Gradient Utility Classes with Aesthetic Polish --- */
.gradient-header,
.gradient-solar,
.gradient-consumer,
.gradient-group,
.gradient-energy {
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Nice shading/depth */
    border-radius: 6px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* Better text contrast */
}

.gradient-header {
    background: var(--grad-header) !important;
}

.gradient-solar {
    background: var(--grad-solar) !important;
}

.gradient-consumer {
    background: var(--grad-consumer) !important;
}

.gradient-group {
    background: var(--grad-group) !important;
}

.gradient-energy {
    background: var(--grad-energy) !important;
}

/* Force white content inside gradients */
.gradient-solar *,
.gradient-consumer *,
.gradient-group *,
.gradient-energy *,
.gradient-header * {
    color: white !important;
    fill: white !important;
}

/* --- Page Backgrounds (Subtle) --- */
.page-background-solar {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.04) 0%, rgba(255, 140, 66, 0.04) 100%);
    min-height: 100vh;
}

.page-background-consumer {
    background: linear-gradient(135deg, rgba(109, 213, 250, 0.04) 0%, rgba(41, 128, 185, 0.04) 100%);
    min-height: 100vh;
}

.page-background-group {
    background: linear-gradient(135deg, rgba(168, 230, 207, 0.04) 0%, rgba(61, 190, 141, 0.04) 100%);
    min-height: 100vh;
}

.page-background-energy {
    background: linear-gradient(135deg, rgba(255, 154, 158, 0.04) 0%, rgba(250, 208, 196, 0.04) 100%);
    min-height: 100vh;
}

.page-background-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.04) 0%, rgba(118, 75, 162, 0.04) 100%);
    min-height: 100vh;
}

/* --- Icon Boxes --- */
.icon-box-positive {
    background-color: #E8F5E9;
    color: #4CAF50;
    border-radius: 50%;
    padding: 8px;
    display: inline-flex;
}

.icon-box-neutral {
    background-color: #E3F2FD;
    color: #2196F3;
    border-radius: 50%;
    padding: 8px;
    display: inline-flex;
}

.icon-box-critical {
    background-color: #FFEBEE;
    color: #F44336;
    border-radius: 50%;
    padding: 8px;
    display: inline-flex;
}

/* --- Form & Misc --- */
.form-field-wrapper,
.register-form-field {
    margin-bottom: 1.5rem;
}

.form-field-wrapper .mud-input-control,
.register-form-field .mud-input-control {
    margin-bottom: 0.5rem;
}

.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.875rem;
    margin-top: 4px;
}

/* Autofill Reset */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

/* --- Custom Badge Positioning --- */
.custom-badge-br .mud-badge {
    bottom: 0px !important;
    right: 0px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

/* --- Premium UI Components --- */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(209, 213, 219, 0.3) !important;
    transition: all 0.3s ease-in-out;
}

.bg-glass {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}

.hover-scale {
    transition: transform 0.2s ease-in-out !important;
}

.hover-scale:hover {
    transform: scale(1.02) !important;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.border-l-4 {
    border-left-width: 4px !important;
}

/* Animations */
.animate__fadeIn {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nav Highlight & Badges */
.nav-edu-highlight {
    position: relative;
    background: rgba(255, 140, 66, 0.05) !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
}

.badg-new {
    background: var(--mud-palette-warning);
    color: #000;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
    animation: flash-badge 2s infinite ease-in-out;
}

@keyframes flash-badge {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.hero-dashboard {
    background: var(--hero-bg) !important;
    color: var(--hero-text-primary) !important;
    min-height: 100vh;
    padding: 2rem;
}

.hero-dashboard h1, 
.hero-dashboard h2, 
.hero-dashboard h3 {
    color: var(--hero-text-primary) !important;
}

.hero-card {
    background: var(--hero-card-bg) !important;
    border: 1px solid var(--hero-border) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    padding: 1.5rem;
}

.hero-card:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Energy Node Specifics */
.node-grid-top-left { border-top: 2px solid var(--grid-purple); }
.node-grid-top-right { border-top: 2px solid var(--electric-blue); }
.node-solar-bottom-left { border-top: 2px solid var(--solar-gold); }
.node-consumer-bottom-right { border-top: 2px solid var(--success-green); }

/* Animated Flow Paths */
.flow-path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10, 15;
    animation: flow-dash 3s linear infinite;
    opacity: 0.6;
}

.flow-blue { stroke: var(--electric-blue); filter: drop-shadow(0 0 5px var(--electric-blue-glow)); }
.flow-gold { stroke: var(--solar-gold); filter: drop-shadow(0 0 5px var(--solar-gold-glow)); }
.flow-purple { stroke: var(--grid-purple); filter: drop-shadow(0 0 5px var(--grid-purple-glow)); }
.flow-green { stroke: var(--success-green); filter: drop-shadow(0 0 5px var(--success-green-glow)); }

@keyframes flow-dash {
    to {
        stroke-dashoffset: -50;
    }
}

.glow-text-blue { text-shadow: 0 0 10px var(--electric-blue-glow); color: var(--electric-blue) !important; }
.glow-text-gold { text-shadow: 0 0 10px var(--solar-gold-glow); color: var(--solar-gold) !important; }
.glow-text-green { text-shadow: 0 0 10px var(--success-green-glow); color: var(--success-green) !important; }

/* FIX: MudDatePicker Header & Popover - Modern approach */
.mud-picker-header {
    height: auto !important;
    min-height: 80px !important;
    padding: 12px !important;
    overflow: visible !important;
}

.mud-picker-header-daytext {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* Ensure DateRangePicker with 2 months has enough width */
.mud-picker-datepicker-content {
    max-width: 100vw !important;
}

@media (min-width: 960px) {
    .mud-picker-popover-content {
        min-width: 350px !important;
    }
}

/* Specific fix for narrow inputs squashing popovers */
.mud-popover-provider .mud-popover {
    min-width: fit-content !important;
}