/*
 * MLE Tanken – Fachkern-Oberfläche.
 * Theme, Font, Header, Footer und Startfläche liefert ausschließlich der MLE Product Core.
 * Diese Datei nutzt nur die vom Core bereitgestellten --mle-* Theme-Token.
 */
@scope (.mle-tanken-fachkern) {
* { box-sizing: border-box; }

:scope {
  min-height: 100%;
  color: var(--mle-text);
  font-family: inherit;
  --mle-accent-strong: var(--mle-accent);
  --mle-orange: var(--mle-accent);
  --mle-orange-dark: var(--mle-accent);
  --mle-grey-light: var(--mle-background);
  --mle-paper: var(--mle-surface-soft);
  --mle-text-secondary: var(--mle-text-muted);
  --mle-line: var(--mle-border);
  --mle-danger-bg: color-mix(in srgb, var(--mle-danger) 8%, var(--mle-surface));
  --mle-warning-bg: color-mix(in srgb, var(--mle-warning) 8%, var(--mle-surface));
  --mle-warning-text: var(--mle-warning);
  --mle-radius-card: 20px;
  --mle-radius-field: 14px;
  --mle-radius-pill: 999px;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }

h1,h2,h3 {
  margin: 0 0 8px;
  color: var(--mle-text);
  font-weight: var(--mle-font-weight-normal, 500);
  letter-spacing: -.025em;
}
h1 { font-size: clamp(28px, 7vw, 38px); line-height: 1.08; }
h2 { font-size: clamp(25px, 6.5vw, 31px); line-height: 1.12; }
h3 { font-size: 17px; line-height: 1.25; }
p { margin: 0 0 14px; color: var(--mle-text-muted); line-height: 1.55; }
code {
  display: inline-block;
  max-width: 100%;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--mle-surface-soft);
  color: var(--mle-text);
  font-size: .86em;
  overflow-wrap: anywhere;
}

/* Der Product Core rendert Header/Footer/Startfläche. Der Fachkern beginnt hier mit seinem Inhalt. */
.mle-app { min-height: 0; padding: 0; }
.mle-license-note,
.mle-content {
  width: min(calc(100% - 24px), 680px);
  margin-inline: auto;
}
.mle-license-note {
  margin-top: 12px;
  margin-bottom: 2px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--mle-warning) 24%, var(--mle-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--mle-warning) 8%, var(--mle-surface));
  color: var(--mle-warning);
  font-size: 12px;
  font-weight: var(--mle-font-weight-normal, 500);
}
.mle-content { padding: 20px 0 12px; }
.mle-content > div > h2:first-child { margin: 0 2px 7px; }
.mle-content > div > h2:first-child + p { margin: 0 2px 16px; }
.mle-page-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 0 2px 14px; }
.mle-eyebrow { margin-bottom: 5px; color: var(--mle-accent); font-size: 11px; line-height: 1; font-weight: var(--mle-font-weight-normal, 500); letter-spacing: .12em; text-transform: uppercase; }
.mle-hint { color: var(--mle-text-muted); font-size: 12px; }

/* Karten / Kacheln */
.mle-card {
  margin-bottom: 14px;
  padding: 19px;
  border: 1px solid var(--mle-border);
  border-radius: var(--mle-radius-card);
  background: var(--mle-surface);
  box-shadow: 0 10px 30px var(--mle-shadow);
}
.mle-card > :last-child { margin-bottom: 0; }
.mle-card h3 + p { margin-top: 2px; }
#mle-choice-backlog,
#mle-choice-import { transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
#mle-choice-backlog:hover,
#mle-choice-import:hover { border-color: var(--mle-accent); transform: translateY(-1px); box-shadow: 0 14px 34px var(--mle-shadow); }

/* Formulare */
.mle-field { display: grid; gap: 7px; margin-bottom: 15px; }
.mle-field label { color: var(--mle-text); font-size: 13px; font-weight: var(--mle-font-weight-normal, 500); }
input[type=text],input[type=number],input[type=password],input[type=email],input[type=date],select,textarea,input[type=file] {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid var(--mle-border);
  border-radius: var(--mle-radius-field);
  outline: none;
  background: var(--mle-surface-soft);
  color: var(--mle-text);
  font-size: 16px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input[type=file] { padding: 7px; font-size: 13px; }
input[type=file]::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--mle-border);
  border-radius: 10px;
  background: var(--mle-surface);
  color: var(--mle-text);
  font-weight: var(--mle-font-weight-normal, 500);
  cursor: pointer;
}
input:focus,select:focus,textarea:focus {
  border-color: var(--mle-accent);
  background: var(--mle-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mle-accent) 12%, transparent);
}
input[type=checkbox],input[type=radio] { accent-color: var(--mle-accent); }
input[data-quick-digit] { font-variant-numeric: tabular-nums; letter-spacing: .03em; font-size: 21px; text-align: center; }

.mle-vehicle-quick-select { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.mle-vehicle-quick-btn {
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--mle-border);
  border-radius: var(--mle-radius-field);
  background: var(--mle-surface-soft);
  color: var(--mle-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.mle-vehicle-quick-btn strong, .mle-vehicle-quick-btn span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mle-vehicle-quick-btn strong { font-size: 14px; }
.mle-vehicle-quick-btn span { margin-top: 2px; color: var(--mle-text-muted); font-size: 11px; }
.mle-vehicle-quick-btn.is-active {
  border-color: var(--mle-accent);
  background: color-mix(in srgb, var(--mle-accent) 8%, var(--mle-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mle-accent) 10%, transparent);
}

.mle-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mle-quick-grid .mle-field.full { grid-column: 1 / -1; }

/* Buttons */
.mle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--mle-radius-field);
  text-decoration: none;
  font-size: 14px;
  font-weight: var(--mle-font-weight-normal, 500);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.mle-btn:active { transform: translateY(1px); }
.mle-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--mle-accent) 25%, transparent); outline-offset: 2px; }
.mle-btn-primary { border-color: var(--mle-accent); background: var(--mle-accent); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--mle-accent) 24%, transparent); }
.mle-btn-primary:hover { border-color: var(--mle-accent-strong); background: var(--mle-accent-strong); }
.mle-btn-secondary { border-color: var(--mle-border); background: var(--mle-surface-soft); color: var(--mle-text); }
.mle-btn-secondary:hover { border-color: color-mix(in srgb, var(--mle-text) 20%, var(--mle-border)); background: var(--mle-surface); }
.mle-btn-ghost { background: transparent; color: var(--mle-text-muted); }
.mle-btn-row { display: flex; gap: 10px; margin-top: 10px; }
.mle-btn-row .mle-btn { width: auto; flex: 1; }
.mle-btn[disabled] { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.mle-settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.mle-pill { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--mle-radius-pill); font-size: 11px; font-weight: var(--mle-font-weight-normal, 500); background: var(--mle-surface-soft); color: var(--mle-text-muted); border: 1px solid var(--mle-border); }
.mle-pill-main { border-color: color-mix(in srgb, var(--mle-accent) 18%, var(--mle-border)); background: color-mix(in srgb, var(--mle-accent) 9%, var(--mle-surface)); color: var(--mle-accent); }

/* Kennzahlen */
.mle-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mle-tile { min-width: 0; padding: 14px; border: 1px solid var(--mle-border); border-radius: 16px; background: var(--mle-surface-soft); }
.mle-tile-value { overflow-wrap: anywhere; color: var(--mle-text); font-size: 20px; font-weight: var(--mle-font-weight-normal, 500); }
.mle-tile-label { margin-top: 3px; color: var(--mle-text-muted); font-size: 11px; font-weight: var(--mle-font-weight-normal, 500); }

/* Medien-/Fotoaktionen */
.mle-photo-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.mle-photo-buttons .mle-btn { min-height: 66px; padding: 10px 12px; flex-direction: column; font-size: 12px; line-height: 1.25; }
.mle-photo-buttons .mle-btn svg { width: 21px; height: 21px; color: var(--mle-accent); }

/* Meldungen */
.mle-warning-list { display: grid; gap: 8px; margin: 10px 0 16px; }
.mle-warning { border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: var(--mle-font-weight-normal, 500); line-height: 1.4; }
.mle-warning.strong { border-color: color-mix(in srgb, var(--mle-danger) 30%, transparent); background: color-mix(in srgb, var(--mle-danger) 10%, var(--mle-surface)); color: var(--mle-danger); }
.mle-warning.weak,.mle-warning.warning { border-color: color-mix(in srgb, var(--mle-warning) 30%, transparent); background: color-mix(in srgb, var(--mle-warning) 9%, var(--mle-surface)); color: var(--mle-warning); }
.mle-form-error { min-height: 18px; color: var(--mle-danger); font-size: 13px; font-weight: var(--mle-font-weight-normal, 500); }

/* Tabellen */
.mle-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--mle-border); border-radius: 14px; background: var(--mle-surface); font-size: 12px; }
.mle-table th,.mle-table td { padding: 10px 8px; border-bottom: 1px solid var(--mle-border); text-align: left; vertical-align: top; }
.mle-table tr:last-child td { border-bottom: 0; }
.mle-table th { background: var(--mle-surface-soft); color: var(--mle-text-muted); font-weight: var(--mle-font-weight-normal, 500); }
.mle-table tr.mle-row-error { background: color-mix(in srgb, var(--mle-danger) 8%, var(--mle-surface)); }
.mle-table tr.mle-row-warning { background: color-mix(in srgb, var(--mle-warning) 8%, var(--mle-surface)); }

/* Untere Navigation – keine Emoji-Icons, sondern ruhige Linienicons. */
.mle-nav {
  position: fixed;
  z-index: 880;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  width: min(calc(100% - 20px), 660px);
  padding: 6px;
  border: 1px solid var(--mle-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--mle-surface) 94%, transparent);
  box-shadow: 0 16px 46px var(--mle-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.mle-nav button {
  flex: 1;
  min-width: 0;
  min-height: 58px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--mle-text-muted);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 2px;
  font-size: 9.5px;
  font-weight: var(--mle-font-weight-normal, 500);
}
.mle-nav button:hover { color: var(--mle-text); }
.mle-nav button[aria-current="true"] { background: color-mix(in srgb, var(--mle-accent) 10%, var(--mle-surface)); color: var(--mle-accent); }
.mle-nav-icon { display: grid; place-items: center; width: 24px; height: 24px; }
.mle-nav-icon svg { display: block; }

/* Toast / leere Zustände / Dialoge */
.mle-tanken-toast { position: fixed !important; z-index: 2147483200 !important; left: 50% !important; bottom: max(104px, calc(env(safe-area-inset-bottom) + 96px)) !important; transform: translateX(-50%) !important; display: block !important; width: max-content; max-width: min(90vw,460px); box-sizing: border-box; margin: 0 !important; padding: 12px 17px !important; border: 0 !important; border-radius: var(--mle-radius-pill,999px) !important; background: var(--mle-text,#26302b) !important; color: var(--mle-surface,#fff) !important; text-align: center !important; font: 800 12px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif !important; box-shadow: 0 12px 28px rgba(0,0,0,.20) !important; pointer-events: none; }
.mle-empty { margin: 8px 0 14px; padding: 36px 16px; border: 1px dashed var(--mle-border); border-radius: var(--mle-radius-card); background: var(--mle-surface-soft); color: var(--mle-text-muted); text-align: center; }

.mle-dialog-backdrop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(28,34,31,.44); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.mle-dialog-card { width: min(100%, 430px); margin: 0; }


.mle-meta-list { margin: 0; display: grid; gap: 8px; }
.mle-meta-list div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--mle-border); }
.mle-meta-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.mle-meta-list dt { color: var(--mle-text-muted); font-size: 12px; }
.mle-meta-list dd { margin: 0; max-width: 60%; text-align: right; font-size: 12px; font-weight: var(--mle-font-weight-normal, 500); overflow-wrap: anywhere; }

.mle-entry-card.has-warning { border-color: color-mix(in srgb, var(--mle-warning) 54%, var(--mle-border)); }
.mle-entry-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:12px; }
.mle-warning-badge { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:color-mix(in srgb, var(--mle-warning) 10%, var(--mle-surface)); color:var(--mle-warning); font-size:10px; font-weight: var(--mle-font-weight-normal, 500); text-align:center; }
.mle-entry-values { display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:12px; font-size:13px; font-weight: var(--mle-font-weight-normal, 500); }

@media (max-width: 720px) {
  .mle-content { padding-top: 17px; }
}

@media (max-width: 430px) {
  .mle-license-note,.mle-content { width: min(calc(100% - 18px), 680px); }
  .mle-card { padding: 17px; }
  .mle-settings-actions,.mle-photo-buttons { grid-template-columns: 1fr; }
  .mle-quick-grid { gap: 9px; }
  .mle-nav { width: calc(100% - 14px); bottom: max(7px, env(safe-area-inset-bottom)); padding: 5px; border-radius: 18px; }
  .mle-nav button { min-height: 55px; font-size: 8.5px; border-radius: 12px; }
  .mle-nav-icon { width: 22px; height: 22px; }
}

@media (max-width: 350px) {
  .mle-nav button { font-size: 0; }
  .mle-nav button span:last-child { display: none; }
  .mle-nav button { min-height: 50px; }
}

}

/* Lokale Bildausschnitt-Wahl für die Fotoerfassung */
.mle-photo-region-overlay{position:fixed;inset:0;z-index:2147483600;background:rgba(10,22,35,.78);display:flex;align-items:center;justify-content:center;padding:12px}
.mle-photo-region-dialog{box-sizing:border-box;width:min(100%,850px);max-height:96dvh;overflow:auto;background:#fff;color:#263443;border-radius:15px;padding:16px;box-shadow:0 12px 45px #0006}
.mle-photo-region-dialog h3{margin:0 0 8px;font-size:1.12rem}
.mle-photo-region-dialog p{margin:0 0 12px;font-size:.91rem}
.mle-photo-region-dialog canvas{display:block;max-width:100%;width:auto;height:auto;margin:auto;border:1px solid #c6d2dc;border-radius:7px;touch-action:none;cursor:crosshair}
.mle-photo-region-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px}
.mle-photo-region-actions button{padding:10px 12px;min-height:42px;border:1px solid #9aaebd;border-radius:9px;background:#f5f8fb;color:#234}
.mle-photo-region-actions button[data-action="apply"]{background:#12629a;color:#fff;border-color:#12629a}
.mle-photo-region-actions button:disabled{opacity:.5}