/* ========== DASHBOARD PANEL ========== */
.dashboard-panel {
    position: relative;
    background: rgba(10, 15, 30, 0.85);
    backdrop-filter: blur(30px) saturate(180%);
    border-radius: var(--radius-large);
    border: 1px solid var(--glass-border);
    padding: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    overflow: hidden;
    transform-style: flat;
    transform: none;
    animation: none;
}
@keyframes dashFloat {
    0%,100% { transform: none; }
    50% { transform: none; }
}
.dashboard-panel:hover { transform: translateY(-4px); }
.dashboard-panel::before {
    content:'';position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(45deg,transparent 45%,rgba(0,212,255,0.08) 50%,transparent 55%);
    animation: scanLine 9s infinite linear;pointer-events:none;z-index:10;
}
@keyframes scanLine {
    0%{transform:translateX(-100%)}100%{transform:translateX(100%)}
}

/* Dashboard Header */
.dashboard-header {
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:14px;padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.dashboard-title {
    font-size:var(--font-size-base);font-weight:800;
    color:rgba(255,255,255,0.9);display:flex;align-items:center;gap:10px;
}
.dashboard-title i {
    color:var(--ai-cyan);font-size:var(--font-size-lg);
}
.dashboard-status {display:flex;align-items:center;gap:8px;}
.status-dot {
    width:8px;height:8px;border-radius:50%;
}
.status-online {
    background:#53d683;box-shadow:0 0 10px rgba(83,214,131,0.8);
    animation:blink 2s infinite;
}
@keyframes blink {0%,100%{opacity:1}50%{opacity:0.4}}
.status-text {font-size:11px;color:var(--primary);font-weight:700;letter-spacing:1px;text-transform:uppercase;}

/* Dashboard Grid */
.dashboard-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:relative;z-index:2;
}

/* Dash Card */
.dash-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;padding:12px;
    transition:all 0.4s ease;position:relative;overflow:hidden;
}
.dash-card:hover {
    border-color:rgba(0,212,255,0.3);
    box-shadow:0 0 25px rgba(0,212,255,0.15);
    transform:translateY(-2px);
}
.dash-card-header {
    display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
}
.dash-card-title {
    font-size:13px;font-weight:700;color:var(--ai-cyan);
    display:flex;align-items:center;gap:6px;
}
.dash-card-title::before {
    content:'';width:6px;height:6px;border-radius:50%;
    background:var(--ai-cyan);box-shadow:0 0 8px rgba(0,212,255,0.6);
}
.dash-title-green { color:#53d683; }
.dash-title-green::before { background:#53d683;box-shadow:0 0 8px rgba(83,214,131,0.6); }
.dash-title-red { color:#ff4757; }
.dash-title-red::before { background:#ff4757;box-shadow:0 0 8px rgba(255,71,87,0.6); }
.dash-title-orange { color:#ffa502; }
.dash-title-orange::before { background:#ffa502;box-shadow:0 0 8px rgba(255,165,2,0.6); }

.dash-card-value {
    font-size:var(--font-size-lg);font-weight:800;color:#fff;
    font-family:'Inter',sans-serif;
}

/* ========== SVG GAUGE ========== */
.svg-gauge-wrap {
    position:relative;display:flex;align-items:center;justify-content:center;
    height:118px;margin:2px 0;
}
.svg-gauge {width:118px;height:118px;transform:rotate(-90deg);}

.gauge-bg {
    fill:none;stroke:rgba(255,255,255,0.06);stroke-width:12;
}
.gauge-fill {
    fill:none;stroke-width:12;stroke-linecap:round;
    transition:stroke-dashoffset 1.5s ease;
}
.gauge-humidity {
    stroke: var(--ai-cyan);
    filter:drop-shadow(0 0 6px rgba(0,212,255,0.5));
}
.gauge-dot {
    fill:var(--primary);filter:drop-shadow(0 0 8px rgba(83,214,131,0.8));
}
.gauge-center-label {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-size:20px;font-weight:800;color:#fff;
    text-shadow:0 0 15px rgba(0,212,255,0.6);
    font-family:'Inter',sans-serif;
}

/* Speedometer */
.svg-speedometer {transform:rotate(0deg);}
.speedo-bg {
    fill:none;stroke:rgba(255,255,255,0.08);stroke-width:14;stroke-linecap:round;
}
.speedo-fill {
    fill:none;stroke-width:14;stroke-linecap:round;
    stroke:#ffa502;
    filter:drop-shadow(0 0 8px rgba(255,165,2,0.5));
    transition:stroke-dashoffset 1.5s ease;
}
.speedo-needle {
    stroke:#fff;stroke-width:2.5;stroke-linecap:round;
    filter:drop-shadow(0 0 4px rgba(255,255,255,0.6));
    transition:transform 1.5s ease;
}
.speedo-center {
    fill:#ffa502;filter:drop-shadow(0 0 10px rgba(255,165,2,0.8));
}
.speedo-label {top:58%!important;color:#ffa502;text-shadow:0 0 15px rgba(255,165,2,0.6);}
.speedo-range {
    position:absolute;bottom:8px;left:0;right:0;
    display:flex;justify-content:space-between;padding:0 20px;
    font-size:10px;color:rgba(255,255,255,0.4);font-weight:600;
}

/* ========== VERTICAL TANK ========== */
.vtank-wrap {
    height:96px;margin:4px 0;
}
.vtank {
    position:relative;width:100%;height:100%;
    background:rgba(0,0,0,0.35);border-radius:8px;overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
}
.vtank-fill {
    position:absolute;bottom:0;left:0;width:100%;
    height:var(--level);border-radius:8px 8px 0 0;
    transition:height 1.5s ease;
}
.vtank-fill::before {
    content:'';position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
    animation:tankShine 3s infinite linear;
}
@keyframes tankShine {0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.vtank-green {background:linear-gradient(to top,#2bc470,#53d683);}
.vtank-red {background:linear-gradient(to top,#c0392b,#e74c3c);}

.vtank-pct {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-size:20px;font-weight:800;color:#fff;z-index:2;
    text-shadow:0 2px 10px rgba(0,0,0,0.5);
    font-family:'Inter',sans-serif;
}
.vtank-marks {
    position:absolute;top:0;left:0;width:100%;height:100%;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:4px 8px;z-index:1;
}
.vtank-marks span {
    display:flex;justify-content:space-between;align-items:center;
    font-size:10px;color:rgba(255,255,255,0.6);font-weight:600;
}
.vtank-marks small {font-size:9px;color:rgba(255,255,255,0.35);}

/* ========== DASH CARD INFO ========== */
.dash-card-info {
    display:flex;justify-content:space-between;gap:6px;margin-top:8px;flex-wrap:wrap;
}
.info-chip {
    font-size:11px;color:rgba(255,255,255,0.7);
    display:flex;align-items:center;gap:5px;
    background:rgba(255,255,255,0.03);padding:5px 8px;
    border-radius:8px;border:1px solid rgba(255,255,255,0.05);
}
.info-chip i {color:var(--primary);font-size:11px;}
.info-chip b {
    color:var(--ai-teal);font-weight:700;
    background:rgba(0,255,195,0.08);padding:1px 6px;border-radius:6px;
}

/* ========== SENSOR ROW (Mini Gauges) ========== */
.sensor-row {
    display:flex;justify-content:space-between;gap:8px;
    margin-top:12px;padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.06);
}
.sensor-mini {
    display:flex;flex-direction:column;align-items:center;
    position:relative;flex:1;
}
.sensor-mini svg {
    width:48px;height:48px;transform:rotate(-90deg);
}
.mini-bg {fill:none;stroke:rgba(255,255,255,0.06);stroke-width:5;}
.mini-fill {fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.5s ease;}
.mini-blue {stroke:#3498db;filter:drop-shadow(0 0 4px rgba(52,152,219,0.5));}
.mini-green {stroke:#2ecc71;filter:drop-shadow(0 0 4px rgba(46,204,113,0.5));}
.mini-cyan {stroke:#00d4ff;filter:drop-shadow(0 0 4px rgba(0,212,255,0.5));}
.mini-orange {stroke:#ffa502;filter:drop-shadow(0 0 4px rgba(255,165,2,0.5));}
.mini-red {stroke:#e74c3c;filter:drop-shadow(0 0 4px rgba(231,76,60,0.5));}

.mini-val {
    position:absolute;top:14px;left:50%;transform:translateX(-50%);
    font-size:10px;font-weight:800;color:#fff;
    font-family:'Inter',sans-serif;
}
.mini-val small {font-size:8px;color:rgba(255,255,255,0.5);margin-right:1px;}
.mini-label {
    font-size:9px;color:rgba(255,255,255,0.45);font-weight:600;
    margin-top:4px;text-transform:uppercase;letter-spacing:0.5px;
}

/* ========== STATUS BAR ========== */
.dash-status-bar {
    display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
    margin-top:10px;padding-top:10px;
    border-top:1px solid rgba(255,255,255,0.06);
}
.status-item {
    display:flex;align-items:center;gap:6px;
    font-size:11px;color:rgba(255,255,255,0.6);
    background:rgba(255,255,255,0.02);padding:7px 8px;
    border-radius:8px;border:1px solid rgba(255,255,255,0.04);
}
.status-item i {color:var(--primary);font-size:12px;}
.status-item b {
    color:#fff;font-weight:800;margin-right:auto;
    font-family:'Inter',sans-serif;
}
.status-item b span {color:var(--ai-cyan);font-size:10px;}

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

/* Tablet */
@media (max-width:1024px) {
    .dashboard-panel {
        transform: none;
    }
    .svg-gauge-wrap { height:112px; }
    .svg-gauge { width:112px;height:112px; }
    .vtank-wrap { height:90px; }
}

/* Mobile */
@media (max-width:768px) {
    .dashboard-grid { grid-template-columns:1fr; gap:12px; }
    .dash-status-bar { grid-template-columns:repeat(2,1fr); }
    .sensor-row { flex-wrap:wrap; justify-content:center; gap:10px; }
    .sensor-mini { min-width:55px; }
    .sensor-mini svg { width:50px;height:50px; }
    .mini-val { font-size:10px;top:12px; }
    .dashboard-panel {
        transform:none;animation:none;padding:14px;
        border-radius:16px;
    }
    .dashboard-panel:hover { transform:none; }
    .dash-card { padding:14px; }
    .svg-gauge-wrap { height:110px; }
    .svg-gauge { width:110px;height:110px; }
    .gauge-center-label { font-size:18px; }
    .vtank-wrap { height:88px; }
    .vtank-pct { font-size:18px; }
    .info-chip { font-size:10px;padding:4px 6px; }
    .dash-card-value { font-size:var(--font-size-base); }
}

/* Small Phone */
@media (max-width:480px) {
    .dash-status-bar { grid-template-columns:1fr; gap:6px; }
    .sensor-row { gap:6px; }
    .sensor-mini svg { width:44px;height:44px; }
    .mini-val { font-size:9px;top:10px; }
    .mini-label { font-size:8px; }
    .dashboard-header { margin-bottom:14px;padding-bottom:10px; }
    .dashboard-title { font-size:13px; }
    .dash-card { padding:12px;border-radius:12px; }
    .dashboard-panel { padding:12px; }
}

/* Very Small */
@media (max-width:360px) {
    .sensor-row { flex-wrap:wrap; }
    .sensor-mini { min-width:50px; flex:0 0 calc(33% - 6px); }
    .info-chip { font-size:9px; }
}

/* ========== Final Dashboard Hardening ========== */
.dashboard-panel {
    border-radius: 8px;
    background: rgba(8, 20, 14, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    transform: none;
}

.dashboard-panel::before,
.dashboard-panel::after {
    display: none;
}

.dashboard-panel:hover {
    transform: none;
}

.dash-card {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.status-online,
.gauge-dot,
.dash-card-title::before,
.vtank-fill,
.mini-fill {
    animation: none !important;
}

.dashboard-title,
.dash-card-title,
.dash-card-value,
.gauge-center-label,
.vtank-pct {
    letter-spacing: 0;
}

.dash-card-info,
.sensor-row,
.dash-status-bar {
    min-width: 0;
}

.info-chip,
.status-item {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .dashboard-panel {
        border-radius: 8px;
        padding: 12px;
    }
}