/* =========================================
   AuftragsPilot Light Final Clean
   Letzte schwarze Stellen + Lesbarkeit
   Nur Optik im index.html-Appbereich
   ========================================= */

:root {
  --ap-clean-text: #16285d;
  --ap-clean-muted: #40527a;
  --ap-clean-card: rgba(255,255,255,.68);
  --ap-clean-card2: rgba(232,242,255,.64);
  --ap-clean-border: rgba(255,255,255,.86);
  --ap-clean-shadow: 0 16px 34px rgba(77,112,166,.14);
}

/* App-Hintergrund endgültig hell */
html,
body,
.app,
.main,
#dashboardPanel,
#apExactDashboard,
.panel,
.panel.active-panel {
  background:
    radial-gradient(circle at 8% 10%, rgba(255,255,255,.42), transparent 30%),
    radial-gradient(circle at 92% 5%, rgba(141,237,229,.32), transparent 34%),
    linear-gradient(135deg, #94b5e2 0%, #dfeaff 52%, #c8efee 100%) !important;
  color: var(--ap-clean-text) !important;
}

/* Inline-Schwarz in index.html neutralisieren */
.main [style*="background:#000"],
.main [style*="background: #000"],
.main [style*="background:#050505"],
.main [style*="background: #050505"],
.main [style*="background:#030405"],
.main [style*="background: #030405"],
.main [style*="background:#080"],
.main [style*="background: #080"],
.main [style*="background:black"],
.main [style*="background: black"] {
  background:
    radial-gradient(circle at 88% 8%, rgba(141,237,229,.16), transparent 30%),
    linear-gradient(135deg, var(--ap-clean-card), var(--ap-clean-card2)) !important;
  color: var(--ap-clean-text) !important;
}

/* Normale Panels/Karten hell */
.main .panel:not(#dashboardPanel) .card,
.main .panel:not(#dashboardPanel) section,
.main .panel:not(#dashboardPanel) .form-card,
.main .panel:not(#dashboardPanel) .result-card,
.main .panel:not(#dashboardPanel) .summary-card,
.main .panel:not(#dashboardPanel) [class*="card"],
.main .panel:not(#dashboardPanel) [class*="box"],
.main .panel:not(#dashboardPanel) [class*="row"] {
  background:
    radial-gradient(circle at 88% 8%, rgba(141,237,229,.16), transparent 30%),
    linear-gradient(135deg, var(--ap-clean-card), var(--ap-clean-card2)) !important;
  border: 1px solid var(--ap-clean-border) !important;
  color: var(--ap-clean-text) !important;
  box-shadow:
    var(--ap-clean-shadow),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
}

/* Normale Panels: Schrift immer dunkel lesbar */
.main .panel:not(#dashboardPanel),
.main .panel:not(#dashboardPanel) * {
  color: var(--ap-clean-text) !important;
  text-shadow: none !important;
}

.main .panel:not(#dashboardPanel) p,
.main .panel:not(#dashboardPanel) span,
.main .panel:not(#dashboardPanel) small,
.main .panel:not(#dashboardPanel) label,
.main .panel:not(#dashboardPanel) .muted,
.main .panel:not(#dashboardPanel) .hint,
.main .panel:not(#dashboardPanel) .description {
  color: var(--ap-clean-muted) !important;
}

.main .panel:not(#dashboardPanel) h1,
.main .panel:not(#dashboardPanel) h2,
.main .panel:not(#dashboardPanel) h3,
.main .panel:not(#dashboardPanel) strong {
  color: var(--ap-clean-text) !important;
}

/* Start-Dashboard-Farben wieder sauber setzen */
.ap-light-title h1,
.ap-light-help-title strong,
.ap-light-step strong {
  color: #172f68 !important;
}

.ap-light-title p,
.ap-light-help-title span,
.ap-light-step p {
  color: var(--ap-clean-muted) !important;
}

.ap-light-card p {
  color: #31446f !important;
}

.ap-light-quick > span:not(.ap-light-quick-icon) {
  color: #172f68 !important;
}

/* Große Kachel-Icons bleiben weiß auf farbigem Icon */
.ap-light-card .ap-light-card-icon {
  color: #ffffff !important;
}

/* Sidebar bleibt weiß auf Blau */
.sidebar,
.sidebar *,
.ap-exact-logo,
.ap-exact-logo *,
.ap-exact-nav,
.ap-exact-nav *,
.ap-exact-status,
.ap-exact-status * {
  color: #ffffff !important;
}

/* Sidebar nicht schwarz */
.sidebar button,
.sidebar .menu-item,
.ap-exact-nav-btn {
  background: rgba(255,255,255,.17) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  color: #ffffff !important;
}

.ap-exact-nav-btn.is-active,
.sidebar button.active,
.sidebar .menu-item.active {
  background:
    radial-gradient(circle at 88% 20%, rgba(255,180,255,.46), transparent 30%),
    linear-gradient(135deg, rgba(117,187,255,.58), rgba(217,178,255,.36)) !important;
  color: #ffffff !important;
}

/* Sync/Status-Pillen oben hell statt schwarz */
.main [id*="sync"],
.main [class*="sync"],
.main [id*="Sync"],
.main [class*="Sync"],
.main [id*="status"],
.main [class*="status"] {
  background: rgba(255,255,255,.66) !important;
  color: var(--ap-clean-text) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  box-shadow:
    0 10px 20px rgba(77,112,166,.10),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* Online-Punkte dürfen grün bleiben */
.main [class*="sync"] .dot,
.main [class*="status"] .dot,
.ap-light-sync-dot {
  background: #39d867 !important;
}

/* Buttons in normalen Panels hell */
.main .panel:not(#dashboardPanel) button,
.main .panel:not(#dashboardPanel) .button,
.main .panel:not(#dashboardPanel) .btn,
.main .panel:not(#dashboardPanel) .small-btn {
  background: rgba(255,255,255,.62) !important;
  color: var(--ap-clean-text) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 15px !important;
  box-shadow:
    0 10px 20px rgba(77,112,166,.10),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}

.main .panel:not(#dashboardPanel) button.primary,
.main .panel:not(#dashboardPanel) .primary {
  background: linear-gradient(135deg, #4f91ff, #7bbcff) !important;
  color: #ffffff !important;
}

/* Formulare lesbar */
.main input,
.main select,
.main textarea {
  background: rgba(255,255,255,.76) !important;
  color: var(--ap-clean-text) !important;
  border: 1px solid rgba(255,255,255,.90) !important;
}

/* Kategorie-Unterseiten */
.ap-exact-help,
.ap-exact-tool,
.ap-exact-back {
  background:
    radial-gradient(circle at 88% 8%, rgba(141,237,229,.18), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(232,242,255,.66)) !important;
  border-color: rgba(255,255,255,.86) !important;
  color: var(--ap-clean-text) !important;
}

.ap-exact-help *,
.ap-exact-tool *,
.ap-exact-back {
  color: var(--ap-clean-text) !important;
}

/* iframe-Hüllen hell; iframe-Inhalt selbst bleibt unverändert */
.main iframe {
  background: rgba(255,255,255,.72) !important;
}

/* Mobile */
@media screen and (max-width: 900px) {
  html,
  body,
  .app,
  .main {
    background:
      radial-gradient(circle at 8% 8%, rgba(255,255,255,.42), transparent 30%),
      linear-gradient(135deg, #92b5e3 0%, #dcecff 58%, #c9f0ee 100%) !important;
  }
}