@font-face{
  font-family:'IBM Plex Sans';
  font-weight:400;
  src:url('/fonts/IBMPlexSans-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-weight:500;
  src:url('/fonts/IBMPlexSans-Medium.ttf') format('truetype');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-weight:600;
  src:url('/fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
}
@font-face{
  font-family:'IBM Plex Sans';
  font-weight:700;
  src:url('/fonts/IBMPlexSans-Bold.ttf') format('truetype');
}

:root{
  --navy:#16233F;
  --navy-2:#1F3358;
  --slate:#5C6B85;
  --teal:#0E7C7B;
  --teal-dark:#0A5E5D;
  --bg:#F4F6F9;
  --panel:#FFFFFF;
  --border:#E1E5EC;
  --danger:#B3452F;
  --ok:#2E7D5B;
  --text:#1B2333;
  --text-soft:#5C6B85;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);}
.app{display:flex;height:100vh;overflow:hidden;}

.sidebar{
  width:220px;flex-shrink:0;background:var(--navy);color:#DCE3F0;
  display:flex;flex-direction:column;padding:0 0 12px;
  overflow-y:auto;
  transition:width .18s ease, min-width .18s ease;
}
.app.sidebar-collapsed .sidebar{width:0;min-width:0;overflow:hidden;}
.sidebar-toggle{background:none;border:1px solid var(--border);border-radius:6px;font-size:15px;line-height:1;cursor:pointer;padding:6px 10px;margin-right:14px;color:var(--text-soft);}
.sidebar-toggle:hover{background:#EEF1F5;}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-track{background:transparent;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px;}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25);}
.brand{padding:2px 0 0 2px;margin:0 0 14px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:var(--navy);z-index:1;}
.brand img{display:block;width:calc(100% - 2px);height:auto;margin:0;padding:0;}
.brand span{color:var(--teal);}
.nav-item{display:flex;align-items:center;padding:10px 20px;font-size:13.5px;color:#D3DBEC;cursor:pointer;border-left:3px solid transparent;text-decoration:none;}
.nav-group-items .nav-item{padding-left:32px;font-size:13px;}
.nav-group .nav-group-items .nav-group-items .nav-item{padding-left:44px;}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff;}
.nav-item.active{background:#2F4D7A;color:#fff;border-left-color:var(--teal);}

.nav-group-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:10px 20px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#A9B7D6;background:none;border:none;cursor:pointer;text-align:left;
}
.nav-group .nav-group{padding-left:8px;}
.nav-group .nav-group .nav-group-toggle{padding:8px 20px 8px 32px;font-size:10.5px;color:#8FA0C2;}
.nav-group-toggle:hover{color:#DCE3F0;}
.nav-group-toggle .chevron{transition:transform .15s ease;font-size:10px;}
.nav-group.open .nav-group-toggle .chevron{transform:rotate(90deg);}
.nav-group-items{max-height:0;overflow:hidden;transition:max-height .18s ease;}
.nav-group.open > .nav-group-items{max-height:1400px;}

.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  height:56px;background:var(--panel);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex-shrink:0;
}
.topbar h1{font-size:15px;font-weight:600;margin:0;}
.topbar .meta{font-size:12.5px;color:var(--text-soft);display:flex;align-items:center;gap:8px;}
.topbar select{border:1px solid var(--border);border-radius:6px;font-size:12.5px;padding:4px 6px;}

.content{flex:1;overflow:auto;padding:14px 22px;display:flex;flex-direction:column;gap:8px;}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.toolbar-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.search{border:1px solid var(--border);background:#fff;border-radius:6px;padding:7px 12px;font-size:13px;width:220px;}
.btn{border:none;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-dark);}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
.btn-ghost:hover{background:#EEF1F5;}
.btn-add{background:#E8F4F2;border:1px solid var(--teal);color:var(--teal-dark);}
.btn-add:hover{background:var(--teal);color:#fff;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}

.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;padding:0;margin-right:3px;
  border:1px solid var(--border);border-radius:4px;background:#fff;
  color:var(--text);cursor:pointer;text-decoration:none;vertical-align:middle;
}
.btn-icon:hover{background:#EEF1F5;}
.btn-icon.danger{color:var(--danger);}
.btn-icon.danger:hover{background:#FBEAE6;}
.btn-icon svg{width:10px;height:10px;flex-shrink:0;}

.grid-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px;
  flex:1;min-height:0;display:flex;flex-direction:column;
}
#grid{flex:1;width:100%;}

.status-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;}
.status-ok{background:#E4F1EA;color:var(--ok);}
.status-off{background:#F6E4E0;color:var(--danger);}

.overlay{position:fixed;inset:0;background:rgba(22,35,63,.35);display:none;z-index:10;}
.overlay.open{display:block;}
.drawer{
  position:fixed;top:0;right:-420px;width:400px;height:100%;background:#fff;z-index:11;
  box-shadow:-8px 0 24px rgba(0,0,0,.12);transition:right .25s ease;display:flex;flex-direction:column;
}
.drawer.open{right:0;}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.drawer-head h2{font-size:15px;margin:0;font-weight:600;}
.drawer-close{cursor:pointer;color:var(--text-soft);font-size:18px;background:none;border:none;}
.drawer-body{padding:20px 22px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:16px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text-soft);margin-bottom:5px;}
.field input, .field select, .field textarea{width:100%;border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:13.5px;font-family:inherit;}
.drawer-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}

.ag-theme-quartz{--ag-font-size:8px;}
.ag-theme-quartz .ag-cell, .ag-theme-quartz .ag-header-cell-text, .ag-theme-quartz .ag-header-cell-label{
  font-size:13px !important;
}
.ag-theme-quartz .ag-cell{padding-left:6px !important;padding-right:6px !important;line-height:24px !important;display:flex !important;align-items:center !important;}
.ag-theme-quartz .ag-cell-wrapper, .ag-theme-quartz .ag-cell-value{display:flex !important;align-items:center !important;height:100% !important;line-height:normal !important;}
.ag-theme-quartz .ag-header-cell{padding-left:6px !important;padding-right:6px !important;display:flex !important;align-items:center !important;}
.ag-theme-quartz .ag-header-cell-comp-wrapper, .ag-theme-quartz .ag-header-cell-label{display:flex !important;align-items:center !important;height:100% !important;}
.ag-theme-quartz .ag-paging-panel{height:32px !important;min-height:32px !important;padding:0 10px !important;font-size:11px !important;}
.ag-theme-quartz .ag-paging-panel .ag-icon{font-size:14px !important;}
.ag-theme-quartz .ag-paging-button{padding:0 4px !important;}

/* ==========================================================================
   Responsive — menu latéral, en-tête, barre d'outils
   Sous 860px (tablette portrait et mobile), le menu devient un panneau
   qui glisse par-dessus le contenu au lieu de rétrécir la mise en page.
   ========================================================================== */
@media (max-width: 860px){
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;width:260px;min-width:260px;z-index:600;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:4px 0 16px rgba(0,0,0,.2);
  }
  /* Sous ce seuil, la classe "sidebar-collapsed" signifie l'inverse du
     bureau : masqué par défaut, affiché quand on l'active. */
  .app.sidebar-collapsed .sidebar{width:260px;min-width:260px;overflow-y:auto;transform:translateX(0);}
  .app:not(.sidebar-collapsed) .sidebar{transform:translateX(-100%);}

  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(10,15,25,.45);z-index:590;}
  .app.sidebar-collapsed .sidebar-backdrop{display:block;}

  .topbar{padding:0 14px;height:52px;}
  .topbar h1{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar .meta{font-size:11.5px;gap:6px;}
  .content{padding:12px;}

  .toolbar{gap:8px;}
  .toolbar-left{width:100%;}
  .search{width:100%;box-sizing:border-box;}

  .drawer{width:100% !important;right:-100% !important;}

  .kpi-row{flex-wrap:wrap;}
  .kpi-card{flex:1 1 140px;}
}

@media (max-width: 480px){
  .topbar h1{max-width:50vw;}
  .btn{padding:8px 12px;font-size:12.5px;}
}