/* Dark Theme - Material Design Colors */
/* Primary: #8ab4f8, Success: #81c995, Error: #f28b82, Warning: #fdd663 */
/* Surface: #1e1e1e, Card: #2d2d2d, Border: #3c4043, Text: #e8eaed / #9aa0a6 */

body {
  background: #1e1e1e;
  color: #e8eaed;
}

.status-bar {
  background: rgba(30, 30, 30, 0.9);
  border-bottom: 1px solid #3c4043;
}

/* Zone Cards */
.zone-card {
  background: #2d2d2d;
  border: 1px solid #3c4043;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s ease;
}

.zone-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.zone-card.watering {
  border-color: #8ab4f8;
}

.zone-card.alert-critical {
  border-color: #f28b82;
}

.zone-card.alert-warning {
  border-color: #fdd663;
}

.zone-title h2 { color: #e8eaed; }
.zone-avg-value { color: #8ab4f8; }
.zone-avg-label { color: #9aa0a6; }
.zone-progress { background: #3c4043; }
.zone-thresholds { color: #9aa0a6; }
.threshold-low { color: #f28b82; }
.threshold-high { color: #81c995; }

/* Valve & Mode Badges */
.valve-badge {
  background: #3c4043;
  color: #9aa0a6;
  border: none;
}

.valve-badge.valve-open {
  background: #8ab4f8;
  color: #202124;
}

.mode-badge {
  background: #3c4043;
  color: #9aa0a6;
  border: none;
}

.mode-badge.mode-manual {
  background: #fdd663;
  color: #202124;
}

/* Mini Sensors */
.mini-sensor {
  background: #353535;
  border-color: transparent;
  transition: background 0.2s ease;
}

.mini-sensor:hover {
  background: #3c4043;
}

.mini-sensor-label { color: #9aa0a6; }
.mini-sensor-value { color: #e8eaed; }

.mini-sensor.needs-water {
  border-color: #f28b82;
  background: rgba(242, 139, 130, 0.1);
}

.mini-sensor.needs-water .mini-sensor-value {
  color: #f28b82;
}

/* Zone Buttons */
.zone-btn {
  border: 1px solid #3c4043;
  color: #9aa0a6;
  background: transparent;
  transition: all 0.2s ease;
}

.zone-btn:hover {
  background: #353535;
  color: #e8eaed;
  border-color: #5f6368;
}

.zone-btn-valve.active {
  background: #8ab4f8;
  border-color: #8ab4f8;
  color: #202124;
}

.zone-btn-valve.active:hover {
  background: #aecbfa;
}

.zone-btn-auto.active {
  background: #81c995;
  border-color: #81c995;
  color: #202124;
}

.zone-btn-auto.active:hover {
  background: #a8dab5;
}

.zone-btn.loading::after {
  border-top-color: #9aa0a6;
}

/* Pump Badge */
.pump-badge {
  background: #3c4043;
  color: #9aa0a6;
  border: none;
}

.pump-badge.pump-on {
  background: #f28b82;
  color: #202124;
}

/* Connection Status */
.connection-status { color: #9aa0a6; }
.connection-status.connected { color: #81c995; }
.connection-status.disconnected { color: #f28b82; }

/* Chart & Events */
.chart-section, .events-section {
  background: #2d2d2d;
  border: 1px solid #3c4043;
}

.chart-tab {
  background: #3c4043;
  color: #9aa0a6;
  transition: all 0.2s ease;
}

.chart-tab:hover {
  background: #4a4a4a;
}

.chart-tab.active {
  background: #8ab4f8;
  color: #202124;
}

/* Stat Cards */
.stat-card {
  background: #2d2d2d;
  border: 1px solid #3c4043;
  transition: box-shadow 0.2s ease;
}

.stat-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.stat-value { color: #e8eaed; }
.stat-label { color: #9aa0a6; }

/* Rain */
.rain-drop {
  background: linear-gradient(to bottom, transparent, rgba(138, 180, 248, 0.4));
}

/* Modal */
.modal-box { background: #2d2d2d; color: #e8eaed; }