/* =========================================
   AuftragsPilot Fertige Artikel Optik
   Nur Design, keine Artikel-/QR-/Kassen-Logik
   ========================================= */

:root {
  --ap-blue-dark: #10245a;
  --ap-blue: #17306f;
  --ap-muted: #334a78;
  --ap-line: rgba(126, 164, 220, .48);
  --ap-card: rgba(246, 250, 255, .88);
  --ap-card2: rgba(231, 241, 255, .84);
  --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;
}

body {
  min-height: 100vh !important;
}

/* Hauptcontainer */
.page,
.container,
main,
.app,
.wrapper {
  background: transparent !important;
}

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

/* AP gelber Balken entschärfen */
header *,
.topbar *,
.navbar *,
.app-header *,
.header * {
  color: var(--ap-blue-dark) !important;
  text-shadow: none !important;
}

/* Karten */
.card,
.panel,
.box,
section,
.form-card,
.article-card,
.item-card,
.stat,
.stat-card {
  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;
}

/* große schwarze Flächen raus */
[style*="background:#000"],
[style*="background: #000"],
[style*="background:#050505"],
[style*="background: #050505"],
[style*="background:#090909"],
[style*="background: #090909"],
[style*="background:#111"],
[style*="background: #111"] {
  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;
}

/* Texte */
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;
}

/* 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::placeholder,
textarea::placeholder {
  color: rgba(16,36,90,.52) !important;
}

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

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

/* Hauptbuttons orange */
button.primary,
.primary,
button[type="submit"],
.save,
.save-btn,
#saveBtn,
#saveArticleBtn {
  background: linear-gradient(135deg, #ffcf66, #ff9f1c) !important;
  color: #111827 !important;
  border-color: rgba(255,159,28,.75) !important;
  box-shadow: 0 10px 22px rgba(255,159,28,.22) !important;
}

/* QR / Bearbeiten / Löschen kleiner und sauber */
button[id*="qr" i],
button[class*="qr" i],
button[id*="edit" i],
button[class*="edit" i],
button[id*="delete" i],
button[class*="delete" i] {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: var(--ap-blue-dark) !important;
  border-color: rgba(96,132,190,.38) !important;
}

/* Preis hervorheben */
.price,
[class*="price"],
[id*="price"],
strong:has(+ small) {
  color: #17306f !important;
}

/* Artikelzeilen */
.article,
.article-row,
.item,
.list-item,
.product,
.product-row,
li {
  color: var(--ap-blue-dark) !important;
}

/* Tabellen/Listenelemente */
table,
tbody,
tr,
td,
th {
  background: transparent !important;
  color: var(--ap-blue-dark) !important;
  border-color: var(--ap-line) !important;
}

/* Top Navigation Buttons */
nav a,
nav button,
.menu a,
.menu button {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(96,132,190,.36) !important;
  border-radius: 15px !important;
}

/* Zur Übersicht Button passend lassen */
.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;
}

/* Mobile */
@media (max-width: 780px) {
  body {
    padding: 10px !important;
  }

  .card,
  .panel,
  .box,
  section {
    border-radius: 18px !important;
  }

  h1 {
    font-size: 34px !important;
  }
}

/* AP FINAL: Goldreste auf Fertige-Artikel-Seite entfernen */

/* goldene Rahmen / Linien in Karten und Listen entschärfen */
html body .card,
html body .panel,
html body .box,
html body section,
html body .article-card,
html body .article-row,
html body .item-card,
html body .list-item,
html body .product-row,
html body .article,
html body .item,
html body .product,
html body li {
  border-color: rgba(126, 164, 220, .42) !important;
}

/* falls alte Goldfarbe inline oder tief verschachtelt sitzt */
html body [style*="#d4af37"],
html body [style*="#f5d56b"],
html body [style*="212,175,55"],
html body [style*="245,213,107"] {
  border-color: rgba(126, 164, 220, .42) !important;
  color: #10245a !important;
}

/* QR-Buttons nicht mehr gelb */
html body button[id*="qr" i],
html body button[class*="qr" i],
html body a[id*="qr" i],
html body a[class*="qr" i],
html body [data-action*="qr" i],
html body [title*="qr" i] {
  color: #10245a !important;
  border-color: rgba(96,132,190,.42) !important;
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
}

html body button[id*="qr" i] *,
html body button[class*="qr" i] *,
html body a[id*="qr" i] *,
html body a[class*="qr" i] * {
  color: #10245a !important;
}

/* gelbe Trennlinien links raus */
html body hr,
html body .divider,
html body .line,
html body .separator {
  border-color: rgba(126, 164, 220, .42) !important;
  background-color: rgba(126, 164, 220, .42) !important;
}

/* Hinweisbox links nicht mehr gold umrandet */
html body .note,
html body .hint,
html body .info,
html body [class*="note"],
html body [class*="hint"],
html body [class*="info"] {
  border-color: rgba(126, 164, 220, .42) !important;
  color: #334a78 !important;
}

/* kleine Preis-/QR-Goldtexte abfangen */
html body .qr,
html body .qr *,
html body [class*="qr" i],
html body [class*="qr" i] *,
html body [id*="qr" i],
html body [id*="qr" i] * {
  color: #10245a !important;
}

/* AP FINAL: nur die 3 restlichen Goldstellen auf Fertige Artikel */

/* 1. Artikelliste rechts: goldene Rahmen zu Blau */
html body [id*="list" i] > div,
html body [id*="artikel" i] > div,
html body [id*="article" i] > div,
html body [class*="list" i] > div,
html body [class*="artikel" i] > div,
html body [class*="article" i] > div {
  border-color: rgba(126, 164, 220, .42) !important;
}

/* 2. QR-Buttons: gelbe Schrift zu Dunkelblau */
html body button,
html body a {
  text-shadow: none !important;
}

html body button[title*="QR" i],
html body a[title*="QR" i],
html body button[id*="qr" i],
html body a[id*="qr" i],
html body button[class*="qr" i],
html body a[class*="qr" i] {
  color: #10245a !important;
  border-color: rgba(126, 164, 220, .42) !important;
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
}

/* 3. linke Trennlinie/Hinweisbox: Gold zu Blau */
html body hr,
html body .hint,
html body .note,
html body .info,
html body [class*="hint" i],
html body [class*="note" i],
html body [class*="info" i] {
  border-color: rgba(126, 164, 220, .42) !important;
}

/* Falls der QR-Button nur Text "QR" ohne Klasse hat */
html body .ap-qr-blue-fix {
  color: #10245a !important;
  border-color: rgba(126, 164, 220, .42) !important;
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
}

/* AP FINAL: Buttons auf Fertige Artikel blau/weiß statt Gold */
html body button,
html body .btn,
html body .button,
html body a.btn,
html body a.button,
html body input[type="button"],
html body input[type="submit"] {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: #10245a !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;
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Speichern / Import als kräftiger blauer Hauptbutton */
html body button[type="submit"],
html body #saveArticleBtn,
html body #saveBtn,
html body [id*="save" i],
html body [id*="import" i],
html body button:has-text {
  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;
}

/* QR / Bearbeiten / Löschen ebenfalls blau/weiß */
html body button {
  color: #10245a !important;
}

/* Goldene Button-Texte hart überschreiben */
html body button *,
html body .btn *,
html body .button *,
html body a.btn *,
html body a.button * {
  color: inherit !important;
  text-shadow: none !important;
}

/* Falls Button direkt gelbe Inlinefarbe hat */
html body button[style],
html body a[style] {
  color: #10245a !important;
  border-color: rgba(96,132,190,.42) !important;
}

/* Hauptbuttons mit Text speichern/importieren blau */
html body .ap-blue-main-btn {
  background: linear-gradient(135deg, #4fa3ff, #2f7dd3) !important;
  color: #ffffff !important;
  border-color: rgba(47,125,211,.75) !important;
}

/* AP FINAL: Kopfbereich Fertige Artikel nicht mehr gold */
html body header,
html body .header,
html body .topbar,
html body .navbar,
html body .brand,
html body .logo,
html body [class*="brand" i],
html body [class*="logo" i] {
  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;
  background-color: transparent !important;
  color: #10245a !important;
  border-color: rgba(126,164,220,.42) !important;
  box-shadow: 0 10px 24px rgba(58,96,160,.12) !important;
  text-shadow: none !important;
}

/* AP-Logo und Titel im Kopfbereich */
html body header *,
html body .header *,
html body .topbar *,
html body .navbar *,
html body .brand *,
html body .logo *,
html body [class*="brand" i] *,
html body [class*="logo" i] * {
  color: #10245a !important;
  background-color: transparent !important;
  text-shadow: none !important;
}

/* falls der gelbe Balken direkt inline gesetzt ist */
html body [style*="#d4af37"],
html body [style*="#f5d56b"],
html body [style*="gold"],
html body [style*="212,175,55"],
html body [style*="245,213,107"] {
  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: #10245a !important;
  border-color: rgba(126,164,220,.42) !important;
  text-shadow: none !important;
}