/* =========================================================
   QUARZEO PRO V13.22
   Shell stable : menu natif, footbar unique, alignement corrigé
   ========================================================= */

:root{
  --qz-pro-sidebar:218px;
}

/* La structure native est déjà une grille.
   On interdit le second décalage ajouté par V13.20. */

#app.app:not(.hidden){
  display:grid !important;
  grid-template-columns:var(--qz-pro-sidebar) minmax(0,1fr) !important;
  min-height:100vh !important;
}

#app.app:not(.hidden) > .sidebar{
  grid-column:1 !important;

  position:sticky !important;
  top:0 !important;

  width:var(--qz-pro-sidebar) !important;
  height:100vh !important;

  margin:0 !important;
  transform:none !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#app.app:not(.hidden) > .workspace{
  grid-column:2 !important;

  width:100% !important;
  min-width:0 !important;

  margin-left:0 !important;
  margin-right:0 !important;
  transform:none !important;
}

/* Header sombre cohérent avec la sidebar. */

#app.app:not(.hidden) .workspace > .topbar{
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(43,208,229,.14),
      transparent 35%
    ),
    linear-gradient(
      90deg,
      #031526,
      #052d48 58%,
      #087287
    ) !important;

  border:0 !important;
  box-shadow:0 14px 34px rgba(3,24,40,.20) !important;
}

#app.app:not(.hidden) #pageEyebrow{
  color:#69dde9 !important;
}

#app.app:not(.hidden) #pageTitle{
  color:#fff !important;
}

/* Menu toujours au premier plan et réellement cliquable. */

#app.app:not(.hidden) #sideNav,
#app.app:not(.hidden) #sideNav .navGroup,
#app.app:not(.hidden) #sideNav a[data-page]{
  position:relative !important;
  pointer-events:auto !important;
}

#app.app:not(.hidden) #sideNav{
  z-index:40 !important;
}

#app.app:not(.hidden) #sideNav a[data-page]{
  z-index:41 !important;
  cursor:pointer !important;
}

#app.app:not(.hidden) #sideNav a[data-page] > *{
  pointer-events:none !important;
}

/* Une seule icône : navSvg générée par app.js. */

#app.app:not(.hidden) #sideNav a[data-page]{
  display:grid !important;
  grid-template-columns:31px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:9px !important;

  min-height:43px !important;

  padding:5px 9px !important;

  border:1px solid transparent !important;
  border-radius:12px !important;
}

#app.app:not(.hidden) #sideNav .navSvg{
  display:grid !important;
  place-items:center !important;

  width:31px !important;
  height:31px !important;
  min-width:31px !important;

  margin:0 !important;

  border:1px solid var(--qz-icon-border) !important;
  border-radius:9px !important;

  background:var(--qz-icon-bg) !important;
  color:var(--qz-icon-color) !important;
}

#app.app:not(.hidden) #sideNav .navSvg svg{
  width:16px !important;
  height:16px !important;

  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Suppression des pseudo-icônes créées par les anciens shells. */

#app.app:not(.hidden) #sideNav a[data-page]::before,
#app.app:not(.hidden) #sideNav a[data-page]::after,
#app.app:not(.hidden) #sideNav a[data-page] > i,
#app.app:not(.hidden) #sideNav a[data-page] > em,
#app.app:not(.hidden) #sideNav a[data-page] > .menuIcon,
#app.app:not(.hidden) #sideNav a[data-page] > .navIcon,
#app.app:not(.hidden) #sideNav a[data-page] > .qzIcon{
  display:none !important;
  content:none !important;
}

/* Couleurs par rubrique, comme ADMIN/PILOT. */

#sideNav [data-page="overview"]{
  --qz-icon-bg:rgba(39,205,224,.17);
  --qz-icon-border:rgba(74,223,236,.28);
  --qz-icon-color:#78e8ef;
}

#sideNav [data-page="crm"]{
  --qz-icon-bg:rgba(49,139,215,.20);
  --qz-icon-border:rgba(92,173,235,.29);
  --qz-icon-color:#86caf5;
}

#sideNav [data-page="pipeline"]{
  --qz-icon-bg:rgba(231,157,50,.20);
  --qz-icon-border:rgba(239,183,87,.29);
  --qz-icon-color:#f3c273;
}

#sideNav [data-page="agenda"]{
  --qz-icon-bg:rgba(113,104,226,.21);
  --qz-icon-border:rgba(147,139,237,.30);
  --qz-icon-color:#b4adf7;
}

#sideNav [data-page="communications"]{
  --qz-icon-bg:rgba(39,205,224,.17);
  --qz-icon-border:rgba(74,223,236,.28);
  --qz-icon-color:#78e8ef;
}

#sideNav [data-page="profile"]{
  --qz-icon-bg:rgba(49,139,215,.20);
  --qz-icon-border:rgba(92,173,235,.29);
  --qz-icon-color:#86caf5;
}

#sideNav [data-page="advantages"]{
  --qz-icon-bg:rgba(217,169,49,.21);
  --qz-icon-border:rgba(234,194,93,.30);
  --qz-icon-color:#f3d078;
}

#sideNav [data-page="documents"]{
  --qz-icon-bg:rgba(113,104,226,.21);
  --qz-icon-border:rgba(147,139,237,.30);
  --qz-icon-color:#b4adf7;
}

#sideNav [data-page="center"]{
  --qz-icon-bg:rgba(37,185,133,.19);
  --qz-icon-border:rgba(80,208,158,.28);
  --qz-icon-color:#80e0b7;
}

#sideNav [data-page="performance"]{
  --qz-icon-bg:rgba(39,205,224,.17);
  --qz-icon-border:rgba(74,223,236,.28);
  --qz-icon-color:#78e8ef;
}

#sideNav [data-page="boost"]{
  --qz-icon-bg:rgba(231,157,50,.20);
  --qz-icon-border:rgba(239,183,87,.29);
  --qz-icon-color:#f3c273;
}

/* Valeur par défaut pour toute route future. */

#sideNav a[data-page]{
  --qz-icon-bg:rgba(39,205,224,.14);
  --qz-icon-border:rgba(74,223,236,.22);
  --qz-icon-color:#78e8ef;
}

#app.app:not(.hidden) #sideNav a[data-page].active{
  border-color:rgba(43,208,229,.46) !important;

  background:
    linear-gradient(
      90deg,
      rgba(43,208,229,.20),
      rgba(43,208,229,.055)
    ) !important;

  color:#fff !important;

  box-shadow:inset 3px 0 0 #2bd0e5 !important;
}

/* Aucun ancien ADS ou dock concurrent. */

#sideNav [data-page="ads"],
.qzp-pro-dock,
.qz-shell-dock,
#qzProFinalDock,
#qz9Footbar{
  display:none !important;
}

/* Footbar unique et compacte. */

#qzProFootbarV1322{
  position:fixed;
  z-index:680;

  left:calc(50% + var(--qz-pro-sidebar) / 2);
  bottom:14px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  padding:7px 8px;

  transform:translateX(-50%);

  border:1px solid rgba(73,207,232,.22);
  border-radius:17px;

  background:
    linear-gradient(
      90deg,
      #041d31,
      #073551
    );

  box-shadow:0 15px 34px rgba(2,20,34,.26);
}

#qzProFootbarV1322 button{
  min-height:34px;

  padding:7px 12px;

  border:1px solid transparent;
  border-radius:10px;

  background:transparent;
  color:#c7dce5;

  font:inherit;
  font-size:8px;
  font-weight:850;

  cursor:pointer;
}

#qzProFootbarV1322 button:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

#qzProFootbarV1322 button.active{
  border-color:rgba(43,208,229,.48);

  background:
    linear-gradient(
      180deg,
      rgba(43,208,229,.21),
      rgba(43,208,229,.08)
    );

  color:#fff;
}

@media(max-width:900px){
  :root{
    --qz-pro-sidebar:190px;
  }

  #qzProFootbarV1322{
    left:50%;
    max-width:calc(100vw - 24px);
    overflow:auto;
  }
}