/* calendar.css — Monatsansicht, Floor-Filter, Sidebar-Panels (Konflikte/Tasks),
   Booking-Pipeline-Stepper, KPI-Leiste. Gehört zu static/app_calendar.js +
   static/app_enhance.js (KPI-Leiste). */

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.toolbar .month{font-size:1.1rem;font-weight:700;min-width:150px;text-align:center;}
@media (max-width:520px){
  .toolbar{gap:7px;}
  .toolbar .month{min-width:0;flex:1 0 auto;order:-1;}
}

.cal{background:var(--panel);border:1px solid var(--line);border-radius:14px;
     padding:14px;box-shadow:var(--shadow);}
.weekdays,.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.weekdays{margin-bottom:6px;}
.weekdays span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
               text-transform:uppercase;color:var(--faint);text-align:center;padding:2px 0;}
.cell{min-height:96px;min-width:0;border:1px solid var(--line2);border-radius:9px;padding:5px 5px 6px;
      background:transparent;display:flex;flex-direction:column;gap:3px;cursor:pointer;
      transition:border-color .12s,background .12s;}
.cell:hover{border-color:var(--accent);background:var(--accent-weak);}
.cell.empty{background:transparent;border-color:transparent;cursor:default;}
.cell.today{border-color:var(--accent2);}
.cell .dnum{font-size:12px;font-weight:600;color:var(--muted);align-self:flex-end;
            font-variant-numeric:tabular-nums;}
.cell.today .dnum{color:var(--accent2);}
.cell.dragover{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-weak);}
.chip{font-size:11px;line-height:1.25;border-radius:6px;padding:3px 6px;color:#0a0912;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;text-align:left;
      box-shadow:none;font-weight:600;}
.chip:hover{filter:brightness(1.08);border:none;}
.chip.anfrage{background:var(--anfrage);color:#100e18;} .chip.option{background:var(--option);}
.chip.vertrag_verschickt{background:var(--vertrag);} .chip.bestaetigt{background:var(--bestaetigt);}
.chip .r{opacity:.75;font-variant-numeric:tabular-nums;}
.chip .fdots{display:inline-flex;gap:2px;margin-left:4px;vertical-align:middle;}
.chip .fpt{width:7px;height:7px;border-radius:50%;flex:none;
           box-shadow:0 0 0 1px rgba(0,0,0,.35);}
.chip[draggable="true"]{cursor:grab;}
.chip.dragging{opacity:.4;}
@media (max-width:640px){
  .cell{min-height:64px;padding:4px 3px 5px;gap:2px;border-radius:7px;}
  .chip{font-size:0;line-height:0;padding:0;height:6px;border-radius:3px;margin-bottom:1px;}
  .weekdays span{font-size:9px;letter-spacing:.04em;}
}

/* Floor-Filter-Leiste (dient auch als Farb-Legende) */
.floor-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.fchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;
       border:1px solid var(--line);background:var(--panel);color:var(--text);
       border-radius:999px;padding:4px 11px;user-select:none;box-shadow:var(--shadow);}
.fchip:hover{border-color:var(--accent);}
.fchip .fdot{width:10px;height:10px;border-radius:50%;flex:none;}
.fchip.off{opacity:.5;}
.fchip.off .fdot{background:var(--floor-free)!important;}
.fchip.off .fname{text-decoration:line-through;}

/* Tages-Belegungsleiste (immer alle Floors) */
.occ{display:flex;gap:2px;margin-bottom:1px;}
.occ .seg{flex:1;height:4px;border-radius:2px;background:var(--floor-free);}

/* Sidebar panels */
.side{display:flex;flex-direction:column;gap:16px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
      padding:14px 15px;box-shadow:var(--shadow);}
.card h2{font-size:.95rem;margin:0 0 9px;display:flex;align-items:center;gap:8px;}
.badge{font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:999px;
       background:var(--crit-bg);color:var(--crit);}
.card table{border-collapse:collapse;width:100%;font-size:12px;}
.card th,.card td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line2);vertical-align:top;}
.card th{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}
.leer{color:var(--faint);font-style:italic;font-size:12.5px;}

/* Fällige-Tasks-Karte: kompakt, max. 4 Event-Gruppen (app/shell.py::render_sidebar) */
.tf-group{margin-bottom:8px;}
.tf-group:last-of-type{margin-bottom:0;}
.tf-event{font-size:12px;font-weight:700;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tf-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.tf-group li{font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;
             padding-left:10px;position:relative;}
.tf-group li::before{content:"";position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:50%;
                     background:var(--faint);}
.tf-due{font-family:var(--mono);font-size:9.5px;color:var(--faint);white-space:nowrap;}
.tf-more{font-size:11px;color:var(--faint);font-style:italic;margin:4px 0 0;}
.tf-link{width:100%;margin-top:9px;padding:6px 10px;font-size:11.5px;background:transparent;
         border:1px dashed var(--line);color:var(--muted);}
.tf-link:hover{border-color:var(--accent);color:var(--accent);}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--muted);margin-top:10px;}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.dot{width:10px;height:10px;border-radius:3px;}

#eventAuditLine{margin-top:10px;font-size:11px;color:var(--faint);}

/* Booking-Pipeline-Stepper (reine Darstellung) */
.pipe-label{margin:0 0 8px;}
.pipe{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.pstep{display:flex;align-items:center;gap:11px;position:relative;height:24px;}
.pstep .pdot{width:24px;height:24px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;
  border:2px solid var(--line);background:var(--panel);color:var(--faint);
  position:relative;z-index:1;}
.pstep .plabel{font-size:13px;color:var(--muted);}
.pstep:not(:first-child)::before{content:"";position:absolute;left:12px;
  transform:translateX(-50%);top:-17px;height:20px;width:2px;background:var(--line);}
.pstep.done .pdot{background:var(--accent);border-color:var(--accent);color:#0a0912;}
.pstep.done .plabel{color:var(--text);}
.pstep.done:not(:first-child)::before,
.pstep.current:not(:first-child)::before{background:var(--accent);}
.pstep.current .pdot{border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak);}
.pstep.current .plabel{color:var(--text);font-weight:700;}
.pstep.future .pdot{opacity:.5;}
.pstep.future .plabel{color:var(--faint);}
/* nächste (klickbare) Stufe — Vorwärts-Wechsel per Klick */
.pstep.next{cursor:pointer;}
.pstep.next .pdot{opacity:1;border-color:var(--accent);border-style:dashed;color:var(--accent);}
.pstep.next .plabel{color:var(--text);}
.pstep.next:hover .pdot{background:var(--accent-weak);}
.pstep.next:hover .plabel{color:var(--accent);}
.pstep .pnext{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--accent);
  background:var(--accent-weak);border-radius:999px;padding:2px 9px;white-space:nowrap;}
/* erledigte Stufe klickbar = Rückschritt (Korrektur) */
.pstep.back{cursor:pointer;}
.pstep.back:hover .pdot{box-shadow:0 0 0 3px var(--accent-weak);}
.pstep.back:hover .plabel{color:var(--accent);}
.pstep.back:hover::after{content:"zurück";margin-left:auto;font-size:10.5px;
  font-weight:600;color:var(--muted);}
.pbadge{font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:8px;margin:2px 0 4px;}
.pbadge.abgesagt{background:var(--crit-bg);color:var(--crit);}
.pbadge.verfallen{background:var(--warn-bg);color:var(--warn);}
.pbadge.abgelehnt{background:var(--line2);color:var(--muted);}

/* KPI-Leiste (app_enhance.js) — eigener Rahmen mit Monatsbezug + Folgemonat-Vergleich,
   damit immer erkennbar ist, für welchen Monat die Zahlen gelten (User-Feedback 2026-08-18). */
.kpi-frame{border:1px solid var(--line);border-radius:14px;padding:12px 14px 10px;
           margin-bottom:12px;background:var(--panel);box-shadow:var(--shadow);}
.kpi-frame-month{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
                 color:var(--faint);margin-bottom:8px;}
.kpi-bar{display:flex;flex-wrap:wrap;gap:8px;}
.kpi{--kc:var(--accent);display:flex;flex-direction:column;gap:1px;align-items:flex-start;
     min-width:78px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;
     background:var(--bg);cursor:pointer;position:relative;
     overflow:hidden;transition:border-color .12s,transform .08s;}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc);
             opacity:.55;transition:opacity .12s;}
.kpi:hover{border-color:var(--kc);transform:translateY(-1px);}
.kpi:hover::before,.kpi.active::before{opacity:1;}
.kpi.active{border-color:var(--kc);background:color-mix(in srgb,var(--kc) 9%,var(--panel));}
.kpi .kv{font-size:1.35rem;font-weight:800;line-height:1;color:var(--text);
         font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.kpi .kl{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.kpi.active .kv,.kpi.active .kl{color:var(--kc);}
.kpi-att{cursor:default;--kc:var(--faint);margin-left:auto;align-items:flex-end;text-align:right;}
.kpi-att::before{left:auto;right:0;}
.kpi-att:hover{transform:none;border-color:var(--line);}
.kpi-att .kx{font-size:10px;color:var(--muted);margin-top:2px;}
/* Folgemonat-Vergleichszeile: kompakt, nicht-interaktiv, optisch zurückhaltender */
.kpi-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px;
          padding-top:9px;border-top:1px solid var(--line2);}
.kn-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);}
.kn-chip{--kc:var(--accent);display:inline-flex;align-items:baseline;gap:3px;font-size:11px;color:var(--muted);
         padding:2px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--line2);}
.kn-chip b{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;}
@media (max-width:520px){
  .kpi{min-width:64px;padding:7px 9px;}
  .kpi .kv{font-size:1.1rem;}
  .kpi-att{margin-left:0;flex:1 1 100%;align-items:flex-start;text-align:left;}
  .kpi-att::before{left:0;right:auto;}
}