/* =====================================================================
   HUGMYNDIR OG BREYTINGASAGA

   Hlaðið á HVERRI síðu (sjá head.ejs), því táknið sjálft er í valmyndinni og
   þarf að vera einn smellur frá hvaða síðu sem er.
   ===================================================================== */

/* TÁKNIÐ Í HAUSNUM. Ýtt til hægri svo það sitji á móti hamborgaranum og
   trufli ekki titilinn. */
.feedback-btn {
  position: relative;
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.feedback-btn:hover,
.feedback-btn:focus-visible {
  background: rgba(255, 255, 255, 0.3);
  outline: none;
}

/* ÓLESIÐ SVAR. Punktur en ekki tala: kennarinn þarf að vita AÐ eitthvað barst,
   ekki hversu margt - hann opnar hvort eð er listann til að sjá það. */
.feedback-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
}

/* --- Glugginn --- */
.feedback-where,
.feedback-privacy {
  font-size: 0.85rem;
  color: #6b7280;
}

.feedback-privacy {
  margin-top: 0.5rem;
}

/* --- Þræðir og hugmyndir --- */
.feedback-thread,
.feedback-idea {
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

/* BÍÐUR SVARS - litaður kantur vinstra megin. Þetta er það sem gerir listann
   að verkefnalista frekar en safni. */
.feedback-thread-unread {
  border-left: 3px solid var(--theme-primary);
}

.feedback-thread-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.feedback-date {
  margin-left: auto;
  font-size: 0.78rem;
  color: #6b7280;
}

.feedback-who {
  font-weight: 600;
  font-size: 0.85rem;
}

.feedback-where-line {
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

.feedback-body {
  margin: 0 0 0.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback-mine-tag {
  padding: 0.05em 0.5em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 0.72rem;
  font-weight: 600;
}

/* --- ATKVÆÐI ---

   Hnappar en ekki tákn: það á að vera augljóst að þeir séu smellanlegir, því
   listi sem enginn kýs í er verri en enginn listi - hann lítur út eins og
   forgangsröðun án þess að vera það. */
.feedback-votes {
  display: flex;
  gap: 0.4rem;
}

.feedback-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}

.feedback-vote:hover,
.feedback-vote:focus-visible {
  border-color: var(--theme-primary);
  outline: none;
}

/* MITT EIGIÐ ATKVÆÐI. Fyllt en ekki bara dekkri kantur - hakið á að sjást í
   fljótu bragði, annars kýs fólk tvisvar og heldur að hnappurinn virki ekki. */
.feedback-vote-on {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: #fff;
}

.feedback-vote-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Samantektin í pósthólfi kerfisstjórnandans - ekki smellanleg, bara tala. */
.feedback-vote-summary {
  font-size: 0.8rem;
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}

.feedback-anon-note {
  font-size: 0.85rem;
  color: #6b7280;
}

/* --- Staðan --- */
.feedback-status {
  padding: 0.05em 0.55em;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* EINN LITUR Á STÖÐU, notaður á BÁÐUM stöðum: merkinu á spjaldinu og
   síupillunni efst. Þess vegna er hann breyta en ekki `color` beint - merkið
   sem segir "Í vinnslu" og pillan sem síar á "Í vinnslu" mega ekki vera sitt
   hvor liturinn, og tvö aðskilin gildi í skránni verða það fyrr eða síðar.

   Litirnir eru ekki úr þemanu: staða er MERKING (blátt = nýtt, grænt = búið),
   ekki skraut, og hún má ekki breytast þótt skólinn velji grænt þema. Pillan
   "Allar" er hins vegar ekki staða og heldur þemalitnum úr pills.css. */
.feedback-status-nytt,
.filter-pill.pill-nytt { --status-color: #1d6fa5; }

.feedback-status-ivinnslu,
.filter-pill.pill-ivinnslu { --status-color: #8a7410; }

.feedback-status-lokid,
.filter-pill.pill-lokid { --status-color: #2f7a35; }

.feedback-status-hafnad,
.filter-pill.pill-hafnad { --status-color: #6b7280; }

.feedback-status {
  color: var(--status-color, #6b7280);
}

/* Pillan sækir sama lit í gegnum --pill-accent, sem pills.css reiknar
   bakgrunn, ramma og texta út frá. Ein lína á stöðu, engin afritun á
   color-mix reglunum. */
.filter-pill.pill-nytt,
.filter-pill.pill-ivinnslu,
.filter-pill.pill-lokid,
.filter-pill.pill-hafnad {
  --pill-accent: var(--status-color);
}


/* --- Samtalið --- */
.feedback-message {
  margin: 0.35rem 0;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Svar frá kerfisstjórnanda hallar til vinstri, mitt eigið til hægri - sama
   mynstur og hvert einasta spjallforrit notar, svo enginn þarf að læra það. */
.feedback-message-manager {
  background: #eff6ff;
  margin-right: 2rem;
}

.feedback-message-mine {
  background: #f3f4f6;
  margin-left: 2rem;
}

.feedback-message-who {
  font-size: 0.72rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 0.15rem;
}

/* SVARREITURINN VEX MEÐ TEXTANUM.
   Hann var <input type="text">: ein lína, og allt umfram hana rennur út úr
   sjónmáli. Sá sem sér ekki það sem hann skrifaði les það ekki yfir - og hér
   skiptir orðalagið máli. Nú er þetta <textarea> sem JS hækkar (autoGrow í
   feedback-page.js og manager-feedback.js).

   align-items: flex-end yfirskrifar `center` úr .inline-form: hnappurinn á að
   fylgja NEÐRI brún reitsins. Miðjaður hnappur við þriggja lína reit svífur
   utan í engu. */
.feedback-reply {
  margin-top: 0.5rem;
  align-items: flex-end;
}

/* HÁMARKIÐ ER HÉR, EKKI Í JS. Þegar reiturinn nær max-height tekur hans eigin
   scroll við - talan sem scrollHeight skilar er þá einfaldlega hærri en CSS
   leyfir, og þarf enga sérmeðferð í skriftunni.

   resize: none - hæðin er reiknuð, og handdregin hæð yrði hvort eð er
   skrifuð yfir við næsta innslátt. */
.feedback-reply textarea {
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
  line-height: 1.4;
  max-height: 9rem;
  overflow-y: auto;
  resize: none;
}

/* --- Breytingasagan --- */
.changelog-entry {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.changelog-entry:last-child {
  border-bottom: none;
}

.changelog-date {
  font-size: 0.78rem;
  color: #6b7280;
}

.changelog-title {
  margin: 0.15rem 0 0.35rem;
  font-size: 1rem;
}

.changelog-body,
.latest-change-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.latest-change-title {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

/* Listinn í "Skrá breytingu" glugganum - getur orðið langur, og þar er scroll
   rétt: þetta er val úr lista, ekki texti sem á að lesa. */
.changelog-pick-list {
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.4rem;
}

.changelog-pick-row {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.85rem;
}