* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f2f4f7;
  margin: 0;
  padding: 40px 16px;
  transition: background-color 0.4s ease;
}

/* ---- Trạng thái "loud" (đang cảnh báo, CHƯA tắt) - nhấp nháy toàn trang ---- */
body.alerting {
  background-color: #e53935; /* mặc định: nền đỏ khi cảnh báo */
  animation: pulse 1.4s infinite;
}

/* Mức 1 - CAM: vừa vượt ngưỡng cảnh báo (>= threshold_warn) */
body.alerting.level-warn {
  background-color: #f59e0b;
  animation: pulse-warn 1.4s infinite;
}

/* Mức 2 - ĐỎ: vượt ngưỡng tối đa (>= threshold_max) */
body.alerting.level-max {
  background-color: #e53935;
  animation: pulse 1.2s infinite;
}

/* ---- Trạng thái "muted" (ĐÃ bấm Tắt cảnh báo nhưng số liệu vẫn còn vượt
   ngưỡng): KHÔNG nhấp nháy nữa (không có class .alerting), nhưng vẫn giữ
   một dải màu highlight nhạt phía trên để nhận biết đang có lỗi gì. ---- */
body.level-warn:not(.alerting) {
  box-shadow: inset 0 6px 0 0 #f59e0b;
}
body.level-max:not(.alerting) {
  box-shadow: inset 0 6px 0 0 #e53935;
}

@keyframes pulse {
  0%   { background-color: #e53935; }
  50%  { background-color: #ff6f60; }
  100% { background-color: #e53935; }
}

@keyframes pulse-warn {
  0%   { background-color: #f59e0b; }
  50%  { background-color: #fbbf24; }
  100% { background-color: #f59e0b; }
}

.container {
  max-width: 640px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

h1 {
  text-align: left;
  font-size: 19px;
  color: #222;
  margin: 0;
}

body.alerting h1 { color: #fff; }

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.add-station-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #1a73e8;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.add-station-btn:hover { background: #1558b0; }

/* Nút "🔄 Làm mới toàn bộ dữ liệu" - phong cách viền (secondary), đặt cạnh
   nút "➕ Thêm Trạm / Giếng Theo Dõi" trên thanh công cụ trên cùng. */
.refresh-all-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border: 1.5px solid #1a73e8;
  border-radius: 8px;
  background: #fff;
  color: #1a73e8;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.refresh-all-btn:hover { background: #eaf1fd; }
.refresh-all-btn:disabled {
  opacity: 0.65;
  cursor: default;
  background: #f1f3f5;
  color: #888;
  border-color: #ccc;
}

/* ---- Công tắc BẬT/TẮT bot Telegram (thanh công cụ trên cùng) ---- */
.bot-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.bot-toggle-label { font-size: 13px; font-weight: 600; color: #444; }

.bot-toggle .switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.bot-toggle .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.bot-toggle .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  border-radius: 22px;
  transition: background-color 0.2s ease;
}
.bot-toggle .slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.bot-toggle input:checked + .slider { background-color: #1e8e3e; }
.bot-toggle input:checked + .slider::before { transform: translateX(16px); }

.bot-toggle-state {
  font-size: 12px;
  font-weight: 700;
  color: #b23b00;
  min-width: 28px;
}
.bot-toggle.is-on .bot-toggle-state { color: #1e8e3e; }

/* ---- Nút "⏹ Dừng thao tác hiện tại" - ngắt ngay lượt cào dữ liệu đang
   chạy, để làm mới gấp 1 giếng cụ thể mà không phải đợi hết lượt cào. ---- */
.stop-operation-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border: 1.5px solid #d93025;
  border-radius: 8px;
  background: #fff;
  color: #d93025;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.stop-operation-btn:hover { background: #fdeceb; }
.stop-operation-btn:disabled {
  opacity: 0.55;
  cursor: default;
  background: #f1f3f5;
  color: #888;
  border-color: #ccc;
}

/* ---- Thanh công cụ Lọc theo Trạm / Sắp xếp phía trên danh sách Card ---- */
.station-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #555;
  flex: 1 1 200px;
}

body.alerting .toolbar-field { color: #fff; }

.toolbar-field select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d0d5dd;
  background: #fff;
  font-size: 13px;
  color: #222;
  cursor: pointer;
}

/* ---- Danh sách giếng dạng thẻ (Cards) ---- */
.station-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.station-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.25s ease, transform 0.15s ease;
}

.station-card:hover { transform: translateY(-2px); }

.station-card.active {
  border-color: #1a73e8;
}

/* ------------------------------------------------------------------------
   HIGHLIGHT theo `level` (0/1/2) - LUÔN hiển thị khi level > 0, BẤT KỂ đang
   "loud" (chưa tắt cảnh báo) hay đã "muted" (đã bấm Tắt cảnh báo). Đây chính
   là phần "vẫn giữ highlight để nhận diện lỗi" theo yêu cầu.
   ------------------------------------------------------------------------ */
.station-card.card-level-warn {
  border-width: 3px;
  border-color: #f59e0b;
  background: #fff8ec;
}
.station-card.card-level-max {
  border-width: 3px;
  border-color: #e53935;
  background: #fdeceb;
}
.station-card.active.card-level-warn,
.station-card.active.card-level-max {
  border-color: #1a73e8; /* đang chọn giếng này -> ưu tiên viền xanh chọn, vẫn giữ nền nhạt màu lỗi */
}

/* ------------------------------------------------------------------------
   HIGHLIGHT GIẾNG 0m³ (daily.total của ca HIỆN TẠI == 0) - viền đỏ nổi bật
   để nhận diện ngay giếng có thể đang gặp sự cố (mất kết nối, cảm biến lỗi,
   bơm chưa hoạt động...). Áp dụng ĐỘC LẬP với highlight theo `level`
   (level dựa vào ngưỡng cảnh báo/tối đa, còn card-zero-total dựa vào total
   == 0) - xem stationCardTemplate() trong static/script.js.
   KHÔNG áp dụng khi card đang active (đang chọn xem chi tiết) để tránh
   xung đột với viền xanh "đang chọn". ------------------------------------------------------------------------ */
.station-card.card-zero-total {
  border-width: 3px;
  border-color: #e53935;
  background: #fdeceb;
}
.station-card.active.card-zero-total {
  border-color: #1a73e8;
}
.station-card.card-zero-total .card-total { color: #e53935; }

/* ------------------------------------------------------------------------
   BADGE "🏁 Chốt ca trước: XXX m³" - chỉ hiển thị trước 11:30 sáng (logic ẩn/
   hiện xử lý ở static/script.js::stationCardTemplate). Phong cách nhẹ nhàng,
   nền xám nhạt + viền đứt nét, để không lấn át phần Tổng cộng dồn của ca
   hiện tại (vẫn là thông tin chính của Card).
   ------------------------------------------------------------------------ */
.card-yesterday-badge {
  margin-top: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px dashed #c7cad1;
  background: #f4f5f7;
  color: #666;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

/* ------------------------------------------------------------------------
   TRẠNG THÁI "LOUD" (is_alerting=true, tức CHƯA tắt cảnh báo): nhấp nháy +
   chữ tổng lưu lượng đổi màu báo động. Class .card-alerting chỉ được thêm
   vào card khi is_alerting=true (xem stationCardTemplate trong script.js).
   ------------------------------------------------------------------------ */
.station-card.card-alerting.card-level-warn {
  animation: card-pulse-warn 1.3s infinite;
}
.station-card.card-alerting.card-level-max {
  animation: card-pulse-max 1.1s infinite;
}

@keyframes card-pulse-warn {
  0%, 100% { background: #fff3d6; box-shadow: 0 2px 8px rgba(245,158,11,0.25); }
  50%      { background: #ffe3a8; box-shadow: 0 2px 18px rgba(245,158,11,0.6); }
}
@keyframes card-pulse-max {
  0%, 100% { background: #fde2df; box-shadow: 0 2px 8px rgba(229,57,53,0.3); }
  50%      { background: #ffb4ae; box-shadow: 0 2px 20px rgba(229,57,53,0.65); }
}

/* Chữ tổng lưu lượng: chỉ đậm màu báo động khi đang "loud"; khi muted thì
   dùng lại đúng màu bình thường (dịu lại) như yêu cầu. */
.station-card.card-alerting .card-total { color: #e53935; }
.station-card.card-alerting.card-level-warn .card-total { color: #b45309; }

.card-station-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
  padding-right: 22px;
}
.card-station-name { font-weight: 700; color: #555; }
.card-station-id { color: #aaa; white-space: nowrap; }

.card-name {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin-bottom: 2px;
}

.card-id {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
}

.card-total {
  font-size: 22px;
  font-weight: 700;
  color: #1a73e8;
  transition: color 0.2s ease;
}

.card-unit {
  font-size: 12px;
  font-weight: 500;
  color: #888;
}

/* ------------------------------------------------------------------------
   NÂNG CẤP: khối Lưu lượng / Mực nước trên Card - gọn gàng, cùng bố cục
   (nhãn nhỏ + giá trị lớn + dòng ngưỡng), đặt cạnh nhau để dễ so sánh.
   ------------------------------------------------------------------------ */
.card-metric-block {
  margin-top: 6px;
}
.card-metric-block:first-of-type {
  margin-top: 0;
}
.card-water-level-block {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e4e8;
}
.card-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  margin-bottom: 1px;
}

/* Giá trị Mực nước - dùng chung cỡ chữ/kiểu với .card-total (Lưu lượng) để
   đồng bộ trực quan giữa 2 khối. */
.card-water-level-value {
  font-size: 22px;
  font-weight: 700;
  color: #1a73e8;
  transition: color 0.2s ease;
}

/* ------------------------------------------------------------------------
   HIGHLIGHT ĐỘC LẬP TỪNG DÒNG: áp trực tiếp lên .card-total (dòng Lưu
   lượng) HOẶC .card-water-level-value (dòng Mực nước) - KHÔNG phụ thuộc
   lẫn nhau. Card có thể hiện 0, 1 hoặc cả 2 dòng đỏ + icon cùng lúc, tuỳ
   theo giá trị nào đang vượt ngưỡng của chính nó (xem stationCardTemplate()
   trong static/script.js: flowExceeded / wlExceeded tính riêng biệt).
   ------------------------------------------------------------------------ */
.card-metric-value-alert.card-total,
.card-metric-value-alert.card-water-level-value {
  color: #e53935;
}
.metric-alert-icon {
  margin-left: 4px;
  font-size: 15px;
}

/* Dòng "Số giờ Hoạt động / Nghỉ của bơm" - đặt NGAY TRÊN dòng ngưỡng. */
.card-pump-row {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.035);
  font-size: 11px;
  line-height: 1.5;
  color: #555;
}
.card-pump-hours strong { color: #222; }
.card-pump-status { color: #333; margin-top: 1px; }

.card-exceed-label {
  margin-top: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.card-exceed-label.level-warn { background: #fef3c7; color: #92400e; }
.card-exceed-label.level-max  { background: #fee2e2; color: #991b1b; }

.card-threshold {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

.card-actions { margin-top: 10px; }

.card-alert-btn {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.card-ack-btn { background: #d32f2f; color: #fff; }
.card-ack-btn:hover { background: #b71c1c; }
.card-rearm-btn { background: #1a73e8; color: #fff; }
.card-rearm-btn:hover { background: #1558b0; }

.alert-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 16px;
}
.alert-badge-loud { animation: badge-blink 1s infinite; }
.alert-badge-muted { opacity: 0.75; font-size: 15px; }

@keyframes badge-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.empty-row { color: #999; padding: 16px 0; grid-column: 1 / -1; text-align: center; }

/* ---- Chi tiết giếng ---- */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 24px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 15px;
  color: #444;
}

.station-title-row {
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}

.station-title-row .label {
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

.label { font-weight: 600; }

.edit-btn {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f5f5f5;
  color: #444;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.edit-btn:hover { background: #eaeaea; }

.total-box {
  text-align: center;
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  background: #f6f8fa;
}

.total-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.total-value {
  font-size: 42px;
  font-weight: 700;
  color: #1a73e8;
}

body.alerting .total-value { color: #e53935; }

.ack-btn {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: none;
  border-radius: 8px;
  background: #d32f2f;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.ack-btn:hover { background: #b71c1c; }

.alert-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.alert-buttons .ack-btn { margin-top: 0; flex: 1; }

.rearm-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #1a73e8;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.rearm-btn:hover { background: #1558b0; }

.unit {
  font-size: 18px;
  font-weight: 500;
  color: #888;
}

body.alerting .unit { color: #fff; }

.hidden { display: none !important; }

.refresh-btn {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: none;
  border-radius: 8px;
  background: #22c55e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.refresh-btn:hover { background: #16a34a; }
.refresh-btn:disabled { opacity: .6; cursor: not-allowed; }

.reset-btn {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f5f5f5;
  color: #444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.reset-btn:hover { background: #eaeaea; }

.history-card {
  margin-top: 20px;
}

.history-card h2 {
  font-size: 15px;
  margin: 0 0 12px 0;
  color: #333;
}

#historyTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#historyTable th, #historyTable td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

#historyTable th {
  color: #666;
  font-weight: 600;
  background: #fafafa;
}

.footer {
  text-align: center;
  color: #888;
  font-size: 12px;
  margin-top: 16px;
}

/* ---- Modal Thêm / Sửa giếng ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-box h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #222;
}

.modal-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 12px;
}

.modal-form input[type="text"],
.modal-form input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.modal-form input:disabled {
  background: #f2f2f2;
  color: #888;
}

.modal-form label.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-form label.checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
}

.modal-hint {
  font-size: 12px;
  color: #777;
  background: #f5f7fa;
  border-radius: 8px;
  padding: 10px;
  margin: 0 0 12px 0;
}

/* ------------------------------------------------------------------------
   NÂNG CẤP: highlight/nhấp nháy cho #waterLevelCard (khối 'Cột mực nước'
   trong trang chi tiết giếng) - CÙNG bảng màu với .card-level-warn/-max của
   Card giếng ở trên, nhưng dùng class RIÊNG (wl-level-warn/wl-level-max/
   wl-alerting) để không đụng độ với các selector `body.level-warn` sẵn có.
   ------------------------------------------------------------------------ */
#waterLevelCard.wl-level-warn {
  border-width: 3px;
  border-color: #f59e0b;
  background: #fff8ec;
}
#waterLevelCard.wl-level-max {
  border-width: 3px;
  border-color: #e53935;
  background: #fdeceb;
}
#waterLevelCard.wl-alerting.wl-level-warn {
  animation: card-pulse-warn 1.3s infinite;
}
#waterLevelCard.wl-alerting.wl-level-max {
  animation: card-pulse-max 1.1s infinite;
}

/* NÂNG CẤP: khối ngưỡng cảnh báo Mực nước trong Modal "Sửa giếng" - tách
   trực quan khỏi các trường còn lại bằng viền + nền nhạt, để người dùng
   không nhầm với ngưỡng cảnh báo (m³) của Lưu lượng ở phía trên. */
.modal-fieldset {
  border: 1px solid #dbe7f5;
  background: #f7fbff;
  border-radius: 10px;
  padding: 12px 14px 2px 14px;
  margin: 0 0 14px 0;
}

.modal-fieldset legend {
  font-size: 13px;
  font-weight: 700;
  color: #1a6fb8;
  padding: 0 4px;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.modal-actions-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.modal-cancel-btn {
  padding: 10px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  color: #444;
  font-weight: 600;
  cursor: pointer;
}

.modal-cancel-btn:hover { background: #f5f5f5; }

.modal-save-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #1a73e8;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.modal-save-btn:hover { background: #1558b0; }

.modal-refresh-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #22c55e;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.modal-refresh-btn:hover { background: #16a34a; }
.modal-refresh-btn:disabled { opacity: .6; cursor: not-allowed; }

.modal-delete-btn {
  padding: 10px 12px;
  border: 1px solid #e53935;
  border-radius: 8px;
  background: #fff;
  color: #e53935;
  font-weight: 600;
  cursor: pointer;
}

.modal-delete-btn:hover { background: #fdecea; }

@media (max-width: 480px) {
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header-actions { flex-direction: column; align-items: stretch; }
  .add-station-btn { width: 100%; }
  .refresh-all-btn { width: 100%; }
  .stop-operation-btn { width: 100%; }
  .bot-toggle { justify-content: space-between; width: 100%; box-sizing: border-box; }
  .station-toolbar { flex-direction: column; }
  .toolbar-field { flex: 1 1 auto; }
}