/* Vemelu Phase 22Q - App-Tester Feedbackseite */
.feedback-page {
  min-height: 70vh;
}

.feedback-hero {
  padding-bottom: 2rem;
}

.feedback-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .55fr);
  gap: 1.5rem;
  align-items: end;
}

.feedback-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.25rem;
}

.feedback-info-card {
  align-self: stretch;
}

.feedback-mini-list {
  margin: .8rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted, #a7c7d5);
  line-height: 1.7;
}

.feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 1.4rem;
  align-items: start;
}

.feedback-form {
  position: relative;
  overflow: hidden;
}

.feedback-form::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(36, 227, 125, .95), rgba(116, 208, 255, .55));
  opacity: .8;
}

.form-section-heading {
  margin-bottom: 1.1rem;
}

.form-section-heading p:last-child {
  color: var(--muted, #a7c7d5);
  margin: .25rem 0 0;
}

.form-grid.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.form-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.feedback-form label,
.feedback-form .textarea-label {
  display: grid;
  gap: .45rem;
  font-weight: 800;
  color: var(--text, #f8fbff);
}

.feedback-form input,
.feedback-form select,
.feedback-form textarea {
  width: 100%;
  border: 1px solid rgba(143, 211, 255, .18);
  border-radius: 18px;
  background: rgba(5, 16, 28, .72);
  color: var(--text, #f8fbff);
  padding: .95rem 1rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.feedback-form select option {
  background: #07131c;
  color: #f8fbff;
}

.feedback-form textarea {
  min-height: 145px;
  resize: vertical;
  line-height: 1.55;
}

.feedback-form textarea[name='steps'] {
  min-height: 110px;
}

.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
  border-color: rgba(36, 227, 125, .72);
  box-shadow: 0 0 0 4px rgba(36, 227, 125, .12);
}

.feedback-form small,
.feedback-form .muted {
  color: var(--muted, #a7c7d5);
  font-weight: 700;
}

.checkbox-line {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: .75rem !important;
  padding: .9rem 1rem;
  border: 1px solid rgba(36, 227, 125, .25);
  border-radius: 18px;
  background: rgba(36, 227, 125, .08);
}

.checkbox-line input {
  width: auto;
  margin-top: .2rem;
  accent-color: #24e37d;
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.feedback-side {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 6rem;
}

.feedback-warning-card {
  border-color: rgba(255, 206, 91, .25) !important;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .45rem .75rem;
  font-weight: 900;
  border: 1px solid rgba(143, 211, 255, .18);
  background: rgba(143, 211, 255, .08);
}

.status-good { color: #7dffbd; border-color: rgba(36, 227, 125, .34); background: rgba(36, 227, 125, .10); }
.status-info { color: #8fd3ff; border-color: rgba(143, 211, 255, .34); background: rgba(143, 211, 255, .10); }
.status-neutral { color: #dcefff; }

.form-status {
  border-radius: 18px;
  padding: 1rem 1.1rem;
  font-weight: 850;
  border: 1px solid rgba(143, 211, 255, .18);
  background: rgba(143, 211, 255, .08);
}

.form-status.is-success {
  color: #7dffbd;
  border-color: rgba(36, 227, 125, .35);
  background: rgba(36, 227, 125, .10);
}

.form-status.is-error {
  color: #ffc2c2;
  border-color: rgba(255, 92, 92, .35);
  background: rgba(255, 92, 92, .10);
}

.form-status.is-warning {
  color: #ffdf8a;
  border-color: rgba(255, 206, 91, .35);
  background: rgba(255, 206, 91, .10);
}

@media (max-width: 900px) {
  .feedback-hero-grid,
  .feedback-layout,
  .form-grid.two,
  .form-grid.three {
    grid-template-columns: 1fr;
  }

  .feedback-side {
    position: static;
  }
}


/* Phase 22Q Fix 2: leeren Status-Balken ausblenden.
   Der Statusbereich soll nur sichtbar sein, wenn wirklich eine Meldung angezeigt wird. */
.form-status[hidden],
.form-status:empty {
  display: none !important;
  padding: 0 !important;
  border-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

.form-status:not([hidden]):not(:empty) {
  display: block;
  margin-top: .15rem;
}


/* =====================================================================
   Vemelu Phase 22Q Fix 16
   App-Feedback: Light-Mode-Lesbarkeit + saubere Formularfarben
   ===================================================================== */
html[data-theme="light"] body[data-page="app-feedback"] {
  background:
    radial-gradient(circle at 84% 8%, rgba(8, 127, 145, .10), transparent 26rem),
    radial-gradient(circle at 10% 22%, rgba(13, 175, 85, .12), transparent 28rem),
    var(--bg, #f4f8f7);
  color: var(--text, #10232d);
}

html[data-theme="light"] body[data-page="app-feedback"] .feedback-form,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-side .card,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-info-card {
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(237,246,243,.96)) !important;
  border-color: rgba(20, 79, 91, .16) !important;
  box-shadow: 0 24px 70px rgba(17, 50, 58, .10);
}

html[data-theme="light"] body[data-page="app-feedback"] .feedback-form label,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-form .textarea-label,
html[data-theme="light"] body[data-page="app-feedback"] .form-section-heading h2,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-side h2,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-info-card h2 {
  color: #10232d !important;
}

html[data-theme="light"] body[data-page="app-feedback"] .form-section-heading p:last-child,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-side p,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-mini-list,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-form small,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-form .muted {
  color: #537580 !important;
}

html[data-theme="light"] body[data-page="app-feedback"] .feedback-form input,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-form select,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-form textarea {
  background: #ffffff !important;
  color: #10232d !important;
  border-color: rgba(20, 79, 91, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

html[data-theme="light"] body[data-page="app-feedback"] .feedback-form input::placeholder,
html[data-theme="light"] body[data-page="app-feedback"] .feedback-form textarea::placeholder {
  color: rgba(83, 117, 128, .72) !important;
}

html[data-theme="light"] body[data-page="app-feedback"] .feedback-form select option {
  background: #ffffff !important;
  color: #10232d !important;
}

html[data-theme="light"] body[data-page="app-feedback"] .checkbox-line {
  background: rgba(13, 175, 85, .065) !important;
  border-color: rgba(13, 175, 85, .24) !important;
  color: #12313d !important;
}

html[data-theme="light"] body[data-page="app-feedback"] .status-good {
  color: #075d2c;
  border-color: rgba(13, 175, 85, .28);
  background: rgba(13, 175, 85, .075);
}
html[data-theme="light"] body[data-page="app-feedback"] .status-info {
  color: #075c6b;
  border-color: rgba(8, 127, 145, .24);
  background: rgba(8, 127, 145, .06);
}
html[data-theme="light"] body[data-page="app-feedback"] .status-neutral {
  color: #537580;
  background: rgba(16, 35, 45, .04);
}

html[data-theme="light"] body[data-page="app-feedback"] .form-status.is-success { color: #075d2c; }
html[data-theme="light"] body[data-page="app-feedback"] .form-status.is-error { color: #9c2230; }
html[data-theme="light"] body[data-page="app-feedback"] .form-status.is-warning { color: #785000; }