:root {
    --app-primary-color: #2b3990; /* Dark Blue from logo */
    --app-secondary-color: #f7941d; /* Orange from logo */
    --app-gradient-start: #2b3990;
    --app-gradient-end: #f7941d;
    --app-text-color: #2b3990; /* Dark Blue */
    --app-light-text-color: #ffffff;
    --app-hero-text-color: #ffffff;
    --app-accent-color: #f7941d; /* Orange */

    --bs-primary-rgb-values: 43, 57, 144;
    --bs-success-rgb-values: 40, 167, 69;
    --bs-warning-rgb-values: 255, 193, 7;
    --bs-danger-rgb-values: 220, 53, 69;
}



/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #555; border-radius: 10px; }

body {
    font-family: 'Inter', sans-serif; /* Ensure Inter font is loaded or use a common sans-serif */
    background-color: #f0f2f5;
    padding-top: 70px; /* Adjust for fixed navbar */
    color: var(--app-text-color);
    overflow-x: hidden;
    transition: background-color 0.5s ease, padding-top 0.5s ease; /* Smooth transition for body changes */
}

/* Class to prevent scrolling during loading */
body.loading-active {
    overflow: hidden;
}

/* Full-page loader */
#pageLoader {
    position: fixed;
    inset: 0; /* Top, right, bottom, left to 0 */
    background-color: #ffffff; /* Solid white background for preloader, matching admin-customer-overview */
    display: flex;
    flex-direction: column; /* Stack logo, spinner, and text vertically */
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Ensure it's on top of all other content */
    opacity: 1;
    transition: opacity 0.75s ease-out, visibility 0.75s ease-out; /* Smooth fade-out effect */
    visibility: visible; /* Ensure it's visible by default */
}
#pageLoader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Styling for the logo within the preloader */
.preloader-logo img {
    height: auto;
    width: auto;
    max-height: 3.5rem; /* Max height for preloader logo */
    margin-bottom: 1.5rem; /* 24px */
}

/* Styling for the SVG spinner */
#pageLoader .spinner-svg {
    height: 2.5rem; /* h-10 equivalent */
    width: 2.5rem; /* w-10 equivalent */
    color: #f59e0b; /* text-yellow-500 equivalent */
    margin-bottom: 0.75rem; /* mb-3 equivalent */
}

/* Remove old spinner styles if not used */
#pageLoader .spinner-border {
    display: none; /* Hide the old Bootstrap spinner */
}


/* General Animation classes */
.fade-in { animation: fadeInAnimation 0.8s ease-out forwards; opacity: 0; }
@keyframes fadeInAnimation {
    from { opacity: 0; transform: translateY(25px); } /* Slightly more pronounced Y transform */
    to { opacity: 1; transform: translateY(0); }
}
.slide-in-left { animation: slideInLeftAnimation 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; } /* Smoother easing */
@keyframes slideInLeftAnimation {
    from { opacity: 0; transform: translateX(-40px); } /* Slightly more pronounced X transform */
    to { opacity: 1; transform: translateX(0); }
}



.header-gradient {
    background: linear-gradient(90deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%);
    transition: background 0.5s ease;
}
.text-gradient-custom {
    background: linear-gradient(90deg, var(--app-gradient-start), var(--app-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientTextAnimation 5s ease infinite;
    background-size: 200% 200%;
}
@keyframes gradientTextAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


.status-dot {
    width: 12px; height: 12px; border-radius: 50%; display: inline-block;
    margin-right: 8px; animation: pulse-status 1.8s infinite ease-in-out; /* Smoother pulse */
}
.status-online { background-color: var(--app-secondary-color); --status-color-rgb: var(--bs-success-rgb-values); }
.status-offline { background-color: #dc3545; --status-color-rgb: var(--bs-danger-rgb-values); }
.status-maintenance { background-color: #ffc107; --status-color-rgb: var(--bs-warning-rgb-values); }

@keyframes pulse-status {
    0% { box-shadow: 0 0 0 0 rgba(var(--status-color-rgb), 0.7); transform: scale(1); }
    50% { box-shadow: 0 0 0 12px rgba(var(--status-color-rgb), 0); transform: scale(1.1); } /* Larger pulse, slight scale */
    100% { box-shadow: 0 0 0 0 rgba(var(--status-color-rgb), 0); transform: scale(1); }
}

.notification-badge {
    position: absolute; top: -7px; right: -7px; /* Adjusted position */
    padding: 0.2em 0.5em; font-size: 0.65rem; /* Adjusted padding and font */
    animation: bounceInBadge 0.5s ease-out;
}
@keyframes bounceInBadge {
    0% { transform: scale(0.5); opacity: 0; }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes textPopIn {
    from { opacity: 0; transform: translateY(15px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}


.metric-card {
    border-left: 6px solid var(--app-primary-color); /* Thicker border */
    transition: all 0.3s ease-in-out, border-left-color 0.3s ease; /* Added border color transition */
}
.metric-card .fas, .metric-card .far {
    color: var(--app-primary-color);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease; /* Bouncier icon transform */
}
.metric-card:hover .fas, .metric-card:hover .far {
    transform: scale(1.15) rotate(-5deg); /* More dynamic icon hover */
}
.metric-card.trees-saved, .metric-card.system-uptime, .metric-card.battery-level {
    border-left-color: var(--app-secondary-color);
}
.metric-card.trees-saved .fas, .metric-card.system-uptime .fas, .metric-card.system-uptime .far, .metric-card.battery-level .fas {
    color: var(--app-secondary-color);
}
.metric-card.grid-feed {
    border-left-color: #ffc107;
}
.metric-card.grid-feed .fas {
    color: #ffc107;
}


.weather-widget {
    background: linear-gradient(135deg, #6DD5FA, #2980B9);
    color: white;
    padding: 1.5rem; /* Increased padding */
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(41, 128, 185, 0.3); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.weather-widget:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(41, 128, 185, 0.4);
}
.weather-widget .fas {
    font-size: 3rem; /* Larger icon */
    margin-bottom: 0.75rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
    animation: weatherIconAnimate 3s ease-in-out infinite alternate;
}
@keyframes weatherIconAnimate {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
    100% { transform: translateY(0) scale(1); }
}
.live-value {
    transition: color 0.4s ease, transform 0.4s ease, text-shadow 0.4s ease; /* Added text-shadow */
    display: inline-block;
}
.live-value-updated {
    color: var(--app-secondary-color) !important;
    transform: scale(1.08) translateY(-2px); /* More pronounced update */
    text-shadow: 0 0 8px rgba(var(--bs-success-rgb-values), 0.5); /* Glow effect */
}

/* Custom Modal for messages */
.custom-modal {
    display: none; position: fixed; z-index: 1060; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto;
    background-color: rgba(0,0,0,0.55); /* Darker backdrop */
    justify-content: center; align-items: center; padding: 20px;
}
.custom-modal-content {
    background-color: #ffffff; margin: auto; padding: 30px; /* More padding */
    border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.25); /* Stronger shadow */
    width: 90%; max-width: 420px; text-align: center; position: relative;
    animation: fadeInModal 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother modal fade */
}
@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-25px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.custom-modal-close-btn {
    color: #999; float: right; font-size: 32px; /* Larger close button */
    font-weight: bold; position: absolute; top: 12px; right: 18px;
    cursor: pointer; transition: color 0.3s ease, transform 0.3s ease;
}
.custom-modal-close-btn:hover, .custom-modal-close-btn:focus {
    color: #000; transform: rotate(90deg); /* Rotate on hover */
}
.custom-modal-buttons {
    margin-top: 25px; display: flex; justify-content: center; gap: 15px; /* Increased gap */
}
.custom-modal-buttons .btn {
    padding: 10px 20px; /* Standardized button padding */
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.custom-modal-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Styles for Weather Forecast Cards */
.forecast-card {
    background: linear-gradient(135deg, #ADD8E6, #87CEEB);
    color: white; border-radius: 12px; padding: 1.2rem; text-align: center;
    box-shadow: 0 5px 12px rgba(0,0,0,0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.forecast-card:hover {
    transform: translateY(-8px) scale(1.02); /* More pronounced hover */
    box-shadow: 0 10px 20px rgba(135, 206, 235, 0.4); /* Color-matched shadow */
}
.forecast-card .fas {
    font-size: 2.2rem; margin-bottom: 0.6rem;
    transition: transform 0.3s ease;
}
.forecast-card:hover .fas {
    transform: rotateY(360deg); /* Fun icon rotation on hover */
}
.forecast-card .temp-range { font-size: 1.25rem; font-weight: bold; }
.forecast-card .condition-text { font-size: 0.95rem; opacity: 0.9; }

/* Page Styling */
.page-section {
    display: none; padding: 2.5rem 0; /* Increased padding */
    animation: sectionFadeIn 0.6s ease-out; /* Animation for section appearance */
}
@keyframes sectionFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
.page-section .card {
    max-width: 850px; margin: 0 auto;
}
.page-section .card-header {
    background: linear-gradient(90deg, var(--app-gradient-start), var(--app-gradient-end));
    color: white; border-top-left-radius: 15px; border-top-right-radius: 15px; /* Match card radius */
    padding: 1.8rem; /* Increased padding */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.page-section .detail-item, .page-section .log-item, .page-section .chart-container, .page-section .profile-item {
    padding: 0.85rem 0; border-bottom: 1px dashed #d8dde2; /* Lighter dash */
}
.page-section .detail-item:last-child, .page-section .log-item:last-child, .page-section .chart-container:last-child, .page-section .profile-item:last-child {
    border-bottom: none;
}
.log-table, .savings-table {
    width: 100%; border-collapse: collapse; margin-top: 1.2rem;
}
.log-table th, .log-table td, .savings-table th, .savings-table td {
    border: 1px solid #e9ecef; padding: 10px 12px; /* Increased padding */
    text-align: left;
}
.log-table th, .savings-table th {
    background-color: #f8f9fa; font-weight: 600; /* Bolder header */
}
.log-table tbody tr:hover, .savings-table tbody tr:hover {
    background-color: #f1f3f5; /* Hover effect for table rows */
}


/* Login and Authentication Pages Specific Styles */
.auth-page-container {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, var(--app-primary-color), var(--app-gradient-end), #00c6ff, #0072ff); /* More dynamic gradient */
    background-size: 400% 400%; /* For animation */
    animation: gradientBackgroundAnimation 20s ease infinite; /* Animated gradient */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    overflow: hidden;
    padding-top: 0 !important;
    transition: opacity 0.5s ease-out; /* For page switches */
}

@keyframes gradientBackgroundAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.auth-form-card {
    background-color: rgba(255, 255, 255, 0.98); /* Slightly more opaque */
    padding: 45px; /* More padding */
    border-radius: 20px; /* More rounded */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Stronger shadow */
    width: 100%;
    max-width: 480px; /* Slightly wider */
    text-align: center;
    animation: fadeInScaleAuth 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; /* Smoother, more impactful animation */
    position: relative; /* For potential pseudo-elements or transitions */
    overflow: hidden; /* Helps with some animations if added */
}
@keyframes fadeInScaleAuth {
    from { opacity: 0; transform: scale(0.90) translateY(30px) rotateX(-10deg); } /* More 3D feel */
    to { opacity: 1; transform: scale(1) translateY(0) rotateX(0deg); }
}
.auth-form-card img.auth-logo { /* Specific class for auth logos */
    max-height: 65px; /* Slightly larger */
    margin: 0 auto 25px;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.auth-form-card img.auth-logo:hover {
    transform: scale(1.08) rotate(-3deg); /* Playful hover */
    filter: drop-shadow(0 0 10px rgba(var(--bs-primary-rgb-values), 0.3));
}

.auth-form-card h2 {
    color: var(--app-primary-color);
    margin-bottom: 35px; /* More space */
    font-weight: 700; /* Bolder */
    letter-spacing: -0.5px; /* Tighter spacing */
}
.login-form-control {
    border-radius: 10px; /* More rounded */
    padding: 14px 18px; /* More padding */
    border: 1px solid #ced4da;
    transition: all 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease; /* Added transform */
    font-size: 1rem;
}
.login-form-control:focus {
    border-color: var(--app-primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb-values), 0.2), 0 3px 8px rgba(var(--bs-primary-rgb-values), 0.15); /* Enhanced focus shadow */
    transform: scale(1.02); /* Slight scale on focus */
}
.login-btn-primary {
    background: linear-gradient(90deg, var(--app-primary-color), var(--app-gradient-end));
    border: none;
    border-radius: 10px;
    padding: 14px 28px; /* More padding */
    font-size: 1.15rem;
    font-weight: bold;
    transition: all 0.35s ease, transform 0.2s ease, box-shadow 0.35s ease;
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 0.5px;
    animation: pulseButton 2.5s infinite ease-in-out; /* Subtle pulse animation */
}
@keyframes pulseButton {
    0% { transform: scale(1); box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb-values), 0.3); }
    50% { transform: scale(1.03); box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb-values), 0.45); }
    100% { transform: scale(1); box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb-values), 0.3); }
}
.login-btn-primary:hover {
    box-shadow: 0 8px 25px rgba(var(--bs-primary-rgb-values), 0.5); /* Stronger hover shadow */
    transform: translateY(-3px) scale(1.02); /* More lift */
    animation-play-state: paused; /* Pause pulse on hover */
}
.login-btn-primary:active {
    transform: translateY(0px) scale(0.98); /* Press down effect */
    box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb-values), 0.3);
}

.auth-form-card .form-text-links a { /* Class for "Forgot Password", "Sign Up" links */
    color: var(--app-primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease, letter-spacing 0.3s ease; /* Added letter-spacing transition */
}
.auth-form-card .form-text-links a:hover {
    color: var(--app-gradient-end);
    text-decoration: underline;
    letter-spacing: 0.3px; /* Slight letter spacing expand on hover */
}


.login-alert {
    border-radius: 8px;
    margin-top: 20px;
    animation: shakeAlert 0.5s ease-out; /* Shake animation for alerts */
}
@keyframes shakeAlert {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80% { transform: translateX(8px); }
}


/* Adjust body padding for dashboard content when active */
body.dashboard-active {
    padding-top: 70px;
    background-color: #f0f2f5;
}
body.auth-active {
    padding-top: 0;
    /* background is handled by .auth-page-container */
}

/* Navbar and Footer should be hidden on auth pages */
.navbar, footer {
    display: none !important; /* Use important to ensure override if JS is slow */
}
body.dashboard-active .navbar, body.dashboard-active footer {
    display: block !important; /* Re-enable for dashboard */
}
/* Specific class to hide loader on auth if needed (e.g., during quick auth page transitions) */
#pageLoader.auth-hidden {
    display: none !important;
}