/* =============================================
   HYDROSENSE — Dashboard v2 Styles
   ============================================= */

.db-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Header ────────────────────────────────── */
.db-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.db-title { font-size: clamp(1.4rem,2.5vw,2rem); letter-spacing:-.02em; margin-top:4px; }
.db-header-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.db-live-badge {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:.78rem; color:var(--green-lime);
  background:rgba(82,183,136,.1); padding:5px 14px;
  border-radius:99px; border:1px solid rgba(82,183,136,.2);
}
.db-timestamp { font-size:.74rem; color:var(--muted); font-family:var(--font-display); }
.db-sim-badge {
  font-size:.65rem; font-family:var(--font-display); font-weight:700;
  letter-spacing:.08em; padding:3px 10px; border-radius:99px;
  background:rgba(244,168,54,.15); color:var(--warning);
  border:1px solid rgba(244,168,54,.3);
}
.db-sim-badge.hidden { display:none; }

/* ── KPI grid ──────────────────────────────── */
.db-kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:1000px){.db-kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.db-kpi-grid{grid-template-columns:1fr;}}

.db-kpi-card {
  padding:20px 22px 16px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .3s,transform .2s; cursor:default;
}
.db-kpi-card:hover { transform:translateY(-2px); border-color:rgba(82,183,136,.3); }
.db-kpi-top { display:flex; align-items:center; justify-content:space-between; }
.db-kpi-label {
  font-family:var(--font-display); font-size:.8rem; font-weight:600;
  color:var(--muted); letter-spacing:.03em; text-transform:uppercase;
}
.db-kpi-unit {
  font-size:.72rem; color:var(--muted); background:rgba(255,255,255,.05);
  padding:2px 8px; border-radius:99px; font-family:var(--font-display);
}
.db-kpi-value-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.db-kpi-bigval {
  font-family:var(--font-display); font-size:2rem; font-weight:700;
  color:var(--off-white); letter-spacing:-.04em; line-height:1;
}
.db-kpi-status { display:flex; align-items:center; gap:6px; }
.db-status-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  transition:background .4s,box-shadow .4s;
}
.db-status-lbl { font-size:.72rem; font-family:var(--font-display); color:var(--muted); }
.kpi__bar {
  position:relative; height:4px; background:rgba(255,255,255,.06);
  border-radius:99px; overflow:visible;
}
.kpi__bar-fill {
  position:absolute; left:0; top:0; height:100%; border-radius:99px;
  transition:width .6s cubic-bezier(.4,0,.2,1),background .4s; min-width:4px;
}
.kpi__bar-ideal {
  position:absolute; top:-2px; height:8px; background:rgba(255,255,255,.1);
  border-radius:2px; border:1px solid rgba(255,255,255,.13);
}
.db-kpi-range {
  display:flex; justify-content:space-between;
  font-size:.68rem; color:rgba(139,169,154,.5); font-family:var(--font-display);
}

/* ── Charts ────────────────────────────────── */
.db-charts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(max-width:700px){.db-charts-grid{grid-template-columns:1fr;}}
.db-chart-card { padding:18px 20px 14px; display:flex; flex-direction:column; gap:12px; }
.db-chart-header { display:flex; align-items:center; gap:8px; }
.db-chart-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.db-chart-label { font-family:var(--font-display); font-size:.82rem; font-weight:600; color:var(--off-white); }
.db-chart-live { margin-left:auto; font-family:var(--font-display); font-size:.85rem; font-weight:700; }
.db-canvas { display:block; width:100%; height:160px; border-radius:var(--radius-sm); }

/* ── Metrics ───────────────────────────────── */
.db-metrics-card { padding:28px; }
.db-metrics-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:12px;
}
.db-metrics-actions { display:flex; gap:8px; }
.db-metrics-title { font-size:1.1rem; margin-top:4px; }
.db-metrics-table-wrap { overflow-x:auto; }
.db-metrics-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.db-metrics-table th {
  font-family:var(--font-display); font-size:.7rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  padding:9px 14px; text-align:left; border-bottom:1px solid rgba(82,183,136,.1);
  white-space:nowrap;
}
.db-metrics-table td {
  padding:12px 14px; border-bottom:1px solid rgba(82,183,136,.06);
  color:var(--off-white); white-space:nowrap;
}
.db-metrics-table tr:last-child td { border-bottom:none; }
.db-metrics-table tr:hover td { background:rgba(82,183,136,.04); }
.db-metrics-table code {
  background:rgba(255,255,255,.06); padding:2px 7px;
  border-radius:4px; font-size:.78rem; color:var(--aqua);
}
.db-sensor-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:middle; }

/* ── Inline threshold inputs ─────────────────── */
.db-th-inline {
  width:72px; background:rgba(255,255,255,.05); border:1px solid rgba(82,183,136,.15);
  border-radius:var(--radius-sm); color:var(--off-white);
  font-family:var(--font-display); font-size:.8rem; padding:4px 8px;
  transition:border-color .2s;
}
.db-th-inline:focus { outline:none; border-color:var(--green-lime); }

/* ── Panel row ─────────────────────────────── */
.db-panel-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:900px){.db-panel-row{grid-template-columns:1fr;}}

.db-panel { padding:24px; display:flex; flex-direction:column; gap:14px; }
.db-panel-title { font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--off-white); }
.db-panel-desc  { font-size:.82rem; color:var(--muted); line-height:1.5; }
.db-panel-status{ font-size:.78rem; color:var(--muted); font-family:var(--font-display); }

/* ── Comparison ─────────────────────────────── */
.db-cmp-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.db-input {
  flex:1; min-width:140px; background:rgba(255,255,255,.05);
  border:1px solid rgba(82,183,136,.15); border-radius:var(--radius-sm);
  color:var(--off-white); font-family:var(--font-body); font-size:.84rem;
  padding:8px 12px; transition:border-color .2s;
}
.db-input:focus { outline:none; border-color:var(--green-lime); }
.db-cmp-legend { display:flex; gap:20px; }
.db-cmp-legend span {
  display:flex; align-items:center; gap:8px;
  font-size:.76rem; color:var(--muted); font-family:var(--font-display);
}
.db-cmp-line { display:inline-block; width:24px; height:2px; border-radius:1px; background:var(--green-lime); }
.db-cmp-line--dashed { background:none; border-top:2px dashed var(--green-lime); }
.btn.active { background:rgba(82,183,136,.2); color:var(--green-lime); border-color:var(--green-lime); }

/* ── MQTT panel ─────────────────────────────── */
.db-mqtt-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.db-label-field { display:flex; flex-direction:column; gap:5px; }
.db-label-field span { font-size:.72rem; color:var(--muted); font-family:var(--font-display); letter-spacing:.04em; }
.db-label-field .db-input { min-width:0; }
.db-mqtt-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.db-mqtt-status { display:flex; align-items:center; gap:8px; font-size:.8rem; font-family:var(--font-display); color:var(--muted); }
.db-mqtt-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.db-mqtt-dot--ok     { background:var(--green-lime); box-shadow:0 0 7px var(--green-lime); }
.db-mqtt-dot--warning{ background:var(--warning); }
.db-mqtt-dot--danger { background:var(--danger); }
.db-mqtt-dot--muted  { background:var(--muted); }
.db-mqtt-hint {
  font-size:.72rem; color:rgba(139,169,154,.5); line-height:1.8;
  border-top:1px solid rgba(82,183,136,.08); padding-top:12px;
}
.db-mqtt-hint code {
  display:block; font-size:.7rem; color:var(--aqua); margin-top:2px;
  background:rgba(255,255,255,.04); padding:4px 8px; border-radius:4px;
}

/* ── Event log ─────────────────────────────── */
.db-log-card { padding:24px; }
.db-log-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin-bottom:16px;
}
.db-log-badge {
  width:20px; height:20px; border-radius:50%;
  background:var(--danger); color:#fff;
  font-size:.65rem; font-weight:700; font-family:var(--font-display);
  align-items:center; justify-content:center;
}
.db-log-list {
  display:flex; flex-direction:column; gap:4px;
  max-height:300px; overflow-y:auto;
  padding-right:4px;
}
.db-log-empty { font-size:.84rem; color:var(--muted); padding:12px 0; }
.db-log-row {
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 12px; border-radius:var(--radius-sm);
  border-left:3px solid transparent;
  background:rgba(255,255,255,.03);
  transition:background .15s;
}
.db-log-row:hover { background:rgba(255,255,255,.05); }
.db-log-row--ok      { border-color:var(--green-lime); }
.db-log-row--warning { border-color:var(--warning); }
.db-log-row--danger  { border-color:var(--danger); }
.db-log-icon  { font-size:.8rem; flex-shrink:0; margin-top:1px; }
.db-log-body  { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.db-log-sensor{ font-family:var(--font-display); font-size:.75rem; font-weight:700; color:var(--off-white); }
.db-log-msg   { font-size:.78rem; color:var(--muted); }
.db-log-time  { font-size:.7rem; color:rgba(139,169,154,.5); font-family:var(--font-display); white-space:nowrap; flex-shrink:0; }

/* ── Toast notifications ─────────────────────── */
.db-toast-container {
  position:fixed; top:calc(var(--nav-h) + 12px); right:20px;
  z-index:1500; display:flex; flex-direction:column; gap:10px;
  pointer-events:none; width:320px;
}
.db-toast {
  display:flex; align-items:center; gap:0;
  background:var(--bg-card2); border:1px solid rgba(82,183,136,.2);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  pointer-events:all;
  opacity:0; transform:translateX(24px);
  transition:opacity .3s,transform .3s;
}
.db-toast--in { opacity:1; transform:translateX(0); }
.db-toast__bar { width:4px; flex-shrink:0; align-self:stretch; }
.db-toast--ok      .db-toast__bar { background:var(--green-lime); }
.db-toast--warning .db-toast__bar { background:var(--warning); }
.db-toast--danger  .db-toast__bar { background:var(--danger); }
.db-toast__body {
  flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:3px; min-width:0;
}
.db-toast__body strong { font-family:var(--font-display); font-size:.82rem; color:var(--off-white); }
.db-toast__body span   { font-size:.76rem; color:var(--muted); }
.db-toast button {
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:8px 12px; font-size:.8rem; align-self:flex-start;
  transition:color .2s;
}
.db-toast button:hover { color:var(--off-white); }

/* ── Responsive ─────────────────────────────── */
@media(max-width:900px){ .db-wrapper{padding:28px 20px 60px;} }
@media(max-width:600px){ .db-wrapper{padding:20px 14px 48px;} .db-mqtt-grid{grid-template-columns:1fr;} }

/* ── Sensor Visualizations ───────────────────── */
.db-viz-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 8px;
  min-height: 160px;
}

/* pH scale centered wider */
#viz-ph .db-viz-wrap,
.db-viz-wrap:has(svg[viewBox="0 0 180 90"]) {
  min-height: 100px;
}

.db-mini-chart-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(82,183,136,0.08);
  margin-top: 4px;
}
.db-mini-chart-label span {
  font-size: .68rem;
  color: rgba(139,169,154,0.5);
  font-family: var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.db-canvas--mini {
  height: 90px !important;
}

/* Chart card slightly taller to fit both */
.db-chart-card {
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Trend indicator ─────────────────────────── */
.db-kpi-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.db-kpi-trend {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.4s ease;
  cursor: default;
}
.db-kpi-trend--up   { background: rgba(82,183,136,0.15);  color: #52B788; }
.db-kpi-trend--down { background: rgba(224,92,92,0.15);   color: #E05C5C; }
.db-kpi-trend--flat { background: rgba(139,169,154,0.1);  color: var(--muted); }