/* =========================
   GOOGLE CALENDAR INTEGRATION
   Zwei Bereiche: (1) Einstellungen-Panel (js/google-calendar-settings.js),
   (2) Kennzeichnung von Google-Terminen in der bestehenden Monatsansicht/
   im Tagesmodal (js/calendar.js) — bewusst zurückhaltend/monochrom statt
   Googles Markenfarben, passend zum Cozy-Designprinzip aus
   AI documentation/calendar.md ("Nicht wie Google Calendar").
========================= */

#gcal-settings-body.collapsed { display: none; }

.gcal-hint { font-size: calc(12px * var(--core-font-scale)); color: var(--text-3); line-height: 1.5; margin: 0 0 10px; }
.gcal-hint code { font-size: calc(11.5px * var(--core-font-scale)); background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; }

.gcal-connect-row { display: flex; gap: 8px; align-items: center; }

#gcal-connect-error, #gcal-sync-error {
  font-size: calc(12px * var(--core-font-scale)); color: var(--prio-1); margin-top: 8px; display: none;
}

.gcal-account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.gcal-account-email { font-size: calc(13.5px * var(--core-font-scale)); color: var(--text); font-weight: 500; }

.gcal-subhead {
  font-size: calc(10.5px * var(--core-font-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); margin: 14px 0 8px;
}
.gcal-subhead:first-child { margin-top: 0; }

.gcal-calendar-list { display: flex; flex-direction: column; gap: 2px; }
.gcal-calendar-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 2px; cursor: pointer; font-size: calc(13px * var(--core-font-scale)); color: var(--text);
}
.gcal-calendar-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gcal-calendar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gcal-sync-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

/* =========================
   Kalenderansicht — Google-Termine
   Bewusst KEINE neue Pill-Variante — Kennzeichnung folgt demselben
   Präfix-Muster wie bei wiederkehrenden Terminen ('↻ ', siehe calendar.js),
   hier 'Ⓖ ' vor dem Titel. Termine sehen dadurch aus wie jeder andere
   Nook-Termin (inkl. Farbe aus dem jeweiligen Google-Kalender), nur der
   Tagesmodal-Badge unten und der Link statt Bearbeiten/Löschen
   unterscheiden sie zusätzlich — analog zu den bereits bestehenden
   Badges dort (.cal-day-ev-status/.cal-day-ev-range).
========================= */

.cal-day-ev-google-badge {
  font-size: calc(9.5px * var(--core-font-scale)); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); border: 1px solid var(--border); border-radius: 4px;
  padding: 0 4px; margin-left: 6px; display: inline-block; vertical-align: middle;
}

.cal-day-ev-google-link {
  font-size: calc(12px * var(--core-font-scale)); color: var(--sage-dark); background: none; border: none; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.cal-day-ev-google-link:hover { text-decoration: underline; }

/* =============================================================
   RESPONSIVE — gleiches Muster wie .settings-row in css/settings.css
============================================================= */
@media (max-width: 480px) {
  /* "In Bearbeitung"-Badge im Panel-Header darf auf sehr schmalen Screens
     umbrechen statt den Chevron aus dem Header zu drängen — nur dieser eine
     Header, nicht alle .panel-header hubweit. */
  #gcal-settings-header { flex-wrap: wrap; row-gap: 6px; }
  .gcal-connect-row, .gcal-account-row, .gcal-sync-actions { flex-wrap: wrap; }
}