/* CSS Document */

/* ── WeJobbr Cally Theme ── */

calendar-multi,
calendar-date,
calendar-range {
  --color-accent: #092c33;
  --color-text-on-accent: #ffffff;
  font-family: inherit;
  inline-size: 100%;
}

/* ── Monatsüberschrift ── */
calendar-month::part(heading) {
  font-size: 13px;
  font-weight: 700;
  color: #092c33;
  letter-spacing: 0.03em;
}

/* ── Navigation: Container ── */
calendar-date::part(header),
calendar-multi::part(header),
calendar-range::part(header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

calendar-date::part(heading) {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

calendar-select-month::part(select),
calendar-select-year::part(select) {
  font: inherit;
  color: #092c33;
  background: #fff;
  border: 1px solid var(--tp-border, #d0e8e6);
  border-radius: 6px;
  padding: 2px 4px;
  max-width: 7.5rem;
}

/* ── Nav-Buttons (Vor/Zurück) ── */
calendar-date::part(button),
calendar-multi::part(button),
calendar-range::part(button) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #6b9a96;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
calendar-date::part(button):hover,
calendar-multi::part(button):hover,
calendar-range::part(button):hover {
  background: rgba(117, 196, 188, 0.15);
  color: #092c33;
}
calendar-date::part(button disabled),
calendar-multi::part(button disabled),
calendar-range::part(button disabled) {
  opacity: 0.3;
  cursor: default;
}

/* ── Tabelle ── */
calendar-month::part(table) {
  border-collapse: collapse;
  width: 100%;
}

/* ── Wochentag-Header ── */
calendar-month::part(th) {
  font-size: 11px;
  font-weight: 600;
  color: #6b9a96;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: 4px;
  width: 36px;
  height: 28px;
}

/* ── Zellen ── */
calendar-month::part(td) {
  padding: 1px;
}

/* ── Tage (Buttons) ── */
calendar-month::part(button) {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #092c33;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
calendar-month::part(button):hover {
  background: rgba(117, 196, 188, 0.18);
  color: #092c33;
}

/* ── Heute ── */
calendar-month::part(today) {
  font-weight: 700;
  color: #75c4bc;
  border: 1.5px solid #75c4bc;
}

/* ── Ausgewählt ── */
calendar-month::part(selected) {
  background: #092c33 !important;
  color: #ffffff !important;
  border-radius: 8px;
}

/* ── Außerhalb des Monats ── */
calendar-month::part(outside) {
  opacity: 0.25;
}

/* ── Disabled / nicht erlaubt ── */
calendar-month::part(disallowed),
calendar-month::part(button):disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* ── Range: Start & Ende ── */
calendar-month::part(range-start),
calendar-month::part(range-end) {
  background: #092c33 !important;
  color: #fff !important;
  border-radius: 8px;
}

/* ── Range: Innen ── */
calendar-month::part(range-inner) {
  background: rgba(117, 196, 188, 0.2);
  border-radius: 0;
  color: #092c33;
}