/* Topbar: bulb (feature request) */
.admin-topbar-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 2px 0 0 !important;
  flex-shrink: 0 !important;
}

.feature-request-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--color-text, #333333) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.feature-request-trigger:hover {
  background: rgba(52, 86, 139, 0.12) !important;
  color: var(--color-link, #3a5392) !important;
}

.dark .feature-request-trigger,
.adminjs-dark .feature-request-trigger {
  color: var(--color-text, #e0e0e0) !important;
}

.dark .feature-request-trigger:hover,
.adminjs-dark .feature-request-trigger:hover {
  background: rgba(100, 181, 246, 0.15) !important;
  color: var(--color-primary, #90caf9) !important;
}

/*
 * Mobile: hide Ideas toolbar entirely (reclaims topbar space; modal still works if opened from elsewhere).
 */
@media (max-width: 768px) {
  #admin-topbar-toolbar,
  .admin-topbar-toolbar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    border: none !important;
  }
}
.feature-request-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  box-sizing: border-box !important;
  /* Scroll containment without body { overflow: hidden }, which breaks fixed topbars */
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

.feature-request-backdrop[hidden] {
  display: none !important;
}

.feature-request-panel {
  touch-action: auto !important;
  width: 100% !important;
  max-width: 920px !important;
  max-height: min(92vh, 880px) !important;
  overflow: auto !important;
  padding: 24px !important;
  border-radius: 8px !important;
  background: var(--color-container, #ffffff) !important;
  color: var(--color-text, #333333) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid var(--color-border, #e0e0e0) !important;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.feature-request-drag-bar {
  margin: -24px -24px 8px -24px !important;
  padding: 10px 16px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: grab !important;
  user-select: none !important;
  color: #64748b !important;
  touch-action: none !important;
  box-sizing: border-box !important;
}

.feature-request-drag-bar:active,
.feature-request-drag-bar.feature-request-drag-bar--dragging {
  cursor: grabbing !important;
  background: rgba(59, 130, 246, 0.12) !important;
}

.dark .feature-request-drag-bar,
.adminjs-dark .feature-request-drag-bar {
  background: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}

.dark .feature-request-drag-bar.feature-request-drag-bar--dragging,
.adminjs-dark .feature-request-drag-bar.feature-request-drag-bar--dragging {
  background: rgba(59, 130, 246, 0.2) !important;
}

.feature-request-title {
  margin: 0 0 10px 0 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: inherit !important;
  letter-spacing: -0.01em !important;
}

.feature-request-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.feature-request-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Label captions — aligned with AdminJS / MUI-style field labels */
.feature-request-label > span {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

.dark .feature-request-panel .feature-request-label > span,
.adminjs-dark .feature-request-panel .feature-request-label > span {
  color: rgba(255, 255, 255, 0.65) !important;
}

.feature-request-input,
.feature-request-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border: 1px solid var(--color-border, #ccc) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: rgba(0, 0, 0, 0.87) !important;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
}

.dark .feature-request-input,
.dark .feature-request-textarea,
.adminjs-dark .feature-request-input,
.adminjs-dark .feature-request-textarea {
  background: var(--color-container, #1e1e1e) !important;
  color: var(--color-text, rgba(255, 255, 255, 0.87)) !important;
}

.feature-request-textarea {
  resize: vertical !important;
  min-height: 160px !important;
}

.feature-request-input::placeholder,
.feature-request-textarea::placeholder {
  color: rgba(0, 0, 0, 0.38) !important;
}

.dark .feature-request-input::placeholder,
.dark .feature-request-textarea::placeholder,
.adminjs-dark .feature-request-input::placeholder,
.adminjs-dark .feature-request-textarea::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
}

.feature-request-input[readonly] {
  background: rgba(0, 0, 0, 0.04) !important;
  cursor: default !important;
}
.dark .feature-request-input[readonly],
.adminjs-dark .feature-request-input[readonly] {
  background: rgba(255, 255, 255, 0.06) !important;
}

.feature-request-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}

.feature-request-action-buttons {
  display: flex !important;
  gap: 12px !important;
}

.feature-request-draft {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  user-select: none !important;
}

.feature-request-draft input {
  margin: 0 !important;
}

.feature-request-btn {
  padding: 8px 20px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
  text-transform: none !important;
}

.feature-request-btn-secondary {
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.23) !important;
  color: var(--color-link, #3a5392) !important;
}

.feature-request-btn-secondary:hover {
  background: rgba(52, 86, 139, 0.06) !important;
}

.dark .feature-request-btn-secondary,
.adminjs-dark .feature-request-btn-secondary {
  border-color: rgba(255, 255, 255, 0.23) !important;
  color: var(--color-primary, #90caf9) !important;
}

/* Override global submit-button rule (secondary/pink) for this modal */
.feature-request-panel .feature-request-btn-primary,
.feature-request-panel button[type="submit"].feature-request-btn-primary {
  background: var(--color-primary, #34568b) !important;
  color: #fff !important;
  border-color: var(--color-primary, #34568b) !important;
}

.feature-request-panel .feature-request-btn-primary:hover,
.feature-request-panel button[type="submit"].feature-request-btn-primary:hover {
  filter: brightness(1.06) !important;
}

.feature-request-status {
  margin: 0 !important;
  min-height: 1.25em !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

.dark .feature-request-status,
.adminjs-dark .feature-request-status {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Slightly shorter than before so Page + Subject line + Description fit without growing the modal. */
.feature-request-field-hint {
  margin: -4px 0 10px 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

.dark .feature-request-field-hint,
.adminjs-dark .feature-request-field-hint {
  color: rgba(255, 255, 255, 0.5) !important;
}

.feature-request-rich-editor {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 292px !important;
}

.feature-request-rich-editor .adminjs_RichTextEditor,
.feature-request-rich-editor [class*='RichTextEditor'] {
  min-height: 252px !important;
}

/* TipTap editor content area (toolbar is above this) */
.feature-request-rich-editor .ProseMirror {
  min-height: 200px !important;
}

.feature-request-rich-editor .feature-request-textarea {
  min-height: 200px !important;
}

/* Rich text toolbar: hover tooltips and line-spacing toggle */
.feature-request-rich-editor [class*='MenuBarWrapper'] > span[data-tooltip] {
  position: relative !important;
  cursor: pointer !important;
}

.feature-request-rich-editor [class*='MenuBarWrapper'] > span[data-tooltip]:hover::after,
.feature-request-rich-editor [class*='MenuBarWrapper'] > span[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  background: rgba(33, 33, 33, 0.92) !important;
  color: #fff !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 20 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

.feature-request-rich-editor .feature-request-line-spacing-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.75rem !important;
  height: 1.5rem !important;
  margin-left: 0.25rem !important;
  padding: 0 0.35rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: rgba(0, 0, 0, 0.72) !important;
  border-left: 1px solid var(--color-border, #e0e0e0) !important;
  padding-left: 0.65rem !important;
}

.feature-request-rich-editor .feature-request-line-spacing-btn.active {
  color: var(--color-primary, #3040d6) !important;
}

.dark .feature-request-rich-editor .feature-request-line-spacing-btn,
.adminjs-dark .feature-request-rich-editor .feature-request-line-spacing-btn {
  color: rgba(255, 255, 255, 0.78) !important;
  border-left-color: rgba(255, 255, 255, 0.18) !important;
}

.dark .feature-request-rich-editor .feature-request-line-spacing-btn.active,
.adminjs-dark .feature-request-rich-editor .feature-request-line-spacing-btn.active {
  color: var(--color-primary, #90caf9) !important;
}

.feature-request-file-input {
  font-size: 0.875rem !important;
  max-width: 100% !important;
}

.feature-request-file-list {
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

.dark .feature-request-file-list,
.adminjs-dark .feature-request-file-list {
  color: rgba(255, 255, 255, 0.75) !important;
}

.feature-request-file-list li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--color-border, #e8e8e8) !important;
}

.feature-request-file-remove {
  flex-shrink: 0 !important;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 4px !important;
  background: transparent !important;
  cursor: pointer !important;
  color: var(--color-link, #3a5392) !important;
}

.dark .feature-request-file-remove,
.adminjs-dark .feature-request-file-remove {
  border-color: rgba(255, 255, 255, 0.23) !important;
  color: var(--color-primary, #90caf9) !important;
}