/* vc-components Primitives — 1:1-Portierung der scoped Styles aus
 * core-frontend/components/primitives/*.vue (Bestand = Spezifikation).
 * Light DOM: Klassenverträge identisch (.vc-button, .vc-pill, …); die
 * ehemaligen :deep()-Selektoren sind gewöhnliche Deszendenten-Selektoren.
 * Konsumiert AUSSCHLIESSLICH semantische Tokens (styles/themes/*.css). */

/* ---------- VcButton ---------- */
.vc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.vc-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.vc-button:disabled { opacity: 0.55; cursor: not-allowed; }
.vc-button--primary { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.vc-button--primary:hover:not(:disabled) { background: var(--primary-strong, var(--primary)); border-color: var(--primary-strong, var(--primary)); }
.vc-button--secondary { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.vc-button--secondary:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary-strong, var(--primary)); }
.vc-button--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.vc-button--danger:hover:not(:disabled) { background: var(--danger-soft); }
.vc-button--ghost:hover:not(:disabled) { background: var(--surface); border-color: var(--primary); }
.vc-button--active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.vc-button--active:hover:not(:disabled) { background: var(--primary-soft); }
.vc-button--block { width: 100%; }
.vc-button--icon { width: 34px; height: 34px; padding: 0; gap: 0; }
.vc-button--size-small { padding: 4px 8px; font-size: 0.85rem; border-radius: var(--radius-sm); }
.vc-button--size-small.vc-button--icon { width: 26px; height: 26px; padding: 0; }
.vc-button__icon { display: inline-flex; align-items: center; font-size: 1.15em; line-height: 1; }
.vc-button--size-small .vc-button__icon { font-size: 1em; }
.vc-button__label { display: inline-block; }

/* SPEC-0724 Etappe 3 — Zeigerschicht. Unter GROBEM Zeiger ist jede
   Schaltflaeche und jedes Eingabefeld mindestens 44 px hoch (Icon-Knoepfe
   44x44; gemessen waren es 34 bzw. 26 px). Schriftgroesse und Polsterung
   bleiben; nur die Mindestmasse wachsen. Eine Maus sieht das nie. */
@media (pointer: coarse) {
  .vc-button { min-height: 44px; }
  .vc-button--icon,
  .vc-button--size-small.vc-button--icon { width: 44px; height: 44px; }
  .vc-field input:not([type="checkbox"]):not([type="radio"]),
  .vc-field select { min-height: 44px; }
}

/* Ohne Hover (Touch) bleibt :hover am zuletzt beruehrten Knopf kleben —
   unter (hover: none) faellt er auf den Ruhezustand der Variante zurueck. */
@media (hover: none) {
  .vc-button--primary:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); }
  .vc-button--secondary:hover:not(:disabled) { border-color: var(--primary); }
  .vc-button--danger:hover:not(:disabled) { background: transparent; }
}

/* ---------- VcCard ---------- */
.vc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  color: var(--text);
}
.vc-card--surface { background: var(--surface); }
.vc-card--dashed { border-style: dashed; background: transparent; }
.vc-card--padded { padding: var(--space-3); }
.vc-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.vc-card__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text); }
.vc-card__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vc-card__body { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
.vc-card__footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); margin-top: auto; }

/* ---------- VcPill ---------- */
.vc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.vc-pill--neutral { background: var(--surface-elevated); border-color: var(--border); color: var(--text-muted); }
.vc-pill--info { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.vc-pill--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.vc-pill--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.vc-pill--danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.vc-pill--outlined { background: transparent; }

/* ---------- VcStatusLine ---------- */
.vc-status-line {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.9rem;
  line-height: 1.4;
}
.vc-status-line--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.vc-status-line--error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.vc-status-line--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.vc-status-line--info { background: var(--surface-elevated); border-color: var(--border-strong); color: var(--text); }

/* ---------- VcEmptyState ---------- */
.vc-empty-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.vc-empty-state--muted { padding: var(--space-2); }
.vc-empty-state--panel {
  display: flex;
  width: 100%;
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  text-align: center;
  justify-content: center;
}
.vc-empty-state__icon { display: inline-flex; align-items: center; font-size: 1.4em; line-height: 1; color: var(--text-soft); }
.vc-empty-state__body { display: inline-block; }

/* ---------- VcField ---------- */
.vc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--app-masterdata-dialog-font-size, 0.88rem);
  color: var(--text);
}
.vc-field--inline { flex-direction: row; align-items: center; gap: var(--space-3); }
.vc-field--wide { grid-column: 1 / -1; }
.vc-field__label { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.01em; }
.vc-field__required { color: var(--danger); margin-left: 2px; }
.vc-field input,
.vc-field select,
.vc-field textarea {
  width: 100%;
  min-width: 0;
  background: var(--control-bg, var(--surface));
  color: var(--control-text, var(--text));
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  box-sizing: border-box;
}
.vc-field textarea { min-height: 72px; resize: vertical; }
.vc-field input:focus,
.vc-field select:focus,
.vc-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vc-field--has-error input,
.vc-field--has-error select,
.vc-field--has-error textarea { border-color: var(--danger); }
.vc-field--has-error input:focus,
.vc-field--has-error select:focus,
.vc-field--has-error textarea:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.vc-field__hint { color: var(--text-muted); font-size: 0.78rem; }
.vc-field__error { color: var(--danger); font-size: 0.78rem; }

/* ---------- VcFieldGrid ---------- */
.vc-field-grid { display: grid; gap: var(--space-3); }
.vc-field-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vc-field-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .vc-field-grid--two { grid-template-columns: 1fr; }
}

/* ---------- VcLookupSelect ---------- */
.vc-lookup { position: relative; width: 100%; min-width: 0; display: block; }
.vc-lookup__input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--control-bg, var(--surface));
  color: var(--control-text, var(--text));
  border: 1px solid var(--control-border, var(--border));
  border-radius: var(--radius-md);
  padding: var(--space-2) calc(var(--space-3) + 1.4em) var(--space-2) var(--space-3);
  font: inherit;
}
.vc-lookup__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vc-lookup--disabled .vc-lookup__input { opacity: 0.6; cursor: not-allowed; }
.vc-lookup__caret {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
  font-size: 0.7em;
}
.vc-lookup__clear {
  position: absolute;
  right: calc(var(--space-3) + 1em);
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  padding: 0 0.2em;
}
.vc-lookup__clear:hover { color: var(--text); }
.vc-lookup__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-1, 4px);
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--surface-elevated, var(--surface-overlay, var(--surface)));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay, var(--shadow-card));
}
.vc-lookup__option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, var(--radius-md));
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-lookup__option--active { background: var(--primary-soft); color: var(--text); }
.vc-lookup__option--selected { font-weight: 600; }
.vc-lookup__empty { padding: var(--space-2) var(--space-3); color: var(--text-muted); }

/* ---------------------------------------------------------------------------
 * <vc-dialog> — gemeinsamer Dialograhmen (SPEC-0642, Welle 2).
 *
 * Ausschliesslich Token: Farben, Abstaende, Radien und Stapelebenen kommen aus
 * dem geteilten Stapel, damit alle vier Themes greifen. Die Typografie nutzt
 * die Rampe aus scale-tokens.css — der Rahmen ist zugleich der erste Leser
 * dieser Achse.
 * ------------------------------------------------------------------------- */
.vc-dialog { display: contents; }
.vc-dialog[hidden] { display: none; }

.vc-dialog__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--surface-overlay, var(--surface-sunken)) 62%, transparent);
  backdrop-filter: blur(2px);
}

.vc-dialog__frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 82vh;
  width: 100%;
  background: var(--surface-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius-md));
  box-shadow: var(--shadow-overlay, var(--shadow-card));
}

/* Der Rahmen nimmt den Fokus auf, wenn kein Bedienelement da ist — dann darf
   er ihn auch zeigen. */
.vc-dialog__frame:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.vc-dialog__frame--s { max-width: 24rem; }
.vc-dialog__frame--m { max-width: 34rem; }
.vc-dialog__frame--l { max-width: 52rem; }
.vc-dialog__frame--full { max-width: none; height: 100%; max-height: none; }

/* Panel und Inline tragen keinen Hintergrund und fuellen ihren Wirt. Die
   Shell entscheidet, wo dieser Wirt liegt — der Dialog rechnet NICHT gegen den
   Viewport (Wächter DialogRahmungTest). */
.vc-dialog--panel .vc-dialog__frame,
.vc-dialog--inline .vc-dialog__frame {
  max-width: none;
  max-height: none;
  height: 100%;
}
.vc-dialog--inline .vc-dialog__frame { box-shadow: none; }

.vc-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.vc-dialog__headings { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.vc-dialog__title {
  margin: 0;
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  color: var(--text);
}

.vc-dialog__subtitle {
  margin: 0;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
  color: var(--text-muted);
}

.vc-dialog__header-extra { display: flex; align-items: center; gap: var(--space-2); }

.vc-dialog__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32 px Mindestmass fuer Bedienelemente (Fluent 2); WCAG 2.2 verlangt
     24 x 24 als Untergrenze. Der Schliesser war in den selbstgebauten Koepfen
     regelmaessig kleiner. */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, var(--radius-md));
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.vc-dialog__close:hover { background: var(--surface); color: var(--text); }
.vc-dialog__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }

.vc-dialog__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: var(--text);
}

/* Reihenfolge FESTGESCHRIEBEN (SPEC-0642 §17): abbrechend links, bestaetigend
   rechts. Der Bestand macht es in confirm-dialog.css an allen 25
   Aufrufstellen bereits so — festhalten ist billiger als drehen. */
.vc-dialog__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .vc-dialog__backdrop { padding: var(--space-3); }
  .vc-dialog__frame { max-height: 92vh; }
}