/* Smart Hund — mobil-først styling */
:root {
  --green: #2e7d5b;
  --green-dark: #1f5940;
  --green-light: #e5f2ec;
  --amber: #e6a23c;
  --red: #c0392b;
  --bg: #f6f7f5;
  --card: #ffffff;
  --text: #22302a;
  --muted: #6b7a72;
  --border: #dde4df;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

#topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--green);
  color: #fff;
}
#topbar h1 { margin: 0; font-size: 1.15rem; }
#topbar h1 a { color: #fff; text-decoration: none; }
#topbar-hoyre { display: flex; align-items: center; gap: 10px; }
#topp-innstillinger { text-decoration: none; font-size: 1.1rem; }
#auth-chip a { text-decoration: none; font-size: 1.05rem; }
#auth-chip a.dempet { opacity: 0.5; filter: grayscale(1); }
#auth-chip button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 0.85rem;
}

/* Hundevelgeren i toppen er DEN ENE hundevelgeren (JEGs mobiltest-funn) —
   høy kontrast mot den grønne toppmenyen, så den faktisk oppdages. */
#dog-chip select,
#dog-chip .single-dog {
  background: #fff;
  color: #1c3a2b;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.9rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

main#view {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

#bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
#bottomnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 6px;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--muted);
}
#bottomnav a span { font-size: 0.65rem; }
#bottomnav a.active { color: var(--green); font-weight: 600; }

h2 { font-size: 1.3rem; margin: 8px 0 12px; }
h3 { font-size: 1.05rem; margin: 16px 0 8px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.card.clickable { cursor: pointer; }
.card.clickable:active { background: var(--green-light); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.muted { color: var(--muted); font-size: 0.85rem; }
.small { font-size: 0.85rem; }

button, .btn {
  font: inherit;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:active, .btn:active { background: var(--green-dark); }
button.secondary { background: var(--green-light); color: var(--green-dark); }
button.danger { background: transparent; color: var(--red); padding: 6px 8px; }
button.ghost { background: transparent; color: var(--green-dark); padding: 6px 8px; }
button.small-btn { padding: 6px 10px; font-size: 0.85rem; }
button:disabled { opacity: 0.5; cursor: default; }

/* Knapper i vertikal rekke: like brede, jevn avstand, ingen overlapp.
   Flere .btn/.secondary uten container fløt før side om side og krasjet. */
.knapperad { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.knapperad .btn { display: block; text-align: center; margin: 0; }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  margin: 4px 0 12px;
}
textarea { min-height: 70px; resize: vertical; }
label { font-size: 0.9rem; font-weight: 600; }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 400; }
label.inline input { width: auto; margin: 0; }

fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 12px;
  max-height: 200px;
  overflow-y: auto;
}
fieldset legend { font-size: 0.85rem; font-weight: 600; }

/* Stjerner */
.stars { display: inline-flex; gap: 2px; }
.stars .star { font-size: 1.25rem; color: #cfd8d2; cursor: pointer; background: none; border: none; padding: 2px; }
.stars .star.filled { color: var(--amber); }
.stars.readonly .star { cursor: default; font-size: 1rem; }

.env-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.env-tabs button {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 0.85rem;
}
.env-tabs button.active { background: var(--green); color: #fff; border-color: var(--green); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}
.badge.stale { background: #fdf3e3; color: #9a6b14; }
.badge.new { background: var(--green-light); color: var(--green-dark); }
.badge.reached { background: var(--green-light); color: var(--green-dark); }
.badge.pending { background: #fdf3e3; color: #9a6b14; }

.countdown {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green-dark);
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }

.level-tabs { display: flex; gap: 6px; margin: 12px 0; }
.level-tabs button {
  flex: 1;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  padding: 8px 4px;
}
.level-tabs button.active { background: var(--green); color: #fff; border-color: var(--green); }

.wizard-step { margin-bottom: 16px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-grid button { padding: 16px 8px; }

/* Valg i treningsflyten: én per rad, full bredde og høye trykkflater —
   skal være lett å treffe med kalde fingre ute på banen. */
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice-list button {
  width: 100%;
  padding: 20px 16px;
  font-size: 1.1rem;
  text-align: left;
}

.suggestion { border-left: 4px solid var(--amber); padding-left: 10px; margin: 8px 0; }

/* Kompakte evalueringskort — mange rader skal få plass på en mobilskjerm */
.xsmall { font-size: 0.75rem; }
#eval-items .card { padding: 10px 12px; margin-bottom: 8px; }
#eval-items .suggestion { padding: 8px 0 8px 10px; }
.eval-title { min-width: 0; flex: 1; }
.eval-title strong { font-size: 0.95rem; }
.eval-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.eval-fields input { margin: 0; padding: 7px 9px; font-size: 0.85rem; }
.eval-fields > input[list] { flex: 1 1 100%; }
/* Per-øvelse tidsregistrering i sekunder, med forhåndsvalg-chips (#23) */
.tid-felt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; }
.tid-chip {
  padding: 4px 9px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.tid-chip:hover { background: var(--green-light); border-color: var(--green); }
.tid-chip.valgt { background: var(--green); color: #fff; border-color: var(--green); }
.tid-felt .time-input { max-width: 72px; margin: 0; padding: 6px 8px; font-size: 0.85rem; }

/* Belønning-velger (mobilvennlig, siden datalist ofte svikter på mobil) */
.belonning-felt { display: flex; gap: 6px; width: 100%; }
.belonning-felt input { flex: 1; margin: 0; }
.belonning-velg { padding: 7px 10px; font-size: 0.85rem; background: var(--card); color: var(--green-dark); border: 1px solid var(--border); }
.belonning-velg:active { background: var(--green-light); }
#belonning-dialog .belonning-valg { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
#belonning-dialog .belonning-valg button {
  padding: 10px 14px;
  font-size: 0.95rem;
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--border);
}
#eval-items .stars .star { font-size: 1.15rem; padding: 0 1px; }

/* Ett-trykks antallsvalg */
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.count-grid button { padding: 22px 0; font-size: 1.3rem; font-weight: 600; }

/* Merker og feiring */
.badge-shelf { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  margin-bottom: 6px;
}
.badge-card.earned { border-color: var(--green); background: var(--green-light); }
.badge-card.locked { opacity: 0.55; }
.badge-icon { font-size: 1.6rem; line-height: 1; }
.badge-progress { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.badge-progress i { display: block; height: 100%; background: var(--green); }
dialog.celebrate { text-align: center; }
dialog.celebrate .confetti { font-size: 3rem; animation: pop 0.5s ease-out; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.badge-mini { font-size: 1.3rem; }

/* Lukkeknapp på panels som kan skjules (N8). Sitter i kortets hjørne uten å
   ta plass i flyten, og er stor nok for en tommel. */
.panel-lukk {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.panel-lukk:hover { background: var(--bg); color: var(--text); }
.panel-lukk:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
/* Kortet må være posisjonert for at knappen skal feste seg i hjørnet, og
   overskriften må vike for den. */
.card:has(> .panel-lukk) { position: relative; }
.card:has(> .panel-lukk) > h3,
.card:has(> .panel-lukk) > strong { padding-right: 34px; display: inline-block; }

/* Merkelabben i tekst. Følger skriftstørrelsen og fargen rundt seg, så den
   oppfører seg som et tegn og ikke som et bilde. */
.labb-tekst {
  width: 1em;
  height: 1em;
  vertical-align: -0.13em;
  flex-shrink: 0;
}
.labb-hilsen {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  color: var(--green);
}

/* Skiltbilder fra regelverket */
.skilt-mini {
  width: 92px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  image-rendering: crisp-edges;
}
.skilt-trykkbar { cursor: zoom-in; }
.skilt-stor {
  width: 138px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
  image-rendering: crisp-edges;
}
.skilt-rad { display: flex; align-items: center; gap: 10px; min-width: 0; }
.skilt-galleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.skilt-galleri figure { margin: 0; text-align: center; }
.skilt-galleri figcaption { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

/* Trekkspill per klasse i sportsvisningen */
.klassegruppe { border-bottom: 1px solid var(--border); }
.klassegruppe:last-of-type { border-bottom: none; }
.klassegruppe > summary {
  cursor: pointer;
  padding: 12px 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  list-style: none;
}
.klassegruppe > summary::-webkit-details-marker { display: none; }
/* Status (åpen / krever mer grunntrening) skyves helt til høyre i overskriften */
.klassegruppe > summary .gruppe-status { margin-left: auto; }
.klassegruppe > summary { flex-wrap: wrap; }
.klassegruppe > summary::before { content: '▸'; color: var(--muted); }
.klassegruppe[open] > summary::before { content: '▾'; }
.klassegruppe[open] > summary { border-bottom: 1px solid var(--border); }
/* Radene skal ikke brekke stygt: navn på egen linje, stjerner og knapper under */
.klassegruppe .list-item,
#element-list > .list-item {
  flex-wrap: wrap;
  padding: 10px 6px;
  row-gap: 6px;
}
.element-tekst { flex: 1 1 100%; min-width: 0; }
.element-tekst .skilt-rad { align-items: flex-start; }
.element-tekst .skilt-rad strong { display: inline; }
.klassegruppe .list-item > .stars,
#element-list > .list-item > .stars { margin-right: auto; }
#element-list .list-item strong { font-size: 0.95rem; }

/* Regelverkets øvelsesbeskrivelse: ett steg per linje */
/* Tempoendring må avsluttes: 127/128/215 → 129 Vanlig marsj. Ligger utenfor
   .ovelsesbeskrivelse fordi regelen alltid skal være synlig — skiltet er lite,
   men flyten er hele poenget, så pilen bærer betydningen. */
.tempo-regel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--green-light);
  border-radius: 6px;
}
.tempo-regel .skilt-mini { width: 40px; }
.tempo-regel strong { color: var(--text); font-weight: 600; }

.ovelsesbeskrivelse { margin-top: 4px; }
.ovelsesbeskrivelse summary { cursor: pointer; padding: 2px 0; }
.ovelsesbeskrivelse .steg { margin: 6px 0 4px; padding-left: 20px; }
.ovelsesbeskrivelse .steg li { font-size: 0.85rem; margin-bottom: 4px; line-height: 1.35; }
.ovelsesbeskrivelse .hoyrefoering {
  font-size: 0.8rem;
  color: var(--muted);
  border-left: 3px solid var(--border);
  padding-left: 8px;
  margin-top: 4px;
}
.ovelsesbeskrivelse .hoyrefoering div { margin-bottom: 3px; }

/* Øvelsesliste i et program: én linje per øvelse med sitt skilt */
.ovelsesliste { margin-top: 6px; }
.ovelsesliste summary { cursor: pointer; padding: 2px 0; }
.ovelseslinje {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.ovelseslinje .skilt-mini { width: 76px; }
.ovelseslinje span.small { flex: 1; min-width: 0; }

/* Hundeoversikt på startsiden — beslutningsgrunnlag for neste økt */
.dog-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Lik padding på alle rader — ellers ville uthevingen av «anbefalt» flyttet
     Tren-knappen ut av linje med de andre. */
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
}
.dog-row:last-child { border-bottom: none; }
.dog-row.anbefalt { background: var(--green-light); border-radius: 8px; }
.dog-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.dog-row-navn { flex: 1 1 auto; min-width: 0; }
/* Klassenivået står midt i raden, mellom hundenavn og konkurranse/Tren */
.dog-row-klasse {
  flex: 0 0 46px;
  width: 46px;
  text-align: center;
  line-height: 1.05;
}
.dog-row-klasse .klasse-ikon { display: block; font-size: 1.3rem; }
.dog-row-klasse .xsmall { color: var(--muted); white-space: nowrap; }
/* Fast bredde på konkurransekolonnen gjør at Tren-knappene står på linje */
.dog-row-konk { text-align: right; flex: 0 0 88px; width: 88px; }
.dog-row-konk .countdown { font-size: 0.95rem; }
.dog-row > button[data-tren] { flex: 0 0 auto; min-width: 58px; padding: 10px 12px; }
.dog-row-navn strong { display: block; }

dialog {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  padding: 20px;
  width: min(92vw, 480px);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }

.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 10px;
}
.empty .big { font-size: 2.5rem; }

/* Kontekstuell hjelp */
.hjelp-knapp {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 6px;
}
.hjelp-knapp:active { background: var(--green-light); color: var(--green-dark); }
dialog.hjelp { max-width: min(92vw, 460px); }
dialog.hjelp h3 { margin-top: 0; }
dialog.hjelp p { font-size: 0.9rem; line-height: 1.45; margin: 0 0 10px; }

/* Skilt i stor visning ved trykk */
.skilt-lupe {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lupe-inn 0.15s ease-out;
  cursor: zoom-out;
}
.skilt-lupe figure {
  margin: 0;
  background: #fff;
  padding: 14px;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  max-width: 90vw;
}
.skilt-lupe img {
  width: min(78vw, 420px);
  height: auto;
  image-rendering: crisp-edges;
  display: block;
}
.skilt-lupe figcaption { margin-top: 10px; font-weight: 600; }
@keyframes lupe-inn { from { opacity: 0; } to { opacity: 1; } }

/* Filterrad i historikken */
.filterrad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; }
.filterrad select { flex: 1 1 140px; margin: 0; padding: 8px 10px; font-size: 0.85rem; }
.filterrad button { flex: 0 0 auto; }

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 50;
  background: var(--green-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 22px;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  animation: toast-inn 0.2s ease-out;
}
@keyframes toast-inn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.simulation-banner {
  background: var(--green-dark);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  text-align: center;
}

/* Hall of fame — statistikk og progresjon (#16) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
}
.stat-grid > div { padding: 6px 2px; }
.stat-grid strong { font-size: 1.15rem; display: block; }
@media (max-width: 480px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.maaned-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  overflow-x: auto;
  padding-top: 6px;
}
.maaned-bar {
  flex: 0 0 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.maaned-fyll {
  width: 18px;
  min-height: 3px;
  background: var(--green, #2e7d5b);
  border-radius: 3px 3px 0 0;
}

/* Sted-steget: fast utstyr som bare finnes her (#25, første kutt) */
.sted-utstyr {
  display: block;
  font-size: 0.8rem;
  margin-top: 3px;
  opacity: 0.92;
}

/* Kom-i-gang-veiledningen (JEGs mobiltest-funn: «blir litt anonymt i forhold til
   aksjons-knappene»). Fylt lys grønn flate + venstrekant gir den samme visuelle
   vekt som en primærknapp, uten å konkurrere om trykket. */
.veiledning {
  background: var(--green-light);
  border-left: 5px solid var(--green);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--green-dark);
}
.veiledning strong { color: var(--green-dark); }
.veiledning a { color: var(--green-dark); font-weight: 600; }
.veiledning .muted { color: #4a6b5c; }
.veiledning .stegtall {
  display: inline-block;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-right: 6px;
}

/* Kom-i-gang-kortet (JEGs mobiltest-funn: «litt for komprimert» og «for lys/
   anonym»). Tydelig grønn flate med markert kant, og lesbar tekst — dette er
   det ferske brukere leser først, så det tåler å ta plass. */
.card.komigang {
  background: linear-gradient(180deg, #eaf5ef 0%, var(--green-light) 100%);
  border: 1px solid #bcdccb;
  border-left: 6px solid var(--green);
  box-shadow: 0 2px 8px rgba(46, 125, 91, 0.13);
  padding: 16px 18px;
}
.card.komigang h3 { font-size: 1.2rem; color: var(--green-dark); }
.card.komigang .list-item {
  padding: 13px 0;
  border-bottom-color: #cfe4d8;
}
.card.komigang .list-item strong { font-size: 1.02rem; }
/* Hintet under hvert steg var 0.75rem — for smått på mobil. */
.card.komigang .list-item .xsmall { font-size: 0.87rem; margin-top: 3px; }
.card.komigang .list-item .small { font-size: 0.9rem; line-height: 1.4; }
.card.komigang .muted,
.card.komigang .list-item .muted { color: #4a6b5c; }
.card.komigang .badge-progress {
  height: 8px;
  background: #cfe4d8;
}
.card.komigang .badge-progress i { background: var(--green); }