/* EINE Kalender-Leiste, Bereichsfilter, Dispo|Monteur-Spalten, Auftragsstand, Aufgaben (16.10.2026, planung-kalender.js) */

/* Bereich oben: Beschriftung vor den Modus-Knöpfen */
.mode-pills-label { color: rgba(255,255,255,.75); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }

/* ── Leiste ── */
#kalLeiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex: 1 1 100%; min-width: 0; }
#kalLeiste .kal-gruppe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
#kalLeiste .kal-gruppe + .kal-gruppe { padding-left: 12px; border-left: 1px solid #dfe5ec; }
#kalLeiste .kal-gruppe-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
#kalLeiste .view-tabs { display: inline-flex !important; background: #eef2f7; border-radius: 8px; padding: 2px; gap: 2px; max-width: none; overflow: visible; }
#kalLeiste .view-tab { color: #334155; min-height: 28px; padding: 4px 12px; font-size: 12px; border-radius: 6px; background: transparent; }
#kalLeiste .view-tab.active { background: #003878; color: #fff; }
#kalLeiste select { height: 30px; padding: 3px 8px; border: 1px solid #cfd9e5; border-radius: 7px; font-size: 12px; background: #fff; max-width: 220px; }

/* Kalenderquelle als Kontrollkästchen */
#kalLeiste .exchange-toggle { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 9px; border: 1px solid #cfd9e5; border-radius: 7px;
  background: #fff !important; color: #94a3b8; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 30px; }
#kalLeiste .exchange-toggle.active { color: #1d2b3a; border-color: #9fb8d6; }
#kalLeiste .kal-check::before { content: "\2610"; font-size: 14px; line-height: 1; }
#kalLeiste .kal-check.active::before { content: "\2611"; color: #003878; }
#kalLeiste .kal-dispo-namen { color: #003878; font-weight: 700; }
#kalLeiste .kal-dispo-einzeln { display: inline-flex; gap: 3px; }
#kalLeiste .kal-dispo-einzeln:empty { display: none; }
#kalLeiste .kal-mini { border: 1px solid #cfd9e5; background: #fff; color: #94a3b8; border-radius: 6px; padding: 2px 7px; font-size: 11px; cursor: pointer; }
#kalLeiste .kal-mini.active { background: #475569; color: #fff; border-color: #475569; }

/* Monteur-Status «wo ist er gerade» */
.kal-monteur-status { display: inline-flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: #475569; }
.kal-monteur-status:empty { display: none; }
.kal-st { background: #f1f5f9; border-radius: 10px; padding: 1px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.kal-st.an { background: #dcfce7; color: #166534; }
.kal-st.aus { color: #64748b; }

/* Bedienelemente je Ansicht */
#kalLeiste .kal-nur-woche, #kalLeiste .kal-nur-tag, #kalLeiste .kal-nur-team { display: none; }
#kalLeiste[data-ansicht="planning"] .kal-nur-woche,
#kalLeiste[data-ansicht="day"] .kal-nur-tag { display: flex; }
#kalLeiste[data-ansicht="teamweek"] .kal-nur-team { display: block; }
/* Teamwoche: beide Schalter wirken auch dort (Zeile «Dispo» oben, Monteur-Kalender in den Zellen) — 18.10.2026 */
.kal-hinweis { font-size: 11px; color: #64748b; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 7px; padding: 3px 8px; }

/* Legende: nur Farben, keine Filter */
.kal-legende { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-left: auto; font-size: 10.5px; color: #475569; }
.kal-leg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kal-leg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.kal-leg i.kal-leg-dispo { border-radius: 2px; background: repeating-linear-gradient(-45deg, #94a3b8, #94a3b8 2px, #fff 2px, #fff 4px); border: 1px dashed #64748b; }
.kal-leg i.kal-leg-ma { border-radius: 2px; background: rgba(99,102,241,.15); border: 1.5px dashed #6366f1; }

/* ── Woche: pro Tag Dispo | Monteur ── */
.calendar-body.kal-zwei-aktiv { grid-template-columns: repeat(5, minmax(300px, 1fr)) !important; }
.kal-zwei { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
.kal-sp { display: flex; flex-direction: column; min-width: 0; }
.kal-sp-dispo { border-right: 1px dashed #cbd5e1; background: #f8fafc; }
.kal-sp-kopf { font-size: 10.5px; font-weight: 700; padding: 3px 6px; color: #fff; background: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-sp-monteur .kal-sp-kopf { background: #003878; }
.kal-sp .planning-dossiers { margin: 4px 3px; }
.kal-dispo-events { flex: 1; padding: 4px; position: relative; min-height: 200px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.week-agenda .kal-dispo-events { gap: 8px; padding: 6px; }
.kal-zwei .day-events { min-height: 200px; }

/* Einträge anderer Monteure / übrige Akten: ausgegraut, nicht ausgeblendet */
.kal-fremd { opacity: .45; filter: grayscale(.7); }
.kal-fremd:hover { opacity: .9; filter: none; }
.scheduled-order.kal-fremd, .schedule-order.kal-fremd { z-index: 0 !important; }
.kal-fremd-trenner { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin: 6px 2px 2px; border-top: 1px dashed #cbd5e1; padding-top: 4px; }

/* Tag: Dispo-Spalte links, etwas breiter */
.employee-column.kal-dispo-spalte { flex: 0 0 220px; min-width: 200px; background: #f8fafc; border-right: 2px solid #94a3b8; }
/* Tag mit gewaehltem Monteur: Dispo ca. 1/3, Monteur breiter; Akten als Kartenliste in der Spalte */
.employee-column.kal-dispo-spalte.kal-dispo-mit-akten { flex: 0 0 33%; max-width: 420px; }
.kal-dispo-karten { overflow-y: auto; padding: 6px; box-sizing: border-box; }
.akte-gruppe { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 6px 2px 3px; }
.akte-gruppe:first-child { margin-top: 0; }
.akte-leer { font-size: 11px; color: #64748b; padding: 8px 4px; }

/* Auslastung je Monteur und Tag */
.kal-auslastung { padding: 3px 5px 4px; border-top: 1px solid #eef2f7; }
.kal-auslastung-balken { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.kal-auslastung-balken > div { height: 100%; border-radius: 3px; transition: width .3s; }
.kal-auslastung-text { font-size: 10px; margin-top: 2px; line-height: 1.25; }

/* ── Auftragsstand auf der Karte: 4 Stufen ── */
.kal-stand { display: flex; align-items: center; gap: 3px; margin-top: 5px; font-size: 10.5px; font-weight: 700; }
.kal-stand i { width: 14px; height: 4px; border-radius: 2px; background: #e2e8f0; display: inline-block; }
.kal-stand span { margin-left: 4px; }
.kal-stand-offen { color: #64748b; } .kal-stand-offen i.an { background: #94a3b8; }
.kal-stand-dispo { color: #b45309; } .kal-stand-dispo i.an { background: #f59e0b; }
.kal-stand-prov { color: #1d4ed8; } .kal-stand-prov i.an { background: #3b82f6; }
.kal-stand-fix { color: #166534; } .kal-stand-fix i.an { background: #16a34a; }

/* Serv. n. Aufw. in Liste klar von Reparatur abheben */
.order-card.servicetm { background: #faf8ff; }

/* ── Aufgaben-Abschnitt ── */
.aufgaben-abschnitt { flex: none; border-top: 2px solid var(--task-color, #6366f1); background: #fafaff; max-height: 42vh; overflow: auto; }
.aufgaben-abschnitt[hidden] { display: none; }
.aufgaben-klapp > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: #3730a3; list-style: none; position: sticky; top: 0; background: #fafaff; z-index: 1; }
.aufgaben-klapp > summary::-webkit-details-marker { display: none; }
.aufgaben-klapp > summary::before { content: "\25B8"; color: #6366f1; transition: transform .15s; }
.aufgaben-klapp[open] > summary::before { transform: rotate(90deg); }
.aufgaben-klapp > summary > span { flex: 1; }
.aufgaben-neu { border: 1px solid #c7d2fe; background: #fff; color: #3730a3; border-radius: 7px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.aufgaben-hinweis { font-size: 10.5px; color: #64748b; padding: 0 10px 4px; }
.aufgaben-liste { padding: 0 8px 8px; }

@media (max-width: 768px) {
  #kalLeiste .kal-gruppe + .kal-gruppe { padding-left: 0; border-left: 0; }
  .kal-legende { margin-left: 0; }
  .calendar-body.kal-zwei-aktiv { grid-template-columns: repeat(5, minmax(220px, 1fr)) !important; }
}
.day-overview-header { flex-wrap: wrap; row-gap: 8px; }

/* ── Kompakte Akten-Karten (16.10.2026 u): keine Buchstaben-Umbrueche ── */
.akte-liste { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.akte-karte { min-width: 0; background: #fff; border: 1px solid #dfe5ec; border-left: 3px solid #d97706; border-radius: 6px; padding: 4px 6px; cursor: pointer; overflow-wrap: normal; word-break: normal; }
.akte-karte:hover { background: #eef4fb; }
.akte-karte.st-kopiert { border-left-color: #16a34a; }
.akte-karte.st-fix-fehlt { border-left-color: #dc2626; background: #fff7f7; }
.akte-karte.st-pruefen { border-left-color: #94a3b8; }
.akte-z1 { display: flex; gap: 5px; align-items: flex-start; min-width: 0; }
.akte-sym { flex: none; font-weight: 800; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.akte-karte.st-kopiert .akte-sym { color: #16a34a; } .akte-karte.st-fix-fehlt .akte-sym { color: #dc2626; } .akte-karte.st-planen .akte-sym { color: #d97706; }
.akte-betreff { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.3; color: #1d2b3a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; word-break: normal; }
.akte-z2 { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 2px 0 0 17px; font-size: 10px; color: #64748b; min-width: 0; }
.akte-z2 > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.akte-z2 > i { font-style: normal; color: #cbd5e1; }
.planning-dossiers > div { padding: 4px; }
.planning-dossiers summary { overflow-wrap: normal; word-break: normal; }
/* Alte Chips (Rueckfall) ebenfalls ohne Buchstaben-Umbruch */
.dispo-chip span { white-space: nowrap; }

/* ── Teamwoche: Monteur-Kalender je Zelle ── */
.tw-outlook-liste { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.tw-outlook { font-size: 10px; line-height: 1.3; color: #4338ca; background: rgba(99,102,241,.08); border: 1px dashed #a5b4fc; border-radius: 4px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tw-outlook b { font-weight: 700; }
.tw-outlook-mehr { font-size: 10px; color: #6366f1; padding-left: 4px; cursor: help; }

/* ══ Kalenderquellen, Raster, Dispo sichtbar (18.10.2026, v=20261018a-kalender) ══ */
/* Ladeanzeige: Beschriftung bleibt stehen, nur gedimmt + Sanduhr */
#kalLeiste .exchange-toggle.kal-laedt { opacity: .55; }
#kalLeiste .exchange-toggle.kal-laedt::after { content: " ™B"; font-size: 11px; }
.kal-quellen-hinweis { font-size: 10.5px; color: #64748b; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 7px; padding: 2px 7px; white-space: nowrap; }
.kal-quellen-hinweis[hidden] { display: none; }
.kal-leg-titel { font-weight: 700; color: #334155; }

/* Tag: Spaltenkoepfe mit fester Hoehe + gleich hoher Abstand in der Zeitspalte → Zeiten stehen auf der richtigen Zeile */
#employeesContainer .employee-column-header { height: 64px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 6px; padding-bottom: 6px; }
#employeesContainer .employee-column-header .absence-badge { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-column .time-kopf { height: 64px; border-bottom: 1px solid var(--border, #e5e7eb); background: #f8fafc; box-sizing: border-box; }
/* EIN Scrollbereich fuer Zeitachse UND Spalten (#dayOverviewContent, beide Richtungen): Frueher scrollten die
   Spalten in einem eigenen Kasten senkrecht, die Zeitachse aber nicht mit → Zeiten und Bloecke liefen auseinander.
   Zeitachse klebt links, Spaltenkoepfe oben (Handy: Spalten wischen, Zeitachse bleibt stehen). */
#dayOverviewPanel .schedule-grid { flex: 0 0 auto; min-height: auto; width: max-content; min-width: 100%; }
#dayOverviewPanel .employees-container { overflow: visible; flex: 1 0 auto; min-width: 0; }
#dayOverviewPanel .time-column { position: sticky; left: 0; z-index: 12; }
#dayOverviewPanel .time-column .time-kopf { position: sticky; top: 0; z-index: 13; }
#dayOverviewPanel .employees-container > .kal-leer { flex: 1; }
.kal-leer-knoepfe { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
  #dayOverviewPanel .day-overview-content { -webkit-overflow-scrolling: touch; }
  #dayOverviewPanel .employee-column { flex: 0 0 auto; width: 46vw; min-width: 150px; max-width: 220px; scroll-snap-align: start; }
  #dayOverviewPanel .employee-column.kal-dispo-spalte, #dayOverviewPanel .employee-column.kal-dispo-spalte.kal-dispo-mit-akten { flex: 0 0 auto; width: 62vw; min-width: 180px; max-width: 280px; }
  #dayOverviewPanel .time-column { width: 44px; min-width: 44px; }
}

/* Tag: Dispo-Akten offen als Karten-Raster, Ganztaegig-Leiste */
.day-dispo-bar .planning-dossiers { flex: 1 1 100%; margin: 0; }
.day-dispo-bar .planning-dossiers > div { max-height: 30vh; }
.day-dispo-bar .akte-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; }
.day-ganztags-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 5px 10px; background: #fafaff; border-bottom: 1px solid var(--border, #e5e7eb); }
.day-ganztags-bar[hidden] { display: none; }
.kal-ganztags-label { font-size: 9.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.kal-ganztags { border: 1.5px dashed #6366f1; background: rgba(99,102,241,.08); color: #3730a3; border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-ganztags.dispo { border-color: #64748b; background: #f1f5f9; color: #334155; }
.kal-woche-ganztags { display: flex; flex-wrap: wrap; gap: 2px; position: relative; z-index: 3; margin-bottom: 2px; }
.kal-woche-ganztags span { font-size: 9.5px; background: rgba(99,102,241,.10); border: 1px dashed #a5b4fc; color: #3730a3; border-radius: 4px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* «einplanen» an einer Dispo-Akte */
.akte-einplanen { margin-left: auto; border: 1px solid #f59e0b; background: #fffbeb; color: #92400e; border-radius: 6px; padding: 0 7px; font-size: 10.5px; font-weight: 700; cursor: pointer; white-space: nowrap; line-height: 1.6; }
.akte-einplanen:hover { background: #fde68a; }

/* Dispo-Eintrag beim Monteur (Kopie im Monteur-Kalender) — grau/gestreift wie Dispo, in der Monteur-Spalte */
.schedule-order.emp-cal-event.kal-dispo-kopie, .scheduled-order.emp-cal-event.kal-dispo-kopie {
  background: repeating-linear-gradient(-45deg, #f1f5f9 0 6px, #fff 6px 12px) !important; border: 1.5px dashed #64748b !important; color: #334155 !important; }
.kal-dispo-kopie .schedule-order-time, .kal-dispo-kopie .schedule-order-id, .kal-dispo-kopie .time, .kal-dispo-kopie .title { color: #334155 !important; }
.tw-outlook.dispo { color: #334155; background: #f1f5f9; border-color: #94a3b8; }

/* Teamwoche: Zeile «Dispo» */
.team-week-employee.kal-tw-dispo-kopf { background: #475569; color: #fff; }
.team-week-employee.kal-tw-dispo-kopf small { color: rgba(255,255,255,.8); }
.team-week-cell.kal-tw-dispo { background: #f8fafc; }
.kal-tw-mehr summary { font-size: 10.5px; color: #475569; cursor: pointer; padding: 2px 4px; }