:root {
  /* HSL Component Tokens */
  --h-emerald: 153;
  --s-emerald: 41%;
  --l-emerald: 18%; /* #1E3D2F - Forest Luxury Emerald */
  
  --h-bronze: 35;
  --s-bronze: 31%;
  --l-bronze: 32%;  /* #6B5538 - Heritage Bronze */

  --h-charcoal: 240;
  --s-charcoal: 10%;
  --l-charcoal: 4%;  /* #0a0a0f - Deep Obsidian Black */

  /* Global Functional Colors mapped to tokens */
  --primary-lux: hsl(var(--h-emerald), var(--s-emerald), var(--l-emerald));
  --bronze-lux: hsl(var(--h-bronze), var(--s-bronze), var(--l-bronze));
  --dark-lux: hsl(var(--h-charcoal), var(--s-charcoal), var(--l-charcoal));

  /* Ultra-Premium Glassmorphism Presets */
  --glass-blur: 20px;
  --glass-bg-dark: rgba(18, 17, 14, 0.45);
  --glass-bg-light: rgba(255, 254, 251, 0.65);
  --glass-border-dark: rgba(255, 255, 255, 0.05);
  --glass-border-light: rgba(26, 22, 17, 0.06);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  
  /* Spring Elastic curves */
  --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.175, 0.885, 0.32, 1.15);

  /* Soft-skill light palette (token VALUES swapped, names preserved for compat) */
  --bg-main: #F8F3E8;
  --bg-card: rgba(255, 254, 251, 0.75);
  --bg-card-solid: #FFFEFB;
  --bg-sidebar: rgba(241, 233, 214, 0.92);
  --bg-topbar: rgba(248, 243, 232, 0.85);
  --bg-input: rgba(26, 22, 17, 0.04);
  --bg-hover: rgba(26, 22, 17, 0.05);
  --primary: #1E3D2F;
  --primary-hover: #6B5538;
  --primary-dim: rgba(30, 61, 47, 0.12);
  --text-main: #1A1611;
  --text-muted: #7A6F61;
  --text-faint: #B5AB99;
  --border: rgba(26, 22, 17, 0.08);
  --border-strong: rgba(26, 22, 17, 0.15);
  --danger: #9C3A3A;
  --danger-dim: rgba(156, 58, 58, 0.12);
  --warning: #C9A876;
  --warning-dim: rgba(201, 168, 118, 0.18);
  /* --warning ist als Rahmen-/Flächenfarbe gedacht und auf hellem Grund zu
     blass für Text (2,2:1). --warning-text ist die lesbare Variante (5,1:1). */
  --warning-text: #8A6A2F;
  --success: #2F6B4A;
  --success-dim: rgba(47, 107, 74, 0.12);
  --info: #4E5C45;

  /* Brand tokens (additions) */
  --bronze: #6B5538;
  --bronze-deep: #523F26;
  --emerald-deep: #1E3D2F;
  --highlight: #C9A876;
  --bg-warm: #F1E9D6;
  --serif: 'Fraunces', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --sidebar-w: 260px;
  --topbar-h: 60px;
  --transition: 0.2s ease;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --micro-transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ===== Dark mode — warm editorial charcoal palette (overrides :root) ===== */
[data-theme="dark"] {
  --bg-main: #14110C;
  --bg-card: rgba(33, 29, 22, 0.72);
  --bg-card-solid: #201C15;
  --bg-sidebar: rgba(18, 15, 11, 0.94);
  --bg-topbar: rgba(18, 15, 11, 0.86);
  --bg-input: rgba(245, 240, 230, 0.05);
  --bg-hover: rgba(245, 240, 230, 0.07);
  --primary: #6FAF8B;
  --primary-hover: #C9A876;
  --primary-dim: rgba(111, 175, 139, 0.16);
  --text-main: #F2ECDD;
  --text-muted: #A89C88;
  --text-faint: #6E6557;
  --border: rgba(245, 240, 230, 0.11);
  --border-strong: rgba(245, 240, 230, 0.20);
  --danger: #D98A8A;
  --danger-dim: rgba(217, 138, 138, 0.16);
  --warning: #D9BD8A;
  --warning-dim: rgba(217, 189, 138, 0.16);
  --warning-text: #D9BD8A;
  --success: #7FC49E;
  --success-dim: rgba(127, 196, 158, 0.16);
  --info: #A8BBA0;
  --bronze: #C9A876;
  --bronze-deep: #B08D5B;
  --emerald-deep: #6FAF8B;
  --highlight: #C9A876;
  --bg-warm: #221E16;
}
[data-theme="dark"] body { color-scheme: dark; }

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

h1, h2, h3, .dashboard-title, .modal-title, .page-title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--bronze); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ============================
   LOADING SCREEN
   ============================ */
.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-main);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================
   LAYOUT
   ============================ */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.dashboard-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ============================
   TOPBAR
   ============================ */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 100;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  /* overflow:hidden burada YOK — biz-switcher dropdown'unu kırpıyordu (altında kalıyordu).
     Yatay taşma koruması zaten çocuklarda: .biz-name + switcher-current ellipsis, .brand kısa. */
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.live-clock {
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.5px;
  min-width: 44px;
  text-align: center;
}

.live-clock::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--primary);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--primary);
  animation: spring-pulse 2s var(--spring-ease) infinite;
}
@keyframes spring-pulse {
  0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(30, 61, 47, 0.6); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(30, 61, 47, 0); }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(30, 61, 47, 0); }
}

.brand {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

.biz-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
  opacity: 0.85;
}

/* Business Switcher CHIP (demo-dashboard) — topbar'da sarmayı/taşmayı engelle */
.biz-switcher-container { display: inline-flex; align-items: center; min-width: 0; }
.biz-switcher-chip { max-width: 260px; white-space: nowrap; overflow: hidden; }
.biz-switcher-chip > span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bizSwitcherCurrentName { overflow: hidden; text-overflow: ellipsis; }

/* Business Switcher (multi-business, Paket 3) — dark theme uyumlu */
.biz-switcher {
  position: relative;
  margin-left: 4px;
  /* Dar ekranda topbar-right'ın altına girmesin: flex içinde küçülebilsin */
  min-width: 0;
  flex: 0 1 auto;
}
.biz-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.biz-switcher-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.biz-switcher-current {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.biz-switcher-caret { font-size: 10px; opacity: 0.6; }
.biz-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 200;
}
.biz-switcher-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-main);
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}
.biz-switcher-item:hover { background: var(--bg-hover); }
.biz-switcher-item[aria-selected="true"] {
  background: var(--primary-dim);
  color: var(--primary);
  font-weight: 600;
}
.biz-switcher-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.85;
}
.biz-switcher-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
.biz-switcher-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}
.biz-switcher-add:hover { background: var(--primary-dim); }

/* Settings > Geschäfte: business row card */
.biz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s var(--spring-soft), border-color 0.2s;
}
.biz-row:hover { border-color: var(--border-strong); }
.biz-row-name {
  font-weight: 600;
  color: var(--text-main);
  font-size: 14px;
}
.biz-row-default-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
}
.biz-row-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.biz-row-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.biz-row-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
}
.biz-row-link span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.biz-row-link-missing {
  background: transparent;
  border-style: dashed;
  color: var(--text-faint);
  font-family: inherit;
  font-style: italic;
}
.btn-icon-sm {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.btn-icon-sm:hover { background: var(--bg-hover); }
.biz-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.biz-row-actions .btn-secondary {
  padding: 6px 12px;
  font-size: 12px;
}
.biz-row-actions .btn-danger-link {
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #ef4444;
  cursor: pointer;
}
.biz-row-actions .btn-danger-link:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* RBAC permissions grid */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.perm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-main);
  transition: border-color 0.15s, background 0.15s;
}
.perm-item:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.perm-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.perm-item-override {
  margin-left: auto;
  font-size: 10px;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* Mitarbeiter > Dienstleistungen — Card-Stil (Faz: Personel iyilestirme) */
.emp-srv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.emp-srv-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}
.emp-srv-toolbar-actions { display: flex; gap: 6px; }
.btn-ghost-sm {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-ghost-sm:hover {
  background: var(--bg-hover);
  color: var(--text-main);
  border-color: var(--border-strong);
}

.emp-srv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 8px;
}
.emp-srv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}
.emp-srv-row:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.emp-srv-row.is-selected {
  border-color: var(--primary);
  background: var(--primary-dim);
}
.emp-srv-row .emp-srv-chk {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.emp-srv-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.emp-srv-row.is-selected .emp-srv-row-title {
  font-weight: 600;
}
/* 640px -> 768px (Ops #61, breakpoint konsolidasyonu): tek kural, hedef
   ölçeğe (480/768/1024) hizalandı. Eşiği yükseltmek yalnızca 1-kolon
   aralığını genişletiyor (641-768 artık da 1-kolon) — taşma riski yok. */
@media (max-width: 768px) {
  .emp-srv-list { grid-template-columns: 1fr; }
}

/* Faz 4: Standort-Öffnungstage (Hours panel) */
.hours-standort-section {
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 30px rgba(0, 0, 0, 0.03);
}
.hours-standort-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.hours-standort-header .form-select {
  max-width: 240px;
}
.hours-standort-days {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hours-day-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hours-day-pill:hover { border-color: var(--border-strong); }
.hours-day-pill.is-open {
  background: var(--primary-dim);
  border-color: var(--primary);
  color: var(--primary);
}
.hours-day-pill.is-closed {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-faint);
  text-decoration: line-through;
}

/* Calendar — closed day visual */
.ov-week-head-closed,
.ov-week-cell-closed,
.ov-month-cell-closed {
  background: repeating-linear-gradient(
    45deg,
    var(--bg-input),
    var(--bg-input) 6px,
    transparent 6px,
    transparent 12px
  );
  border-color: var(--border) !important;
  color: var(--text-faint) !important;
  cursor: not-allowed !important;
  opacity: 0.55;
}
.ov-week-cell-closed:hover,
.ov-month-cell-closed:hover {
  background: repeating-linear-gradient(
    45deg,
    var(--bg-input),
    var(--bg-input) 6px,
    transparent 6px,
    transparent 12px
  );
}
.ov-day-closed-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* Faz 3: Bestehende Mitarbeiter aus anderen Standorten */
.other-standort-emps {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 30px rgba(0, 0, 0, 0.03);
}
.other-standort-emps-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}
.other-standort-emp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}
.other-standort-emp-name {
  font-size: 13px;
  color: var(--text-main);
  font-weight: 600;
}
.other-standort-emp-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.hamburger:hover {
  background: var(--bg-hover);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  transition: var(--transition);
}

.lang-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  outline: none;
}

.lang-select:focus {
  border-color: var(--primary);
}

.logout-btn {
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.logout-btn:hover {
  background: var(--danger-dim);
  color: var(--danger);
}

/* ============================
   SIDEBAR
   ============================ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  backdrop-filter: blur(12px);
  transition: width 0.22s ease, transform var(--transition);
  position: relative;
}

.sidebar.collapsed {
  width: 0;
  border-right: none;
  overflow: hidden;
}

#sidebarCollapseBtn {
  transition: left 0.22s ease;
}

.sidebar nav {
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  text-align: left;
  position: relative;
  z-index: 1;
  background: transparent !important;
  transition: color 0.25s ease, transform 0.2s var(--spring-soft);
  border: none;
}

.sidebar-item::before {
  content: '';
  position: absolute;
  inset: 2px 4px;
  border-radius: var(--radius-sm);
  background: var(--primary-dim);
  z-index: -1;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.3s var(--spring-ease), opacity 0.2s ease;
}

.sidebar-item:hover {
  color: var(--text-main);
}
.sidebar-item:hover::before {
  transform: scale(0.96);
  opacity: 0.55;
}

.sidebar-item.active {
  color: var(--primary) !important;
  font-weight: 600;
}
.sidebar-item.active::before {
  transform: scale(1);
  opacity: 1;
}

.sidebar-item .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}
.sidebar-item .icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.sidebar-item .lock {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.5;
}

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 12px;
}

/* ============================
   MAIN AREA
   ============================ */
.main-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
  animation: panelFade 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes panelFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.panel-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.panel-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================
   BUTTONS
   ============================ */
.btn-primary {
  background: var(--primary);
  color: var(--bg-card-solid);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  transition: transform 240ms var(--ease-spring), background 220ms var(--ease-out), box-shadow 240ms var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 10px -3px rgba(26, 22, 17, 0.18);
}

.btn-primary:hover {
  background: var(--primary-hover);
  color: var(--bg-card-solid);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 16px -4px rgba(26, 22, 17, 0.2);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  background: var(--bg-input);
  color: var(--text-main);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-ghost:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.btn-danger {
  background: var(--danger-dim);
  color: var(--danger);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-danger:hover {
  background: var(--danger);
  color: #fff;
}

.btn-icon {
  padding: 6px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 15px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

/* ============================
   FORMS / INPUTS
   ============================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input,
.form-select,
.form-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}

.form-input::placeholder {
  color: var(--text-faint);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
}

.form-select option {
  background: var(--bg-card-solid);
  color: var(--text-main);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================
   CARDS
   ============================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(8px);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 16px;
}

/* ============================
   BANNERS
   ============================ */
.dash-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  border: 1px solid transparent;
}

.dash-banner.welcome {
  background: var(--primary-dim);
  border-color: rgba(34, 197, 94, 0.3);
}

.dash-banner.pending {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.dash-banner.trial {
  background: var(--warning-dim);
  border-color: rgba(245, 158, 11, 0.3);
}

.dash-banner.pastdue {
  background: var(--danger-dim);
  border-color: rgba(239, 68, 68, 0.3);
}

.dash-banner-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.dash-banner-content {
  flex: 1;
}

.dash-banner-content strong {
  font-size: 14px;
  display: block;
  margin-bottom: 2px;
}

.dash-banner-content p {
  font-size: 13px;
  color: var(--text-muted);
}

.dash-banner-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  padding: 6px 14px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: var(--transition);
  cursor: pointer;
  background: none;
}

.dash-banner-action:hover {
  background: var(--primary);
  color: var(--bg-card-solid);
}

.dash-banner-close {
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  transition: var(--transition);
}

.dash-banner-close:hover {
  color: var(--text-main);
}

/* ============================
   PANEL 1: ÜBERSICHT
   ============================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color var(--transition);
}

.kpi-card:hover {
  border-color: var(--border-strong);
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
}

.kpi-value.kpi-green {
  color: var(--primary);
}

.kpi-value.support-mail {
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.welcome-banner-overview {
  background: var(--primary-dim);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 20px;
}

.welcome-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.welcome-text span {
  color: var(--primary);
}

.today-kpi {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.today-kpi-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.today-kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.physio-rez-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.rez-kpi-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-left: 4px solid #9ca3af;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease;
}

.rez-kpi-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.rez-kpi-tile.rez-kpi-overdue {
  border-left-color: #ef4444;
}

.rez-kpi-tile.rez-kpi-soon {
  border-left-color: #f59e0b;
}

.rez-kpi-tile.rez-kpi-active {
  border-left-color: #22c55e;
}

.rez-kpi-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-main);
}

.rez-kpi-lbl {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.features-card {
  margin-top: 20px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-main);
}

.feature-list li::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.today-section {
  margin-top: 20px;
}

.today-section .section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

/* ============================
   PANEL 2: KALENDER
   ============================ */
.cal-3col {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.cal-emp-leiste {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.cal-emp-leiste > #calAddLeaveBtn {
  flex-shrink: 0;
  white-space: nowrap;
}

.cal-emp-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}
.cal-emp-chips::-webkit-scrollbar {
  display: none;
}
.cal-emp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card-solid);
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  transition: all .15s ease;
}
.cal-emp-chip:hover {
  border-color: var(--primary);
}
.cal-emp-chip.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  font-weight: 600;
}
.cal-emp-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Zahlart-Wahl (Kassieren-Dialog, module/zahlarten.js) */
.zahlart-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-main);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.zahlart-chip:hover:not(:disabled) {
  border-color: var(--primary);
}
.zahlart-chip.active {
  border-color: var(--primary);
  background: var(--primary-dim);
}
.zahlart-chip:disabled {
  opacity: .5;
  cursor: default;
}

.cal-emp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-emp-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 4px 8px;
  margin-bottom: 4px;
}

.cal-emp-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}

.cal-emp-pick:hover {
  border-color: var(--primary);
}

.cal-emp-pick.active {
  background: var(--primary);
  color: var(--bg-card-solid);
  border-color: var(--primary);
}

.cal-emp-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg-card-solid);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cal-emp-pick.active .cal-emp-dot {
  background: rgba(255, 255, 255, .25);
  color: var(--bg-card-solid);
}

/* 600px -> 768px (Ops #61, breakpoint konsolidasyonu): hedef ölçeğe hizalandı.
   Eşiği yükseltmek yalnızca 1-kolon aralığını genişletiyor — taşma riski yok. */
@media (max-width: 768px) {
  .cal-3col {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .cal-emp-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .cal-emp-list .cal-emp-title {
    display: none;
  }

  .cal-emp-pick {
    flex-shrink: 0;
  }
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cal-view-btn {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: var(--transition);
}

.cal-view-btn:hover,
.cal-view-btn.active {
  background: var(--primary-dim);
  border-color: var(--primary);
  color: var(--primary);
}

.cal-nav-btn {
  font-size: 16px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: var(--transition);
}

.cal-nav-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.cal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  min-width: 160px;
  text-align: center;
}

.cal-spacer {
  flex: 1;
}

.slot-panel {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  flex-shrink: 0;
}

.slot-panel.open {
  width: 300px;
}

.slot-panel-inner {
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.slot-panel-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.slot-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slot-item.slot-busy {
  background: var(--danger-dim);
  border-color: rgba(239, 68, 68, 0.25);
}

.slot-item.slot-free {
  background: var(--primary-dim);
  border-color: rgba(34, 197, 94, 0.25);
}

.slot-time {
  font-weight: 600;
}

.slot-customer {
  color: var(--text-muted);
  font-size: 12px;
}

.slot-label-free {
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
}

/* FullCalendar overrides */
.fc {
  --fc-border-color: var(--border);
  --fc-event-bg-color: var(--primary-dim);
  --fc-event-border-color: var(--primary);
  --fc-event-text-color: var(--primary);
  --fc-today-bg-color: rgba(34, 197, 94, 0.07);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: transparent;
}

.fc .fc-toolbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.fc .fc-button {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
  font-size: 13px !important;
  padding: 5px 10px !important;
}

.fc .fc-button:hover {
  background: var(--bg-hover) !important;
}

.fc .fc-button-primary:not(.fc-button-active):focus {
  box-shadow: none !important;
}

.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
  color: var(--text-muted);
  font-size: 12px;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: var(--primary);
  font-weight: 700;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border-color: var(--border);
}

.fc .fc-event {
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 4px;
}

.fc .fc-daygrid-event-dot {
  border-color: var(--primary);
}

.fc .fc-list-event:hover td {
  background: var(--bg-hover);
}

.cal-view-toolbar {
  display: flex;
  align-items: center;
  /* Vorher space-between: die Pfeile klebten links, die Tabs rechts, quer ueber
     die volle Panelbreite. Dazwischen lag der Mausweg, den die Praxis gemeldet
     hat. */
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cal-view-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-view-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  min-width: 140px;
  text-align: center;
}

.cal-view-toggle {
  display: flex;
  gap: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.cal-view-toggle .cal-view-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 5px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.cal-view-toggle .cal-view-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
}

/* Gleiche Groesse wie die Tag/Woche/Monat-Pillen daneben — .btn-ghost allein
   waere hier deutlich groesser (13px/8px 16px). */
#calTodayBtn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 5px;
}

.day-view-grid,
.week-view-grid {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow-x: auto;
}

/* Die Wochenansicht teilt sich `.dv-slot` mit der Tagesansicht, rechnet aber
   mit der halben Zeilenhöhe (sieben Spalten statt einer je Mitarbeiter).
   Ohne diese Regel ist die Zeitleiste links doppelt so lang wie ihr Inhalt und
   die angezeigte Uhrzeit gehört zu keinem Terminblock.
   Gegenstück: WV_SLOT_PX in module/kalender-raster.js — beide Zahlen wandern
   nur gemeinsam. */
.week-view-grid .dv-slot {
  height: 28px;
  /* Ohne das markiert der Doppelklick auf ein Rasterfeld die Uhrzeit daneben. */
  user-select: none;
}

/* Träger der Rasterfelder einer Tagesspalte. Die Felder liegen im normalen
   Fluss und geben die Höhe vor, die Terminblöcke schweben absolut darüber. */
.wv-col-slots {
  position: relative;
}

.wv-booking-block {
  position: absolute;
  left: 2px;
  right: 2px;
  padding: 2px 4px;
  border-radius: 4px;
  border-left: 3px solid var(--primary);
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-main);
  overflow: hidden;
  cursor: pointer;
}

.dv-time-col {
  width: 56px;
  flex-shrink: 0;
  background: var(--bg-main);
  border-right: 1px solid var(--border);
  padding-top: 44px;
}

.dv-slot {
  height: 56px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.dv-time-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  padding-right: 10px;
  position: absolute;
  top: -7px;
  right: 0;
}

.dv-cols-wrap {
  display: flex;
  flex: 1;
  min-width: 0;
}

.dv-col {
  flex: 1;
  min-width: 120px;
  border-right: 1px solid var(--border);
  position: relative;
}

.dv-col:last-child {
  border-right: none;
}

.dv-col-header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-card-solid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}

.overview-day-grid {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: auto;
  max-height: 480px;
}

.overview-day-grid .dv-time-col {
  width: 48px;
}

.overview-day-grid .dv-slot {
  height: 48px;
}

.overview-day-grid .dv-col {
  min-width: 100px;
}

.overview-day-grid .dv-col-header {
  height: 36px;
  font-size: 12px;
}

.overview-day-grid .dv-booking-block {
  font-size: 10px;
  padding: 3px 5px;
  border-radius: 4px;
}

.dv-col-highlight {
  background: rgba(34, 197, 94, 0.06);
}

.dv-col-highlight .dv-col-header {
  background: var(--primary-dim);
  color: var(--primary);
  font-weight: 700;
}

.dv-col-slots {
  position: relative;
}

.dv-booking-block {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid transparent;
  z-index: 1;
}

.dv-booking-block:hover {
  filter: brightness(1.2);
}

.dv-move-source {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
}

/* Hinweisleiste im Verschieben-Modus — ohne sie gibt es keinen sichtbaren Weg zurueck. */
.cal-move-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-main);
  background: var(--bg-card-solid);
  border: 1px dashed var(--primary);
}

.cal-move-banner[hidden] {
  display: none;
}

.dv-ghost {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
  border: 1px dashed var(--text-muted);
  z-index: 3;
  opacity: 0.7;
}

.dv-ghost:hover {
  opacity: 1;
}

.dv-absent {
  position: absolute;
  inset: 0;
  background: rgba(148, 163, 184, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  z-index: 2;
  pointer-events: none;
}

/* Wochenansicht, „Alle Mitarbeiter": eine Tagesspalte zeigt mehrere
   Mitarbeiter gemischt, ein Vollflächen-Balken würde auch die Termine der
   anwesenden Kollegen verdecken — deshalb nur ein schmaler Hinweis. Absolut
   positioniert (nicht im Fluss): sonst schiebt er das Raster gegenüber der
   Zeitleiste nach unten, die denselben Hinweis nicht bekommt. */
.wv-col-abwesend-hinweis {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 1px 4px;
  background: rgba(148, 163, 184, 0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
}

/* ── Tagesansicht: vergangene Zeit verblasst + Live-"Jetzt"-Linie ── */
.dv-slot {
  transition: background-color 0.4s ease;
}
.dv-slot--past {
  background: rgba(148, 163, 184, 0.07);
}
[data-theme="dark"] .dv-slot--past {
  background: rgba(148, 163, 184, 0.05);
}
/* Vergangene Stunden in der Zeitspalte dezent ausblenden */
.dv-time-col .dv-slot--past .dv-time-label {
  opacity: 0.38;
}

/* Vergangene Termine entsättigen & abdunkeln, beim Hover wieder voll */
.dv-booking-block--past {
  opacity: 0.5;
  filter: saturate(0.6);
  transition: opacity 0.18s ease, filter 0.18s ease;
}
.dv-booking-block--past:hover {
  opacity: 1;
  filter: saturate(1) brightness(1.05);
}

/* Live "Jetzt"-Linie */
.dv-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--danger);
  z-index: 4;
  pointer-events: none;
}
.dv-now-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
  animation: nowPulse 2.4s ease-in-out infinite;
}
@keyframes nowPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.55; }
}

/* Upcoming bookings (Übersicht widget) */
.upcoming-bookings-card {
  padding: 0;
  overflow: hidden;
}

.upcoming-loading,
.upcoming-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.upcoming-list {
  margin: 0;
}

.upcoming-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  transition: background var(--transition);
}

.upcoming-item:last-child {
  border-bottom: none;
}

.upcoming-item:hover {
  background: var(--bg-hover);
}

.upcoming-time {
  font-weight: 600;
  color: var(--primary);
  font-size: 13px;
  white-space: nowrap;
}

.upcoming-customer {
  font-weight: 500;
  color: var(--text-main);
}

.upcoming-service {
  color: var(--text-muted);
  font-size: 12px;
}

.upcoming-staff {
  color: var(--text-muted);
  font-size: 12px;
  text-align: right;
}

.schedule-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* QA 26.09.2026: bei 390px ragte die Mitarbeiter-Anzahl (#ovCountSelector)
   34px aus #mainArea — Titel + Heute-Knopf + Auswahl passen nicht in eine
   Zeile. Umbrechen statt überlaufen; margin-left:auto hält sie rechtsbündig. */
@media (max-width: 768px) {
  .schedule-header { flex-wrap: wrap; row-gap: 8px; }
}

.schedule-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.schedule-today-btn {
  margin-left: auto;
  font-size: 12px;
  padding: 4px 10px;
}

/* ============================
   Übersicht View Toggle (Tag/Woche/Monat) — Enterprise
   ============================ */
.schedule-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.sv-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sv-btn:hover { color: var(--text-main); background: var(--bg-hover); }
.sv-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
}
.schedule-monthly-emp {
  max-width: 220px;
  padding: 6px 10px;
  font-size: 13px;
}

/* ===== Weekly view ===== */
.ov-weekly {
  padding: 12px;
  overflow-x: auto;
}
.ov-week-grid {
  display: grid;
  grid-template-columns: 140px repeat(var(--ov-day-count, 7), minmax(120px, 1fr));
  gap: 4px;
  min-width: 100%;
}
.ov-week-head, .ov-week-emp-cell {
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
}
.ov-week-head { background: var(--bg-card-solid); }
.ov-week-head-today { color: var(--primary); border-color: var(--primary-dim); }
.ov-week-emp-cell {
  text-align: left;
  font-size: 13px;
  color: var(--text-main);
}
.ov-week-cell {
  min-height: 60px;
  padding: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ov-week-cell:empty::after {
  content: '—';
  color: var(--text-faint);
  font-size: 11px;
  align-self: center;
  margin: auto;
}
.ov-week-appt {
  padding: 4px 6px;
  background: var(--primary-dim);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-main);
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s;
}
.ov-week-appt:hover { background: rgba(34, 197, 94, 0.25); }
.ov-week-appt-time { font-weight: 700; color: var(--primary); }

/* Cross-business: başka standorttaki randevular (block-as-busy) */
.ov-week-appt-other {
  background: var(--bg-input);
  border-left: 3px solid var(--text-faint);
  color: var(--text-muted);
}
.ov-week-appt-other:hover { background: var(--bg-hover); }
.ov-week-appt-other .ov-week-appt-time { color: var(--text-muted); }
.ov-week-appt-other-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.ov-week-empty-state {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ===== Monthly view ===== */
.ov-monthly {
  padding: 12px;
}
.ov-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ov-month-dow {
  padding: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ov-month-cell {
  min-height: 72px;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ov-month-cell:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.ov-month-cell-out {
  background: transparent;
  border-color: transparent;
  color: var(--text-faint);
  cursor: default;
  opacity: 0.45;
}
.ov-month-cell-today {
  border-color: var(--primary);
  background: var(--primary-dim);
}
.ov-month-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}
.ov-month-cell-out .ov-month-day-num { color: var(--text-faint); }
.ov-month-count {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ov-month-count-zero { color: var(--text-faint); font-weight: 400; }
.ov-month-summary {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.ov-month-summary strong { color: var(--text-main); }

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.schedule-card {
  border-radius: 12px;
  padding: 14px 16px 14px 18px;
  position: relative;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-card-solid) !important;
  border: 1px solid var(--border);
  border-left: 4px solid var(--emp-color, var(--primary));
  box-shadow: 0 2px 6px rgba(26, 22, 17, 0.05);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
  overflow: hidden;
}

.schedule-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(26, 22, 17, 0.1);
}

.schedule-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 3px;
}

.schedule-card-time {
  font-size: 12px;
  color: var(--text-muted);
}

.schedule-card-dur {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--bg-warm);
  color: var(--bronze);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

.schedule-card-staff {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 500;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* ============================
   STATUS BADGES
   ============================ */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-green {
  background: var(--primary-dim);
  color: var(--primary);
}

.badge-red {
  background: var(--danger-dim);
  color: var(--danger);
}

.badge-yellow {
  background: var(--warning-dim);
  color: var(--warning);
}

.badge-blue {
  background: rgba(59, 130, 246, 0.15);
  color: var(--info);
}

.badge-gray {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

/* ============================
   PANEL 3: KUNDEN INFO
   ============================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.filter-btn.active {
  background: var(--primary-dim);
  border-color: var(--primary);
  color: var(--primary);
}

.search-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  margin-left: auto;
  width: 200px;
  transition: border-color var(--transition);
}

.search-input::placeholder {
  color: var(--text-faint);
}

.search-input:focus {
  border-color: var(--primary);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--bg-hover);
}

.data-table .td-muted {
  color: var(--text-muted);
  font-size: 12px;
}

.data-table .td-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow-x: auto;
}

/* Grid/flex içindeki kartlar track'e küçülebilsin → geniş tablolar .table-wrap içinde kaysın (yatay taşma önlemi) */
.two-col-grid > * { min-width: 0; }

.table-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.apify-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.apify-bar .form-input {
  flex: 1;
  margin: 0;
}

.apify-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================
   PANEL 4: DIENSTLEISTUNGEN
   ============================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.15s;
  cursor: pointer;
  position: relative;
}

.service-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.service-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.service-card .service-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.srv-del-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  padding: 0;
}

.srv-del-btn:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}

.srv-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.srv-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-dim);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.srv-chip-warn {
  color: #b45309;
  background: #fef3c7;
}

.service-emps {
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
}

.service-card.add-service-card {
  border-style: dashed;
  border-color: var(--border-strong);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 120px;
}

.service-card.add-service-card:hover {
  border-color: var(--primary);
  background: var(--primary-dim);
}

.add-service-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 300;
  color: var(--text-muted);
  transition: var(--transition);
}

.service-card.add-service-card:hover .add-service-icon {
  background: var(--primary-dim);
  border-color: var(--primary);
  color: var(--primary);
}

.add-service-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.service-card.add-service-card:hover .add-service-label {
  color: var(--primary);
}

.service-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.srv-code-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--bg-elevated);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

/* GKV Leistungskatalog */
.gkv-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.gkv-catalog-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}
.gkv-catalog-law {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  margin-top: 2px;
}
.gkv-catalog-badge {
  font-size: 11px;
  font-weight: 500;
  color: #3b82f6;
  background: rgba(59,130,246,0.08);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
}
.gkv-catalog-card {
  cursor: default;
}
.gkv-catalog-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}
.gkv-configured {
  border-color: rgba(37,99,235,0.25);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(37,99,235,0.03) 100%);
}
.gkv-card-action {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.btn-gkv-setup {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.btn-gkv-setup:hover {
  background: rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.4);
}
.btn-gkv-edit {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.btn-gkv-edit:hover {
  background: var(--bg-elevated);
  color: var(--text-main);
}
.gkv-form-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.gkv-form-info-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  flex: 1;
  min-width: 180px;
}
.gkv-pos-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #2563eb;
  background: rgba(37,99,235,0.07);
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  align-self: flex-start;
}
.gkv-kuerzel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: -6px;
}
.srv-chip-locked {
  color: var(--text-faint);
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
}
.srv-chip-flex {
  color: #059669;
  background: rgba(5,150,105,0.09);
}
.srv-chip-gkv {
  color: #2563eb;
  background: rgba(37,99,235,0.08);
  font-weight: 600;
}
.gkv-hinweis {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  margin-top: -2px;
}
#privatSrvDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 16px;
}
#privatSrvDivider > span:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
#privatSrvDivider > span:last-child {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.service-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.service-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.service-staff {
  font-size: 12px;
  color: var(--text-muted);
}

.service-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.add-service-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.add-service-form h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 16px;
}

.employee-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.emp-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  background: var(--bg-input);
  user-select: none;
}

.emp-checkbox-item:hover {
  border-color: var(--primary);
}

.emp-checkbox-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  flex-shrink: 0;
}

.emp-checkbox-item input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.emp-checkbox-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--bg-card-solid);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.emp-checkbox-item input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px var(--primary-dim);
}

.emp-checkbox-item:has(input:checked) {
  background: var(--primary-dim);
  border-color: var(--primary);
  color: var(--primary);
}

.emp-checkbox-item:has(input:checked) span {
  font-weight: 600;
}

/* ============================
   PANEL 5: ARBEITSZEITEN
   ============================ */
.hours-grid {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}

.hours-row {
  display: grid;
  grid-template-columns: 72px 44px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  min-height: 56px;
}

.hours-row:last-child {
  border-bottom: none;
}

.hours-row:hover {
  background: var(--bg-hover);
}

.hours-row.inactive {
  opacity: 0.4;
}

.hours-day {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: var(--transition);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: var(--text-faint);
  border-radius: 50%;
  transition: var(--transition);
}

.toggle-switch input:checked+.toggle-slider {
  background: var(--primary-dim);
  border-color: var(--primary);
}

.toggle-switch input:checked+.toggle-slider::before {
  transform: translateX(16px);
  background: var(--primary);
}

/* Mini calendar in hours panel */
.hours-calendar-section {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  margin-top: 24px;
}

.hours-cal-left {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.hours-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hours-cal-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-main);
}

.hours-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.hours-cal-grid .cal-weekday {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
}

.hours-cal-grid .cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
  position: relative;
  background: var(--bg-main);
  border: 1px solid transparent;
}

.hours-cal-grid .cal-day:hover {
  background: var(--bg-hover);
}

.hours-cal-grid .cal-day.past {
  color: var(--text-faint);
  cursor: default;
}

.hours-cal-grid .cal-day.today {
  border-color: var(--primary);
  font-weight: 700;
}

.hours-cal-grid .cal-day.selected {
  background: var(--primary-dim);
}

.hours-cal-grid .cal-day .dot {
  position: absolute;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.hours-cal-grid .cal-day .dot.open {
  background: #22c55e;
}

.hours-cal-grid .cal-day .dot.closed {
  background: #ef4444;
}

.hours-cal-grid .cal-day .dot.holiday {
  background: #f59e0b;
}

.hours-cal-grid .cal-day .dot.special {
  background: #3b82f6;
}

.hours-cal-legend {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.hours-cal-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.hours-cal-legend .dot.open {
  background: #22c55e;
}

.hours-cal-legend .dot.closed {
  background: #ef4444;
}

.hours-cal-legend .dot.holiday {
  background: #f59e0b;
}

.hours-cal-legend .dot.special {
  background: #3b82f6;
}

.hours-cal-right {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.special-days-list {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.special-day-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-main);
  margin-bottom: 6px;
  font-size: 13px;
}

.special-day-item .sd-date {
  font-weight: 600;
  color: var(--text-main);
  min-width: 90px;
}

.special-day-item .sd-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.special-day-item .sd-badge.closed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.special-day-item .sd-badge.holiday {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.special-day-item .sd-badge.special {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.special-day-item .sd-note {
  color: var(--text-muted);
  flex: 1;
  margin: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.special-day-item button {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 16px;
}

.special-day-item button:hover {
  color: #ef4444;
}

.special-day-form label {
  display: block;
  margin-bottom: 4px;
  margin-top: 10px;
}

/* 860px -> 1024px (Ops #61, breakpoint konsolidasyonu): hedef ölçeğe hizalandı.
   Eşiği yükseltmek yalnızca 1-kolon aralığını genişletiyor — taşma riski yok. */
@media (max-width: 1024px) {
  .hours-calendar-section {
    grid-template-columns: 1fr;
  }
}

.hours-times {
  display: grid;
  grid-template-columns: 110px 110px;
  gap: 12px;
  align-items: center;
  justify-content: start;
  font-size: 13px;
  color: var(--text-muted);
}

.hours-times input[type=time] {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  width: 110px;
  text-align: center;
  height: 36px;
}

.hours-times input[type=time]:focus {
  border-color: var(--primary);
}

#hoursGrid {
  display: grid;
  grid-template-columns: 1fr;
}

.hours-breaks-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  grid-column: 1 / -1;
}

.break-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.break-del {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

.hours-employee-select {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.hours-employee-select .form-select {
  width: auto;
  min-width: 180px;
}

/* ============================
   PANEL 6: MITARBEITER
   ============================ */
.employee-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.emp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-align: center;
  position: relative;
}

.emp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: var(--primary);
}

.emp-card .emp-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.emp-card .emp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.emp-card .emp-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

.emp-card .emp-role {
  font-size: 12px;
  color: var(--text-muted);
}

.emp-card .emp-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
}

.emp-card .emp-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.emp-card .emp-link-text {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: left;
  padding: 4px 8px;
  border: 1px solid var(--primary-dim);
  border-radius: 6px;
  background: var(--primary-dim);
  transition: all var(--transition);
}

.emp-card .emp-link-text:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.my-booking-link {
  display: none;   /* showMyBookingLink() setzt flex */
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.my-booking-label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.my-booking-url {
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* List view fallback */
.employee-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition);
}

.employee-row:hover {
  border-color: var(--border-strong);
}

.employee-row .emp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.employee-row .emp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-info {
  flex: 1;
}

.emp-chevron {
  color: var(--text-faint);
  font-size: 18px;
}

/* Employee detail header avatar */
.emp-detail-header .emp-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border);
}

.emp-detail-header .emp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar upload in employee detail */
.avatar-upload-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-upload-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-link-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.booking-link-wrap .form-input {
  flex: 1;
  background: var(--bg-main);
}

.avatar-remove-btn {
  font-size: 12px;
  color: var(--danger);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
}

.avatar-remove-btn:hover {
  background: var(--danger-dim);
  border-color: var(--danger);
}

/* Cropper modal overrides */
#avatarCropModal .modal-body {
  overflow: hidden;
}

#cropImage {
  max-width: 100%;
  max-height: 50vh;
}

/* Dairesel crop alanı */
.cropper-view-box,
.cropper-face {
  border-radius: 50% !important;
}

.cropper-point {
  background-color: var(--primary) !important;
}

.cropper-line {
  background-color: var(--primary) !important;
}

.invite-card {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.invite-code {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--primary);
  font-family: monospace;
}

.invite-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.invite-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  word-break: break-all;
  line-height: 1.4;
}

.emp-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.emp-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.emp-detail-back {
  font-size: 20px;
  color: var(--text-muted);
  transition: var(--transition);
}

.emp-detail-back:hover {
  color: var(--text-main);
}

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}

.tab-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--text-main);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content {
  display: none;
  padding: 20px;
}

.tab-content.active {
  display: block;
}

.emp-cal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.emp-day-schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}

.emp-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  cursor: pointer;
  transition: var(--transition);
}

.emp-slot:hover {
  border-color: var(--primary);
  background: var(--primary-dim);
}

.emp-slot-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  min-width: 95px;
}

.emp-slot-info {
  flex: 1;
}

.emp-slot-customer {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.emp-slot-service {
  font-size: 12px;
  color: var(--text-muted);
}

.emp-slot-leave {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.07);
}

.emp-slot-leave .emp-slot-time {
  color: #ef4444;
}

.emp-day-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 32px 0;
}

/* ============================
   PANEL 7: B2B
   ============================ */
.b2b-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}

.ai-chat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  height: 520px;
}

.ai-chat-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.msg-bubble.user {
  background: var(--primary-dim);
  color: var(--text-main);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.msg-bubble.ai {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  color: var(--text-main);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.msg-bubble .msg-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.ai-from-badge {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  background: var(--bg-input);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.b2b-setup-card {
  max-width: 520px;
  margin: 40px auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 40px;
  text-align: center;
}

.setup-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.setup-heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
}

.setup-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.setup-fields {
  text-align: left;
  margin-bottom: 24px;
}

.setup-gmail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.setup-gmail-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

.status-dot.connected {
  background: #22c55e;
}

.setup-finish-btn {
  width: 100%;
  justify-content: center;
}

.req {
  color: #ef4444;
}

.b2b-from-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.from-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.from-bar-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.from-bar-sep {
  color: var(--text-muted);
}

.from-bar-email {
  font-size: 13px;
  color: var(--text-muted);
}

.from-bar-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.btn-outline-sm {
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
}

.btn-outline-sm:hover {
  background: var(--primary-dim);
}

.btn-ghost-sm {
  font-size: 12px;
  padding: 4px 10px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.btn-ghost-sm:hover {
  color: var(--primary);
}

.email-compose-window {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  width: min(820px, 94vw);
  height: min(680px, 92vh);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.compose-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-main);
}

.compose-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.compose-meta {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
  flex-shrink: 0;
}

.compose-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
}

.compose-field-row:last-child {
  border-bottom: none;
}

.compose-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 52px;
}

.compose-from-val {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
}

.compose-field-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 13px;
  font-family: inherit;
  padding: 2px 4px;
}

.compose-field-input:focus {
  background: var(--bg-input);
  border-radius: 4px;
}

.compose-body-wrap {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.compose-body {
  flex: 1;
  background: var(--bg-input);
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.7;
  padding: 20px 20px 44px;
  resize: none;
}

.copy-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

.copy-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.copy-btn.copied {
  background: #22c55e33;
  color: var(--primary);
  border-color: var(--primary);
}

.copy-body-btn {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 12px;
  padding: 4px 10px;
}

.compose-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-main);
}

.ai-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.ai-input-row textarea {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  resize: none;
  height: 38px;
  outline: none;
  line-height: 1.4;
}

.ai-input-row textarea:focus {
  border-color: var(--primary);
}

/* ============================
   PANEL 8: EINSTELLUNGEN
   ============================ */
.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}

.settings-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  padding: 11px 20px;
  background: rgba(34, 197, 94, 0.06);
  border-bottom: 1px solid var(--border);
}

/* sections inside a group: no individual card styling */
.settings-group .settings-section {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

/* thin divider between adjacent sections within a group */
.settings-group .settings-section + .settings-section {
  border-top: 1px solid var(--border);
}

/* standalone section (outside a group) keeps card look */
.settings-sections > .settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-section-title {
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.settings-section-body {
  padding: 20px;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary-dim);
  border: 1px solid rgba(34, 197, 94, 0.3);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
}

.settings-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.settings-info-row:last-child {
  border-bottom: none;
}

.settings-info-label {
  font-size: 13px;
  color: var(--text-muted);
}

.settings-info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.integration-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.integration-row:last-child {
  border-bottom: none;
}

.integration-icon {
  font-size: 20px;
}

.integration-info {
  flex: 1;
}

.integration-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.integration-status {
  font-size: 12px;
  color: var(--text-muted);
}

[hidden] {
  display: none !important;
}

.lead-history {
  margin-top: 12px;
}

.lead-hist-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.lead-hist-item {
  font-size: 12px;
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  margin-bottom: 4px;
}

.lead-hist-wa {
  border-left: 3px solid #25d366;
}

.lead-hist-bk {
  border-left: 3px solid var(--primary);
}

.bk-wa-hint {
  font-size: 12px;
  color: #25d366;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 10px;
}

/* ============================
   MODALS
   ============================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.2s ease;
  box-shadow: 0 30px 60px -20px rgba(26, 22, 17, 0.25), 0 8px 16px -4px rgba(26, 22, 17, 0.08);
}

.modal-lg {
  max-width: 640px;
}

.modal-xl {
  max-width: 900px;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.modal-close {
  font-size: 20px;
  color: var(--text-muted);
  line-height: 1;
  padding: 4px;
  transition: var(--transition);
}

.modal-close:hover {
  color: var(--text-main);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.emp-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.emp-result-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emp-result-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.emp-result-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.emp-result-box {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emp-result-row {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.emp-result-label {
  color: var(--text-muted);
  text-align: left;
}

.emp-result-val {
  color: var(--text-main);
  font-weight: 600;
  word-break: break-all;
  text-align: left;
}

/* ============================
   SEARCH PROGRESS (Ärzte / B2B)
   ============================ */
.search-progress-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.search-progress-info {
  font-size: 13px;
  color: var(--text-main);
  white-space: nowrap;
  min-width: 200px;
}

.search-progress-info b {
  color: var(--primary);
}

.search-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-main);
  border-radius: 999px;
  overflow: hidden;
}

.search-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), #4ade80, var(--primary));
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  transition: width .4s ease;
  border-radius: 999px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ============================
   TOAST / SNACKBAR
   ============================ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 13px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 36px -12px rgba(26, 22, 17, 0.2), 0 6px 12px -3px rgba(26, 22, 17, 0.08);
  animation: slideUp 0.2s ease;
  max-width: 340px;
}

.toast.success {
  border-left: 3px solid var(--primary);
}

.toast.error {
  border-left: 3px solid var(--danger);
}

.toast.info {
  border-left: 3px solid var(--info);
}

.toast.warning {
  border-left: 3px solid #e6a817;
  background: color-mix(in srgb, #e6a817 8%, var(--bg-card-solid));
}

/* ── Blanko Budget Card ────────────────────────────────────────────────────── */
.blanko-budget-card {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
}
.blanko-budget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 13px;
}
.ampel-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .02em;
}
.ampel-gruen { background: rgba(34,197,94,.15); color: #16a34a; border: 1px solid rgba(34,197,94,.3); }
.ampel-rot   { background: rgba(239,68,68,.15);  color: #dc2626; border: 1px solid rgba(239,68,68,.3); }
.blanko-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.blanko-bar-label { font-size: 12px; color: var(--text-muted); }
.blanko-bar-track {
  position: relative;
  height: 7px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: visible;
}
.blanko-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
  max-width: 100%;
}
.blanko-bar-threshold {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 13px;
  background: rgba(255,255,255,0.35);
  border-radius: 1px;
}
.blanko-bar-stat { font-size: 12px; font-weight: 600; text-align: right; }

/* ── Messreihen Panel ──────────────────────────────────────────────────────── */
.mess-form-bar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mess-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mess-select  { flex: 0 0 auto; min-width: 140px; font-size: 13px; padding: 6px 10px; }
.mess-wert    { flex: 0 0 72px; font-size: 13px; padding: 6px 10px; }
.mess-datum   { flex: 0 0 160px; font-size: 13px; padding: 6px 10px; }
.mess-notiz   { font-size: 13px; padding: 6px 10px; width: 100%; }
.mess-einheit-hint { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.mess-save-btn { white-space: nowrap; padding: 6px 14px; font-size: 13px; }

.mess-group-block {
  margin-bottom: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.mess-group-block:first-child { border-top: none; padding-top: 0; }
.mess-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.mess-group-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mess-trend { font-size: 12px; font-weight: 600; }
.mess-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }

.mess-chart {
  width: 100%;
  max-width: 100%;
  height: 110px;
  display: block;
  overflow: visible;
}

.mess-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.mess-row {
  display: grid;
  grid-template-columns: 90px 48px 36px 1fr 24px;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mess-date { color: var(--text-muted); }
.mess-val  { font-size: 14px; }
.mess-unit { color: var(--text-muted); font-size: 11px; }
.mess-note { color: var(--text-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mess-del-btn {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 11px; padding: 0;
  opacity: 0.5; transition: opacity .15s;
}
.mess-del-btn:hover { opacity: 1; color: var(--danger); }

/* ============================
   UPGRADE OVERLAY
   ============================ */
.upgrade-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  z-index: 10;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  padding: 40px;
}

.upgrade-overlay h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.upgrade-overlay p {
  font-size: 14px;
  color: var(--text-muted);
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .b2b-layout {
    grid-template-columns: 1fr;
  }

  .ai-chat-card {
    height: 380px;
  }

  .hamburger {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    z-index: 200;
    transform: translateX(-100%);
    /* S5 (30.09.2026): Schatten nur am offenen Menü. Geschlossen lag die Leiste bei
       x -260…0, der Schatten (4 px + 24 px Unschärfe) fiel aber ~28 px in den Inhalt. */
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }

  /* Desktop-Collapse gilt mobil nicht: sonst öffnet der Hamburger eine 0px-Sidebar,
     wenn auf dem Desktop zuvor eingeklappt wurde (localStorage sidebar_collapsed) */
  .sidebar.collapsed {
    width: var(--sidebar-w);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Desktop-Einklapp-Knopf (fixed, left:260px) schwebt mobil mitten im Content */
  #sidebarCollapseBtn {
    display: none !important;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    top: var(--topbar-h);
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    display: none;
  }

  .sidebar-overlay.visible {
    display: block;
  }
}

@media (max-width: 768px) {
  .main-area {
    padding: 16px 16px calc(40px + env(safe-area-inset-bottom));
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-layout {
    overflow: hidden;
    min-height: 0;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .calendar-wrap {
    flex-direction: column;
    height: auto;
  }

  .slot-panel {
    width: 100% !important;
  }

  .slot-panel-inner {
    width: 100%;
    height: auto;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .hours-row {
    grid-template-columns: 100px 44px 1fr;
    gap: 10px;
  }

  .data-table {
    font-size: 12px;
    min-width: 560px;
  }

  .data-table th,
  .data-table td {
    padding: 8px 10px;
  }

  input, select, textarea {
    font-size: 16px !important;
  }

  .upcoming-item {
    grid-template-columns: 70px 1fr auto;
  }

  .upcoming-staff {
    display: none;
  }

  .biz-name {
    display: none;
  }

  /* Telefonda switcher chip flex ile küçülür (ellipsis) — sabit genişlik yerine
     kalan alana uyar, topbar'ı taşırmaz */
  .biz-switcher-current {
    max-width: 100%;
  }

  .biz-switcher-btn {
    padding: 5px 8px;
    font-size: 12px;
  }

  /* Mobilde grid/flex kartlar küçülebilsin → geniş içerik/tablolar paneli yatay taşırmasın */
  .main-area .card {
    min-width: 0;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 0 10px;
  }

  .topbar-right {
    gap: 6px;
  }

  .topbar-left {
    gap: 8px;
    min-width: 0;
  }

  .brand {
    font-size: 15px;
  }

  .live-clock {
    display: none;
  }

  .lang-select {
    padding: 4px 6px;
    font-size: 12px;
  }

  .logout-btn {
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .brand {
    white-space: nowrap;
  }

  #rezeptScanBtn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    margin-right: 0 !important;
    white-space: nowrap;
  }

  /* Telefonda Scan-Button nur als Kamera-Icon — Text passt nicht neben Uhr/Sprache/Abmelden */
  .rezept-scan-label {
    display: none;
  }

  .topbar-right {
    flex-shrink: 0;
  }

  .topbar-admin-link {
    white-space: nowrap;
  }
}

/* 600px kuralı kaldırıldı (Ops #61, breakpoint konsolidasyonu, 2026-09-17):
   ≤1024/≤768'de zaten 2 kolona, ≤480'de zaten 1 koluna düşüyordu — bu kural
   481-600 arasını da 1 kolona zorlayan üçüncü, hedef dışı bir eşikti.
   481-600 aralığında 2 kolonlu KPI grid'in taşmadığı ölçüldü (demo-dashboard
   overview paneli, 520px, archive/denetim/mobile-audit/after/). */

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-bar {
    gap: 4px;
  }

  .filter-btn {
    font-size: 11px;
    padding: 4px 8px;
  }

  .modal {
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .srv-duration-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand {
    font-size: 14px;
  }

  .lang-select {
    padding: 3px 4px;
    font-size: 11px;
  }

  .logout-btn {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Icon-only ist schon ab 768px aktiv (.rezept-scan-label versteckt) —
     hier nur noch kompakteres Padding */
  #rezeptScanBtn {
    padding: 6px 9px !important;
  }

  .topbar {
    padding: 0 8px;
  }

  .topbar-right {
    gap: 4px;
  }

  .topbar-left {
    gap: 6px;
  }
}

/* ============================
   BEISPIELMODUS — 3D Anatomie
   ============================ */
.body-map-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  height: 560px;
}

.body-map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.body-info-card {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.body-info-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--primary);
}

.body-info-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.zygote-fs-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.zygote-fs-btn:hover {
  background: var(--primary-dim);
  color: var(--primary);
}


/* ============================
   PATIENT SEARCH AUTOCOMPLETE
   ============================ */
.patient-search-wrap {
  position: relative;
}

.patient-search-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
  list-style: none;
  padding: 4px 0;
  margin: 0;
}

.patient-search-list li {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
  transition: background var(--transition);
}

.patient-search-list li:hover,
.patient-search-list li.active {
  background: var(--bg-hover);
}

.patient-search-list li .match-hl {
  color: var(--primary);
  font-weight: 600;
}

.patient-search-list .empty-item {
  color: var(--text-faint);
  cursor: default;
}

/* „Heute im Haus" — hochgestufter Patient (module/termin-heute.js).
   Der Name bleibt links buendig, der Hinweis haengt rechts an der Zeile:
   die Liste bleibt so beim Ueberfliegen eine Namensspalte. */
.patient-search-list li .ps-badge {
  float: right;
  margin-left: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.patient-search-list .ps-sep {
  padding: 4px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  cursor: default;
  border-top: 1px solid var(--border);
}

.patient-search-list .ps-sep:hover {
  background: transparent;
}

.patient-search-list .empty-item:hover {
  background: transparent;
}

/* ===== KI-Vorschlag (AI Suggest) Button ===== */
.ai-suggest-wrap {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.ai-suggest-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 60%, #4338ca 100%);
  color: #fff;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
  transition: transform 0.15s, box-shadow 0.2s;
}

.ai-suggest-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.ai-suggest-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
}

.ai-suggest-btn:hover::before {
  transform: translateX(100%);
}

.ai-suggest-btn:active {
  transform: translateY(0);
}

.ai-sparkle {
  font-size: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
  animation: ai-sparkle-pulse 2.4s ease-in-out infinite;
}

@keyframes ai-sparkle-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.18);
    opacity: 0.85;
  }
}

.ai-suggest-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ai-suggest-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.ai-suggest-sub {
  font-size: 11.5px;
  opacity: 0.85;
  line-height: 1.3;
}

.ai-arrow {
  font-size: 22px;
  opacity: 0.85;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.ai-suggest-btn:hover .ai-arrow {
  transform: translateX(4px);
}

/* AI Suggestions modal — slot rows */
#aiSuggestReport {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(67, 56, 202, 0.08) 100%) !important;
  border: 1px solid rgba(124, 58, 237, 0.18);
  position: relative;
  padding-left: 38px !important;
}

#aiSuggestReport::before {
  content: '🤖';
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 18px;
}

.ai-slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.ai-slot-row:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ai-slot-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.ai-slot-main {
  flex: 1;
  min-width: 0;
}

.ai-slot-date {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
}

.ai-slot-emp {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ai-slot-emp.is-switch {
  color: #b45309;
  font-weight: 500;
}

.ai-slot-switch-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #fef3c7;
  color: #b45309;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.patient-search-list .cust-new-item {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card-solid);
  z-index: 1;
}

/* ===== GAPS ===== */
.gaps-section {
  margin-top: 24px;
}

.gaps-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 600;
}

.gaps-total {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  background: var(--bg-card);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.gaps-icon {
  font-size: 1.1rem;
}

.gaps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gap-card {
  background: linear-gradient(135deg, #b8860b, #8b6914);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.gap-card:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.gap-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.gap-card-day {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}

.gap-card-dur {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.gap-card-time {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.gaps-loading {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.gap-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 12px 0;
}

/* ===== FEEDBACK ===== */
.feedback-form h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 16px;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color var(--transition);
}

.feedback-item:hover {
  border-color: var(--border-strong);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.feedback-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
}

.feedback-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.feedback-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.feedback-desc {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.5;
}

.feedback-admin-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--primary-dim);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-main);
}

/* ============================
   RECHNUNGEN
   ============================ */
.inv-totals {
  max-width: 420px;
  margin-left: auto;
}

.inv-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-muted);
}

.inv-total-row span:last-child {
  font-weight: 600;
  color: var(--text-main);
}

.inv-total-row.inv-grand {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-strong);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.inv-line-title {
  min-width: 180px;
}

#invLineTable td {
  padding: 6px 8px;
  vertical-align: middle;
}

#invLineTable input {
  padding: 6px 10px;
}

.inv-booking-checks {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.inv-booking-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

.inv-booking-checks label:hover {
  background: var(--bg-hover);
}

.inv-booking-checks input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.anam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 12px;
}

.anam-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
  color: var(--text-main);
}

.anam-grid label:hover {
  background: var(--bg-hover);
}

.anam-grid input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.anam-other {
  margin-top: 6px;
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-main);
}

.anam-other:focus {
  outline: none;
  border-color: var(--primary);
}

.anam-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.anam-slider-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--primary);
}

.anam-slider-val {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--primary);
}

.anam-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 4px;
}

.anam-radio-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-main);
}

.anam-radio-row input[type="radio"] {
  accent-color: var(--primary);
}

.ov-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
  margin-bottom: 4px;
}

.ov-nav .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ov-nav .btn-icon:disabled {
  opacity: 0.4;
  cursor: default;
}

.ov-nav-label {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 60px;
  text-align: center;
}

/* Übersicht — Mitarbeiter-Anzahl Selector */
.ov-count-selector {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-left: auto;
}

.ov-count-btn {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  min-width: 28px;
  text-align: center;
}

.ov-count-btn:hover { color: var(--text-main); background: var(--bg-hover); }

.ov-count-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
}

/* Zygote Body fallback card */
.zygote-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 320px;
  padding: 48px 24px;
  text-align: center;
}
.zygote-fallback-icon { font-size: 48px; }
.zygote-fallback-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
}
.zygote-fallback-text {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.6;
}
.zygote-fallback-btn {
  margin-top: 8px;
}

.srv-duration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.srv-dur-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}

.srv-dur-card.active {
  border-color: var(--primary);
  background: var(--primary-dim);
}

.srv-dur-card .dur-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.srv-dur-card .dur-min {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.srv-dur-card .dur-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-main);
}

.srv-dur-card .dur-toggle input {
  accent-color: var(--primary);
}

.srv-dur-card .dur-price {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 13px;
  text-align: center;
}

.srv-dur-card:not(.active) .dur-price {
  opacity: 0.4;
  pointer-events: none;
}

.pd-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  background: var(--bg-card);
}

.pd-tab {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.pd-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.pd-content {
  padding: 20px;
  min-height: 300px;
  max-height: 60vh;
  overflow-y: auto;
}

.pd-panel {
  display: none;
}

.pd-panel.active {
  display: block;
}

.pd-loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.pd-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
  font-size: 14px;
}

/* Patientenakte Podologie (module/akte-podo.js, S4 P3): Kopf-Knöpfe und eingezogene Reiter als Abschnitte. */
#pdKopfAktionen:not([hidden]) { display: inline-flex; gap: 6px; }
.pd-abschnitt { border-bottom: 1px solid var(--border); }
.pd-abschnitt > summary { cursor: pointer; padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--text-main); }
/* „Verordnungen": Leer-Hinweis nur, solange die Übersicht keine Karten zeigt. */
#pdVeroUebersicht:not([hidden]) ~ #pdRezLeer { display: none; }

.pd-section {
  margin-bottom: 20px;
}

.pd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pd-text {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.6;
  white-space: pre-wrap;
}

.pd-mail-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--bg-card);
}

.pd-mail-subj {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-main);
  margin-bottom: 4px;
}

.pd-mail-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.pd-mail-body {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.5;
  white-space: pre-wrap;
}

.pd-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.pd-ueber-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: var(--bg-card);
}

.pd-ueber-img {
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.pd-ueber-meta {
  flex: 1;
}

.pd-ueber-row {
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 6px;
}

.pd-ueber-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

.pd-rech-item {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--bg-card);
}

.pd-rech-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.pd-rech-num {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
}

.pd-rech-total {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary);
}

.pd-rech-detail {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.pd-rech-clickable {
  transition: border-color 0.15s, background 0.15s;
}

.pd-rech-clickable:hover {
  border-color: var(--primary);
  background: var(--primary-dim);
}

.pd-term-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--bg-card);
}

.pd-term-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.pd-term-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.pd-term-service {
  font-size: 12px;
  color: var(--text-muted);
}

.bk-home-icon {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 14px;
  z-index: 2;
}

.bk-special-banner {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}

.bk-doc-hint {
  background: #dbeafe;
  border: 1px solid #3b82f6;
  color: #1e40af;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}

.aerzte-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--bg-card);
  font-size: 13px;
}

.aerzte-row button {
  font-size: 12px;
  padding: 3px 8px;
}

@media print {

  .sidebar,
  .topbar,
  .panel-header,
  #invNewBtn,
  .panel-actions,
  #invSaveBtn,
  #invCancelBtn,
  #invAddLineBtn,
  .inv-del-line,
  #anamSaveBtn,
  #anamPrintBtn,
  .hamburger,
  .logout-btn,
  .lang-select,
  .topbar-admin-link {
    display: none !important;
  }

  #app {
    display: block !important;
  }

  .dashboard-layout {
    display: block !important;
  }

  .panel {
    display: none !important;
  }

  #panel-rechnungen {
    display: block !important;
    position: static !important;
  }

  #invEditor {
    display: block !important;
  }

  #invListWrap {
    display: none !important;
  }

  #panel-anamnese {
    display: block !important;
    position: static !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    color: #000 !important;
  }

  .data-table th,
  .data-table td {
    color: #000 !important;
    border-color: #ccc !important;
  }

  .inv-total-row {
    color: #000 !important;
  }

  .inv-total-row span:last-child {
    color: #000 !important;
  }

  .inv-grand {
    color: #000 !important;
  }
}

/* .bk-action-header / -patient / -session sind entfallen: der Patientenname
   stand mitten im Seitenbereich ein zweites Mal. Er steht jetzt einmal oben
   im Suchfeld (#bkActPatSearch). */

.bk-action-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}

#bkActionNoShowBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Phase 3: Printable Invoice / Anamnese ===== */
.invoice-print-card {
  background: #fff;
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 32px;
  max-width: 820px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.invoice-print-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  border-bottom: 2px solid #111;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.invoice-print-biz-name {
  font-size: 22px;
  font-weight: 800;
}

.invoice-print-biz-meta {
  font-size: 13px;
  color: #555;
  margin-top: 4px;
  white-space: pre-line;
}

.invoice-print-meta {
  font-size: 13px;
  text-align: right;
  line-height: 1.6;
}

.invoice-print-section {
  margin-bottom: 20px;
}

.invoice-print-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #555;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #d1d5db;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.invoice-print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.invoice-print-table thead th {
  text-align: left;
  padding: 8px 4px;
  border-bottom: 2px solid #111;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}

.invoice-print-table th.num,
.invoice-print-table td.num {
  text-align: right;
}

.invoice-print-table tbody td {
  padding: 8px 4px;
  border-bottom: 1px solid #e5e7eb;
}

.invoice-print-totals {
  margin-top: 24px;
  margin-left: auto;
  max-width: 360px;
}

.invoice-print-total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid #f3f4f6;
}

.invoice-print-total-row.invoice-print-grand {
  border-bottom: none;
  border-top: 2px solid #111;
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 800;
  font-size: 17px;
}

.invoice-print-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px dashed #d1d5db;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

/* Anamnese print template */
.anamnese-print-card {
  background: #fff;
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 32px;
  max-width: 820px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.anamnese-print-row {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

.anamnese-print-label {
  font-weight: 600;
  min-width: 180px;
  color: #555;
}

.anamnese-print-value {
  flex: 1;
}

/* Print isolation — only print area visible */
@media print {
  body {
    background: #fff !important;
  }

  body * {
    visibility: hidden !important;
  }

  body.printing-area #invoicePrintArea,
  body.printing-area #invoicePrintArea *,
  body.printing-area #anamnesePrintArea,
  body.printing-area #anamnesePrintArea * {
    visibility: visible !important;
  }

  body.printing-area #invoicePrintArea,
  body.printing-area #anamnesePrintArea {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  .no-print {
    display: none !important;
  }
}

/* ===== Phase 3.2: Print template polish (DIN 5008 + multi-page) ===== */
.invoice-print-doctype {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.invoice-print-recipient {
  border: 1px dashed #d1d5db;
  padding: 14px 16px;
  border-radius: 4px;
  margin-bottom: 24px;
  max-width: 60%;
  font-size: 14px;
  line-height: 1.5;
}

.invoice-print-paymentinfo {
  margin-top: 24px;
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
}

.invoice-print-tax-note {
  font-style: italic;
  margin-bottom: 6px;
}

.invoice-print-footer-grid {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #d1d5db;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  font-size: 11px;
  color: #4b5563;
  line-height: 1.5;
}

.invoice-print-footer-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #111;
  margin-bottom: 4px;
  font-size: 10px;
}

.invoice-print-footer-grid>div>div:not(.invoice-print-footer-title) {
  white-space: pre-line;
}

.invoice-print-biz-meta {
  white-space: pre-line;
}

/* Print page setup */
@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {

  body.printing-area #invoicePrintArea,
  body.printing-area #anamnesePrintArea {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  /* Allow tables to flow across pages, keep rows intact */
  .invoice-print-table {
    page-break-inside: auto;
  }

  .invoice-print-table thead {
    display: table-header-group;
  }

  /* repeat header on each page */
  .invoice-print-table tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  .invoice-print-totals,
  .invoice-print-paymentinfo,
  .invoice-print-footer-grid {
    page-break-inside: avoid;
  }

  .invoice-print-recipient {
    page-break-inside: avoid;
  }
}

.ai-slot-shift-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  vertical-align: middle;
  cursor: help;
}

/* ============================================================
   Fahrtenbuch — Hausbesuch info card (bkActionModal)
   Dark theme aware: koyu kart + brand-yeşili accent.
   ============================================================ */
.hb-info-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, var(--bg-card-solid) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.hb-info-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hb-info-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.hb-info-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--primary-dim);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--primary);
}
.hb-info-row { margin-bottom: 6px; }
.hb-info-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.hb-info-value {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-main);
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}
.hb-info-addr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hb-copy-btn {
  font-size: 12px;
  padding: 5px 12px;
  background: var(--bg-input);
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.hb-copy-btn:hover {
  background: var(--primary);
  color: var(--bg-main);
}
.hb-copy-ok {
  font-size: 13px;
  color: var(--primary);
  font-weight: 700;
  display: none;
}
.hb-info-route {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-strong);
}

/* ============================================================
   Patient Detail (Kunden Info) — top info block
   ============================================================ */
#pdInfoBlock {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, var(--bg-card-solid) 100%);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px !important;
}
#pdInfoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}
#pdInfoGrid > div {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  min-width: 0;
}
#pdInfoGrid > div:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12);
  transform: translateY(-1px);
}
#pdInfoGrid > div > div:first-child {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase;
  margin-bottom: 5px;
}
#pdInfoGrid > div > div:nth-child(2) {
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

/* ============================================================
   Fahrtenbuch panel — tabs, filters, tables
   ============================================================ */
#panel-fahrtenbuch .tabs {
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--border) !important;
}
#panel-fahrtenbuch .tab-btn {
  color: var(--text-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}
#panel-fahrtenbuch .tab-btn:hover {
  color: var(--text-main);
}
#panel-fahrtenbuch .tab-btn.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* Filter row card */
.fb-tab > div:first-child {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.fb-tab > div:first-child .form-group {
  margin-bottom: 0 !important;
}
.fb-tab > div:first-child .form-input,
.fb-tab > div:first-child .form-select {
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  padding: 6px 10px;
  min-width: 130px;
}
.fb-tab > div:first-child .form-input::placeholder { color: var(--text-faint); }
.fb-tab > div:first-child .btn-ghost {
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
  font-size: 13px;
}
.fb-tab > div:first-child .btn-ghost:hover {
  background: var(--primary);
  color: var(--bg-main);
  border-color: var(--primary);
}

/* Tables */
#panel-fahrtenbuch .table-wrap {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  overflow-x: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#panel-fahrtenbuch .table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
#panel-fahrtenbuch .table thead th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
}
#panel-fahrtenbuch .table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  vertical-align: middle;
}
#panel-fahrtenbuch .table tbody tr:hover td {
  background: var(--bg-hover);
}
#panel-fahrtenbuch .table tbody tr:last-child td {
  border-bottom: none;
}
#fbFahrtenTable tbody td:nth-child(6),
#fbFahrtenTable tbody td:nth-child(7),
#fbFahrtenTable tbody td:nth-child(8),
#fbFahrtenTable tbody td:nth-child(9) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-weight: 500;
}
#fbFahrtenTable tbody td:nth-child(8) {
  color: var(--primary);
  font-weight: 700;
}
.fb-tab h3 {
  color: var(--text-main);
  font-weight: 600;
  margin-top: 24px !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Vehicle rows */
#fbVehiclesTbody td:nth-child(1) {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--primary);
}
#fbVehiclesTbody .fb-veh-edit {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  color: var(--text-main);
  border-radius: 6px;
  margin-right: 6px;
}
#fbVehiclesTbody .fb-veh-edit:hover {
  background: var(--primary);
  color: var(--bg-main);
  border-color: var(--primary);
}
#fbVehiclesTbody .fb-veh-del {
  background: var(--bg-input);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171 !important;
  border-radius: 6px;
}
#fbVehiclesTbody .fb-veh-del:hover {
  background: #dc2626;
  color: #fff !important;
  border-color: #dc2626;
}

/* Empty state */
#panel-fahrtenbuch .table-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border);
}

/* ============================================================
   Patient Detail Modal — defensive dark theme override
   Catches any nested element that might still have white bg
   (inline styles, third-party widgets, missing rules, etc.)
   ============================================================ */
#patientDetailModal .modal-body {
  background: var(--bg-card-solid);
}
#patientDetailModal .pd-tabs {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}
#patientDetailModal .pd-content {
  background: var(--bg-card-solid);
  color: var(--text-main);
}
#patientDetailModal .pd-content .card,
#patientDetailModal .pd-content .pd-section,
#patientDetailModal .pd-content > div {
  background-color: transparent;
  color: var(--text-main);
}
/* Inline white backgrounds from old templates */
#patientDetailModal [style*="background:#fff"],
#patientDetailModal [style*="background: #fff"],
#patientDetailModal [style*="background:white"],
#patientDetailModal [style*="background: white"],
#patientDetailModal [style*="background-color:#fff"],
#patientDetailModal [style*="background-color: #fff"] {
  background: var(--bg-card-solid) !important;
  color: var(--text-main) !important;
}
#patientDetailModal [style*="color:#000"],
#patientDetailModal [style*="color: #000"],
#patientDetailModal [style*="color:black"] {
  color: var(--text-main) !important;
}
/* Loading spinner blocks should sit on the dark surface */
#patientDetailModal .pd-loading {
  background: transparent;
  padding: 24px 0;
  display: flex;
  justify-content: center;
}

/* Custom icon strip rules for booking slots in Übersicht */
.bk-icon-strip svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* General utility class for standard inline SVG icons */
.svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   TASK C: COMPACT MODE FOR SHORT APPOINTMENTS (duration <= 20m)
   ========================================================================== */

/* Enforce sensible padding and vertical alignment for compact blocks */
.dv-booking-block--compact {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Hide the subtitle details to save precious vertical space */
.dv-booking-block--compact .dv-booking-subtitle {
  display: none !important;
}

/* Restrict padding and enforce strict ellipsis to avoid colliding with icons */
.dv-booking-block--compact .dv-booking-name {
  padding-right: 32px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Center the icon strip vertically in the compact block */
.dv-booking-block--compact .bk-icon-strip {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ==========================================================================
   TASK D: PREMIUM EDITORIAL MICRO-INTERACTIONS
   ========================================================================== */

/* Unified premium micro-transition overrides using consistent ease and duration */
.btn-primary,
.btn-ghost,
.btn-ghost-sm,
.btn-danger,
.btn-icon,
.btn-outline-sm,
.sidebar-item,
.kpi-card,
.schedule-card,
.dv-booking-block,
.ov-week-appt {
  transition: var(--micro-transition) !important;
}

/* 1. BUTTONS & INTERACTIVE ELEMENTS */

/* Subtle vertical lift on hover */
.btn-primary:hover,
.btn-ghost:hover,
.btn-ghost-sm:hover,
.btn-danger:hover,
.btn-icon:hover,
.btn-outline-sm:hover {
  transform: translateY(-1px) !important;
}

/* Responsive, tactile active press state */
.btn-primary:active,
.btn-ghost:active,
.btn-ghost-sm:active,
.btn-danger:active,
.btn-icon:active,
.btn-outline-sm:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 2. SIDEBAR NAVIGATION ITEMS */

/* Refined horizontal slide on hover */
.sidebar-item:hover {
  transform: translateX(3px) !important;
}

/* Tactile press on active navigation click */
.sidebar-item:active {
  transform: translateX(1px) scale(0.99) !important;
}

/* 3. CARDS, PANELS & LIST ROWS */

/* Soft premium shadow and lift for KPI panels */
.kpi-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 8px 20px -4px rgba(26, 22, 17, 0.08) !important;
}

/* Gentle lift and premium shadow for calendar grid blocks */
.dv-booking-block:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
  z-index: 10 !important;
  box-shadow: 0 4px 12px rgba(26, 22, 17, 0.12) !important;
}

/* Precise subtle lift + shadow for week list items */
.ov-week-appt:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(26, 22, 17, 0.08) !important;
}

/* 4. ACCESSIBLE KEYBOARD FOCUS INDICATORS */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost-sm:focus-visible,
.btn-outline-sm:focus-visible,
.sidebar-item:focus-visible,
.dv-booking-block:focus-visible,
.ov-week-appt:focus-visible,
.schedule-card:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--primary-dim) !important;
}

/* 5. GENTLE PAGELOAD ENTRANCE ANIMATION */
@keyframes subtleEntrance {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kpi-card,
.schedule-card {
  animation: subtleEntrance 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) forwards !important;
}

/* 6. REDUCED MOTION ACCESSIBILITY CONSTRAINTS (HARD CONSTRAINT) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transition: none !important;
    transform: none !important;
  }
  
  .kpi-card,
  .schedule-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Theme toggle button (topbar) ===== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  margin-right: 8px;
  transition: var(--micro-transition);
}
.theme-toggle:hover {
  color: var(--text-main);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { display: block; }
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle:active { transform: none !important; }
}

/* ===== 302 Wizard Styles ===== */
.wizard-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.wizard-nav::-webkit-scrollbar {
  display: none;
}
.wiz-btn {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wiz-btn:hover {
  color: var(--text-main);
  background: var(--bg-hover);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.wiz-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.wiz-btn .svg-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  stroke: currentColor;
}
.wizard-panel {
  animation: subtleEntrance 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.wizard-panel[hidden] {
  display: none !important;
}

/* Preflight checks */
.preflight-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card-solid);
  padding: 16px;
  margin-bottom: 16px;
}
.preflight-group-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.preflight-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background 0.15s ease;
}
.preflight-check-item.success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--text-main);
}
.preflight-check-item.warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--text-main);
}
.preflight-check-item.error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--text-main);
}
.preflight-check-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
  stroke: currentColor;
}
.preflight-check-icon.success { color: #22c55e; }
.preflight-check-icon.warning { color: #f59e0b; }
.preflight-check-icon.error { color: #ef4444; }

.preflight-summary-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  margin-top: 16px;
}



/* ===== Vorlagen Panel Cards ===== */
.vorlage-card {
  border: 1px solid var(--border, #374151);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card-solid, #1f2937);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}
.vorlage-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.vorlage-preview {
  position: relative;
  width: 100%;
  height: 165px;
  background: #f9fafb;
  overflow: hidden;
  cursor: pointer;
}
.vorlage-card-footer {
  padding: 10px 12px 12px;
}
.vorlage-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main, #f9fafb);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vorlage-card-type {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 8px;
}
.vorlage-default-badge {
  background: rgba(177,137,27,0.2);
  color: var(--accent, #b1891b);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
}
.vorlage-card-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.btn-sm {
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* ===== Month Grid View (Kalender → Monat) ===== */
.month-grid-wrap { margin-top: 8px; }
.month-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.month-cell {
  min-height: 80px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
  background: var(--bg-card-solid);
  border: 1px solid transparent;
  /* Der Doppelklick legt hier einen Termin an — ohne das markiert er die
     Tageszahl. */
  user-select: none;
}
.month-cell:hover { border-color: var(--border); }
.month-cell--today { border-color: var(--primary) !important; }
.month-cell--other-month { opacity: 0.35; }
.month-cell--today .month-cell-day { color: var(--primary); font-weight: 700; }
.month-cell-day {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.month-absent-badge {
  font-size: 9px;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.15);
  border-radius: 3px;
  padding: 1px 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.month-cell-events { display: flex; flex-wrap: wrap; gap: 2px; }
.month-event-pill {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

/* ── Termin-Anfragen Panel ─────────────────────────────────────── */
.anfragen-list { display: flex; flex-direction: column; gap: 12px; }

.anfragen-card {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.anfragen-card:hover { border-color: var(--primary); }

.anfragen-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.anfragen-card-patient { display: flex; flex-direction: column; gap: 2px; }
.anfragen-card-patient strong { color: var(--text-main); font-size: 14px; font-weight: 600; }
.anfragen-card-patient .text-sub { font-size: 12px; color: var(--text-sub); }

.anfragen-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; letter-spacing: 0.04em; white-space: nowrap;
}

.anfragen-card-info { font-size: 13px; color: var(--text-sub); margin-bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.anfragen-card-footer { display: flex; justify-content: space-between; align-items: center; }
.anfragen-card-actions { display: flex; gap: 8px; }

.btn-sm { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 5px; }
.btn-success { background: rgba(5,150,105,0.15); color: #059669; border: 1px solid rgba(5,150,105,0.3); }
.btn-success:hover { background: rgba(5,150,105,0.25); }
.btn-danger  { background: rgba(220,38,38,0.12); color: #dc2626; border: 1px solid rgba(220,38,38,0.25); }
.btn-danger:hover { background: rgba(220,38,38,0.22); }

.anfragen-tabs .tab-btn.active { background: var(--primary); color: #fff; }

.anfragen-detail { display: flex; flex-direction: column; gap: 10px; }
.detail-row { display: flex; gap: 12px; font-size: 14px; }
.detail-label { color: var(--text-sub); min-width: 140px; flex-shrink: 0; }

/* Nav badge for anfragen */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger, #dc2626); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 5px; margin-left: 6px; line-height: 1;
}


/* ── ICD-10 Autocomplete Dropdown ─────────────────────────────────────────── */
/* Attached to <body> at fixed position so it escapes overflow:hidden modals.
   Position/size are set via JS (getBoundingClientRect). z-index > modal-overlay (1000). */
.icd10-dropdown {
  position: fixed;
  z-index: 1200;
  background: var(--bg-card-solid, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  /* ~12 Zeilen statt ~9 — bei 155 podologischen E-Kodes zählt jede sichtbare Zeile. */
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.icd10-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-main, #f1f5f9);
  font-size: 13px;
  display: flex;
  gap: 8px;
}
.icd10-dropdown-item .icd-code {
  color: var(--accent, #b1891b);
  font-weight: 600;
  min-width: 60px;
}
.icd10-dropdown-item:hover,
.icd10-dropdown-item.active { background: var(--bg-hover, #334155); }
.icd10-dropdown-item .icd-title { flex: 1; min-width: 0; }
/* Heilmittelkatalog-Diagnosegruppen (DF, NF, QF, UI1, WS2, EN1, SP6 …) */
.icd10-dropdown-item.is-dg .icd-code { color: var(--success, #22c55e); }
.icd10-dropdown-item .icd-badge {
  flex-shrink: 0;
  align-self: center;
  font-size: 10px;
  letter-spacing: .02em;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--bg-hover, #334155);
  color: var(--text-muted, #94a3b8);
}
/* Separator before results outside the practice's own Fachbereich */
.icd10-dropdown-sep {
  padding: 6px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-card, #0f172a);
  border-top: 1px solid var(--border, #334155);
  position: sticky;
  top: 0;
}

/* ── Digitale Fußbefund-Karte (Panel) ───────────────────────────────── */
.fbp-card-container {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1200px) {
  .fbp-card-container {
    grid-template-columns: 1fr;
  }
}

.fbp-paper-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}

.fbp-section {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.fbp-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fbp-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fbp-grid-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.fbp-grid-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}

.fbp-toe-group {
  display: flex;
  gap: 3px;
}

.fbp-toe-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.fbp-toe-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.fbp-toe-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.fbp-outline {
  fill: var(--bg-card-solid);
  stroke: var(--text-muted);
  stroke-width: 2.5;
}

.fbp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.fbp-tool-btn, .fbp-color-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fbp-tool-btn.active, .fbp-color-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim, rgba(59, 130, 246, 0.2));
}

.fbp-skin{fill:url(#fbpSole);stroke:#94a3b8;stroke-width:2;}
.fbp-skin2{fill:url(#fbpTop);stroke:#94a3b8;stroke-width:2;}
.fbp-nail{fill:#e8eef5;stroke:#94a3b8;stroke-width:1.1;}
.fbp-cline{fill:none;stroke:#b8c2cf;stroke-width:1.3;opacity:.7;}



/* ── Termin-Seitenbereich (#bkActionModal) ──────────────────────────────────
   Feste 440 px sind auf dem Telefon breiter als der Bildschirm; zusätzlich
   bekam #mainArea ein padding-right in derselben Größe, wodurch der Inhalt aus
   dem Bild geschoben wurde. Auf schmalen Geräten läuft das Panel deshalb als Vollbild-
   Sheet und der Inhalt dahinter bekommt keinen Versatz mehr. */
@media (max-width: 768px) {
  #bkActionModal {
    width: 100% !important;
    left: 0;
    top: 56px;
    border-left: 0;
    box-shadow: 0 -2px 24px rgba(0,0,0,.45);
  }
  /* S5 (30.09.2026): vorher 0 — damit klebte JEDER Inhalt am rechten Rand (Karten,
     Speichern-Knöpfe). Der Wert entspricht dem mobilen padding von .main-area;
     !important bleibt nötig, weil dashboard.js beim Öffnen des Seitenbereichs
     padding-right: 456px inline setzt (BK_PANEL_OFFSET). */
  #mainArea { padding-right: 16px !important; }
  #calMainWrap { padding-right: 0 !important; }
}

/* ── Ärzte-Register (module/arzt-register.js) ─────────────────────────────
   Das „+" neben einem Arzt-Feld. Es sitzt in einem Flex-Wrapper, den das
   Modul um das Eingabefeld legt — in der Muster-13-Nachbildung wäre eine
   absolute Positionierung über den Rand des Formulars gelaufen. */
.arzt-plus-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.arzt-plus-wrap > input {
  flex: 1;
  min-width: 0;
}
.arzt-plus-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card-solid);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
/* `--accent` ist im Blatt nicht definiert; der Rest der Datei nutzt es
   ausschließlich mit Rückfallwert. Ohne den bliebe der Hover farblos. */
.arzt-plus-btn:hover {
  border-color: var(--accent, #b1891b);
  color: var(--accent, #b1891b);
}

.arzt-register-table td.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.arzt-register-table tbody tr.arzt-zeile {
  cursor: pointer;
}
.arzt-register-table tbody tr.arzt-zeile:hover {
  background: var(--bg-hover, rgba(127, 127, 127, .08));
}
/* Die Knöpfe sollen die Zeile nicht breiter machen als nötig. */
.arzt-register-table td.arzt-zeile-aktionen {
  white-space: nowrap;
  text-align: right;
}

.arzt-detail-summe {
  margin: 0 0 14px;
  color: var(--text-main);
}
.arzt-detail-h {
  margin: 20px 0 8px;
  font-size: 14px;
  color: var(--text-main);
}

/* ── Kontextmenü auf Terminen ──────────────────────────────────────────────
   Gehört zu module/kalender-kontextmenue.js. Hängt an <body> und nicht im
   Kalender, sonst schneidet dessen `overflow: hidden` es ab.
   z-index bewusst unter 1000 (.modal-overlay): das Menü schliesst, bevor ein
   Dialog aufgeht — es soll nie über einem liegen. */
.kal-kontextmenue {
  position: fixed;
  z-index: 900;
  min-width: 214px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.kal-kontextmenue-eintrag {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
  color: var(--text-main);
  cursor: pointer;
}

.kal-kontextmenue-eintrag:hover:not(:disabled),
.kal-kontextmenue-eintrag:focus-visible {
  background: var(--bg-card);
  outline: none;
}

/* Nicht ausblenden, nur abblenden: ein Menü, dessen Einträge je nach Termin
   die Plätze tauschen, trifft man nicht mehr blind. */
.kal-kontextmenue-eintrag:disabled {
  opacity: 0.4;
  cursor: default;
}

.kal-kontextmenue-eintrag--gefahr {
  color: var(--danger);
}

.kal-kontextmenue-trenner {
  height: 1px;
  margin: 4px 2px;
  background: var(--border);
}

/* ── Farbwahl in der Leistungsmaske ────────────────────────────────────────
   Gehört zu module/leistung-farbwahl.js. Die acht Vorschläge sind Datenfarben
   (sie landen in services.color), deshalb hier bewusst keine Theme-Variablen —
   Rahmen und Fokus dagegen schon. */
.srv-farbwahl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.srv-farbfelder {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.srv-farbfeld {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
}

.srv-farbfeld:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Der Rahmen sitzt aussen, damit die Farbe selbst nicht kleiner wird. */
.srv-farbfeld--aktiv {
  border-color: var(--text-main);
  box-shadow: 0 0 0 2px var(--bg-card-solid) inset;
}

.srv-farbe-eigen {
  width: 42px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card-solid);
  cursor: pointer;
}

/* Zeigt in der Leistungsübersicht, welche Farbe die Leistung im Kalender hat.
   Ohne das müsste man jede Leistung öffnen, um die Farbe zu sehen. */
.srv-farbpunkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: baseline;
  flex-shrink: 0;
}

/* ── "Mehr Optionen" in der Terminmaske ────────────────────────────────────
   Notizen, Serientermin und Hausbesuch waren immer sichtbar. Für den häufigen
   Fall — Patient, Leistung, Zeit — war die Maske dadurch dreimal so lang wie
   nötig. <details> statt eigener Klapp-Logik: Tastatur und Vorlesesoftware
   können das von Haus aus. */
.bk-mehr {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.bk-mehr-titel {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 2px;
  list-style: none;
  user-select: none;
}

.bk-mehr-titel::-webkit-details-marker {
  display: none;
}

.bk-mehr-titel::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.bk-mehr[open] > .bk-mehr-titel::before {
  transform: rotate(90deg);
}

.bk-mehr-titel:hover {
  color: var(--text-main);
}

/* Kompaktere Abstände in der Grundmaske des Termindialogs. Bewusst nur dort und
   nicht an .form-group global — sonst ändert sich jede Maske im Produkt. */
#bookingModal .modal-body > .form-group {
  margin-bottom: 10px;
}

#bookingModal .modal-body > .form-row {
  margin-bottom: 10px;
}

#bookingModal .form-label {
  margin-bottom: 3px;
}

/* ── Leistungsübersicht als Tabelle ────────────────────────────────────────
   module/leistungen-liste.js. Ersetzt die Kachelwand; gruppiert nach
   Kostenträgertyp (GKV · Privat · Selbstzahler · BG · Intern). */
.srv-liste-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.srv-liste-anzahl {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: auto;
}

.srv-leer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
}

.srv-gruppe {
  margin-bottom: 22px;
}

.srv-gruppe-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.srv-gruppe-kopf h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.srv-gruppe-hinweis {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: auto;
}

.srv-gruppe-zahl {
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
}

/* Die Tabelle darf schmal werden, ohne die Seite waagerecht zu schieben —
   sie scrollt in ihrem eigenen Kasten. */
.srv-gruppe {
  overflow-x: auto;
}

.srv-tabelle {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
}

.srv-tabelle th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.srv-tabelle td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  color: var(--text-main);
  vertical-align: middle;
}

.srv-tabelle tbody tr {
  cursor: pointer;
}

.srv-tabelle tbody tr:hover,
.srv-tabelle tbody tr:focus-visible {
  background: var(--bg-card-solid);
  outline: none;
}

.srv-td-name {
  font-weight: 600;
  white-space: nowrap;
}

.srv-td-emp {
  color: var(--text-muted);
  max-width: 220px;
}

.srv-td-akt {
  width: 1%;
  text-align: right;
}

/* „Alle" statt leer: eine leere Zelle liest sich wie „niemand darf das". */
.srv-alle {
  font-style: italic;
  opacity: 0.75;
}

/* Nur für Vorlesesoftware sichtbar. */
.srv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hinweis unter dem Anzahl-Feld der Terminmaske. */
.bk-anzahl-hinweis {
  font-size: 12px;
  color: var(--text-muted);
  margin: -4px 0 8px;
}

/* GKV-Katalog als Tabelle (module/leistungen-liste.js). Der Hinweis steht in
   einer eigenen Zeile darunter statt in der Karte — er trägt Abrechnungsregeln
   und bleibt deshalb auch nach dem Einrichten sichtbar. */
.gkv-hinweis-zeile td {
  padding-top: 0;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.gkv-zeile--aktiv .srv-td-name::after {
  content: '✓';
  margin-left: 8px;
  color: var(--success, #22c55e);
  font-weight: 700;
}

/* Bundeseinheitlich festgelegte Dauer — nicht verhandelbar, also nicht wie ein
   frei wählbarer Wert aussehen lassen. */
.gkv-td-fix {
  color: var(--text-muted);
}

/* Umschalter „Unvergebene / Termine" im Block „Aktive Verordnung" des
   Seitenbereichs. Er ersetzt die zwei Spalten, in denen der Heilmittelname
   nie ganz passte — Logik in module/sitzungen-ansicht.js.

   Beide Knöpfe teilen sich die Breite (flex:1), damit der Umschalter beim
   Wechseln nicht springt: „Unvergebene (12)" und „Termine (2)" sind
   unterschiedlich lang, und eine wandernde Trennlinie liest sich wie ein
   Fehler. */
.bk-sitz-tab {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.bk-sitz-tab:hover {
  color: var(--text-main);
  border-color: var(--text-muted);
}

.bk-sitz-tab.is-active {
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.14);
  border-color: var(--primary);
  color: var(--text-main);
}

.bk-sitz-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Unvergebene Einheit, die durch einen Ausfall wieder frei geworden ist.
   Ops-Karte a8186cb8 — Kemal, 31.08.2026: „soll sich zu [den] unvergebenen
   Terminen mit einer roten Markierung bewegen, dass man das auch sieht."

   Ohne diese Markierung steht eine ausgefallene Einheit als dieselbe graue
   Zeile da wie eine, die noch nie vergeben war. Genau die eine, für die die
   Praxis anrufen und einen Nachholtermin geben muss, ist dann nicht zu finden.

   Farbe über `--danger`/`--danger-dim` (dieselbe Achse wie der Ausfall im
   Kalender und in der Patientenakte, module/kalender-farben.js) — hell/dunkel
   passt sich mit an, hartkodiert ist hier verboten (CLAUDE.md). Das genaue
   Datum steht im `title`; hier nur das Wort, sonst bricht die Zeile im
   schmalen Seitenbereich um. */
.rx-unv-item--ausgefallen {
  border-color: var(--danger) !important;
  background: var(--danger-dim) !important;
}

.rx-unv-item--ausgefallen::after {
  content: "ausgefallen";
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger-dim);
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ============================================================
   Termin-Aktionen — Aktionsleiste (Konsey 30.09.2026, Podologie-Reform S4)
   Hoechstens sechs sichtbare Handlungen + „Weitere Aktionen …".
   Zwei Spalten; jeder Knopf mindestens 44 px hoch (Hausbesuch: Tablet/Handy).
   Farben nur ueber Theme-Variablen.
   ============================================================ */
.bk-akt-leiste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.bk-akt-btn {
  min-height: 44px;
  width: 100%;
  justify-content: center;
  font-size: 13px;
}
.bk-akt-btn.btn-ghost { color: var(--text-main); }
.bk-akt-btn[hidden] { display: none; }
/* Nicht erschienen + Ausfallrechnung + „Doch behandelt": eine Zelle. */
.bk-akt-noshow { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bk-akt-noshow[hidden] { display: none; }
/* Nach No-Show tritt der Ersatz an die Stelle von „Nicht erschienen" und nimmt die volle Breite. */
.bk-akt-noshow:has(#bkActionKorrekturBtn:not([hidden])),
.bk-akt-noshow:has(#bkActionAusfallBtn:not([hidden])) { grid-column: 1 / -1; }
.bk-akt-noshow:has(#bkActionKorrekturBtn:not([hidden])) #bkActionNoShowBtn,
.bk-akt-noshow:has(#bkActionAusfallBtn:not([hidden])) #bkActionNoShowBtn { display: none; }
.bk-akt-mehr { grid-column: 1 / -1; min-height: 44px; color: var(--text-muted); }
.bk-akt-mehr[aria-expanded="true"] { border-color: var(--border-strong); color: var(--text-main); }
.bk-akt-menue {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card-solid);
}
.bk-akt-menue[hidden],
.bk-akt-mehr[hidden] + .bk-akt-menue { display: none; }
.bk-akt-menue .bk-akt-btn { justify-content: flex-start; padding-left: 12px; }
.bk-akt-btn.bk-akt-blitz { outline: 2px solid var(--accent, #b1891b); outline-offset: 2px; }

/* ── Anamnese je Fachbereich (30.09.2026): Formular, Kopfzeile, Rozets ─────────────
   Nur Themenvariablen — kein festes Weiss/Grau (Dark-Theme). */
.anam-entwurf {
  margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--warning-text, var(--text-main)); background: var(--warning-dim, var(--bg-card-solid));
  border: 1px solid var(--warning, var(--border));
}
.anam-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card-solid); color: var(--text-main); font-size: 13px;
}
.anam-kopf-aktionen { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.anam-dyn .anf-feld { margin-top: 14px; }
.anam-dyn .anf-feld:first-child { margin-top: 0; }
.anam-dyn .anf-unter { margin-left: 16px; padding-left: 12px; border-left: 2px solid var(--border); }
.anam-dyn .anf-stern { color: var(--danger); font-weight: 700; }
.anam-dyn .anf-hinweis { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.anam-dyn .anf-vorschlag {
  margin-top: 6px; padding: 6px 10px; border-radius: 6px; font-size: 12px;
  background: var(--warning-dim, var(--bg-card-solid)); color: var(--text-main); border: 1px dashed var(--warning, var(--border));
}
.anam-dyn .anf-fehler { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--danger); }
.anam-dyn .anam-radio-row label, .anam-dyn .anam-grid label { min-height: 36px; }
#kioskOverlay .anam-dyn .anam-radio-row label, #kioskOverlay .anam-dyn .anam-grid label { min-height: 48px; font-size: 16px; }
#kioskOverlay .anam-dyn .anam-radio-row input, #kioskOverlay .anam-dyn .anam-grid input { width: 22px; height: 22px; }
#kioskOverlay .anam-dyn .anam-grid { grid-template-columns: 1fr; }
.anam-rozets { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; }
.anam-rozet {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.anam-rozet--rot { color: var(--danger); background: var(--danger-dim, transparent); border-color: var(--danger); }
.anam-rozet--orange { color: var(--warning-text, var(--warning)); background: var(--warning-dim, transparent); border-color: var(--warning); }
.anam-rozet--mehr { color: var(--text-muted); background: var(--bg-card-solid); border-color: var(--border); }
.anam-rozet-ungeprueft {
  font-size: 11px; font-style: italic; color: var(--text-muted); background: none; border: 1px dashed var(--border);
  border-radius: 999px; padding: 1px 8px; cursor: default;
}
button.anam-rozet-ungeprueft { cursor: pointer; }
button.anam-rozet-ungeprueft:hover { color: var(--text-main); border-color: var(--text-muted); }
/* „Ablauf abbrechen?" der Einwilligung (99999) und der PIN-Modal des Kiosk (100000) müssen die Rückfrage sehen können */
#confirmModal { z-index: 100001; }

/* ============================================================
   S5 · Mobil / Tablet (Podologie-Reform, 30.09.2026) — nur Layout
   Gemessen mit Playwright bei 360/375/390/768/1024/1280/1440 (archive/denetim/
   mobile-audit/before|after/s5-*). Stufen der bestehenden Skala:
   1024 (Tablet quer, Berührung) · 768 (Tablet hoch) · 480 (Telefon).
   Mehrere Regeln brauchen !important, weil die Module ihr Layout als
   style="" ins Markup schreiben (fussbefund.js, podologie-abrechnung.js)
   — ohne JS-Änderung lässt sich ein Inline-Stil nur so überstimmen.
   ============================================================ */

/* Buchungskonten (module/buchungskonten.js): Zeile darf umbrechen. Das
   Bezeichnungsfeld hatte min-width:auto (≈180 px Eigenbreite), dadurch lief
   „×" bei jeder Breite unter ~900 px aus der Karte. Am Desktop passt die
   Zeile weiter in eine Reihe (gemessen 1280 px: unverändert einzeilig). */
#setKontenList > div { flex-wrap: wrap; }
#setKontenList .konto-label { min-width: 120px; }
#setKontenList .btn-danger { margin-left: auto; }

/* Patientenakte: die Reiterleiste scrollt selbst, statt das ganze Modal
   quer scrollen zu lassen (vorher 593 px Inhalt in 373 px). Am Desktop
   passt die Leiste — overflow wirkt dort nicht. */
.pd-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.pd-tab { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 1024px) {
  /* Tablet/Telefon: Schließen-Kreuz ≥44×44 (vorher 24×28). */
  .modal-close,
  #bkActionModal .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Akte-Kopf „+ Termin" / „+ Verordnung": vorher 21 px hoch. */
  #pdKopfAktionen { display: inline-flex; flex-wrap: wrap; gap: 8px; }
  #pdKopfAktionen[hidden] { display: none; }
  #pdKopfAktionen .btn-sm { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .pd-tab { min-height: 44px; }

  /* Termin-Aktionen: Ziele ≥44 px … */
  #bkDetailEditBtn { min-height: 44px; padding: 0 12px !important; /* Inline padding 2px 8px */ }
  #bkActPatSearch { min-height: 44px; }
  #bkActionStartBtn,
  #bkActionFahrtStartBtn,
  #bkActionArrivedBtn,
  #bkActionFahrtEndBtn { min-height: 44px; }
  /* … und Abstand um die zerstörenden Knöpfe: „Nicht erschienen" lag 8 px
     neben „Folgetermin"/„Verschieben"/„Weitere", „Absagen" 6 px über
     „Termine drucken". Jetzt jeweils ≥16 px. */
  #bkActionNoShowGroup { margin: 8px 0; }
  .bk-akt-leiste:has(#bkActionFolgeBtn[hidden]) #bkActionNoShowGroup { margin-left: 8px; }
  #bkActionDeleteBtn { margin-bottom: 10px; }

  /* Buchungskonten: „×" (Konto entfernen) war 25×23. */
  #setKontenList .btn-danger { min-width: 44px; min-height: 44px; justify-content: center; }

  /* Behandlungen / Fußbefund: Speichern-Wege ≥44 px. fbp-Knöpfe haben
     height:38px inline → !important. „Status" in der Verordnungsliste war 21 px. */
  #fbpNewBtn,
  #fbpSaveBtn { height: 44px !important; }
  #podSaveBehBtn { min-height: 44px; }
  .pod-vord-status { min-height: 44px; }

  /* Termin-Aktionen · Rezeptinfo + Einheiten (S5-Nachtrag, 30.09.2026):
     vorher 13–34 px hoch (canli-test 390/768; lokal nachgemessen). Die
     Knöpfe tragen ihr Aussehen inline (padding/height) — min-height/min-width
     gewinnen gegen height/width ohne !important. */
  #bkRxNav button,                          /* ‹ › 18×18, „⧉ übernehmen" 94×17 */
  #bkRxZuzahlungWarn button[data-zuzahl] {  /* Kassieren · € 🖨 · ✎ anpassen · Rechnung · Rückgängig */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
  #bkRxNav button { flex-shrink: 0; white-space: nowrap; }
  /* Kopfzeile darf umbrechen: mit 44-px-Knöpfen ragte der Status bei 360 px
     9 px aus der Karte (overflow:hidden → abgeschnitten). */
  #bkRxInfoCard > div:first-child { flex-wrap: wrap; gap: 4px 8px; }
  #bkRxZuzahlungWarn { line-height: 1.4; }
  #bkRxEuroBtn { min-width: 44px; min-height: 44px; }  /* inline 34×34 */
  #bkRxSerieBtn,
  #bkRxLeistungenBtn,
  .bk-sitz-tab,
  .pk-verlauf-zeile { min-height: 44px; }

  /* „＋ Verordnung anlegen" (module/termin-verordnung.js): Inline-Padding 7 px → ~30 px hoch. */
  .bk-vero-anlegen { min-height: 44px; }
}

@media (max-width: 768px) {
  /* Behandlungen (podologie-abrechnung.js): Verordnungsliste und
     Tagesbehandlung untereinander statt 2×170 px; „Behandlung speichern"
     lag bei 375 px bei x 225–407. Inline-Stil → !important. */
  #podBillingContent > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Tagesbehandlung zuerst: die Erfassung ist die Hauptaufgabe, die Verordnungsliste
     (links im Markup) steht am Desktop schon links — auf dem Telefon kam sie vor dem
     Formular und schob „Behandlung speichern" weit nach unten (S5, 01.10.2026). */
  #podBillingContent > div[style*="grid-template-columns"] > #podBehPanel { order: -1; }

  /* Tagesansicht-Karte: Uhrzeit (≈75 px) und Name in einer nowrap-Zeile
     ließen dem Namen 47 px („Muster…"). Name bekommt die zweite Zeile.
     Kurztermine (--compact, ≤20 min) bleiben einzeilig — dort fehlt die Höhe. */
  .day-view-grid .dv-booking-block:not(.dv-booking-block--compact) { padding: 4px 6px; }
  .day-view-grid .dv-booking-block:not(.dv-booking-block--compact) .dv-booking-name {
    flex-wrap: wrap;
    row-gap: 0 !important; /* inline gap:5px gilt sonst auch zwischen den Zeilen (+5 px, Untertitel abgeschnitten) */
  }
  .day-view-grid .dv-booking-block:not(.dv-booking-block--compact) .dv-booking-name > span:not(.dv-booking-time) {
    max-width: 100%;
    min-width: 0;
  }
}

/* Fußbefund-Karte (module/fussbefund.js) richtet sich nach IHRER Breite, nicht
   nach dem Bildschirm: dieselbe Karte steht allein im Panel (#fussstatusContent)
   und eingebettet in der Tagesbehandlung (#podFussbefundHost, ~436 px auch am
   Desktop). Vorher war 1fr = min-content (≈506 px): bei 375 px lag „Rechts"
   bei x 419–484, eingebettet musste man bei 1024/1280 px quer scrollen. */
#fussstatusContent,
#podFussbefundHost { container: fbp / inline-size; }

@container fbp (max-width: 900px) {
  .fbp-card-container { grid-template-columns: minmax(0, 1fr); }
}

@container fbp (max-width: 560px) {
  /* weniger Innenabstand, damit zwei Zehenreihen nebeneinander passen */
  .fbp-paper-card { padding: 12px; gap: 14px; }
  .fbp-section { padding: 10px; }

  /* Fußdiagramme: Inline-Raster minmax(300px, 1fr) ist breiter als der Platz. */
  .fbp-section > div[style*="minmax(300px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Zehen & Nägel: Befund über die volle Breite, darunter Links | Rechts.
     Die Kopfzeile behält „Links (Zehe 1–5)" / „Rechts (Zehe 1–5)" über den
     Spalten. th-Breiten (150 px) stehen inline → !important. */
  .fbp-grid-table:has(.fbp-toe-group),
  .fbp-grid-table:has(.fbp-toe-group) thead,
  .fbp-grid-table:has(.fbp-toe-group) tbody { display: block; }
  .fbp-grid-table:has(.fbp-toe-group) tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--border);
  }
  .fbp-grid-table:has(.fbp-toe-group) th,
  .fbp-grid-table:has(.fbp-toe-group) td {
    width: auto !important;
    padding: 6px 4px;
    border-bottom: 0;
  }
  .fbp-grid-table:has(.fbp-toe-group) thead th:first-child { display: none; }
  .fbp-grid-table:has(.fbp-toe-group) tbody td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 0;
    font-weight: 600;
  }
  .fbp-toe-group { gap: 2px; flex-wrap: wrap; }
}

/* Fußbefund · Zehen & Nägel auf dem Telefon (S5, 01.10.2026): Zehenknöpfe 44 px
   (Desktop 26 px bleibt). Zwei Füße passen bei 5×44 px nicht nebeneinander —
   Links und Rechts stehen untereinander, jede Zeile trägt ihre eigene Beschriftung
   (die Kopfzeile „Links | Rechts" entfällt, sie stünde nicht mehr über den Spalten). */
@media (max-width: 480px) {
  .fbp-toe-btn { width: 44px; height: 44px; font-size: 14px; }
  .fbp-toe-group { gap: 4px; }
  .fbp-grid-table:has(.fbp-toe-group) thead { display: none; }
  .fbp-grid-table:has(.fbp-toe-group) tr { grid-template-columns: minmax(0, 1fr); }
  .fbp-grid-table:has(.fbp-toe-group) tbody td:not(:first-child) { padding: 4px 4px 8px; }
  .fbp-grid-table:has(.fbp-toe-group) tbody td:nth-child(2)::before,
  .fbp-grid-table:has(.fbp-toe-group) tbody td:nth-child(3)::before {
    display: block;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  .fbp-grid-table:has(.fbp-toe-group) tbody td:nth-child(2)::before { content: 'Links'; }
  .fbp-grid-table:has(.fbp-toe-group) tbody td:nth-child(3)::before { content: 'Rechts'; }
}