:root {
  --brand: #0d6efd;
  --brand-dark: #0a58ca;
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --ok: #198754;
  --warn: #f59e0b;
  --crit: #dc3545;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.navbar-brand i { margin-right: .35rem; }

.page-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem;
}
.page-header h1 { font-size: 1.5rem; margin: 0; font-weight: 600; }

.card { border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--border); font-weight: 600; }

.stat-card {
  background: #fff; border: 1px solid var(--border); border-radius: .75rem;
  padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem;
}
.stat-card .icon {
  width: 48px; height: 48px; border-radius: .5rem;
  background: rgba(13,110,253,.08); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.stat-card .label { color: var(--muted); font-size: .85rem; }
.stat-card .value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

.status-badge { padding: .25rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.status-normal { background: rgba(25,135,84,.1); color: var(--ok); }
.status-warning { background: rgba(245,158,11,.12); color: var(--warn); }
.status-critical { background: rgba(220,53,69,.1); color: var(--crit); }

.purpose-badge { padding: .2rem .55rem; border-radius: .35rem; font-size: .75rem; font-weight: 600; }
.purpose-irrigation { background: #d1fae5; color: #065f46; }
.purpose-water_supply { background: #dbeafe; color: #1e40af; }
.purpose-drainage { background: #fef3c7; color: #92400e; }

#map { width: 100%; height: 75vh; border-radius: .75rem; }

.op-row { display: flex; justify-content: space-between; padding: .5rem .75rem; font-size: .9rem; border-bottom: 1px solid var(--border); }
.op-row:last-child { border: 0; }
.op-row .time { color: var(--muted); font-size: .8rem; }

.range-with-value { display: flex; align-items: center; gap: .75rem; }
.range-with-value .value { width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

footer { color: var(--muted); font-size: .85rem; }

.legend {
  background: #fff; padding: .5rem .75rem; border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); font-size: .85rem; line-height: 1.6;
}
.legend .swatch { display: inline-block; width: 18px; height: 4px; vertical-align: middle; margin-right: .35rem; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: .35rem; }