/* =========================================================
   QUARZEO PRO V10.4
   Refonte visuelle ciblée — espace connecté uniquement
   ========================================================= */

/* ---------- VARIABLES ---------- */

#app.app{
  --qzp-navy-950:#051c31;
  --qzp-navy-900:#07253e;
  --qzp-navy-850:#09314f;
  --qzp-blue:#147fbe;
  --qzp-cyan:#27c9df;
  --qzp-cyan-soft:#e8f9fc;
  --qzp-green:#27b884;
  --qzp-green-soft:#eaf9f3;
  --qzp-orange:#ee9f33;
  --qzp-orange-soft:#fff4e4;
  --qzp-purple:#786ee8;
  --qzp-purple-soft:#f0efff;
  --qzp-red:#ea6871;
  --qzp-red-soft:#fff0f1;
  --qzp-gold:#e4b04d;
  --qzp-gold-soft:#fff8e8;
  --qzp-text:#102f44;
  --qzp-muted:#6d8798;
  --qzp-line:#dbe8ef;
  --qzp-bg:#f3f8fb;
  --qzp-card:#ffffff;
  --qzp-shadow:0 16px 42px rgba(7,45,73,.075);
  --qzp-shadow-hover:0 22px 52px rgba(7,45,73,.12);

  background:
    radial-gradient(circle at 78% 6%,rgba(39,201,223,.08),transparent 23%),
    linear-gradient(180deg,#f7fbfd 0%,var(--qzp-bg) 100%);
}

/* ---------- STRUCTURE GÉNÉRALE ---------- */

#app.app{
  grid-template-columns:254px minmax(0,1fr);
}

#app.app .workspace{
  grid-column:2;
  min-width:0;
  padding:0 30px 76px;
}

#app.app .content{
  width:100%;
  max-width:1510px;
  margin:0 auto;
  padding-top:22px;
}

#app.app .content > *{
  min-width:0;
}

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

#app.app .sidebar{
  width:254px;
  padding:17px 13px 16px;
  background:
    radial-gradient(circle at 20% 5%,rgba(39,201,223,.13),transparent 24%),
    linear-gradient(180deg,var(--qzp-navy-950),var(--qzp-navy-900) 58%,#082a45);
  border-right:1px solid rgba(255,255,255,.055);
  box-shadow:18px 0 45px rgba(5,28,49,.16);
}

#app.app .sideBrand{
  min-height:50px;
  padding:4px 9px 13px;
}

#app.app .sideBrand img{
  width:158px;
  filter:brightness(0) invert(1);
  opacity:.98;
}

#app.app .sideBrand > span{
  padding:5px 7px;
  border:1px solid rgba(74,223,232,.22);
  background:rgba(39,201,223,.13);
  color:#8debf0;
  box-shadow:none;
}

#app.app .centerMini{
  margin:2px 3px 14px;
  padding:14px 13px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:17px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

#app.app .centerMini strong{
  color:#fff;
  font-size:12px;
}

#app.app .centerMini small{
  color:#a9c5d5;
}

#app.app .planPill{
  padding:6px 9px;
  border-color:rgba(91,231,235,.23);
  background:rgba(39,201,223,.13);
  color:#91edf1;
}

#app.app .navGroup{
  margin-top:7px;
}

#app.app .navGroup > span{
  padding:8px 10px 5px;
  color:#65889e;
  font-size:8px;
  letter-spacing:.16em;
}

#app.app .navGroup a,
#app.app .sidebarFoot a,
#app.app .sidebarFoot button{
  min-height:38px;
  margin:2px 0;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:12px;
  color:#b7cedb;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

#app.app .navGroup a:hover,
#app.app .sidebarFoot a:hover{
  transform:translateX(2px);
  border-color:rgba(255,255,255,.07);
  background:rgba(255,255,255,.065);
  color:#fff;
}

#app.app .navGroup a.active{
  border-color:rgba(73,218,227,.17);
  background:
    linear-gradient(90deg,rgba(39,201,223,.22),rgba(39,201,223,.08));
  color:#fff;
  box-shadow:
    inset 3px 0 0 var(--qzp-cyan),
    0 8px 22px rgba(0,0,0,.08);
}

#app.app .navGroup a.active .navSvg{
  color:#65e2e9;
}

#app.app .navSvg{
  color:#79a2b8;
}

#app.app .navGroup a b{
  background:linear-gradient(145deg,#f37878,#e75766);
  box-shadow:0 4px 10px rgba(233,87,102,.25);
}

#app.app .sidebarFoot{
  border-top-color:rgba(255,255,255,.09);
}

/* ---------- HEADER ---------- */

#app.app .topbar{
  height:88px;
  margin:0;
  padding:0 2px;
  background:rgba(247,251,253,.86);
  border-bottom:1px solid rgba(206,224,234,.92);
  backdrop-filter:blur(18px);
}

#app.app .pageHeading > span{
  color:#5f8297;
  font-size:9px;
  letter-spacing:.15em;
}

#app.app .pageHeading h1{
  margin-top:4px;
  color:var(--qzp-text);
  font-size:31px;
  letter-spacing:-.045em;
}

#app.app .topActions{
  gap:9px;
}

#app.app .globalSearch{
  width:min(360px,31vw);
  min-height:44px;
  border-color:#d7e6ed;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(7,45,73,.045);
}

#app.app .iconBtn{
  width:44px;
  height:44px;
  border-color:#d7e6ed;
  background:#fff;
  box-shadow:0 8px 24px rgba(7,45,73,.045);
}

#app.app .profileChip{
  min-width:190px;
  border-color:#d7e6ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(7,45,73,.045);
}

#app.app .profileChip strong{
  color:var(--qzp-text);
}

/* ---------- BLOCS ET PANELS ---------- */

#app.app .panel,
#app.app .kpi,
#app.app .formCard,
#app.app .offerCard,
#app.app .customerCard,
#app.app .teamCard,
#app.app .opportunityCard{
  border-color:var(--qzp-line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.99),rgba(251,253,254,.98));
  box-shadow:var(--qzp-shadow);
}

#app.app .panel{
  border-radius:22px;
  padding:18px;
}

#app.app .panel:hover,
#app.app .kpi:hover{
  border-color:#c8dde7;
  box-shadow:var(--qzp-shadow-hover);
}

#app.app .panelHead h3{
  color:var(--qzp-text);
}

#app.app .panelHead span{
  color:#1595b2;
}

#app.app .panelHead p{
  color:var(--qzp-muted);
}

/* ---------- DASHBOARD V10.3 ---------- */

#app.app .qz10-dashboard-zone{
  margin-top:4px;
}

#app.app .qz10-section-heading{
  margin-bottom:15px;
}

#app.app .qz10-section-heading h2{
  color:var(--qzp-text);
  font-size:23px;
  letter-spacing:-.035em;
}

#app.app .qz10-section-heading p{
  color:var(--qzp-muted);
}

#app.app .qz10-status-chip{
  border-color:#cfe6ea;
  background:#f6fcfd;
  color:#397080;
}

#app.app .qz10-action-grid{
  gap:12px;
}

#app.app .qz10-action-card{
  min-height:150px;
  border-color:var(--qzp-line);
  border-radius:20px;
  background:
    linear-gradient(150deg,#fff 0%,#f9fcfd 100%);
  box-shadow:var(--qzp-shadow);
}

#app.app .qz10-action-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--qzp-shadow-hover);
}

#app.app .qz10-action-card h3{
  color:var(--qzp-text);
}

#app.app .qz10-action-card p{
  color:var(--qzp-muted);
}

#app.app .qz10-card-cyan{
  border-top:3px solid var(--qzp-cyan);
}

#app.app .qz10-card-orange{
  border-top:3px solid var(--qzp-orange);
}

#app.app .qz10-card-green{
  border-top:3px solid var(--qzp-green);
}

#app.app .qz10-card-purple{
  border-top:3px solid var(--qzp-purple);
}

#app.app .qz10-card-red{
  border-top:3px solid var(--qzp-red);
}

#app.app .qz10-dashboard-columns{
  grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);
  gap:14px;
}

#app.app .qz10-dashboard-panel{
  border-color:var(--qzp-line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--qzp-shadow);
}

#app.app .qz10-list-item{
  border-color:#e0ebf0;
  background:#fbfdfe;
}

/* ---------- KPI ---------- */

#app.app .kpiGrid{
  gap:14px;
  margin:16px 0 18px;
}

#app.app .kpi{
  position:relative;
  min-height:126px;
  overflow:hidden;
  border-radius:21px;
  padding:18px 18px 16px;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

#app.app .kpi:hover{
  transform:translateY(-3px);
}

#app.app .kpi::before{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:21px 0 0 21px;
  background:var(--qzp-kpi-accent,var(--qzp-cyan));
  content:"";
}

#app.app .kpi::after{
  position:absolute;
  right:-38px;
  bottom:-52px;
  width:135px;
  height:135px;
  border-radius:50%;
  background:var(--qzp-kpi-soft,rgba(39,201,223,.08));
  content:"";
  pointer-events:none;
}

#app.app .kpi:nth-child(1){
  --qzp-kpi-accent:var(--qzp-cyan);
  --qzp-kpi-soft:rgba(39,201,223,.10);
}

#app.app .kpi:nth-child(2){
  --qzp-kpi-accent:var(--qzp-orange);
  --qzp-kpi-soft:rgba(238,159,51,.10);
}

#app.app .kpi:nth-child(3){
  --qzp-kpi-accent:var(--qzp-green);
  --qzp-kpi-soft:rgba(39,184,132,.10);
}

#app.app .kpi:nth-child(4){
  --qzp-kpi-accent:var(--qzp-purple);
  --qzp-kpi-soft:rgba(120,110,232,.10);
}

#app.app .kpi > span,
#app.app .kpi strong,
#app.app .kpi small,
#app.app .kpi button{
  position:relative;
  z-index:1;
}

#app.app .kpi > span{
  color:#5f7d8e;
}

#app.app .kpi strong{
  margin:8px 0 4px;
  color:var(--qzp-text);
  font-size:30px;
}

#app.app .kpi small{
  color:var(--qzp-muted);
}

#app.app .kpi button,
#app.app .kpi .mini{
  margin-top:11px;
  border-color:#d9e6ec;
  border-radius:11px;
  background:#fff;
  color:#24526c;
}

/* ---------- ACTIONS / LISTES ---------- */

#app.app .action,
#app.app .row{
  min-height:54px;
  border-color:#dfeaf0;
  border-radius:15px;
  background:#fbfdfe;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

#app.app .action:hover,
#app.app .row:hover{
  transform:translateX(2px);
  border-color:#cce0e8;
  background:#fff;
}

#app.app .action strong,
#app.app .row strong{
  color:var(--qzp-text);
}

#app.app .action small,
#app.app .row small,
#app.app .row span{
  color:var(--qzp-muted);
}

#app.app .action.high{
  border-left:3px solid var(--qzp-red);
}

#app.app .action.medium{
  border-left:3px solid var(--qzp-orange);
}

/* ---------- GRILLES DU BAS ---------- */

#app.app .grid2{
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:14px;
}

#app.app .overviewGrid{
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:14px;
}

#app.app .grid2 > :only-child,
#app.app .overviewGrid > :only-child{
  grid-column:1 / -1;
}

/* ---------- BADGES ---------- */

#app.app .tag,
#app.app .status{
  border:1px solid rgba(20,126,190,.10);
}

#app.app .tag.green{
  border-color:rgba(39,184,132,.13);
  background:var(--qzp-green-soft);
}

#app.app .tag.gold{
  border-color:rgba(228,176,77,.18);
  background:var(--qzp-gold-soft);
}

#app.app .tag.red{
  border-color:rgba(234,104,113,.14);
  background:var(--qzp-red-soft);
}

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

#app.app .qz9-zeo-button{
  right:22px !important;
  bottom:68px !important;
  width:58px !important;
  height:58px !important;
  border:1px solid rgba(39,201,223,.28) !important;
  border-radius:20px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,250,253,.98)) !important;
  box-shadow:
    0 18px 42px rgba(7,45,73,.18),
    0 0 0 6px rgba(39,201,223,.06) !important;
}

#app.app [class*="zeo-panel"],
#app.app [class*="ZeoPanel"]{
  border-color:#d8e8ee !important;
  border-radius:24px !important;
  box-shadow:0 28px 70px rgba(5,34,55,.20) !important;
}

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

#app.app .qz9-dock,
#app.app .qz-bottom-dock,
#app.app [data-qz-dock]{
  bottom:14px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:18px !important;
  background:
    linear-gradient(110deg,rgba(5,28,49,.94),rgba(8,56,83,.94)) !important;
  color:#d9ecf4 !important;
  box-shadow:0 18px 45px rgba(5,28,49,.24) !important;
  backdrop-filter:blur(18px) !important;
}

#app.app .qz9-dock button,
#app.app .qz-bottom-dock button,
#app.app [data-qz-dock] button{
  border-color:rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.075) !important;
  color:#d9ecf4 !important;
}

#app.app .qz9-dock button:hover,
#app.app .qz-bottom-dock button:hover,
#app.app [data-qz-dock] button:hover{
  background:rgba(39,201,223,.15) !important;
  color:#fff !important;
}

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

#app.app .dataTable{
  border-color:var(--qzp-line);
  border-radius:19px;
  box-shadow:var(--qzp-shadow);
}

#app.app .dataRow.head{
  background:#eef6fa;
  color:#617f90;
}

#app.app input,
#app.app select,
#app.app textarea{
  border-color:#d5e5ed;
}

#app.app input:focus,
#app.app select:focus,
#app.app textarea:focus{
  border-color:#74cddd;
  box-shadow:0 0 0 4px rgba(39,201,223,.10);
}

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

@media(max-width:1180px){
  #app.app{
    grid-template-columns:225px minmax(0,1fr);
  }

  #app.app .sidebar{
    width:225px;
  }

  #app.app .workspace{
    padding-left:20px;
    padding-right:20px;
  }

  #app.app .qz10-action-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  #app.app{
    display:block;
  }

  #app.app .sidebar{
    position:static;
    width:100%;
  }

  #app.app .workspace{
    padding:0 14px 70px;
  }

  #app.app .grid2,
  #app.app .overviewGrid,
  #app.app .qz10-dashboard-columns{
    grid-template-columns:1fr;
  }

  #app.app .globalSearch{
    width:240px;
  }
}

@media(max-width:620px){
  #app.app .qz10-action-grid,
  #app.app .kpiGrid{
    grid-template-columns:1fr;
  }

  #app.app .topbar{
    padding:13px 0;
  }

  #app.app .pageHeading h1{
    font-size:26px;
  }
}


/* =========================================================
   QUARZEO PRO V10.4.1 — activation forcée espace connecté
   ========================================================= */

#app.app{
  grid-template-columns:254px minmax(0,1fr) !important;
  background:
    radial-gradient(circle at 78% 6%,rgba(39,201,223,.08),transparent 23%),
    linear-gradient(180deg,#f7fbfd 0%,#f3f8fb 100%) !important;
}

#app.app > .sidebar{
  width:254px !important;
  background:
    radial-gradient(circle at 20% 5%,rgba(39,201,223,.13),transparent 24%),
    linear-gradient(180deg,#051c31,#07253e 58%,#082a45) !important;
  color:#fff !important;
}

#app.app > .sidebar .navGroup > span{
  color:#65889e !important;
}

#app.app > .sidebar .navGroup a{
  color:#b7cedb !important;
}

#app.app > .sidebar .navGroup a.active{
  background:
    linear-gradient(
      90deg,
      rgba(39,201,223,.22),
      rgba(39,201,223,.08)
    ) !important;
  color:#fff !important;
  box-shadow:
    inset 3px 0 0 #27c9df,
    0 8px 22px rgba(0,0,0,.08) !important;
}

#app.app > .workspace{
  grid-column:2 !important;
  min-width:0 !important;
  padding:0 30px 76px !important;
}

#app.app > .workspace > .content{
  width:100% !important;
  max-width:1510px !important;
  margin:0 auto !important;
  padding-top:22px !important;
}

#app.app .kpi,
#app.app .panel,
#app.app .qz10-action-card,
#app.app .qz10-dashboard-panel{
  border-color:#dbe8ef !important;
  box-shadow:0 16px 42px rgba(7,45,73,.075) !important;
}

@media(max-width:1180px){
  #app.app{
    grid-template-columns:225px minmax(0,1fr) !important;
  }

  #app.app > .sidebar{
    width:225px !important;
  }
}

@media(max-width:900px){
  #app.app{
    display:block !important;
  }

  #app.app > .sidebar{
    position:static !important;
    width:100% !important;
  }

  #app.app > .workspace{
    padding:0 14px 70px !important;
  }
}