/* =============================================================
   Sensor Dashboard — dashboard.css  v2.0
   Tous les sélecteurs sont préfixés .sd- pour éviter les
   conflits avec le thème WordPress actif.
   ============================================================= */

.sd-dashboard *, .sd-dashboard *::before, .sd-dashboard *::after { box-sizing: border-box; }

.sd-dashboard {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.5; color: #1a1a1a;
  background: transparent; max-width: 1100px; margin: 0 auto; padding: 0 0 2rem;
}

/* Header */
.sd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e5e5; flex-wrap: wrap; gap: 12px; }
.sd-header-left { display: flex; align-items: center; gap: 12px; }
.sd-header-icon { width: 36px; height: 36px; border-radius: 8px; background: #E6F1FB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sd-header-icon svg { width: 18px; height: 18px; }
.sd-title { font-size: 18px; font-weight: 600; color: #111; margin: 0; }
.sd-subtitle { font-size: 13px; color: #666; margin: 2px 0 0; }
.sd-header-right { display: flex; align-items: center; gap: 10px; }

/* Live badge */
.sd-live-badge { display: flex; align-items: center; gap: 6px; background: #EAF3DE; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: #3B6D11; }
.sd-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #3B6D11; animation: sd-pulse 1.5s infinite; }
@keyframes sd-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Buttons */
.sd-btn { font-size: 13px; padding: 6px 16px; border-radius: 6px; border: 1px solid #d0d0d0; background: #fff; color: #333; cursor: pointer; transition: background .15s, border-color .15s; font-family: inherit; }
.sd-btn:hover { background: #f5f5f5; border-color: #bbb; }
.sd-btn:active { transform: scale(.98); }

/* KPIs */
.sd-kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 1.5rem; }
@media (max-width:640px) { .sd-kpi-row { grid-template-columns: repeat(2,1fr); } }
.sd-kpi { background: #f7f7f7; border-radius: 8px; padding: 1rem; }
.sd-kpi-label { font-size: 12px; color: #777; margin-bottom: 6px; }
.sd-kpi-value { font-size: 24px; font-weight: 700; color: #111; }
.sd-kpi-value.sd-ok   { color: #3B6D11; }
.sd-kpi-value.sd-warn { color: #BA7517; }
.sd-kpi-value.sd-crit { color: #A32D2D; }
.sd-kpi-meta { font-size: 11px; color: #aaa; margin-top: 4px; }

/* Two col */
.sd-two-col { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-bottom: 1.5rem; }
@media (max-width:768px) { .sd-two-col { grid-template-columns: 1fr; } }
.sd-side-col { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.sd-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 1rem 1.25rem; }
.sd-card-flex { flex: 1; }
.sd-card-title { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1rem; }
.sd-chart-sensor-label { font-size: 13px; font-weight: 600; color: #333; text-transform: none; letter-spacing: 0; }

/* Filters */
.sd-filters { display: flex; gap: 6px; margin-bottom: 1rem; flex-wrap: wrap; }
.sd-filter { font-size: 12px; padding: 4px 12px; border-radius: 20px; border: 1px solid #ddd; background: #f5f5f5; color: #555; cursor: pointer; font-family: inherit; transition: all .15s; }
.sd-filter.active { background: #E6F1FB; border-color: #185FA5; color: #185FA5; font-weight: 600; }
.sd-filter:hover:not(.active) { background: #eee; }

/* Sensor list */
.sd-sensor-list { display: flex; flex-direction: column; gap: 8px; }
.sd-sensor-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e5e5; background: #fafafa; cursor: pointer; transition: border-color .15s, background .15s; }
.sd-sensor-item:hover { border-color: #bbb; }
.sd-sensor-item.active { border-color: #185FA5; background: #E6F1FB; }
.sd-sensor-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sd-si-ok   { background: #EAF3DE; }
.sd-si-warn { background: #FAEEDA; }
.sd-si-crit { background: #FCEBEB; }
.sd-si-off  { background: #f0f0f0; border: 1px solid #e5e5e5; }
.sd-sensor-icon svg { width: 16px; height: 16px; }
.sd-sensor-info { flex: 1; min-width: 0; }
.sd-sensor-name { font-size: 14px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sensor-loc  { font-size: 12px; color: #888; }
.sd-sensor-right { text-align: right; flex-shrink: 0; }
.sd-sensor-temp { font-size: 16px; font-weight: 700; }
.sd-t-ok   { color: #3B6D11; }
.sd-t-warn { color: #BA7517; }
.sd-t-crit { color: #A32D2D; }
.sd-t-off  { color: #aaa; }
.sd-sensor-time { font-size: 11px; color: #bbb; }

/* Alerts */
.sd-alert-panel { display: flex; flex-direction: column; gap: 10px; }
.sd-alert-item { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.sd-alert-crit { background: #FCEBEB; border: 1px solid #F7C1C1; }
.sd-alert-warn { background: #FAEEDA; border: 1px solid #FAC775; }
.sd-alert-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.sd-ad-crit    { background: #A32D2D; }
.sd-ad-warn    { background: #BA7517; }
.sd-alert-text { font-size: 13px; color: #111; font-weight: 600; }
.sd-alert-sub  { font-size: 11px; color: #666; margin-top: 2px; }
.sd-no-alert   { text-align: center; padding: 2rem 1rem; color: #aaa; font-size: 14px; }

/* Chart */
.sd-chart-card { margin-bottom: 1.5rem; }
.sd-chart-wrap { position: relative; width: 100%; height: 160px; margin-top: 4px; }

/* Footer */
.sd-footer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width:640px) { .sd-footer-row { grid-template-columns: 1fr; } }

/* Zones */
.sd-zone-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
@media (max-width:480px) { .sd-zone-grid { grid-template-columns: repeat(2,1fr); } }
.sd-zone-card  { background: #f7f7f7; border-radius: 8px; padding: 12px; text-align: center; border: 1px solid #ececec; }
.sd-zone-name  { font-size: 11px; color: #888; margin-bottom: 6px; }
.sd-zone-temp  { font-size: 18px; font-weight: 700; }
.sd-zone-count { font-size: 11px; color: #bbb; margin-top: 3px; }

/* Thresholds */
.sd-threshold-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sd-thr-label { font-size: 13px; color: #666; width: 100px; flex-shrink: 0; }
.sd-threshold-row input[type="range"] { flex: 1; }
.sd-thr-val   { font-size: 13px; font-weight: 600; color: #111; width: 42px; text-align: right; flex-shrink: 0; }
.sd-save-btn  { width: 100%; margin-top: 4px; }
.sd-saved-msg { font-size: 12px; color: #3B6D11; text-align: center; margin-top: 10px; display: none; font-weight: 600; }

/* Loading state */
.sd-loading { font-size: 13px; color: #aaa; padding: 1rem 0; text-align: center; }

/* Error state */
.sd-error { font-size: 13px; color: #A32D2D; background: #FCEBEB; border: 1px solid #F7C1C1; border-radius: 8px; padding: 10px 14px; }