/* =========================================================
   QUARZEO ECOSYSTEM V10.14
   Design System commun PILOT / ADMIN / PARTENAIRE
   ========================================================= */

:root {
  --qz14-navy-950: #041522;
  --qz14-navy-900: #061d2f;
  --qz14-navy-850: #08283f;
  --qz14-navy-800: #0a3450;

  --qz14-cyan: #32cbe5;
  --qz14-cyan-soft: rgba(50, 203, 229, .13);

  --qz14-blue: #659ff1;
  --qz14-green: #55d6a5;
  --qz14-orange: #f2ad4f;
  --qz14-violet: #9b91ef;
  --qz14-red: #eb6c78;

  --qz14-text: #153c50;
  --qz14-muted: #718996;
  --qz14-line: #dce8ed;
  --qz14-surface: #ffffff;
  --qz14-bg: #f4f8fa;

  --qz14-radius-sm: 12px;
  --qz14-radius-md: 17px;
  --qz14-radius-lg: 23px;

  --qz14-shadow:
    0 15px 38px rgba(7, 42, 63, .06);
}

/* ---------------------------------------------------------
   FOND GLOBAL
   --------------------------------------------------------- */

body.qz14-ecosystem {
  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(50, 203, 229, .045),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #f5f9fb,
      #f8fbfc 260px,
      #f4f8fa
    ) !important;

  color: var(--qz14-text);
}

/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

body.qz14-ecosystem .sidebar {
  background:
    radial-gradient(
      circle at 25% 4%,
      rgba(50, 203, 229, .17),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      var(--qz14-navy-800) 0%,
      var(--qz14-navy-850) 42%,
      var(--qz14-navy-900) 72%,
      var(--qz14-navy-950) 100%
    ) !important;

  color: #dbeaf0 !important;

  border-right:
    1px solid rgba(95, 210, 232, .20) !important;

  box-shadow:
    14px 0 38px rgba(3, 28, 44, .17) !important;
}

body.qz14-ecosystem .sidebar * {
  opacity: 1 !important;
}

body.qz14-ecosystem .sidebar .sideBrand,
body.qz14-ecosystem .sidebar [class*="brand"] {
  border:
    1px solid rgba(96, 222, 242, .21) !important;
  border-radius: 15px !important;

  background:
    linear-gradient(
      135deg,
      #0b4c77,
      #087eae
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 13px 27px rgba(0, 16, 27, .24) !important;
}

body.qz14-ecosystem .sidebar .roleCard,
body.qz14-ecosystem .sidebar [class*="profile"],
body.qz14-ecosystem .sidebar [class*="userCard"] {
  border:
    1px solid rgba(137, 193, 212, .14) !important;
  border-radius: 15px !important;

  background:
    rgba(255, 255, 255, .055) !important;

  color: #ffffff !important;
}

body.qz14-ecosystem .sidebar strong {
  color: #ffffff !important;
}

body.qz14-ecosystem .sidebar small,
body.qz14-ecosystem .sidebar p {
  color: #91afbd !important;
}

body.qz14-ecosystem .sidebar .navGroup > span,
body.qz14-ecosystem .sidebar [class*="navGroup"] > span {
  color: #72a3b6 !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

body.qz14-ecosystem .sidebar .navGroup a,
body.qz14-ecosystem .sidebar nav a {
  border:
    1px solid transparent !important;
  border-radius: 13px !important;

  background: transparent !important;
  color: #b9ced8 !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

body.qz14-ecosystem .sidebar .navGroup a:hover,
body.qz14-ecosystem .sidebar nav a:hover {
  border-color:
    rgba(75, 211, 235, .18) !important;

  background:
    rgba(38, 195, 221, .10) !important;

  color: #ffffff !important;

  transform: translateX(2px);
}

body.qz14-ecosystem .sidebar .navGroup a.active,
body.qz14-ecosystem .sidebar nav a.active,
body.qz14-ecosystem .sidebar a[aria-current="page"] {
  border-color:
    rgba(86, 220, 241, .28) !important;

  background:
    linear-gradient(
      135deg,
      rgba(35, 195, 222, .29),
      rgba(22, 126, 172, .22)
    ) !important;

  color: #ffffff !important;

  box-shadow:
    inset 3px 0 0 var(--qz14-cyan),
    0 9px 20px rgba(0, 15, 26, .17) !important;
}

/* ---------------------------------------------------------
   ICÔNES COLORÉES
   --------------------------------------------------------- */

body.qz14-ecosystem .sidebar .navIcon,
body.qz14-ecosystem .sidebar [class*="navIcon"] {
  display: grid !important;
  place-items: center !important;

  flex: 0 0 30px !important;

  width: 30px !important;
  height: 30px !important;

  border:
    1px solid rgba(132, 193, 214, .15) !important;
  border-radius: 10px !important;

  background:
    rgba(255, 255, 255, .055) !important;

  color: #82b5c7 !important;
}

body.qz14-ecosystem .sidebar .navIcon svg,
body.qz14-ecosystem .sidebar [class*="navIcon"] svg {
  width: 17px !important;
  height: 17px !important;

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

body.qz14-ecosystem
.sidebar
a[data-page*="home"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="overview"]
.navIcon {
  color: var(--qz14-cyan) !important;
  background: rgba(50, 203, 229, .13) !important;
}

body.qz14-ecosystem
.sidebar
a[data-page*="partner"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="network"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="customer"]
.navIcon {
  color: var(--qz14-blue) !important;
  background: rgba(101, 159, 241, .14) !important;
}

body.qz14-ecosystem
.sidebar
a[data-page*="agenda"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="schedule"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="calendar"]
.navIcon {
  color: var(--qz14-violet) !important;
  background: rgba(155, 145, 239, .15) !important;
}

body.qz14-ecosystem
.sidebar
a[data-page*="message"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="communication"]
.navIcon {
  color: var(--qz14-green) !important;
  background: rgba(85, 214, 165, .14) !important;
}

body.qz14-ecosystem
.sidebar
a[data-page*="invoice"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="billing"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="finance"]
.navIcon {
  color: var(--qz14-orange) !important;
  background: rgba(242, 173, 79, .14) !important;
}

body.qz14-ecosystem
.sidebar
a[data-page*="incident"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="quality"]
.navIcon {
  color: var(--qz14-red) !important;
  background: rgba(235, 108, 120, .14) !important;
}

body.qz14-ecosystem
.sidebar
a[data-page*="zeo"]
.navIcon,
body.qz14-ecosystem
.sidebar
a[data-page*="iq"]
.navIcon {
  color: var(--qz14-violet) !important;
  background: rgba(155, 145, 239, .15) !important;
}

/* ---------------------------------------------------------
   CONTENU PRINCIPAL
   --------------------------------------------------------- */

body.qz14-ecosystem main,
body.qz14-ecosystem .main,
body.qz14-ecosystem .qz9-main,
body.qz14-ecosystem [class*="content"] {
  color: var(--qz14-text);
}

body.qz14-ecosystem .qz9-panel,
body.qz14-ecosystem .panel,
body.qz14-ecosystem .card,
body.qz14-ecosystem article {
  border-color:
    var(--qz14-line) !important;

  border-radius:
    var(--qz14-radius-md) !important;

  box-shadow:
    var(--qz14-shadow) !important;
}

body.qz14-ecosystem .qz9-panel,
body.qz14-ecosystem .panel {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .99),
      rgba(248, 252, 253, .98)
    ) !important;
}

body.qz14-ecosystem .qz9-module,
body.qz14-ecosystem .metricCard,
body.qz14-ecosystem [class*="metricCard"] {
  position: relative;
  overflow: hidden;

  border:
    1px solid var(--qz14-line) !important;
  border-radius:
    19px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .99),
      rgba(247, 251, 253, .98)
    ) !important;

  box-shadow:
    0 12px 29px rgba(8, 43, 64, .055) !important;
}

body.qz14-ecosystem .qz9-module::after,
body.qz14-ecosystem .metricCard::after {
  position: absolute;
  right: -34px;
  bottom: -46px;

  width: 110px;
  height: 110px;

  border-radius: 50%;

  background:
    var(--qz14-card-soft, rgba(50, 203, 229, .08));

  content: "";
  pointer-events: none;
}

body.qz14-ecosystem .qz9-module.cyan {
  --qz14-card-soft: rgba(50, 203, 229, .11);
}

body.qz14-ecosystem .qz9-module.blue {
  --qz14-card-soft: rgba(101, 159, 241, .11);
}

body.qz14-ecosystem .qz9-module.green {
  --qz14-card-soft: rgba(85, 214, 165, .11);
}

body.qz14-ecosystem .qz9-module.orange {
  --qz14-card-soft: rgba(242, 173, 79, .12);
}

body.qz14-ecosystem .qz9-module.violet {
  --qz14-card-soft: rgba(155, 145, 239, .11);
}

body.qz14-ecosystem h1,
body.qz14-ecosystem h2,
body.qz14-ecosystem h3,
body.qz14-ecosystem h4 {
  color: var(--qz14-text);
}

body.qz14-ecosystem .qz9-kicker,
body.qz14-ecosystem .eyebrow {
  color: var(--qz14-accent, #169bb7) !important;

  font-weight: 900 !important;
  letter-spacing: .13em !important;
}

/* ---------------------------------------------------------
   BOUTONS
   --------------------------------------------------------- */

body.qz14-ecosystem button,
body.qz14-ecosystem .qz9-btn,
body.qz14-ecosystem .primary,
body.qz14-ecosystem .secondary {
  border-radius:
    var(--qz14-radius-sm) !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease !important;
}

body.qz14-ecosystem button:hover,
body.qz14-ecosystem .qz9-btn:hover {
  transform: translateY(-1px);
}

body.qz14-ecosystem button.primary,
body.qz14-ecosystem .qz9-btn.primary,
body.qz14-ecosystem .primary {
  border-color:
    transparent !important;

  background:
    linear-gradient(
      135deg,
      var(--qz14-primary-start, #0b7ca0),
      var(--qz14-primary-end, #27bfd6)
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 9px 21px rgba(11, 124, 160, .18) !important;
}

/* ---------------------------------------------------------
   TABLES / LISTES
   --------------------------------------------------------- */

body.qz14-ecosystem .qz9-row,
body.qz14-ecosystem .row,
body.qz14-ecosystem .tableRow {
  border-color:
    #e2ebef !important;

  background:
    rgba(255, 255, 255, .78);
}

body.qz14-ecosystem .qz9-row:hover,
body.qz14-ecosystem .row:hover {
  background:
    #f8fcfd !important;
}

/* ---------------------------------------------------------
   FORMULAIRES
   --------------------------------------------------------- */

body.qz14-ecosystem input,
body.qz14-ecosystem select,
body.qz14-ecosystem textarea {
  border:
    1px solid #d6e5eb !important;
  border-radius:
    var(--qz14-radius-sm) !important;

  background:
    rgba(255, 255, 255, .98) !important;

  color:
    var(--qz14-text) !important;

  outline: none !important;
}

body.qz14-ecosystem input:focus,
body.qz14-ecosystem select:focus,
body.qz14-ecosystem textarea:focus {
  border-color:
    var(--qz14-accent, #62ccdc) !important;

  box-shadow:
    0 0 0 4px
    var(--qz14-focus, rgba(50, 203, 229, .09)) !important;
}

/* ---------------------------------------------------------
   MODALES
   --------------------------------------------------------- */

body.qz14-ecosystem .modal,
body.qz14-ecosystem [class*="modalBack"],
body.qz14-ecosystem [class*="modalOverlay"] {
  backdrop-filter:
    blur(7px);
}

body.qz14-ecosystem .modalContent,
body.qz14-ecosystem [class*="modal"] > section {
  border:
    1px solid var(--qz14-line) !important;
  border-radius:
    var(--qz14-radius-lg) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8fcfd
    ) !important;

  box-shadow:
    0 25px 70px rgba(5, 29, 44, .20) !important;
}

/* ---------------------------------------------------------
   ZÉO
   --------------------------------------------------------- */

body.qz14-ecosystem [class*="zeo-dock"],
body.qz14-ecosystem [id*="ZeoDock"],
body.qz14-ecosystem [id*="zeoDock"] {
  filter:
    drop-shadow(0 14px 22px rgba(5, 30, 46, .15));
}

body.qz14-ecosystem [class*="zeo-panel"] {
  border:
    1px solid #d4e9ee !important;
  border-radius:
    21px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .99),
      rgba(242, 251, 253, .98)
    ) !important;

  box-shadow:
    0 22px 55px rgba(5, 32, 48, .16) !important;
}

/* ---------------------------------------------------------
   DOCK / FOOTBAR
   --------------------------------------------------------- */

body.qz14-ecosystem #qz9Footbar,
body.qz14-ecosystem .qz9-footbar,
body.qz14-ecosystem [class*="footbar"] {
  border:
    1px solid rgba(88, 213, 235, .23) !important;
  border-radius:
    19px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(43, 205, 232, .14),
      transparent 52%
    ),
    linear-gradient(
      135deg,
      rgba(6, 34, 54, .98),
      rgba(7, 63, 88, .98)
    ) !important;

  color: #c7dce4 !important;

  box-shadow:
    0 17px 40px rgba(3, 25, 40, .25) !important;

  backdrop-filter:
    blur(16px);
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {
  body.qz14-ecosystem .sidebar {
    box-shadow:
      14px 0 38px rgba(3, 28, 44, .23) !important;
  }
}