/* Nachbau einer klassischen SAP-GUI-Maske (MIGO) in #sap. Alles selbst gezeichnet, Schrift Tahoma/Arial. */
.sap {
  --s-text: #15191e; --s-label: #1c2833; --s-titel: #1b3a5a;
  --s-grund: #dde6ee; --s-flaeche: #eef3f7; --s-rand: #8ea2b6;
  --s-feldrand: #8199b1; --s-anz: #e6ecf2; --s-anzrand: #bccad7;
  --s-kopfzelle: #d3dde7; --s-gitter: #c4d0dc; --s-zelle: #eff3f7;
  --s-markiert: #fde2a2; --s-markiertsel: #e7a640;
  --s-fokus: #2a66b0; --s-fehler: #c62d1f; --s-fehlergrund: #fde4e0;
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--s-grund); color: var(--s-text);
  border: 1px solid #6c859e; border-radius: 6px 6px 3px 3px;
  box-shadow: 0 1px 2px rgba(15, 27, 45, .08), 0 8px 22px rgba(15, 27, 45, .10);
  font: 12px/1.25 Tahoma, Verdana, Arial, sans-serif;
}
.sap *, .sap *::before, .sap *::after { box-sizing: border-box; }
.sap button, .sap input, .sap select { font: inherit; color: inherit; margin: 0; letter-spacing: 0; }
.sap svg { display: block; width: 16px; height: 16px; flex: none; }
.sap [hidden] { display: none !important; }

/* Menüzeile mit Fensterknöpfen */
.sap-menue { flex: none; display: flex; align-items: center; height: 24px; padding: 0 4px 0 7px; background: linear-gradient(#f4f7fa, #d3dde7); border-bottom: 1px solid #a3b4c5; }
.sap-app { width: 14px; height: 14px; margin-right: 6px; border-radius: 2px; background: linear-gradient(135deg, #6a91bb, #2c547c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); flex: none; }
.sap-mp { padding: 3px 7px; border-radius: 2px; cursor: default; white-space: nowrap; }
.sap-mp:hover { background: #c3d3e3; }
.sap-fk { margin-left: auto; display: flex; gap: 1px; flex: none; }
.sap-fk i { width: 26px; height: 18px; position: relative; display: block; }
.sap-fk i::before, .sap-fk i::after { content: ''; position: absolute; left: 50%; top: 50%; }
.fk-min::before { width: 9px; height: 2px; background: #33475b; transform: translate(-50%, 3px); }
.fk-max::before { width: 9px; height: 8px; border: 1px solid #33475b; border-top-width: 2px; transform: translate(-50%, -50%); }
.fk-zu::before, .fk-zu::after { width: 11px; height: 1.6px; background: #33475b; transform: translate(-50%, -50%) rotate(45deg); }
.fk-zu::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Systemleiste */
.sap-sys { flex: none; display: flex; align-items: center; gap: 1px; height: 30px; padding: 0 6px; overflow: hidden; white-space: nowrap; background: linear-gradient(#f8fafc, #dbe4ec); border-bottom: 1px solid #a3b4c5; }
.sap-sym { width: 22px; height: 22px; padding: 0; flex: none; display: inline-grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer; }
.sap-sym:hover { border-color: #8ea2b6; background: linear-gradient(#fff, #e3eaf1); }
.sap-sym:active { background: #cdd9e5; }
.sap-sym:disabled { opacity: .45; cursor: default; border-color: transparent; background: none; }
.sap-trenn { width: 1px; height: 18px; margin: 0 5px; flex: none; background: #a7b6c6; box-shadow: 1px 0 0 #fff; }
.sap-befehl { flex: none; display: inline-flex; align-items: stretch; height: 20px; margin: 0 4px 0 3px; background: #fff; border: 1px solid var(--s-feldrand); }
.sap-befehlsfeld { width: 118px; border: 0; padding: 0 4px; outline: none; background: transparent; text-transform: uppercase; }
.sap-befehl-pfeil { width: 14px; position: relative; border-left: 1px solid #c3cfda; background: linear-gradient(#f8fafc, #dde5ed); }
.sap-befehl-pfeil::after { content: ''; position: absolute; left: 3px; top: 7px; border: 4px solid transparent; border-top: 5px solid #33475b; border-bottom: 0; }
.sap-befehl:focus-within { border-color: var(--s-fokus); }

/* Titel und Anwendungsleiste */
.sap-titel { flex: none; padding: 5px 10px 5px; font-size: 15px; font-weight: bold; color: var(--s-titel); background: linear-gradient(#fbfcfd, #edf2f6); border-bottom: 1px solid #c2ceda; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-anw { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 3px 6px; background: #e5ecf2; border-bottom: 1px solid #a3b4c5; }
.sap-knopf { height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; white-space: nowrap; cursor: pointer; background: linear-gradient(#fdfefe, #dfe7ee); border: 1px solid #9cafc2; border-radius: 2px; }
.sap-knopf svg { width: 14px; height: 14px; }
.sap-knopf:hover { border-color: #5d7d9c; background: linear-gradient(#fff, #d5e1ec); }
.sap-knopf:active { background: #c9d7e4; }
.sap-knopf:disabled { cursor: default; color: #8a97a4; border-color: #c4cfda; background: #edf1f5; }
.sap-knopf:disabled svg { opacity: .45; }

/* Arbeitsfläche */
.sap-koerper { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.sap-bild { flex: 1; min-width: 0; overflow: auto; padding: 6px 5px 10px; display: flex; flex-direction: column; gap: 7px; }
.sap-belege { width: 168px; flex: none; overflow: auto; background: #f5f8fa; border-right: 1px solid #a3b4c5; }
.sap-belege-kopf { padding: 4px 6px; font-weight: bold; background: linear-gradient(#eef3f7, #d3dde7); border-bottom: 1px solid #b3c2d1; }
.sap-baum, .sap-baum ul { list-style: none; margin: 0; padding: 0; }
.sap-baum { padding: 4px 0; }
.sap-baum ul { padding-left: 13px; }
.sap-baum li > span { display: block; padding: 2px 4px 2px 15px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-baum li > span::before { content: ''; position: absolute; left: 5px; top: 6px; border: 4px solid transparent; border-left: 5px solid #46627f; border-right: 0; }
.sap-baum li.auf > span::before { left: 3px; top: 7px; border: 4px solid transparent; border-top: 5px solid #46627f; border-bottom: 0; }
.sap-baum li.blatt > span::before { left: 4px; top: 5px; width: 7px; height: 8px; border: 1px solid #5d6f82; background: #fff; }

/* Felder */
.sap-z { display: flex; align-items: center; gap: 4px; min-height: 22px; min-width: 0; }
.sap-lbl { flex: none; width: 128px; color: var(--s-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-lbl-frei { color: var(--s-label); white-space: nowrap; }
.sap-txt { min-width: 0; padding-left: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-ein, .sap-anz, .sap-dd { height: 19px; min-width: 0; padding: 0 4px; line-height: 17px; background: #fff; border: 1px solid var(--s-feldrand); border-radius: 0; }
.sap-ein { outline: none; }
.sap-anz { display: inline-block; flex: none; background: var(--s-anz); border-color: var(--s-anzrand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-ein:focus, select.sap-dd:focus { outline: none; border-color: var(--s-fokus); box-shadow: inset 0 0 0 1px var(--s-fokus); }
.sap-ein:disabled { background: var(--s-anz); border-color: var(--s-anzrand); color: var(--s-text); -webkit-text-fill-color: var(--s-text); opacity: 1; }
.sap .sap-r { text-align: right; }
.sap .sap-m { text-align: center; }
.sap-dd { padding-right: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-repeat: no-repeat; background-position: right center; background-size: 15px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='17' viewBox='0 0 15 17' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f7f9fb'/%3E%3Cstop offset='1' stop-color='%23d6e0e9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='15' height='17' fill='url(%23g)'/%3E%3Cpath d='M.5 0v17' stroke='%23aab9c8'/%3E%3Cpath d='M4 7h7l-3.5 4z' fill='%2333475b'/%3E%3C/svg%3E"); }
select.sap-dd { appearance: none; -webkit-appearance: none; cursor: pointer; }
select.sap-dd:disabled { cursor: default; background-color: var(--s-anz); border-color: var(--s-anzrand); color: var(--s-text); opacity: 1; }
span.sap-dd { background-color: var(--s-anz); border-color: var(--s-anzrand); }
.sap input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; margin: 0; flex: none; vertical-align: middle; cursor: pointer; background: #fff center / 11px 11px no-repeat; border: 1px solid #5f7b97; border-radius: 0; }
.sap input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.7L10.2 3' fill='none' stroke='%2315191e' stroke-width='2'/%3E%3C/svg%3E"); }
.sap input[type=checkbox]:disabled { cursor: default; background-color: var(--s-anz); border-color: #a3b4c5; }
.sap input[type=checkbox]:focus-visible { outline: 1px dotted #15191e; outline-offset: 2px; }
.sap-kasten { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.sap .falsch { border-color: var(--s-fehler) !important; background-color: var(--s-fehlergrund) !important; box-shadow: inset 0 0 0 1px var(--s-fehler); }

/* Feldbreiten */
.w-aktion { width: 150px; } .w-ref { width: 124px; } .w-best { width: 86px; } .w-bwa { width: 36px; } .w-plus { width: 20px; text-align: center; }
.w-nr { width: 64px; } .w-mat { width: 120px; } .w-zahl { width: 76px; } .w-pos { width: 40px; } .w-zeile { width: 32px; }
.w-werk { width: 130px; } .w-ort { width: 190px; } .w-bestand { width: 130px; } .w-mittel { width: 130px; } .w-lang { width: 100%; max-width: 330px; flex: 1 1 auto; }

/* Kopfzeile der Transaktion */
.sap-aktion { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 1px 1px 0; }
.sap-aktion-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

/* Bereiche mit Reitern */
.sap-reiterzeile { display: flex; align-items: flex-end; gap: 3px; }
.sap-zuklapp { width: 18px; height: 17px; flex: none; margin-bottom: 2px; padding: 0; position: relative; cursor: pointer; background: linear-gradient(#fdfefe, #d9e2ea); border: 1px solid #93a7bb; border-radius: 2px; }
.sap-zuklapp::after { content: ''; position: absolute; left: 4px; top: 5px; border: 4px solid transparent; border-bottom: 5px solid #33475b; border-top: 0; }
.zu .sap-zuklapp::after { top: 6px; border-bottom: 0; border-top: 5px solid #33475b; }
.sap-reiter { flex: 1; min-width: 0; display: flex; gap: 1px; overflow-x: auto; scrollbar-width: none; padding-left: 1px; }
.sap-reiter::-webkit-scrollbar { display: none; }
.sap-reiter button { flex: none; height: 21px; margin-top: 2px; padding: 0 11px; position: relative; top: 1px; white-space: nowrap; cursor: pointer; color: #263646; background: linear-gradient(#edf2f6, #c6d3df); border: 1px solid var(--s-rand); border-bottom: 0; border-radius: 4px 4px 0 0; }
.sap-reiter button:hover { background: linear-gradient(#f6f9fb, #d3dee8); }
.sap-reiter button[aria-selected=true] { height: 23px; margin-top: 0; z-index: 1; color: var(--s-text); background: var(--s-flaeche); }
.sap-reiterflaeche { position: relative; padding: 7px 8px; background: var(--s-flaeche); border: 1px solid var(--s-rand); }
.sap-detailflaeche { min-height: 168px; }
.sap-kopfraster { display: grid; grid-template-columns: auto 82px auto minmax(70px, 1fr) auto minmax(80px, 1.3fr); gap: 3px 6px; align-items: center; }
.sap-kopfraster > .sap-lbl { width: auto; }
.sap-kopfraster > .sap-lbl:nth-child(6n+3), .sap-kopfraster > .sap-lbl:nth-child(6n+5) { padding-left: 8px; }
.sap-kopfraster .sap-ein { width: 100%; }
.sap-lieferant { padding-left: 0; }

/* Positionstabelle */
/* Am Rechner wächst die Tabelle in die freie Höhe (wie in SAP), mindestens Kopf + 7 Zeilen. */
.sap-bild > * { flex: none; }
.sap-bild > .sap-uebers { flex: 1 1 0; display: flex; flex-direction: column; }
.sap-tabrahmen { flex: 1 1 0; min-height: 179px; overflow-x: auto; overflow-y: hidden; background: #f5f8fa; border: 1px solid var(--s-rand); }
.sap-tab { width: 100%; min-width: 600px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.c-sel { width: 14px; } .c-zeile { width: 30px; } .c-text { width: auto; } .c-ok { width: 24px; } .c-menge { width: 74px; } .c-eme { width: 30px; }
.c-ort { width: 154px; } .c-bwa { width: 30px; } .c-bestand { width: 84px; } .c-werk { width: 66px; }
.sap-tab th { height: 21px; padding: 0 3px; text-align: left; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1c2833; background: linear-gradient(#eef3f7, #cfdae5); border-right: 1px solid #aebdcc; border-bottom: 1px solid #93a7bb; }
.sap-tab th.sel { padding: 0; background: linear-gradient(#e5ecf2, #c3d0dc); }
.sap-tab th.sel svg { width: 12px; height: 12px; margin: 0 auto; }
.sap-tab td { height: 22px; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--s-zelle); border-right: 1px solid var(--s-gitter); border-bottom: 1px solid var(--s-gitter); }
.sap-tab td.ed { padding: 1px 2px; background: #fbfcfd; }
.sap-tab td.ed .sap-ein, .sap-tab td.ed .sap-dd { width: 100%; height: 19px; display: block; }
.sap-tab td.ed input[type=checkbox] { display: block; margin: 0 auto; }
.sap-tab td.sel { padding: 0; cursor: pointer; background: linear-gradient(90deg, #e2e9f0, #c8d4df); border-right: 1px solid #93a7bb; }
.sap-tab tbody tr[data-pos] { cursor: default; }
.sap-tab tbody tr[data-pos]:hover td:not(.ed):not(.sel) { background: #e6eef6; }
.sap-tab tr.markiert td, .sap-tab tr.markiert:hover td:not(.ed):not(.sel) { background: var(--s-markiert); }
.sap-tab tr.markiert td.sel { background: linear-gradient(90deg, #f4c66d, var(--s-markiertsel)); }
.sap-tab tr.leer td { background: #f5f8fa; }
.sap-tab tr.leer td.sel { background: linear-gradient(90deg, #e9eef3, #d6dfe8); }
.sap-tableiste { display: flex; align-items: center; gap: 1px; padding: 3px 1px 0; }
.sap-tableiste .sap-trenn { height: 16px; margin: 0 3px; }

/* Zeile unter dem Detailbereich */
.sap-okzeile { display: flex; align-items: center; gap: 4px; padding: 5px 2px 0; }
.sap-zeilelbl { margin-left: 22px; margin-right: 2px; }
.sap-pfeil { width: 19px; height: 19px; padding: 0; position: relative; cursor: pointer; background: linear-gradient(#fdfefe, #d9e2ea); border: 1px solid #93a7bb; border-radius: 2px; }
.sap-pfeil::after { content: ''; position: absolute; left: 4px; top: 6px; border: 5px solid transparent; border-bottom: 6px solid #33475b; border-top: 0; }
.sap-pfeil.runter::after { top: 6px; border-bottom: 0; border-top: 6px solid #33475b; }
.sap-pfeil:disabled { cursor: default; opacity: .45; }

/* Statuszeile */
.sap-status { flex: none; display: flex; align-items: stretch; height: 24px; gap: 6px; padding-left: 7px; background: linear-gradient(#f3f6f9, #d6e0e9); border-top: 1px solid #9cafc2; }
.sap-meldung { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.sap-meldtext { overflow: hidden; text-overflow: ellipsis; }
.sap-status[data-art=fehler] .sap-meldtext { color: #8f1d12; }
.sap-meldsym svg { width: 15px; height: 15px; }
.sap-sysinfo { flex: none; display: flex; }
.sap-sysinfo > span { display: flex; align-items: center; padding: 0 9px; color: #2a3a4a; border-left: 1px solid #b0bfce; box-shadow: inset 1px 0 0 #fff; white-space: nowrap; }
.sap-sysinfo > .sap-dreieck { padding: 0 6px; position: relative; width: 20px; }
.sap-dreieck::after { content: ''; position: absolute; left: 7px; top: 7px; border: 4px solid transparent; border-left: 5px solid #46627f; border-right: 0; }

/* Nach dem Buchen gesperrt */
.sap.gesperrt .sap-tab td.ed { background: var(--s-zelle); }
.sap.gesperrt .sap-tab tr.markiert td.ed { background: var(--s-markiert); }

/* Schmal (Handy): Maske unter der 3D-Welt, Höhe nach Inhalt, Tabelle scrollt im Fenster waagrecht. */
@media (max-width: 960px) {
  .sap { height: auto; border-radius: 6px; }
  .sap-koerper { flex-direction: column; overflow: visible; }
  .sap-bild { overflow: visible; }
  .sap-bild > .sap-uebers { flex: none; }
  .sap-tabrahmen { flex: none; min-height: 0; }
  .sap-tab tr.extra { display: none; }
  .sap-belege { width: auto; max-height: 160px; border-right: 0; border-bottom: 1px solid #a3b4c5; }
  .sap-mp { padding: 3px 5px; }
  .sap-titel { white-space: normal; font-size: 14px; }
  .sap-lbl { width: 112px; }
  .sap-kopfraster { grid-template-columns: 108px minmax(0, 1fr); }
  .sap-kopfraster > .sap-lbl:nth-child(n) { padding-left: 0; }
  .sap-aktion-rechts { margin-left: 0; }
  .w-aktion { width: 140px; } .w-ref { width: 118px; }
  .w-ort { width: auto; flex: 1 1 auto; max-width: 200px; }
  .w-lang { width: auto; flex: 1 1 120px; }
  .sap-z { flex-wrap: wrap; }
  .sap-detailflaeche { min-height: 0; }
  .sap-sysinfo > span:not(.sap-dreieck):not(:nth-child(2)) { display: none; }
}
@media (max-width: 380px) {
  .sap-fk { display: none; }
}
.sap-anz.sap-weiss { background: #fff; border-color: var(--s-feldrand); }
.sap-kasten:has(input:disabled) { cursor: default; }

/* Zeigen und Aufblitzen. Gehört nicht zu SAP: unser Blau, Schrift Manrope.
   Eigene Schicht über der Maske, darum verschiebt nichts davon die Maske. */
.sap { position: relative; }
.sap-zeiger { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.sap-ring { position: absolute; border: 2px solid #1b66f5; border-radius: 4px; box-shadow: 0 0 0 4px rgba(27, 102, 245, .18); }
.sap-blitz { background: rgba(27, 102, 245, .16); opacity: 0; animation: sap-blitz 1.2s ease-out forwards; }
@keyframes sap-blitz { 0% { opacity: 0; } 14% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.sap-schild {
  position: absolute; left: 0; top: 0; z-index: 1; padding: 3px 8px 4px; border-radius: 6px;
  color: #fff; background: #1b66f5; box-shadow: 0 2px 8px rgba(15, 27, 45, .22);
  font: 700 11.5px/1.2 Manrope, system-ui, -apple-system, sans-serif; letter-spacing: 0; white-space: nowrap;
  animation: sap-schild-ein .14s ease-out;
}
.sap-schild::after { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; }
.sap-schild[data-seite=unten]::after { bottom: 100%; left: var(--spitze); margin-left: -5px; border-top-width: 0; border-bottom-color: #1b66f5; }
.sap-schild[data-seite=oben]::after { top: 100%; left: var(--spitze); margin-left: -5px; border-bottom-width: 0; border-top-color: #1b66f5; }
.sap-schild[data-seite=rechts]::after { right: 100%; top: var(--spitze); margin-top: -5px; border-left-width: 0; border-right-color: #1b66f5; }
@keyframes sap-schild-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sap-schild { animation: none; } }