/* --- Stil «Fiori» -----------------------------------------------------------------------
   Angelehnt an SAP Fiori (Theme Horizon), ohne UI5-Bibliothek: nur Farben, Formen und
   Abstände über den Stilen aus style.css. Aktiv, wenn darstellung.js <html data-stil="fiori">
   setzt (Kontomenü → Darstellung → Stil). Modus, Dichte und Farbe gelten weiterhin.
   Wird als letzte Stildatei geladen. Die Regeln sind mit :where() so gewichtet wie die Grundregeln
   in style.css: Seitenspezifische Stile (eigene Klassen) behalten also Vorrang.            */

:root[data-stil="fiori"] {
  --hg: #f5f6f7;
  --flaeche: #ffffff;
  --text: #1d2d3e;
  --leise: #556b82;
  --linie: #e5e5e5;
  --feld-linie: #556b81;
  --knopf-linie: #bcc3ca;
  --akzent-text: #ffffff;
  --fokus: #0032a5;
  --gefahr: #aa0808;
  --gut: #256f3a;
  --kritisch: #e76500;
  --zeile-hover: #eaecee;
  --gedaempft: #eaecee;
  --gewaehlt: #ebf8ff;
  --radius: 8px;
  --schatten-xs: none;
  --schatten-sm: 0 0 2px 0 rgb(34 53 72 / .2), 0 2px 4px 0 rgb(34 53 72 / .2);
  --schatten-md: 0 0 4px 0 rgb(34 53 72 / .2), 0 4px 8px 0 rgb(34 53 72 / .2);
  --schatten-lg: 0 0 16px 0 rgb(34 53 72 / .15), 0 16px 32px 0 rgb(34 53 72 / .25);
  --status-info-hg: #e8f3ff;
  --status-gut-hg: #f5fae5;
  --status-gefahr-hg: #ffeaf4;
  --status-kritisch-hg: #fff3b8;
  --status-neutral-hg: #eff1f2;
  --toast-hg: rgb(29 45 62 / .92);
}
:root.dunkel[data-stil="fiori"] {
  --hg: #12171c;
  --flaeche: #1d232a;
  --text: #f5f6f7;
  --leise: #a9b4be;
  --linie: #354a5f;
  --feld-linie: #8396a8;
  --knopf-linie: #8396a8;
  --akzent-text: #12171c;
  --fokus: #a6cfff;
  --gefahr: #ff8888;
  --gut: #97dd40;
  --kritisch: #ffc847;
  --zeile-hover: #29313a;
  --gedaempft: #29313a;
  --gewaehlt: #1c3c5c;
  --schatten-sm: 0 0 2px 0 rgb(0 0 0 / .4), 0 2px 4px 0 rgb(0 0 0 / .4);
  --schatten-md: 0 0 4px 0 rgb(0 0 0 / .4), 0 4px 8px 0 rgb(0 0 0 / .4);
  --schatten-lg: 0 0 16px 0 rgb(0 0 0 / .4), 0 16px 32px 0 rgb(0 0 0 / .5);
  --status-info-hg: #1c3c5c;
  --status-gut-hg: #233a1a;
  --status-gefahr-hg: #4a1a26;
  --status-kritisch-hg: #4a3a12;
  --status-neutral-hg: #29313a;
  --toast-hg: rgb(234 236 238 / .95);
}
:root.oled[data-stil="fiori"] { --hg: #000000; --flaeche: #0b0f13; --linie: #26323e; --zeile-hover: #151b22; --gedaempft: #151b22; }
/* andere Akzentfarben: Links und gedrückter Zustand folgen der Wahl */
:root[data-stil="fiori"] { --link: var(--akzent); --akzent-dunkler: color-mix(in srgb, var(--akzent) 88%, #000); }
:root[data-stil="fiori"]:not([data-farbe="blau"]) { --gewaehlt: color-mix(in srgb, var(--akzent) 10%, var(--flaeche)); }
/* Blau (Standard) ist im Fiori-Stil das Fiori-Blau; die anderen Farben bleiben wie gewählt */
:root[data-stil="fiori"][data-farbe="blau"] { --akzent: #0070f2; --akzent-dunkler: #0064d9; --link: #0064d9; }
:root.dunkel[data-stil="fiori"][data-farbe="blau"] { --akzent: #4db1ff; --akzent-dunkler: #6bc0ff; --link: #4db1ff; }
:root.dunkel[data-stil="fiori"] { --akzent-dunkler: color-mix(in srgb, var(--akzent) 85%, #fff); }

/* --- Shell (Kopfzeile) ---------------------------------------------------------------- */
:where(:root[data-stil="fiori"]) .kopf { border-bottom: 0; box-shadow: 0 0 2px 0 rgb(34 53 72 / .2), 0 2px 4px 0 rgb(34 53 72 / .1); position: relative; z-index: 5; }
:where(:root[data-stil="fiori"]) .marke { color: var(--text); font-weight: 700; letter-spacing: 0; }
:where(:root[data-stil="fiori"]) nav a { color: var(--text); font-weight: 400; position: relative; }
:where(:root[data-stil="fiori"]) nav a:hover { color: var(--link); }
:where(:root[data-stil="fiori"]) nav a.aktiv { color: var(--link); font-weight: 700; }

/* --- Seitenkopf ----------------------------------------------------------------------- */
:where(:root[data-stil="fiori"]) h1 { font-size: 20px; font-weight: 700; letter-spacing: 0; }
:where(:root[data-stil="fiori"]) h2, :where(:root[data-stil="fiori"]) h3 { letter-spacing: 0; font-weight: 700; }
:where(:root[data-stil="fiori"]) a { color: var(--link); }

/* --- Knöpfe: Standard, Hervorgehoben (primaer), Ablehnen (gefahr) ---------------------- */
:where(:root[data-stil="fiori"]) button {
  border-color: var(--knopf-linie); color: var(--link); font-weight: 600;
  border-radius: 8px; min-height: 36px;
}
:where(:root[data-stil="fiori"]) button:where(:hover:not(:disabled)) { background-color: var(--gedaempft); border-color: var(--knopf-linie); }
:where(:root[data-stil="fiori"]) button:where(:active:not(:disabled)) { background-color: var(--gewaehlt); border-color: var(--akzent); }
:where(:root[data-stil="fiori"]) button.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 700; }
:root[data-stil="fiori"] button.primaer:hover:not(:disabled) { background: var(--akzent-dunkler); border-color: var(--akzent-dunkler); }
:where(:root[data-stil="fiori"]) button.gefahr { color: var(--gefahr); border-color: color-mix(in srgb, var(--gefahr) 60%, var(--knopf-linie)); }
:where(:root[data-stil="fiori"]) button.gefahr:hover:not(:disabled) { background: var(--status-gefahr-hg); }
:where(:root[data-stil="fiori"]) button.mini, :where(:root[data-stil="fiori"]) .konto button,
:where(:root[data-stil="fiori"]) .dialog-kopf button, :where(:root[data-stil="fiori"]) .kontakte-kopf button { min-height: 0; }
/* randlose Knöpfe bleiben randlos und ohne Mindesthöhe */
:where(:root[data-stil="fiori"]) :is(button.knopf-text, .fhl-zu, .hlf-link-knopf, .klein-link, .rolle-knopf, .link-knopf,
  .eintrag-sig-knopf, .ueb-wahl button, .konto button.system-info, .mandant-wahl button, .toast-zu, .menue-liste button) { min-height: 0; }

/* Fokus wie Fiori: dunkelblauer Rahmen statt Schein */
:where(:root[data-stil="fiori"]) :is(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus); outline-offset: 1px; box-shadow: none;
}

/* --- Eingabefelder -------------------------------------------------------------------- */
:where(:root[data-stil="fiori"]) :is(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea) {
  border-color: var(--feld-linie); border-radius: 4px; box-shadow: inset 0 -1px 0 var(--feld-linie); min-height: 36px;
}
:where(:root[data-stil="fiori"]) :is(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea):hover:not(:disabled) {
  border-color: var(--akzent); box-shadow: inset 0 -1px 0 var(--akzent); background: color-mix(in srgb, var(--akzent) 3%, var(--flaeche));
}
:where(:root[data-stil="fiori"]) :is(input, select, textarea):focus-visible { border-color: var(--feld-linie); }
:where(:root[data-stil="fiori"]) :is(input[aria-invalid=true], input:user-invalid, select:user-invalid, textarea:user-invalid) {
  border-color: var(--gefahr); box-shadow: inset 0 -2px 0 var(--gefahr); background: var(--status-gefahr-hg);
}
:where(:root[data-stil="fiori"]) table.positionen :is(input, select, textarea), :where(:root[data-stil="fiori"]) .tabelle-rahmen.klein :is(input, select) { min-height: 0; }
:where(:root[data-stil="fiori"]) .raster label, :where(:root[data-stil="fiori"]) .stapel label, :where(:root[data-stil="fiori"]) label.block { font-weight: 400; color: var(--leise); }

/* --- Tabellen (wie sap.m.Table) -------------------------------------------------------- */
:where(:root[data-stil="fiori"]) .tabelle-rahmen { border: 0; border-radius: 12px; box-shadow: var(--schatten-sm); }
:where(:root[data-stil="fiori"]) th { color: var(--leise); font-weight: 400; font-size: 14px; border-bottom-color: color-mix(in srgb, var(--leise) 45%, transparent); }
:where(:root[data-stil="fiori"]) td { border-bottom-color: var(--linie); }
:where(:root[data-stil="fiori"]) :is(th, td) { padding-top: calc(var(--zelle-y) + 3px); padding-bottom: calc(var(--zelle-y) + 3px); }
:where(:root[data-stil="fiori"]) table.positionen :is(th, td) { padding-top: 6px; padding-bottom: 6px; }
:where(:root[data-stil="fiori"]) tbody tr:hover { background: var(--zeile-hover); }
:where(:root[data-stil="fiori"]) tbody tr:active { background: var(--gewaehlt); }
:where(:root[data-stil="fiori"]) td.nr { color: var(--text); font-weight: 700; }

/* --- Status (ObjectStatus, «inverted») -------------------------------------------------- */
:where(:root[data-stil="fiori"]) :is(.status, .typ) {
  border: 0; border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; background: var(--status-neutral-hg); color: var(--leise);
}
:where(:root[data-stil="fiori"]) .status-freigegeben, :where(:root[data-stil="fiori"]) .typ.haupt { background: var(--status-info-hg); color: var(--link); }
:where(:root[data-stil="fiori"]) :is(.status-bezahlt, .status-angenommen) { background: var(--status-gut-hg); color: var(--gut); }
:where(:root[data-stil="fiori"]) :is(.status-ueberfaellig, .status-abgelehnt) { background: var(--status-gefahr-hg); color: var(--gefahr); }
:where(:root[data-stil="fiori"]) .status-entwurf { border: 0; }

/* --- Karten, Hinweise, Dialoge, Menüs ---------------------------------------------------- */
:where(:root[data-stil="fiori"]) :is(.karte, .login-karte) { border: 0; border-radius: 12px; box-shadow: var(--schatten-sm); }
:where(:root[data-stil="fiori"]) .karte h2 { font-size: 16px; }
:where(:root[data-stil="fiori"]) .hinweis {
  background: var(--status-info-hg); border: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent);
  color: var(--text); border-radius: 8px;
}
:where(:root[data-stil="fiori"]) dialog { border: 0; border-radius: 16px; box-shadow: var(--schatten-lg); }
:where(:root[data-stil="fiori"]) dialog::backdrop { background: rgb(34 53 72 / .6); }
:where(:root[data-stil="fiori"]) dialog h2 { font-size: 16px; }
:where(:root[data-stil="fiori"]) .menue-liste { border: 0; border-radius: 8px; box-shadow: var(--schatten-md); padding: 4px 0; }
:where(:root[data-stil="fiori"]) .menue-liste button { color: var(--text); font-weight: 400; border-radius: 0; padding: 8px 16px; }
:where(:root[data-stil="fiori"]) .auswahl-leiste { border: 0; border-radius: 12px; box-shadow: var(--schatten-md); }
:where(:root[data-stil="fiori"]) .knopf-link:not(.primaer-link, .primaer) { border-color: var(--knopf-linie); color: var(--link); font-weight: 600; border-radius: 8px; }
:where(:root[data-stil="fiori"]) :is(.primaer-link, a.primaer) { border-radius: 8px; font-weight: 700; }

/* --- Reiter (IconTabBar) und Umschalter (SegmentedButton) -------------------------------- */
:where(:root[data-stil="fiori"]) .reiter {
  width: 100%; background: var(--flaeche); border-radius: 12px; padding: 0 12px; gap: 0;
  box-shadow: var(--schatten-sm);
}
:where(:root[data-stil="fiori"]) .reiter button {
  position: relative; border: 0; border-radius: 0; color: var(--text); font-weight: 400;
  padding: 12px 14px; min-height: 44px;
}
:where(:root[data-stil="fiori"]) .reiter button:hover:not(:disabled) { color: var(--link); background: none; }
:root[data-stil="fiori"] .reiter button.aktiv { background: none; box-shadow: none; color: var(--link); font-weight: 700; border: 0; }
:where(:root[data-stil="fiori"]) .reiter button.aktiv::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px;
  background: var(--link); border-radius: 3px 3px 0 0;
}
:where(:root[data-stil="fiori"]) .umschalter { background: none; padding: 0; gap: 0; border: 1px solid var(--knopf-linie); border-radius: 8px; overflow: hidden; }
:where(:root[data-stil="fiori"]) .umschalter button { border: 0; border-radius: 0; color: var(--link); font-weight: 600; min-height: 34px; }
:where(:root[data-stil="fiori"]) .umschalter button + button { border-left: 1px solid var(--knopf-linie); }
:root[data-stil="fiori"] .umschalter button.aktiv { background: var(--gewaehlt); color: var(--link); box-shadow: inset 0 0 0 1px var(--akzent); border-color: var(--akzent); }

/* --- Meldungen (MessageToast) ------------------------------------------------------------ */
:where(:root[data-stil="fiori"]) .toast {
  background: var(--toast-hg); color: var(--flaeche); border: 0; border-radius: 8px;
  box-shadow: var(--schatten-md);
}
:where(:root.dunkel[data-stil="fiori"]) .toast { color: #1d2d3e; }
:where(:root[data-stil="fiori"]) .toast-beschreibung { color: inherit; opacity: .8; }
:where(:root[data-stil="fiori"]) .toast[data-art="erfolg"] .toast-icon { color: #97dd40; }
:where(:root[data-stil="fiori"]) .toast[data-art="fehler"] .toast-icon { color: #ff8888; }
:where(:root[data-stil="fiori"]) .toast[data-art="warnung"] .toast-icon { color: #ffc847; }
:where(:root[data-stil="fiori"]) .toast[data-art="info"] .toast-icon { color: #89d1ff; }
:where(:root.dunkel[data-stil="fiori"]) .toast[data-art="erfolg"] .toast-icon { color: #256f3a; }
:where(:root.dunkel[data-stil="fiori"]) .toast[data-art="fehler"] .toast-icon { color: #aa0808; }
:where(:root.dunkel[data-stil="fiori"]) .toast[data-art="warnung"] .toast-icon { color: #b44f00; }
:where(:root.dunkel[data-stil="fiori"]) .toast[data-art="info"] .toast-icon { color: #0064d9; }
:where(:root[data-stil="fiori"]) .toast-dreher { border-color: rgb(255 255 255 / .3); border-top-color: currentColor; }
:where(:root[data-stil="fiori"]) .toast-aktion { background: var(--flaeche); color: var(--toast-hg); min-height: 0; border-radius: 6px; }
:where(:root.dunkel[data-stil="fiori"]) .toast-aktion { background: #1d2d3e; color: #f5f6f7; }
:where(:root[data-stil="fiori"]) .toast-zu { color: inherit; opacity: .7; }
:where(:root[data-stil="fiori"]) .toast-zu:hover:not(:disabled) { background: rgb(255 255 255 / .15); color: inherit; }

/* --- Darstellungswahl im Kontomenü ------------------------------------------------------- */
:where(:root[data-stil="fiori"]) .menue-liste .darstellung-gruppe > button { color: var(--text); min-height: 0; }
:where(:root[data-stil="fiori"]) .menue-liste .darstellung-gruppe > button.an { color: var(--akzent-text); }

@media print {
  :where(:root[data-stil="fiori"]) :is(.tabelle-rahmen, .karte) { box-shadow: none; border: 1px solid #ccc; }
}