/* suggestions.css — the "Forslag" feature-request board (desktop only).
 *
 * On-brand with the map app: navy (--fk-natt), gold/amber accent used sparingly
 * (--fk-gull), Fraunces for headings, Tabler line icons, one soft shadow max on
 * cards, no gradients/gloss. Reuses the global :root tokens from style.css. */

:root {
  --sg-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* The base rules below set display:flex/inline-flex, which would otherwise beat
 * the UA `[hidden] { display:none }` (class > attribute selector) and leave the
 * full-screen overlay covering — and intercepting clicks on — the whole map.
 * Re-assert hidden for these two elements. */
.suggestions-nav[hidden], .suggestions-view[hidden] { display: none !important; }

/* ── Nav entry (top-right, with clear space left of the avatar) ──────────────── */
/* Loud on purpose: a solid amber CTA so people actually notice and click it.
 * right:92px clears the ~64px-wide avatar button (which ends near right:74px)
 * with a comfortable gap. */
.suggestions-nav {
  position: fixed; top: 10px; right: 92px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 17px;
  background: var(--fk-gull); border: 0; border-radius: 999px;
  color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: 0.1px;
  cursor: pointer; box-shadow: 0 3px 14px rgba(217,119,6,0.40);
  transition: background 150ms, box-shadow 150ms, transform 100ms;
}
.suggestions-nav:hover { background: #C26806; box-shadow: 0 5px 20px rgba(217,119,6,0.50); transform: translateY(-1px); }
.suggestions-nav:active { transform: translateY(0); }
.suggestions-nav .fk-ic {
  width: 19px; height: 19px; fill: none;
  stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Desktop only — the board and its entry are hidden on mobile. */
@media (max-width: 768px) { .suggestions-nav { display: none !important; } }

/* ── Full-screen board overlay ──────────────────────────────────────────────── */
.suggestions-view {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(27, 58, 75, 0.28);              /* navy scrim — map dims behind */
  display: flex; justify-content: center; align-items: flex-start;
  padding: 40px 20px; overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 768px) { .suggestions-view { display: none !important; } }

.sg-page {
  width: 100%; max-width: 680px; margin: auto 0;
  background: var(--fk-snø); border-radius: 16px; box-shadow: var(--fk-shadow-lg);
  overflow: hidden;
}

/* Header — navy bar, Fraunces title + close. */
.sg-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; background: var(--fk-natt); color: #fff;
}
.sg-title { font-family: var(--sg-serif); font-weight: 500; font-size: 24px; margin: 0; flex: 1 1 auto; }
.sg-close {
  flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10); border: 0; border-radius: 9px; color: #fff; cursor: pointer;
  font-family: inherit; transition: background 150ms;
}
.sg-close:hover { background: rgba(255,255,255,0.20); }
.sg-close .fk-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Toolbar — sort toggle + "Nytt forslag". */
.sg-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--fk-border);
}
.sg-sort { display: inline-flex; background: var(--fk-snø-dark); border-radius: 9px; padding: 2px; }
.sg-sort button {
  border: 0; background: none; padding: 7px 13px; border-radius: 7px;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--fk-text-secondary); cursor: pointer;
}
.sg-sort button.active { background: #fff; color: var(--fk-natt); box-shadow: 0 1px 3px rgba(27,58,75,0.10); }
.sg-new-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--fk-natt); color: #fff; border: 0; border-radius: 9px;
  padding: 9px 15px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background 150ms;
}
.sg-new-btn:hover { background: #234a60; }
.sg-new-btn .fk-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* List + cards. */
.sg-list { padding: 16px 22px 24px; display: flex; flex-direction: column; gap: 12px; }

.sg-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 0.5px solid var(--fk-border); border-radius: 12px;
  padding: 16px; box-shadow: var(--fk-shadow);
}
.sg-card-main { flex: 1 1 auto; min-width: 0; }
.sg-card-title {
  font-family: var(--sg-serif); font-weight: 500; font-size: 17px; line-height: 1.25;
  color: var(--fk-natt); margin: 0;
}
.sg-card-body {
  margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--fk-text-secondary);
  white-space: pre-wrap; word-break: break-word;
}
.sg-card-foot { margin-top: 10px; display: flex; align-items: center; gap: 8px; }

/* Status badges — restrained, on-brand (no rainbow). Shown only when != open. */
.sg-badge {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px;
  padding: 3px 9px; border-radius: 999px;
}
.sg-badge-planned     { background: #E7EEF2; color: var(--fk-natt); }       /* muted navy */
.sg-badge-in_progress { background: var(--fk-gull-light); color: var(--fk-gull-text); }  /* amber */
.sg-badge-done        { background: #DCFCE7; color: #166534; }              /* calm green */
.sg-badge-not_planned { background: #EEECE7; color: var(--fk-text-secondary); }  /* muted grey */

/* Upvote control — ▲ + count. Filled (navy) when the viewer has voted. */
.sg-vote {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 52px; padding: 8px 6px;
  background: var(--fk-snø); border: 1px solid var(--fk-border); border-radius: 10px;
  color: var(--fk-text-secondary); cursor: pointer; font-family: inherit;
  transition: border-color 150ms, background 150ms, color 150ms;
}
.sg-vote:hover { border-color: var(--fk-natt); color: var(--fk-natt); }
.sg-vote .fk-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sg-vote-count { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-vote.is-voted {
  background: var(--fk-natt); border-color: var(--fk-natt); color: #fff;
}
.sg-vote.is-voted .fk-ic { fill: currentColor; }

/* Empty state. */
.sg-empty { text-align: center; padding: 40px 24px; color: var(--fk-text-secondary); }
.sg-empty-lead { font-size: 15px; line-height: 1.55; margin: 0 auto; max-width: 420px; }
.sg-empty-cta { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--fk-natt); }

/* Compose form (inline card at the top of the list). */
.sg-compose { background: #fff; border: 0.5px solid var(--fk-border); border-radius: 12px; padding: 16px; box-shadow: var(--fk-shadow); }
.sg-compose-field { display: block; width: 100%; font-family: inherit; color: var(--fk-text-primary);
  border: 1px solid var(--fk-border); border-radius: 9px; padding: 10px 12px; font-size: 14px; }
.sg-compose-field:focus { outline: none; border-color: var(--fk-vatn); }
.sg-compose-field + .sg-compose-field { margin-top: 10px; }
textarea.sg-compose-field { resize: vertical; min-height: 84px; line-height: 1.5; }
.sg-compose-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sg-compose-count { font-size: 12px; color: var(--fk-text-muted); font-variant-numeric: tabular-nums; }
.sg-compose-actions { margin-left: auto; display: flex; gap: 8px; }
.sg-btn {
  border: 0; border-radius: 9px; padding: 9px 15px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.sg-btn-primary { background: var(--fk-natt); color: #fff; }
.sg-btn-primary:hover { background: #234a60; }
.sg-btn-primary:disabled { opacity: 0.5; cursor: default; }
.sg-btn-ghost { background: var(--fk-snø-dark); color: var(--fk-text-secondary); }
.sg-btn-ghost:hover { background: #ECE7DD; }

/* In-board sign-in prompt (shown when an anon user tries to post/upvote). Same
 * look as the soft-wall card; copy varies. NEVER touches the metered counter. */
.sg-signin { background: #fff; border: 0.5px solid var(--fk-border); border-radius: 12px; padding: 20px; box-shadow: var(--fk-shadow); text-align: center; }
.sg-signin-lead { font-size: 15px; line-height: 1.5; color: var(--fk-text-primary); margin: 0 0 14px; }
.sg-signin-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sg-signin-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; max-width: 300px; padding: 11px 16px; background: #fff;
  border: 1px solid var(--fk-border); border-radius: 10px; font-weight: 600; color: var(--fk-text-primary);
}
.sg-signin-google svg { width: 18px; height: 18px; }
.sg-signin-email { display: inline-block; width: 100%; max-width: 300px; padding: 11px 16px; background: var(--fk-natt); color: #fff; border-radius: 10px; font-weight: 600; }
.sg-signin-login { font-size: 13px; color: var(--fk-text-secondary); }
.sg-error { color: #B91C1C; font-size: 13px; margin: 8px 0 0; }