/* =========================================
   AuftragsPilot Kasse Design
   Nur Optik, keine Kassenlogik
   ========================================= */

:root {
  --ap-bg1: #bcd6f4;
  --ap-bg2: #eaf4ff;
  --ap-bg3: #d4f6f5;

  --ap-blue-dark: #10245a;
  --ap-blue: #17306f;
  --ap-muted: #334a78;
  --ap-line: rgba(126, 164, 220, .48);

  --ap-card: rgba(246, 250, 255, .92);
  --ap-card2: rgba(231, 241, 255, .88);

  --ap-main: #2f7dd3;
  --ap-main2: #4fa3ff;
}

html,
body {
  margin: 0 !important;
  min-height: 100vh !important;
  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, var(--ap-bg1) 0%, var(--ap-bg2) 48%, var(--ap-bg3) 100%) !important;
  color: var(--ap-blue-dark) !important;
  font-family: Arial, system-ui, sans-serif !important;
  box-sizing: border-box !important;
}

body {
  padding: 22px 26px !important;
}

* {
  box-sizing: border-box;
}

/* Kopfbereich */
header,
.header,
.top,
.topbar,
.page-header,
.kasse-header {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  padding: 28px 32px !important;
  border-radius: 28px !important;
  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;
  border: 1px solid rgba(255,255,255,.84) !important;
  box-shadow:
    0 14px 34px rgba(54,91,150,.13),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  color: var(--ap-blue-dark) !important;
  overflow: visible !important;
}

/* Titel nicht abschneiden */
h1 {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  color: var(--ap-blue-dark) !important;
  font-size: clamp(42px, 5vw, 78px) !important;
  line-height: .95 !important;
  letter-spacing: -.05em !important;
  text-shadow: none !important;
}

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;
}

/* Zur Übersicht */
.ap-back-overview-wrap {
  margin: 0 0 18px 0 !important;
}

.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;
  box-shadow: 0 10px 24px rgba(58,96,160,.13) !important;
  text-shadow: none !important;
}

/* Hauptkarten / Bereiche */
section,
.card,
.panel,
.box,
.form-card,
.market-card,
.kasse-card,
.sale-card,
.stat-box,
.stat-card,
.summary-card,
.today-card,
.report-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(96,165,250,.12), transparent 32%),
    linear-gradient(135deg, var(--ap-card), var(--ap-card2)) !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(177,201,238,.88) !important;
  border-radius: 24px !important;
  box-shadow:
    0 14px 32px rgba(54,91,150,.13),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* dunkle Boxen in der Kasse hell machen */
.market-total,
.total,
.total-box,
.today,
.today-box,
.today-row,
[class*="total" i],
[class*="today" i],
[class*="stat" i] {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,242,255,.9)) !important;
  color: var(--ap-blue-dark) !important;
  border: 1px solid rgba(126,164,220,.48) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 18px rgba(58,96,160,.10) !important;
}

/* harte schwarze Inline-Flächen überschreiben */
[style*="background:#000"],
[style*="background: #000"],
[style*="background:#050505"],
[style*="background: #050505"],
[style*="background:#090909"],
[style*="background: #090909"],
[style*="background:#111"],
[style*="background: #111"],
[style*="background:rgb(0"],
[style*="background: rgb(0"] {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,242,255,.9)) !important;
  color: var(--ap-blue-dark) !important;
  border-color: rgba(126,164,220,.48) !important;
}

/* Zahlen / Summen */
.market-total strong,
.total strong,
.total-box strong,
.stat-box strong,
.stat-card strong,
.today-card strong,
[class*="total" i] strong,
[class*="stat" i] strong,
[id*="total" i],
[id*="sum" i] {
  color: var(--ap-blue-dark) !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: 15px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 10px rgba(58,96,160,.08) !important;
  text-shadow: none !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 */
button,
.btn,
.button,
a.btn,
a.button,
input[type="button"],
input[type="submit"] {
  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;
}

button *,
.btn *,
.button *,
a.btn *,
a.button * {
  color: inherit !important;
  text-shadow: none !important;
}

/* Hauptbutton Verkauf speichern */
button.primary,
.primary,
button[type="submit"],
[id*="save" i],
[class*="save" i],
[id*="sale" i][type="button"] {
  background: linear-gradient(135deg, var(--ap-main2), var(--ap-main)) !important;
  color: #ffffff !important;
  border-color: rgba(47,125,211,.75) !important;
  box-shadow: 0 10px 22px rgba(47,125,211,.22) !important;
}

/* Tagesbericht / Drucken hell */
[id*="report" i],
[class*="report" i],
[id*="print" i],
[class*="print" i] {
  background: linear-gradient(135deg, #ffffff, #edf4ff) !important;
  color: var(--ap-blue-dark) !important;
  border-color: rgba(96,132,190,.42) !important;
}

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

/* Layout sauber halten */
.grid,
.layout,
.content,
.main,
.market-layout,
.kasse-layout {
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 18px !important;
}

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

  header,
  .header,
  .top,
  .topbar,
  .page-header,
  .kasse-header {
    padding: 20px !important;
    border-radius: 22px !important;
  }

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

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