/* calendar.css — Mein-Tag Calendar Cards (Outlook-Termine + D365-Termine)

   Quelle: extrahiert aus mein-tag.css ("Calendar Cards"-Block). Inhalt 1:1.

   Konsumenten: web/js/sections/mein-tag.js — rendert Termin-Karten in der
   rechten Spalte. Termine kommen aus Outlook (via Graph) + D365.

   Card-Varianten:
   - .kal-card--clickable: ueberhaupt klickbar
   - .kal-card--ganztag: schmal, ohne Border-Left, Subtle-Background
   - .kal-card--teams: Brand-Border-Left in Teams-Meeting-Gruen
   - .kal-card--privat: dezent, Lock-Badge
   - .kal-card--d365: 4px Border-Left, klickbar mit D365-Badge

   D365-Badge-Varianten:
   - .kal-d365-badge: Termin existiert in D365 + Outlook (Server-Sync OK)
   - .kal-d365-badge--only: nur in D365, Outlook-Sync ausstehend
   ========================================================================== */

.kal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--kal-stripe, var(--brand-default));
  border-radius: var(--radius-lg);
  padding: var(--space-2-5) var(--space-3);
  margin-bottom: var(--space-2);
  /* Routing-SSOT-Sweep 2026-05-07: D365-Termine sind <a href> (Strg/Cmd-Klick → neuer Tab).
     UA-Default-Anchor-Stylings neutralisieren. */
  color: inherit;
  text-decoration: none;
  display: block;
}
.kal-card--clickable { cursor: pointer; }
.kal-card:hover { background: var(--color-bg-muted); }
.kal-card--ganztag { padding: 7px var(--space-2-5); display: flex; align-items: center; gap: var(--space-2); border-left: none; background: var(--color-bg-subtle); }
.kal-card--ganztag .kal-titel { font-size: var(--fs-meta); -webkit-line-clamp: 1; flex: 1; margin-bottom: 0; }
/* Deliberate: Microsoft Teams Brand-Farben (Meeting-Gruen + Indigo) */
.kal-card--teams { border-left-color: var(--brand-teams-meeting); }
.kal-btn--teams:hover { background: var(--brand-teams-meeting) !important; }
.kal-btn--teams:hover .ui-ico img { filter: brightness(0) invert(1) !important; }
/* Private Termine: dezenter Hintergrund + Lock-Badge */
.kal-card--privat { background: var(--color-bg-subtle); border-left-color: var(--color-text-disabled) !important; }
.kal-card--privat .kal-titel { color: var(--color-text-muted); }
.kal-privat-badge { font-size: var(--font-size-xs); margin-left: var(--space-1); opacity: 0.7; }

/* D365-Badge — kennzeichnet Termine die aus
 einem D365-appointment-Datensatz stammen. Klick oeffnet Termin-Drawer. */
.kal-d365-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-px) var(--space-1-5);
  margin-left: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--lod-darkblue) 12%, var(--lod-white));
  color: var(--lod-darkblue);
  border-radius: var(--radius-xs);
  line-height: 1.4;
}
.kal-card--d365 {
  cursor: pointer;
  border-left-width: 4px;
}
.kal-card--d365:hover .kal-d365-badge {
  background: var(--lod-darkblue);
  color: var(--brand-text-on);
}
/* "Nur in LoD" — Termin existiert in D365, aber noch nicht in Outlook
   (Server-Side-Sync ausstehend). Andere Farbe damit der User unterscheidet
   ob ein Outlook-Pendant existiert oder nicht. (rev. SSOT-Polish 2026-05-01) */
.kal-d365-badge--only {
  background: color-mix(in srgb, var(--lod-amber-700) 14%, var(--lod-white));
  color: var(--lod-amber-700);
}
.kal-card--d365:hover .kal-d365-badge--only {
  background: var(--lod-amber-700);
  color: var(--brand-text-on);
}

.kal-card-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1-5); }
.kal-zeit { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-text); flex-shrink: 0; }
.kal-dauer { font-size: var(--fs-meta); color: var(--color-text-muted); flex-shrink: 0; }
.kal-card-actions { display: flex; gap: var(--space-1); margin-left: auto; flex-shrink: 0; }
.kal-chevron-ico {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-default);
}
.kal-chevron-ico.is-open { transform: rotate(180deg); }
.kal-titel {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  word-break: break-word;
  margin-bottom: var(--space-1);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kal-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2-5); margin-bottom: var(--space-xxs); }
.kal-org-line {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-meta); color: var(--color-text-muted); margin-bottom: var(--space-xxs);
}
.kal-organizer { font-weight: var(--fw-medium); }
.kal-attendees { display: inline-flex; align-items: center; gap: var(--space-xxs); opacity: 0.8; }
.kal-desc { border-top: 1px solid var(--color-border-light); margin-top: var(--space-2); }
.kal-meta-item { font-size: var(--fs-badge); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-xxs); }
.kal-recurring { font-size: var(--fs-meta); color: var(--color-text-muted); }

/* MtKalender-Liste (.mt-kal-list) erbt komplett von .mt-list — kein Extra-Layout. */

/* Teams-Detail-Block in aufgeklappter Kalender-Karte.
 Wird unterhalb der Vorschau gerendert wenn t.teamsLink vorhanden. */
.mt-kal-teams {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-2-5);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-teams);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mt-kal-teams-kapitel {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
}
/* .app-scope-Praefix: sonst plaettet .app-scope a { color: inherit } (0,1,1)
   die Teams-Brand-Farbe dieser Ein-Klassen-Regel (0,1,0). */
.app-scope .mt-kal-teams-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--brand-teams);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-sm);
}
.app-scope .mt-kal-teams-link:hover { text-decoration: underline; }
.mt-kal-teams-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
}
.mt-kal-teams-label {
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  flex: 0 0 auto;
}
.mt-kal-teams-value {
  color: var(--color-text);
  font-family: var(--font-mono, monospace);
  word-break: break-all;
}

/* Tablet 600-999 und Mobile <600: Teams-Block kompakter. */
@media (max-width: 999px) {
  .mt-kal-teams { padding: var(--space-1-5) var(--space-2); gap: var(--space-xxs); }
  .mt-kal-teams-row { flex-direction: column; align-items: flex-start; gap: var(--space-xxs); }
}
@media (max-width: 599px) {
  .mt-kal-teams { padding: var(--space-1-5); }
  .mt-kal-teams-link { font-size: var(--font-size-base); }
}