/* =========================================
   AuftragsPilot Light Global Design
   Für Dashboard-Unterseiten und normale Panels
   Nur Optik - keine Logik
   ========================================= */

:root {
  --ap-light-bg-a: #94b5e2;
  --ap-light-bg-b: #dfeaff;
  --ap-light-bg-c: #c8efee;
  --ap-light-text: #16285d;
  --ap-light-muted: #40527a;
  --ap-light-card: rgba(255,255,255,.58);
  --ap-light-card-strong: rgba(255,255,255,.74);
  --ap-light-border: rgba(255,255,255,.82);
  --ap-light-shadow: 0 16px 34px rgba(77,112,166,.14);
  --ap-light-blue: #1e87ff;
  --ap-light-green: #29b957;
  --ap-light-orange: #ff7a1a;
  --ap-light-purple: #8a4fff;
  --ap-light-gold: #df8a00;
}

/* Grund: nie wieder schwarzer Hintergrund im App-Bereich */
html,
body,
.app,
.main {
  background:
    radial-gradient(circle at 8% 10%, rgba(255,255,255,.38), transparent 30%),
    radial-gradient(circle at 92% 5%, rgba(141,237,229,.30), transparent 34%),
    linear-gradient(135deg, var(--ap-light-bg-a) 0%, var(--ap-light-bg-b) 52%, var(--ap-light-bg-c) 100%) !important;
  color: var(--ap-light-text) !important;
}

/* Main sauber */
.main {
  color: var(--ap-light-text) !important;
}

/* Normale Panels hell machen */
.panel,
.panel.active-panel {
  background: transparent !important;
  color: var(--ap-light-text) !important;
}

/* Alle Karten in normalen Unterseiten */
.panel .card,
.card,
section.card,
.form-card,
.result-card,
.summary-card {
  background:
    radial-gradient(circle at 88% 8%, rgba(141,237,229,.18), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.66), rgba(232,242,255,.62)) !important;
  border: 1px solid var(--ap-light-border) !important;
  border-radius: 24px !important;
  box-shadow:
    var(--ap-light-shadow),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
  color: var(--ap-light-text) !important;
}

/* Überschriften */
.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3,
strong {
  color: var(--ap-light-text) !important;
}

/* Texte */
.panel p,
.card p,
.muted,
small,
label,
.table-row span {
  color: var(--ap-light-muted) !important;
}

/* Tabellen/Ergebniszeilen hell */
.table-like,
.table-row,
.result-row,
.summary-row,
.stat-box,
.check-list > div {
  background: rgba(255,255,255,.48) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  color: var(--ap-light-text) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important;
}

.table-row strong,
.result-row strong,
.summary-row strong,
.stat-box strong {
  color: var(--ap-light-text) !important;
}

/* Formulare */
input,
select,
textarea {
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(255,255,255,.90) !important;
  color: var(--ap-light-text) !important;
  border-radius: 15px !important;
  box-shadow:
    0 8px 18px rgba(77,112,166,.08),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(64,82,122,.62) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(30,135,255,.52) !important;
  box-shadow:
    0 0 0 4px rgba(30,135,255,.12),
    0 8px 18px rgba(77,112,166,.10) !important;
}

/* Buttons */
button,
.primary,
.small-btn {
  border-radius: 15px !important;
}

button.primary,
.primary {
  background: linear-gradient(135deg, #4f91ff, #7bbcff) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  font-weight: 850 !important;
  box-shadow:
    0 12px 24px rgba(77,112,166,.14),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

button:not(.primary):not(.ap-exact-nav-btn):not(.ap-light-card):not(.ap-light-quick),
.secondary,
.small-btn {
  background: rgba(255,255,255,.58) !important;
  color: var(--ap-light-text) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow:
    0 10px 20px rgba(77,112,166,.10),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}

button:hover {
  filter: brightness(1.02);
}

/* Topbar falls sie auf normalen Panels sichtbar wird */
.topbar {
  background: rgba(255,255,255,.52) !important;
  border-bottom: 1px solid rgba(255,255,255,.70) !important;
  color: var(--ap-light-text) !important;
  box-shadow: 0 10px 24px rgba(77,112,166,.10) !important;
}

.topbar h1,
#appHeadline {
  color: var(--ap-light-text) !important;
}

/* Sidebar auch außerhalb vom Start hell lassen */
.sidebar {
  background:
    radial-gradient(circle at 70% 0%, rgba(255,255,255,.18), transparent 26%),
    linear-gradient(180deg, #7fa7db 0%, #688dc0 58%, #5f83b6 100%) !important;
  border-right: 1px solid rgba(255,255,255,.50) !important;
  color: #ffffff !important;
}

/* alte Menüelemente falls sichtbar */
.sidebar .brand,
.sidebar .menu,
.sidebar .section-title {
  color: #ffffff !important;
}

/* Kategorie-Unterseiten hell */
body.ap-exact-dashboard-active .ap-exact-back {
  background: rgba(255,255,255,.70) !important;
  color: var(--ap-light-text) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
}

body.ap-exact-dashboard-active .ap-exact-help {
  background:
    radial-gradient(circle at 86% 10%, rgba(141,237,229,.22), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(232,242,255,.58)) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  color: var(--ap-light-text) !important;
}

body.ap-exact-dashboard-active .ap-exact-help-title,
body.ap-exact-dashboard-active .ap-exact-help strong,
body.ap-exact-dashboard-active .ap-exact-help h2,
body.ap-exact-dashboard-active .ap-exact-help h3 {
  color: var(--ap-light-text) !important;
}

body.ap-exact-dashboard-active .ap-exact-help span,
body.ap-exact-dashboard-active .ap-exact-help p,
body.ap-exact-dashboard-active .ap-exact-tip {
  color: var(--ap-light-muted) !important;
}

body.ap-exact-dashboard-active .ap-exact-tool {
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.55), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(232,242,255,.66)) !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 22px !important;
  box-shadow:
    0 16px 32px rgba(77,112,166,.14),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
  color: var(--ap-light-text) !important;
}

body.ap-exact-dashboard-active .ap-exact-tool strong {
  color: var(--ap-light-text) !important;
}

body.ap-exact-dashboard-active .ap-exact-tool span {
  color: var(--ap-light-muted) !important;
}

/* Spezielle Boxen / Listen */
.filament-list,
.material-list,
.orders-list,
.catalog-list,
.market-list,
#filamentList,
#materialList,
#ordersList,
#catalogList {
  color: var(--ap-light-text) !important;
}

/* Scrollbar etwas sauberer */
::-webkit-scrollbar {
  width: 11px;
}

::-webkit-scrollbar-track {
  background: rgba(255,255,255,.18);
}

::-webkit-scrollbar-thumb {
  background: rgba(85,126,181,.45);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.32);
}

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

  .panel .card,
  .card {
    border-radius: 22px !important;
  }
}