/* =====================================================================
   Wartungstool – Vaadin Application Theme
   Umsetzung der "Komponenten-Bibliothek" (Claude Design) als Lumo-Token-
   Overrides: Farben, Typografie und Radien. LoginView, MainLayout und alle
   Views übernehmen das Aussehen dadurch automatisch.
   Quelle (Claude Design): Projekt "Flugzeug-Icon überarbeiten",
   Datei Komponenten-Bibliothek.dc.html
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
S
html {
  /* --- Typografie --- */
  --lumo-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lumo-font-size-xxl: 24px;  /* Seitentitel */
  --lumo-font-size-xl: 20px;   /* Heading L */
  --lumo-font-size-l: 16px;    /* Heading M */
  --lumo-font-size-m: 14px;    /* Body (Basis) */
  --lumo-font-size-s: 13px;
  --lumo-font-size-xs: 12px;   /* Label / Meta */
  --lumo-line-height-m: 1.5;

  /* --- Radien --- */
  --lumo-border-radius-s: 4px; /* Checkbox */
  --lumo-border-radius-m: 6px; /* Buttons, Textfelder */
  --lumo-border-radius-l: 8px; /* Karten, Dialog */

  /* --- Primärfarbe (Navy) --- */
  --lumo-primary-color: #1B3F6E;
  --lumo-primary-color-50pct: rgba(27, 63, 110, 0.5);
  --lumo-primary-color-10pct: rgba(27, 63, 110, 0.1);
  --lumo-primary-text-color: #1B3F6E;
  --lumo-primary-contrast-color: #FFFFFF;

  /* --- Flächen & Kontrast-/Border-Skala --- */
  --lumo-base-color: #FFFFFF;        /* Surface: Karten, Nav, Inputs */
  --lumo-tint: #FFFFFF;
  --lumo-shade: #1A1D23;
  --lumo-contrast-5pct: #F5F7FA;     /* App-Hintergrund, Zebra, Hover */
  --lumo-contrast-10pct: #DDE2EA;    /* Border */
  --lumo-contrast-20pct: #C7CDD8;
  --lumo-contrast-30pct: #9CA3AF;
  --lumo-contrast-50pct: #6B7280;
  --lumo-contrast-60pct: #6B7280;
  --lumo-contrast-70pct: #4B5563;
  --lumo-contrast-90pct: #1A1D23;

  /* --- Text --- */
  --lumo-header-text-color: #1A1D23;
  --lumo-body-text-color: #1A1D23;
  --lumo-secondary-text-color: #6B7280;
  --lumo-tertiary-text-color: #9CA3AF;
  --lumo-disabled-text-color: #9CA3AF;

  /* --- Statusfarben --- */
  --lumo-success-color: #2D7D5A;
  --lumo-success-text-color: #2D7D5A;
  --lumo-success-color-50pct: rgba(45, 125, 90, 0.5);
  --lumo-success-color-10pct: rgba(45, 125, 90, 0.1);
  --lumo-success-contrast-color: #FFFFFF;

  --lumo-error-color: #B91C1C;
  --lumo-error-text-color: #B91C1C;
  --lumo-error-color-50pct: rgba(185, 28, 28, 0.5);
  --lumo-error-color-10pct: rgba(185, 28, 28, 0.1);
  --lumo-error-contrast-color: #FFFFFF;

  --lumo-warning-color: #B45309;
  --lumo-warning-text-color: #B45309;
  --lumo-warning-color-10pct: rgba(180, 83, 9, 0.1);
  --lumo-warning-contrast-color: #FFFFFF;
}

/* App-Hintergrund grau (#F5F7FA) statt Weiß */
body,
#outlet {
  background-color: #F5F7FA;
}

/* Buttons: Beschriftung in 600 (wie im Styleguide) */
vaadin-button {
  font-weight: 600;
}

/* Feld-Labels: Versalien, Sperrung, 12px – gemäß Bibliothek */
vaadin-text-field::part(label),
vaadin-text-area::part(label),
vaadin-email-field::part(label),
vaadin-password-field::part(label),
vaadin-number-field::part(label),
vaadin-integer-field::part(label),
vaadin-select::part(label),
vaadin-combo-box::part(label),
vaadin-date-picker::part(label) {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--lumo-font-size-xs);
  font-weight: 500;
  color: var(--lumo-secondary-text-color);
}

/* Grid-Kopfzeile: Versalien, sekundäre Farbe – wie die Tabelle im Styleguide */
vaadin-grid::part(header-cell) {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--lumo-font-size-xs);
  font-weight: 500;
  color: var(--lumo-secondary-text-color);
}