/* ===== Kundenmaske-Shell (BPP Cockpit) — Topbar, Breadcrumb, Sidebar =====
   Baut auf styles.css-Tokens auf. Umschließt die W&B-Auswertung.        */

.cm-app{min-height:100vh;display:flex;flex-direction:column;background:#fff;}
.cm-app *{box-sizing:border-box;}

/* ===== Dark Topbar (#706F6F) ===== */
.cm-top{
  background:#706F6F;min-height:72px;display:flex;align-items:center;gap:6px;
  padding:0 24px;position:sticky;top:0;z-index:40;
}
.cm-logo{display:flex;align-items:center;height:72px;margin-right:18px;}
.cm-logo img{height:34px;width:auto;display:block;}
.cm-nav{display:flex;align-items:center;gap:6px;}
.cm-nav a{
  display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:9px;
  border:1px solid transparent;color:rgba(255,255,255,0.82);font-size:14px;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:background .13s,color .13s;cursor:pointer;
}
.cm-nav a .ic{width:16px;height:16px;color:currentColor;}
.cm-nav a:hover{background:rgba(255,255,255,0.10);color:#fff;}
.cm-nav a.active{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.20);color:#fff;}
.cm-nav .chev-ic{width:11px;height:11px;opacity:.85;}
.cm-chat-badge{min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:0 5px;}

.cm-top-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.cm-top-right .divider{width:1px;height:24px;background:rgba(255,255,255,0.25);}
.cm-iconbtn{
  width:32px;height:32px;border-radius:999px;border:none;background:none;color:rgba(255,255,255,0.82);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.13s;
}
.cm-iconbtn .ic{width:16px;height:16px;}
.cm-iconbtn:hover{background:rgba(255,255,255,0.10);color:#fff;}
.cm-group{
  display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,0.82);font-size:13px;font-weight:500;
  background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:8px;
}
.cm-group:hover{background:rgba(255,255,255,0.10);color:#fff;}
.cm-group .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.6);}
.cm-group .chev-ic{width:11px;height:11px;}
.cm-lang{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.82);font-size:13px;font-weight:600;cursor:pointer;background:none;border:none;padding:6px 8px;border-radius:8px;font-family:inherit;}
.cm-lang:hover{background:rgba(255,255,255,0.10);color:#fff;}
.cm-lang .ic{width:15px;height:15px;}
.cm-avatar{width:32px;height:32px;border-radius:50%;background:url(assets/avatar.jpg) center/cover no-repeat;flex:none;cursor:pointer;}

/* ===== Breadcrumb bar ===== */
.cm-crumb{
  background:#fff;border-bottom:1px solid var(--z200);padding:13px 32px;
  display:flex;align-items:center;gap:11px;font-size:14px;white-space:nowrap;overflow-x:auto;
}
.cm-crumb a{display:inline-flex;align-items:center;gap:6px;color:var(--z600);text-decoration:none;cursor:pointer;}
.cm-crumb a:hover{color:var(--z900);}
.cm-crumb .home-ic{width:15px;height:15px;color:var(--z500);}
.cm-crumb .sep{color:var(--z300);font-size:13px;}
.cm-crumb .cur{color:var(--z900);font-weight:600;}

/* ===== Shell: sidebar + main ===== */
.cm-shell{flex:1;display:flex;align-items:stretch;min-height:0;}

.cm-side{
  width:252px;flex:none;background:#fff;border-right:1px solid var(--z200);
  padding:16px 14px 14px;display:flex;flex-direction:column;
}
.cm-side-group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--z400);padding:16px 10px 7px;}
.cm-side-group:first-child{padding-top:4px;}
.cm-nav-item{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;
  color:var(--z700);font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:background .12s,color .12s;
}
.cm-nav-item .ic{width:16px;height:16px;color:var(--z400);flex:none;}
.cm-nav-item:hover{background:var(--z100);color:var(--z900);}
.cm-nav-item:hover .ic{color:var(--z600);}
.cm-nav-item.active{background:var(--red-50);color:var(--red);font-weight:600;}
.cm-nav-item.active .ic{color:var(--red);}
.cm-side-collapse{
  margin-top:auto;display:flex;align-items:center;gap:9px;padding:11px 12px;border-top:1px solid var(--z100);
  color:var(--z500);font-size:13px;font-weight:500;background:none;border-left:none;border-right:none;border-bottom:none;
  cursor:pointer;width:100%;text-align:left;
}
.cm-side-collapse:hover{color:var(--z800);}
.cm-side-collapse .ic{width:12px;height:12px;flex:none;}

/* ===== Main content area ===== */
.cm-main{flex:1;min-width:0;background:var(--z50);padding:22px 26px 44px;overflow-x:hidden;}

/* „Blau" → Grau (nur im integrierten Cockpit) */
.cm-app .st-chance{background:var(--z100);color:var(--z600);}
.cm-app .dot-chance{background:var(--z500);}

/* KPI-Karten im Dashboard-Stil: Label links, graues Icon-Quadrat rechts */
.cm-app .wbc-kpi{padding:18px 20px;}
.cm-app .wbc-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.cm-app .wbc-kpi-label{font-size:14px;font-weight:500;color:var(--z600);line-height:1.3;}
.cm-app .wbc-kpi-ic{width:32px;height:32px;border-radius:8px;background:var(--icon-gray);color:#fff;flex:none;}
.cm-app .wbc-kpi-ic .ic{width:15px;height:15px;}
.cm-app .wbc-kpi-val{font-size:28px;}
.cm-app .wbc-kpi-val small{font-size:15px;}

/* Vorjahresantwort unter der aktuellen Antwort (Block „Alle Antworten") */
.cm-app .wbc-qa .a-wrap{width:56%;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.cm-app .wbc-qa .a-wrap .a{width:auto;text-align:right;}
.cm-app .wbc-qa .a-prev{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:6px 11px;background:var(--z50);border:1px solid var(--z200);border-radius:9px;width:100%;}
.cm-app .a-prev-val{font-size:12.5px;font-weight:500;color:var(--z500);text-align:right;line-height:1.35;text-wrap:pretty;}
.cm-app .a-prev-date{font-size:10.5px;color:var(--z400);}

/* rechte Spalte entfernt → Inhalt über volle Breite */
.cm-app .wbc-grid{grid-template-columns:1fr;}

/* Collapsible Themenkarten (Bedarfsanalyse) */
.cm-app button.wbc-theme-head{
  width:100%;background:none;border:none;border-bottom:1px solid var(--z100);cursor:pointer;text-align:left;font-family:inherit;
  transition:background .12s;
}
.cm-app button.wbc-theme-head:hover{background:var(--z50);}
.cm-app .wbc-theme:not(.open) button.wbc-theme-head{border-bottom:none;}
.cm-app .wbc-theme-chev{color:var(--z400);font-size:15px;flex:none;transition:transform .15s;margin-left:2px;}
.cm-app .wbc-theme.open .wbc-theme-chev{transform:rotate(90deg);color:var(--red);}
.cm-app .st-chance{background:var(--z100);color:var(--z600);}
.cm-app .dot-chance{background:var(--z500);}

/* Panel header (Titel + Aktionen) */
.cm-panel-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.cm-panel-head .h-main{flex:1;min-width:240px;}
.cm-panel-head h1{font-size:22px;font-weight:700;color:var(--z900);margin:0;letter-spacing:-0.015em;}
.cm-panel-head .h-sub{font-size:13px;color:var(--z500);margin-top:4px;}
.cm-panel-head .h-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* schmale Meta-Pillen unter dem Titel */
.cm-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
.cm-meta .wbc-meta-pill{}

@media(max-width:720px){
  .cm-side{width:60px;padding:16px 8px;}
  .cm-side-group,.cm-nav-item span,.cm-side-collapse span{display:none;}
  .cm-nav-item{justify-content:center;padding:10px;}
}