:root{

    --bg:#060a12;
    --sidebar:#080d18;
    --card:rgba(15, 23, 42, 0.72);
    --card2:rgba(23, 32, 51, 0.72);
    --border:rgba(255,255,255,0.07);

    --text:#f1f5f9;
    --muted:#64748b;
    --font-sans:'Plus Jakarta Sans', sans-serif;
    --font-mono:'Share Tech Mono', monospace;

    --green:#10b981;
    --blue:#38bdf8;
    --orange:#f59e0b;
    --red:#f43f5e;
    --yellow:#facc15;
    
    --neon-blue: #38bdf8;
    --neon-green: #10b981;
    --neon-orange: #f59e0b;
    --neon-red: #f43f5e;
    --neon-purple: #a78bfa;

    --grad-blue: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    --grad-green: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --grad-orange: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --grad-purple: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    --grad-red: linear-gradient(135deg, #be123c 0%, #f43f5e 100%);

}

/* ======================================================
   GLOBAL
====================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    overflow-x: hidden;
    position: relative;

}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 80% 60% at 15% 20%, rgba(56, 189, 248, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 80%, rgba(124, 58, 237, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(16, 185, 129, 0.025) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: bgPulse 12s ease-in-out infinite alternate;
}

@keyframes bgPulse {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ======================================================
   SCROLLBAR
====================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0f172a;
}

::-webkit-scrollbar-thumb{

    background:#334155;
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{
    background:#475569;
}

/* ======================================================
   LAYOUT
====================================================== */

.main-layout{

    display:flex;
    min-height:100vh;

}

/* ======================================================
   SIDEBAR
====================================================== */

.sidebar{

    width: 280px;

    background: linear-gradient(180deg, #0c1221 0%, #090e1a 100%);

    padding: 28px 16px;

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;

    border-right: 1px solid rgba(56, 189, 248, 0.08);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5), inset -1px 0 0 rgba(56, 189, 248, 0.05);

    display: flex;
    flex-direction: column;
    overflow-y: auto;

}

.sidebar-logo{

    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
    padding: 0 4px;

}

.sidebar-logo-icon{

    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0ea5e9, #2563eb, #7c3aed);
    font-size: 22px;
    flex-shrink: 0;
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.3),
        0 0 24px rgba(56, 189, 248, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.5);

}

.sidebar-logo-text{

    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #f1f5f9, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}

.menu-title{

    color: rgba(100, 116, 139, 0.6);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: 2.5px;
    padding: 0 6px;
    text-transform: uppercase;

}

.sidebar-menu{

    display: flex;
    flex-direction: column;
    gap: 6px;

}

.menu-item{

    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;

}

.menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--neon-blue);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.menu-item:hover{

    transform: translateX(4px);
    background: rgba(56, 189, 248, 0.06);
    border-color: rgba(56, 189, 248, 0.1);

}

.menu-item.active{

    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(37, 99, 235, 0.1));
    border-color: rgba(56, 189, 248, 0.2);

}

.menu-item.active::before {
    opacity: 1;
}

.menu-icon{

    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(56, 189, 248, 0.08);
    color: #38bdf8;
    font-size: 17px;
    flex-shrink: 0;
    transition: all 0.25s ease;
    border: 1px solid rgba(56, 189, 248, 0.12);

}

.menu-item.active .menu-icon {
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.15));
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
}

.menu-name{
    font-weight: 700;
    font-size: 14px;
    color: rgba(241, 245, 249, 0.85);
}

.menu-item.active .menu-name {
    color: #f1f5f9;
}

.menu-desc{
    font-size: 11px;
    color: rgba(100, 116, 139, 0.8);
    margin-top: 2px;
}

/* ======================================================
   MAIN CONTENT
====================================================== */

.main-content{

    margin-left: 280px;
    width: calc(100% - 280px);
    position: relative;
    z-index: 1;

}

/* ======================================================
   NAVBAR
====================================================== */

.navbar-custom{

    height: 72px;
    padding: 0 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: rgba(8, 13, 24, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    position: sticky;
    top: 0;
    z-index: 99;

    border-bottom: 1px solid rgba(56, 189, 248, 0.08);
    box-shadow: 0 1px 0 rgba(56, 189, 248, 0.04), 0 4px 24px rgba(0, 0, 0, 0.4);

}

.logo-title{

    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}

/* ======================================================
   NAVBAR CHIPS & CONTROLS (redesigned)
====================================================== */

/* Base chip */
.nb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
}

/* Green / ONLINE chip */
.nb-chip--green {
    color: #4ade80;
    background: linear-gradient(135deg, rgba(34,197,94,0.14) 0%, rgba(16,185,129,0.07) 100%);
    border: 1px solid rgba(74,222,128,0.35);
    box-shadow: 0 0 18px rgba(34,197,94,0.15), inset 0 1px 0 rgba(74,222,128,0.12);
}
.nb-chip--green:hover {
    box-shadow: 0 0 30px rgba(34,197,94,0.28), inset 0 1px 0 rgba(74,222,128,0.18);
    border-color: rgba(74,222,128,0.55);
}

/* Animated pulse dot inside chip */
.nb-dot-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.nb-dot-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.5);
    animation: nbPing 1.6s ease-out infinite;
}
.nb-dot-core {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e, 0 0 16px rgba(34,197,94,0.6);
    flex-shrink: 0;
}
@keyframes nbPing {
    0%   { transform: scale(0.9); opacity: 0.8; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Clock chip */
.nb-chip--clock {
    color: #7dd3fc;
    background: linear-gradient(135deg, rgba(56,189,248,0.1) 0%, rgba(99,102,241,0.06) 100%);
    border: 1px solid rgba(56,189,248,0.2);
    box-shadow: 0 0 14px rgba(56,189,248,0.08), inset 0 1px 0 rgba(56,189,248,0.08);
    gap: 7px;
}
.nb-chip--clock:hover {
    border-color: rgba(56,189,248,0.38);
    box-shadow: 0 0 22px rgba(56,189,248,0.16);
}
.nb-clock-text {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: #93c5fd;
    letter-spacing: 1.5px;
    line-height: 1;
}

/* Logout button — solid + glow */
.nb-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid rgba(244, 63, 94, 0.5);
    background: linear-gradient(135deg, rgba(244,63,94,0.22) 0%, rgba(190,18,60,0.14) 100%);
    color: #fda4af;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 16px rgba(244,63,94,0.18), inset 0 1px 0 rgba(255,100,130,0.12);
    position: relative;
    overflow: hidden;
}
.nb-logout-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transition: left 0.5s ease;
}
.nb-logout-btn:hover::before {
    left: 160%;
}
.nb-logout-btn:hover {
    background: linear-gradient(135deg, rgba(244,63,94,0.38) 0%, rgba(190,18,60,0.26) 100%);
    border-color: rgba(244, 63, 94, 0.75);
    box-shadow: 0 0 28px rgba(244,63,94,0.35), 0 6px 20px rgba(244,63,94,0.2);
    transform: translateY(-2px);
    color: #fff;
}
.nb-logout-btn:active {
    transform: translateY(0);
    box-shadow: 0 0 12px rgba(244,63,94,0.2);
}

/* ======================================================
   PAGE
====================================================== */

.page-section{
    display: none;
    animation: pageIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-section.active{
    display: block;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ======================================================
   CARD
====================================================== */

.dashboard-card{

    background: linear-gradient(145deg, rgba(12, 18, 33, 0.9), rgba(18, 27, 48, 0.85));
    border-radius: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;

}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.dashboard-card:hover{

    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, 0.18);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(56, 189, 248, 0.08);

}

.dashboard-card:hover::before {
    opacity: 1;
}

.dashboard-card h4 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f1f5f9, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-card h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.2), transparent);
}

/* ======================================================
   SUMMARY
 ====================================================== */

.summary-card{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.card-label{

    color:var(--muted);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    margin-bottom:8px;

}

.big-number{

    font-family:var(--font-mono);
    font-size:36px;
    font-weight:bold;
    letter-spacing: -0.5px;

}

.summary-icon{

    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s ease;
    flex-shrink: 0;

}

.summary-icon.blue{

    background: rgba(56, 189, 248, 0.1);
    color: var(--neon-blue);
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);

}

.summary-icon.green{

    background: rgba(16, 185, 129, 0.1);
    color: var(--neon-green);
    border: 1px solid rgba(16, 185, 129, 0.25);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);

}

.summary-icon.orange{

    background: rgba(245, 158, 11, 0.1);
    color: var(--neon-orange);
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);

}

.summary-icon.purple{

    background: rgba(167, 139, 250, 0.1);
    color: var(--neon-purple);
    border: 1px solid rgba(167, 139, 250, 0.25);
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.2);

}

/* ======================================================
   FLOW
====================================================== */

.flow-wrapper {
    position: relative;
    height: 650px;
    max-width: 1200px;
    margin: 20px auto;
}

.flow-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

/* Base Card Style for Flow Nodes */
.flow-node-card {
    position: absolute;
    width: 330px;
    height: 280px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 5;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    cursor: pointer;
}

.flow-node-card:hover {
    transform: translateY(-5px);
    background: rgba(15, 23, 42, 0.75);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* Card Positions */
.solar-card {
    top: 20px;
    left: 20px;
    height: 310px;
    border-color: rgba(56, 189, 248, 0.15);
}
.solar-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 15px 40px rgba(56, 189, 248, 0.15);
}

.load-card {
    top: 20px;
    right: 20px;
    border-color: rgba(245, 158, 11, 0.15);
}
.load-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.15);
}

.utility-card {
    bottom: 20px;
    left: 20px;
    border-color: rgba(244, 63, 94, 0.15);
}
.utility-card:hover {
    border-color: rgba(244, 63, 94, 0.4);
    box-shadow: 0 15px 40px rgba(244, 63, 94, 0.15);
}

.battery-card {
    bottom: 20px;
    right: 20px;
    border-color: rgba(16, 185, 129, 0.15);
}
.battery-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.15);
}

/* Card Header */
.flow-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.flow-card-icon-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flow-card-icon-title i {
    font-size: 16px;
}

.flow-card-icon-title span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

.flow-status-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 50px;
}

.status-pv {
    background: rgba(56, 189, 248, 0.1);
    color: var(--neon-blue);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.status-load {
    background: rgba(245, 158, 11, 0.1);
    color: var(--neon-orange);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-grid {
    background: rgba(244, 63, 94, 0.1);
    color: var(--neon-red);
    border: 1px solid rgba(244, 63, 94, 0.2);
}

.status-bat {
    background: rgba(16, 185, 129, 0.1);
    color: var(--neon-green);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Card Body Layout */
.flow-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flow-card-body.block-layout {
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

/* Circular Gauges */
.gauge-container {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto;
}

.gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-value {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.gauge-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    width: 100%;
}

.gauge-value-num {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.gauge-value-unit {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}

.gauge-value-label {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Params List inside Cards */
.flow-params-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-param-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.flow-param-item:last-child {
    border-bottom: none;
}

.flow-param-item span {
    color: var(--muted);
    font-weight: 500;
}

.flow-param-item strong {
    font-family: var(--font-mono);
    color: var(--text);
    font-size: 13px;
}

/* Inverter Central Card */
.flow-inverter-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 240px;
    z-index: 10;
}

.inverter-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%);
    z-index: 1;
    animation: pulseGlow 3s infinite ease-in-out;
}

.inverter-casing {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.85) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.05);
    z-index: 2;
    overflow: hidden;
}

.inverter-casing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--grad-blue);
}

.inverter-top-vents {
    width: 80%;
    height: 6px;
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}

.inverter-top-vents::before, .inverter-top-vents::after {
    content: '';
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
}

.inverter-brand {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
}

.inverter-display {
    width: 100%;
    background: rgba(7, 11, 19, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 12px 6px;
    text-align: center;
    margin: 12px 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.inv-display-power {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.inv-display-label {
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.inverter-leds {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 8px;
}

.led-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.led-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.led-dot.blue.active {
    background: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
    border-color: #7dd3fc;
}

.led-dot.red.active {
    background: var(--neon-red);
    box-shadow: 0 0 10px var(--neon-red);
    border-color: #fda4af;
}

.led-dot.green.active {
    background: var(--neon-green);
    box-shadow: 0 0 10px var(--neon-green);
    border-color: #6ee7b7;
}

.led-label {
    font-size: 7px;
    font-weight: 800;
    color: var(--muted);
}

/* Thermometer graphic (Battery side-by-side) */
.battery-visual-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 85px;
    gap: 8px;
}

.thermometer-container {
    display: flex;
    align-items: center;
    position: relative;
    height: 120px;
    width: 60px;
}

.thermo-ticks {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90px;
    font-size: 7px;
    color: var(--muted);
    font-family: var(--font-mono);
    position: absolute;
    left: 2px;
    top: 5px;
    text-align: right;
    width: 16px;
    line-height: 1;
}

.thermometer-glass {
    width: 10px;
    height: 95px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: absolute;
    left: 24px;
    top: 5px;
}

.thermometer-level {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--neon-green);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 10px var(--neon-green);
    transition: height 0.5s ease, background 0.5s ease;
}

.thermometer-bottom-bulb {
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--neon-green);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 12px var(--neon-green);
    transition: background 0.5s ease;
}

.thermo-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.battery-soc-radial {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 8px;
    width: 100%;
}

.soc-large-val {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.soc-large-label {
    font-size: 8px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* iOS Toggle Switch - Upgraded (.ios-switch is alias for .switch for backward compat) */
.switch,
.ios-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input,
.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider,
.ios-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 34px;
}

.switch .slider:before,
.ios-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #cbd5e1;
    transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.switch input:checked + .slider,
.ios-switch input:checked + .slider {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35), inset 0 0 8px rgba(16, 185, 129, 0.1);
}

.switch input:checked + .slider:before,
.ios-switch input:checked + .slider:before {
    transform: translateX(20px);
    background: var(--neon-green);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}


/* Glowing text color utilities */
.text-blue { color: var(--neon-blue) !important; }
.text-orange { color: var(--neon-orange) !important; }
.text-red { color: var(--neon-red) !important; }
.text-green { color: var(--neon-green) !important; }

/* Custom Animations */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
}

@keyframes pulseLed {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

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

.fa-spin-slow {
    animation: spin-slow 15s infinite linear;
}

/* ======================================================
   BATTERY RACK PARAMETERS & STATUS
====================================================== */

.dashboard-card h5 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.status-online, .status-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.status-online {
    background: rgba(16, 185, 129, 0.1);
    color: var(--neon-green);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-online::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
    display: inline-block;
    animation: cctvDotPulse 1.5s infinite;
}

.status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--neon-orange);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-warning::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-orange);
    box-shadow: 0 0 8px var(--neon-orange);
    display: inline-block;
    animation: cctvDotPulse 1.5s infinite;
}

.parameter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.parameter:last-of-type {
    border-bottom: none;
}

.parameter span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.parameter strong {
    font-family: var(--font-mono);
    color: var(--text);
    font-size: 15px;
    font-weight: bold;
}

/* Bootstrap Progress Bar custom overrides */
.progress {
    background-color: rgba(255, 255, 255, 0.05) !important;
    height: 6px !important;
    border-radius: 10px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
    margin-top: 15px;
}

.progress-bar {
    background: var(--grad-green) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px var(--neon-green);
}

/* Context-aware warning state for warning cards */
.dashboard-card:has(.status-warning) .progress-bar {
    background: var(--grad-orange) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

.dashboard-card:has(.status-warning) .progress-bar::after {
    box-shadow: 0 0 8px var(--neon-orange) !important;
}

/* ======================================================
   CELL MONITORING
====================================================== */

.cell-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;

    gap:20px;
    flex-wrap:wrap;

}

.rack-selector{

    display:flex;
    gap:8px;
    flex-wrap:wrap;
    background:rgba(15, 23, 42, 0.4);
    padding:6px;
    border-radius:16px;
    border:1px solid rgba(255, 255, 255, 0.05);

}

.rack-btn{

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:12px;

    cursor:pointer;

    background:transparent;

    border:none;

    transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    font-size:13px;
    font-weight:bold;

    color:var(--muted);

}

.rack-btn:hover{

    color:var(--text);

}

.rack-btn.active{

    background:var(--grad-blue);
    color:white;
    box-shadow:0 4px 15px rgba(56, 189, 248, 0.25);

}

.cell-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:18px;

}

.cell-box{

    background:rgba(15, 23, 42, 0.45);

    border-radius:20px;

    padding:20px;

    display:flex;
    align-items:center;
    gap:18px;

    border:1px solid var(--border);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}

.cell-box:hover{

    transform:translateY(-4px);
    border-color:rgba(56, 189, 248, 0.2);
    box-shadow:0 10px 25px rgba(0,0,0,0.3);

}

.cell-battery{

    width:38px;
    height:90px;

    border:2px solid rgba(255,255,255,0.15);

    border-radius:12px;

    position:relative;

    overflow:hidden;

    background:rgba(11, 17, 30, 0.6);

    display:flex;
    align-items:flex-end;

}

.cell-battery::before{

    content:"";

    position:absolute;

    top:-5px;
    left:50%;

    transform:translateX(-50%);

    width:14px;
    height:5px;

    background:rgba(255,255,255,0.15);

    border-radius:2px 2px 0 0;

}

.battery-level{

    width:100%;
    border-radius:0 0 10px 10px;
    transition:height 0.5s ease-in-out;

}

.level-good{

    background:
    linear-gradient(
        to top,
        #10b981,
        #34d399
    );

}

.level-warning{

    background:
    linear-gradient(
        to top,
        #f59e0b,
        #fbbf24
    );

}

.level-danger{

    background:
    linear-gradient(
        to top,
        #f43f5e,
        #fb7185
    );

}

.cell-info{
    flex:1;
}

.cell-name{

    font-size:12px;
    font-weight:700;
    color:var(--muted);
    letter-spacing:1px;
    margin-bottom:6px;
    text-transform:uppercase;

}

.cell-voltage{

    font-family:var(--font-mono);
    font-size:26px;
    font-weight:bold;
    color:var(--text);
    margin-bottom:6px;
    letter-spacing:-0.5px;

}

.cell-detail{

    display:flex;
    justify-content:space-between;
    font-size:11px;
    border-top:1px solid rgba(255,255,255,0.04);
    padding-top:8px;
    margin-top:8px;

}

.cell-min{
    font-family:var(--font-mono);
    color:var(--neon-orange);
}

.cell-max{
    font-family:var(--font-mono);
    color:var(--neon-green);
}

/* ======================================================
   CHART
====================================================== */

.chart-box{
    height:350px;
}

#incomeMode {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
    border-radius: 12px !important;
    padding: 8px 36px 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

#incomeMode:focus {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 0 10px rgba(56, 189, 248, 0.15) !important;
    outline: none !important;
}

/* ======================================================
   ALARM
====================================================== */

.alarm-item{

    background:rgba(244, 63, 94, 0.06);
    border:1px solid rgba(244, 63, 94, 0.15);
    border-left:4px solid var(--red);
    padding:16px;
    border-radius:16px;
    margin-bottom:14px;
    box-shadow:0 4px 15px rgba(244, 63, 94, 0.05);
    transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation:blink 2s infinite;

}

.alarm-item:hover {

    border-color:rgba(244, 63, 94, 0.35);
    box-shadow:0 6px 20px rgba(244, 63, 94, 0.08), 0 0 15px rgba(244, 63, 94, 0.15);
    transform:translateX(4px);

}

.alarm-item strong {

    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    color:var(--red);
    display:block;
    margin-bottom:4px;
    text-transform:uppercase;

}

.alarm-item div {

    font-size:13px;
    color:var(--text);
    opacity:0.85;

}

@keyframes blink{

    50%{
        opacity:0.6;
    }

}

/* ======================================================
   IOT SMART HOME MODERN
====================================================== */

.iot-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(330px,1fr));

    gap:24px;

}

.iot-modern-card{

    position: relative;
    overflow: hidden;

    background: linear-gradient(160deg, rgba(10, 16, 32, 0.92) 0%, rgba(16, 25, 48, 0.88) 100%);
    border-radius: 24px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}

.iot-modern-card:hover{

    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, 0.2);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.07);

}

.iot-modern-card::before{

    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.25), transparent);

}

.iot-top{

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;

}

.iot-device-info{

    display: flex;
    align-items: center;
    gap: 14px;

}

.iot-device-icon{

    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s ease;

}

.iot-device-icon.lamp{

    color: #475569;
    background: rgba(250, 204, 21, 0.05);
    border-color: rgba(250, 204, 21, 0.08);

}

.iot-device-icon.lamp.active{

    color: #fbbf24;
    background: rgba(250, 204, 21, 0.12);
    border-color: rgba(250, 204, 21, 0.3);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.25);
    text-shadow: 0 0 16px rgba(250, 204, 21, 0.7);
    animation: lampGlow 2s ease-in-out infinite;

}

@keyframes lampGlow{
    0%, 100% { box-shadow: 0 0 18px rgba(250, 204, 21, 0.25); }
    50% { box-shadow: 0 0 30px rgba(250, 204, 21, 0.45); }
}

.iot-device-icon.fan{

    color: #475569;
    background: rgba(56, 189, 248, 0.05);
    border-color: rgba(56, 189, 248, 0.08);

}

.iot-device-icon.fan.active{

    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);

}

.iot-device-icon.fan.active i{

    animation: fanRotate 1.2s linear infinite;

}

@keyframes fanRotate{
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.iot-device-icon.ac{

    color: #475569;
    background: rgba(103, 232, 249, 0.05);
    border-color: rgba(103, 232, 249, 0.08);

}

.iot-device-icon.ac.active{

    color: #67e8f9;
    background: rgba(103, 232, 249, 0.12);
    border-color: rgba(103, 232, 249, 0.3);
    box-shadow: 0 0 20px rgba(103, 232, 249, 0.2);
    text-shadow: 0 0 16px rgba(103, 232, 249, 0.6);
    animation: acPulse 2s ease-in-out infinite;

}

@keyframes acPulse{
    0%, 100% { box-shadow: 0 0 18px rgba(103, 232, 249, 0.2); }
    50% { box-shadow: 0 0 30px rgba(103, 232, 249, 0.4); }
}

.iot-device-name{

    font-size: 17px;
    font-weight: 800;
    margin-bottom: 3px;
    color: #f1f5f9;

}

.iot-device-desc{

    color: rgba(100, 116, 139, 0.9);
    font-size: 12px;
    margin-bottom: 6px;

}

.iot-device-mode-text{

    color: rgba(148, 163, 184, 0.6);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

}

.iot-mode-selector{

    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.04);

}

.mode-btn{

    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(100, 116, 139, 0.8);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.25s ease;

}

.mode-btn:hover{
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
}

.mode-btn.active{

    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(37, 99, 235, 0.14));
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.12);

}

.iot-control-area{

    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* ======================================================
   SCHEDULE BUTTON
====================================================== */

.schedule-btn{

    width: 100%;
    border: none;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
    color: white;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.2);

}

.schedule-btn:hover{

    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35);
    background: linear-gradient(135deg, #2563eb, #38bdf8);

}

/* Old .switch block replaced by new one above (from iOS upgrade section) */
/* Keeping .slider for backward compatibility */
.slider{

    position: absolute;
    inset: 0;
    background: rgba(51, 65, 85, 0.8);
    border-radius: 50px;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.slider::before{

    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 4px;
    bottom: 4px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

}

.switch input:checked + .slider{

    background: rgba(16, 185, 129, 0.3);
    border: 1px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.35);

}

.switch input:checked + .slider::before{

    transform: translateX(34px);
    background: var(--neon-green);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);

}

/* ======================================================
   AC REMOTE PANEL
====================================================== */

.ac-remote-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ac-remote-panel.ac-disabled .ac-temp-display,
.ac-remote-panel.ac-disabled .ac-mode-row,
.ac-remote-panel.ac-disabled .ac-fan-row,
.ac-remote-panel.ac-disabled .wh-temp-block,
.ac-remote-panel.ac-disabled .wh-mode-row {
    opacity: 0.4;
    pointer-events: none;
}

/* Top row: power switch + temperature */
.ac-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.ac-temp-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ac-temp-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(103, 232, 249, 0.25);
    background: rgba(103, 232, 249, 0.08);
    color: #67e8f9;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ac-temp-btn:hover {
    background: rgba(103, 232, 249, 0.18);
    box-shadow: 0 0 12px rgba(103, 232, 249, 0.25);
}

.ac-temp-value {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 800;
    color: #67e8f9;
    text-shadow: 0 0 12px rgba(103, 232, 249, 0.5);
    min-width: 52px;
    text-align: center;
    line-height: 1;
}

.ac-temp-deg {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
    vertical-align: super;
}

/* Mode row */
.ac-mode-row {
    display: flex;
    gap: 5px;
}

.ac-mode-pill {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: rgba(100, 116, 139, 0.8);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ac-mode-pill i {
    font-size: 12px;
}

.ac-mode-pill:hover {
    background: rgba(103, 232, 249, 0.08);
    color: #67e8f9;
}

.ac-mode-pill.active {
    background: rgba(103, 232, 249, 0.14);
    border-color: rgba(103, 232, 249, 0.35);
    color: #67e8f9;
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.15);
}

/* Fan row */
.ac-fan-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.ac-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(100, 116, 139, 0.7);
    white-space: nowrap;
}

.ac-fan-pills {
    display: flex;
    gap: 4px;
    flex: 1;
}

.ac-fan-pill {
    flex: 1;
    padding: 5px 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: rgba(100, 116, 139, 0.8);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ac-fan-pill:hover {
    background: rgba(56, 189, 248, 0.08);
    color: #38bdf8;
}

.ac-fan-pill.active {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
}

.ac-swing-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: rgba(100, 116, 139, 0.8);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ac-swing-btn.active {
    background: rgba(167, 139, 250, 0.14);
    border-color: rgba(167, 139, 250, 0.35);
    color: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.15);
}

/* ======================================================
   WATER HEATER PANEL (Ariston)
====================================================== */

/* Override temp button color to orange/amber for WH */
.wh-panel .wh-btn {
    border-color: rgba(251, 146, 60, 0.3);
    background: rgba(251, 146, 60, 0.08);
    color: #fb923c;
}
.wh-panel .wh-btn:hover {
    background: rgba(251, 146, 60, 0.18);
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.25);
}

/* Target temp display in orange/amber */
.wh-panel .wh-target {
    color: #fb923c;
    text-shadow: 0 0 12px rgba(251, 146, 60, 0.5);
}

/* Layout: current temp → target temp */
.wh-temp-block {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.wh-current-temp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

.wh-curr-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(100, 116, 139, 0.6);
    text-transform: uppercase;
}

.wh-curr-val {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.7);
    line-height: 1;
}

.wh-curr-val.heating {
    color: #fb923c;
    text-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
    animation: whHeatPulse 2s ease-in-out infinite;
}

@keyframes whHeatPulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1; text-shadow: 0 0 16px rgba(251, 146, 60, 0.8); }
}

.wh-heat-icon {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 9px;
    color: #fb923c;
    animation: whHeatPulse 1.5s ease-in-out infinite;
}

.wh-divider {
    font-size: 14px;
    color: rgba(100, 116, 139, 0.4);
    flex-shrink: 0;
}

/* WH Mode pills: ECO=green, BOOST=orange, SMART=purple */
.wh-mode-row {
    justify-content: center;
}

.wh-mode-pill {
    padding: 9px 6px;
}

.wh-mode-pill.active[onclick*="eco"] {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
    color: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.15);
}

.wh-mode-pill.active[onclick*="boost"] {
    background: rgba(251, 146, 60, 0.14);
    border-color: rgba(251, 146, 60, 0.35);
    color: #fb923c;
    box-shadow: 0 0 10px rgba(251, 146, 60, 0.15);
}

.wh-mode-pill.active[onclick*="smart"] {
    background: rgba(167, 139, 250, 0.14);
    border-color: rgba(167, 139, 250, 0.35);
    color: #a78bfa;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.15);
}

/* Device icon orange glow for water_heater type */
.iot-device-icon.water_heater.active {
    background: rgba(251, 146, 60, 0.15);
    box-shadow: 0 0 20px rgba(251, 146, 60, 0.25);
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.3);
}

/* ======================================================
   SCHEDULE MODAL
====================================================== */

.schedule-modal{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,0.7);

    backdrop-filter:blur(5px);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:9999;

    padding:20px;

}

.schedule-modal.active{

    display:flex;

}

.schedule-content{

    width:100%;
    max-width:700px;

    background:
    linear-gradient(
        145deg,
        #172033,
        #1e293b
    );

    border-radius:26px;

    padding:30px;

    border:
    1px solid rgba(255,255,255,0.06);

}

.schedule-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;

}

.schedule-title{

    font-size:24px;
    font-weight:bold;

}

.schedule-close{

    width:42px;
    height:42px;

    border:none;

    border-radius:12px;

    background:#0f172a;

    color:#94a3b8;

    cursor:pointer;

    font-size:18px;

}

.schedule-grid{

    display:grid;
    gap:16px;

}

.schedule-row{

    display:grid;

    grid-template-columns:
    120px 1fr 1fr;

    gap:14px;

    align-items:center;

}

.schedule-day{

    font-weight:bold;
    color:#cbd5e1;

}

.schedule-input{

    height:46px;

    border:none;

    border-radius:12px;

    background:#0f172a;

    color:#fff;

    padding:0 14px;

    outline:none;

}

.schedule-save{

    margin-top:28px;

    width:100%;

    height:54px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
        145deg,
        #22c55e,
        #16a34a
    );

    color:white;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;

    transition:0.3s ease;

}

.schedule-save:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 24px rgba(34,197,94,0.35);

}


/* ======================================================
   CCTV PAGE HEADER
====================================================== */

.cctv-page-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;

    margin-bottom:28px;

}

.cctv-page-title{

    font-size:28px;
    font-weight:bold;

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:6px;

}

.cctv-page-title i{
    color:#38bdf8;
}

.cctv-page-sub{

    color:#64748b;
    font-size:14px;

}

.cctv-header-right{

    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;

}

.cctv-system-online{

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(34,197,94,0.1);
    border:1px solid rgba(34,197,94,0.25);

    color:#22c55e;
    font-size:13px;
    font-weight:bold;

}

.cctv-dot-blink{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#22c55e;

    animation:cctvDotPulse 1.5s infinite;
    display:inline-block;

}

@keyframes cctvDotPulse{

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

}

.cctv-header-count{

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(56,189,248,0.1);
    border:1px solid rgba(56,189,248,0.2);

    color:#38bdf8;
    font-size:13px;
    font-weight:bold;

}

/* ======================================================
   CCTV CARD GRID
====================================================== */

.cctv-grid{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:24px;

    margin-bottom:24px;

}

.cctv-card{

    background:
    linear-gradient(
        145deg,
        #172033,
        #1e293b
    );

    border-radius:24px;
    overflow:hidden;
    background: rgba(30, 41, 59, 0.35);
    backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 12px 35px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cctv-card:hover{
    border-color: rgba(56,189,248,0.45);
    box-shadow: 0 20px 45px rgba(0,0,0,0.5), 0 0 25px rgba(56,189,248,0.18);
    transform: translateY(-6px);
}

/* ======================================================
   CCTV FEED
====================================================== */

.cctv-feed-wrapper{

    position:relative;

    width:100%;
    height:320px;

    background:#000;
    overflow:hidden;

}

.cctv-feed-img{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    brightness(0.85)
    contrast(1.05)
    saturate(0.9);

    transition:0.3s ease;

}

.cctv-card:hover .cctv-feed-img{

    filter:
    brightness(0.9)
    contrast(1.08)
    saturate(1);

}

/* ======================================================
   CCTV HUD OVERLAY
====================================================== */

.cctv-hud{

    position:absolute;

    inset:0;

    padding:16px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    pointer-events:none;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,0.55) 0%,
        transparent 35%,
        transparent 65%,
        rgba(0,0,0,0.65) 100%
    );

}

.cctv-hud-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.cctv-hud-bottom{

    display:flex;
    justify-content:space-between;
    align-items:flex-end;

}

.cctv-rec-badge{

    display:flex;
    align-items:center;
    gap:8px;

    background:rgba(239,68,68,0.85);

    padding:5px 12px;

    border-radius:50px;

    font-size:11px;
    font-weight:bold;
    letter-spacing:1.5px;

    color:white;

}

.cctv-rec-dot{

    width:8px;
    height:8px;

    border-radius:50%;
    background:white;

    animation:recBlink 1s infinite;

    display:inline-block;

}

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

.cctv-cam-badge{

    display:flex;
    align-items:center;
    gap:7px;

    padding:5px 12px;

    border-radius:50px;

    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(6px);

    font-size:12px;
    font-weight:bold;
    letter-spacing:1px;

    color:#e2e8f0;

}

.cctv-location{

    display:flex;
    align-items:center;
    gap:6px;

    font-size:13px;
    font-weight:bold;
    letter-spacing:1px;

    color:#e2e8f0;

    text-shadow:0 0 8px rgba(0,0,0,0.8);

}

.cctv-timestamp{

    font-family:monospace;

    font-size:14px;
    font-weight:bold;

    color:#38bdf8;

    text-shadow:0 0 8px rgba(56,189,248,0.5);

    letter-spacing:1px;

}

/* ======================================================
   CCTV FULLSCREEN BUTTON
====================================================== */

.cctv-fullscreen-btn{

    position:absolute;

    bottom:14px;
    right:14px;

    width:36px;
    height:36px;

    border-radius:10px;

    border:none;

    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(8px);

    color:white;

    font-size:15px;

    cursor:pointer;

    transition:0.2s ease;

    pointer-events:all;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;

}

.cctv-feed-wrapper:hover .cctv-fullscreen-btn{
    opacity:1;
}

.cctv-fullscreen-btn:hover{

    background:rgba(56,189,248,0.5);

    transform:scale(1.1);

}

/* ======================================================
   CCTV INFO PANEL
====================================================== */

.cctv-info{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:16px 20px;

}

.cctv-info-name{

    font-size:16px;
    font-weight:bold;

    margin-bottom:4px;

}

.cctv-info-desc{

    font-size:13px;
    color:#64748b;

}

.cctv-info-right{

    display:flex;
    gap:16px;
    align-items:center;

}

.cctv-stat{

    display:flex;
    align-items:center;
    gap:6px;

    font-size:13px;
    color:#94a3b8;

}

/* ======================================================
   CCTV SUMMARY STRIP
====================================================== */

.cctv-summary-strip{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:16px;

    margin-top:4px;

}

.cctv-strip-item{

    display:flex;
    align-items:center;
    gap:16px;

    padding:18px 20px;

    border-radius:18px;

    background:
    linear-gradient(
        145deg,
        #172033,
        #1e293b
    );

    border:1px solid rgba(255,255,255,0.05);

    transition:0.3s ease;

}

.cctv-strip-item:hover{
    border-color:rgba(56,189,248,0.2);
    transform:translateY(-3px);
}

.cctv-strip-item > i{

    font-size:22px;
    color:#38bdf8;
    width:32px;
    text-align:center;

}

.cctv-strip-label{

    font-size:11px;
    color:#64748b;
    letter-spacing:1px;
    font-weight:bold;
    margin-bottom:4px;

}

.cctv-strip-value{

    font-size:14px;
    font-weight:bold;

}

/* ======================================================
   CCTV FULLSCREEN MODAL
====================================================== */

.cctv-fullscreen-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.92);
    backdrop-filter:blur(10px);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:9999;

    padding:20px;

}

.cctv-fullscreen-modal.active{
    display:flex;
}

.cctv-fs-content{

    width:100%;
    max-width:1000px;

    background:
    linear-gradient(
        145deg,
        #111827,
        #172033
    );

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(56,189,248,0.2);

    box-shadow:0 30px 80px rgba(0,0,0,0.6);

}

.cctv-fs-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 22px;

    border-bottom:1px solid rgba(255,255,255,0.06);

}

.cctv-fs-title{

    display:flex;
    align-items:center;
    gap:12px;

    font-size:18px;
    font-weight:bold;

    color:#38bdf8;

}

.cctv-fs-controls{

    display:flex;
    align-items:center;
    gap:14px;

}

.cctv-fs-img{

    width:100%;

    display:block;

    max-height:520px;
    object-fit:cover;

}

.cctv-fs-timestamp{

    padding:14px 22px;

    font-family:monospace;
    font-size:15px;
    font-weight:bold;

    color:#38bdf8;

    letter-spacing:2px;

    border-top:1px solid rgba(255,255,255,0.06);

}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:992px){

    .sidebar{

        width:100%;
        height:auto;

        position:relative;

    }

    .main-layout{
        flex-direction:column;
    }

    .main-content{

        margin-left:0;
        width:100%;

    }

}

@media(max-width:768px){

    .cctv-grid{
        grid-template-columns:1fr;
    }

    .cell-grid{
        grid-template-columns:1fr;
    }

    .iot-grid{
        grid-template-columns:1fr;
    }

    .flow-wrapper{
        height:500px;
    }

    .battery{
        left:5%;
    }

    .load{
        right:5%;
    }

    .schedule-row{

        grid-template-columns:1fr;

    }

    .navbar-custom{

        padding:0 20px;

    }

    .logo-title{

        font-size:18px;

    }

}

/* ======================================================
   EZVIZ PTZ CONTROLS
====================================================== */

.ezviz-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.ptz-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ptz-middle {
    display: flex;
    gap: 6px;
}

.ptz-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(30, 41, 59, 0.7);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.ptz-btn:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    color: #fff;
    box-shadow: 0 0 15px rgba(56,189,248,0.5);
    border-color: #38bdf8;
    transform: scale(1.1);
}

.ptz-btn.ptz-center {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #10b981;
}

.ptz-btn.ptz-center:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 0 15px rgba(16,185,129,0.5);
    border-color: #10b981;
}

.ezviz-actions {
    display: flex;
    gap: 18px;
}

.ez-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: 0.3s ease;
}

.ez-action-btn i {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(30, 41, 59, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #94a3b8;
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.ez-action-btn:hover i {
    background: linear-gradient(135deg, rgba(56,189,248,0.25) 0%, rgba(37,99,235,0.15) 100%);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 5px 15px rgba(56,189,248,0.3);
    transform: translateY(-3px);
}

.ez-action-btn:hover span {
    color: #e2e8f0;
}

.ez-action-btn.active i {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5) !important;
}

.ez-action-btn.active-ai i {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) !important;
    color: #fff !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 15px rgba(167, 139, 250, 0.5) !important;
}

.ez-action-btn.active-ai span {
    color: #e2e8f0;
}

/* ======================================================
   CUSTOM DATE RANGE & PREMIUM CHART TOOLTIP
====================================================== */

.date-input {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text);
    padding: 6px 12px;
    font-size: 13px;
    outline: none;
    transition: all 0.3s ease;
}

.date-input:focus {
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.btn-filter {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}

.btn-filter:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

.btn-filter:active {
    transform: translateY(0);
}

.chart-tooltip {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    font-family: var(--font-sans);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.tooltip-header {
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
}

.tooltip-row strong {
    color: var(--text);
}

.tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.tooltip-dot.blue {
    background: var(--neon-blue);
    box-shadow: 0 0 8px var(--neon-blue);
}

.tooltip-dot.green {
    background: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
}

/* ======================================================
   VERTICAL BATTERY VISUAL
====================================================== */

.vertical-battery-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}

.battery-head {
    width: 24px;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px 4px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
}

.battery-body {
    width: 55px;
    height: 110px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    padding: 3px;
    display: flex;
    align-items: flex-end;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}

.battery-level-fill {
    width: 100%;
    border-radius: 4px;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.6s ease;
}

.battery-soc-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 800;
    color: white;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9);
    z-index: 2;
}

.battery-temp-label {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* ======================================================
   TEXT COLOR UTILITIES
====================================================== */

.text-red {
    color: var(--neon-red) !important;
}

/* ======================================================
   INVERTER CONTROL BLOCK
====================================================== */

.control-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    transition: all 0.3s ease;
}

.control-block:hover {
    border-color: rgba(56, 189, 248, 0.2);
    background: rgba(56, 189, 248, 0.03);
}

.control-block-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.control-block-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 6px;
    font-style: italic;
}

.control-select {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2338bdf8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.control-select:hover,
.control-select:focus {
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
}

.control-select option {
    background: #0f172a;
    color: var(--text);
}

/* ======================================================
   ENERGY STAT BLOCKS
====================================================== */

.energy-stat-block {
    border-radius: 12px;
    padding: 10px 14px;
}

.energy-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.energy-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.energy-stat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.energy-stat-row span {
    color: var(--muted);
    font-size: 11px;
}

.energy-stat-row strong {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ======================================================
   FAULT RESET BUTTON
====================================================== */

.btn-fault-reset {
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: var(--neon-red);
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-fault-reset:hover {
    background: rgba(244, 63, 94, 0.22);
    border-color: rgba(244, 63, 94, 0.6);
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.25);
    transform: translateY(-1px);
}

.btn-fault-reset:active {
    transform: translateY(0);
}

.btn-fault-reset:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* ======================================================
   FAULT HISTORY
====================================================== */

.fault-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 0 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 10px;
}

.fault-history-count {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
}

.fault-history-list {
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.fault-history-list::-webkit-scrollbar {
    width: 4px;
}

.fault-history-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.fault-event-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 11px;
    border-left: 3px solid transparent;
    transition: background 0.2s ease;
}

.fault-event-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.fault-event-row.appeared {
    border-left-color: var(--neon-red);
    background: rgba(244, 63, 94, 0.04);
}

.fault-event-row.cleared {
    border-left-color: var(--neon-green);
    background: rgba(16, 185, 129, 0.04);
}

.fault-event-row.reset {
    border-left-color: var(--neon-blue);
    background: rgba(56, 189, 248, 0.04);
}

.fault-event-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    line-height: 1.5;
}

.fault-event-detail {
    line-height: 1.5;
}

.fault-event-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 20px;
    margin-right: 5px;
}

.badge-appeared {
    background: rgba(244, 63, 94, 0.15);
    color: var(--neon-red);
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.badge-cleared {
    background: rgba(16, 185, 129, 0.15);
    color: var(--neon-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-reset {
    background: rgba(56, 189, 248, 0.15);
    color: var(--neon-blue);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.fault-event-names {
    color: var(--text);
    margin-top: 2px;
    font-size: 11px;
}

/* ======================================================
   SERVER STATUS MONITORING
====================================================== */

.server-uptime-badge {
    background: rgba(56, 189, 248, 0.1);
    color: var(--neon-blue);
    border: 1px solid rgba(56, 189, 248, 0.15);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.05);
}

.server-gauge-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.server-gauge-svg {
    width: 150px;
    height: 150px;
}

.gauge-bg {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 8;
    fill: none;
}

.gauge-fill {
    stroke-width: 8;
    fill: none;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50px 50px;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.server-gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.server-gauge-text span {
    font-family: var(--font-sans);
}

/* Card Glows */
.card-bg-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    top: -20px;
    right: -20px;
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.dashboard-card:hover .card-bg-glow {
    opacity: 0.35;
    filter: blur(60px);
}

.glow-blue {
    background: #38bdf8;
}

.glow-purple {
    background: #a78bfa;
}

.glow-orange {
    background: #f59e0b;
}

.glow-red {
    background: #f43f5e;
}

/* CPU Core Grid */
.core-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

@media (max-width: 576px) {
    .core-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

.core-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.core-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.core-label {
    color: var(--muted);
    font-weight: 500;
}

.core-percent {
    font-family: var(--font-mono);
    color: var(--text);
    font-weight: 600;
}

.core-progress-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.02);
}

.core-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: var(--grad-blue);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Temperature Card High Warning Styles */
.temp-warning-state {
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
    background: linear-gradient(135deg, rgba(24, 15, 26, 0.75) 0%, rgba(31, 18, 25, 0.75) 100%) !important;
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.15) !important;
    animation: pulseTemp 2s infinite alternate;
}

@keyframes pulseTemp {
    0% {
        box-shadow: 0 0 15px rgba(244, 63, 94, 0.15);
    }
    100% {
        box-shadow: 0 0 30px rgba(244, 63, 94, 0.3);
    }
}

/* Pulse Dot */
.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--neon-green);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--neon-green);
}

.green-pulse {
    animation: pulseActive 1.5s infinite alternate;
}

@keyframes pulseActive {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
    }
    100% {
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.9);
    }
}

.red-pulse {
    animation: pulseError 1.5s infinite alternate;
}

@keyframes pulseError {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
    }
    100% {
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.9);
    }
}

/* Fan Spinning Animation */
.fan-icon-spin {
    animation: spinFan 3s infinite linear;
    display: inline-block;
}

@keyframes spinFan {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* ======================================================
   PRINT SHARE
====================================================== */

.btn-purple {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    border: none !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25) !important;
}

.btn-purple:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4) !important;
}

.btn-purple:active {
    transform: translateY(0) !important;
}

.btn-outline-purple {
    background: transparent !important;
    border: 1px solid #7c3aed !important;
    color: #a78bfa !important;
    transition: all 0.3s ease !important;
}

.btn-outline-purple:hover {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #ffffff !important;
    border-color: #a78bfa !important;
}

.text-purple {
    color: #a78bfa !important;
}

.printer-status-badge {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: #10b981;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.printer-status-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #10b981;
    animation: statusDotPulse 2s infinite alternate;
}

@keyframes statusDotPulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.1); opacity: 1; }
}

.print-dropzone {
    border: 2px dashed rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.3s ease;
    cursor: pointer;
}

.print-dropzone:hover, .print-dropzone.dragover {
    border-color: #a78bfa;
    background: rgba(124, 58, 237, 0.05);
    box-shadow: inset 0 0 20px rgba(124, 58, 237, 0.1);
}

.dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dropzone-icon {
    font-size: 48px;
    color: #a78bfa;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.print-dropzone:hover .dropzone-icon, .print-dropzone.dragover .dropzone-icon {
    transform: translateY(-5px) scale(1.05);
    opacity: 1;
    color: #a78bfa;
}

.print-dropzone h5 {
    font-size: 15px;
    color: #f1f5f9;
    margin-bottom: 6px;
    font-weight: 600;
}

.print-dropzone span {
    font-size: 12.5px;
}

.bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

/* ======================================================
   PRINT PREVIEW & CONFIGURATION
====================================================== */
.preview-container {
    background: #090d16;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
    position: relative;
    overflow: hidden;
}

.preview-paper {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    padding: 25px;
    width: 90%;
    max-width: 420px;
    position: relative;
    transition: all 0.3s ease;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.preview-paper.portrait {
    aspect-ratio: 1 / 1.414;
}

.preview-paper.landscape {
    max-width: 550px;
    aspect-ratio: 1.414 / 1;
}

.preview-paper.monochrome {
    filter: grayscale(100%) contrast(1.1);
}

.preview-paper .header {
    border-bottom: 2px solid #334155;
    padding-bottom: 6px;
    margin-bottom: 12px;
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    display: flex;
    justify-content: space-between;
    font-family: sans-serif;
}

.preview-paper .content {
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    flex-grow: 1;
    overflow: hidden;
    color: #0f172a;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #ffffff;
}

.preview-paper .footer {
    border-top: 1px dashed #cbd5e1;
    margin-top: 15px;
    padding-top: 6px;
    font-size: 8px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    font-family: sans-serif;
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-align: center;
    padding: 40px 20px;
}

.preview-placeholder i {
    font-size: 44px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.preview-pdf-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
}

/* Custom Tabs for print inputs */
.print-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.print-tab-btn {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.print-tab-btn:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.print-tab-btn.active {
    background: rgba(124, 58, 237, 0.15) !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
    color: #a78bfa !important;
}

.print-tab-content {
    display: none;
}

.print-tab-content.active {
    display: block;
}

/* ======================================================
   LIVE PREVIEW SETTINGS CHIPS BAR
====================================================== */
.preview-settings-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preview-setting-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #a78bfa;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.preview-setting-chip i {
    font-size: 9px;
    opacity: 0.8;
}

/* Flash animation when chip value changes */
@keyframes chipFlash {
    0%   { background: rgba(124, 58, 237, 0.35); transform: scale(1.08); }
    100% { background: rgba(124, 58, 237, 0.08); transform: scale(1); }
}

.preview-setting-chip.chip-updated {
    animation: chipFlash 0.4s ease forwards;
}

/* Scaling visual classes on the preview paper */
.preview-paper.scale-fit .content img,
.preview-paper.scale-fit .content iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.preview-paper.scale-shrink .content img,
.preview-paper.scale-shrink .content iframe {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.preview-paper.scale-noscale .content img {
    width: auto;
    height: auto;
    max-width: none;
}

/* Paper size visual indicator */
.preview-paper.paper-letter { aspect-ratio: 8.5 / 11; }
.preview-paper.paper-legal  { aspect-ratio: 8.5 / 14; }
.preview-paper.paper-A3     { aspect-ratio: 1 / 1.414; }
.preview-paper.paper-A4     { aspect-ratio: 1 / 1.414; }
.preview-paper.paper-A5     { aspect-ratio: 1 / 1.414; }
.preview-paper.paper-B4     { aspect-ratio: 1 / 1.414; }
.preview-paper.paper-B5     { aspect-ratio: 1 / 1.414; }

/* Landscape overrides */
.preview-paper.landscape.paper-letter { aspect-ratio: 11 / 8.5; }
.preview-paper.landscape.paper-legal  { aspect-ratio: 14 / 8.5; }
.preview-paper.landscape.paper-A3,
.preview-paper.landscape.paper-A4,
.preview-paper.landscape.paper-A5,
.preview-paper.landscape.paper-B4,
.preview-paper.landscape.paper-B5     { aspect-ratio: 1.414 / 1; }

/* Duplex active — subtle double-page shadow effect */
.preview-paper.duplex-active {
    box-shadow:
        6px 6px 0 2px rgba(255,255,255,0.04),
        0 10px 25px -5px rgba(0,0,0,0.5),
        0 8px 10px -6px rgba(0,0,0,0.5);
}





/* ======================================================
   TOTAL PREVENTIVE MAINTENANCE (TPM)
====================================================== */
.tpm-stat-card {
    background: linear-gradient(145deg, rgba(10, 16, 32, 0.88), rgba(16, 25, 48, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 22px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

.tpm-stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.tpm-stat-icon {
    font-size: 28px;
    opacity: 0.8;
}

.tpm-status-badge {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

.tpm-badge-normal {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.tpm-badge-duesoon {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.tpm-badge-overdue {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* Pulsing dot animation for Overdue status */
.tpm-dot-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background-color: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: statusDotPulse 1.5s infinite alternate;
}

.tpm-table td {
    vertical-align: middle !important;
}

.tpm-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 13.5px;
}

.tpm-btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.tpm-btn-complete:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.tpm-btn-edit:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.tpm-btn-delete:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

/* Category pills */
.category-pill {
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: inline-block;
}

/* ======================================================
   CUSTOM TABLE STYLING FOR DARK THEME
====================================================== */
.table-custom {
    --bs-table-bg: transparent !important;
    --bs-table-color: #cbd5e1 !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.05) !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.02) !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.table-custom th {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #94a3b8 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
}

.table-custom td {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 14px 16px !important;
    background: transparent !important;
}

.table-custom tr:hover td {
    background: rgba(255, 255, 255, 0.01) !important;
    color: #ffffff !important;
}

/* ======================================================
   LAYOUT SPACING ADJUSTMENTS (ANTI-MEPET)
====================================================== */
.container-fluid {
    padding-left: 45px !important;
    padding-right: 45px !important;
    padding-bottom: 48px !important;
    margin-top: -20px !important;
}

.page-section {
    padding-top: 0;
    padding-bottom: 24px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Ensure page headers have comfortable breathing room and don't overlap with sticky navbar */
.page-section > .d-flex.justify-content-between.align-items-center,
.cctv-page-header {
    margin-bottom: 32px !important;
    margin-top: 24px !important;
}

/* ======================================================
   IOT ENERGY STATS FOOTER
====================================================== */
.iot-energy-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.iot-energy-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 0;
}

.iot-energy-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: rgba(148, 163, 184, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iot-energy-label i {
    font-size: 8px;
    opacity: 0.7;
}

.iot-energy-value {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}

.iot-energy-value.iot-energy-on {
    color: #22d3ee;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

.iot-energy-value.iot-kwh-value {
    color: #4ade80;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.35);
    font-size: 12px;
}

.iot-energy-value-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.iot-watts-input {
    background: transparent;
    border: none;
    outline: none;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    width: 46px;
    padding: 0;
    -moz-appearance: textfield;
}

.iot-watts-input::-webkit-outer-spin-button,
.iot-watts-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.iot-watts-input:focus {
    color: #38bdf8;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.iot-energy-unit {
    font-size: 10px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.6);
}

/* ======================================================
   HOME LAYOUT INTERACTIVE VIEW
====================================================== */

.denah-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.4);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.denah-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.denah-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #060a13 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M30 0H0v30h30V0zM1 29V1h28v28H1z' fill='none' stroke='rgba(56, 189, 248, 0.02)' stroke-width='1'/%3E%3C/svg%3E");
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    width: 100%;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.denah-layout-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}
@media (min-width: 992px) {
    .denah-layout-wrapper {
        flex-direction: row;
        justify-content: center;
        gap: 25px;
    }
}

.denah-grid-wrapper {
    overflow-x: auto;
    max-width: 100%;
    padding: 10px 0;
    border-radius: 16px;
    flex: 1;
}

.denah-direction {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: rgba(56, 189, 248, 0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
    white-space: nowrap;
}
@media (min-width: 992px) {
    .denah-west, .denah-east {
        writing-mode: vertical-lr;
        text-orientation: mixed;
        transform: rotate(180deg);
        margin: 0;
    }
}

.denah-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 80px);
    gap: 10px;
    background: rgba(0, 0, 0, 0.45);
    padding: 14px;
    border-radius: 16px;
    border: 2px dashed rgba(56, 189, 248, 0.15);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 100%;
}

/* Floor Plan Room (Architectural CAD Blueprint Style) */
.denah-room {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(30, 41, 59, 0.5) 100%);
    border: 2px solid rgba(56, 189, 248, 0.1);
    border-radius: 10px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Blueprint corner brackets */
.denah-room::before, .denah-room::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-color: rgba(56, 189, 248, 0.35);
    border-style: solid;
    pointer-events: none;
    transition: all 0.3s ease;
}
.denah-room::before {
    top: -2px;
    left: -2px;
    border-width: 2px 0 0 2px;
}
.denah-room::after {
    bottom: -2px;
    right: -2px;
    border-width: 0 2px 2px 0;
}

.denah-room:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.denah-room:hover::before, .denah-room:hover::after {
    border-color: rgba(56, 189, 248, 0.8);
    width: 10px;
    height: 10px;
}

/* Room active states styling */
.denah-room.room-light-on {
    background: radial-gradient(circle at center, rgba(250, 204, 21, 0.12) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(250, 204, 21, 0.3);
}
.denah-room.room-light-on::before, .denah-room.room-light-on::after {
    border-color: rgba(250, 204, 21, 0.5);
}

.denah-room.room-ac-on {
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.12) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(56, 189, 248, 0.3);
}
.denah-room.room-ac-on::before, .denah-room.room-ac-on::after {
    border-color: rgba(56, 189, 248, 0.5);
}

.denah-room.room-heater-on {
    background: radial-gradient(circle at center, rgba(251, 146, 60, 0.12) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(251, 146, 60, 0.3);
}
.denah-room.room-heater-on::before, .denah-room.room-heater-on::after {
    border-color: rgba(251, 146, 60, 0.5);
}

.denah-room.room-exhaust-on {
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(34, 211, 238, 0.3);
}
.denah-room.room-exhaust-on::before, .denah-room.room-exhaust-on::after {
    border-color: rgba(34, 211, 238, 0.5);
}

/* High-tech room label badges */
.denah-room-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    margin-bottom: 2px;
    text-align: center;
    z-index: 2;
}

.denah-room-label i {
    color: #38bdf8;
    font-size: 10px;
}

.denah-room-size {
    font-size: 8px;
    color: rgba(148, 163, 184, 0.5);
    font-weight: 600;
    margin-bottom: 6px;
    z-index: 2;
}

.denah-room-hint {
    font-size: 8px;
    color: rgba(148, 163, 184, 0.35);
    margin-top: 4px;
    font-style: italic;
    z-index: 2;
}

/* Specific Room Styles */
.denah-carport {
    border-style: dashed;
    background: rgba(15, 23, 42, 0.2);
}

.denah-teras {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, rgba(30, 41, 59, 0.2) 100%);
}

.denah-kamar-mandi {
    border-color: rgba(239, 68, 68, 0.15);
}

.denah-koridor {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.03);
    justify-content: center;
}

.denah-utility {
    background: rgba(15, 23, 42, 0.15);
    border: 1px dashed rgba(255, 255, 255, 0.03);
    justify-content: center;
}

/* Container for multiple devices in a room (horizontal row) */
.denah-room-devices {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    z-index: 5;
    flex-wrap: nowrap;
}

/* Device control inside rooms */
.denah-device {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin: 4px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    z-index: 5;
}

.denah-dev-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(148, 163, 184, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.denah-dev-name {
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.5);
    margin-top: 5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Active Icon Styles Based On Device Categories */

/* 1. Lamps (ID 1-5, 11): Warm Yellow Glow */
.denah-device.dev-on[data-device-id="1"] .denah-dev-icon,
.denah-device.dev-on[data-device-id="2"] .denah-dev-icon,
.denah-device.dev-on[data-device-id="3"] .denah-dev-icon,
.denah-device.dev-on[data-device-id="4"] .denah-dev-icon,
.denah-device.dev-on[data-device-id="5"] .denah-dev-icon,
.denah-device.dev-on[data-device-id="11"] .denah-dev-icon {
    background: rgba(250, 204, 21, 0.15) !important;
    border-color: rgba(250, 204, 21, 0.5) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.45) !important;
}

/* 2. AC (ID 8-9): Cool Cyan-Blue Glow */
.denah-device.dev-on[data-device-id="8"] .denah-dev-icon,
.denah-device.dev-on[data-device-id="9"] .denah-dev-icon {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
}

/* 3. Water Heater (ID 10): Hot Amber-Orange Glow */
.denah-device.dev-on[data-device-id="10"] .denah-dev-icon {
    background: rgba(251, 146, 60, 0.15) !important;
    border-color: rgba(251, 146, 60, 0.5) !important;
    color: #fb923c !important;
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.45) !important;
}

/* 4. Exhaust Fans (ID 6-7): Cyan Spin Glow */
.denah-device.dev-on[data-device-id="6"] .denah-dev-icon,
.denah-device.dev-on[data-device-id="7"] .denah-dev-icon {
    background: rgba(34, 211, 238, 0.15) !important;
    border-color: rgba(34, 211, 238, 0.5) !important;
    color: #22d3ee !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.45) !important;
}

.denah-device.dev-on[data-device-id="6"] .denah-dev-icon i,
.denah-device.dev-on[data-device-id="7"] .denah-dev-icon i {
    animation: fanRotate 1.5s linear infinite;
    display: inline-block;
}

.denah-device.dev-on .denah-dev-name {
    color: #f8fafc;
}

/* Auto Mode Inner Icon Style */
.denah-device.dev-auto .denah-dev-icon {
    border-style: solid;
    border-color: rgba(245, 158, 11, 0.45) !important;
}

.denah-device:hover .denah-dev-icon {
    transform: scale(1.15) translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
    color: #f8fafc;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
}

/* Floor Plan List Card at bottom */
.denah-list-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.denah-list-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 10% 50%, rgba(56, 189, 248, 0.04), transparent 60%);
    pointer-events: none;
    transition: all 0.3s ease;
}

.denah-list-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.8));
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.4), 0 0 15px rgba(56, 189, 248, 0.06);
}

.denah-list-card:hover::before {
    background: radial-gradient(circle at 10% 50%, rgba(56, 189, 248, 0.08), transparent 60%);
}

.denah-list-card:active {
    transform: scale(0.98);
}

/* ======================================================
   iOS TOGGLE SWITCH KNOB OVERFLOW FIX
====================================================== */
.switch, .ios-switch {
    width: 44px !important;
    height: 24px !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
}

.switch .slider:before, .ios-switch .slider:before {
    width: 18px !important;
    height: 18px !important;
    left: 3px !important;
    bottom: 2px !important; /* perfectly center vertically */
}

.switch input:checked + .slider:before, .ios-switch input:checked + .slider:before {
    transform: translateX(19px) !important; /* slightly reduced to keep knob perfectly within border */
}

/* ======================================================
   SOLAR INVERTER & BATTERY WIDGET
====================================================== */
.denah-power-station {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.75));
    border: 1px solid rgba(16, 185, 129, 0.32) !important;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 136px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(4px);
}
.denah-power-station-header {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    text-transform: uppercase;
}
.denah-power-station .power-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3px 0;
}
.denah-power-station .power-row:last-of-type {
    border-bottom: none;
}
.denah-power-station .power-label {
    font-size: 8px;
    color: rgba(148, 163, 184, 0.7);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}
.denah-power-station .power-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
}
.denah-power-station:hover {
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.18), 0 0 15px rgba(16, 185, 129, 0.08);
    transform: scale(1.02) translateY(-1px);
}

.denah-grid-station {
    border: 1px solid rgba(56, 189, 248, 0.32) !important;
}
.denah-grid-station:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.18), 0 0 15px rgba(56, 189, 248, 0.08) !important;
    transform: scale(1.02) translateY(-1px);
}

#energyFlowModal {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ======================================================
   REAL-TIME POWER FLOW SVG ANIMATIONS
====================================================== */
.denah-flow-svg path {
    filter: drop-shadow(0 0 4px currentColor);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.denah-flow-svg path.active {
    opacity: 0.35;
}

#flowPathCarport, 
#flowPathTeras, 
#flowPathRuangTengah, 
#flowPathKamarDepan, 
#flowPathKamarMandi, 
#flowPathDapur, 
#flowPathKamarBelakang {
    animation: loadFlowPulse 1.5s linear infinite;
}

@keyframes loadFlowPulse {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -24; }
}

/* ======================================================
   HOLOGRAPHIC SWEEPING SCANLINES FOR ACTIVE ROOMS
====================================================== */
@keyframes sweepScan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { top: 100%; opacity: 0; }
}

.denah-room.room-light-on::after,
.denah-room.room-ac-on::after,
.denah-room.room-heater-on::after,
.denah-room.room-exhaust-on::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    height: 1px;
    background: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 6px 1px rgba(56, 189, 248, 0.5);
    animation: sweepScan 3.5s linear infinite;
    pointer-events: none;
    z-index: 3;
}

/* Active Room Specific Theme Colors */
.denah-room.room-light-on::after {
    background: rgba(250, 204, 21, 0.5);
    box-shadow: 0 0 6px 1px rgba(250, 204, 21, 0.6);
}
.denah-room.room-heater-on::after {
    background: rgba(251, 146, 60, 0.5);
    box-shadow: 0 0 6px 1px rgba(251, 146, 60, 0.6);
}
.denah-room.room-exhaust-on::after {
    background: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 6px 1px rgba(34, 211, 238, 0.6);
}

/* Holographic Room Dot Grid Overlay */
.denah-room.room-light-on,
.denah-room.room-ac-on,
.denah-room.room-heater-on,
.denah-room.room-exhaust-on {
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 0),
        radial-gradient(circle at center, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
    background-size: 8px 8px, 100% 100% !important;
}

/* ======================================================
   AC COOLING BREEZE & WIND EFFECT (▒░░)
====================================================== */
@keyframes acWind {
    0% { transform: translateY(0px) scaleX(0.8); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: translateY(14px) scaleX(1.1); opacity: 0; }
}

.denah-device.dev-on[data-device-id="8"]::after,
.denah-device.dev-on[data-device-id="9"]::after {
    content: '░░';
    font-family: monospace;
    font-size: 8px;
    font-weight: 800;
    color: rgba(56, 189, 248, 0.75);
    position: absolute;
    bottom: -13px;
    letter-spacing: -2px;
    animation: acWind 1.6s infinite linear;
    pointer-events: none;
    z-index: 10;
    text-shadow: 0 0 4px rgba(56, 189, 248, 0.6);
}

/* ======================================================
   WATER HEATER EXPANDING HEAT RIPPLES
====================================================== */
@keyframes heatRipple {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.denah-device.dev-on[data-device-id="10"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(251, 146, 60, 0.7);
    animation: heatRipple 2s infinite ease-out;
    pointer-events: none;
    z-index: 1;
}

/* ======================================================
   EXHAUST FAN AIR VORTEX WHIRLS
====================================================== */
@keyframes fanWhirl {
    0% { transform: rotate(0deg) scale(0.7); opacity: 0; }
    40% { opacity: 0.6; }
    100% { transform: rotate(360deg) scale(1.4); opacity: 0; }
}

.denah-device.dev-on[data-device-id="6"]::before,
.denah-device.dev-on[data-device-id="7"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px dashed rgba(34, 211, 238, 0.5);
    animation: fanWhirl 2.2s infinite linear;
    pointer-events: none;
    z-index: 1;
}

/* ======================================================
   DEVICE AUTO/MANUAL MODE BADGES (FLOOR PLAN)
====================================================== */
.denah-dev-icon {
    position: relative;
}

/* Outer HUD style rotating ring for devices in AUTO mode */
.denah-device.dev-auto .denah-dev-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px dashed rgba(245, 158, 11, 0.7);
    animation: hudRotate 12s linear infinite;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
    z-index: 10;
}

/* HUD Rotation and Badge Breathing animations */
@keyframes hudRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes badgeAutoPulse {
    0% { transform: scale(1); box-shadow: 0 0 4px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255,255,255,0.2); }
    100% { transform: scale(1.1); box-shadow: 0 0 14px rgba(245, 158, 11, 0.9), inset 0 1px 1px rgba(255,255,255,0.3); }
}

@keyframes badgeManualPulse {
    0% { transform: scale(1); box-shadow: 0 0 4px rgba(56, 189, 248, 0.45), inset 0 1px 1px rgba(255,255,255,0.2); }
    100% { transform: scale(1.1); box-shadow: 0 0 12px rgba(56, 189, 248, 0.8), inset 0 1px 1px rgba(255,255,255,0.3); }
}

.dev-mode-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 8px;
    font-weight: 800;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #0c1221;
    font-family: 'Share Tech Mono', monospace;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 15;
    pointer-events: none; /* Make sure clicks pass through to parent icon */
    backdrop-filter: blur(2px);
}

.dev-mode-badge.badge-auto {
    background: linear-gradient(135deg, #fb923c, #ea580c); /* Warm high-contrast gradient */
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    animation: badgeAutoPulse 1.8s infinite alternate ease-in-out;
}

.dev-mode-badge.badge-manual {
    background: linear-gradient(135deg, #38bdf8, #0284c7); /* Cyber blue gradient */
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    animation: badgeManualPulse 2.2s infinite alternate ease-in-out;
}