/* =========================================
   AuftragsPilot QR-Schilder Optik
   Nur Design/Oberfläche, QR-Drucklogik bleibt unberührt
   ========================================= */

:root {
  --ap-blue-dark: #10245a;
  --ap-blue: #17306f;
  --ap-muted: #334a78;
  --ap-line: rgba(126, 164, 220, .48);
  --ap-card: rgba(246, 250, 255, .9);
  --ap-card2: rgba(231, 241, 255, .86);
  --ap-orange: #ff9f1c;
}

html,
body {
  background:
    radial-gradient(circle at 86% 2%, rgba(104,231,225,.28), transparent 34%),
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.55), transparent 34%),
    linear-gradient(135deg, #bcd6f4 0%, #eaf4ff 48%, #d4f6f5 100%) !important;
  color: var(--ap-blue-dark) !important;
  font-family: Arial, system-ui, sans-serif !important;
}

/* Grundfläche */
body {
  min-height: 100vh !important;
}

/* Kopfbereich */
header,
.header,
.top,
.topbar,
.navbar {
  background:
    radial-gradient(circle at 90% 0%, rgba(96,165,250,.18), transparent 36%),
    linear-gradient(135deg, rgba(246,250,255,.96), rgba(226,238,255,.88)) !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 26px !important;
  box-shadow: 0 14px 34px rgba(54,91,150,.13) !important;
}

/* Titel */
h1,
h2,
h3,
h4,
strong,
label {
  color: var(--ap-blue-dark) !important;
  text-shadow: none !important;
}

p,
span,
small,
.muted,
.hint,
.note,
.info {
  color: var(--ap-muted) !important;
  text-shadow: none !important;
}

/* Hinweisbox + Filterbox */
.notice,
.warning,
.info-box,
.filter,
.filters,
.toolbar,
.controls,
.card,
.panel,
.box,
section {
  background:
    radial-gradient(circle at 100% 0%, rgba(96,165,250,.12), transparent 32%),
    linear-gradient(135deg, rgba(246,250,255,.94), rgba(231,241,255,.88)) !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(177,201,238,.88) !important;
  border-radius: 22px !important;
  box-shadow:
    0 14px 32px rgba(54,91,150,.13),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* Formularfelder */
input,
select,
textarea {
  background: #ffffff !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(96,132,190,.42) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 10px rgba(58,96,160,.08) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(96,165,250,.24) !important;
  border-color: rgba(47,125,211,.75) !important;
}

/* Navigation / Buttons */
button,
.btn,
.button,
a.btn,
a.button,
nav a,
nav button {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(96,132,190,.42) !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px rgba(58,96,160,.13) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* Hauptbutton Drucken */
button.print,
#printBtn,
#printQrBtn,
button[id*="print" i],
a[id*="print" i] {
  background: linear-gradient(135deg, #4fa3ff, #2f7dd3) !important;
  color: #ffffff !important;
  border-color: rgba(47,125,211,.75) !important;
  box-shadow: 0 10px 22px rgba(47,125,211,.22) !important;
}

/* Button-Inhalte nicht gold */
button *,
.btn *,
.button *,
nav a *,
nav button * {
  color: inherit !important;
  text-shadow: none !important;
}

/* Alte Goldlinien entschärfen */
hr,
.divider,
.line,
.separator {
  border-color: rgba(126,164,220,.42) !important;
  background-color: rgba(126,164,220,.42) !important;
}

/* Alte schwarze/goldene Flächen der Oberfläche entfernen */
[style*="background:#000"],
[style*="background: #000"],
[style*="background:#050505"],
[style*="background: #050505"],
[style*="background:#090909"],
[style*="background: #090909"],
[style*="#d4af37"],
[style*="#f5d56b"],
[style*="212,175,55"] {
  background:
    radial-gradient(circle at 100% 0%, rgba(96,165,250,.12), transparent 32%),
    linear-gradient(135deg, rgba(246,250,255,.94), rgba(231,241,255,.88)) !important;
  color: var(--ap-blue-dark) !important;
  border-color: rgba(126,164,220,.42) !important;
}

/* WICHTIG: QR-Schilder selbst bleiben druckbar weiß/schwarz */
.label,
.qr-label,
.qr-card,
.price-label,
.ticket,
.sticker,
[class*="label" i],
[class*="schild" i] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #111111 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}

/* Text in QR-Schildern bewusst schwarz lassen */
.label *,
.qr-label *,
.qr-card *,
.price-label *,
.ticket *,
.sticker *,
[class*="label" i] *,
[class*="schild" i] * {
  color: #000000 !important;
}

/* Kleine QR-Downloadbuttons auf den Schildern dürfen hell bleiben */
.label button,
.qr-label button,
.qr-card button,
.price-label button,
.ticket button,
.sticker button {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(96,132,190,.42) !important;
}

/* Zur Übersicht */
.ap-back-overview,
a.ap-back-overview,
.back.ap-back-overview {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(96,132,190,.34) !important;
  border-radius: 18px !important;
}

/* Druckansicht nicht kaputt machen */
@media print {
  html,
  body {
    background: #ffffff !important;
  }

  header,
  .header,
  .top,
  .topbar,
  .navbar,
  .toolbar,
  .controls,
  .filters,
  .ap-back-overview-wrap,
  .ap-back-overview {
    display: none !important;
  }

  .label,
  .qr-label,
  .qr-card,
  .price-label,
  .ticket,
  .sticker,
  [class*="label" i],
  [class*="schild" i] {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: none !important;
  }
}

/* AP FINAL: QR-Seite Kopfbereich und obere Buttons sauber */
html body {
  padding: 22px 26px !important;
  box-sizing: border-box !important;
}

/* Kopf nicht mehr am Rand kleben */
html body header,
html body .header,
html body .top,
html body .topbar {
  margin: 0 auto 22px auto !important;
  padding: 28px 32px !important;
  max-width: 1680px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Titel sauber einrücken */
html body h1 {
  margin-left: 0 !important;
  padding-left: 0 !important;
  color: #10245a !important;
  line-height: 1.05 !important;
}

/* Oberste Links/Buttons: Artikel, Scanner, Kasse */
html body header a,
html body header button,
html body .header a,
html body .header button,
html body .top a,
html body .top button,
html body .topbar a,
html body .topbar button,
html body nav a,
html body nav button {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  background-color: #ffffff !important;
  color: #10245a !important;
  border: 1px solid rgba(96,132,190,.42) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 18px rgba(58,96,160,.13) !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Inhalt der Buttons auch dunkelblau */
html body header a *,
html body header button *,
html body .header a *,
html body .header button *,
html body .top a *,
html body .top button *,
html body .topbar a *,
html body .topbar button *,
html body nav a *,
html body nav button * {
  color: #10245a !important;
  text-shadow: none !important;
}

/* Drucken als blauer Hauptbutton statt gold */
html body button[id*="print" i],
html body a[id*="print" i],
html body button[class*="print" i],
html body a[class*="print" i],
html body button[onclick*="print" i],
html body a[onclick*="print" i] {
  background: linear-gradient(135deg, #4fa3ff, #2f7dd3) !important;
  background-color: #2f7dd3 !important;
  color: #ffffff !important;
  border-color: rgba(47,125,211,.75) !important;
  box-shadow: 0 10px 22px rgba(47,125,211,.22) !important;
}

/* Drucken Inhalt weiß */
html body button[id*="print" i] *,
html body a[id*="print" i] *,
html body button[class*="print" i] *,
html body a[class*="print" i] * {
  color: #ffffff !important;
}

/* Falls Buttons nur am Text erkannt werden */
html body .ap-qr-main-print {
  background: linear-gradient(135deg, #4fa3ff, #2f7dd3) !important;
  color: #ffffff !important;
  border-color: rgba(47,125,211,.75) !important;
}

@media (max-width: 760px) {
  html body {
    padding: 12px !important;
  }

  html body header,
  html body .header,
  html body .top,
  html body .topbar {
    padding: 20px !important;
  }
}