/* TermineTile — Kalender-Silhouette: Blatt je Zeile, Meta-Spalten, Status-Haarlinie. */

.termine-tile-body {
    container-type: inline-size;
    container-name: termine-tile;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.termine-toolbar {
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 0;
}

.pd-tile-card--fill .pd-tile-toolbar.termine-toolbar {
    align-items: stretch;
    min-height: 0;
}

.termine-toolbar .l-icon,
.termine-toolbar svg {
    flex-shrink: 0;
    align-self: center;
    color: var(--l-text-secondary);
}

.termine-filter-dropdown {
    flex: 0 1 11.5rem;
    width: 11.5rem;
    min-width: 0;
    max-width: 11.5rem;
    display: flex;
    align-items: stretch;
}

.termine-filter-dropdown .e-ddl,
.termine-filter-dropdown .e-input-group {
    width: 100%;
    max-width: 100%;
}

.termine-filter-count {
    font-size: var(--l-text-xs);
    font-weight: 400;
    color: var(--l-text-secondary);
    white-space: nowrap;
    align-self: center;
}

.termine-toolbar__actions {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
    margin-left: auto;
}

.termine-export-toolbar {
    display: inline-flex;
    align-items: stretch;
    height: auto;
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius-md);
    background: transparent;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
}

.termine-export-toolbar__label {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--l-space-sm);
    font-size: var(--l-text-xs);
    font-weight: 500;
    color: var(--l-text-secondary);
    white-space: nowrap;
    border-right: 1px solid var(--l-border);
    user-select: none;
    pointer-events: none;
}

.termine-export-toolbar__label--hint {
    pointer-events: auto;
    cursor: help;
}

.termine-export-toolbar__actions {
    display: inline-flex;
    align-items: stretch;
}

.termine-export-toolbar .termine-export-toolbar__btn.l-btn.l-btn--icon {
    height: 100%;
    width: 2rem;
    min-height: 0;
    min-width: 2rem;
    padding: 0;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    aspect-ratio: auto;
}

.termine-export-toolbar .termine-export-toolbar__btn.l-btn.l-btn--icon:not(:last-child) {
    border-right: 1px solid var(--l-border);
}

.termine-filter-empty {
    padding: 0.5rem 0.15rem;
    font-size: var(--l-text-sm);
    color: var(--l-text-secondary);
}

.termine-list-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.termine-day-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.termine-period {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.55rem 0 0.1rem;
    padding: 0 0.4rem;
    pointer-events: none;
    user-select: none;
}

.termine-period--year {
    margin-top: 0.95rem;
}

.termine-period__month {
    flex: 0 0 auto;
    font-size: var(--l-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--l-text-secondary);
    white-space: nowrap;
    line-height: 1;
}

.termine-period__year {
    flex: 0 0 auto;
    font-size: var(--l-text-xs);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--l-text-muted);
    white-space: nowrap;
    line-height: 1;
}

.termine-period::after {
    content: "";
    flex: 1 1 auto;
    align-self: center;
    height: 1px;
    min-width: 1.5rem;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--l-primary) 38%, var(--l-border-light)),
        var(--l-border-light) 18%,
        transparent 100%
    );
}

.termine-period--year::after {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--l-primary) 55%, var(--l-border-light)),
        var(--l-border-light) 22%,
        transparent 100%
    );
}

.termine-day {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.termine-day__blocks {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.termine-block {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: var(--l-radius-sm);
    border-left: 2px solid var(--l-text-secondary);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--l-transition-fast);
}

.termine-block:hover {
    background: var(--l-bg-hover);
}

.termine-block--upcoming {
    border-left-color: var(--l-info);
}

.termine-block--active {
    border-left-color: var(--l-success);
}

.termine-block--past {
    border-left-color: var(--l-text-secondary);
}

.termine-block--cancelled {
    border-left-color: var(--l-error);
}

/* Storno: Haarlinie allein reicht nicht — Zeile dämpfen, Pill bleibt klar. */
.termine-block--cancelled .termine-block__leaf,
.termine-block--cancelled .termine-block__clock,
.termine-block--cancelled .termine-meta {
    opacity: 0.65;
}

.termine-block--cancelled .termine-block__status--cancelled {
    opacity: 1;
}

/* Nach cancelled: Terminkonflikt-Akzent bleibt auch bei stornierten Konfliktzeilen sichtbar. */
.termine-block--conflict {
    border-left-color: var(--l-warning, #b45309);
}

.termine-block__leaf {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    padding: 0.35rem 0.15rem 0.3rem 0.4rem;
}

.termine-block__body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns:
        minmax(5.5rem, 1.05fr)
        minmax(5rem, 0.95fr)
        minmax(6.5rem, 1.45fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    padding: 0.35rem 0.55rem 0.35rem 0.55rem;
}

.termine-block--with-leaf .termine-block__body {
    padding-left: 0.4rem;
}

.termine-block__clock {
    grid-column: 1 / -1;
    grid-row: 1;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    font-size: var(--l-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--l-text);
    white-space: nowrap;
}

.termine-block__weekday {
    font-weight: 600;
    color: var(--l-text);
}

.termine-block__clock-range {
    font-variant-numeric: tabular-nums;
}

.termine-block__status {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.08rem 0.4rem;
    border-radius: var(--l-radius-full);
    font-size: var(--l-text-xs);
    font-weight: 600;
    line-height: 1.2;
    background: var(--l-bg-surface);
    border: 1px solid var(--l-border-light);
    color: var(--l-text-secondary);
}

.termine-block__status--conflict {
    background: var(--l-warning-bg, #fff3cd);
    color: var(--l-warning-text, #856404);
    border-color: transparent;
    flex-shrink: 0;
}

.termine-block__status--active {
    background: var(--l-success-bg);
    color: var(--l-success);
    border-color: transparent;
}

.termine-block__status--upcoming {
    background: var(--l-info-bg);
    color: var(--l-info);
    border-color: transparent;
}

/* Abgelaufen — Error-Rot wie pd-status-badge--danger / KPI-Danger */
.termine-block__status--expired {
    background: var(--l-error-bg);
    color: var(--l-error);
    border-color: transparent;
}

/* Gebucht — Markengrün (primary), klar getrennt von „Termine verfügbar“ (success) */
.termine-block__status--booked {
    background: var(--l-primary-soft);
    color: var(--l-primary);
    border-color: transparent;
}

.termine-block__status--cancelled {
    background: var(--l-error-bg);
    color: var(--l-error);
    border-color: transparent;
}

/* Sofort-Hover (Gebucht / Verschickt) — am body, kein title-Delay */
.wl-instant-hint {
    position: fixed;
    z-index: 10050;
    min-width: 12rem;
    max-width: min(20rem, 90vw);
    padding: 0.5rem 0.65rem 0.55rem;
    background: var(--l-bg-elevated, #fff);
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius-sm);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    color: var(--l-text-primary, #333);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.wl-instant-hint--visible {
    opacity: 1;
    visibility: visible;
}

.wl-instant-hint__title {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--l-text-secondary);
}

.wl-instant-hint__body {
    color: var(--l-text-primary, #333);
}

.termine-recipe-visit-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.08rem 0.4rem;
    border-radius: var(--l-radius-full);
    font-size: var(--l-text-xs);
    font-weight: 600;
    line-height: 1.2;
    color: var(--l-primary);
    background: var(--l-primary-soft);
    white-space: nowrap;
}

.termine-session-index {
    flex-shrink: 0;
    margin-left: auto;
    font-size: var(--l-text-xs);
    font-weight: 600;
    color: var(--l-text-secondary);
    white-space: nowrap;
}

.termine-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.termine-meta--therapy,
.termine-meta--therapist,
.termine-meta--billing {
    grid-row: 2;
    min-width: 0;
}

.termine-meta--billing {
    display: flex;
    width: 100%;
}

.termine-meta__value {
    font-size: var(--l-text-xs);
    font-weight: 400;
    color: var(--l-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.termine-meta__value--warning {
    color: var(--l-warning);
}

.termine-bulk-edit-check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.45rem 0.15rem 0.45rem 0.35rem;
}

.termine-bulk-edit-check .l-checkbox {
    gap: 0;
}

.termine-bulk-edit-check .l-checkbox__input {
    pointer-events: auto;
}

.termine-bulk-edit-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--l-space-xs);
    padding: var(--l-space-xs) 0.15rem 0;
    border-top: 1px solid var(--l-border);
    background: var(--l-bg-surface);
}

.termine-bulk-edit-footer__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.2rem;
    min-height: 2.25rem;
    min-width: 0;
}

.termine-bulk-edit-footer__actions .l-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 0.25rem;
}

.termine-bulk-edit-footer__actions .l-btn.is-active:not(:disabled) {
    background: var(--l-bg-elevated);
    color: var(--l-primary);
    border-color: var(--l-border);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
}

.termine-bulk-edit-footer__actions-end {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.15rem;
    min-width: 0;
}

.termine-bulk-edit-footer__range {
    display: flex;
    align-items: end;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
}

.termine-bulk-edit-footer__field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 0;
    min-width: 5.75rem;
    max-width: 8.5rem;
    font-size: var(--l-text-xs);
    font-weight: 500;
    color: var(--l-text-secondary);
}

/* Von/Bis-Hilfstext nur bei Kachelhöhe > 1 (termine-tile-body--tall). */
.termine-bulk-edit-footer__field-label {
    display: none;
}

.termine-tile-body--tall .termine-bulk-edit-footer__field-label {
    display: inline;
}

.termine-bulk-edit-footer__field--optional .termine-bulk-edit-footer__optional-mark {
    margin-left: 0.25rem;
    font-weight: 400;
    font-style: italic;
    color: var(--l-text-muted, var(--l-text-secondary));
    opacity: 0.85;
}

.termine-bulk-edit-footer__field--optional.is-open-ended .e-input-group,
.termine-bulk-edit-footer__field--optional.is-open-ended .e-control-wrapper {
    border-style: dashed;
    background: color-mix(in srgb, var(--l-bg-surface) 70%, transparent);
}

.termine-bulk-edit-footer__field--optional.is-open-ended input.e-input::placeholder {
    font-style: italic;
    color: var(--l-text-muted, var(--l-text-secondary));
}

.termine-bulk-edit-footer__field .e-input-group,
.termine-bulk-edit-footer__field .e-control-wrapper,
.termine-bulk-edit-footer__field .e-datepicker {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.termine-bulk-edit-footer__range .l-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Wie .pd-medibild-preview__canvas / .ziel-row: <button> ohne UA-/Bootstrap-Chrome */
.termine-availability {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--l-radius-sm);
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.termine-availability:hover {
    background: var(--l-bg-hover);
}

.termine-availability:focus-visible {
    outline: 2px solid var(--l-primary);
    outline-offset: 2px;
}

.pd-tile-card--fill .termine-tile-body .pd-tab-content--fill > * {
    flex: 1 1 auto;
    min-height: 0;
}

.pd-availability-visual {
    padding: 0.25rem 0.1rem 0;
}

.pd-availability-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pd-availability-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pd-availability-row__day {
    width: 1.5rem;
    font-size: var(--l-text-xs);
    font-weight: 600;
    color: var(--l-text-secondary);
    text-align: right;
}

.pd-availability-row__bar {
    flex: 1;
    height: 0.75rem;
    background: var(--l-bg-surface);
    border-radius: var(--l-radius-sm);
    position: relative;
    border: 1px solid var(--l-border-light);
}

.pd-availability-block {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--l-primary);
    border-radius: var(--l-radius-sm);
    opacity: 0.85;
}

.pd-availability-block:hover {
    opacity: 1;
}

.pd-availability-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    padding-left: 2rem;
    font-size: var(--l-text-xs);
    color: var(--l-text-secondary);
}

.pd-availability-exceptions {
    margin: 0;
    font-size: var(--l-text-xs);
    color: var(--l-text-secondary);
}

@container termine-tile (max-width: 27.99rem) {
    .termine-block__leaf {
        padding-left: 0.3rem;
        padding-right: 0.1rem;
    }

    .termine-block__body {
        grid-template-columns:
            minmax(4.5rem, 1fr)
            minmax(4rem, 0.85fr)
            minmax(5.25rem, 1.35fr);
        column-gap: 0.5rem;
        padding-right: 0.4rem;
        padding-left: 0.3rem;
    }

    .termine-toolbar {
        gap: 0.35rem;
    }

    .termine-toolbar__actions {
        margin-left: auto;
        flex-shrink: 0;
    }

    .termine-filter-count {
        display: none;
    }

    .termine-filter-dropdown {
        flex: 1 1 6.75rem;
        width: auto;
        min-width: 6.75rem;
        max-width: 12rem;
    }

    .termine-bulk-edit-footer__actions .l-btn,
    .termine-bulk-edit-footer__range .l-btn {
        padding: 0.15rem 0.3rem;
        font-size: 0.7rem;
        gap: 0.15rem;
    }

    .termine-bulk-edit-footer__field {
        min-width: 5.25rem;
        max-width: none;
    }

    .termine-bulk-edit-footer__range {
        align-items: center;
        gap: 0.25rem;
    }
}

.termine-tile-body--tall .termine-bulk-edit-footer__range {
    align-items: end;
}

@container termine-tile (max-width: 21.99rem) {
    .termine-bulk-edit-footer__label {
        display: none;
    }
}

@container termine-tile (min-width: 40rem) {
    .termine-block__body {
        grid-template-columns:
            minmax(6.5rem, 1.05fr)
            minmax(6rem, 1fr)
            minmax(7.5rem, 1.45fr);
        column-gap: 1rem;
    }
}

/* Warteliste-Tab im Terminmanagement */
.termine-waitlist {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.termine-waitlist__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.25rem;
}

/* Zeilen nicht in der Tile-Höhe zusammendrücken — scrollt .pd-tile-scroll. */
.termine-waitlist__row {
    flex-shrink: 0;
}

.termine-waitlist__row .termine-block__body {
    gap: 0.25rem;
}

/* Zeile 3: Status + Verschickt immer nebeneinander (nicht mit Meta umbrechen). */
.termine-waitlist__status-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    width: 100%;
    min-width: 0;
}

.termine-waitlist__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    width: 100%;
}

.termine-waitlist__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    margin-left: auto;
}

.termine-waitlist__offer {
    flex-shrink: 0;
    font-size: var(--l-text-xs);
}