/* lz-drawer.css — Manuelle Lizenz-Drawer (LoDLzDrawer). Nutzt sonst die globalen
   Drawer-Feld-Styles (field-grid/field-value); hier nur der Katalog-Picker + der
   Lösch-Bereich. Theme-agnostisch über Tokens. */

.lz-katalog-select {
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 10px);
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-s, 6px);
  background: var(--color-surface, #fff);
  color: var(--color-text, #111);
  font: inherit;
  cursor: pointer;
}
.lz-katalog-select:focus-visible { outline: 2px solid var(--lod-darkblue, #1b3a5b); outline-offset: 1px; }

.lz-drawer-danger {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--color-border-subtle, #e5e7eb);
}
.lz-delete-btn {
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--fw-semibold, 600);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--status-danger-fg, #a6443a) 45%, transparent);
  color: var(--status-danger-fg, #a6443a);
  background: transparent;
  cursor: pointer;
  transition: background .12s ease;
}
.lz-delete-btn:hover { background: color-mix(in srgb, var(--status-danger-fg, #a6443a) 8%, transparent); }
.lz-delete-btn:focus-visible { outline: 2px solid var(--status-danger-fg, #a6443a); outline-offset: 1px; }

/* ── View-Modus (openView): Herkunft/Sync, Konditionen, Laufzeit, Reminder ──
   Self-scoped unter .lz-view (Wurzelklasse setzt der Drawer-Body selbst). */
.lz-view .lz-view-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) 0 var(--space-3, 12px) 0;
}
.lz-view .lz-view-titel {
  font-size: var(--font-size-lg, 17px);
  font-weight: var(--fw-semibold, 600);
  color: var(--lod-darkblue-900, #1b3a5b);
  flex: 1 1 100%;
}
.lz-view .lz-view-chips { display: flex; flex-wrap: wrap; gap: var(--space-1, 6px); }
.lz-view .lz-chip {
  display: inline-block; font-size: var(--font-size-xs, 11px); font-weight: var(--fw-semibold, 600);
  white-space: nowrap; padding: 2px 9px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border-subtle, #e5e7eb);
  background: var(--color-surface, #fff); color: var(--color-text-secondary, #444);
}
.lz-view .lz-chip--ok {
  border-color: transparent;
  color: var(--lod-turquoise-900, #3c6669);
  background: color-mix(in srgb, var(--lod-turquoise, #70b1b6) 12%, transparent);
}
.lz-view .lz-chip--warn { background: var(--status-warning-bg, #fdf3e6); border-color: var(--status-warning-fg, #9a6700); color: var(--status-warning-fg, #9a6700); }
.lz-view .lz-chip--man {
  border-color: color-mix(in srgb, var(--lod-darkblue, #1b3a5b) 40%, transparent);
  color: var(--lod-darkblue, #1b3a5b);
  background: color-mix(in srgb, var(--lod-darkblue, #1b3a5b) 8%, var(--color-surface, #fff));
}
.lz-view .lz-chip--muted { color: var(--color-text-muted, #707070); }
.lz-view .lz-view-val { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1, 6px); }
.lz-view .lz-view-btn {
  font-size: var(--font-size-xs, 12px); font-weight: var(--fw-semibold, 600);
  padding: 3px 10px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border, #d1d5db);
  background: var(--color-surface, #fff); color: var(--lod-darkblue, #1b3a5b);
  cursor: pointer;
}
.lz-view .lz-view-btn:hover { background: var(--color-bg-subtle, #f5f6f7); }
.lz-view .lz-view-btn:disabled { opacity: 0.55; cursor: default; }
.lz-view .lz-view-btn:focus-visible { outline: 2px solid var(--lod-darkblue, #1b3a5b); outline-offset: 1px; }
.lz-view .lz-view-actions {
  display: flex; justify-content: flex-end;
  margin-top: var(--space-4, 16px); padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--color-border-subtle, #e5e7eb);
}
.lz-view .lz-view-hint {
  margin-top: var(--space-4, 16px);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-muted, #707070);
  line-height: 1.5;
}