/* ═══════════════════════════════════════════════════════════════════════════════
   Patient Dashboard Styles (pd-* prefix)
   Lindebergs Design System v2.0 - Light Theme
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Grid Layout */
.pd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

@media (max-width: 1400px) {
  .pd-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .pd-grid {
    grid-template-columns: 1fr;
  }
}

.pd-grid__cell {
  min-width: 0;
  display: flex;
}

.pd-grid__cell > * {
  flex: 1;
}

.pd-grid__cell--disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(50%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Tile Card (SfCard basiert)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-tile-card {
  height: 100%;
  background-color: var(--l-bg-elevated) !important;
  border: 1px solid var(--l-border-light) !important;
  position: relative;
  border-radius: var(--l-radius-md);
}

.pd-tile-card > * {
  justify-content: flex-start !important;
}

.pd-tile-card .e-card-header {
  padding: 0.5rem 0.75rem !important;
  background-color: var(--l-bg-surface) !important;
  border-bottom: 1px solid var(--l-border-light) !important;
  min-height: auto !important;
  align-items: flex-start !important;
}

.pd-tile-card .e-card-content {
  padding: 0.75rem !important;
  max-height: 400px;
  overflow-y: auto;
}

.pd-tile-card.rezepte-tile-frame .e-card-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem !important;
  max-height: 400px;
  min-height: 0;
}

/* Syncfusion-Wrapper + Rezepte-Inhalt: Höhe begrenzen, Scroll nur in .rezepte-tile-scroll */
.pd-tile-card.rezepte-tile-frame .e-card-content > * {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pd-tile-card.rezepte-tile-frame .rezepte-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pd-tile-card.rezepte-tile-frame .rezepte-list-header,
.pd-tile-card.rezepte-tile-frame .rezepte-filter-header {
  flex-shrink: 0;
}

.pd-tile-card.rezepte-tile-frame .rezepte-tile-body > .pd-preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 0;
  padding: 0;
}

.pd-tile-card.rezepte-tile-frame .rezepte-tile-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* TermineTile: Toolbar fix, Scroll nur in der Terminliste */
.pd-tile-card.termine-tile-frame .e-card-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem !important;
  max-height: 400px;
  min-height: 0;
}

.pd-tile-card.termine-tile-frame .e-card-content > * {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pd-tile-card.termine-tile-frame .termine-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pd-tile-card.termine-tile-frame .pd-termine-toolbar {
  flex-shrink: 0;
}

.pd-tile-card.termine-tile-frame .pd-tab-content--fill {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pd-tile-card.termine-tile-frame .termine-tile-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.pd-content-wrapper {
  padding: 0.5rem;
}

.pd-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.pd-tile-header__content {
  flex: 1;
  min-width: 0;
}

.pd-tile-header__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--l-text);
  margin: 0;
  line-height: 1.3;
}

.pd-tile-header__subtitle {
  font-size: 0.65rem;
  color: var(--l-text-secondary);
  line-height: 1.2;
  margin-top: 0.125rem;
}

.pd-tile-expand-btn {
  position: absolute !important;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  opacity: 0.7;
  background: var(--l-bg-surface) !important;
  border: 1px solid var(--l-border) !important;
}

.pd-tile-expand-btn:hover {
  opacity: 1;
  background: var(--l-bg-elevated) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Fullscreen Dialog (SfDialog basiert)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-fullscreen-dialog .e-dlg-header-content {
  background-color: var(--l-bg-surface) !important;
  border-bottom: 1px solid var(--l-border-light) !important;
}

.pd-fullscreen-dialog .e-dlg-content {
  background-color: var(--l-bg) !important;
  padding: 1rem !important;
  overflow-y: auto;
}

.pd-fullscreen-dialog .e-dlg-content > div {
  height: 100%;
}

.pd-fullscreen-dialog .enhanced-availability-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pd-fullscreen-dialog .enhanced-availability-dialog .availability-container {
  height: 100%;
  max-height: none;
}

.pd-dialog-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.pd-dialog-header__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--l-text);
}

.pd-dialog-header__subtitle {
  font-size: 0.75rem;
  color: var(--l-text-secondary);
}

.pd-dialog-content {
  min-height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Tabs (pd-tabs / pd-subtab)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--l-border-light);
}

.pd-tabs--inner {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.75rem;
}

.pd-subtab {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--l-text-secondary);
  background: transparent;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius-sm);
  cursor: pointer;
  transition: all var(--l-transition-fast);
}

.pd-subtab:hover {
  background: var(--l-bg-surface);
  color: var(--l-text);
}

.pd-subtab--active {
  background: var(--l-primary);
  border-color: var(--l-primary);
  color: var(--l-text-on-primary);
}

.pd-subtab--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.pd-table th,
.pd-table td {
  padding: 0.375rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--l-border-light);
}

.pd-table th {
  font-weight: 600;
  color: var(--l-text-secondary);
  background: var(--l-bg-surface);
}

.pd-table td {
  color: var(--l-text);
}

.pd-table tbody tr:hover {
  background: var(--l-bg-surface);
}

.pd-table--kv td:first-child {
  width: 40%;
}

.pd-table__key {
  font-weight: 500;
  color: var(--l-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Department Cards (Abteilungs-spezifische Farben)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-dept-card {
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
}

.pd-dept-card strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--l-text);
  font-size: 0.8125rem;
}

.pd-dept-card ul {
  margin: 0;
  padding-left: 1rem;
  color: var(--l-text-secondary);
  font-size: 0.75rem;
}

.pd-dept-card li {
  margin-bottom: 0.125rem;
}

.pd-dept-card--ost {
  background: var(--l-primary-bg, rgba(0, 32, 25, 0.05));
  border: 1px solid var(--l-primary);
}

.pd-dept-card--phy {
  background: var(--l-success-bg);
  border: 1px solid var(--l-success);
}

.pd-dept-card--tra {
  background: var(--l-warning-bg);
  border: 1px solid var(--l-warning);
}

.pd-dept-card--vit {
  background: var(--l-info-bg);
  border: 1px solid var(--l-info);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   KPIs
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-kpi-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pd-kpi {
  flex: 1;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  text-align: center;
}

.pd-kpi__label {
  font-size: 0.6875rem;
  color: var(--l-text-secondary);
  margin-bottom: 0.125rem;
}

.pd-kpi__value {
  font-size: 1.25rem;
  font-weight: 700;
}

.pd-kpi--success {
  background: var(--l-success-bg);
  border: 1px solid var(--l-success);
}

.pd-kpi--success .pd-kpi__value {
  color: var(--l-success);
}

.pd-kpi--danger {
  background: var(--l-error-bg);
  border: 1px solid var(--l-error);
}

.pd-kpi--danger .pd-kpi__value {
  color: var(--l-error);
}

.pd-kpi--info {
  background: var(--l-info-bg);
  border: 1px solid var(--l-info);
}

.pd-kpi--info .pd-kpi__value {
  color: var(--l-info);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Objective Box
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-objective-box {
  padding: 0.75rem;
  background: var(--l-primary-bg, rgba(0, 32, 25, 0.05));
  border: 1px solid var(--l-primary);
  border-radius: var(--l-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--l-text);
  margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Placeholders
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-placeholder {
  padding: 1.5rem;
  background: var(--l-bg-surface);
  border: 2px dashed var(--l-border);
  border-radius: var(--l-radius-sm);
  text-align: center;
  color: var(--l-text-secondary);
  font-size: 0.8125rem;
}

.pd-placeholder--rose {
  border-color: var(--l-error);
  background: var(--l-error-bg);
}

.pd-placeholder--sky {
  border-color: var(--l-info);
  background: var(--l-info-bg);
}

.pd-placeholder--emerald {
  border-color: var(--l-success);
  background: var(--l-success-bg);
}

.pd-placeholder--amber {
  border-color: var(--l-warning);
  background: var(--l-warning-bg);
}

.pd-placeholder--violet {
  border-color: var(--l-primary);
  background: var(--l-primary-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Text utilities
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-text-muted {
  color: var(--l-text-secondary);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Header V2 - Clean, organized layout
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-header-v2 {
  /* Children participate in the page flow so sticky stays active for the full dashboard scroll. */
  display: contents;
}

.pd-header-v2__sentinel {
  height: 1px;
  margin: 0;
  pointer-events: none;
  visibility: hidden;
}

.pd-header-v2__sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding: 0.875rem 1rem;
  background: color-mix(in srgb, var(--l-bg-elevated) 92%, transparent);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid var(--l-border-light);
  border-radius: var(--l-radius-md);
  box-shadow: var(--l-shadow-sm);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    padding 0.2s ease,
    background-color 0.2s ease;
}

.pd-header-v2__sticky--pinned {
  padding-block: 0.625rem;
  background: color-mix(in srgb, var(--l-bg-elevated) 96%, transparent);
  border-color: var(--l-border);
  box-shadow:
    var(--l-shadow-md),
    0 1px 0 color-mix(in srgb, var(--l-border-light) 70%, transparent);
}

.pd-header-v2__sticky--pinned .pd-header-v2__name {
  font-size: 1.125rem;
}

.pd-header-v2__sticky--pinned .pd-header-v2__meta {
  padding-top: 0.375rem;
}

/* Row 1: Identity + Actions */
.pd-header-v2__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.pd-header-v2__identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.pd-header-v2__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--l-text);
  line-height: 1.2;
  transition: font-size 0.2s ease;
}

.pd-header-v2__gender {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--l-bg-surface);
  border: 1px solid var(--l-border-light);
  color: var(--l-text-secondary);
  flex-shrink: 0;
}

.pd-header-v2__badges {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-left: 0.25rem;
}

.pd-header-v2__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Row 2: Meta info */
.pd-header-v2__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--l-text-secondary);
  padding-top: 0.625rem;
  border-top: 1px solid var(--l-border-light);
}

.pd-header-v2__meta-start {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
  flex-shrink: 0;
}

.pd-header-v2__alerts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 1 1 12rem;
  min-width: 0;
  margin-left: auto;
  overflow: visible;
}

.pd-header-v2__alerts > .pd-header-v2__alert-group {
  flex: 0 1 auto;
  min-width: 0;
}

.pd-header-v2__alert-group {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--l-warning);
  border-radius: var(--l-radius-sm);
  overflow: hidden;
  background: var(--l-warning-bg);
}

.pd-header-v2__alert-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-width: 0;
  max-width: 20rem;
}

.pd-header-v2__alert-group--with-popover {
  overflow: visible;
}

.pd-header-v2__alert {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--l-warning-bg);
  border: 1px solid var(--l-warning);
  border-radius: var(--l-radius-sm);
  color: var(--l-warning);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.35;
  max-width: min(100%, 22rem);
}

.pd-header-v2__alert--grouped {
  border: none;
  border-radius: 0;
  max-width: 20rem;
}

.pd-header-v2__alert-notes > .pd-header-v2__alert--grouped:not(.pd-header-v2__alert--action),
.pd-header-v2__alert-group > .pd-header-v2__alert--grouped:not(.pd-header-v2__alert--action) {
  min-width: 0;
  max-width: 20rem;
}

.pd-header-v2__alert-notes > .pd-header-v2__alert--grouped + .pd-header-v2__alert--grouped {
  border-left: 1px solid color-mix(in srgb, var(--l-warning) 30%, transparent);
}

.pd-header-v2__alert .pd-icon {
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.pd-header-v2__alert-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pd-header-v2__alert--action {
  align-items: center;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
  font: inherit;
  flex-shrink: 0;
  max-width: none;
  transition: background-color 0.15s ease;
  border-left: 1px solid color-mix(in srgb, var(--l-warning) 30%, transparent);
}

.pd-header-v2__alert--action .pd-icon {
  margin-top: 0;
}

.pd-header-v2__alert--action:hover {
  background: color-mix(in srgb, var(--l-warning-bg) 65%, var(--l-warning));
}

.pd-header-v2__alert--check-in-hint {
  position: relative;
  cursor: help;
}

.pd-check-in-qr-image {
  width: min(240px, 100%);
  height: auto;
  border: 1px solid var(--l-border, #ddd);
  border-radius: var(--l-radius-sm);
  background: #fff;
}

.pd-header-v2__check-in-popover {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 120;
  min-width: 15rem;
  max-width: min(22rem, 90vw);
  padding: 0.5rem 0.65rem 0.55rem;
  background: var(--l-surface-elevated, #fff);
  border: 1px solid color-mix(in srgb, var(--l-warning) 55%, transparent);
  border-radius: var(--l-radius-sm);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: var(--l-text, #333);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition:
    opacity 0.08s ease,
    visibility 0.08s ease,
    transform 0.08s ease;
  transition-delay: 0.08s;
  pointer-events: none;
}

.pd-header-v2__check-in-popover-title {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--l-warning);
}

.pd-header-v2__check-in-popover-list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.pd-header-v2__check-in-popover-list li + li {
  margin-top: 0.25rem;
}

.pd-header-v2__alert--check-in-hint:hover .pd-header-v2__check-in-popover,
.pd-header-v2__alert--check-in-hint:focus-visible .pd-header-v2__check-in-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.pd-header-v2__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.pd-header-v2__meta-item--contact {
  padding-left: 0.75rem;
  border-left: 1px solid var(--l-border);
  gap: 0.5rem;
}

.pd-header-v2__contact-name {
  font-weight: 600;
  color: var(--l-text);
}

.pd-header-v2__contact-channel {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--l-text-secondary);
}

/* Row 3: Clinical Fields — scrolls away with page content */
.pd-header-v2__clinical {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem 0.875rem;
  background: var(--l-bg-surface);
  border: 1px solid var(--l-border-light);
  border-radius: var(--l-radius-md);
}

/* Action buttons */
.pd-header-action-btn,
.pd-header-action-btn.e-btn {
  border-radius: var(--l-radius-md) !important;
  border: 1px solid var(--l-border) !important;
  color: var(--l-text) !important;
  font-weight: 500;
}

.pd-header-action-btn:hover,
.pd-header-action-btn.e-btn:hover {
  border-color: var(--l-primary) !important;
  background: var(--l-bg-surface) !important;
  color: var(--l-primary) !important;
}

.pd-header-action-btn--danger,
.pd-header-action-btn--danger.e-btn {
  border-color: var(--l-error) !important;
  color: var(--l-error) !important;
}

.pd-header-action-btn--danger:hover,
.pd-header-action-btn--danger.e-btn:hover {
  background: var(--l-error-bg) !important;
  border-color: var(--l-error) !important;
}

.pd-header-action-btn--success,
.pd-header-action-btn--success.e-btn {
  border-color: var(--l-success) !important;
  color: var(--l-success) !important;
}

.pd-header-action-btn--success:hover,
.pd-header-action-btn--success.e-btn:hover {
  background: var(--l-success-bg) !important;
  border-color: var(--l-success) !important;
}

@media (max-width: 768px) {
  .pd-header-v2__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .pd-header-v2__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .pd-header-v2__meta-item--contact {
    padding-left: 0;
    border-left: none;
    width: 100%;
  }

  .pd-header-v2__alerts {
    flex-basis: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .pd-header-v2__alert,
  .pd-header-v2__alert--grouped {
    max-width: 100%;
  }
}

/* Badges */
.pd-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
}

.pd-badge--primary {
  background-color: var(--l-primary);
  color: var(--l-text-on-primary);
}

.pd-badge--secondary {
  background-color: var(--l-bg-surface);
  color: var(--l-text-secondary);
  border: 1px solid var(--l-border);
}

.pd-badge--info {
  background: var(--l-info-bg);
  color: var(--l-info);
  border: 1px solid var(--l-info);
}

.pd-badge--purple {
  background: var(--l-primary-soft);
  color: var(--l-primary);
  border: 1px solid var(--l-primary);
}

.pd-badge--new {
  background-color: var(--l-info);
  color: var(--l-text-on-primary);
}

.pd-badge--reactivated {
  background-color: var(--l-primary);
  color: var(--l-text-on-primary);
}

.pd-badge--active {
  background-color: var(--l-success);
  color: var(--l-text-on-primary);
}

.pd-badge--inactive {
  background-color: var(--l-bg-surface);
  color: var(--l-text-secondary);
  border: 1px solid var(--l-border);
}

.pd-badge--regular {
  background-color: var(--l-info-bg);
  color: var(--l-info);
  border: 1px solid var(--l-info);
}

.pd-badge--warning {
  background-color: var(--l-warning-bg);
  color: var(--l-warning);
  border: 1px solid var(--l-warning);
}

/* Status Badges (rechte Seite) */
.pd-status-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
}

.pd-status-badge__label {
  color: var(--l-text-secondary);
}

.pd-status-badge__value {
  font-weight: 600;
}

.pd-status-badge--success {
  background: var(--l-success-bg);
  border: 1px solid var(--l-success);
}

.pd-status-badge--success .pd-status-badge__value {
  color: var(--l-success);
}

.pd-status-badge--danger {
  background: var(--l-error-bg);
  border: 1px solid var(--l-error);
}

.pd-status-badge--danger .pd-status-badge__value {
  color: var(--l-error);
}

.pd-status-badge--warning {
  background: var(--l-warning-bg);
  border: 1px solid var(--l-warning);
}

.pd-status-badge--warning .pd-status-badge__value {
  color: var(--l-warning);
}

/* Vitalparameter-Leiste */
.pd-vitals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1rem;
  padding: 0.5rem 1rem;
  background: var(--l-bg-surface);
  border: 1px solid var(--l-border-light);
  border-radius: var(--l-radius-sm);
  font-size: 0.8125rem;
}

.pd-vitals__label {
  font-weight: 600;
  color: var(--l-text);
}

.pd-vitals__item {
  color: var(--l-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Zusätzliche Komponenten für Tiles
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Pain Points Preview Wrapper */
.pd-pain-preview-wrapper {
  margin: -0.5rem;
}

.pd-pain-preview-wrapper .pain-points-preview {
  margin-bottom: 0;
  border: none;
  background: transparent;
}

.pd-pain-preview-wrapper .pain-points-preview .e-card-header {
  display: none;
}

.pd-pain-preview-wrapper .pain-points-preview .e-card-content {
  padding: 0.5rem !important;
}

/* Ensure all tile headers start at top (no vertical centering regressions) */
.pd-grid__cell .pd-tile-card .e-card-header,
.pd-grid__cell .pd-tile-card .e-card-header .e-card-header-caption,
.pd-grid__cell .pd-tile-card .e-card-header .e-card-header-title {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* BodyMap Dialog (MediBild fullscreen + PatientDashboard Schmerzerfassung) */
.pd-bodymap-dialog .e-dlg-content {
    background-color: var(--l-bg) !important;
    padding: 0 !important;
}

.pd-bodymap-dialog .e-dlg-header-content {
    font-size: 1.05rem;
    font-weight: 600;
}

.pd-bodymap-dialog-title__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--l-radius-sm, 8px);
    background: var(--l-bg-surface);
    color: var(--l-primary, #0d6efd);
    border: 1px solid var(--l-border-light);
}

.pd-bodymap-dialog-title__text {
    color: var(--l-text);
}

.pd-bodymap-dialog .body-map-viewer.bmv-root {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.pd-bodymap-dialog .body-map-viewer .card {
  background-color: var(--l-bg-elevated) !important;
  border-color: var(--l-border-light) !important;
}

.pd-bodymap-dialog .body-map-viewer .card-header {
  background-color: var(--l-bg-surface) !important;
  border-color: var(--l-border-light) !important;
  color: var(--l-text) !important;
}

.pd-bodymap-dialog .body-map-viewer .card-body {
  background-color: var(--l-bg-elevated) !important;
}

.pd-bodymap-dialog .body-map-container {
  background-color: var(--l-bg-surface) !important;
  border-color: var(--l-border-light) !important;
}

.pd-bodymap-dialog .bmv-root {
    --bmv-border: var(--l-border-light);
    --bmv-border-soft: rgba(15, 23, 42, 0.07);
    --bmv-surface: var(--l-bg-surface);
    --bmv-elevated: var(--l-bg-elevated);
    --bmv-text: var(--l-text);
    --bmv-muted: var(--l-text-secondary);
    --bmv-primary: var(--l-primary, #0d6efd);
}

.pd-bodymap-dialog .bmv-map-stage {
    border-color: var(--l-border-light);
}

.pd-bodymap-dialog .bmv-panel--tools,
.pd-bodymap-dialog .pain-marker-form,
.pd-bodymap-dialog .pain-marker-legend {
  background-color: var(--l-bg-surface) !important;
  border-color: var(--l-border-light) !important;
  color: var(--l-text) !important;
}

.pd-bodymap-dialog .pain-marker-legend .bmv-sidebar__title,
.pd-bodymap-dialog .pain-marker-form .bmv-sidebar__title,
.pd-bodymap-dialog .pain-marker-legend h6,
.pd-bodymap-dialog .pain-marker-form h6 {
  color: var(--l-text) !important;
}

.pd-bodymap-dialog .legend-item span,
.pd-bodymap-dialog .pain-marker-legend p {
  color: var(--l-text-secondary) !important;
}

.pd-bodymap-dialog .form-label {
  color: var(--l-text) !important;
}

/* BodyMap + Schmerzbild-Historie: Ecken wie übrige Dialoge (--l-radius-md), kein overflow:hidden auf Content (sonst kein Scroll) */
#dialog-host .dialog-shell.dialog-shell--bodymap.e-dialog,
#dialog-host .dialog-shell.pd-bodymap-dialog.e-dialog,
#dialog-host .dialog-shell.dialog-shell--bodymap-history.e-dialog {
    border-radius: var(--l-radius-md, 8px);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
}

#dialog-host .dialog-shell.dialog-shell--bodymap .e-dlg-header-content,
#dialog-host .dialog-shell.pd-bodymap-dialog .e-dlg-header-content,
#dialog-host .dialog-shell.dialog-shell--bodymap-history .e-dlg-header-content {
    padding: 0.65rem 1rem;
    background: var(--l-bg-elevated);
    border-bottom: 1px solid var(--l-border-light);
}

/* Nicht overflow:hidden — überschreibt DialogShell.razor.css (min-height:0 + Scroll). */
#dialog-host .dialog-shell.dialog-shell--bodymap .e-dlg-content,
#dialog-host .dialog-shell.pd-bodymap-dialog .e-dlg-content {
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* BodyMap im Dialog: eine vertikale Scroll-Achse im Karten-Viewport, kein Doppel-Scroll auf bmv-main */
.pd-bodymap-dialog .bmv-root {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.pd-bodymap-dialog .bmv-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

@media (min-width: 992px) {
    .pd-bodymap-dialog .bmv-layout {
        grid-template-rows: minmax(0, 1fr);
    }
}

.pd-bodymap-dialog .bmv-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pd-bodymap-dialog .bmv-aside {
    position: relative;
    top: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-self: stretch;
}

@media (min-width: 992px) {
    .pd-bodymap-dialog .bmv-aside {
        max-height: 100%;
    }
}

#dialog-host .dialog-shell.dialog-shell--bodymap-history .e-dlg-content {
    max-height: min(70vh, 480px);
    overflow: hidden;
    padding: 0.75rem 1rem 1rem;
    background: var(--l-bg, #f8fafc);
}

#dialog-host .dialog-shell.dialog-shell--bodymap-history .e-dlg-header-content .dialog-shell-header {
    color: var(--l-text);
}

/* Availability Visual Timeline */
.pd-availability-visual {
  padding: 0.5rem 0;
}

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

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

.pd-availability-row__day {
  width: 1.5rem;
  font-size: 0.65rem;
  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: 0.55rem;
  color: var(--l-text-secondary);
}

/* Lists */
.pd-list {
  margin: 0;
  padding-left: 1rem;
  color: var(--l-text-secondary);
  font-size: 0.75rem;
}

.pd-list li {
  margin-bottom: 0.25rem;
}

.pd-list--compact li {
  margin-bottom: 0.125rem;
}

/* Anamnese Grid */
.pd-anamnese-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .pd-anamnese-grid {
    grid-template-columns: 1fr;
  }
}

/* Summary Box */
.pd-summary-box {
  padding: 0.75rem;
  background: var(--l-primary-bg, rgba(0, 32, 25, 0.05));
  border: 1px solid var(--l-primary);
  border-radius: var(--l-radius-sm);
  font-size: 0.8125rem;
  color: var(--l-text);
  line-height: 1.5;
}

/* Flags Container */
.pd-flags-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pd-flag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
}

.pd-flag i {
  font-size: 0.875rem;
}

.pd-flag--red {
  background: var(--l-error-bg);
  border: 1px solid var(--l-error);
  color: var(--l-error);
}

.pd-flag--red i {
  color: var(--l-error);
}

.pd-flag--yellow {
  background: var(--l-warning-bg);
  border: 1px solid var(--l-warning);
  color: var(--l-warning);
}

.pd-flag--yellow i {
  color: var(--l-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Dokumentation Liste (kompakt)
   ═══════════════════════════════════════════════════════════════════════════════ */

.doku-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
}

.doku-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--l-bg-elevated);
  border: 1px solid var(--l-border-light);
  border-radius: var(--l-radius-sm);
  cursor: pointer;
  transition: all var(--l-transition-fast);
}

.doku-item:hover {
  border-color: var(--l-primary);
  background: var(--l-bg-surface);
}

.doku-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 55px;
  padding: 0.35rem;
  background: var(--l-bg-surface);
  border-radius: var(--l-radius-sm);
}

.doku-date-day {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--l-text-secondary);
}

.doku-content {
  flex: 1;
  min-width: 0;
}

.doku-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--l-text);
}

.doku-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--l-text-secondary);
  margin-bottom: 0.25rem;
}

.doku-therapist {
  color: var(--l-primary);
  font-weight: 500;
}

.doku-preview {
  font-size: 0.8rem;
  color: var(--l-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doku-arrow {
  font-size: 1.5rem;
  color: var(--l-text-secondary);
  font-weight: 300;
  align-self: center;
}

.doku-item:hover .doku-arrow {
  color: var(--l-primary);
}

.doku-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Clinical Status Fields
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-clinical-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0;
}

.pd-clinical-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.pd-clinical-field__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--l-success);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-bottom: 0.125rem;
}

.pd-clinical-field__label--clinical {
  color: var(--l-success);
}

.pd-clinical-field__label--danger {
  color: var(--l-error);
}

.pd-clinical-field__label--warning {
  color: var(--l-warning);
}

/* Fix multiselect height - force single line height when empty or single chip */
.pd-clinical-field .e-multiselect,
.pd-clinical-field .e-multiselect.e-control-wrapper {
  min-height: 0 !important;
}

/* Theme: Chips + Suchfeld per float:left im selben Blockformat — schließt mit umgebrochenen Chips ein.
   Kein display:flex auf .e-chips-collection oder Wrapper: sonst wird die Sammlung ein breiter Flex-Block
   und die Suche rutscht in eine eigene Zeile unter alle Chip-Zeilen. */
.pd-clinical-field .e-multi-select-wrapper {
    min-height: 2rem !important;
    padding: 0.125rem 0.25rem !important;
    overflow: hidden;
}

.pd-clinical-field .e-multi-select-wrapper .e-chips-collection {
    display: block;
}

.pd-clinical-field .e-multi-select-wrapper .e-chips {
    margin: 0 0.25rem 0.25rem 0 !important;
    height: auto !important;
    padding: 0.125rem 0.375rem !important;
    line-height: 1.3 !important;
}

.pd-clinical-field .e-multi-select-wrapper .e-chips .e-chipcontent {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
  font-size: 0.75rem;
  line-height: 1.2;
}

.pd-clinical-field .e-multi-select-wrapper .e-chips .e-chips-close {
  width: 14px !important;
  height: 14px !important;
  margin-left: 0.25rem !important;
}

.pd-clinical-field .e-multi-select-wrapper .e-delim-values {
  font-size: 0.8125rem;
  line-height: 1.75rem;
}

.pd-clinical-field .e-input-group {
  background: var(--l-bg-elevated) !important;
  border-color: var(--l-border) !important;
  border-radius: var(--l-radius-sm) !important;
}

.pd-clinical-field .e-input-group:hover {
  border-color: var(--l-primary) !important;
}

.pd-clinical-field .e-input-group.e-input-focus {
  border-color: var(--l-primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 32, 25, 0.1) !important;
}

@media (max-width: 1100px) {
  .pd-clinical-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .pd-clinical-fields {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Dokumentation Schnellzugriff
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-documentation-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--l-bg-surface);
  border-radius: var(--l-radius-md);
  border: 1px solid var(--l-border-light);
}

.pd-documentation-bar--clickable {
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.pd-documentation-bar--clickable:hover {
  background: var(--l-primary-soft);
  border-color: var(--l-primary);
}

.pd-documentation-bar__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--l-text-secondary);
  margin-right: 0.5rem;
}

.pd-documentation-bar__hint {
  margin-left: auto;
  color: var(--l-primary);
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.pd-documentation-bar--clickable:hover .pd-documentation-bar__hint {
  opacity: 1;
}

.pd-doc-btn {
  font-size: 0.8rem !important;
}

.pd-documentation-header-icon {
  color: var(--l-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Sonstige Badges & Warnungen
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-reservation-warning-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pd-reservation-warning-icon,
.pd-reservation-warning-note {
  color: var(--l-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Episode Highlighting
   ═══════════════════════════════════════════════════════════════════════════════ */

.episode-highlight {
  background-color: var(--l-warning-bg) !important;
  border: 2px solid var(--l-warning) !important;
  transition: background-color 0.5s ease-in-out;
}

.episode-highlight:hover {
  background-color: var(--l-warning-bg) !important;
  filter: brightness(0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Enhanced Availability Dialog
   ═══════════════════════════════════════════════════════════════════════════════ */

.enhanced-availability-dialog .availability-container {
    max-height: 620px;
    overflow-y: auto;
}

.enhanced-availability-dialog .week-selection-controls {
  background-color: var(--l-bg-surface);
  padding: 1rem;
  border-radius: var(--l-radius-md);
  border: 1px solid var(--l-border-light);
}

.enhanced-availability-dialog .tp-week-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background-color: var(--l-bg-surface);
  border: 1px solid var(--l-border-light);
  border-radius: var(--l-radius-md);
  flex-wrap: wrap;
}

.enhanced-availability-dialog .tp-week-month-filter {
  min-width: 240px;
  display: flex;
  flex-direction: column;
}

.enhanced-availability-dialog .tp-week-month-filter__dropdown {
  width: 240px;
}

.enhanced-availability-dialog .tp-week-toolbar__meta {
  display: flex;
  align-items: center;
}

.enhanced-availability-dialog .tp-week-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background-color: var(--l-bg-elevated);
  border: 1px solid var(--l-border-light);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--l-text-secondary);
  white-space: nowrap;
}

.enhanced-availability-dialog .week-info {
  padding: 0.375rem 0;
}

.enhanced-availability-dialog .week-tabs .nav-tabs {
  border-bottom: 2px solid var(--l-border-light);
  margin-bottom: 1rem;
}

.enhanced-availability-dialog .week-tabs .nav-link {
  border: 1px solid transparent;
  border-radius: var(--l-radius-md) var(--l-radius-md) 0 0;
  padding: 0.5rem 1rem;
  margin-right: 0.25rem;
  background-color: var(--l-bg-surface);
  color: var(--l-text-secondary);
}

.enhanced-availability-dialog .week-tabs .nav-link.active {
  background-color: var(--l-bg-elevated);
  border-color: var(--l-border-light) var(--l-border-light) var(--l-bg-elevated);
  border-bottom: 2px solid var(--l-bg-elevated);
  margin-bottom: -2px;
  color: var(--l-primary);
}

.enhanced-availability-dialog .availability-grid .day-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--l-border-light);
}

.enhanced-availability-dialog .availability-grid .day-name {
  min-width: 40px;
  font-weight: 600;
  padding-top: 0.375rem;
}

.enhanced-availability-dialog .quick-chips {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  min-width: 300px;
}

.enhanced-availability-dialog .intervals {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.enhanced-availability-dialog .interval-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.enhanced-availability-dialog .e-timepicker.e-input-group,
.enhanced-availability-dialog .e-dropdownlist.e-input-group,
.enhanced-availability-dialog .e-textbox.e-input-group,
.enhanced-availability-dialog .e-datepicker.e-input-group {
  background-color: var(--l-bg-elevated) !important;
  border-color: var(--l-border) !important;
}

.enhanced-availability-dialog .e-timepicker.e-input-group .e-input,
.enhanced-availability-dialog .e-dropdownlist.e-input-group .e-input,
.enhanced-availability-dialog .e-textbox.e-input-group .e-input,
.enhanced-availability-dialog .e-datepicker.e-input-group .e-input {
  background-color: var(--l-bg-elevated) !important;
  border: none !important;
  color: var(--l-text) !important;
}

.enhanced-availability-dialog
  .e-timepicker.e-input-group
  .e-input::placeholder {
  color: var(--l-text-muted) !important;
}

.enhanced-availability-dialog .e-timepicker.e-input-group:hover,
.enhanced-availability-dialog .e-dropdownlist.e-input-group:hover,
.enhanced-availability-dialog .e-textbox.e-input-group:hover,
.enhanced-availability-dialog .e-datepicker.e-input-group:hover {
  border-color: var(--l-primary) !important;
}

.enhanced-availability-dialog .e-timepicker.e-input-group.e-input-focus,
.enhanced-availability-dialog .e-dropdownlist.e-input-group.e-input-focus,
.enhanced-availability-dialog .e-textbox.e-input-group.e-input-focus,
.enhanced-availability-dialog .e-datepicker.e-input-group.e-input-focus {
  border-color: var(--l-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(116, 139, 116, 0.2) !important;
}

@media (max-width: 768px) {
  .enhanced-availability-dialog .tp-week-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .enhanced-availability-dialog .tp-week-month-filter,
  .enhanced-availability-dialog .tp-week-month-filter__dropdown {
    width: 100%;
    min-width: 0;
  }
}

.doku-show-all {
  padding: 0.75rem;
  background: var(--l-bg-surface);
  border: 1px dashed var(--l-border);
  border-radius: var(--l-radius-sm);
  color: var(--l-primary);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--l-transition-fast);
}

.doku-show-all:hover {
  background: var(--l-primary-bg, rgba(0, 32, 25, 0.05));
  border-color: var(--l-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Preview Rows (gemeinsame Styles für alle Tile-Previews)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-preview {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
}

.pd-preview__header {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--l-border-light);
  margin-bottom: 0.3rem;
}

.pd-preview__header .pd-preview__label {
  flex: 1;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--l-text-secondary);
}

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

.pd-preview__label {
  color: var(--l-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  min-width: 80px;
}

.pd-preview__value {
  color: var(--l-text);
  font-size: 0.8rem;
  flex: 1;
}

.pd-preview__value--truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-preview__more {
  text-align: center;
  padding-top: 0.3rem;
  color: var(--l-text-secondary);
  font-size: 0.75rem;
}

.pd-preview--clickable {
  cursor: pointer;
  transition: background var(--l-transition-fast);
  border-radius: var(--l-radius-sm);
}

.pd-preview--clickable:hover {
  background: var(--l-primary-soft);
}

.pd-preview__row--clickable {
  cursor: pointer;
  transition: background var(--l-transition-fast);
  border-radius: var(--l-radius-sm);
  padding: 0.25rem;
  margin: -0.25rem;
}

.pd-preview__row--clickable:hover {
  background: var(--l-primary-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Empty States (gemeinsame Styles für leere Zustände)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: var(--l-text-secondary);
  text-align: center;
}

.pd-empty-icon {
  width: 32px;
  height: 32px;
  color: var(--l-primary);
  margin-bottom: 0.5rem;
}

.pd-empty p {
  margin: 0;
  font-size: 0.85rem;
}

.pd-add-btn {
  margin-top: 0.75rem;
  background: transparent;
  border: 1px solid var(--l-primary);
  color: var(--l-primary);
  padding: 0.4rem 0.8rem;
  border-radius: var(--l-radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  transition: all var(--l-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pd-add-btn:hover {
  background: var(--l-primary-soft);
}

.pd-add-btn i,
.pd-add-btn svg {
  width: 14px;
  height: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Loading States
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: var(--l-text-secondary);
  font-size: 0.85rem;
}

.pd-spinner {
  color: var(--l-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Lucide Icon Utilities für PatientDashboard
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.pd-icon--sm {
  width: 12px;
  height: 12px;
}

.pd-icon--lg {
  width: 18px;
  height: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Delete Button (für Listen-Items)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pd-delete-btn {
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--l-radius-sm);
  cursor: pointer;
  color: var(--l-text-secondary);
  transition: all var(--l-transition-fast);
  opacity: 1;
}

.pd-delete-btn:hover {
  background: var(--l-error-bg);
  color: var(--l-error);
}

/* Arbeitsjournal: kompakte Composer-Karte (LCard rendert außerhalb von Scoped CSS) */
.l-card.pd-journal-composer-card .l-card__header {
  padding: 0.45rem 0.65rem;
}

.l-card.pd-journal-composer-card .l-card__body {
  padding: 0.55rem 0.65rem;
}

.l-card.pd-journal-composer-card--collapsed .l-card__body {
  display: none;
}

.l-card.pd-journal-composer-card--collapsed .l-card__header {
  border-bottom: none;
  padding: 0.4rem 0.65rem;
}

.l-card.pd-journal-entry-card .l-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
}