/* ============================================================
   ML-UREL — Synthèse DG 3 colonnes V3
   Fidèle à la maquette validée :
   1. Performances par UREL
   2. Commentaires des responsables
   3. Classement des UREL — objectif IA
   ============================================================ */

#app.topnav-layout .dg-synth-bottom-grid.dg-synth-v3{
  display:grid!important;
  grid-template-columns:minmax(0,1.16fr) minmax(0,.86fr) minmax(0,1.08fr)!important;
  gap:14px!important;
  align-items:stretch!important;
  margin-top:14px!important;
}

#app.topnav-layout .dg-synth-bottom-grid.dg-synth-v3 > .dg-global-panel{
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  border:1px solid #dfe7f1!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 6px 22px rgba(23,44,74,.045)!important;
  overflow:hidden!important;
}

#app.topnav-layout .dg-synth-v3 .dg-synth-v3-head{
  min-height:68px!important;
  padding:15px 16px 12px!important;
  border-bottom:1px solid #e7edf5!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
}

#app.topnav-layout .dg-synth-v3 .dg-synth-v3-head-main{
  display:flex!important;
  align-items:flex-start!important;
  gap:11px!important;
  min-width:0!important;
}

#app.topnav-layout .dg-synth-v3 .dg-synth-v3-icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  background:#eef5ff!important;
  color:#1769e0!important;
  font-size:17px!important;
  line-height:1!important;
}

#app.topnav-layout .dg-synth-v3 .dg-synth-v3-icon.orange{
  background:#fff5e9!important;
  color:#e99218!important;
}

#app.topnav-layout .dg-synth-v3 .dg-synth-v3-head strong{
  display:block!important;
  color:#0b2147!important;
  font-size:13px!important;
  line-height:1.28!important;
  font-weight:800!important;
}

#app.topnav-layout .dg-synth-v3 .dg-synth-v3-head small{
  display:block!important;
  margin-top:4px!important;
  color:#71839b!important;
  font-size:9.5px!important;
  line-height:1.35!important;
}

#app.topnav-layout .dg-synth-v3 .dg-synth-v3-count{
  flex:0 0 auto!important;
  padding:5px 8px!important;
  border-radius:9px!important;
  background:#f1f5fb!important;
  color:#385781!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
}

/* ===== Colonne 1 : Performances UREL ===== */

#app.topnav-layout .dg-synth-v3 .dg-performance-table-wrap{
  overflow-x:auto!important;
  padding:0 14px 12px!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table{
  width:100%!important;
  min-width:520px!important;
  border-collapse:collapse!important;
  table-layout:auto!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table thead th{
  height:42px!important;
  padding:8px 7px!important;
  background:#f5f8fc!important;
  border-bottom:1px solid #e5ebf3!important;
  color:#58708e!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-align:left!important;
  white-space:nowrap!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table tbody td{
  height:49px!important;
  padding:8px 7px!important;
  border-bottom:1px solid #edf1f6!important;
  color:#132b50!important;
  font-size:10px!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table tbody tr:last-child td{
  border-bottom:0!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table .rank{
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  background:#f0f5fb!important;
  color:#476587!important;
  font-size:10px!important;
  font-weight:800!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table td:nth-child(2){
  font-weight:800!important;
  color:#0c2a55!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table .perf-num{
  color:#0c2a55!important;
  font-weight:800!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table .perf-var.bad{
  color:#eb4335!important;
  font-weight:750!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table .perf-var.good{
  color:#168a55!important;
  font-weight:750!important;
}

#app.topnav-layout .dg-synth-v3 .dg-performance-table .perf-lait{
  color:#1f5fae!important;
  font-weight:700!important;
}

#app.topnav-layout .dg-synth-v3 .dg-attainment{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  font-weight:800!important;
}

#app.topnav-layout .dg-synth-v3 .dg-attainment-ring{
  --p:0;
  --c:#e54d42;
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  border-radius:50%!important;
  background:conic-gradient(var(--c) calc(var(--p)*1%),#e8eef5 0)!important;
  position:relative!important;
}

#app.topnav-layout .dg-synth-v3 .dg-attainment-ring::after{
  content:""!important;
  position:absolute!important;
  inset:4px!important;
  border-radius:50%!important;
  background:#fff!important;
}

#app.topnav-layout .dg-synth-v3 .dg-attainment.good{
  color:#168a55!important;
}
#app.topnav-layout .dg-synth-v3 .dg-attainment.warn{
  color:#e58713!important;
}
#app.topnav-layout .dg-synth-v3 .dg-attainment.bad{
  color:#e54d42!important;
}

/* ===== Colonne 2 : commentaires ===== */

#app.topnav-layout .dg-synth-v3 .dg-comments-v3{
  min-height:485px!important;
  height:calc(100% - 68px)!important;
  display:flex!important;
  flex-direction:column!important;
}

#app.topnav-layout .dg-synth-v3 .dg-comments-empty-v3{
  flex:1!important;
  min-height:420px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px 24px!important;
  text-align:center!important;
}

#app.topnav-layout .dg-synth-v3 .dg-comments-empty-icon{
  width:82px!important;
  height:82px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#eef5ff!important;
  color:#1769e0!important;
  font-size:34px!important;
  margin-bottom:16px!important;
}

#app.topnav-layout .dg-synth-v3 .dg-comments-empty-v3 strong{
  color:#0b2147!important;
  font-size:16px!important;
  font-weight:800!important;
}

#app.topnav-layout .dg-synth-v3 .dg-comments-empty-v3 p{
  max-width:280px!important;
  margin:7px 0 17px!important;
  color:#6780a0!important;
  font-size:11px!important;
  line-height:1.5!important;
}

#app.topnav-layout .dg-synth-v3 .dg-comments-add-btn{
  border:0!important;
  border-radius:10px!important;
  background:#eef5ff!important;
  color:#1769e0!important;
  padding:10px 14px!important;
  font-size:11px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

#app.topnav-layout .dg-synth-v3 .dg-comments-list-v3{
  padding:12px 14px 14px!important;
  display:grid!important;
  gap:9px!important;
}

#app.topnav-layout .dg-synth-v3 .dg-comments-list-v3 .dg-v5-comment{
  border:1px solid #e7edf5!important;
  border-radius:11px!important;
  background:#fafcff!important;
  padding:10px!important;
}

/* ===== Colonne 3 : classement ===== */

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3{
  padding:5px 14px 12px!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank{
  min-height:55px!important;
  display:grid!important;
  grid-template-columns:27px minmax(0,1fr) 55px!important;
  grid-template-rows:auto 7px!important;
  column-gap:9px!important;
  row-gap:6px!important;
  padding:9px 0!important;
  border-bottom:1px solid #edf1f6!important;
  align-items:center!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank:last-child{
  border-bottom:0!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank>span{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:27px!important;
  height:27px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  background:#f0f5fb!important;
  color:#476587!important;
  font-size:10px!important;
  font-weight:800!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank-label{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank-label b{
  display:block!important;
  color:#0b2b55!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:800!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank-label small{
  display:block!important;
  margin-top:2px!important;
  color:#6a7f9a!important;
  font-size:8.7px!important;
  line-height:1.25!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank-progress{
  grid-column:2 / span 2!important;
  grid-row:2!important;
  height:7px!important;
  border-radius:999px!important;
  background:#e9eef5!important;
  overflow:hidden!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank-progress i{
  display:block!important;
  height:100%!important;
  border-radius:999px!important;
  background:#da554c!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank-progress i.orange{
  background:#e89a25!important;
}
#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank-progress i.green{
  background:#1c9b64!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank>strong{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  color:#e54d42!important;
  font-size:11.5px!important;
  font-weight:800!important;
}

#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank:has(.green)>strong{
  color:#168a55!important;
}
#app.topnav-layout .dg-synth-v3 .dg-ranking-v3 .dg-v5-rank:has(.orange)>strong{
  color:#d88412!important;
}

/* Pas de footers/boutons dans cette maquette */
#app.topnav-layout .dg-synth-v3 .dg-v5-panel-footer{
  display:none!important;
}

/* Responsive */
@media(max-width:1250px){
  #app.topnav-layout .dg-synth-bottom-grid.dg-synth-v3{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
  #app.topnav-layout .dg-synth-bottom-grid.dg-synth-v3 > .dg-synth-v3-performance{
    grid-column:1 / -1!important;
  }
}

@media(max-width:820px){
  #app.topnav-layout .dg-synth-bottom-grid.dg-synth-v3{
    grid-template-columns:1fr!important;
  }
  #app.topnav-layout .dg-synth-bottom-grid.dg-synth-v3 > *{
    grid-column:auto!important;
  }
  #app.topnav-layout .dg-synth-v3 .dg-comments-empty-v3{
    min-height:260px!important;
  }
}