/**
 * control-datepicker.css — eigenständiges Styling für den DatePicker-Dialog
 * aus control-datepicker.js.
 *
 * Das komplette Markup wird von control-datepicker.js erzeugt; diese Datei
 * enthält bewusst kein eigenes HTML-Beispiel, weil der Dialog ausschließlich
 * über die JS-API (ControlDatePicker.open()) erzeugt/geöffnet wird.
 *
 * Theming: eigenständig lauffähig (Fallback-Werte für alle var()-Aufrufe),
 * übernimmt aber automatisch --color-primary/--color-surface/--color-text/
 * --color-text-muted/--color-border des Hosts, falls vorhanden. Nutzt eigene,
 * mit "dp-" geprefixte Button-Klassen statt eines externen Button-Systems.
 * Die Navigationspfeile sind ein eingebettetes SVG (CSS-Mask mit currentColor-
 * artiger Einfärbung über --dp-nav-icon-color) statt externer Bilddateien.
 */

:root {
  --dp-radius: 8px;
  --dp-nav-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 4.5L8 12l7.5 7.5 1.5-1.5L11 12l6-6z'/%3E%3C/svg%3E");
  --dp-nav-icon-color: var(--color-text, #222);
}

#dp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#dp-overlay * {
  box-sizing: border-box;
}
#dp-overlay.open {
  display: flex;
}

#dp-panel {
  background: var(--color-surface, #fff);
  border-radius: 12px;
  padding: 20px 16px 16px;
  width: 308px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

#dp-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted, #888);
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

#dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 6px;
}

#dp-month-btn {
  background: none;
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: var(--dp-radius);
  cursor: pointer;
  padding: 0 10px;
  height: 34px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--color-text, #222);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
}

#dp-nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.dp-nav-btn {
  background: none;
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: var(--dp-radius);
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--color-text, #222);
  font-family: inherit;
  line-height: 1;
  padding: 0;
}
.dp-nav-btn.dp-today-btn {
  width: auto;
  padding: 0 10px;
  font-size: 0.8rem;
}

.dp-nav-icon {
  width: 14px;
  height: 14px;
  display: block;
  background-color: var(--dp-nav-icon-color);
  opacity: 0.7;
  -webkit-mask-image: var(--dp-nav-icon-url);
  mask-image: var(--dp-nav-icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.dp-nav-icon.dp-icon-next {
  transform: scaleX(-1);
}

#dp-weekdays {
  display: grid;
  grid-template-columns: 22px repeat(7, 1fr);
  height: 20px;
  align-items: center;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted, #888);
  margin-bottom: 6px;
  padding: 0 2px;
}

#dp-grid {
  display: grid;
  grid-template-columns: 22px repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  height: 216px;
  gap: 1px;
  padding: 0 2px;
}
.dp-kw {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--color-text-muted, #888);
  font-weight: 400;
}
.dp-day {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.92rem;
  font-family: inherit;
  background: none;
  border: none;
  color: var(--color-text, #222);
  transition: background 0.1s;
  padding: 0;
}
.dp-day:active {
  opacity: 0.7;
}
.dp-day.dp-today {
  box-shadow: inset 0 0 0 1.5px var(--color-primary, #2f6fed);
}
.dp-day.dp-selected {
  background: var(--color-primary, #2f6fed) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 0;
  box-shadow: none;
}
.dp-day.dp-empty {
  pointer-events: none;
}
.dp-day.dp-other {
  color: var(--color-text-muted, #888);
}

#dp-year-grid {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  height: 242px;
  overflow-y: auto;
  padding: 0 2px;
}
#dp-year-grid.open {
  display: grid;
}
.dp-year-btn {
  padding: 9px 4px;
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: var(--dp-radius);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-text, #222);
}
.dp-year-btn.dp-selected {
  background: var(--color-primary, #2f6fed);
  color: #fff;
  border-color: var(--color-primary, #2f6fed);
}

#dp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  gap: 8px;
}

/* ── generischer Button-Grundstil (keine Abhängigkeit von einem Host-.btn) ── */
.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1.5px solid var(--color-border, #ddd);
  border-radius: 6px;
  background: var(--color-surface, #fff);
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0 12px;
}
.dp-btn:active {
  opacity: 0.7;
}
.dp-btn-primary {
  background: var(--color-primary, #2f6fed);
  border-color: var(--color-primary, #2f6fed);
  color: #fff;
}