/*
 * @hb/shared-frontend/styles/lex-customer-dialog.css
 * Styles für die LexCustomerDialog-Komponente (components/lex-customer-dialog.js).
 * Selbsttragend: bringt den Modal-Rahmen mit (kein .off-modal aus der
 * Angebote-Seite nötig). Erwartet tokens.css + base.css (.btn, .muted).
 */

/* Modal-Rahmen */
.lexcust-modal {
  width: min(720px, 92vw);
  max-width: min(720px, 92vw);
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  /* Kopf/Footer bleiben sichtbar, nur der Body scrollt — kein Dialog
     darf über den Viewport-Rand hinauslaufen. */
  max-height: calc(100dvh - 32px);
  flex-direction: column;
  overflow: hidden;
}
/* display nur im offenen Zustand — sonst wäre der geschlossene
   Dialog sichtbar (überschreibt dialog:not([open]) { display:none }). */
.lexcust-modal[open] { display: flex; }
body:has(dialog.lexcust-modal[open]) { overflow: hidden; }
.lexcust-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
.lexcust-modal::before {
  content: "";
  display: block;
  height: 4px;
  flex: none;
  background: linear-gradient(90deg, var(--color-brand-primary), color-mix(in srgb, var(--color-brand-primary) 75%, white));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.lexcust-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 8px;
  border-bottom: 1px solid var(--color-border);
}
.lexcust-head h2 { margin: 0; font-size: var(--font-size-lg); }
.lexcust-close {
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.lexcust-close:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-default);
}
.lexcust-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  min-height: 0;
}
.lexcust-body > p:first-child { margin-top: 0; }
.lexcust-foot {
  display: flex;
  flex-wrap: wrap;            /* lange Button-Zeilen brechen um statt aus dem Dialog zu laufen */
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
}
.lexcust-foot-spacer { flex: 1; }

/* Inhalt */
.lexcust-intro { margin: 0 0 12px; font-size: var(--font-size-sm); }
.lexcust-status { margin-bottom: 12px; font-size: var(--font-size-xs); }
.lexcust-status[data-type="error"] { color: #991b1b; }
.lexcust-dupe-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: var(--font-size-sm);
}
.lexcust-dupe-hint .btn { flex-shrink: 0; }
.lexcust-existing { margin-bottom: 14px; font-size: var(--font-size-sm); }
.lexcust-existing summary { cursor: pointer; color: var(--color-brand-primary); }
.lexcust-existing-hint { margin: 6px 0; font-size: var(--font-size-xs); }
.lexcust-section-title {
  margin: 16px 0 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.lexcust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}
.lexcust-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-sm);
}
.lexcust-field > span { color: var(--color-text-muted); }
.lexcust-field-wide { grid-column: 1 / -1; }
.lexcust-field input,
.lexcust-field select,
.lexcust-field textarea {
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  font-family: var(--font-family-base);
}
.lexcust-field input:focus,
.lexcust-field select:focus,
.lexcust-field textarea:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px var(--color-brand-primary-soft);
}