/*
 * FI-KVM-Portal – Erscheinungsbild nach dem Corporate Design der Wifa Gruppe GmbH
 * (docs/referenz/corporate-design/README.md, Manual wifa2026-01). Nur Lumo-Variablen und
 * Teile (::part) der Vaadin-Komponenten; keine Webfonts, keine externen Quellen.
 * Geprüfte Kontraste (WCAG AA ≥ 4,5:1): Weiß auf #00344C 13,2 · #2D333D auf Weiß 12,7 ·
 * #00344C auf #C6D400 7,7 · #00344C auf #87BFC7 6,5 · #2D333D auf #F4AF35 6,7 · Weiß auf #AE0F0A 7,3 ·
 * #4F5660 auf Weiß 7,0 · #6B727B auf Weiß 4,9 · #8A5A00 auf Weiß 6,3.
 */
html {
  --wifa-green: #C6D400;
  --wifa-blue: #00344C;
  --wifa-lightblue: #87BFC7;
  --wifa-darkgrey: #2D333D;
  --wifa-lightgrey: #BBBEC2;
  --wifa-red: #AE0F0A;
  --wifa-orange: #F4AF35;

  /* Schrift: Arial überall, Fließtext 16 px, Kleintext nicht unter 13 px */
  --lumo-font-family: Arial, "Liberation Sans", Helvetica, sans-serif;
  --lumo-font-size-xs: 0.8125rem;
  --lumo-font-size-s: 0.875rem;
  --lumo-font-size-m: 1rem;

  /* Dunkelblau: Primärknöpfe, Links, Überschriften, Auswahl */
  --lumo-primary-color: var(--wifa-blue);
  --lumo-primary-text-color: var(--wifa-blue);
  --lumo-primary-color-50pct: rgba(0, 52, 76, 0.5);
  --lumo-primary-color-10pct: rgba(0, 52, 76, 0.1);
  --lumo-primary-contrast-color: #ffffff;
  --lumo-header-text-color: var(--wifa-blue);

  /* Text und Rahmen */
  --lumo-body-text-color: var(--wifa-darkgrey);
  --lumo-secondary-text-color: #4F5660;
  --lumo-tertiary-text-color: #6B727B;
  --lumo-contrast-5pct: #F3F4F5;
  --lumo-contrast-10pct: #E4E5E7;
  --lumo-contrast-20pct: var(--wifa-lightgrey);
  --lumo-contrast-30pct: #A9ADB2;

  /* Rot: Fehler und gefährliche Aktionen */
  --lumo-error-color: var(--wifa-red);
  --lumo-error-text-color: var(--wifa-red);
  --lumo-error-color-10pct: rgba(174, 15, 10, 0.1);
  --lumo-error-color-50pct: rgba(174, 15, 10, 0.5);
  --lumo-error-contrast-color: #ffffff;

  /* Grün: Erfolg – nie als Text auf Weiß, auf Grün immer Dunkelblau */
  --lumo-success-color: var(--wifa-green);
  --lumo-success-text-color: var(--wifa-blue);
  --lumo-success-color-10pct: rgba(198, 212, 0, 0.3);
  --lumo-success-color-50pct: rgba(198, 212, 0, 0.5);
  --lumo-success-contrast-color: var(--wifa-blue);

  /* Orange: Warnungen mit dunkler Schrift */
  --lumo-warning-color: var(--wifa-orange);
  --lumo-warning-text-color: #8A5A00;
  --lumo-warning-color-10pct: rgba(244, 175, 53, 0.2);
  --lumo-warning-color-50pct: rgba(244, 175, 53, 0.5);
  --lumo-warning-contrast-color: var(--wifa-darkgrey);

  /* Fokusring grün (Akzent) */
  --vaadin-focus-ring-color: var(--wifa-green);
  --vaadin-focus-ring-width: 2px;
}

body {
  font-family: var(--lumo-font-family);
  color: var(--lumo-body-text-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--wifa-blue);
  font-weight: 700;
}

a {
  color: var(--wifa-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--wifa-green);
  outline-offset: 2px;
}

/* keine Versalien */
vaadin-button, vaadin-grid, vaadin-tab, vaadin-side-nav-item, [theme~="badge"] {
  text-transform: none;
}

/* ---- Kopfleiste: Dunkelblau mit Logo und grüner Akzentlinie ---- */
vaadin-app-layout::part(navbar) {
  background: var(--wifa-blue);
  color: #ffffff;
  box-shadow: inset 0 -4px 0 var(--wifa-green);
  min-height: 4.25rem;
}

.wifa-header {
  --lumo-primary-text-color: #ffffff;
  --lumo-secondary-text-color: #ffffff;
  --lumo-tertiary-text-color: rgba(255, 255, 255, 0.85);
  --lumo-body-text-color: #ffffff;
  --lumo-contrast-60pct: rgba(255, 255, 255, 0.8);
  --lumo-contrast-5pct: rgba(255, 255, 255, 0.12);
  --lumo-contrast-10pct: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding-bottom: 4px;
}

.wifa-header h1 {
  color: #ffffff;
  font-size: var(--lumo-font-size-l);
  margin: 0;
  white-space: nowrap;
}

.wifa-header .wifa-header-user {
  color: #ffffff;
  font-size: var(--lumo-font-size-s);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45vw;
}

.wifa-header vaadin-button {
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.wifa-header vaadin-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Logo: Höhe 44 px, Schutzzone 12,5 % der Logobreite (≈ 6 px) rundum, nie verzerrt */
.wifa-logo {
  height: 44px;
  width: auto;
  padding: 7px;
  box-sizing: content-box;
  display: block;
}

/* ---- Navigation: aktiver Punkt mit grünem Balken, Hover hellblau ---- */
vaadin-app-layout::part(drawer) {
  background: #ffffff;
  border-inline-end: 1px solid var(--wifa-lightgrey);
}

vaadin-side-nav-item::part(content) {
  color: var(--wifa-darkgrey);
  border-radius: 0;
}

vaadin-side-nav-item::part(content):hover {
  background: rgba(135, 191, 199, 0.35);
  color: var(--wifa-blue);
}

vaadin-side-nav-item[current]::part(content) {
  background: rgba(135, 191, 199, 0.25);
  color: var(--wifa-blue);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--wifa-green);
}

/* Claim im Fuß der Navigation: Text in Dunkelgrau (Hellblau und Grün reichen auf Weiß nicht als Textfarbe),
   die drei Claim-Farben als Unterstreichung */
.wifa-claim {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  padding: var(--lumo-space-s) var(--lumo-space-m) var(--lumo-space-m);
  border-top: 1px solid var(--wifa-lightgrey);
  font-size: var(--lumo-font-size-s);
  font-weight: 700;
  color: var(--wifa-darkgrey);
}

.wifa-claim span {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.wifa-claim .wifa-claim-1 { text-decoration-color: var(--wifa-darkgrey); }
.wifa-claim .wifa-claim-2 { text-decoration-color: var(--wifa-lightblue); }
.wifa-claim .wifa-claim-3 { text-decoration-color: var(--wifa-green); }

/* ---- Anmelde- und Kennwortseiten: Logo auf Weiß mit Firmenangabe ---- */
.wifa-brand {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-m);
  margin: var(--lumo-space-l) 0 var(--lumo-space-m);
}

.wifa-brand img {
  height: 96px;
  width: auto;
  padding: 15px; /* Schutzzone 12,5 % der Logobreite */
  box-sizing: content-box;
}

.wifa-brand-name {
  font-weight: 700;
  color: var(--wifa-darkgrey);
  font-size: var(--lumo-font-size-l);
  line-height: 1.3;
}

.wifa-brand-school {
  color: var(--wifa-darkgrey);
  font-size: var(--lumo-font-size-m);
}

vaadin-login-form-wrapper {
  border: 1px solid var(--wifa-lightgrey);
  border-top: 4px solid var(--wifa-green);
  border-radius: var(--lumo-border-radius-m);
}

/* ---- Badges ---- */
[theme~="badge"] {
  font-weight: 600;
}

[theme~="badge"][theme~="success"] {
  background-color: var(--wifa-green);
  color: var(--wifa-blue);
}

[theme~="badge"][theme~="contrast"] {
  background-color: var(--wifa-lightblue);
  color: var(--wifa-blue);
}

[theme~="badge"][theme~="error"] {
  background-color: var(--lumo-error-color-10pct);
  color: var(--wifa-red);
}

[theme~="badge"][theme~="error"][theme~="primary"] {
  background-color: var(--wifa-red);
  color: #ffffff;
}

[theme~="badge"][theme~="warning"] {
  background-color: var(--wifa-orange);
  color: var(--wifa-darkgrey);
}

/* Warnhinweis als Fläche (Startsperre, Garantie nicht erfüllbar) */
.wifa-warning {
  display: inline-block;
  background: var(--wifa-orange);
  color: var(--wifa-darkgrey);
  font-weight: 600;
  padding: 0.25em 0.6em;
  border-radius: var(--lumo-border-radius-m);
}

/* ---- Benachrichtigungen ---- */
vaadin-notification-card[theme~="success"]::part(overlay) {
  background: var(--wifa-green);
  color: var(--wifa-blue);
}

vaadin-notification-card[theme~="error"]::part(overlay) {
  background: var(--wifa-red);
  color: #ffffff;
}

vaadin-notification-card[theme~="warning"]::part(overlay) {
  background: var(--wifa-orange);
  color: var(--wifa-darkgrey);
}

vaadin-notification-card[theme~="contrast"]::part(overlay) {
  background: var(--wifa-blue);
  color: #ffffff;
}

/* ---- Dialoge ---- */
vaadin-dialog-overlay::part(header) {
  color: var(--wifa-blue);
  font-weight: 700;
}

vaadin-dialog-overlay::part(overlay) {
  border-top: 4px solid var(--wifa-green);
}

/* ---- Tabellen ---- */
vaadin-grid {
  --vaadin-grid-cell-padding: var(--lumo-space-xs) var(--lumo-space-s);
}

vaadin-grid::part(header-cell) {
  color: var(--wifa-blue);
  font-weight: 700;
}

vaadin-grid::part(row):hover {
  background: rgba(135, 191, 199, 0.2);
}

/* ---- Datenschutzhinweise ---- */
.wifa-privacy h1 {
  font-size: var(--lumo-font-size-xxl);
  margin: 0 0 var(--lumo-space-xs);
}

.wifa-privacy .privacy-stand {
  color: var(--lumo-secondary-text-color);
  margin-top: 0;
}

.wifa-privacy h2 {
  font-size: var(--lumo-font-size-xl);
  margin: var(--lumo-space-l) 0 var(--lumo-space-s);
}

.wifa-privacy p, .wifa-privacy li {
  line-height: 1.5;
  max-width: 60rem;
}

.wifa-privacy li {
  margin-bottom: var(--lumo-space-xs);
}

.wifa-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--lumo-space-s) 0 var(--lumo-space-m);
  border: 1px solid var(--wifa-lightgrey);
  border-radius: var(--lumo-border-radius-m);
}

.wifa-privacy table {
  border-collapse: collapse;
  width: 100%;
  min-width: 36rem;
  font-size: var(--lumo-font-size-s);
}

.wifa-privacy th, .wifa-privacy td {
  text-align: left;
  vertical-align: top;
  padding: var(--lumo-space-xs) var(--lumo-space-s);
  border-bottom: 1px solid var(--wifa-lightgrey);
}

.wifa-privacy th {
  color: var(--wifa-blue);
  background: var(--lumo-contrast-5pct);
  font-weight: 700;
}

.wifa-privacy tbody tr:last-child td {
  border-bottom: none;
}

.wifa-privacy .privacy-receipt {
  margin-top: var(--lumo-space-xl);
  padding-top: var(--lumo-space-m);
  border-top: 1px solid #000;
}

.wifa-privacy-link {
  font-size: var(--lumo-font-size-s);
  margin-top: var(--lumo-space-m);
}

/* ---- Druck: nur der Inhalt, kleines Logo oben links, schwarz-weiß-tauglich ---- */
.wifa-print-only {
  display: none;
}

@media print {
  vaadin-app-layout::part(navbar),
  vaadin-app-layout::part(drawer),
  vaadin-drawer-toggle,
  .copy-button,
  #network-csv,
  #network-print,
  #admin-network-csv,
  #admin-network-search,
  #environment-badge,
  .privacy-actions,
  #privacy-login {
    display: none !important;
  }

  .wifa-table-scroll {
    overflow: visible;
    border: none;
  }

  .wifa-privacy table {
    min-width: 0;
  }

  .wifa-privacy th, .wifa-privacy td {
    border: 1px solid #000;
  }

  .wifa-privacy .privacy-receipt {
    display: block;
    break-inside: avoid;
  }

  vaadin-app-layout {
    --vaadin-app-layout-drawer-offset-left: 0 !important;
    --vaadin-app-layout-navbar-offset-top: 0 !important;
  }

  .wifa-print-only {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  section.wifa-print-only {
    display: block;
  }

  .wifa-print-only img {
    height: 40px;
    width: auto;
  }

  body, h1, h2, h3, h4, p, span, td, th, pre, a, [theme~="badge"] {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  a {
    text-decoration: none;
  }

  pre {
    border: 1px solid #000;
    padding: 4px 6px;
  }
}