/* Feedback + moderation queue -- submit form, admin queue, and the
   submitter's own list. Same per-feature CSS split already established for
   post-blocks.css/forum.css. */

.feedback-form {
  max-width: 560px;
}

.field-caption {
  display: block;
  font-size: 0.8824rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.feedback-context-panel {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--color-border-tile);
  margin-bottom: var(--space-4);
}

.feedback-context-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7647rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.feedback-context-grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 5px 11px;
  font-size: 0.8824rem;
  color: var(--color-text-muted);
}

.feedback-context-grid code {
  font-family: ui-monospace, monospace;
  color: var(--color-text-secondary);
}

.feedback-context-grid span + span,
.feedback-context-grid span + code {
  color: var(--color-text-secondary);
}

/* Admin queue -- status tabs (same mechanism as views/email-inbox.ejs) */
.feedback-status-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  box-shadow: inset 0 -1px 0 var(--border);
  padding-bottom: 1px;
}

.feedback-status-tabs a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9412rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0 1px 10px;
}

.feedback-status-tabs a.is-active {
  color: var(--color-text);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--club-accent);
}

.feedback-status-tabs .count {
  font: 500 0.7941rem/1 ui-monospace, monospace;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.feedback-status-tabs a.is-active .count {
  background: var(--accent-900);
  color: var(--accent-300);
}

/* Source row under the status tabs: All / ClubHub / each app. A bordered
   choice, so the chosen one reads without colour (Low-vision included). */
.feedback-source-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.feedback-source-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: var(--border-w) solid var(--border);
  border-radius: 999px;
  font-size: 0.9412rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.feedback-source-tabs a.is-active {
  border-color: var(--action);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--action);
}

/* Queue table -- a real <table> (for data-table.js reuse), styled to read
   like the mockup's card rows rather than a plain bordered grid. Unlike
   the Roster/Events/activity-log tables, this is a single stacked-content
   column meant to reflow at any width -- so it needs to opt out of
   components.css's ".table-scroll table { min-width: 480px }" (there to
   force a real horizontal scroll on those *multi*-column tables instead
   of squeezing them unreadably thin), which would otherwise force this
   table's one column wider than the viewport too and bring back the
   exact horizontal-scroll problem this layout was built to remove.
   ".table-scroll .feedback-queue-table" (0,2,0) is needed to outrank
   ".table-scroll table" (0,1,1). */
.table-scroll .feedback-queue-table {
  min-width: 0;
}

.feedback-queue-table td {
  vertical-align: top;
  white-space: normal;
}

.feedback-item-title {
  font-weight: 500;
  color: var(--color-text);
}

.feedback-item-body {
  font-size: 0.8824rem;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin: 5px 0;
}

.feedback-item-meta {
  font-size: 0.8235rem;
  color: var(--color-text-faint);
}

.feedback-item-meta code {
  font-family: ui-monospace, monospace;
  color: var(--color-text-muted);
}

/* One <td> per row (not a rigid 3-column grid) so the priority
   select + Approve/Deny/caret reflow under the item text at any width
   instead of forcing .table-scroll's horizontal scrollbar. */
.feedback-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 8px;
}

.feedback-row-actions .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Priority select's left border reflects its *current* value -- set from
   the stored priority on load (data-priority) and kept in sync by a
   one-line onchange handler in admin-feedback.ejs. High/normal/low map to
   the same three tiers the read-only chips below use, so a decided item's
   priority reads the same whichever view (select vs. chip) shows it. */
.feedback-priority-select {
  border-left: 3px solid var(--color-border);
}

.feedback-priority-select[data-priority="high"] {
  border-left-color: var(--color-danger-hover);
}

.feedback-priority-select[data-priority="normal"] {
  border-left-color: var(--club-accent);
}

.feedback-priority-select[data-priority="low"] {
  border-left-color: var(--color-border);
}

.feedback-question-inset {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--color-border-tile);
  font-size: 0.8235rem;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.feedback-expand-row {
  background: var(--surface-3);
}

.feedback-expand-row > td {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.feedback-expand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.feedback-expand-grid .full-width {
  grid-column: 1 / -1;
}

/* Approved backlog order */
.feedback-backlog-list {
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--color-border-tile);
  overflow: hidden;
}

.feedback-backlog-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  box-shadow: inset 0 -1px 0 var(--border);
}

.feedback-backlog-row:last-child {
  box-shadow: none;
}

.feedback-backlog-row-pos {
  width: 44px;
}

.feedback-backlog-row-title {
  flex: 1;
  font-size: 0.9412rem;
  color: var(--color-text);
}

/* Footer feedback modal -- a native <dialog> so the page behind stays
   visible/dimmed instead of navigating away, per the "see the page I'm
   submitting about" request. Sizing/spacing only; the form inside reuses
   .feedback-form/.feedback-context-panel/.segmented as-is. */
.feedback-modal {
  width: min(480px, calc(100vw - var(--space-4) * 2));
  max-height: min(640px, calc(100vh - var(--space-4) * 2));
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-tile), 0 20px 50px rgba(0, 0, 0, 0.5);
  color: var(--color-text);
}

.feedback-modal::backdrop {
  background: rgba(10, 11, 18, 0.6);
}

.feedback-modal .feedback-form {
  max-width: none;
}

/* Fixed, not inline -- the footer this renders in sits at the bottom of
   every page, but the confirmation needs to be seen right after a submit
   without scrolling down a long dashboard/club page to find it. */
.feedback-success-notice {
  position: fixed;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(480px, calc(100vw - var(--space-4) * 2));
  padding: 9px 13px;
  border-radius: var(--radius-md);
  background: var(--accent-900);
  color: var(--accent-300);
  font-size: 0.9412rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.feedback-success-notice span {
  flex: 1;
}

@media (max-width: 600px) {
  /* The header wraps to two rows at this width (see layout.css), so the
     toast needs more clearance to avoid sitting on top of it. */
  .feedback-success-notice {
    top: 100px;
  }
}

/* Submitter's own list (feedback-mine.ejs) */
.feedback-mine-item {
  padding: 13px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--color-border-tile);
  margin-bottom: var(--space-2);
}

.feedback-mine-item.is-needs-info {
  box-shadow: inset 0 0 0 1px var(--action);
}

.feedback-mine-item.is-denied {
  opacity: 0.8;
}

.feedback-mine-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.feedback-mine-item-body {
  font-size: 0.9412rem;
  color: var(--color-text);
  max-width: 58ch;
}

.feedback-mine-item-footer {
  margin-top: 6px;
  font-size: 0.8235rem;
  color: var(--color-text-faint);
}