/* bhyve.css — B-Hyve config form (settings tab) + watering card (homepage). */

/* ── Config form ───────────────────────────────────────────────── */
.bhyve-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.bhyve-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #3a4154; }
.bhyve-form input {
  padding: 8px 10px;
  border: 1px solid #d9dce6;
  border-radius: 6px;
  font-size: 13px;
  color: #1a1d26;
  background: #fff;
}
.bhyve-form input:focus { outline: none; border-color: #2945d6; box-shadow: 0 0 0 3px rgba(41,69,214,.12); }
.bhyve-actions { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.bhyve-result { margin-top: 14px; font-size: 13px; }
.bhyve-result .ok   { color: #1f6b3d; }
.bhyve-result .err  { color: #9a1f1f; }
.bhyve-devices { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.bhyve-device-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid #c8e0d3; background: #f6fbf8;
  border-radius: 6px; font-size: 12px; color: #1f6b3d;
}

/* ── Homepage watering card ────────────────────────────────────── */
.bhyve-card {
  background: #fff; border: 1px solid #d9dce6; border-radius: 10px;
  padding: 18px 20px; box-shadow: 0 1px 12px rgba(15,17,23,.04);
  margin-top: 16px;
}
.bhyve-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bhyve-card-head h2 { font-size: 15px; font-weight: 600; color: #0f1117; margin: 0; }
.bhyve-card-head .ph { color: #2945d6; font-size: 18px; }
.bhyve-card-head .bhyve-card-sub { margin-left: auto; font-size: 11px; color: #8a93a6; }

/* One card per device, in a responsive grid. */
.bhyve-devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.bhyve-dev-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid #e3e6ef; border-radius: 10px; padding: 14px; background: #fff;
}
.bhyve-dev-top { display: flex; align-items: center; gap: 12px; }
.bhyve-dev-img {
  width: 52px; height: 52px; flex: 0 0 auto; object-fit: contain;
  border: 1px solid #eef0f7; border-radius: 10px; background: #fafbff; padding: 5px;
}
.bhyve-dev-titles { min-width: 0; }
.bhyve-dev-name { font-weight: 600; font-size: 14px; color: #1a1d26; }
.bhyve-dev-model { font-size: 11px; color: #8a93a6; margin-top: 1px; }
.bhyve-dev-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.bhyve-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; border: 1px solid transparent;
}
.bhyve-chip.online   { background: #dff5e6; color: #1f6b3d; border-color: #b8ddc6; }
.bhyve-chip.offline  { background: #fde2e0; color: #9a1f1f; border-color: #f0a7a0; }
.bhyve-chip.watering { background: #d6e6f7; color: #1d3fa8; border-color: #aac5e8; }
.bhyve-chip.rain     { background: #eaf0f9; color: #3a4154; border-color: #c8d4ea; }
.bhyve-chip.battery  { background: #eef0f7; color: #5a6172; border-color: #d9dce6; }

.bhyve-zones { display: flex; flex-direction: column; gap: 6px; }
.bhyve-zone {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 6px 9px; background: #f5f6fa; border: 1px solid #eef0f5; border-radius: 6px; font-size: 12px;
}
.bhyve-zone.is-watering { background: #eef4fd; border-color: #c5d6f0; }
.bhyve-zone-photo {
  width: 30px; height: 30px; border-radius: 5px; object-fit: cover; flex: 0 0 auto;
  border: 1px solid #e3e6ef; background: #fff;
}
.bhyve-zone-photo.placeholder { display: inline-flex; align-items: center; justify-content: center; color: #aab2c4; font-size: 16px; }
.bhyve-zone-name { font-weight: 600; color: #1c2030; min-width: 0; }
.bhyve-zone-meta { color: #5a6172; font-size: 11px; white-space: nowrap; }
.bhyve-zone-empty { font-size: 12px; color: #8a93a6; font-style: italic; }

/* Watering history heatmap — 7 blocks per row, green by minutes/day. */
.bhyve-hist { margin-top: 2px; }
.bhyve-hist-label { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: #8a93a6; margin-bottom: 5px; }
.bhyve-hist-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.bhyve-hist-dows { margin-bottom: 3px; }
.bhyve-hist-dow { text-align: center; font-size: 9px; font-weight: 600; color: #8a93a6; line-height: 1; }
.bhyve-hist-dow.is-today {
  justify-self: center;
  width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2945d6; border-radius: 50%;
  color: #fff; font-weight: 700;
}
.bhyve-hist-cell.is-pad { background: transparent; border-color: transparent; }
.bhyve-hist-cell {
  aspect-ratio: 1 / 1; border-radius: 3px; background: #eef0f5; border: 1px solid rgba(0,0,0,.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; line-height: 1; color: #1f6b3d;
}
.bhyve-hist-cell.lvl-1 { background: #c6e9d4; }
.bhyve-hist-cell.lvl-2 { background: #8fd3aa; }
.bhyve-hist-cell.lvl-3 { background: #4caf76; color: #fff; }
.bhyve-hist-cell.lvl-4 { background: #2e7d4f; color: #fff; }
.bhyve-hist-empty { font-size: 11px; color: #8a93a6; font-style: italic; margin-top: 2px; }
.bhyve-hist-cell.has-runs { cursor: pointer; }
.bhyve-hist-cell.has-runs:hover { outline: 2px solid rgba(41,69,214,.45); outline-offset: -1px; }

/* Day-detail modal */
.bhyve-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,17,23,.45);
  display: flex; align-items: center; justify-content: center;
}
.bhyve-modal-overlay[hidden] { display: none; }
.bhyve-modal {
  background: #fff; border-radius: 12px; padding: 18px 20px;
  width: 320px; max-width: 92vw; box-shadow: 0 10px 40px rgba(0,0,0,.28);
}
.bhyve-modal-close { float: right; cursor: pointer; border: none; background: none; font-size: 20px; line-height: 1; color: #8a93a6; }
.bhyve-modal-close:hover { color: #1c2030; }
.bhyve-modal h3 { font-size: 15px; font-weight: 600; margin: 0 0 2px; color: #0f1117; }
.bhyve-modal .sub { font-size: 12px; color: #8a93a6; margin-bottom: 14px; }
.bhyve-modal-runs { display: flex; flex-direction: column; gap: 6px; }
.bhyve-modal-run {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 7px 10px; background: #f5f6fa; border: 1px solid #eef0f5; border-radius: 6px;
}
.bhyve-modal-run .t { color: #1c2030; font-weight: 600; }
.bhyve-modal-run .m { color: #1f6b3d; font-weight: 600; }
.bhyve-modal-total { margin-top: 12px; font-size: 12px; color: #5a6172; text-align: right; }

.bhyve-card .empty { color: #8a93a6; font-size: 13px; font-style: italic; }
.bhyve-card .err   { color: #9a1f1f; font-size: 13px; }