/* Scoped styles for Feedback button and modal */

/* Ensure floating button is always perfectly circular and above content */
#feedback-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1060; /* higher than typical content, below modal backdrop */
}

#feedback-floating #open-feedback-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  min-width: 56px !important; /* override global .btn min-width rules on some pages */
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Also guard any generic .btn min-width applied on accounting pages */
#feedback-floating .btn {
  min-width: 56px !important;
}

/* Constrain and stabilize the modal layout regardless of page CSS */
#feedbackModal .modal-dialog {
  max-width: 720px !important; /* keep a sane width */
  width: auto !important;
}

#feedbackModal .modal-content {
  background-color: #212529 !important; /* match Bootstrap .bg-dark */
  color: #fff !important;
  overflow: hidden !important; /* avoid bleed from inner elements */
}

#feedbackModal .modal-body {
  max-height: calc(100vh - 220px) !important; /* prevent overflow on small screens */
  overflow-y: auto !important;
}

/* Neutralize global .row constraints used in accounting pages that force large min-widths */
body.modal-open #feedbackModal .row,
body.modal-open #feedbackModal .fb-grid {
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  --bs-gutter-x: 1rem !important; /* restore spacing between fields */
  --bs-gutter-y: 1rem !important;
}

/* Fallback: if gutters are still overridden by page CSS, enforce per-column spacing */
body.modal-open #feedbackModal .row > [class^="col-"],
body.modal-open #feedbackModal .row > [class*=" col-"] {
  margin-bottom: 1rem !important;
}

/* Explicit horizontal padding inside the feedback grid to counter global gutter resets */
body.modal-open #feedbackModal .fb-grid > [class^="col-"],
body.modal-open #feedbackModal .fb-grid > [class*=" col-"] {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Ensure Kategori (col-md-4) and Titel (col-md-8) sit on the same row on md+ screens */
@media (min-width: 768px) {
  body.modal-open #feedbackModal .fb-grid > .col-12.col-md-4,
  body.modal-open #feedbackModal .col-md-4 {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important; /* allow shrink inside flex row */
  }
  body.modal-open #feedbackModal .fb-grid > .col-12.col-md-8,
  body.modal-open #feedbackModal .col-md-8 {
    flex: 0 0 66.666667% !important;
    width: 66.666667% !important;
    max-width: 66.666667% !important;
    min-width: 0 !important; /* allow shrink inside flex row */
  }
}

/* Ensure controls follow natural sizing inside modal */
#feedbackModal .form-control,
#feedbackModal .form-select {
  height: auto !important; /* undo global fixed height (40px) on accounting pages */
  min-width: 0 !important; /* prevent inner controls from forcing column expansion */
  width: 100% !important; /* fill column width reliably */
}

#feedbackModal textarea.form-control {
  min-height: 140px !important; /* keep description tall enough */
}

/* Ensure dark theme inputs are consistent */
#feedbackModal .form-control,
#feedbackModal .form-select {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
  border-color: #555 !important;
}

/* Use Bootstrap's custom dropdown arrow (remove native appearance) */
#feedbackModal .form-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.25rem !important;
}
#feedbackModal .form-control::placeholder {
  color: #b5b5b5 !important;
}

/* Make close button visible on dark header regardless of global rules */
#feedbackModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}