/* ============================================================
   SKOJ & PLOJ – designsystem
   Identiteten kommer från klubbens eget material: tigergult och
   loggblått, solstråle-hero som inbjudan, knubbig rund rubrikfont
   och hårda "klistermärkes-skuggor".
   ============================================================ */

:root {
  --gul: #ffd200;          /* tigergult – hero, knappar */
  --gul-stral: #ffde59;    /* ljusare strålar i solstrålen */
  --gul-blek: #fff6d0;     /* blek gul för lugna sektioner */
  --bla: #1e4a94;          /* loggblått – rubriker, ramar */
  --bla-mork: #142f5e;     /* mörkblå – prishyllan, footer */
  --mork: #22242a;         /* brödtext */
  --vit: #ffffff;
  --rod: #c8321e;          /* endast fel/varningar */

  --font-display: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-brod: "Rubik", "Segoe UI", sans-serif;

  --skugga: 5px 5px 0 var(--bla);
  --skugga-liten: 3px 3px 0 var(--bla);
  --rund: 18px;
  --maxbredd: 1060px;
}

/* ---------- Grund ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden-attributet ska alltid vinna över klassernas display-värden */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-brod);
  color: var(--mork);
  background: var(--vit);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  cursor: default;          /* vanlig pil över text, inte textmarkör */
}

/* Textmarkören bara där man kan skriva, handen där man kan klicka */
input, textarea, [contenteditable="true"] { cursor: text; }
a[href], button, select, summary, label[for],
input[type="checkbox"], input[type="radio"], input[type="file"],
input[type="submit"], input[type="button"] { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }

img { max-width: 100%; display: block; }

a { color: var(--bla); }

:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--bla);
}

/* Sektionsrubrik med "eyebrow" */
.eyebrow {
  display: block;
  font-family: var(--font-brod);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bla);
  opacity: 0.75;
  margin-bottom: 0.35rem;
}

/* ---------- Toppmeny ---------- */

.topp-meny {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vit);
  border-bottom: 3px solid var(--bla);
}

.topp-meny-inner {
  max-width: var(--maxbredd);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.meny-logga {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--bla);
  white-space: nowrap;
}

.meny-logga img { height: 40px; width: auto; }

.topp-meny nav {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
}

.topp-meny nav a {
  font-weight: 700;
  text-decoration: none;
  color: var(--bla);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  transition: background 0.15s;
}

.topp-meny nav a:hover { background: var(--gul); }

/* ---------- Hero: solstrålen från inbjudan ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--gul);
  text-align: center;
  padding: 4.5rem 1rem 4rem;
}

/* Solstrålarna från inbjudan – statisk disk bakom innehållet */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    var(--gul) 0deg 9deg,
    var(--gul-stral) 9deg 18deg
  );
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.hero-logga {
  width: min(340px, 70vw);
  margin: 0 auto 1rem;
  filter: drop-shadow(0 4px 0 rgba(20, 47, 94, 0.18));
}

.hero h1 {
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  font-weight: 800;
  transform: rotate(-2deg);
  text-shadow: 3px 3px 0 var(--vit);
  margin-bottom: 0.5rem;
}

.hero-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  color: var(--bla-mork);
  margin-bottom: 0.8rem;
}

.hero-undertext {
  max-width: 46ch;
  margin: 0 auto 1.6rem;
  font-weight: 500;
  color: var(--mork);
}

/* Datum-flik, som fliken i hörnet på inbjudan */
.hero-datum {
  display: inline-block;
  background: var(--bla);
  color: var(--vit);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  transform: rotate(1.5deg);
  box-shadow: 3px 3px 0 var(--bla-mork);
  margin-bottom: 1.8rem;
}

/* ---------- Knappar ---------- */

.knapp {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  text-align: center;
  color: var(--bla);
  background: var(--gul);
  border: 3px solid var(--bla);
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  cursor: pointer;
  box-shadow: var(--skugga-liten);
  transition: transform 0.12s, box-shadow 0.12s;
}

.knapp:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--bla);
}

.knapp:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--bla);
}

.knapp--bla {
  background: var(--bla);
  color: var(--vit);
  border-color: var(--bla-mork);
  box-shadow: 3px 3px 0 var(--bla-mork);
}

.knapp--bla:hover { box-shadow: 5px 5px 0 var(--bla-mork); }
.knapp--bla:active { box-shadow: 1px 1px 0 var(--bla-mork); }

.knapp--sekundar {
  background: var(--vit);
  font-size: 1rem;
  padding: 0.5rem 1.3rem;
}

.knapp[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--skugga-liten);
}

/* ---------- Sektioner ---------- */

.sektion {
  padding: 3.5rem 1rem;
  scroll-margin-top: 70px;
}

.sektion-inner {
  max-width: var(--maxbredd);
  margin: 0 auto;
}

.sektion h2 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 1.2rem;
}

.sektion--gul { background: var(--gul-blek); }

.sektion--bla {
  background: var(--bla-mork);
  color: var(--vit);
}

.sektion--bla h2,
.sektion--bla .eyebrow { color: var(--gul); }

/* Sammanhängande fotovägg bakom Om turneringen + Anmälan + Regler.
   Bilden och dess storlek sätts av innehall.js (data-bildvagg) från
   det publicerade innehållet; väggen byggs i admin → Redigera →
   Bildvägg och kaklas sömlöst. Sektionerna lägger bara en ljus ton
   ovanpå så väggen löper obruten genom alla tre. */
.sektion--foton {
  background-color: transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86));
}

/* ---------- "Om turneringen": infopunkter ---------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.info-punkt {
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  padding: 1.1rem 1.2rem;
}

.info-punkt h3 {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.info-punkt p { font-size: 0.97rem; }

.info-punkter:not([hidden]) { display: contents; }

/* Inbjudan visas som andra ruta: första infopunkten före, resten efter
   (order på rutnätets barn; listan i admin påverkas inte). */
.info-punkter > .info-punkt:nth-of-type(n + 2) { order: 2; }

/* Inbjudan och Lottning: liten bild på PDF:en med nedladdningsknappen under */
.info-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

.info-pdf h3 { margin-bottom: 0; }

/* Länk runt bilden; ett tryck öppnar den i full storlek. */
.pdf-bild {
  display: block;
  width: 100%;
  max-width: 120px;
  border: 2px solid var(--bla);
  border-radius: 6px;
  box-shadow: var(--skugga-liten);
  overflow: hidden;
  cursor: zoom-in;
}

.pdf-bild img {
  display: block;
  width: 100%;
  height: auto;
}

.info-pdf .knapp {
  margin-top: auto;
  font-size: 0.92rem;
  padding: 0.45rem 1rem;
}

.info-inbjudan { order: 1; }
/* Varken bild eller PDF: ingen ruta */
.info-inbjudan:not(:has(img:not([hidden]), a:not([hidden]))) { display: none; }

/* Lottning sist. Utan gruppindelning: som en vanlig infopunkt med texten.
   Med gruppindelning: bild och knapp som Inbjudan, texten döljs. */
.info-lottning { order: 3; }
.info-lottning:not(:has(a[data-fil]:not([hidden]))) {
  align-items: stretch;
  gap: 0.3rem;
  text-align: left;
}
.info-lottning:not(:has(a[data-fil]:not([hidden]))) .pdf-bild,
.info-lottning:has(a[data-fil]:not([hidden])) .lottning-text { display: none; }
.info-lottning:not(:has(a[data-fil]:not([hidden]))):not(:has(.lottning-text:not([hidden]))) { display: none; }

/* ---------- Anmälningskort ---------- */

.anmalan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.6rem;
  margin-top: 1.6rem;
}

.kort {
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  box-shadow: var(--skugga);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kort h3 {
  font-size: 1.5rem;
  font-weight: 800;
}

.kort ul {
  list-style: none;
  display: grid;
  gap: 0.35rem;
  font-size: 0.97rem;
}

.kort ul li {
  padding-left: 1.5rem;
  position: relative;
}

.kort ul li::before {
  content: "⚽";
  position: absolute;
  left: 0;
  font-size: 0.85rem;
  top: 0.15rem;
}

.kort .knapp { margin-top: auto; align-self: start; }

/* Efterfestkortet har två knappar (middag + sen ankomst) bredvid varandra. */
.kort .kort-knappar { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kort .kort-knappar .knapp { margin-top: 0; }

.kort-bild {
  border-radius: calc(var(--rund) - 8px);
  border: 2px solid var(--bla);
  aspect-ratio: 5 / 2;
  object-fit: cover;
  width: 100%;
}

/* ---------- Formulär ---------- */

.form-sida {
  max-width: 620px;
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
}

.form-sida h1 {
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.form-intro { margin-bottom: 1.6rem; }

.form-ruta {
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  box-shadow: var(--skugga);
  padding: 1.5rem;
}

.form-underrubrik {
  font-size: 1.2rem;
  margin: 1.4rem 0 0.6rem;
}

.form-hjalptext {
  font-size: 0.92rem;
  color: rgba(34, 36, 42, 0.75);
  margin-bottom: 0.8rem;
}

.falt { margin-bottom: 1rem; }

.falt label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  color: var(--bla-mork);
}

.falt input,
.falt textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--bla);
  border-radius: 10px;
  background: var(--vit);
}

.falt input:focus,
.falt textarea:focus {
  outline: 3px solid var(--gul);
  outline-offset: 0;
}

.falt-rad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

@media (max-width: 480px) {
  .falt-rad { grid-template-columns: 1fr; gap: 0; }
}

/* Dagval: "spelar helst gruppspelet på …" – knappar i stället för dropdown */

.dagval { border: 0; }

.dagval legend {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  color: var(--bla-mork);
}

.dagval-knappar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.dagval-knappar label { cursor: pointer; }

/* Radioknappen göms men behåller fokus/tangentbord – spannen är det synliga. */
.dagval-knappar input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dagval-knappar span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bla);
  background: var(--vit);
  border: 2px solid var(--bla);
  border-radius: 999px;
  padding: 0.35rem 1.1rem;
  transition: transform 0.12s, box-shadow 0.12s;
}

.dagval-knappar label:hover span {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--bla);
}

.dagval-knappar input:checked + span {
  background: var(--bla);
  color: var(--vit);
  box-shadow: 3px 3px 0 var(--gul);
}

.dagval-knappar input:focus-visible + span {
  outline: 3px solid var(--gul);
  outline-offset: 2px;
}

/* Fotokollage: uttonade bilder från tidigare år runt laganmälningsformuläret.
   Absolut positionerade i marginalerna på desktop; på smalare skärmar
   visas i stället en liten rad ovanför formuläret. */

.foto-kollage {
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  height: 1150px;
  pointer-events: none;
  z-index: -1;
}

/* Göm kollaget när formuläret är dolt (bekräftelsen/stängd anmälan) –
   annars hänger bilderna kvar nedanför footern på den korta sidan. */
body:has(.bekraftelse.synlig) .foto-kollage,
body:has(.stangd-vy.synlig) .foto-kollage {
  display: none;
}

.foto-kollage img {
  position: absolute;
  width: 220px;
  border: 2px solid var(--bla);
  border-radius: 12px;
  box-shadow: var(--skugga-liten);
}

.foto-kollage img:nth-child(1)  { left: calc(50% - 585px);  top: 10px;  transform: rotate(-7deg); width: 235px; }
.foto-kollage img:nth-child(2)  { right: calc(50% - 590px); top: 40px;  transform: rotate(5deg);  width: 220px; }
.foto-kollage img:nth-child(3)  { left: calc(50% - 555px);  top: 230px; transform: rotate(4deg);  width: 205px; }
.foto-kollage img:nth-child(4)  { right: calc(50% - 570px); top: 270px; transform: rotate(-6deg); width: 230px; }
.foto-kollage img:nth-child(5)  { left: calc(50% - 595px);  top: 440px; transform: rotate(6deg);  width: 240px; }
.foto-kollage img:nth-child(6)  { right: calc(50% - 550px); top: 500px; transform: rotate(-4deg); width: 205px; }
.foto-kollage img:nth-child(7)  { left: calc(50% - 560px);  top: 660px; transform: rotate(-5deg); width: 215px; }
.foto-kollage img:nth-child(8)  { right: calc(50% - 585px); top: 710px; transform: rotate(7deg);  width: 225px; }
.foto-kollage img:nth-child(9)  { left: calc(50% - 585px);  top: 880px; transform: rotate(5deg);  width: 230px; }
.foto-kollage img:nth-child(10) { right: calc(50% - 570px); top: 930px; transform: rotate(-6deg); width: 220px; }

@media (max-width: 1199px) {
  .foto-kollage {
    position: static;
    height: auto;
    display: flex;
    justify-content: center;
    gap: 3%;
    padding: 1.8rem 1rem 0;
  }
  /* :nth-child(n) matchar alla men ger samma specificitet som
     desktoplägets :nth-child(1)–(10) – annars vinner deras fasta
     bredder/positioner även här och raden överflödar sidled. */
  .foto-kollage img:nth-child(n) { position: static; width: 22%; }
  .foto-kollage img:nth-child(odd)  { transform: rotate(-4deg); }
  .foto-kollage img:nth-child(even) { transform: rotate(4deg); }
  .foto-kollage img:nth-child(n+5)  { display: none; }
}

/* Startsidans kollage: fotona sprids nerför hela sidan i marginalerna
   utanför innehållet. Höjderna är procent av sidan så att de följer med
   när texterna ändras. Ligger ovanpå sektionernas bakgrunder men under
   menyn. Får bara plats från 1400 px. Upp till 15 foton. */
body:has(.foto-kollage--startsida) { position: relative; }

.foto-kollage--startsida { display: none; }

@media (min-width: 1400px) {
  .foto-kollage--startsida {
    display: block;
    top: 0;
    bottom: 0;
    height: auto;
    z-index: 5;
    --kollage-bredd: clamp(140px, calc(50vw - 530px - 40px), 220px);
    /* Mitten av marginalen, från sidans kant räknat. */
    --kollage-kant: calc(25% - 265px);
  }
  .foto-kollage--startsida img:nth-child(n) {
    left: auto;
    right: auto;
    width: var(--kollage-bredd);
  }
  .foto-kollage--startsida img:nth-child(odd)  { left: var(--kollage-kant); }
  .foto-kollage--startsida img:nth-child(even) { right: var(--kollage-kant); }
  .foto-kollage--startsida img:nth-child(1)  { top: 3%;  transform: translateX(-50%) rotate(-7deg); }
  .foto-kollage--startsida img:nth-child(2)  { top: 9%;  transform: translateX(50%) rotate(5deg); }
  .foto-kollage--startsida img:nth-child(3)  { top: 15%; transform: translateX(-50%) rotate(4deg); }
  .foto-kollage--startsida img:nth-child(4)  { top: 21%; transform: translateX(50%) rotate(-6deg); }
  .foto-kollage--startsida img:nth-child(5)  { top: 27%; transform: translateX(-50%) rotate(6deg); }
  .foto-kollage--startsida img:nth-child(6)  { top: 33%; transform: translateX(50%) rotate(-4deg); }
  .foto-kollage--startsida img:nth-child(7)  { top: 39%; transform: translateX(-50%) rotate(-5deg); }
  .foto-kollage--startsida img:nth-child(8)  { top: 45%; transform: translateX(50%) rotate(7deg); }
  .foto-kollage--startsida img:nth-child(9)  { top: 51%; transform: translateX(-50%) rotate(5deg); }
  .foto-kollage--startsida img:nth-child(10) { top: 57%; transform: translateX(50%) rotate(-6deg); }
  .foto-kollage--startsida img:nth-child(11) { top: 63%; transform: translateX(-50%) rotate(-4deg); }
  .foto-kollage--startsida img:nth-child(12) { top: 69%; transform: translateX(50%) rotate(6deg); }
  .foto-kollage--startsida img:nth-child(13) { top: 75%; transform: translateX(-50%) rotate(-7deg); }
  .foto-kollage--startsida img:nth-child(14) { top: 81%; transform: translateX(50%) rotate(4deg); }
  .foto-kollage--startsida img:nth-child(15) { top: 87%; transform: translateX(-50%) rotate(5deg); }
}

/* Integritetspolicy-sidan */

.policy h1 {
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.policy h2 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.4rem;
}

.policy p { margin-bottom: 0.7rem; }

.policy ul {
  padding-left: 1.3rem;
  margin-bottom: 0.7rem;
}

.policy li { margin-bottom: 0.4rem; }

/* Extra person-/spelarrader */
.person-rad {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.8rem;
  align-items: end;
  margin-bottom: 0.4rem;
}

.person-rad .falt { margin-bottom: 0.4rem; }

.ta-bort-person {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rod);
  background: none;
  border: 2px solid var(--rod);
  border-radius: 10px;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
  margin-bottom: 0.65rem;
}

.ta-bort-person:hover { background: #fbe9e6; }

/* Allergi per person (efterfesten): kryssruta som fäller ut ett textfält.
   Ligger på egen rad under namnen i person-raden. */
.allergi {
  grid-column: 1 / -1;
  margin-bottom: 0.6rem;
}

.allergi-val {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bla-mork);
  cursor: pointer;
}

.allergi-val input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--bla);
  cursor: pointer;
}

.allergi-falt { margin: 0.45rem 0 0; }

/* Varje medföljande person blir ett eget litet block (namn + allergi) */
#personer-lista .person-rad {
  row-gap: 0;
  padding-bottom: 0.3rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px dashed rgba(34, 36, 42, 0.25);
}

.lagg-till {
  font: inherit;
  font-weight: 700;
  color: var(--bla);
  background: var(--gul-blek);
  border: 2px dashed var(--bla);
  border-radius: 10px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  width: 100%;
  margin: 0.3rem 0 1rem;
}

.lagg-till:hover:not([disabled]) { background: var(--gul-stral); }

.lagg-till[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Summa-rad (efterfesten) */
.summa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  background: var(--gul-blek);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
}

.summa strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--bla);
}

/* Felruta */
.form-fel {
  display: none;
  background: #fbe9e6;
  border: 2px solid var(--rod);
  border-radius: 10px;
  color: var(--rod);
  font-weight: 500;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

.form-fel.synlig { display: block; }

/* ---------- Bekräftelse & notiser ---------- */

.bekraftelse {
  display: none;
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  box-shadow: var(--skugga);
  padding: 1.8rem;
}

.bekraftelse.synlig { display: block; }

.bekraftelse h2 { font-size: 1.9rem; margin-bottom: 0.6rem; }

.notis {
  background: var(--gul-blek);
  border: 2px solid var(--bla);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
  font-size: 0.97rem;
}

.notis--varning {
  background: #fbe9e6;
  border-color: var(--rod);
  color: var(--rod);
}

.stangd-vy,
.dev-varning { display: none; }

.stangd-vy.synlig,
.dev-varning.synlig { display: block; }

/* Swish-betalning i bekräftelsen */
.qr-bild {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

.qr-bild img {
  border: 3px solid var(--bla);
  border-radius: var(--rund);
}

.swish-rad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
}

.swish-meddelande {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--gul-blek);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
}

.kopiera-knapp {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bla);
  background: var(--vit);
  border: 2px solid var(--bla);
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
}

.kopiera-knapp:hover { background: var(--gul); }

/* Manuell betalinfo – visas bara om QR-koden inte kunde skapas */
.betal-fallback { display: none; }
.betal-fallback.synlig { display: block; }

.betal-fallback dt {
  font-weight: 700;
  color: var(--bla-mork);
  margin-top: 0.4rem;
}

/* ---------- Vinnare genom åren ---------- */

.sektion--centrerad { text-align: center; }

.sektion--centrerad .vinnare-lista {
  margin-inline: auto;
  text-align: left;
}

.sektion--centrerad .vinnare-foton { margin-inline: auto; }

.vinnare-lista {
  columns: 2;
  column-gap: 2.5rem;
  margin-top: 1.4rem;
  max-width: 820px;
}

@media (max-width: 640px) {
  .vinnare-lista { columns: 1; }
}

.vinnare-rad {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.28rem 0.5rem;
  break-inside: avoid;
  border-radius: 8px;
}

.vinnare-rad .ar {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gul);
  min-width: 3.2rem;
}

.vinnare-rad--buckla {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--gul), var(--gul-stral));
  color: var(--bla-mork);
  font-weight: 700;
}

.vinnare-rad--buckla .ar { color: var(--bla); }

/* Glimt som sveper över guldraden med jämna mellanrum */
.vinnare-rad--buckla::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: buckla-glimt 4.5s ease-in-out infinite;
}

/* Andra bucklaraden glimmar i otakt med den första */
.vinnare-rad--buckla ~ .vinnare-rad--buckla::after {
  animation-delay: 2.25s;
}

@keyframes buckla-glimt {
  0% { left: -60%; }
  30% { left: 130%; }
  100% { left: 130%; }
}

.buckla-emoji {
  display: inline-block;
  transform-origin: 50% 85%;
}

.vinnare-rad--buckla.glimmar .buckla-emoji {
  animation: buckla-vick 0.8s ease-in-out 0.35s 2;
}

@keyframes buckla-vick {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-14deg); }
  60% { transform: rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vinnare-rad--buckla::after { display: none; }
  .vinnare-rad--buckla.glimmar .buckla-emoji { animation: none; }
}

.vinnare-rad--installt { opacity: 0.55; font-style: italic; }

.vinnare-foton {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
  max-width: 640px;
}

.vinnare-foton figure { position: relative; }

.vinnare-foton img {
  border-radius: var(--rund);
  border: 3px solid var(--gul);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vinnare-foton figcaption {
  font-weight: 700;
  color: var(--gul);
  margin-top: 0.4rem;
  font-size: 0.95rem;
}

/* ---------- Regler ---------- */

/* Regelbladet: hela sidan som bild, som ett papper på fotoväggen */
.regler-bild {
  display: block;
  max-width: 760px;
  margin-top: 1.6rem;
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  box-shadow: var(--skugga);
  overflow: hidden;
  cursor: zoom-in;
}

.regler-bild img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 560px) {
  .regler-bild {
    border-width: 2px;
    border-radius: 10px;
    box-shadow: var(--skugga-liten);
  }
}

.pdf-knappar {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ---------- Kontakt ---------- */

.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 2rem;
}

.kontakt-kort {
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  padding: 1rem 1.2rem;
}

.kontakt-kort h3 { font-size: 1.1rem; }

.kontakt-kort p { font-size: 0.95rem; }

.kontakt-kort a { display: block; word-break: break-word; }

.kartor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
  margin-bottom: 2rem;
}

.karta h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }

.karta iframe {
  width: 100%;
  height: 280px;
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  display: block;
}

/* ---------- Sponsorer ---------- */

.sponsorer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}

.sponsorer img {
  height: 44px;
  width: auto;
  filter: grayscale(35%);
  transition: filter 0.15s;
}

.sponsorer img:hover { filter: none; }

.sponsorer a { display: inline-flex; }

.sponsorer-rubrik {
  margin: 2.2rem 0 0.2rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bla);
}

/* Ingen rubrik när det inte finns några loggor */
.sponsorer-rubrik:has(+ .sponsorer:empty) { display: none; }

/* ---------- Footer ---------- */

.footer {
  background: var(--bla-mork);
  color: var(--vit);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.95rem;
}

.footer a { color: var(--gul); }

.footer p { margin: 0 0 0.4rem; }

.footer .footer-swish { margin-top: 0.9rem; }

.footer .footer-sociala a {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.social-ikon {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

.footer .footer-sociala span { margin: 0 0.4rem; opacity: 0.6; }

.footer .footer-liten {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ---------- Småskärm ---------- */

@media (max-width: 560px) {
  .meny-logga span { display: none; }
  .sektion { padding: 2.5rem 1rem; }
  .hero { padding: 3rem 1rem 2.8rem; }
}

/* ============================================================
   ADMIN
   ============================================================ */

.admin-body { background: #f4f5f8; }

.admin-header {
  background: var(--bla-mork);
  color: var(--vit);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.2rem;
}

.admin-titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

.admin-header-knappar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.knapp--liten {
  font-size: 0.9rem;
  padding: 0.35rem 1rem;
  box-shadow: none;
}

.knapp--liten:hover { transform: none; box-shadow: none; }
.knapp--liten:active { transform: none; box-shadow: none; }

.admin-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.admin-main .notis { margin-bottom: 1rem; }

.login-kort {
  max-width: 560px;
  margin: 2.5rem auto;
}

.login-kort h1 { font-size: 1.8rem; margin-bottom: 0.3rem; }

/* Flikar */

.flikar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.flik-knapp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bla);
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: 999px;
  padding: 0.45rem 1.6rem;
  cursor: pointer;
}

.flik-knapp[aria-selected="true"] {
  background: var(--gul);
  box-shadow: var(--skugga-liten);
}

/* Statistik */

.statistik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.stat-ruta {
  background: var(--vit);
  border: 2px solid var(--bla);
  border-radius: 12px;
  padding: 0.7rem 1rem;
}

.stat-ruta .varde {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--bla);
}

.stat-ruta .etikett { font-size: 0.85rem; }

.stat-ruta--gron { border-color: #1c7d3c; }
.stat-ruta--gron .varde { color: #1c7d3c; }

/* Verktygsrad */

.verktyg {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.verktyg input[type="search"],
.verktyg select {
  font: inherit;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--bla);
  border-radius: 10px;
  background: var(--vit);
}

.verktyg input[type="search"] { flex: 1; min-width: 180px; }

/* Radering efter turneringen (flikarna Lag och Efterfest) */

.radera-ruta {
  margin-top: 2.5rem;
  padding: 1rem 1.1rem;
  border: 2px dashed var(--rod);
  border-radius: 12px;
  background: var(--vit);
}

.radera-ruta h3 { font-size: 1.05rem; color: var(--rod); margin-bottom: 0.3rem; }

.radera-ruta p { font-size: 0.92rem; margin-bottom: 0.7rem; }

/* Bokningsrader (används av båda flikarna) */

.bokningar { display: grid; gap: 0.7rem; }

.bokning {
  background: var(--vit);
  border: 2px solid var(--bla);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.bokning.betald { border-color: #1c7d3c; background: #f4faf5; }

.bokning-check input {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.2rem;
  accent-color: #1c7d3c;
  cursor: pointer;
}

.bokning-info { flex: 1; min-width: 0; }

.bokning-info .namn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bla-mork);
}

.bokning-info .bokning-nr {
  margin-right: 0.4em;
  color: var(--bla-mork);
  opacity: 0.55;
}

/* Efterfestfliken: en sektion per typ (middag / sen ankomst). */
.bokning-sektion { display: grid; gap: 0.7rem; }
.bokning-sektion + .bokning-sektion { margin-top: 1.3rem; }
.bokning-sektion-rubrik { margin: 0; color: var(--bla-mork); }
.bokning-sektion-tom { margin: 0; opacity: 0.6; }

.bokning-info .detaljer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  font-size: 0.85rem;
  color: rgba(34, 36, 42, 0.75);
}

.bokning-info .kommentar,
.bokning-info .kvitto-status,
.bokning-info .mejl-status {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.bokning-info .mejl-status.fel {
  color: var(--rod);
  font-weight: 500;
}

.bokning-info .forsenad {
  color: var(--rod);
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.spelare-detaljer { margin-top: 0.3rem; font-size: 0.92rem; }
.spelare-detaljer summary { cursor: pointer; font-weight: 700; color: var(--bla); }
.spelare-detaljer ol { padding: 0.3rem 0 0 1.6rem; }

.bokning-belopp {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}

.bokning-belopp .kr {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--bla);
  white-space: nowrap;
}

.bokning-atgarder {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ikon-knapp {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bla);
  background: var(--vit);
  border: 1.5px solid var(--bla);
  border-radius: 8px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

.ikon-knapp:hover { background: var(--gul-blek); }

.ikon-knapp.farlig { color: var(--rod); border-color: var(--rod); }
.ikon-knapp.farlig:hover { background: #fbe9e6; }

.ikon-knapp:disabled,
.ikon-knapp:disabled:hover {
  opacity: 0.55;
  background: var(--vit);
  cursor: not-allowed;
}

.tom-lista { text-align: center; }

/* Redigeringsdialog */

.redigera {
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  padding: 0;
  max-width: 560px;
  width: calc(100vw - 2rem);
}

.redigera::backdrop { background: rgba(20, 47, 94, 0.55); }

.dialog-inner { padding: 1.5rem; }

.dialog-inner h2 { margin-bottom: 1rem; }

.dialog-knappar {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* ---------- Redigerbart innehåll (innehall.js) ---------- */

/* Platserna är dolda tills innehållet är hämtat och tonas sedan in.
   Nödspärren (animationen) visar dem efter 10 s även om JavaScript
   skulle ha kraschat. */
.innehall-laddar :is([data-rad], [data-text], [data-punkter], [data-lista], [data-vinnare], [data-kontakter], [data-kartor], [data-bild], [data-bildlank], [data-fil], [data-sponsorer], [data-kollage]) {
  opacity: 0;
  animation: innehall-visa 0s 10s forwards;
}

:is([data-rad], [data-text], [data-punkter], [data-lista], [data-vinnare], [data-kontakter], [data-kartor], [data-bild], [data-bildlank], [data-fil], [data-sponsorer], [data-kollage]) {
  transition: opacity 0.15s ease;
}

:is([data-rad], [data-text], [data-punkter], [data-lista], [data-vinnare], [data-kontakter], [data-kartor], [data-bild], [data-bildlank], [data-fil], [data-sponsorer], [data-kollage])[hidden] {
  display: none !important;
}

@keyframes innehall-visa {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :is([data-rad], [data-text], [data-punkter], [data-lista], [data-vinnare], [data-kontakter], [data-kartor], [data-bild], [data-bildlank], [data-fil], [data-sponsorer], [data-kollage]) {
    transition: none;
  }
}

.innehall-banderoll {
  padding: 0.7rem 1rem;
  text-align: center;
  font-weight: 700;
}

.innehall-banderoll--fel {
  background: #fbe9e6;
  color: var(--rod);
}

.innehall-banderoll--forhandsgranskning {
  background: var(--gul);
  color: var(--bla-mork);
}

/* ---------- Felsidan ----------
   Över hela sidan när innehållet inte går att hämta (felsida.js),
   och som egen sida i 404.html. */

.felsida {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    repeating-conic-gradient(from 0deg at 50% 0%, var(--gul) 0deg 10deg, var(--gul-stral) 10deg 20deg);
}

.felsida--over {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
}

body.felsida-visas { overflow: hidden; }

.felsida-kort {
  width: 100%;
  max-width: 34rem;
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  box-shadow: var(--skugga);
  padding: 2rem 1.5rem;
  text-align: center;
}

.felsida-logga {
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto 1rem;
}

.felsida h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.15;
  color: var(--bla-mork);
  margin-bottom: 0.7rem;
}

.felsida-kort > p { margin-bottom: 1.1rem; }

.felsida-kontakt-rubrik {
  margin-top: 1.6rem;
  font-weight: 700;
  color: var(--bla-mork);
}

.felsida-kontakter {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  text-align: left;
}

.felsida-kontakt {
  display: grid;
  border: 2px solid var(--bla);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  overflow-wrap: anywhere;
}

.felsida-kontakt strong { color: var(--bla-mork); }

.felsida-kontakt a { color: var(--bla); }

/* ---------- Admin: Redigera ---------- */

.red-intro p + p { margin-top: 0.5rem; }

.red-statusrad {
  font-size: 0.95rem;
  margin: 0.8rem 0;
}

.red-knappar,
.red-meny {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.red-meny-grupp {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.red-meny-gruppnamn { font-weight: 700; color: var(--bla-mork); }

.red-meny-knapp {
  font: inherit;
  font-weight: 700;
  color: var(--bla);
  background: var(--vit);
  border: 2px solid var(--bla);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}

.red-meny-knapp[aria-current="true"] {
  background: var(--bla);
  color: var(--vit);
}

.red-rubrik {
  font-size: 1.15rem;
  margin: 1.6rem 0 0.6rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(34, 36, 42, 0.25);
}

/* Textfälten fyller hela bredden och växer neråt med texten
   (field-sizing i nyare webbläsare, annars höjd från redigera.js). */
.red-falt textarea {
  display: block;
  resize: vertical;
  field-sizing: content;
  min-height: 6.5em;
}

.red-falt textarea.red-en-rad { resize: none; min-height: 0; }

.red-forhandsvisning {
  font-size: 0.88rem;
  color: rgba(34, 36, 42, 0.75);
  margin-top: 0.3rem;
  white-space: pre-line;
}

.red-forhandsvisning-etikett { font-weight: 700; }

.red-varning {
  color: var(--rod);
  font-weight: 700;
  margin-top: 0.2rem;
}

/* "Liten rubrik ovanför" förhandsvisas som på sidan (.eyebrow). */
.red-forhandsvisning--versaler .red-forhandsvisning-text {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ---------- Panelen "Infoga värde" ----------
   Till höger om formuläret på breda skärmar, en fällbar list längst ner
   på smala. Redigera-fliken får då bredare yta än Lag och Efterfest. */

.admin-main:has(#flik-redigera:not([hidden])) { max-width: 1240px; }

.red-arbetsyta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1.2rem;
  align-items: start;
}

.red-varden {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--vit);
  border: 3px solid var(--bla);
  border-radius: var(--rund);
  box-shadow: var(--skugga);
  padding: 1rem;
  font-size: 0.92rem;
}

.red-varden-vaxla { display: none; }

.red-varden-rubrik { font-size: 1.15rem; margin-bottom: 0.3rem; }

.red-varden-instruktion {
  background: var(--gul-blek);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
}

.red-varden-lage { margin-bottom: 0.6rem; color: var(--bla-mork); }

.red-varden-grupp { margin-bottom: 0.7rem; }

.red-varden-grupp h4 {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bla);
  margin-bottom: 0.25rem;
}

.red-varde {
  display: block;
  width: 100%;
  font: inherit;
  text-align: left;
  margin-bottom: 0.25rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--bla);
  border-radius: 8px;
  background: var(--vit);
  color: var(--bla-mork);
  cursor: pointer;
}

.red-varde:hover,
.red-varde:focus-visible { background: var(--gul-blek); }

.red-varde:focus-visible { outline: 3px solid var(--gul); }

.red-varde[aria-disabled="true"] {
  cursor: not-allowed;
  border-style: dashed;
  color: rgba(34, 36, 42, 0.55);
}

.red-varde-namn { display: block; font-weight: 700; }

.red-varde-varde {
  display: block;
  font-size: 0.82rem;
  color: rgba(34, 36, 42, 0.7);
  overflow-wrap: anywhere;
}

.red-varden-grupphjalp,
.red-varden-tips {
  font-size: 0.82rem;
  color: rgba(34, 36, 42, 0.7);
  margin-bottom: 0.3rem;
}

/* Förklaringen som följer musen (placeras från redigera.js). */
.red-forklaring-ruta {
  position: fixed;
  z-index: 50;
  max-width: 18rem;
  padding: 0.6rem 0.8rem;
  background: var(--vit);
  color: #22242a;
  border: 2px solid var(--bla);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(20, 30, 60, 0.18);
  font-size: 0.9rem;
  pointer-events: none;
}

.red-forklaring-ruta[hidden] { display: none; }

.red-forklaring-ruta p { margin-top: 0.25rem; }

.red-forklaring-kod { font-size: 0.82rem; color: rgba(34, 36, 42, 0.7); }

@media (max-width: 1000px) {
  .red-arbetsyta { grid-template-columns: 1fr; }

  /* Fast list längst ner; fälls upp med knappen. */
  .red-varden {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 20;
    max-height: 60vh;
    padding: 0;
    border-width: 3px 0 0;
    border-radius: var(--rund) var(--rund) 0 0;
  }

  .red-varden-vaxla {
    display: block;
    width: 100%;
    font: inherit;
    font-weight: 700;
    padding: 0.7rem 1rem;
    border: 0;
    background: var(--bla);
    color: var(--vit);
    cursor: pointer;
    text-align: left;
  }

  .red-varden-vaxla::after { content: " ▴"; }
  .red-varden--oppen .red-varden-vaxla::after { content: " ▾"; }

  .red-varden-inre { display: none; padding: 1rem; }
  .red-varden--oppen .red-varden-inre { display: block; }
  .red-varden-rubrik { display: none; }

  /* Plats under formuläret så att listen inte täcker Spara-knappen. */
  #flik-redigera { padding-bottom: 4rem; }
}

.red-lista {
  border: 2px solid rgba(30, 74, 148, 0.25);
  border-radius: 10px;
  padding: 0.8rem;
  margin-bottom: 1rem;
}

.red-lista legend { font-weight: 700; color: var(--bla-mork); padding: 0 0.3rem; }

.red-post {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(34, 36, 42, 0.2);
}

/* Fältet (eller fältgruppen) tar all bredd, knapparna ligger längst till höger. */
.red-post > :first-child { flex: 1; min-width: 0; }

.red-post-falt--kompakt {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto auto 1fr;
  gap: 0.5rem;
  align-items: end;
}

@media (max-width: 720px) {
  .red-post-falt--kompakt { grid-template-columns: 1fr 1fr; }
}

.red-post-knappar {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.red-bool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--bla-mork);
  margin-bottom: 1rem;
  cursor: pointer;
}

.red-meddelande { font-weight: 700; color: #1f7a3a; min-height: 1.4em; }

.red-etikett {
  display: block;
  font-weight: 700;
  color: var(--bla-mork);
  margin-bottom: 0.35rem;
}

.red-bild-mini {
  display: block;
  max-width: 240px;
  max-height: 160px;
  width: auto;
  height: auto;
  border: 2px solid var(--bla);
  border-radius: 8px;
  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  margin-bottom: 0.4rem;
}

.red-bild-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0;
}


.red-bild-status { font-size: 0.88rem; font-weight: 700; color: var(--bla-mork); min-height: 1.2em; }

.red-fil-nu { margin: 0.2rem 0; }

.red-bildvagg-bild {
  display: block;
  max-width: 100%;
  height: auto;
  border: 2px solid var(--bla);
  border-radius: 8px;
  margin: 0.4rem 0 0.6rem;
}

.red-bildvagg progress { width: 100%; }

/* ---------- Utskrifter (laglista + namnlista) ---------- */

.print-lista { display: none; }

@media print {
  body.skriv-ut-lista .admin-header,
  body.skriv-ut-lista .admin-main,
  body.skriv-ut-lista .redigera { display: none !important; }

  body.skriv-ut-lista .print-lista { display: block; padding: 0 14mm; }

  /* Ram runt utskriften: tom thead/tfoot upprepas på varje sida och
     ersätter sidmarginalen upptill/nertill (se skrivUt() i admin.js). */
  .print-ram { width: 100%; border-collapse: collapse; }
  .print-ram > * > tr > td { padding: 0; }
  .print-marginal { height: 12mm; }

  .print-lista h1 {
    font-size: 20pt;
    margin-bottom: 4pt;
  }

  .print-under {
    font-size: 10pt;
    color: #444;
    margin-bottom: 12pt;
  }

  .print-lag {
    font-size: 13pt;
    margin: 14pt 0 4pt;
    break-after: avoid;
  }

  .print-betalt {
    font-size: 11pt;
    margin-bottom: 4pt;
    break-after: avoid;
  }

  .print-tabell {
    width: 100%;
    border-collapse: collapse;
  }

  .print-tabell td {
    border-bottom: 0.5pt solid #999;
    padding: 4pt 6pt;
    font-size: 11pt;
    break-inside: avoid;
  }

  .print-nr { width: 2em; color: #666; }

  .print-bokning { width: 4em; text-align: right; color: #444; white-space: nowrap; }

  /* Anmälarens nummer grönt, medföljandes svart. Färgen ska med i PDF:en. */
  .print-bokning--huvud {
    color: #128a2f;
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-allergi { font-size: 9.5pt; color: #333; }

  .print-telefon { font-size: 9.5pt; color: #333; white-space: nowrap; }

  .print-grupp { font-size: 13pt; margin: 1.2em 0 0.4em; }

  .print-ruta-cell { width: 6em; text-align: right; white-space: nowrap; }

  .print-ruta {
    display: inline-block;
    width: 11pt;
    height: 11pt;
    border: 1pt solid #000;
    vertical-align: middle;
  }

  .print-ruta-text { font-size: 9pt; color: #444; }
}