:root{--primary:#095583;--accent:#00b4d8;--danger:#dc3545;--warning:#fd7e14;--success:#198754;--sidebar-w:256px;--sidebar-bg:#0f1923;--body-bg:#f4f6f9;--card-bg:#fff;--card-border:#e9ecef;--text-muted:#6c757d;--font:'DM Sans',sans-serif;--mono:'JetBrains Mono',monospace;--radius:12px;--shadow:0 1px 4px rgba(0,0,0,.09)}
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font);font-size:14px;background:var(--body-bg);margin:0;display:flex;min-height:100vh}
a{text-decoration:none;color:var(--primary)}a:hover{color:#07466b}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--sidebar-bg);display:flex;flex-direction:column;z-index:1000;overflow:hidden;transition:width .2s}
.sidebar.collapsed{width:62px}
.sidebar-header{padding:18px 14px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.sidebar-logo{display:flex;align-items:center;gap:10px;overflow:hidden}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;flex-shrink:0}
.logo-title{font-size:15px;font-weight:700;color:#fff;white-space:nowrap}
.logo-sub{font-size:10px;color:rgba(255,255,255,.35);white-space:nowrap}
.sidebar-nav{flex:1;overflow-y:auto;padding:6px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.nav-section-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:14px 18px 4px;white-space:nowrap}
.sidebar.collapsed .nav-section-label{opacity:0}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 18px;color:rgba(255,255,255,.75);cursor:pointer;white-space:nowrap;margin:1px 7px;border-radius:8px;transition:background .15s,color .15s}
.nav-item i{font-size:17px;flex-shrink:0;width:20px;text-align:center}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:rgba(9,85,131,.22);color:#74aaff;font-weight:600}
.sidebar-footer{padding:10px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.user-info{display:flex;align-items:center;gap:9px}
.user-avatar{width:34px;height:34px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.user-name{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.user-role{font-size:10px;color:rgba(255,255,255,.35)}
.btn-logout{margin-left:auto;color:rgba(255,255,255,.35);font-size:17px;padding:3px;border-radius:6px;transition:color .15s}
.btn-logout:hover{color:var(--danger)}
.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .2s}
.main-content.expanded{margin-left:62px}
.topbar{height:54px;background:#fff;border-bottom:1px solid var(--card-border);display:flex;align-items:center;padding:0 22px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.btn-toggle-sidebar{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:5px;border-radius:7px}
.btn-toggle-sidebar:hover{background:var(--body-bg)}
.page-content{flex:1;padding:22px}
.card{border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--card-bg)}
.card-header{border-bottom:1px solid var(--card-border);background:transparent;padding:13px 18px;font-weight:600;font-size:14px}
.kpi-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);transition:.2s}
.kpi-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-2px)}
.kpi-icon{width:50px;height:50px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.kpi-icon.blue{background:#e8f0fe;color:var(--primary)}.kpi-icon.green{background:#d1e7dd;color:var(--success)}.kpi-icon.orange{background:#ffe5d0;color:var(--warning)}.kpi-icon.red{background:#f8d7da;color:var(--danger)}.kpi-icon.cyan{background:#d0f4fa;color:var(--accent)}.kpi-icon.grey{background:#e9ecef;color:var(--text-muted)}.kpi-icon.purple{background:#e9d8fd;color:#6f42c1}
.kpi-value{font-size:26px;font-weight:700;line-height:1;font-family:var(--mono)}
.kpi-label{font-size:11px;color:var(--text-muted);margin-top:3px}
.table-bb th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:2px solid var(--card-border);white-space:nowrap;padding:9px 11px}
.table-bb td{vertical-align:middle;font-size:13px;padding:9px 11px}
.table-bb tr:hover td{background:#f8f9fa}
.code{font-family:var(--mono);font-size:11px;background:#f0f4ff;padding:2px 7px;border-radius:4px;color:var(--primary);border:1px solid #d0dcff}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px}
.page-header h1{font-size:21px;font-weight:700;margin:0}
.page-header .sub{font-size:12px;color:var(--text-muted);margin-top:3px}
.login-page{min-height:100vh;background:linear-gradient(135deg,#0f1923,#095583,#07466b);display:flex;align-items:center;justify-content:center;padding:22px}
.login-card{background:#fff;border-radius:18px;padding:44px 36px;width:100%;max-width:410px;box-shadow:0 20px 60px rgba(0,0,0,.22)}
.login-logo{width:180px;height:180px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;padding:0}
.login-logo img{width:100%;height:100%;object-fit:contain}
.sensor-card{background:#fff;border:1px solid var(--card-border);border-radius:13px;padding:18px;position:relative;cursor:pointer;transition:.2s}
.sensor-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.sensor-card.ok{border-top:4px solid var(--success)}.sensor-card.alerte{border-top:4px solid var(--warning)}.sensor-card.alarme{border-top:4px solid var(--danger);animation:pulse 1.5s ease-in-out infinite}.sensor-card.hors_ligne{border-top:4px solid #6c757d;opacity:.75}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,53,69,.3)}50%{box-shadow:0 0 0 8px rgba(220,53,69,0)}}
.temp-val{font-size:38px;font-weight:800;font-family:var(--mono);line-height:1;margin:10px 0 4px}
.t-ok{color:var(--success)}.t-alerte{color:var(--warning)}.t-alarme{color:var(--danger)}.t-off{color:#adb5bd}
.jauge{height:7px;background:#e9ecef;border-radius:4px;margin:9px 0}
.jauge-fill{height:100%;border-radius:4px;transition:width .5s}
.j-ok{background:linear-gradient(90deg,#198754,#20c997)}.j-alerte{background:linear-gradient(90deg,#fd7e14,#ffc107)}.j-alarme{background:linear-gradient(90deg,#dc3545,#ff6b6b)}
.refresh-bar{height:3px;background:#e9ecef;border-radius:2px;overflow:hidden;margin-bottom:16px}
.refresh-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));width:0%;transition:width 30s linear}
.font-mono{font-family:var(--mono)}.text-xs{font-size:11px}.fw-600{font-weight:600}.fw-700{font-weight:700}
.admin-banner{background:linear-gradient(135deg,#0f1923,#1a2744);color:#fff;border-radius:var(--radius);padding:18px 22px;margin-bottom:22px}
@media(max-width:768px){.sidebar{width:0}.sidebar.open{width:var(--sidebar-w)}.main-content{margin-left:0}}