/* ========== CSS Variables ========== */
:root {
    /* Dark Theme (Default) */
    --phoenix-bg: hsl(220, 20%, 8%);
    --phoenix-bg-card: hsl(220, 20%, 12%);
    --phoenix-bg-muted: hsl(220, 15%, 15%);
    --phoenix-border: hsl(220, 15%, 20%);
    --phoenix-foreground: hsl(210, 40%, 98%);
    --phoenix-foreground-muted: hsl(215, 15%, 55%);
    --phoenix-primary: hsl(180, 100%, 50%);
    --phoenix-primary-dim: hsl(185, 80%, 32%);
    --phoenix-secondary: hsl(25, 100%, 55%);
    --phoenix-success: hsl(145, 70%, 50%);
    --phoenix-warning: hsl(45, 100%, 55%);
    --phoenix-danger: hsl(0, 85%, 60%);
    --phoenix-secondary-bg: hsl(25 70% 18% / 0.55);
    --phoenix-secondary-border: hsl(25 100% 55% / 0.45);
    --phoenix-secondary-hover-border: hsl(25 100% 55% / 0.65);
    --phoenix-glow-secondary: 0 0 18px hsl(25 100% 55% / 0.35);
    --phoenix-white-soft: hsl(210, 30%, 96%);
    --phoenix-white-muted: hsl(210, 20%, 88%);
    /* Shadows & Glows */
    --phoenix-glow-primary: 0 0 20px hsl(180 100% 50% / 0.3);
    --phoenix-glow-secondary: 0 0 15px hsl(25 100% 55% / 0.3);
    /* Grid background */
    --phoenix-grid-color: hsl(180 100% 50% / 0.03);
    --phoenix-header-bg: hsl(220 20% 8% / 0.8);
    --phoenix-header-border: hsl(220 15% 20% / 0.5);
    /* Fonts */
    --font-display: "Orbitron", sans-serif;
    --font-body: "Rajdhani", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --chart-label: #ccc;
}



/* Light Theme - Blue Edition */
[data-theme="light"] {
    /* Main backgrounds with blue tint */
    --phoenix-bg: hsl(210, 40%, 97%); /* Light blue-gray background */
    --phoenix-bg-card: hsl(210, 50%, 98%); /* Very light blue for cards */
    --phoenix-bg-muted: hsl(210, 45%, 94%); /* Muted blue-gray */
    --phoenix-border: hsl(210, 40%, 82%); /* Blue-gray borders */
    /* Text colors */
    --phoenix-foreground: hsl(215, 25%, 20%); /* Dark blue-gray text */
    --phoenix-foreground-muted: hsl(215, 20%, 45%); /* Muted blue-gray text */
    /* Primary colors */
    --phoenix-primary: hsl(200, 85%, 45%); /* Vibrant blue */
    --phoenix-primary-dim: hsl(205, 75%, 55%); /* Lighter blue */
    /* Accent colors */
    --phoenix-secondary: hsl(25, 95%, 50%);
    --phoenix-success: hsl(145, 60%, 45%);
    --phoenix-warning: hsl(45, 95%, 50%);
    --phoenix-danger: hsl(0, 75%, 55%);
    /* Secondary backgrounds */
    --phoenix-secondary-bg: hsl(25 70% 95% / 0.7);
    --phoenix-secondary-border: hsl(25 100% 55% / 0.3);
    --phoenix-secondary-hover-border: hsl(25 100% 55% / 0.5);
    /* Glows */
    --phoenix-glow-primary: 0 0 20px hsl(200 85% 45% / 0.25);
    --phoenix-glow-secondary: 0 0 15px hsl(25 95% 50% / 0.2);
    /* Soft colors */
    --phoenix-white-soft: hsl(220, 20%, 15%);
    --phoenix-white-muted: hsl(220, 15%, 25%);
    /* Grid and header */
    --phoenix-grid-color: hsl(210 70% 50% / 0.08); /* Blue grid */
    --phoenix-header-bg: hsl(210 50% 98% / 0.95); /* Light blue header */
    --phoenix-header-border: hsl(210 40% 82% / 0.8); /* Blue border */
    --chart-label: #333;
}
/* ========== Base Styles ========== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--phoenix-bg);
    color: var(--phoenix-foreground);
    font-family: var(--font-body);
    background-image: linear-gradient(var(--phoenix-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--phoenix-grid-color) 1px, transparent 1px);
    background-size: 50px 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

main {
    flex: 1 1 auto;
    min-height: 0; /* important for overflow layouts */
}


.phoenix-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}



/* ========== Header ========== */
.phoenix-header {
    background: var(--phoenix-header-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--phoenix-header-border);
    z-index: 1000;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.logo-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: hsl(180 100% 50% / 0.1);
    border: 1px solid hsl(180 100% 50% / 0.3);
}

.logo-icon {
    color: var(--phoenix-primary);
    font-size: 1.25rem;
    font-weight: bold;
}

.logo-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--phoenix-primary);
    text-shadow: 0 0 10px hsl(180 100% 50% / 0.5);
}

.logo-subtitle {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--phoenix-secondary);
}
/* Navigation Items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--phoenix-foreground-muted);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .nav-item:hover {
        background: hsl(180 100% 50% / 0.1);
        color: var(--phoenix-foreground);
    }

    .nav-item.active {
        background: hsl(180 100% 50% / 0.15);
        color: var(--phoenix-primary);
        border: 1px solid hsl(180 100% 50% / 0.3);
    }

.nav-icon {
    font-size: 0.75rem;
}

.nav-label {
    font-weight: 500;
}
/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: hsl(220 15% 15% / 0.5);
    border: 1px solid hsl(220 15% 20% / 0.5);
    border-radius: 8px;
}

    .search-box i {
        color: var(--phoenix-foreground-muted);
        font-size: 0.875rem;
    }

.search-input {
    background: transparent;
    border: none;
    color: var(--phoenix-foreground);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    width: 140px;
    outline: none;
}

    .search-input::placeholder {
        color: var(--phoenix-foreground-muted);
    }
/* Icon Buttons */
.icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid var(--phoenix-primary) !important;
    border-radius: 8px;
    color: var(--phoenix-foreground-muted);
    transition: all 0.2s ease;
    cursor: pointer;
}

.logout {
    border: 1px solid var(--phoenix-secondary) !important;
}

.icon-btn:hover {
    background: hsl(220 15% 15% / 0.5);
    color: var(--phoenix-foreground);
}

.icon-btn i {
    font-size: 1.1rem;
}

.notification-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--phoenix-secondary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
/* User Badge */
.user-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: hsl(220 20% 12% / 0.5);
    border: 1px solid hsl(220 15% 20% / 0.5);
    border-radius: 8px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

[data-theme="light"] .user-badge {
    background: hsl(0 0% 100% / 0.8);
    border: 1px solid hsl(220 15% 85% / 0.7);
}

.user-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--phoenix-foreground-muted);
    transition: color 0.3s ease;
}

.user-value {
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--phoenix-foreground);
    transition: color 0.3s ease;
}

.badge-divider {
    width: 1px;
    height: 28px;
    background: var(--phoenix-border);
    transition: background 0.3s ease;
}
/* Status Dots */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--phoenix-foreground-muted);
}

    .status-dot.status-active {
        background: var(--phoenix-primary);
        box-shadow: 0 0 8px var(--phoenix-primary);
        animation: pulse 2s infinite;
    }

    .status-dot.status-warning {
        background: var(--phoenix-secondary);
        box-shadow: 0 0 8px var(--phoenix-secondary);
    }
/* ========== Main Content ========== */
.section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--phoenix-foreground);
    margin: 0;
    transition: color 0.3s ease;
}

@media (min-width: 992px) {
    .section-title {
        font-size: 2rem;
    }
}

.status-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--phoenix-primary);
    letter-spacing: 0.1em;
}


/* ========== Footer ========== */
.phoenix-footer {
    background: var(--phoenix-header-bg);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--phoenix-header-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.footer-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--phoenix-foreground-muted);
}

.footer-value {
    font-family: var(--font-display);
    font-size: 0.8rem;
}

.footer-sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--phoenix-secondary);
}

.footer-copyright {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--phoenix-foreground-muted);
}
/* ========== Floating Action Button ========== */
.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, var(--phoenix-primary), hsl(180 100% 40%) );
    border: none;
    border-radius: 50%;
    color: hsl(220 20% 8%);
    cursor: pointer;
    box-shadow: 0 4px 20px hsl(180 100% 50% / 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
}

    .fab:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 30px hsl(180 100% 50% / 0.5);
    }

    .fab i {
        font-size: 1.5rem;
    }

.is-invalid {
    border: 1px solid var(--phoenix-danger) !important;
}

/* =====================================================
   LIGHT THEME OVERRIDES - PhoenixLayout
   Blue-tinted hover states and interactive elements
===================================================== */

/* Icon Button Hover - Light Theme */
[data-theme="light"] .icon-btn:hover {
    background: hsl(210 55% 92% / 0.7) !important;
    color: hsl(215 25% 20%);
}

/* User Badge - Light Theme Enhancement */
[data-theme="light"] .user-badge:hover {
    background: hsl(210 60% 95%);
    border-color: hsl(210 50% 78%);
}

/* Search Box - Light Theme */
[data-theme="light"] .search-box {
    background: hsl(210 60% 94% / 0.7);
    border: 1px solid hsl(210 50% 82%);
}

    [data-theme="light"] .search-box i {
        color: hsl(215 20% 45%);
    }

/* Nav Item - Light Theme */
[data-theme="light"] .nav-item {
    color: hsl(215 20% 40%);
}

    [data-theme="light"] .nav-item:hover {
        background: hsl(210 65% 92% / 0.7);
        color: hsl(215 25% 20%);
    }

    [data-theme="light"] .nav-item.active {
        background: hsl(200 80% 92% / 0.8);
        color: hsl(200 85% 40%);
        border: 1px solid hsl(200 85% 50% / 0.4);
    }

/* Logo Box - Light Theme */
[data-theme="light"] .logo-box {
    background: hsl(200 85% 92% / 0.6);
    border: 1px solid hsl(200 85% 60% / 0.5);
}

/* FAB - Light Theme */
[data-theme="light"] .fab {
    background: linear-gradient(135deg, hsl(200 85% 50%), hsl(205 75% 60%));
    color: white;
    box-shadow: 0 4px 20px hsl(200 85% 45% / 0.4);
}

    [data-theme="light"] .fab:hover {
        box-shadow: 0 6px 30px hsl(200 85% 45% / 0.5);
    }

/* Footer - Light Theme Text */
[data-theme="light"] .footer-label {
    color: hsl(215 20% 45%);
}

[data-theme="light"] .footer-value {
    color: hsl(215 25% 25%);
}

[data-theme="light"] .footer-sub {
    color: hsl(215 20% 50%);
}

[data-theme="light"] .footer-copyright {
    color: hsl(215 20% 45%);
}

/* Status Text - Light Theme */
[data-theme="light"] .status-text {
    color: hsl(200 85% 40%);
}

/* Module Grid Items - Light Theme with Gradient */
[data-theme="light"] .module-grid-item {
    background: linear-gradient(135deg, hsl(210 60% 96%), hsl(210 55% 93%));
    border: 1px solid hsl(210 50% 85%);
    box-shadow: 0 2px 8px hsl(210 30% 80% / 0.3);
}

    [data-theme="light"] .module-grid-item:hover {
        background: linear-gradient(135deg, hsl(210 65% 93%), hsl(210 60% 90%));
        border-color: hsl(200 85% 60% / 0.6);
        box-shadow: 0 6px 16px hsl(200 70% 60% / 0.3);
        transform: translateY(-2px);
    }

/* Navbar Icon Visibility - Light Theme */
[data-theme="light"] .icon-btn i {
    color: hsl(215 25% 30%); /* Dark blue-gray icons */
}

[data-theme="light"] .icon-btn {
    border-color: hsl(200 85% 50% / 0.5) !important;
}

    [data-theme="light"] .icon-btn:hover i {
        color: hsl(200 85% 40%); /* Bright blue on hover */
    }

[data-theme="light"] .logout {
    border-color: hsl(25 95% 50% / 0.5) !important;
}

    [data-theme="light"] .logout i {
        color: hsl(25 95% 45%);
    }

/* Grid Icon - Light Theme */
[data-theme="light"] .grid-icon {
    background: linear-gradient(135deg, hsl(200 85% 88%), hsl(205 80% 85%));
    color: hsl(200 85% 35%);
    border: 1px solid hsl(200 85% 60% / 0.4);
}

.kpi-chart-wrapper {
    height: 40px;
    width: 100%;
}

.module-card {
    min-height: 140px !important;
}