/* calendar.css — NUR Anordnung. Die Kalender-Optik (Raster, Zellen, Heute, Feiertag, Termin-Chips und
   -Blöcke, dunkle Leiste/Werkzeugleiste, Mini-Monat, Monatsleiste, Kategorie-Ringe, Agenda-Karten,
   Trefferliste, Datums-/Bereichsauswahl, Widget) kommt aus dem Kern: Design::calendarPart → layout/calgrid.css.
   Plaketten, Farbpunkte, Avatare, Leerzustände, Hinweisboxen, Modal, Knöpfe aus badges/avatar/feedback/
   lightbox/buttons. Einzige Ausnahme (Auftrag): der RAHMEN des Termin-Panels (Overlay von rechts). */

/* ── hidden-Overrides: Elemente mit display-setzenden Klassen müssen sich per [hidden] ausblenden lassen ── */
.cal-conflict-warn[hidden],
.cal-when-popover[hidden],
.cal-recur-end[hidden],
.cal-teams-link[hidden],
.cal-rem-custom[hidden],
.cal-readonly-note[hidden],
.cal-btn-delete[hidden],
.cal-sidebar-footer [hidden] { display: none !important; }   /* „Speichern" im Nur-Lesen-Termin (setReadonly) — ohne das gewann display:inline-flex des Knopfs */

/* ── Split-Layout ── */
.cal-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cal-split { display: flex; flex: 1; min-height: 0; }
/* Die Leiste trägt die Kern-Klasse .wn-sidebar (windownav, bündig) + die dunkle Kern-Kalenderfläche;
   hier nur Breite/Innenabstand/Stapel. */
.wn-sidebar.cal-sidebar { width: var(--wn-w, var(--sz-280)); min-width: var(--wn-w, var(--sz-280)); max-width: var(--wn-w, var(--sz-280)); flex-shrink: 0; overflow-y: auto; padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-7); }
.cal-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cal-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* ── Werkzeugleiste ── */
/* Links stand 0 — das Suchfeld klebte am Breiten-Schieber der Fenster-Navigation, seit die ziehbar
   ist (Florian 12.09.2026: „Das Inputfeld braucht einen Abstand nach links, im gleichen Ausmass wie
   es einen Abstand nach oben zum Rand hat"). Oben ist --sp-4, also links auch. */
.cal-main-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-7) var(--sp-4) var(--sp-4); flex-shrink: 0; }
.cal-toolbar-group { display: flex; align-items: center; gap: var(--sp-3); }
.cal-toolbar-left { gap: var(--sp-5); }
.cal-toolbar-right { gap: var(--sp-3); }
.cal-search-wrap { position: relative; width: var(--sz-440); max-width: 40vw; }
.cal-search-input { width: 100%; height: var(--sz-30); box-sizing: border-box; padding: 0 var(--sp-5); }   /* füllt die 440er-Suchbreite — vorher nur 168 px */
.cal-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: var(--sz-240); overflow-y: auto; z-index: var(--z-popover); display: none; }
.cal-search-dropdown.open { display: block; }

/* ── Seitenleiste ── */
.cal-monthstrip-wrap { position: relative; margin-bottom: var(--sp-2); }
.cal-sidebar-section-flex { flex: 1; min-height: 0; }
.cal-cat-carousel { margin: var(--sp-7) 0 var(--sp-6); }
.cal-upcoming-list { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }

/* ============================================================
   TERMIN-PANEL (Overlay von rechts) — Lage/Breite/Übergang modul-eigen; Abdunklung und Fläche/Schatten
   aus dem Kern (sidebar: cc-drawer-scrim / cc-drawer-surface), die Inhalte aus Kern-Bausteinen
   ============================================================ */
.cal-sidebar-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--dur); }
.cal-sidebar-overlay.active { opacity: 1; visibility: visible; }
/* Der Termin-Einschub ist die EINZIGE Sidebar im System, die das Modul selbst baut. Er war mit
   640 px deutlich schmaler als die Kern-Sidebar und wirkte dadurch fremd (Florian 12.09.2026:
   „Das ist nicht die Sidebar, die wir sonst überall haben. Sie ist zu schmal, der Inhalt ist nicht
   richtig lesbar"). Breite und Einfahren jetzt exakt wie .mage-sidebar-panel — inklusive des
   breitenunabhängigen transform-Einfahrens statt eines an die Breite gekoppelten right-Werts. */
.cal-event-sidebar { position: fixed; top: 0; right: 0; width: min(72vw, 900px); max-width: 96vw; height: 100%;
    z-index: var(--z-drawer); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform var(--dur-slow); }
.cal-event-sidebar.open { transform: none; }
.cal-event-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-6) var(--sp-8); border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* Der Inhalt sitzt im Akkordeon-Tab (Sidebar-Regel) — der Innenabstand kommt vom Kern-Akkordeon,
   deshalb ist der Körper selbst randlos. */
/* Innenpolster wie im Kern-Sidebar-Body (--sp-8) — es fehlte ganz, der Inhalt klebte am Rand. */
.cal-sidebar-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-8); }
.cal-sidebar-body .mage-field { margin-bottom: var(--sp-6); }
.cal-sidebar-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--border); flex-shrink: 0; }
.cal-readonly .cal-sidebar-body { opacity: var(--op-half); }
.cal-readonly .cal-sidebar-body .cal-attendee-list .cc-chip-x, .cal-readonly .cal-att-picker, .cal-readonly .cal-attendee-add, .cal-readonly .cal-reminder-add, .cal-readonly .cal-inline-toggle { display: none; }

/* Teams-Knopf + Sichtbarkeit (Zeile über den Feldern, Trennlinie gehört zum Panel-Rahmen) */
.cal-top-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.cal-priv-toggle-wrap { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; user-select: none; }
.cal-priv-toggle-label { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.cal-teams-link { align-items: center; margin-bottom: var(--sp-6); }
.cal-teams-link .cc-infobox-body { display: flex; align-items: center; gap: var(--sp-3); }
.cal-teams-anchor { flex: 1; min-width: 0; }

/* Zeitraum + „Endet am" (Kern-Datumsfeld; die Auswahl von „Endet am" schwebt über den Feldern darunter) */
.cal-recur-end { position: relative; }
.cal-recur-end .cc-cal-pop { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--sp-1); z-index: var(--z-popover); }

/* Teilnehmer + Erinnerungen */
.cal-att-picker { margin-bottom: var(--sp-3); }
.cal-attendee-add { display: flex; gap: var(--sp-2); align-items: center; }
.cal-attendee-add .cal-att-email { flex: 1; }
.cal-attendee-add .cal-att-name { flex: 0 0 38%; }
.cal-attendee-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.cal-inline-toggle { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); cursor: pointer; }
.cal-reminder-list { margin-top: 0; margin-bottom: var(--sp-3); }
.cal-reminder-add { display: flex; align-items: center; gap: var(--sp-2); }
.cal-reminder-add .cal-rem-preset { flex: 1; }
.cal-rem-custom { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cal-rem-custom .form-control, .cal-rem-custom .mage-input { width: var(--sz-80); }

/* ── Kategorien verwalten (Inhalt des Kern-Modals) ── */
.cal-cat-row { position: relative; }   /* Anker der Farb-Palette (Kern-Popover) */
.cal-cat-name { flex: 1; outline: none; }
.cal-cat-new { margin-top: var(--sp-5); }
.cal-cat-new-row .cal-cat-new-name { flex: 1; width: auto; }
.cal-cat-palette { margin-top: var(--sp-3); }

/* ── Synchronisation (Kern-Sidebar) ── */
.cal-sync .cc-input-row { align-items: center; }
.cal-steps { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }

/* ── Dashboard-Widget: nur die Breite (die Optik ist Kern) ── */
/* Eckenrundung: KEINE eigene — die Kachel trägt die Kern-Rolle .cc-widget (layout.css) mit var(--radius),
   also exakt denselben Radius wie das Navigations-Widget .cc-nw. Hier nichts überschreiben. */
.cal-widget[data-widget-id] { width: var(--sz-560); }