/* =========================================
   AuftragsPilot Näh-Rechner Optik
   Nur Design, keine Rechner-Logik
   ========================================= */

:root {
  --bg: #d8eaff !important;
  --card: rgba(246, 250, 255, .88) !important;
  --card2: rgba(235, 245, 255, .9) !important;
  --gold: #7da8df !important;
  --gold2: #17306f !important;
  --text: #10245a !important;
  --muted: #334a78 !important;
  --line: rgba(126, 164, 220, .55) !important;
  --red: #ff8a24 !important;
}

html,
body {
  background:
    radial-gradient(circle at 88% 4%, rgba(104, 231, 225, .24), transparent 34%),
    linear-gradient(135deg, #bcd6f4 0%, #eaf4ff 48%, #d4f6f5 100%) !important;
  color: #10245a !important;
}

body {
  font-family: Arial, system-ui, sans-serif !important;
}

.page {
  max-width: 1380px !important;
  padding: 22px !important;
}

html.ap-naehen-embedded .page {
  max-width: none !important;
  padding: 0 !important;
}

html.ap-naehen-embedded .top {
  display: none !important;
}

.top {
  background:
    radial-gradient(circle at 92% 0%, rgba(96, 165, 250, .18), transparent 34%),
    linear-gradient(135deg, rgba(246, 250, 255, .9), rgba(226, 238, 255, .82)) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 28px !important;
  padding: 22px 24px !important;
  box-shadow: 0 18px 42px rgba(54, 91, 150, .13) !important;
}

h1 {
  color: #17306f !important;
  font-size: 38px !important;
}

.sub {
  color: #334a78 !important;
  font-weight: 800 !important;
}

.back {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: #10245a !important;
  border: 1px solid rgba(96, 132, 190, .34) !important;
  box-shadow: 0 8px 18px rgba(58, 96, 160, .14) !important;
  border-radius: 16px !important;
}

.layout {
  gap: 18px !important;
}

.card,
.results-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .12), transparent 32%),
    linear-gradient(135deg, rgba(246, 250, 255, .92), rgba(231, 241, 255, .86)) !important;
  border: 1px solid rgba(177, 201, 238, .9) !important;
  border-radius: 22px !important;
  box-shadow:
    0 14px 32px rgba(54, 91, 150, .12),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.card h2 {
  color: #17306f !important;
  font-size: 26px !important;
  border-bottom: 1px solid rgba(126, 164, 220, .35) !important;
  padding-bottom: 13px !important;
  margin-bottom: 18px !important;
}

label,
.unit,
.row strong,
.note {
  color: #203864 !important;
}

input,
.out,
select,
textarea {
  background: #ffffff !important;
  color: #10245a !important;
  border: 1px solid rgba(96, 132, 190, .42) !important;
  border-radius: 12px !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, .25) !important;
  border-color: rgba(47, 125, 211, .75) !important;
}

.out {
  border-color: rgba(255, 138, 36, .65) !important;
  background: linear-gradient(135deg, #ffffff, #fff8ed) !important;
}

.note {
  border-top: 1px solid rgba(126, 164, 220, .42) !important;
}

button,
.button,
.actions a,
#saveSewingCatalogBtn,
#printQrBtn,
#saveArticleBtn,
#resetBtn {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: #10245a !important;
  border: 1px solid rgba(96, 132, 190, .34) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(58, 96, 160, .13) !important;
  font-weight: 900 !important;
}

button:hover,
.button:hover,
.actions a:hover,
#saveSewingCatalogBtn:hover,
#printQrBtn:hover,
#saveArticleBtn:hover,
#resetBtn:hover {
  background: linear-gradient(135deg, #ffffff, #dfeeff) !important;
  transform: translateY(-1px) !important;
}

button.primary,
.primary,
#saveSewingCatalogBtn {
  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;
}

hr {
  border-color: rgba(126, 164, 220, .35) !important;
}

.results-card {
  position: sticky !important;
  top: 18px !important;
}

.results-card h2 {
  color: #17306f !important;
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr !important;
  }

  .results-card {
    position: static !important;
    min-height: auto !important;
  }
}

@media (max-width: 720px) {
  .page {
    padding: 12px !important;
  }

  .card {
    padding: 18px !important;
  }

  .field,
  .row {
    grid-template-columns: 1fr !important;
  }

  input,
  .out {
    text-align: left !important;
  }
}

/* AP FIX: Näh-Rechner Einheiten lesbar */
html body .unit,
html body .field .unit,
html body .form .unit,
html body .card .unit,
html body label + input + .unit,
html body select + .unit {
  color: #203864 !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body .field label,
html body .form label,
html body .card label {
  color: #203864 !important;
  opacity: 1 !important;
}

html body .card p,
html body .card .muted {
  color: #334a78 !important;
  opacity: 1 !important;
}