@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#f5f6f4;
  --card:#fff;
  --line:#e2e6e1;
  --text:#1b231e;
  --muted:#667066;
  --primary:#3f6b53;
  --primary-dark:#2f5240;
  --primary-soft:#e6f0ea;
  --primary-rgb:63,107,83;
  --accent:#b8792f;
  --accent-soft:#f7ead6;
  --danger:#c94f4f;
  --shadow:0 6px 18px rgba(20,30,25,.07);
  --radius:18px;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-columns:230px 1fr;height:100vh;transition:grid-template-columns .22s ease;overflow:hidden}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:18px 12px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow-y:auto;height:100vh}
.logo{font-weight:900;font-size:20px;margin:12px 12px 22px;color:var(--primary-dark)}
.nav{display:flex;flex-direction:column;gap:4px;flex:1;min-height:0}
.nav .navBottomItem{margin-top:auto;border-top:1px solid var(--line);padding-top:16px}
.nav button,.nav a{border:0;background:transparent;text-align:left;padding:12px 13px;border-radius:12px;font-size:15px;cursor:pointer;color:var(--text);font-weight:600;text-decoration:none;display:flex;align-items:center;gap:12px;transition:background .12s ease,color .12s ease}
.nav button svg,.nav a svg{width:18px;height:18px;flex:none;stroke:currentColor}
.nav button:hover,.nav button.active,.nav a:hover,.nav a.active{background:var(--primary-soft);color:var(--primary-dark)}
.main{min-width:0;padding:28px;overflow-y:auto;height:100vh}
.topbar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;margin-bottom:24px;display:flex;gap:14px;align-items:center;justify-content:space-between}
.topbar label{font-size:13px;font-weight:bold;color:var(--muted);text-transform:uppercase;margin-right:8px}
select,input,textarea{border:1px solid #d7dbd6;border-radius:12px;padding:12px 14px;font-size:15px;background:#fff;font-family:var(--font-sans);color:var(--text)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15)}
.page{display:none}
.page.active{display:block}
h1{margin:0 0 24px;font-size:30px}
h2{font-size:22px;margin:0 0 16px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:24px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;display:flex;gap:18px;align-items:center;min-height:118px}
.icon{width:56px;height:56px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:24px}
.icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:2}
.card strong{font-size:28px;display:block;margin-bottom:4px;font-family:var(--font-mono);font-weight:600;letter-spacing:-.01em}
.card span{color:#4b5563;font-size:16px}
button{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;background:#e5e7eb;color:var(--text)}
button.primary{background:var(--primary);color:#fff}
button.primary:hover{background:var(--primary-dark)}
button.danger{background:#fee2e2;color:#991b1b}
table{width:100%;border-collapse:separate;border-spacing:0}
tr.clickableRow{cursor:pointer}
tr.clickableRow:hover{background:var(--primary-soft)}
.slaStatsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.slaStatCard{display:flex;flex-direction:column;gap:6px}
.slaStatLabel{font-size:13px;color:var(--muted)}
.slaStatValue{font-size:26px;font-weight:700;color:var(--primary-dark)}
@media (max-width:900px){.slaStatsGrid{grid-template-columns:1fr 1fr}}
th{background:#f3f7f5;color:#587064;text-align:left;font-size:13px;padding:13px;border-bottom:1px solid var(--line)}
td{padding:13px;border-bottom:1px solid var(--line)}
th:first-child{border-top-left-radius:12px}
th:last-child{border-top-right-radius:12px}
.badge{display:inline-block;background:var(--primary-soft);color:var(--primary-dark);border-radius:999px;padding:5px 10px}
.form-row{display:flex;align-items:end;gap:14px;flex-wrap:wrap}
.form-row label{display:block;font-size:13px;color:var(--muted);font-weight:bold;margin-bottom:6px}
.kb-layout{display:grid;grid-template-columns:240px 360px 1fr;gap:18px}
.cat,.kb-item{padding:12px;border-radius:12px;cursor:pointer;margin-bottom:8px}
.cat:hover,.cat.active,.kb-item:hover,.kb-item.active{background:var(--primary-soft);color:var(--primary-dark)}
.search{width:100%;margin-bottom:16px}
textarea{width:100%;height:340px;line-height:1.5;font-family:var(--font-sans);margin:8px 0 14px}
.checklist{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:16px;margin:18px 0;white-space:pre-line}
.detail-top{display:flex;justify-content:space-between;gap:20px}
.actions{display:flex;gap:8px}
.drawerOverlay{position:fixed;inset:0;background:rgba(15,23,42,.30);opacity:0;pointer-events:none;transition:.2s;z-index:40}
.drawerOverlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;right:0;top:0;width:370px;max-width:90vw;height:100vh;background:#fff;box-shadow:-12px 0 30px rgba(15,23,42,.18);transform:translateX(105%);transition:.25s;z-index:41;padding:24px;border-radius:22px 0 0 22px}
.drawer.open{transform:translateX(0)}
.drawerHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drawerChoice{width:100%;text-align:left;background:var(--primary-soft);color:var(--primary-dark);border:1px solid #cfe1d6;border-radius:16px;padding:18px;margin-bottom:12px;font-size:17px}
.calendar-toolbar{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0}
.calendar-toolbar strong{min-width:300px;text-align:center;font-size:18px;font-weight:700}
.calendar-grid-google{display:grid;grid-template-columns:64px repeat(7,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.time-header,.day-header{height:64px;border-bottom:1px solid var(--line);background:#fff;padding:10px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.day-header strong{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.day-header span{font-size:14px;color:var(--text);font-weight:600}
.day-header.today{background:var(--primary-soft)}
.day-header.today strong{color:var(--primary-dark)}
.day-header.today span{color:var(--primary-dark);font-weight:800}
.time-col{border-right:1px solid var(--line);background:#fff}
.time-cell{height:56px;border-bottom:1px solid #edf0ee;font-size:11px;color:var(--muted);padding:2px 8px 0 0;text-align:right;position:relative;top:-6px}
.day-col{position:relative;border-right:1px solid var(--line);background:#fff}
.day-col.today{background:rgba(var(--primary-rgb),.045)}
.hour-line{height:56px;border-bottom:1px solid #edf0ee}
.slotBlock{position:absolute;left:4px;right:4px;background:var(--primary);border:none;border-radius:8px;padding:7px 9px;overflow:hidden;font-size:12px;z-index:3;color:#fff;box-shadow:0 2px 6px rgba(20,30,25,.18)}
.slotBlock strong{color:#fff}
.slotBlock a{color:#ffe3e3;cursor:pointer;font-size:11px}
.slotCustomers{font-size:10.5px;line-height:1.5;display:block}
.currentTimeLine{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:5}
.currentTimeLine:before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--danger)}
.shiftHeader{color:var(--muted);margin:4px 0 28px;font-size:17px;line-height:1.45}
.shiftTitle{font-size:30px;margin-bottom:8px}
.shiftListClean{max-width:760px}
.shiftCleanRow{display:grid;grid-template-columns:120px 1fr 130px 170px;gap:16px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.shiftTime{font-weight:800;font-size:18px}
.shiftInfo{color:var(--muted);line-height:1.45;font-size:16px}
.shiftDate{display:block;color:var(--text);font-weight:700;margin-bottom:4px}
.shiftStatus{background:#e5e7eb;border-radius:8px;padding:8px 10px;text-align:center;font-size:15px}
.mail-item{display:grid;grid-template-columns:140px 1fr 130px;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:14px 0}
.mail-subject{font-weight:800}
.mail-meta{color:var(--muted);font-size:13px}
@media(max-width:1100px){
  .app{grid-template-columns:72px 1fr}
  .nav span,.logo{display:none}
  .cards,.kb-layout{grid-template-columns:1fr}
  .calendar-grid-google{grid-template-columns:1fr}
  .time-col,.time-header{display:none}
  .shiftCleanRow{grid-template-columns:1fr}
}

/* Mitarbeiter-Schichtbuchung */
.slotBookBtn{
  margin-top:6px;
  padding:6px 8px;
  font-size:11px;
  border-radius:8px;
  background:var(--primary);
  color:#fff;
}
.slotBooked,.bookedBy{
  display:inline-block;
  margin-top:4px;
  font-size:11px;
  color:#fff;
  font-weight:700;
}

/* Slot Drawer Booking */
.slotBlock{cursor:pointer;transition:.15s ease}
.slotBlock:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(20,30,25,.28)}
.slotBlock.booked{
  background:var(--primary-soft);
  color:var(--primary-dark);
  border:2px solid var(--primary);
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.25);
  opacity:1;
}
.slotBlock.booked strong,
.slotBlock.booked .bookedBy,
.slotBlock.booked .slotBooked{color:var(--primary-dark)}
.slotBlock.booked .slotDots{color:var(--primary-dark)}
.slotBlock.booked .slotMore{color:var(--primary-dark);opacity:.75}
.slotOpen{display:inline-block;margin-top:4px;color:#6b7280;font-size:11px}
.drawerActions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.slotDrawerInfo h3{margin:18px 0 12px}
.slotDrawerInfo p{margin:8px 0}

/* Gruppierte Slots wie Kalender-Kachel */
.slotBlock.grouped{
  padding:8px 26px 7px 10px;
  line-height:1.3;
}
.slotDots{
  position:absolute;
  right:8px;
  top:8px;
  font-size:20px;
  color:rgba(255,255,255,.75);
}
.slotMore{
  color:rgba(255,255,255,.8);
}
.groupSlotList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}
.groupSlotRow{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.groupSlotRow span{
  color:var(--muted);
}
.miniBtn{
  padding:8px 10px;
  font-size:12px;
  border-radius:10px;
}

/* REPAIR: Knowledge-Base Topbar Buttons */
.kbTopbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.kbTopActions{
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  gap:10px;
}
.kbTopActions button{
  height:48px;
  min-width:92px;
  border-radius:14px;
}
.kbTopActions button:last-child{
  min-width:52px;
  width:52px;
  padding:0;
}
.detail-top .actions{
  display:flex;
  align-items:flex-start;
}
.iconOnlyBtn{
  width:38px;
  height:38px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}
.iconOnlyBtn svg{width:18px;height:18px}
@media(max-width:900px){
  .kbTopbar{justify-content:flex-start}
  .kbTopActions{right:12px}
}

/* Kundenportal/Admin: Slot bearbeiten im rechten Panel */
.slotEditForm{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:end;
  max-width:260px;
}
.slotEditForm label{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
  margin-bottom:-4px;
}
.slotEditForm input,
.slotEditForm select{
  padding:8px 9px;
  font-size:12px;
  border-radius:10px;
}
.slotEditActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.slotEditActions button{
  padding:8px 10px;
  font-size:12px;
}
.bookedLockedHint{
  font-size:12px;
  color:var(--muted);
  font-style:italic;
}
.groupSlotMain{
  min-width:0;
}

/* Kundenportal Statistik-Karten im Monatsreport */
#report .cards{margin-top:10px;}

/* Google-ähnliche Slot-Erstellung im Kalender */
.calendarSelectable{
  cursor:crosshair;
}
.selectionPreview{
  position:absolute;
  left:8px;
  right:8px;
  background:rgba(var(--primary-rgb),.18);
  border:1px dashed var(--primary);
  border-radius:12px;
  z-index:4;
  pointer-events:none;
}
.slotEditForm.large{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.slotEditForm.large label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.slotEditForm.large input,
.slotEditForm.large select{
  width:100%;
}


/* Anpassungen: Menü einklappbar + KB Topbar links/rechts */
.menuToggle{
  width:100%;
  height:44px;
  border-radius:12px;
  margin:0 0 14px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:16px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 13px;
  transition:background .12s ease;
}
.menuToggle svg{width:18px;height:18px;flex:none;stroke:currentColor}
.menuToggle:hover{background:#dcebe3}
.app.collapsed .menuToggle{justify-content:center;padding:0}

.app.collapsed{
  grid-template-columns:72px 1fr;
}

.app.collapsed .logo,
.app.collapsed .nav span,
.app.collapsed .callSidebarBtn span{
  display:none;
}

.app.collapsed .sidebar{
  padding:18px 10px;
}

.app.collapsed .nav button,
.app.collapsed .nav a{
  justify-content:center;
  padding:13px 8px;
}

/* Wissensbank Topbar: Aktiver Kunde links, Check-in rechts */
.kbTopbar{
  justify-content:space-between !important;
  gap:24px;
}

.kbTopbar > div:first-child{
  margin-left:0;
}

.kbTopActions{
  position:static !important;
  transform:none !important;
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:auto;
}

.kbTopActions button{
  height:48px;
  min-width:92px;
  border-radius:14px;
}

.kbTopActions button:last-child{
  min-width:52px;
  width:52px;
  padding:0;
}

@media(max-width:900px){
  .kbTopbar{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .kbTopActions{
    margin-left:0;
  }
}


/* Gmail Pop-up in Wissensbank */
.kbLeftGroup{display:flex;align-items:end;gap:12px;}
.gmailInboxBtn{
  height:48px;border-radius:14px;background:#fff7ed;color:#9a3412;
  border:1px solid #fed7aa;white-space:nowrap;
}
.gmailInboxBtn.hasMail{background:#ffedd5;color:#9a3412;box-shadow:0 4px 12px rgba(234,88,12,.12);}
.gmailInboxBtn span{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  margin-left:6px;border-radius:999px;background:#ea580c;color:#fff;font-size:12px;
}
.gmailMailCard{border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;background:#fff;}
.gmailMailCard h3{margin:12px 0;font-size:18px;}
.gmailMeta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;}
.gmailActions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.emptyMail{color:var(--muted);padding:16px 0;}


/* Message Chips in Wissensbank Topbar */
.messageTopbar{justify-content:space-between !important;align-items:center;gap:18px;}
.messageChips{display:flex;align-items:center;gap:10px;overflow-x:auto;flex:1;padding-right:12px;}
.messageChip{
  display:flex;align-items:center;gap:10px;min-width:190px;max-width:260px;height:58px;
  padding:10px 14px;border-radius:14px;background:#fff7ed;color:#1f2937;border:1px solid #fed7aa;
  text-align:left;white-space:nowrap;box-shadow:0 4px 12px rgba(234,88,12,.08);
}
.messageChip:hover{background:#ffedd5;}
.messageIcon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff;flex-shrink:0;}
.messageChip b{display:block;font-size:14px;}
.messageChip small{display:block;font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.noMessages{color:var(--muted);font-size:14px;}
.noMessagesWarning{color:var(--accent);font-weight:700;}
.kbSuggestBadge{
  display:inline-block;background:var(--accent-soft);color:var(--accent);
  border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;margin-left:6px;
  vertical-align:middle;
}
.messageDetail h3{font-size:26px;margin:18px 0;}
.messageDetail p{line-height:1.45;}
.messageActions{display:flex;flex-direction:column;gap:10px;margin-top:20px;}

#messageOverlay{display:none!important}
#messageDrawer{
  width:300px;
  max-width:34vw;
  padding:20px;
  border-radius:18px 0 0 18px;
  box-shadow:-8px 0 22px rgba(15,23,42,.12);
}
#messageDrawer .drawerHeader{margin-bottom:12px}
#messageDrawer .messageDetail h3{font-size:21px;margin:14px 0}
#messageDrawer .messageDetail p{font-size:14px;margin:10px 0;line-height:1.4}
#messageDrawer .messageActions{gap:8px;margin-top:16px}
#messageDrawer .messageActions button{width:100%}
.messageHint{
  margin-top:16px;
  padding:12px;
  border-radius:12px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:12px;
  line-height:1.4;
}
.messageTopbar .messageChips{width:100%;padding-right:0}
@media(max-width:900px){
  #messageDrawer{width:280px;max-width:82vw}
}


/* Gmail-artiges Schreiben: schwebender Button + Compose-Fenster */
.composeBtn{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:14px 22px;margin-bottom:20px;font-size:15px;font-weight:700;
  box-shadow:0 2px 10px rgba(20,30,25,.10);color:var(--text);
}
.composeBtn:hover{box-shadow:0 4px 14px rgba(20,30,25,.16)}
.composeBtn svg{width:18px;height:18px;color:var(--primary-dark)}

.composeOverlay{position:fixed;inset:0;background:transparent;display:none;z-index:48}
.composeOverlay.open{display:block}

.composeWindow{
  position:fixed;right:24px;bottom:0;width:560px;max-width:94vw;
  background:#fff;border-radius:14px 14px 0 0;box-shadow:0 -6px 28px rgba(20,30,25,.22);
  z-index:49;display:none;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-bottom:none;
}
.composeWindow.open{display:flex}
.composeHeader{
  background:var(--primary-dark);color:#fff;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:700;font-size:14px;cursor:pointer;flex:none;
}
.composeHeaderActions{display:flex;gap:4px}
.composeHeaderActions button{
  background:transparent;color:#fff;width:26px;height:26px;padding:0;
  border-radius:6px;font-size:16px;line-height:1;font-weight:700;
}
.composeHeaderActions button:hover{background:rgba(255,255,255,.18)}
.composeBody{padding:14px 16px 4px;display:flex;flex-direction:column;gap:0}
.composeWindow.minimized .composeBody,
.composeWindow.minimized .composeFooter{display:none}
.composeSubject{
  border:none;border-bottom:1px solid var(--line);border-radius:0;
  padding:10px 2px;font-size:14px;font-weight:600;
}
.composeSubject:focus{border-bottom-color:var(--primary);box-shadow:none}
.updateRecipientsList{display:flex;flex-direction:column;gap:6px;max-height:120px;overflow-y:auto;padding:10px 12px;background:#f7f9f7;border-radius:10px;margin-bottom:10px}
.composeEditable{
  min-height:280px;max-height:420px;overflow-y:auto;
  padding:12px 2px;font-size:15px;line-height:1.6;outline:none;
}
.composeEditable:empty:before{content:attr(data-placeholder);color:#9aa39d}
.composeImagePreview:empty{display:none}
.composeImagePreview{padding:6px 2px 10px;display:flex;flex-wrap:wrap;gap:8px}
.composeImagePreview .previewThumb{
  position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);
}
.composeImagePreview .previewThumb img{width:100%;height:100%;object-fit:cover;display:block}
.composeImagePreview .previewThumb button{
  position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;
  border-radius:50%;background:rgba(20,30,25,.65);color:#fff;font-size:12px;line-height:1;
}
.composeFooter{
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);flex:none;
}
.composeToolbar{display:flex;gap:4px}
.composeToolBtn{
  width:34px;height:34px;padding:0;border-radius:8px;background:transparent;
  font-size:13px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
}
.composeToolBtn:hover{background:#f1f3f0}
.composeToolBtn.active{background:var(--primary-soft);color:var(--primary-dark)}
.composeImageBtn{cursor:pointer}
.composeImageBtn svg{width:17px;height:17px}

.updateCard .updateImg{
  margin-top:10px;max-width:260px;border-radius:12px;border:1px solid var(--line);display:block;
}
@media(max-width:520px){
  .composeWindow{right:0;left:0;width:100%;max-width:100%;border-radius:0}
}
.updateCard{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  margin-bottom:12px;
  background:#fff;
  cursor:pointer;
  transition:box-shadow .12s ease, border-color .12s ease;
}
.updateCard:hover{box-shadow:0 2px 12px rgba(0,0,0,0.07);border-color:var(--primary)}
.updateHeader{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}
.updateHeader strong{
  display:block;
  font-size:17px;
}
.updateHeader span,
.updateHeader time{
  color:var(--muted);
  font-size:13px;
}
.updateCard p{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.5;
  margin-bottom:0;
}
.updatePreview{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);margin-top:6px;margin-bottom:0;
}
.updateReaderBody{
  white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;margin-bottom:16px;
}
.recipientsDropdown{margin-bottom:10px}
.recipientsDropdown summary{
  cursor:pointer;padding:10px 12px;background:#f7f9f7;border-radius:10px;
  font-size:14px;font-weight:600;list-style:none;
}
.recipientsDropdown summary::-webkit-details-marker{display:none}
.recipientsDropdown summary::after{content:" ▾";font-weight:400;color:var(--muted)}
.recipientsDropdown[open] summary::after{content:" ▴"}
.recipientsDropdown .updateRecipientsList{margin-top:8px;margin-bottom:0}
.mailboxInfo{
  color:var(--muted);
}

/* Time Inputs nur volle Stunden – Browser zeigt weiterhin Picker, Validierung ist strikt */
input[type="time"]{
  min-width:130px;
}


/* Aktives Ticket / aktive Nachricht sichtbar markieren */
.messageChip.selected{
  background:var(--primary-soft);
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.16);
  color:var(--primary-dark);
}

.messageChip.selected .messageIcon{
  background:#fff;
}

.kb-item.active{
  background:var(--primary-soft) !important;
  color:var(--primary-dark) !important;
  border:1px solid var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.10);
}

.kb-item.active strong{
  color:var(--primary-dark);
}


/* Nachrichtenfenster verschiebt die Wissensbank, statt sie zu überdecken */
#messageDrawer{
  width:300px;
}

/* Nur in der Wissensbank reagieren */
body.message-drawer-open #knowledge .kb-layout{
  grid-template-columns:240px 360px minmax(360px,1fr);
  padding-right:320px;
  transition:padding-right .25s ease;
}

/* Die rechte Antwort-/Detailspalte bleibt sauber nutzbar */
body.message-drawer-open #knowledge .kb-layout > section.panel{
  min-width:0;
  transition:all .25s ease;
}

/* Textarea und Antwortbereich passen sich automatisch an */
body.message-drawer-open #knowledge textarea{
  width:100%;
  max-width:100%;
}

/* Auf kleineren Fenstern kein Überlappen: Drawer wird etwas schmaler */
@media(max-width:1250px){
  #messageDrawer{
    width:270px;
  }
  body.message-drawer-open #knowledge .kb-layout{
    grid-template-columns:220px 310px minmax(300px,1fr);
    padding-right:290px;
  }
}

@media(max-width:980px){
  body.message-drawer-open #knowledge .kb-layout{
    padding-right:0;
  }
  #messageDrawer{
    width:280px;
    max-width:82vw;
  }
}


/* Verknüpfung: ausgewähltes Ticket bleibt aktiv, während eine KB gewählt wird */
.messageChip.selected{
  position:relative;
}

.messageChip.selected::after{
  content:"In Bearbeitung";
  position:absolute;
  right:8px;
  top:-8px;
  background:var(--primary);
  color:#fff;
  border-radius:999px;
  padding:3px 7px;
  font-size:10px;
  font-weight:800;
}

.messageHint.kbLinked{
  background:var(--primary-soft);
  border:1px solid var(--primary);
}

.messageHint.kbLinked span{
  color:var(--muted);
  font-size:11px;
}

.nameFillStatus{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(20,30,25,.12);
  font-size:11px;
  font-weight:700;
}
.nameFillStatus.ok{color:var(--primary-dark)}
.nameFillStatus.warn{color:var(--accent)}

/* --- Einstellungen: Profil & Mitarbeiter-Verwaltung --- */
.settingsHint{color:var(--muted);font-size:13px;margin:0 0 14px}
.profileForm{display:flex;flex-direction:column;gap:10px;max-width:420px}
.profileForm label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-top:4px}
.profilePhotoRow{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.profilePhoto{
  width:64px;height:64px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;font-size:26px;
}
.profilePhoto.small{width:44px;height:44px;font-size:18px}
.profilePhoto img{width:100%;height:100%;object-fit:cover}
.miniBtn{padding:8px 14px;font-size:13px;border-radius:10px;background:#eceeec}
.photoUploadBtn{cursor:pointer;display:inline-flex;align-items:center}

.employeeAddForm{
  display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:10px;align-items:center;
  margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.integrationAddForm{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:center;
  margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.integrationRow{
  display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:14px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.integrationRow:last-child{border-bottom:none}
@media (max-width:900px){
  .integrationAddForm{grid-template-columns:1fr}
  .integrationRow{grid-template-columns:1fr}
}
.employeeList{display:flex;flex-direction:column;gap:14px}
.employeeCard{
  display:grid;
  grid-template-columns:auto 1.4fr 1.6fr auto;
  grid-template-areas:
    "photo fields companies delete"
    "rating rating rating rating";
  gap:16px;align-items:center;
  padding:16px;border:1px solid var(--line);border-radius:14px;background:#fbfcfb;
}
.employeeCard > .profilePhoto{grid-area:photo}
.employeeCard > .employeeFields{grid-area:fields}
.employeeCard > .employeeCompanies{grid-area:companies}
.employeeCard > .employeeRatingRow{grid-area:rating;display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.employeeCard > .employeeCardActions{grid-area:delete;display:flex;gap:8px}
.employeeRatingAvg{font-size:12px;color:var(--muted)}
.employeeFields{display:flex;flex-direction:column;gap:6px}
.employeeFields input{padding:8px 10px;font-size:13px}
.employeeCompanies{display:flex;flex-direction:column;gap:6px;font-size:13px}
.companyCheck{display:flex;align-items:center;gap:8px;cursor:pointer}
.companyCheck input{width:auto;padding:0}
.employeeCompaniesReadonly .badge{margin:0 6px 6px 0;display:inline-block}
.miniFieldLabel{font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}

/* --- Stunden-Diagramm (Übersicht) --- */
.hoursChartSvg{width:100%;height:auto;display:block}
.chartLabel{font-size:10px;fill:var(--muted)}
.chartValue{font-size:10px;fill:var(--primary-dark);font-weight:700}
.chartAxisLabel{font-size:9px;fill:var(--muted)}
.hoursChartSvg rect{cursor:default}
.shiftHint{font-size:12px;color:var(--muted);font-style:italic}
.shiftCountdown{font-size:12px;color:var(--danger);font-weight:600;margin-top:4px}
.shiftCountdown .countdownTime{font-family:var(--font-mono)}

.kbAnswerActions{display:flex;gap:10px;margin-top:4px}
.kbAnswerActions button{flex:1;height:46px;font-size:14px}

/* --- Rechnungen / Verdienst-Übersichten --- */
.invoiceMonthRow{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.invoiceMonthRow select{min-width:180px}
.invoicePreviewGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.invoicePreviewGrid div{background:var(--primary-soft);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.invoicePreviewGrid span{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.invoicePreviewGrid strong{font-family:var(--font-mono);font-size:19px;color:var(--primary-dark)}
.overviewCustomerBlock{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.overviewCustomerBlock strong{display:block;margin-bottom:8px;color:var(--primary-dark)}
.overviewEmpRow{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.overviewEmpRow:last-child{border-bottom:none}
.customerRateList{display:flex;flex-direction:column;gap:10px;max-width:420px}
.customerRateRow{display:flex;justify-content:space-between;align-items:center;gap:14px}
.customerRateRow input{width:120px}
@media(max-width:640px){
  .invoicePreviewGrid{grid-template-columns:1fr}
}
.dangerZone{border:1px solid var(--danger);background:var(--danger-soft)}
.dangerZone h2{color:var(--danger)}

.pagerRow{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;font-size:13px;color:var(--muted)}
.pagerRow button:disabled{opacity:.4;cursor:default}

/* --- Qualitätsprüfung / Bewertung --- */
.qualityCell{display:flex;align-items:center;gap:10px;white-space:nowrap}
.ratingPercentBadge{display:inline-block;padding:4px 10px;border-radius:999px;font-family:var(--font-mono);font-weight:600;font-size:13px}
.ratingPercentBadge.good{background:var(--primary-soft);color:var(--primary-dark)}
.ratingPercentBadge.mid{background:#eef2ee;color:#5b6b60}
.ratingPercentBadge.warn{background:var(--accent-soft);color:var(--accent)}
.ratingPercentBadge.bad{background:var(--danger-soft);color:var(--danger)}
.ratingPercentBadge.muted{background:#eef0ee;color:var(--muted)}

/* --- Anruf-Button (Sidebar) + Anrufe-Drawer --- */
.callSidebarBtn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 13px;margin:0 0 14px;border-radius:12px;
  background:var(--primary-soft);color:var(--primary-dark);
  font-weight:700;font-size:14px;
}
.callSidebarBtn svg{width:17px;height:17px;flex:none}
.callSidebarBtn:hover{background:#dcebe3}
.app.collapsed .callSidebarBtn{justify-content:center;padding:11px}

.callStatusRow{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin-bottom:20px}
.callStatusDot{width:9px;height:9px;border-radius:50%;background:var(--primary);display:inline-block}
.callSimulateBtn{width:100%;height:52px;font-size:15px;margin-bottom:26px}
.callOutboundSection{border-top:1px solid var(--line);padding-top:16px}
.callOutboundRow{display:flex;gap:8px}
.callOutboundRow input{flex:1}
.callStatsRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.callStatBadge{display:inline-block;padding:5px 12px;border-radius:999px;font-family:var(--font-mono);font-weight:600;font-size:13px}
.callStatBadge.good{background:var(--primary-soft);color:var(--primary-dark)}
.callStatBadge.bad{background:var(--danger-soft);color:var(--danger)}
.callSimulateBtn.danger{margin-top:10px}
.callMissedSection{margin:20px 0;padding-top:16px;border-top:1px solid var(--line)}
.ratingAnswerBox{background:#f7f9f7;border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0}
.ratingAnswerBox strong{display:block;margin-bottom:8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ratingAnswerBox p{white-space:pre-line;font-size:14px;line-height:1.5;margin:0}
#ratingNoteInput{width:100%;height:90px;margin:8px 0 16px}

.ratingCriteriaGrid{display:flex;flex-direction:column;gap:8px;margin:8px 0 16px;padding:12px 14px;background:#f7f9f7;border-radius:12px}
.criteriaCheck{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.criteriaCheck input{width:auto}

/* --- Meine Bewertungen (Mitarbeiter-Dashboard) --- */
.qualityStatsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.qualityStatCard{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;border:1px solid var(--line);background:#fff}
.qualityStatCard strong{font-family:var(--font-mono);font-size:22px;font-weight:600;display:block}
.qualityStatCard span{font-size:12px;color:var(--muted)}
.qualityStatIcon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.qualityStatIcon svg{width:20px;height:20px}
.qualityStatCard.good .qualityStatIcon{background:var(--primary-soft);color:var(--primary-dark)}
.qualityStatCard.good strong{color:var(--primary-dark)}
.qualityStatCard.neutralGood .qualityStatIcon{background:#eef2ee;color:#5b6b60}
.qualityStatCard.warn .qualityStatIcon{background:var(--accent-soft);color:var(--accent)}
.qualityStatCard.warn strong{color:var(--accent)}
.qualityStatCard.bad .qualityStatIcon{background:var(--danger-soft);color:var(--danger)}
.qualityStatCard.bad strong{color:var(--danger)}

@media(max-width:760px){
  .employeeAddForm{grid-template-columns:1fr}
  .employeeCard{grid-template-columns:1fr;grid-template-areas:"photo" "fields" "companies" "rating" "delete"}
}


/* UI Cleanup: Ticketfarbe reicht als Auswahlmarkierung */
.messageChip.selected::after{
  display:none !important;
  content:none !important;
}

/* Antwortbereich wieder sauber ausrichten */
#knowledge .kb-layout > section.panel{
  display:flex;
  flex-direction:column;
}

#knowledge #kbAnswer{
  width:100%;
  min-height:320px;
  height:320px;
  margin:18px 0 14px;
  resize:vertical;
}

#knowledge #copyAnswerBtn{
  align-self:flex-start;
  margin-top:0;
}

/* Verhindert verschobene Beschriftung neben/unter dem Textfeld */
#knowledge label{
  display:block;
  margin:0;
}

/* Kalender nach oben ziehen, nachdem der Hinweis entfernt wurde */
#calendar h1{
  margin-bottom:10px;
}

#calendar .calendar-toolbar{
  margin-top:8px;
}

#calendar .calendar-grid-google{
  margin-top:0;
}


/* Monatsreport: Leistungs- und Qualitäts-KPIs */
.reportKpiSection{
  margin:6px 0 24px;
}
.reportKpiGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.reportKpiCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}
.reportKpiHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  font-weight:800;
}
.reportKpiHead strong{
  font-size:24px;
  color:var(--primary-dark);
}
.reportKpiCard p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.4;
}
.progressTrack{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#edf0f2;
  overflow:hidden;
}
.progressFill{
  height:100%;
  width:0;
  border-radius:999px;
  transition:width .35s ease;
}
.progressFill.good{background:var(--primary)}
.progressFill.warning{background:#e8a23a}
.reportQualityNotice{
  margin-top:16px;
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.reportQualityNotice.allGood{
  background:var(--primary-soft);
  color:var(--primary-dark);
  border:1px solid #cfe3d7;
}
.reportQualityNotice.needsAttention{
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fed7aa;
}
.statusPill{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.statusPill.success{background:#dcfce7;color:#166534}
.statusPill.danger{background:#fee2e2;color:#991b1b}
.statusPill.running{background:#dbeafe;color:#1d4ed8}
.statusPill.neutral{background:#f3f4f6;color:#4b5563}

/* Wissensbank: einheitliche Abstände */
#knowledge .kb-layout{
  gap:18px;
  align-items:stretch;
}
#knowledge .kb-layout > .panel,
#knowledge .kb-layout > section.panel{
  padding:22px;
}
#knowledge .cat,
#knowledge .kb-item{
  margin-bottom:8px;
}
#knowledge .detail-top{
  margin-bottom:16px;
}
#knowledge .checklist{
  margin:16px 0;
}

/* Nachrichtenzeile passt sich beim Ein-/Ausklappen des linken Menüs an */
#knowledge .messageTopbar{
  width:100%;
  min-width:0;
  transition:width .25s ease,padding .25s ease;
}
#knowledge .messageChips{
  min-width:0;
  max-width:100%;
  flex-wrap:nowrap;
  scrollbar-width:thin;
}
.app.collapsed #knowledge .messageTopbar{
  width:100%;
}
.app:not(.collapsed) #knowledge .messageTopbar{
  width:100%;
}
.app.collapsed #knowledge .messageChip{
  min-width:205px;
}
.app:not(.collapsed) #knowledge .messageChip{
  min-width:190px;
}

@media(max-width:1100px){
  .reportKpiGrid{grid-template-columns:1fr}
}


/* 24-Stunden-Kalender, vertikal scrollbar */
.calendar-grid-google{
  max-height:calc(100vh - 190px);
  overflow-y:auto;
  overflow-x:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  position:relative;
}

.calendar-grid-google .time-header,
.calendar-grid-google .day-header{
  position:sticky;
  top:0;
  z-index:12;
  background:#fff;
}

.calendar-grid-google .time-header{
  left:0;
  z-index:14;
}

.calendar-grid-google .time-col{
  position:sticky;
  left:0;
  z-index:10;
  background:#fff;
}

.calendar-grid-google .time-cell,
.calendar-grid-google .hour-line{
  height:56px;
}

.calendar-grid-google .day-col{
  min-height:1344px;
}

/* Ticket-Chips kompakter */
.messageChip{
  min-width:150px !important;
  max-width:210px !important;
  height:52px !important;
}

.messageChip small{
  display:none !important;
}

/* Inhalte nach entfernten Überschriften nach oben */
#ticketlog.page,
#calendar.page,
#dashboard.page{
  padding-top:0;
}

#calendar .calendar-toolbar{
  margin-top:4px;
}