/*
 * Föreningsgåvan — all styling för hela sajten ligger i den här filen.
 * Ingen byggkedja: spara filen och ladda om sidan i webbläsaren, klart.
 *
 * Färger, typsnitt och avstånd styrs av variablerna här under.
 * Ändra dem så slår det igenom överallt.
 */

:root {
    /* Grafisk profil (beslut 2026-09-06): varm skogsgrön + honungsgul accent —
       folkrörelse, värme, trygghet. Medvetet olik Swish (anti-fiske: egen
       identitet) och lugn nog för en äldre demografi. */
    --farg-primar: #2e6b4e;        /* knappar, länkar, accenter */
    --farg-primar-mork: #24543d;   /* hover-läge */
    --farg-accent: #e0a53a;        /* honung — brickor och uppmärksamhet */
    --farg-text: #26313a;
    --farg-text-svag: #5f6b63;
    --farg-bakgrund: #faf9f5;      /* varm off-white */
    --farg-yta: #ffffff;           /* kort, formulär */
    --farg-kant: #ddd8cb;

    --farg-fel: #b3261e;           /* valideringsfel */

    --typsnitt: system-ui, -apple-system, "Segoe UI", sans-serif;
    --radie: 8px;                  /* rundade hörn */
    --maxbredd: 40rem;             /* innehållets maxbredd */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--typsnitt);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--farg-text);
    background: var(--farg-bakgrund);
}

/* --- Sidstruktur ------------------------------------------------------- */

.sidhuvud {
    background: var(--farg-yta);
    border-bottom: 1px solid var(--farg-kant);
    padding: 1rem 1.25rem;
}

.sidhuvud a {
    color: var(--farg-text);
    text-decoration: none;
    font-weight: 700;
}

/* Logotypen: ikonen bredvid namnet (grafisk profil 2026-09-06) */
.logotyp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
}

.logotyp-ikon {
    width: 30px;
    height: 30px;
    display: block;
}

.sidhuvud-meny {
    float: right;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.sidhuvud-meny a {
    font-weight: 400;
}

.sidhuvud-meny form {
    margin: 0;
}

/* Statisk "knapp": ser ut som gåvoknappen givarna möter men är inget att klicka på */
.knapp--statisk,
.knapp--statisk:hover {
    background: var(--farg-primar);
    cursor: default;
}

/* Flyktig banner: syns ~3 sekunder, tonar sedan bort — ingen JavaScript */
.kort--flyktig {
    overflow: hidden;
    max-height: 8rem;
    animation: flyktig-forsvinn 0.6s ease 3s forwards;
}

@keyframes flyktig-forsvinn {
    to {
        opacity: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        border-width: 0;
    }
}

/* Driftlarm/underhållsbanner — ska synas utan att skrika */
.larm-banner {
    border-left: 5px solid #b3261e;
    background: #fdf3f2;
}

/* Testmiljöband (2026-09-12): allra överst, före sidhuvudet, så ingen
   förväxlar lt01/dt01 med skarpa sajten. Honungsgult — uppmärksamhet utan
   larmets rött, som betyder att något är fel. Syns på ALLA sidor utom prod. */
.miljoband {
    background: var(--farg-accent);
    color: #3a2d10;
    text-align: center;
    padding: 0.35rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.miljoband a {
    color: inherit;
}

.miljoband .miljoband-info {
    font-weight: 400;
}

/* Sifferbricka för väntande åtgärder (sidhuvudets Föreningsvy-länk m.m.) */
.notis {
    display: inline-block;
    min-width: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--farg-accent);
    color: var(--farg-text);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
    vertical-align: text-top;
}

/* --- Profilmenyn: details/summary-dropdown uppe till höger, utan JavaScript --- */
.profilmeny {
    position: relative;
}

.profilmeny summary {
    list-style: none; /* göm details-triangeln */
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--farg-text-svag);
}

.profilmeny summary::-webkit-details-marker {
    display: none;
}

.profilmeny[open] summary,
.profilmeny summary:hover {
    color: var(--farg-primar);
}

.profilmeny-lista {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    display: flex;
    flex-direction: column;
    min-width: 10rem;
    padding: 0.4rem 0;
    background: var(--farg-yta);
    border: 1px solid var(--farg-kant);
    border-radius: var(--radie);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.profilmeny-lista a,
.profilmeny-lista .lanklik {
    padding: 0.4rem 1rem;
    font-weight: 400;
    text-decoration: none;
    text-align: left;
}

.profilmeny-lista form {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.profilmeny-lista a:hover,
.profilmeny-lista .lanklik:hover {
    background: var(--farg-bakgrund);
}

/* Knapp som ser ut som en länk (t.ex. logga ut) */
.lanklik {
    font: inherit;
    color: var(--farg-text-svag);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

main {
    max-width: var(--maxbredd);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.sidfot {
    max-width: var(--maxbredd);
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    color: var(--farg-text-svag);
    font-size: 0.875rem;
}

/* --- Typografi --------------------------------------------------------- */

h1, h2, h3 {
    line-height: 1.25;
}

a {
    color: var(--farg-primar);
}

/* --- Kort (vit ruta med kant) ------------------------------------------ */

.kort {
    background: var(--farg-yta);
    border: 1px solid var(--farg-kant);
    border-radius: var(--radie);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

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

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

input, select, textarea {
    width: 100%;
    font: inherit;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--farg-kant);
    border-radius: var(--radie);
    margin-bottom: 1rem;
    background: var(--farg-yta);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--farg-primar);
    outline-offset: 1px;
}

.kort--positiv {
    border-color: var(--farg-primar);
    background: #eef7f1;
}

/* Utvecklarpanelen — ska se ut som verktyg, inte produkt */
.kort--dev {
    border: 2px dashed #b8860b;
    background: #fdf6e3;
}

/* Kryssruta med text bredvid (samtycke m.m.) */
.kryssrad {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400;
    margin-bottom: 1rem;
}

.kryssrad input {
    width: auto;
    margin: 0.3rem 0 0;
}

/* --- Demosidan "Så fungerar det" ----------------------------------------- */
/* Illustrationerna är ren CSS — inga bildfiler. Stilarna nedan ritar en
   stiliserad telefon och webbsida; byt gärna ut mot riktiga illustrationer. */

.demo-steg {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.demo-text {
    flex: 1 1 18rem;
}

.demo-bild {
    flex: 0 0 12rem;
    display: flex;
    justify-content: center;
}

.demo-nr {
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    align-items: center;
    justify-content: center;
    background: var(--farg-primar);
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    margin-right: 0.4rem;
}

.mock-telefon {
    width: 11rem;
    min-height: 14rem;
    border: 3px solid var(--farg-text);
    border-radius: 1.2rem;
    padding: 1.4rem 0.7rem 0.7rem;
    background: var(--farg-bakgrund);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

.mock-webb {
    width: 12rem;
    min-height: 9rem;
    border: 2px solid var(--farg-kant);
    border-top: 1rem solid var(--farg-kant);
    border-radius: 0.5rem;
    padding: 0.8rem;
    background: var(--farg-yta);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mock-webb-rad {
    height: 0.6rem;
    background: var(--farg-kant);
    border-radius: 3px;
}

.mock-webb-rad.kort-rad {
    width: 60%;
}

.mock-qr {
    align-self: center;
    width: 4rem;
    border: 1px solid var(--farg-kant);
    border-radius: 4px;
    background: #fff;
    padding: 0.2rem;
}

.mock-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.mock-webb-knapp,
.mock-knapp {
    background: var(--farg-primar);
    color: #fff;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.mock-falt {
    border: 1px solid var(--farg-kant);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    background: var(--farg-yta);
    color: var(--farg-text-svag);
}

.mock-sms {
    background: var(--farg-yta);
    border: 1px solid var(--farg-kant);
    border-radius: 12px 12px 12px 3px;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.mock-kort-rubrik {
    font-weight: 700;
    font-size: 0.9rem;
}

.mock-kort-rad {
    font-size: 0.8rem;
    color: var(--farg-text);
}

.mock-kort-rad.svag-rad {
    color: var(--farg-text-svag);
    font-size: 0.72rem;
}

.mock-lank {
    font-size: 0.78rem;
    color: var(--farg-primar);
    text-decoration: underline;
    text-align: center;
}

/* --- Startpaketet -------------------------------------------------------- */

.qr-ruta {
    max-width: 260px;
    background: #fff;
    padding: 0.5rem;
    border: 1px solid var(--farg-kant);
    border-radius: var(--radie);
}

.qr-ruta svg {
    display: block;
    width: 100%;
    height: auto;
}

textarea[readonly] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--farg-text-svag);
    background: var(--farg-bakgrund);
}

/* --- Tabeller (föreningsvy, admin) -------------------------------------- */

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

.tabell th,
.tabell td {
    text-align: left;
    padding: 0.4rem 0.75rem 0.4rem 0;
    border-bottom: 1px solid var(--farg-kant);
}

.tabell th {
    font-weight: 600;
    color: var(--farg-text-svag);
    font-size: 0.9rem;
}

/* --- Felmeddelanden ----------------------------------------------------- */

.falt-fel {
    color: var(--farg-fel);
    font-size: 0.9rem;
    margin: 0 0 0.25rem;
}

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

.knapp {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--farg-primar);
    border: none;
    border-radius: var(--radie);
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    text-decoration: none;
}

.knapp:hover {
    background: var(--farg-primar-mork);
}

.knapp--sekundar {
    color: var(--farg-primar);
    background: transparent;
    border: 1px solid var(--farg-primar);
}

.knapp--sekundar:hover {
    color: #fff;
    background: var(--farg-primar);
}

.knapp--diskret {
    color: var(--farg-text-svag);
    background: transparent;
    border: 1px solid var(--farg-kant);
}

.knapp--diskret:hover {
    color: var(--farg-text);
    background: var(--farg-bakgrund);
}

/* Flera knappar i rad (månadens gåvor) */
.knapp-rad {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    align-items: center;
}

.knapp-rad form {
    margin: 0;
}

.svag {
    color: var(--farg-text-svag);
    font-size: 0.9rem;
}

/* Utility-klasser (städpasset 2026-09-05) — ersätter spridda inline-styles */
.falt--kort { margin: 0; width: 10rem; }
.falt--mellan { margin: 0; width: 12rem; }
.falt--brett { margin: 0; width: 20rem; }
.rad--avstand { margin-bottom: 0.5rem; }
.form--inline { display: inline; }
.text--radbruten { white-space: pre-wrap; }

/* Ändamålsval som knappar (radio bakom kulisserna) — ovalda dämpas,
   valt ändamål lyser med mörk kant. Samma gröna knapp som på föreningssidan. */
.knapp-val { display: inline-block; }
.knapp-val input { position: absolute; opacity: 0; pointer-events: none; }
.knapp-val .knapp { opacity: 0.55; cursor: pointer; }
.knapp-val input:checked + .knapp { opacity: 1; outline: 3px solid var(--farg-primar-mork); }
.knapp-val input:focus-visible + .knapp { outline: 3px solid var(--farg-text); }

/* Meddelandevalet (2026-09-07): text i eget-fältet trumfar förslagen — knapparna
   gråas och en hint visas. Rent kosmetiskt (:has) — servern avgör alltid. */
.meddelandeval-hint { display: none; }
.meddelandeval:has(.meddelandeval-falt:not(:placeholder-shown)) .knapp-val .knapp { opacity: 0.25; }
.meddelandeval:has(.meddelandeval-falt:not(:placeholder-shown)) .meddelandeval-hint { display: block; }

/* Mitt givande: aktuella gåvor (att swisha/på väg) lyfts ur det grå */
.nasta-aktuell { color: var(--farg-primar); font-weight: 600; }

/* Det påminnelsen gällde: diskret men omisskännlig honungsram (2026-09-07) */
.kort--aktuell { border: 2px solid var(--farg-accent); }

/* Versionsnumret i sidfoten (punkt 59) — medvetet nästan osynligt */
.sidfot .version { float: right; opacity: 0.55; font-size: 0.8rem; }

/* Föreningsloggor (punkt 13) — publika sidan resp. listraderna */
.forening-logga { display: block; max-height: 72px; max-width: 200px; margin-bottom: 0.5rem; }
.forening-logga--liten { display: inline-block; max-height: 28px; max-width: 90px; margin: 0 0.4rem 0 0; vertical-align: middle; }