/*
 * Coachonaut SaaS -- Kalender & Terminbuchung (Design im Theme).
 * 1:1-Nachbau des Design-Mockups. Eigener `cnct-cal-*`-Namespace, Farben
 * ausschliesslich ueber die globalen --cnct-*-Tokens (Light/Dark automatisch).
 * Markup + Daten liefert das Plugin (templates/calendar.php); hier liegt nur Design.
 */

.cnct-cal {
  --c-accent: var(--cnct-accent, #4F46E5);
  --c-accent-soft: var(--cnct-accent-soft, color-mix(in srgb, var(--c-accent) 9%, transparent));
  --c-card: var(--cnct-surface, #FFFFFF);
  --c-border: var(--cnct-border, #E7E4DF);
  --c-border2: var(--cnct-border-soft, #EFEDE9);
  --c-text: var(--cnct-text, #1B1A18);
  --c-text2: var(--cnct-text-soft, #6E6A64);
  --c-text3: color-mix(in srgb, var(--cnct-text-soft, #6E6A64) 62%, transparent);
  --c-hover: color-mix(in srgb, var(--cnct-text, #1B1A18) 5%, transparent);
  --c-shadow: var(--cnct-shadow-sm, 0 1px 2px rgba(24, 20, 16, .05));
  --c-radius: 12px;
  --c-session: var(--cnct-accent, #4F46E5);
  --c-initial: var(--cnct-warning, #B45309);
  --c-group: var(--cnct-teal, #0D9488);

  font-family: var(--cnct-font-sans, 'Geist', system-ui, -apple-system, sans-serif);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  max-width: 1128px;
  margin: 0 auto;
  padding: 34px 40px 60px;
}
.cnct-cal *, .cnct-cal *::before, .cnct-cal *::after { box-sizing: border-box; }
.cnct-cal a { text-decoration: none; color: var(--c-accent); }

@keyframes cnct-cal-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Event-Farbpunkte */
.cnct-cal-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.cnct-cal-dot--session { background: var(--c-session); }
.cnct-cal-dot--initial { background: var(--c-initial); }
.cnct-cal-dot--group { background: var(--c-group); }

/* Karten */
.cnct-cal-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
}

/* Header */
.cnct-cal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cnct-cal-header__title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--c-text); }
.cnct-cal-header__meta { margin-top: 5px; font-size: 13.5px; color: var(--c-text2); }
.cnct-cal-header__actions { display: flex; gap: 8px; flex: none; }
.cnct-cal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  border: 1px solid var(--c-border); background: var(--c-card); color: var(--c-text);
  box-shadow: var(--c-shadow); transition: background .12s;
}
.cnct-cal-btn:hover { background: var(--c-hover); color: var(--c-text); }
/* :link/:visited erhoehen die Spezifitaet ueber die allgemeine `.cnct-cal a`-Regel
   hinaus, die sonst die weisse Schrift auf dem blauen Primaer-Button ueberschreibt
   (Button ist ein <a>-Element). */
.cnct-cal-btn--primary,
.cnct-cal-btn--primary:link,
.cnct-cal-btn--primary:visited { border: none; background: var(--c-accent); color: #fff; box-shadow: none; }
.cnct-cal-btn--primary:hover { filter: brightness(1.08); background: var(--c-accent); color: #fff; }
.cnct-cal-btn svg { width: 14px; height: 14px; }

/* Toolbar */
.cnct-cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 14px; flex-wrap: wrap; }
.cnct-cal-nav { display: flex; align-items: center; gap: 8px; }
.cnct-cal-navbtn {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--c-border);
  background: var(--c-card); color: var(--c-text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cnct-cal-navbtn:hover { background: var(--c-hover); color: var(--c-text); }
.cnct-cal-navbtn svg { width: 13px; height: 13px; }
.cnct-cal-month { font-size: 15.5px; font-weight: 600; margin-left: 6px; color: var(--c-text); }
.cnct-cal-today {
  margin-left: 8px; padding: 4px 11px; border-radius: 7px; border: 1px solid var(--c-border);
  background: var(--c-card); color: var(--c-text2); font-size: 12px; font-weight: 500;
}
.cnct-cal-today:hover { background: var(--c-hover); color: var(--c-text); }
.cnct-cal-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--c-text2); flex-wrap: wrap; }
.cnct-cal-legend__item { display: flex; align-items: center; gap: 6px; }

/* Grid */
.cnct-cal-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 16px; align-items: start; }

/* Monatskalender */
.cnct-cal-month-card { overflow: hidden; }
.cnct-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); }
.cnct-cal-weekday { padding: 10px 12px 8px; font-size: 11.5px; font-weight: 600; color: var(--c-text3); }
.cnct-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cnct-cal-day {
  min-height: 88px; padding: 8px 10px; position: relative;
  border-top: 1px solid var(--c-border2); border-left: 1px solid var(--c-border2);
  cursor: pointer; transition: background .12s; color: var(--c-text);
  display: block;
}
.cnct-cal-day:nth-child(7n+1) { border-left: 0; }
.cnct-cal-day:hover { background: var(--c-hover); }
.cnct-cal-day--empty { background: transparent; cursor: default; }
.cnct-cal-day--empty:hover { background: transparent; }
.cnct-cal-day__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; font-size: 12.5px; color: var(--c-text);
}
.cnct-cal-day.is-today .cnct-cal-day__num { background: var(--c-accent); color: #fff; border-radius: 50%; font-weight: 600; }
.cnct-cal-day.is-selected { box-shadow: inset 0 0 0 2px var(--c-accent); background: var(--c-accent-soft); }
.cnct-cal-day__dots { display: flex; gap: 3px; margin-top: 7px; }
.cnct-cal-day__dots .cnct-cal-dot { width: 6px; height: 6px; }
.cnct-cal-day__label { display: block; margin-top: 5px; font-size: 10.5px; color: var(--c-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rechte Spalte */
.cnct-cal-side { display: flex; flex-direction: column; gap: 16px; }
.cnct-cal-cardhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.cnct-cal-cardhead__title { font-size: 14px; font-weight: 600; color: var(--c-text); }
.cnct-cal-count { font-size: 11.5px; font-weight: 600; color: var(--c-accent); background: var(--c-accent-soft); padding: 2px 8px; border-radius: 99px; }

.cnct-cal-event { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--c-border2); }
.cnct-cal-event__time { width: 46px; flex: none; }
.cnct-cal-event__time strong { display: block; font-size: 13px; font-weight: 600; }
.cnct-cal-event__time span { font-size: 11px; color: var(--c-text3); }
.cnct-cal-event__body { flex: 1; min-width: 0; }
.cnct-cal-event__body strong { display: block; font-size: 13px; font-weight: 500; }
.cnct-cal-event__body span { font-size: 11.5px; color: var(--c-text2); }
.cnct-cal-empty { padding: 18px; border-top: 1px solid var(--c-border2); font-size: 12.5px; color: var(--c-text2); }

/* Freie Slots + Anlegen-Formular */
.cnct-cal-slots { padding: 14px 18px; border-top: 1px solid var(--c-border2); scroll-margin-top: 20px; }
.cnct-cal-slots__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text3); margin-bottom: 9px; }
.cnct-cal-slots__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cnct-cal-slots__empty, .cnct-cal-slots__hint { margin: 4px 0 0; font-size: 12px; color: var(--c-text2); line-height: 1.5; }
.cnct-cal-slots__hint { margin-top: 10px; }
.cnct-cal-slot {
  padding: 5px 12px; border-radius: 7px; border: 1px solid var(--c-border);
  background: transparent; color: var(--c-text); font-size: 12px; font-weight: 500;
  cursor: pointer; display: inline-flex; align-items: center;
}
.cnct-cal-slot:hover { border-color: var(--c-accent); color: var(--c-accent); }
.cnct-cal-slot.is-static { cursor: default; }
.cnct-cal-slot.is-static:hover { border-color: var(--c-border); color: var(--c-text); }
.cnct-cal-slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.cnct-cal-slot:has(input:checked) { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); font-weight: 600; }

.cnct-cal-create-form { display: block; }
.cnct-cal-field { display: grid; gap: 6px; margin-top: 12px; }
.cnct-cal-field > span { font-size: 12px; font-weight: 600; color: var(--c-text); }
.cnct-cal-field select, .cnct-cal-field textarea {
  width: 100%; border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-card); color: var(--c-text); font: inherit; font-size: 13px; padding: 8px 12px;
}
.cnct-cal-field select { height: 40px; padding: 0 12px; }
.cnct-cal-field textarea { resize: vertical; min-height: 52px; }
.cnct-cal-field select:focus, .cnct-cal-field textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
}
.cnct-cal-create-btn {
  margin-top: 12px; width: 100%; padding: 8px 0; border-radius: 8px; border: none;
  background: var(--c-accent); color: #fff; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.cnct-cal-create-btn:hover { filter: brightness(1.08); }

/* Naechste Termine */
.cnct-cal-cardhead--plain { justify-content: flex-start; }
.cnct-cal-upcoming { display: flex; align-items: center; gap: 13px; padding: 10px 18px; border-top: 1px solid var(--c-border2); }
.cnct-cal-upcoming__date { width: 34px; flex: none; text-align: center; }
.cnct-cal-upcoming__wd { font-size: 10.5px; color: var(--c-text3); text-transform: uppercase; font-weight: 600; }
.cnct-cal-upcoming__day { font-size: 15px; font-weight: 600; }
.cnct-cal-upcoming__body { flex: 1; min-width: 0; }
.cnct-cal-upcoming__body strong { display: block; font-size: 12.5px; font-weight: 500; }
.cnct-cal-upcoming__body span { font-size: 11.5px; color: var(--c-text2); }
.cnct-cal-upcoming__time { font-size: 12px; color: var(--c-text2); flex: none; }

/* Responsive */
@media (max-width: 1000px) {
  .cnct-cal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cnct-cal { padding: 20px 16px 40px; }
  .cnct-cal-header { flex-direction: column; }
  .cnct-cal-day { min-height: 64px; }
  .cnct-cal-day__label { display: none; }
}