:root{
  --bg:#0b1220;
  --panel:#121c2e;
  --panel-2:#0f1726;
  --text:#e8eefc;
  --muted:#9fb0d0;
  --border:rgba(255,255,255,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --bs-body-bg:#0b1220;
  --bs-body-color:#e8eefc;
  --bs-table-bg:transparent;
  --bs-table-color:#e8eefc;
  --bs-table-striped-bg:rgba(255,255,255,.03);
  --bs-table-striped-color:#e8eefc;
  --bs-table-hover-bg:rgba(255,255,255,.05);
  --bs-table-hover-color:#e8eefc;
  --bs-table-border-color:rgba(255,255,255,.08);
}

html,body{height:100%;}
body{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(46,104,255,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(255,110,64,.12), transparent 55%),
              linear-gradient(180deg, #070c16, var(--bg));
  color:var(--text);
}

.topbar{
  background: rgba(18,28,46,.75);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}

.brand{
  font-weight:700;
  letter-spacing:.4px;
}

.panel{
  background: linear-gradient(180deg, rgba(18,28,46,.9), rgba(15,23,38,.92));
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
}

.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.badge-soft{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
}

.drv-card{
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.drv-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
}

.drv-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}

.drv-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--drv-color, #7aa7ff);
  box-shadow: 0 0 0 4px rgba(122,167,255,.12), 0 0 14px rgba(122,167,255,.35);
}

.cassette-strip{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:7px;
  margin-top:10px;
}

.slot{
  height:10px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

.slot.connected{
  background: rgba(140, 255, 185, .22);
  border-color: rgba(140, 255, 185, .35);
}

.slot.running{
  background: linear-gradient(180deg, rgba(24,231,170,.95), rgba(12,168,124,.92));
  box-shadow: 0 0 12px rgba(24,231,170,.35);
  border-color: rgba(24,231,170,.55);
}

.slot.stopped{
  background: linear-gradient(180deg, rgba(255,92,92,.95), rgba(201,32,32,.92));
  box-shadow: 0 0 12px rgba(255,92,92,.28);
  border-color: rgba(255,92,92,.55);
}

.slot.disconnected{
  background: rgba(255,255,255,.04);
  border-style:dashed;
  opacity:.55;
}

.slot.idle{
  background: rgba(140, 255, 185, .14);
  border-color: rgba(140, 255, 185, .26);
}

.slot.vent{
  background: linear-gradient(180deg, rgba(24,231,170,.55), rgba(12,168,124,.45));
  border-color: rgba(24,231,170,.40);
  box-shadow: 0 0 10px rgba(24,231,170,.18);
}

.slot.fault{
  border-color: rgba(255, 200, 0, .55) !important;
  box-shadow: 0 0 10px rgba(255, 200, 0, .18);
}

.badge-state{
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--muted);
}

.badge-state.on{color: rgba(140,255,185,.95); border-color: rgba(140,255,185,.26);}
.badge-state.off{color: rgba(255,255,255,.70); border-color: rgba(255,255,255,.18);}

.badge-warn{
  background: rgba(255, 200, 0, .10);
  border: 1px solid rgba(255, 200, 0, .30);
  color: rgba(255, 220, 120, .95);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}

.kpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.kpi{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  min-width: 130px;
}

.kpi .label{color:var(--muted); font-size:.85rem;}
.kpi .value{font-weight:700; font-size:1.05rem;}

.led{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}

.led.mini{
  width:7px;
  height:7px;
  border-width: 1px;
}

.led.green.on{
  background: rgba(24,231,170,.95);
  box-shadow: 0 0 12px rgba(24,231,170,.55);
  border-color: rgba(24,231,170,.75);
}

.led.red.on{
  background: rgba(255,92,92,.95);
  box-shadow: 0 0 12px rgba(255,92,92,.50);
  border-color: rgba(255,92,92,.75);
}

.table-darkish,
.table-darkish thead,
.table-darkish tbody,
.table-darkish tr,
.table-darkish th,
.table-darkish td{
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-hover-bg: rgba(255,255,255,.04) !important;
  background-color: transparent !important;
  color: var(--text) !important;
}

.table-darkish th{
  color: var(--muted) !important;
  font-weight: 600;
}

.table-darkish td, .table-darkish th{
  border-color: rgba(255,255,255,.08) !important;
}

.table-darkish .form-control,
.table-darkish .form-control:focus,
.table-darkish .form-control:disabled{
  background-color: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

.subtle-link{
  color: var(--muted);
  text-decoration: none;
}

.subtle-link:hover{color:var(--text);}

.btn-outline-light{
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.72);
}

.btn-outline-light:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.32);
  color: var(--text);
}

.btn-outline-light.active{
  background: rgba(140, 255, 185, .16);
  border-color: rgba(140, 255, 185, .48);
  color: rgba(140,255,185,.98);
}

.form-control,
.form-control:focus,
.form-control:disabled{
  background-color: rgba(255,255,255,.06);
  border-color: rgba(109, 190, 2, 0.14);
  color: var(--text);
}

.form-control:disabled{
  opacity:.5;
}

.form-select{
  background-color: rgba(255,255,255,.06);
  border-color: rgba(2, 21, 190, 0.14);
  color: var(--text);
}

.form-control::placeholder{
  color: rgba(159,176,208,.70);
}

.form-select option{
  color: #0b1220;
}

.synoptique-wrap{
  width:100%;
  overflow:auto;
  border-radius:14px;
}

.synoptique-svg{
  min-width: 780px;
  display:block;
}

.legend-box{
  width:12px;
  height:12px;
  border-radius:3px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.legend-box.running{
  background: rgba(24,231,170,.95);
  border-color: rgba(24,231,170,.75);
}

.legend-box.stopped{
  background: rgba(255,92,92,.95);
  border-color: rgba(255,92,92,.75);
}

.legend-box.disconnected{
  background: rgba(255,255,255,.06);
  border-style:dashed;
  opacity:.75;
}

/* ═══ Contrôle zone DRV ═══ */

.ctrl-section{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
}
.ctrl-section .label{color:var(--muted); font-size:.85rem;}

/* Consigne +/- fixe */
.ctrl-setpoint{
  display:flex;
  align-items:center;
  gap:0;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  overflow:hidden;
}
.ctrl-setpoint-btn{
  width:36px;
  height:36px;
  border:none;
  background: rgba(255,255,255,.08);
  color:#e2e8f0;
  font-size:1.2rem;
  font-weight:700;
  cursor:pointer;
  transition: background .15s;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ctrl-setpoint-btn:hover{background: rgba(255,255,255,.18);}
.ctrl-setpoint-btn:active{background: rgba(255,255,255,.25);}
.ctrl-setpoint-value{
  flex:1;
  text-align:center;
  font-weight:700;
  font-size:1.1rem;
  padding:0 4px;
  white-space:nowrap;
}

/* Mode grille 2×3 (5 modes : cool, heat, fan, auto, dry) */
.ctrl-mode-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.ctrl-mode-grid .ctrl-mode-btn:last-child:nth-child(odd){
  grid-column: 1 / -1;
}
.ctrl-mode-btn{
  padding:7px 4px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  background: rgba(255,255,255,.05);
  color:rgba(255,255,255,.7);
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  transition: all .15s;
  text-align:center;
}
.ctrl-mode-btn:hover{background: rgba(255,255,255,.12);}
.ctrl-mode-btn.active{
  border-color: var(--mode-color, #60a5fa);
  background: color-mix(in srgb, var(--mode-color, #60a5fa) 18%, transparent);
  color: var(--mode-color, #60a5fa);
}

/* Ventilateur boutons carrés */
.ctrl-fan-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
}
.ctrl-fan-btn{
  padding:8px 0;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  background: rgba(255,255,255,.05);
  color:rgba(255,255,255,.7);
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  transition: all .15s;
  text-align:center;
}
.ctrl-fan-btn:hover{background: rgba(255,255,255,.12);}
.ctrl-fan-btn.active{
  border-color: #34d399;
  background: rgba(52,211,153,.15);
  color: #34d399;
}

/* Bouton acquit filtre */
.ctrl-acquit-btn{
  padding:4px 12px;
  border:1px solid rgba(251,191,36,.3);
  border-radius:6px;
  background: rgba(251,191,36,.1);
  color:#fbbf24;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition: all .15s;
  width:100%;
}
.ctrl-acquit-btn:hover{background: rgba(251,191,36,.25);}