/* ════════════════════════════════════════════════════════════════════════
   components-calendar.css — Event-Kalender: Header-Öffner + Slide-in-Panel.
   Markup: includes/calendar-panel.php + Button in includes/header.php.
   Verhalten: js/shared/calendar.js. Gold-Leitfarbe; --success NUR „läuft jetzt".
   ════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ══ Header-Öffner ════════════════════════════════════════════════════
     Reines Icon, EXAKT die .user-btn-Box (components-base.css) — wie der Editier-
     Umschalter (.page-writer-toggle): 42px, gleiches padding/border/radius/font →
     identische Höhe/Breite, reiht sich bündig in Sprach-Switch + Konto-Knopf ein. */
  .cal-open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    padding: 5px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card-2);
    color: var(--text-2);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;

    /* Icon = 1 Zeilenkasten (0.8rem × 1.6), wie der Text-Glyph in .user-btn → Höhe stimmt aufs Pixel. */
    & svg {
      width: calc(0.8rem * 1.6);
      height: calc(0.8rem * 1.6);
    }

    &:hover {
      color: var(--text-1);
      border-color: var(--border-accent);
    }

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
  }

  /* ══ Overlay + Drawer-Panel ═══════════════════════════════════════════ */
  .cal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(0 0 0 / 62%);
    opacity: 0;
    transition: opacity 0.25s;

    &.open { opacity: 1; }
  }

  .cal-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: min(410px, 92vw);
    background: linear-gradient(180deg, var(--bg-surface), var(--bg-base));
    border-left: 1px solid var(--border-accent);
    box-shadow: -30px 0 80px -30px rgb(0 0 0 / 70%);
    transform: translateX(100%);
    transition: transform 0.28s ease;

    &.open { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cal-overlay,
    .cal-panel { transition: none; }
  }

  /* ── Kopf ─────────────────────────────────────────────────────────── */
  .cal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .cal-title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-md);
    letter-spacing: 0.05em;
    color: var(--accent-bright);
  }

  /* Zwei Zeitzeilen (Deine Zeit · Serverzeit): nebeneinander, wenn Platz — sonst Umbruch (flex-wrap). */
  .cal-clocks {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    margin-top: 4px;
  }

  .cal-clock {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }

  .cal-clock--server { color: var(--text-3); }
  .cal-clock-time { color: var(--text-1); }

  /* Schließen-× des Kalender-Panels = der geteilte .evpw-close (evpw-ui.css); .cal-head ist space-between
     → rutscht von selbst nach rechts, kein eigener Hook nötig (Fokusring global aus base.css). */

  /* ── Segmented-Control (Als Nächstes / Wochenplan) ──────────────────── */
  .cal-seg {
    display: flex;
    gap: 4px;
    padding: 12px 16px 0;
    flex-shrink: 0;
  }

  .cal-seg-btn {
    flex: 1;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 9px 0;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;

    &.is-on {
      color: var(--bg-base);
      background: linear-gradient(180deg, var(--accent-bright), var(--accent));
      border-color: transparent;
    }

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
  }

  /* ── Wochentag-Chips ────────────────────────────────────────────────── */
  .cal-days {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 14px 16px 4px;
    flex-shrink: 0;
  }

  .cal-day {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 5px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;

    &:hover {
      color: var(--text-1);
      border-color: var(--border-accent);
    }

    &.is-on {
      color: var(--accent-bright);
      border-color: var(--border-accent);
      background: var(--accent-glow);
    }

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
  }

  /* ── Karten-Bereich ─────────────────────────────────────────────────── */
  .cal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 20px;
  }

  .cal-ev {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 15px;
    margin-top: 10px;

    &.is-live {
      border-color: rgb(63 185 80 / 40%);
      background: linear-gradient(180deg, var(--success-dim), var(--bg-card));
    }
  }

  .cal-ev-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .cal-ev-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .cal-ev-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--accent-bright);
  }

  .cal-ev.is-live .cal-ev-name { color: var(--text-1); }

  /* Verlinkter Kartentitel (target_slug gesetzt) — Gold bleibt, Unterstreichung erst bei Hover/Fokus
     als Link-Affordanz. Kein Icon. */
  a.cal-ev-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }

  /* Art-Badge (boss/maintenance) — dezent, bedeutungstragende Signalfarbe (FARBKONZEPT). */
  .cal-kind {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 1px 7px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-3);
  }

  .cal-kind--boss {
    color: var(--c-amber);
    border-color: rgb(251 191 36 / 30%);
  }

  .cal-dated,
  .cal-respawn {
    margin-top: 10px;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  /* Ganztägig-Marker in der Datumszeile — dezente Pille, gleiche Signal-Sprache wie die Art-Badges. */
  .cal-allday {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 1px 7px;
    margin-right: 4px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-3);
  }

  .cal-countdown {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .cal-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--success);
    background: var(--success-dim);
    border: 1px solid rgb(63 185 80 / 35%);
    border-radius: var(--radius);
    padding: 3px 9px 3px 7px;
    font-variant-numeric: tabular-nums;
  }

  .cal-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgb(63 185 80 / 55%);
    animation: cal-pulse 2s infinite;
  }

  @keyframes cal-pulse {
    0% { box-shadow: 0 0 0 0 rgb(63 185 80 / 55%); }
    70% { box-shadow: 0 0 0 7px rgb(63 185 80 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(63 185 80 / 0%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cal-pulse { animation: none; }
  }

  .cal-times {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .cal-time {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    color: var(--accent);
    background: rgb(0 0 0 / 35%);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-variant-numeric: tabular-nums;

    &.is-next {
      color: var(--bg-base);
      background: var(--accent);
      border-color: transparent;
    }
  }

  .cal-dur {
    margin: 8px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .cal-rewards {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .cal-reward {
    font-size: var(--fs-xs);
    color: var(--text-2);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 9px;
  }

  /* Agenda-Tagesgruppierung in „Als Nächstes" — dezenter Datums-Header über den Karten eines Tages
     („Läuft gerade" · „Heute" · „Morgen" · „Wochentag · DD. Mon"). Gold als Leitfarbe, Trennlinie. */
  .cal-group {
    margin: 22px 0 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-bright);

    &:first-child {
      margin-top: 2px;
    }
  }

  .cal-empty {
    margin: 0;
    padding: 34px 0;
    text-align: center;
    font-style: italic;
    color: var(--text-2);
    font-size: var(--fs-base);
  }

  /* ══════════════════════════════════════════════════════════════════════
     Dashboard-Verwaltung (editor) — Inline-CRUD, kein Modal.
     ══════════════════════════════════════════════════════════════════════ */
  .calm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .calm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* „Ganztägig"-Checkbox über den dated-Feldern — etwas Luft nach unten zum Datums-Grid. */
  .calm-allday-row {
    margin-bottom: 4px;
  }

  /* Guide-Slug-Feld mit Seiten-Vorschlägen — Dropdown unter dem Textfeld (dieselbe Datenquelle wie der
     Querverweis-Picker; freie Eingabe bleibt möglich, es wird keine Seite angelegt). */
  .calm-slug-picker {
    position: relative;
  }

  .calm-slug-list {
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    top: calc(100% + 2px);
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
  }

  .calm-slug-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;

    &:hover,
    &:focus-visible {
      background: var(--accent-glow);
    }
  }

  .calm-slug-item-title {
    overflow: hidden;
    color: var(--text-1);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calm-slug-item-slug {
    color: var(--text-3);
    font-size: var(--fs-xs);
    white-space: nowrap;
  }

  /* Redaktionelle Serverzeit (global) — dezenter Einstellungs-Kasten über der Event-Liste. */
  .calm-server-tz {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .calm-server-tz .evpw-select {
    max-width: 340px;
  }

  .calm-empty {
    margin: 0;
    padding: 26px 0;
    text-align: center;
    font-style: italic;
    color: var(--text-2);
  }

  /* ── zugeklappte Zeile ─────────────────────────────────────────────── */
  .calm-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
  }

  .calm-move-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .calm-move {
    width: 22px;
    height: 18px;
    line-height: 1;
    font-size: var(--fs-xs);
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;

    &:hover:not(:disabled) {
      color: var(--accent-bright);
      border-color: var(--border-accent);
    }

    &:disabled {
      opacity: 0.3;
      cursor: default;
    }
  }

  .calm-row-main { min-width: 0; }

  .calm-row-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text-1);
  }

  .calm-row-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 4px;
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .calm-tag {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    letter-spacing: 0.03em;
    color: var(--text-2);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 7px;
  }

  .calm-tag--kind {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--c-amber);
    border-color: rgb(251 191 36 / 30%);
  }

  .calm-row-times {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  /* ── aufgeklapptes Inline-Formular ─────────────────────────────────── */
  .calm-form {
    background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    padding: 18px;
  }

  .calm-form-head {
    margin-bottom: 16px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .calm-field { margin-bottom: 15px; }

  .calm-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
  }

  @media (width <= 560px) {
    .calm-field-grid { grid-template-columns: 1fr; }
  }

  .calm-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .calm-hint {
    margin: 6px 0 0;
    font-size: var(--fs-xs);
    color: var(--text-3);
  }

  .calm-durmin { max-width: 160px; }

  .calm-rewards {
    min-height: 84px;
    resize: vertical;
    line-height: 1.6;
  }

  /* Wochentag-Picker (Mehrfachauswahl) */
  .calm-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .calm-pick {
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    background: rgb(0 0 0 / 25%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 13px;
    cursor: pointer;

    &.is-on {
      color: var(--bg-base);
      background: linear-gradient(180deg, var(--accent-bright), var(--accent));
      border-color: transparent;
    }
  }

  /* Zeiten-Editor */
  .calm-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }

  .calm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    color: var(--accent);
    background: rgb(0 0 0 / 30%);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
    padding: 4px 6px 4px 10px;
    font-variant-numeric: tabular-nums;
  }

  .calm-chip-x {
    padding: 0;
    line-height: 1;
    font-size: var(--fs-xs);
    color: var(--text-3);
    background: none;
    border: none;
    cursor: pointer;

    &:hover { color: var(--danger); }
  }

  .calm-time-add {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }

  .calm-time-input { width: 6.5em; }

  .calm-chip-add {
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    color: var(--text-2);
    background: transparent;
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    cursor: pointer;

    &:hover { color: var(--accent-bright); }
  }

  /* Fußleiste: Löschen links · Speichern · Abbrechen rechts */
  .calm-form-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .calm-form-spacer { flex: 1; }

  .calm-msg {
    display: block;
    flex-basis: 100%;
    margin-top: 6px;
    font-size: var(--fs-sm);
  }

  .calm-msg-err { color: var(--danger); }
}