/* reseau.css - style sobre pro pour la page réseau */
:root{
  --bg:#0f1115; --panel:#0b0d10; --muted:#9aa3b2; --accent:#1e90ff;
  --glass: rgba(255,255,255,0.03);
  --card-radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body,#netMap{height:100%}
body{margin:0;background:linear-gradient(180deg,#07070a,var(--bg)); color:#e6eef6; font-size:14px}
.page{display:flex; min-height:100vh}
.sidebar{
  width:360px; background:var(--panel); padding:14px; display:flex; flex-direction:column; gap:12px;
  border-right:1px solid rgba(255,255,255,0.03);
}
.sidebar .sidebar-header{display:flex; align-items:center; gap:10px}
.sidebar .brand img{height:34px}
.panel{background:var(--glass); padding:10px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.panel h3{margin:0 0 8px 0; color:var(--muted); font-weight:600; font-size:13px}
#searchNet{width:100%; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit}

.list-panel .net-list{max-height:320px; overflow:auto}
.net-list .net-item{padding:8px; border-radius:8px; margin-bottom:8px; display:flex; justify-content:space-between; gap:10px; cursor:pointer; border:1px solid rgba(255,255,255,0.02)}
.net-item .meta{color:var(--muted); font-size:12px}

.content{flex:1; display:flex; flex-direction:column; gap:12px; padding:14px}
.content-header{display:flex; align-items:center; gap:10px}
.content-header h1{margin:0; font-size:18px}
.btn{background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 10px; border-radius:8px; color:inherit}
.main-grid{display:grid; grid-template-columns:1fr 420px; gap:12px; height:calc(100vh - 120px)}
.map-card{background:var(--glass); border-radius:var(--card-radius); overflow:hidden}
.map{height:100%; min-height:520px}
.details-card{background:var(--panel); border-radius:var(--card-radius); padding:12px; overflow:auto}
.detail-section{margin-bottom:12px}
.detail-table{width:100%; border-collapse:collapse}
.detail-table td{padding:6px 8px; border-bottom:1px dashed rgba(255,255,255,0.02)}
.kpi-row{display:flex; gap:8px; margin:8px 0}
.kpi{flex:1; background:rgba(255,255,255,0.03); padding:8px; border-radius:8px; text-align:center}
.kpi-val{font-size:18px; font-weight:700}
.kpi-label{font-size:12px; color:var(--muted)}

.clients-list, #d_central_list{max-height:180px; overflow:auto; padding:6px; background:rgba(0,0,0,0.15); border-radius:8px}
.clients-list .client{padding:6px; border-bottom:1px solid rgba(255,255,255,0.02); display:flex; justify-content:space-between}
.systems-row{display:flex; gap:12px}
.sys-dot{width:18px; height:18px; border-radius:50%; display:inline-block; margin-top:6px}
.sys-dot.ok{background:#32CD32}
.sys-dot.warn{background:#FFA500}
.sys-dot.err{background:#DC143C}
.sys-dot.unknown{background:#666}

.footer{padding:10px; text-align:center; color:var(--muted); background:transparent}

@media (max-width:1000px){
  .page{flex-direction:column}
  .sidebar{width:100%; order:2}
  .main-grid{grid-template-columns:1fr; height:auto}
  .map{min-height:420px}
}