/* "Report an issue" modal (SCRUM-787).
 * Opened from a menu item in templates/base.html's #user-menu-panel
 * ("Hello, <username> ▾" -- see openFeedbackPanel() there) rather than a
 * persistent floating corner button, after that button repeatedly
 * collided with other floating/absolute content sharing the page's
 * bottom-right corner: the map page's own legends, its historical chart
 * panel and (on mobile) that panel's own toggle button, and, on mobile
 * more generally, the header's own onboarding notification bell. A modal
 * has no page corner to fight over, so none of that positioning logic
 * exists any more -- see this file's git history if any of it's ever
 * needed again.
 *
 * The markup itself comes from the feedback-app React island
 * (frontend/src/feedback/FeedbackApp.tsx, built to
 * static/feedback-app/feedback-app.js) rather than inline HTML in
 * base.html. Open/close is React state (isOpen), and the modal is only
 * actually in the DOM while open -- conditional rendering, not an
 * always-present element with display:none/.active toggling it.
 * #feedback-app-root (base.html's mount div) and .feedback-widget (this
 * component's own outermost element) both carry no styling of their
 * own: every visible piece below is position:fixed, which escapes
 * wherever either is nested in the DOM regardless.
 */

:root {
  /* Aperture brand orange (SCRUM-787 follow-up) -- same hex already used
   * as a raw literal for the sidebar/chart toggle buttons' "active" state
   * and the advisor-portfolio nav link (see map.css), given a name here
   * since this file has several places that need both the base and hover
   * shade. No shared/global token for it exists yet (insights.css has a
   * page-scoped --insight-highlight at the same hex, but nothing reusable
   * across pages), so these are feedback.css's own. */
  --feedback-accent: #e07b39;
  --feedback-accent-hover: #cd6a28;
  --feedback-accent-soft: rgba(205, 106, 40, 0.08);
}

.feedback-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.feedback-panel {
  width: 400px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  padding: 20px;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

/* FeedbackApp.tsx moves focus here (tabIndex=-1) the moment the modal
 * opens -- suppressing the outline that'd otherwise draw is standard for
 * a dialog *container* (it's not an interactive control), matching every
 * common dialog implementation that does this. The focus move itself
 * (not a visible ring around the whole card) is what matters: it's what
 * puts a keyboard/screen-reader user somewhere sensible instead of on
 * whatever was clicked to open this, and gives Tab a correct starting
 * point. Focus rings on the actual interactive fields inside (inputs,
 * buttons) are untouched. */
.feedback-panel:focus {
  outline: none;
}

.feedback-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.feedback-panel-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
}

.feedback-panel-close {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin-top: 0;
}

.feedback-panel-close:hover {
  color: #111827;
  background: transparent;
}

.feedback-panel-close:focus-visible {
  outline: 2px solid var(--feedback-accent);
  outline-offset: 2px;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feedback-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  margin-top: 8px;
}

.feedback-form label:first-of-type {
  margin-top: 0;
}

.feedback-form select,
.feedback-form textarea {
  width: 100%;
  border: 1px solid #DCDCDC;
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9rem;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}

.feedback-form textarea {
  resize: vertical;
  min-height: 80px;
}

/* "Capture screenshot" trigger + the thumbnail/retake/remove row shown
 * once a live capture has been confirmed (see CaptureOverlay.tsx) --
 * secondary buttons in an accent-outline style used nowhere else yet in
 * this file, so introduced here rather than reusing .feedback-submit's
 * solid fill (that stays reserved for the one primary submit action). */
.feedback-screenshot-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
}

.feedback-capture-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.feedback-capture-btn,
.feedback-secondary-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  margin-top: 0;
}

.feedback-capture-btn {
  background: #fff;
  color: var(--feedback-accent);
  border: 1px solid var(--feedback-accent);
}

.feedback-capture-btn:hover {
  background: var(--feedback-accent-soft);
}

.feedback-secondary-btn {
  background: #fff;
  color: #374151;
  border: 1px solid #DCDCDC;
}

.feedback-secondary-btn:hover {
  background: #f9fafb;
}

.feedback-capture-btn:disabled,
.feedback-secondary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Image on top, retake/remove in a row underneath -- was image + a column
 * of stacked buttons side by side (reported: hard to compare the two
 * buttons at a glance, and the thumbnail was too small to actually check
 * what got captured). */
.feedback-screenshot-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.feedback-screenshot-thumb {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border: 1px solid #DCDCDC;
  border-radius: 6px;
  background: #f9fafb;
}

.feedback-screenshot-preview-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.feedback-screenshot-preview-actions .feedback-secondary-btn {
  flex: 1;
}

/* A warning banner, not plain gray text (reported: a report that live
 * capture silently failed -- most likely the browser's screen-share prompt
 * being denied/dismissed -- turned out to actually be this message firing
 * exactly as designed, just too subtle to notice next to the button). Amber
 * (not .feedback-status-error's red) since this isn't fatal -- the panel
 * stays fully usable, sending without a screenshot is still fine. */
.feedback-capture-status {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: #92400e;
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 6px;
}

.feedback-submit {
  margin-top: 12px;
  width: 100%;
  background-color: var(--feedback-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}

.feedback-submit:hover {
  background-color: var(--feedback-accent-hover);
}

.feedback-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.feedback-status {
  margin: 8px 0 0;
  font-size: 0.85rem;
  min-height: 1.1em;
}

.feedback-status-success {
  color: #15803d;
}

.feedback-status-error {
  color: #b91c1c;
}

/* Live capture-and-annotate overlay (CaptureOverlay.tsx, SCRUM-787
 * follow-up). Full-viewport, above .feedback-modal-backdrop/.feedback-panel's
 * own z-index: 5000 -- this is the annotate step shown after "Capture
 * screenshot" succeeds, so it needs to sit above absolutely everything
 * else on the page, including the feedback panel itself. */
/* Edge-to-edge annotate overlay -- deliberately NOT an inset "card" with
 * margins/rounded corners around the captured image floating in a dark
 * scrim, with a separate floating toolbar card below it (the original
 * version, reported as looking like a broken/miscomposed screenshot
 * rather than drawing directly on the page). The stage below fills all
 * space above a slim, full-width toolbar bar via plain flex (flex: 1),
 * not JS-computed pixel dimensions -- see CaptureOverlay.tsx's own
 * comment for why. */
.capture-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  background: #000;
  font-family: 'TheFuture', "Work Sans", "Helvetica Neue", Arial, sans-serif;
}

.capture-overlay-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.capture-overlay-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.capture-overlay-draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.capture-overlay-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: #fff;
  padding: 12px 20px;
  box-sizing: border-box;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}

.capture-overlay-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #374151;
  flex: 1 1 auto;
  min-width: 0;
}

.capture-overlay-toolbar-buttons {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.capture-overlay-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  margin-top: 0;
  background: #fff;
  color: #374151;
  border: 1px solid #DCDCDC;
  white-space: nowrap;
}

.capture-overlay-btn:hover {
  background: #f9fafb;
}

.capture-overlay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.capture-overlay-btn-primary {
  background-color: var(--feedback-accent);
  color: #fff;
  border-color: var(--feedback-accent);
}

.capture-overlay-btn-primary:hover {
  background-color: var(--feedback-accent-hover);
}

@media (max-width: 768px) {
  .capture-overlay-toolbar {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }

  .capture-overlay-hint {
    flex-basis: 100%;
  }

  .capture-overlay-toolbar-buttons {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  .capture-overlay-btn {
    flex: 1 1 auto;
    min-width: 90px;
  }
}