/* ============================================================================
   V178 — TTCal Kalender-Styles (Admin + Talent, geteilt)
   ============================================================================ */
.ttcal-section { display: block; }

/* Toolbar — links Monats-Navigation, rechts Filter/Ansicht/Neu; rechte Gruppe bleibt EINE Zeile */
.ttcal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.ttcal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ttcal-navbtn, .ttcal-todaybtn, .ttcal-viewbtn, .ttcal-addbtn, .ttcal-hiddentoggle {
  border: 1px solid #d9dee7; background: #fff; color: #334155;
  border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13px;
  height: 36px; padding: 0 14px; line-height: 1; white-space: nowrap;
}
.ttcal-hiddentoggle { flex: 0 0 auto; color: #64748b; }
.ttcal-hiddentoggle:hover { background: #f1f5f9; }
.ttcal-hiddentoggle.active { background: #eef2f7; color: #1e2e47; border-color: #c7d0dc; }
.ttcal-navbtn { width: 36px; padding: 0; font-size: 20px; font-weight: 600; color: #475569; }
.ttcal-monthlabel { font-size: 17px; font-weight: 650; color: #0f172a; min-width: 128px; text-align: center; }
.ttcal-todaybtn:hover, .ttcal-navbtn:hover, .ttcal-viewbtn:hover, .ttcal-addbtn:hover { background: #f1f5f9; }
.ttcal-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.ttcal-filter { height: 36px; border: 1px solid #d9dee7; border-radius: 10px; padding: 0 12px; font-size: 13px; font-family: inherit; background: #fff; color: #334155; width: 190px; max-width: 100%; }
.ttcal-viewtoggle { display: inline-flex; border: 1px solid #d9dee7; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.ttcal-viewbtn { border: 0; border-radius: 0; height: 36px; }
.ttcal-viewbtn + .ttcal-viewbtn { border-left: 1px solid #d9dee7; }
.ttcal-viewbtn.active { background: #1e2e47; color: #fff; }
.ttcal-addbtn { background: #1e2e47; color: #fff; border-color: #1e2e47; font-weight: 600; flex: 0 0 auto; }
.ttcal-addbtn:hover { background: #16233a; }

/* Monats-Grid */
.ttcal-grid { border: 1px solid #e4e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.ttcal-dowrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #f8fafc; border-bottom: 1px solid #eef0f4; }
.ttcal-dow { padding: 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; text-align: center; }
.ttcal-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ttcal-cell { min-height: 92px; min-width: 0; border-right: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4; padding: 4px 5px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.ttcal-cell:nth-child(7n) { border-right: 0; }
.ttcal-cell:hover { background: #f8fafc; }
.ttcal-cell-empty { background: #fcfcfd; cursor: default; }
.ttcal-cell-empty:hover { background: #fcfcfd; }
.ttcal-cell.is-today { background: #eef2f7; }
.ttcal-cell.is-today .ttcal-daynum { background: #1e2e47; color: #fff; }
.ttcal-daynum { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: #475569; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ttcal-daylist { display: flex; flex-direction: column; gap: 2px; }
.ttcal-pill { display: block; width: 100%; border: 0; border-radius: 5px; padding: 2px 6px; font-size: 10.5px; font-weight: 600; cursor: pointer; text-align: left; font-family: inherit; overflow: hidden; }
.ttcal-pill-txt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttcal-pill.is-auto { opacity: .96; box-shadow: inset 2px 0 0 rgba(0,0,0,.22); }
.ttcal-pill.is-hidden { opacity: .45; text-decoration: line-through; }
/* V228k (#57b): mehrtägige Termine — Segmente an Start/Mitte/Ende visuell verketten */
.ttcal-pill-span { border-radius: 0; }
.ttcal-pill-span-start { border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-shadow: inset 3px 0 0 rgba(0,0,0,.16); }
.ttcal-pill-span-end { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.ttcal-pill-span-mid, .ttcal-pill-span-end { opacity: .92; }
.ttcal-more { border: 0; background: transparent; color: #64748b; font-size: 10.5px; font-weight: 600; cursor: pointer; text-align: left; padding: 1px 6px; font-family: inherit; }
.ttcal-more:hover { color: #1e2e47; text-decoration: underline; }

/* Agenda / Liste */
.ttcal-agenda { border: 1px solid #e4e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.ttcal-agenda-day { border-bottom: 1px solid #eef0f4; padding: 10px 14px; }
.ttcal-agenda-day:last-child { border-bottom: 0; }
.ttcal-agenda-date { font-size: 12px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.ttcal-agenda-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 5px 4px; border-radius: 8px; text-align: left; font-family: inherit; }
.ttcal-agenda-item:hover { background: #f6f8fb; }
.ttcal-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.ttcal-agenda-time { flex: 0 0 auto; font-size: 12px; color: #64748b; min-width: 92px; font-variant-numeric: tabular-nums; }
.ttcal-agenda-title { font-size: 13px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttcal-auto-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; border: 1px solid #e2e8f0; border-radius: 4px; padding: 0 4px; }
.ttcal-empty { padding: 40px; text-align: center; color: #94a3b8; font-size: 13px; }

/* Modal */
/* V228k (#57a): eigener Compositing-/Stacking-Layer + etwas deckenderer Scrim, damit der
   backdrop-filter:blur des darunterliegenden sticky Portal-Headers beim Maus-Hover nicht
   ganzflächig neu gesampelt wird (Chromium/WebKit backdrop-filter-Repaint-Flackern). */
.ttcal-modal-ov { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 16px; isolation: isolate; transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ttcal-modal { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.25); max-width: 440px; width: 100%; padding: 20px 22px 18px; box-sizing: border-box; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; -webkit-overflow-scrolling: touch; }
/* V228k (#57j): Kopf bleibt beim Scrollen im Modal sichtbar (Schließen-Button erreichbar) */
.ttcal-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; position: sticky; top: -2px; z-index: 3; background: #fff; padding: 4px 0 6px; }
.ttcal-modal-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; }
.ttcal-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid #e4e8f0; border-radius: 8px; background: #fff; color: #64748b; cursor: pointer; font-size: 15px; line-height: 1; font-family: inherit; }
.ttcal-x:hover { background: #f1f5f9; color: #334155; }
.ttcal-src { margin: 0 0 12px; font-size: 12px; color: #b45309; line-height: 1.4; }
.ttcal-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #64748b; margin: 12px 0 5px; }
.ttcal-input { width: 100%; box-sizing: border-box; border: 1px solid #d9dee7; border-radius: 10px; padding: 9px 11px; font-size: 14px; font-family: inherit; color: #0f172a; background: #fff; }
.ttcal-input:disabled { background: #f8fafc; color: #64748b; }
textarea.ttcal-input { resize: vertical; }
/* V228k (#57c): Beschreibungsfeld deutlich höher (statt 2 Zeilen) + wächst per JS auto mit */
textarea.ttcal-input.ttcal-input-desc { min-height: 96px; max-height: 320px; overflow-y: auto; line-height: 1.45; }
.ttcal-row2 { display: flex; gap: 12px; }
.ttcal-row2 > div { flex: 1; }
/* V228k (#57e): Ort-Autocomplete (Photon) — Vorschlagsliste unter dem Ort-Feld */
.ttcal-ac-wrap { position: relative; }
.ttcal-ac { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: #fff; border: 1px solid #d9dee7; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.14); max-height: 210px; overflow-y: auto; padding: 4px; }
.ttcal-ac[hidden] { display: none; }
.ttcal-ac-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 9px; border-radius: 8px; font-size: 13px; color: #0f172a; cursor: pointer; font-family: inherit; line-height: 1.35; }
.ttcal-ac-item:hover { background: #f1f5f9; }
.ttcal-colors { display: flex; gap: 7px; flex-wrap: wrap; }
.ttcal-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.ttcal-color.active { border-color: #0f172a; box-shadow: 0 0 0 2px #fff inset; }
.ttcal-modal-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.ttcal-foot-spacer { flex: 1 1 0; min-width: 0; }
.ttcal-btn { border: 1px solid #d9dee7; background: #fff; color: #334155; border-radius: 10px; height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ttcal-btn:hover { background: #f1f5f9; }
.ttcal-btn-primary { background: #1e2e47; color: #fff; border-color: #1e2e47; }
.ttcal-btn-primary:hover { background: #16233a; }
.ttcal-btn-del { color: #b91c1c; border-color: #f1c4c4; }
.ttcal-btn-del:hover { background: #fef2f2; }
.ttcal-daylist-full { display: flex; flex-direction: column; gap: 2px; }

/* V228k (#57d): read-only Termin-Übersicht (Klick öffnet erst diese Info-Karte) */
.ttcal-ov-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; color: #0f172a; margin: 4px 0 14px; line-height: 1.3; }
.ttcal-ov-body { display: block; }
.ttcal-ov-row { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid #f1f4f8; }
.ttcal-ov-row:first-of-type { border-top: 0; }
.ttcal-ov-k { flex: 0 0 116px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #94a3b8; padding-top: 2px; }
.ttcal-ov-v { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #0f172a; line-height: 1.5; word-break: break-word; }
.ttcal-ov-v a { color: #1e4a7c; text-decoration: underline; }
.ttcal-ov-desc { white-space: pre-wrap; }
.ttcal-ov-tz { color: #94a3b8; font-size: 12px; }

/* Zielgruppe (Admin): „für alle"-Checkbox + Mehrfach-Talent-Liste + E-Mail-Checkbox */
.ttcal-global-check, .ttcal-email-check { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: #334155; cursor: pointer; }
.ttcal-global-check input, .ttcal-email-check input, .ttcal-talent-check input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #1e2e47; cursor: pointer; }
.ttcal-email-check { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f4; }
.ttcal-talentlist { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; max-height: 168px; overflow-y: auto; border: 1px solid #e4e8f0; border-radius: 10px; padding: 6px; }
.ttcal-talentlist.is-disabled { opacity: .45; pointer-events: none; }
.ttcal-talent-check { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 13px; color: #0f172a; cursor: pointer; }
.ttcal-talent-check:hover { background: #f6f8fb; }
.ttcal-hint { margin: 6px 0 0; font-size: 11.5px; color: #94a3b8; line-height: 1.4; }
/* Feiertag-Pille: dezenter als normale Auto-Events (kein starker Balken) */
.ttcal-pill.is-holiday { box-shadow: none; font-style: italic; opacity: .92; }

/* Nav-Badge (Reiter) — nutzt die bestehende .ttchat-nav-badge-Optik, hier nur Fallback */
.ttcal-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; margin-left: 6px; }
.ttcal-nav-badge.hidden { display: none; }

/* V228k (#57j): iPad/Tablet-Bereich (769–1024px, inkl. 761–768px-Dead-Zone) — Desktop-Grid
   ist hier zu eng, Pillen wurden abgeschnitten. Kompaktere Zellen + Modal darf schmaler. */
@media (min-width: 769px) and (max-width: 1024px) {
  .ttcal-cell { min-height: 84px; padding: 4px 4px 5px; }
  .ttcal-pill { font-size: 10px; padding: 2px 5px; }
  .ttcal-ov-k { flex-basis: 100px; }
}

/* Mobile: Grid schmaler, Zellen kompakter; ab sehr schmal auf Liste ausweichen */
@media (max-width: 768px) {
  /* V228ai: Kalender füllt wie Google Calendar den ganzen Block — Monatsgrid-Zeilen wachsen (1fr)
     statt fixer 74/82px, kein Leerraum unten auf hohen Screens, kein Overflow. Panel auf
     Viewport-Höhe, Section/Grid/Cells per flex den Rest füllen. */
  html body #dashboard-view #calendar-panel:not(.hidden):not([hidden]) { display: flex !important; flex-direction: column !important; height: calc(100dvh - var(--tt-header-h, 64px)) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; overflow: hidden !important; }
  /* V228ak: Section scrollt bei Bedarf (volle Agenda/Liste + Querformat-Monatsraster) statt zu klippen;
     Safe-Area nur EINMAL abgezogen (Panel-padding-bottom), nicht zusätzlich in der height (sonst Leerstreifen). */
  html body #dashboard-view #calendar-panel .ttcal-section { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
  html body #dashboard-view #calendar-panel .ttcal-grid { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; }
  html body #dashboard-view #calendar-panel .ttcal-cells { flex: 1 1 auto !important; grid-template-rows: none !important; grid-auto-rows: 1fr !important; min-height: 0 !important; }
  html body #dashboard-view #calendar-panel .ttcal-cell { min-height: 48px !important; }
  /* V228o (N4): Tages-Kästen etwas höher + eigenes Clipping, damit der Zellinhalt nicht in
     die Nachbarzeile ausläuft und beim Antippen „abgeschnitten" wirkt — Inhalt bleibt sauber
     innerhalb der jeweiligen (angetippten) Zelle; Überzähliges deckt der „+N weitere"-Button ab. */
  .ttcal-cell { min-height: 82px; padding: 3px 3px 4px; overflow: hidden; }
  .ttcal-pill { font-size: 10.5px; padding: 3px 5px; line-height: 1.25; min-height: 22px; box-sizing: border-box; }
  /* V228ab (P3): Kalender-Toolbar wie Google Calendar — 2 saubere Zeilen, links/rechts bündig
     (Zeile 1: ‹ Monat Jahr › ........ Heute | Zeile 2: Monat|Liste ........ + Termin). */
  .ttcal-toolbar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .ttcal-nav { width: 100%; flex-wrap: nowrap; gap: 6px; align-items: center; }
  .ttcal-monthlabel { min-width: 0; flex: 0 1 auto; text-align: left; font-size: 16px; white-space: nowrap; }
  .ttcal-navbtn { flex: 0 0 auto; }
  .ttcal-todaybtn { margin-left: auto; flex: 0 0 auto; }
  .ttcal-toolbar-right { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .ttcal-filter { flex: 1 1 100%; order: -1; width: auto; }
  .ttcal-viewtoggle { flex: 0 0 auto; }
  .ttcal-addbtn { flex: 0 0 auto; }
  .ttcal-dow { font-size: 10px; padding: 6px 2px; }
  /* V228o (N4): Modal minimal kleiner + zentriert, sichtbarer/abgedunkelter Blur-Backdrop,
     sodass Portal-Header (Logo) oben und Fußleiste unten im Hintergrund noch durchscheinen.
     Innerhalb des Modals darf gescrollt werden (bewusst zugelassen). */
  .ttcal-modal-ov {
    padding: 14px; align-items: center;
    background: rgba(15,23,42,.64);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .ttcal-modal {
    max-width: 92vw; width: 100%;
    max-height: 82vh; max-height: 82dvh;
    padding: 16px 16px 14px; border-radius: 18px;
  }
  .ttcal-ac { max-height: 44dvh; }
  /* V228o (N4): Datum|Bis und Von|Bis als echtes 2-Spalten-Grid — kein Überlappen/Abschneiden mehr.
     min-width:0 auf Spalte UND Feld, damit die nativen date/time-Inputs nicht über ihre
     intrinsische Mindestbreite hinaus die Spalte sprengen (Ursache des abgeschnittenen BIS-Felds). */
  /* V228bc: minmax(0,1fr) statt 1fr — 1fr=minmax(auto,1fr), und die intrinsische Mindestbreite
     der nativen date/time-Inputs (iOS zeigt "09.07.2026") sprengte den Track trotz min-width:0 auf
     Spalte/Input -> das BIS-Feld lief rechts aus dem Modal. minmax(0,…) zwingt beide Spalten auf 50%. */
  .ttcal-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .ttcal-row2 > div { min-width: 0; }
  .ttcal-row2 .ttcal-input { min-width: 0; }
  .ttcal-ov-row { flex-wrap: wrap; gap: 2px 12px; }
  .ttcal-ov-k { flex-basis: 100%; }
  .ttcal-talentlist { max-height: 140px; }
  .ttcal-modal-foot { gap: 8px; }
  .ttcal-btn { flex: 1 1 auto; }
  .ttcal-foot-spacer { display: none; }
}
/* V228bi: Auf ALLEN Handys (≤480px) Datum/Zeit-Paare UNTEREINANDER (volle Breite) statt
   2-spaltig. Grund: native iOS date/time-Inputs schrumpfen trotz minmax(0,1fr)/min-width:0
   nicht unter ihre intrinsische Breite → auf 390–430px-Handys überlappten die 2 Spalten.
   Untereinander = jedes Feld volle Modalbreite → kann nie überlappen. (War ≤380px.) */
@media (max-width: 480px) {
  .ttcal-row2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  /* V228o (Notiz 24.07.): Grid war min-width:460px -> auf 375px-Screens lief die 7. Spalte (FR/SO)
     rechts aus dem Bild. Jetzt alle 7 Tage in die Viewport-Breite einpassen (kein H-Scroll),
     Zellen kompakter. Event-Pills kürzen ohnehin per ellipsis. */
  .ttcal-grid { overflow-x: hidden; }
  .ttcal-cells, .ttcal-dowrow { min-width: 0; }
  .ttcal-cell { min-height: 56px; padding: 2px 2px 3px; }
  .ttcal-daynum { font-size: 11px; }
  .ttcal-weekday, .ttcal-dow { font-size: 9.5px; }
}