/* =====================================================================
   Bokat.se, ny design (variant 1C). All CSS för de nya sidorna.

   1. Värden (färger, hörn, annonshöjder)       7. Kort och sidlayout
   2. Grund                                     8. Annonser
   3. Knappar                                   9. Statussymboler
   4. Sidhuvud (logga, meny, språkval)         10. Formulärfält
   5. Sidfot                                   11. Startsidan
   6. Meddelanden                              12. Svarssidan
                                               13. Textsidor och formulär
                                               14. Gruppens sidor (Funktioner m.fl.)
                                               15. Utskrift
                                               16. Appens sidor (mobileApp*.jsp)
                                               17. Förfrågan (statOccNew.jsp)
                                               18. Gruppens huvudsida (protected/groupInfoNew.jsp)
                                               19. Arkivet, status och inställningar (protected/*New.jsp)
                                               20. Funktioner, forum och bilder (protected/*New.jsp)
                                               21. Ändra aktivitet, deltagare och meddelande (protected/*New.jsp)
                                               22. Statistik (protected/eventStatNew.jsp)

   Brytpunkter: 1140px (menyn blir menyknapp), 1000px (högerspalten hamnar
   under innehållet), 760px (mobil).
   Ändrar du filen: öka bkVersion i WEB-INF/bokat/init.jspf.
   ===================================================================== */

/* ---------- 1. Värden ---------- */
:root{
  --ink:#191C1F; --muted:#5B6066; --soft:#8A8F96; --line:#E4E6E9;
  --bg:#FFFFFF; --card:#F1F2F4; --card-hover:#E6E8EB; --accent:#0666EB; --accent-ink:#0450B8;
  --ja:#2E9E5B; --nej:#D33A2C; --ingen:#F2B731; --kom:#2F7BD9; --betalt:#1E6B3E;
  --r-xl:36px; --r-lg:28px; --r-md:20px; --pill:999px;
  /* Annonsplatsernas reserverade höjd (minsta höjd), så att sidan hoppar så lite som möjligt när annonsen laddas.
     En större annons får alltid plats: platsen växer i stället för att annonsen klipps.
     Holids storlekar: widescreen upp till 980x300, tower upp till 300x600, mobile upp till 320x480. */
  --ad-top:300px; --ad-top-mobil:250px; --ad-tower:600px; --ad-mobil:250px;
}

/* ---------- 2. Grund ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
form{margin:0}
.ic{flex:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.sp{flex:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
@media (max-width:760px){
  .wrap{padding:0 16px}
}

/* ---------- 3. Knappar ----------
   .btn (grå), .btn-dark (svart), .btn-white (vit, för grå bakgrund som .card). Storlek: .btn-sm (liten), .btn-lg (stor). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--pill);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;border:0;cursor:pointer;background:var(--card);color:var(--ink)}
.btn:hover{background:var(--card-hover)}
.btn-soft{background:var(--card);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-white{background:#fff;color:var(--ink)}.btn-white:hover{background:#F7F8F9}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-lg{height:52px;padding:0 26px;font-size:16px}

/* ---------- 4. Sidhuvud ---------- */
.top .wrap{display:flex;align-items:center;gap:28px;height:76px}
.logo{font:700 30px/1 "Barlow Condensed",Inter,sans-serif;letter-spacing:.01em;white-space:nowrap;color:var(--ink)}
.logo b{color:var(--accent)}
.nav{display:flex;gap:4px;min-width:0}
.nav a{padding:9px 14px;border-radius:var(--pill);font-weight:600;font-size:15px;color:var(--muted);white-space:nowrap}
.nav a.on{background:var(--card);color:var(--ink)}
.nav a:hover{color:var(--ink)}
.sprak{margin:0;display:flex;align-items:center;gap:6px;height:40px;padding:0 6px 0 12px;border-radius:var(--pill);background:var(--card);color:var(--muted);flex:none}
.sprak select{border:0;background:none;height:100%;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;padding:0 4px}
.sprak .kod{display:none;font-weight:600;font-size:14px;color:var(--ink)}
.top .loggain{flex:none}
.burger{display:none;width:44px;height:44px;border-radius:var(--pill);background:var(--card);align-items:center;justify-content:center;border:0;cursor:pointer;color:var(--ink);flex:none}
.mnav{display:none}
@media (max-width:1140px){
  .top .wrap{gap:12px}
  .nav{display:none}
  .burger{display:inline-flex}
  .mnav{display:block;border-top:1px solid var(--line);padding:8px 32px 16px}
  .mnav[hidden]{display:none}
  .mnav a{display:block;padding:12px 4px;font-weight:600;border-bottom:1px solid var(--card)}
  .mnav a.on{color:var(--accent)}
}
@media (max-width:760px){
  .top .wrap{height:64px;gap:8px}
  .top .cta{display:none}
  .top.har-meny .loggain{display:none}
  .logo{font-size:26px}
  .mnav{padding:8px 16px 16px}
  /* Språkvalet visar bara koden (SV). Rullistan ligger osynlig ovanpå, så telefonens vanliga väljare öppnas. */
  .sprak{position:relative;padding:0 12px}
  .sprak .kod{display:inline}
  .sprak select{position:absolute;inset:0;width:100%;opacity:0}
}
/* Riktigt smala skärmar (t.ex. 320 px): logga, Logga in och språkval ska rymmas utan att sidan går att skrolla i sidled */
@media (max-width:380px){
  .top .wrap{gap:6px}
  .logo{font-size:23px}
  .top .loggain{padding:0 13px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .fi b{font-size:15px}
  .sprak{padding:0 10px}
  .burger{width:40px;height:40px}
}
/* 340 px och smalare: plats även för längre Logga in (Iniciar sesión, Se connecter) */
@media (max-width:340px){
  .logo{font-size:21px}
  .top .loggain{padding:0 11px;font-size:13px}
}

/* Driftmeddelande högst upp (sidtopp.jspf) */
.drift{background:#FFF6DA;color:#5A4300;font-size:14px;font-weight:500}
.drift .wrap{display:flex;gap:8px;align-items:center;justify-content:center;padding-top:9px;padding-bottom:9px;text-align:center}
.drift .ic{flex:none}
.drift a{color:inherit;text-decoration:underline}

/* ---------- 5. Sidfot ---------- */
.foot{background:var(--card);margin-top:72px;padding:36px 0;font-size:14px;color:var(--muted)}
.foot .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.foot a:hover{color:var(--ink)}
@media (max-width:760px){
  .foot{margin-top:48px}
}

/* ---------- 6. Meddelanden ----------
   <p class="notice ok|err|info">ikon + <span>text</span></p> */
.notice{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;border-radius:16px;padding:12px 16px;font-size:15px;font-weight:500;background:#fff;text-align:left}
.notice .ic{margin-top:2px}
.notice.info{background:#FFF6DA;color:#5A4300}
.notice.err{background:#FDECEA;color:#9B2318}
.notice.ok{background:#E6F4EC;color:#1E6B3E}

/* ---------- 7. Kort och sidlayout ----------
   .page = innehåll + högerspalt (annonser). .page.utan-spalt = bara innehåll. */
.page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-top:24px;padding-bottom:40px;align-items:start}
.page.med-topp{padding-top:10px}
.page.utan-spalt{grid-template-columns:minmax(0,1fr);max-width:880px}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.side{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.side .ad:only-child{position:sticky;top:16px}
.card{background:var(--card);border-radius:32px;padding:30px}
.card h1{margin:0 0 8px;font:800 30px/1.1 Inter,sans-serif;letter-spacing:-.03em}
.card h2{margin:0;font:800 28px/1.1 Inter,sans-serif;letter-spacing:-.03em}
.card .lead{margin:0;color:var(--muted)}
.hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.hd span{color:var(--muted);font-size:14px}
.knappar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.tom{padding:18px;text-align:center;color:var(--muted);background:#fff;border-radius:22px}
@media (max-width:1000px){
  .page{grid-template-columns:minmax(0,1fr)}
  .side{align-items:center}
  .side .ad:not(:first-child){display:none}
}
@media (max-width:760px){
  .page{padding-top:14px;gap:16px}
  .stack{gap:16px}
  .card{padding:20px;border-radius:26px}
  .card h2{font-size:24px}
}

/* ---------- 8. Annonser ----------
   Annonser klipps aldrig: platsen har en minsta höjd och växer om annonsen är större. */
.ad{display:block;margin:0 auto;text-align:center}
.ad-lbl{display:block;height:16px;font-size:10px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.ad .holidAds{display:flex;justify-content:center;max-width:100%}
.ad-widescreen{max-width:1000px;margin-top:4px}
.ad-widescreen .holidAds{min-height:var(--ad-top)}
.ad-tower{width:300px}
.ad-tower .holidAds{min-height:var(--ad-tower)}
.ad-mobile{margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)}
.ad-mobile .holidAds{min-height:var(--ad-mobil)}
.ad-mobile.ad-topp{margin-top:4px}
.ad-mobile.ad-topp .holidAds{min-height:var(--ad-top-mobil)}

/* ---------- 9. Statussymboler (ja, nej, kom, ingen, betalt) ---------- */
.st{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none;vertical-align:middle}
.st.ja{background:var(--ja)}.st.nej{background:var(--nej)}.st.ingen{background:var(--ingen);color:#5A4300}.st.kom{background:var(--kom)}
.st.betalt{background:var(--betalt)}.st b{font-size:10px;font-weight:800}

/* ---------- 10. Formulärfält ----------
   <div class="fld"><label>..</label><input></div>  (på grå bakgrund: vit ruta) */
.fld{flex:1;min-width:0;text-align:left}
.fld label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px 6px}
.fld input,.fld textarea,.fld select{width:100%;height:52px;border-radius:16px;border:2px solid transparent;background:#fff;padding:0 18px;color:var(--ink)}
.fld textarea{height:auto;min-height:96px;padding:12px 18px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--accent);outline:none}

/* =====================================================================
   11. Startsidan (loginNew.jsp)
   ===================================================================== */
.hero{padding:56px 0 24px;text-align:center}
.hero h1{font:800 104px/.98 Inter,sans-serif;letter-spacing:-.045em;margin:0 0 22px}
.hero .lead{font-size:21px;color:var(--muted);max-width:660px;margin:0 auto 32px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.stage{margin:48px auto 0;height:520px;border-radius:40px;background:linear-gradient(135deg,#3B6CF6 0%,#7B5CF5 45%,#F06C9B 100%);position:relative;overflow:hidden}
.phone{position:absolute;left:50%;top:60px;transform:translateX(-50%);width:300px;height:600px;border-radius:44px;background:var(--ink);padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.3);text-align:left}
.scr{background:#fff;border-radius:36px;height:100%;padding:22px 16px;overflow:hidden}
.scr .when{font-size:12px;color:var(--soft);font-weight:600;text-transform:uppercase}
.scr .what{font:800 30px/1.05 Inter,sans-serif;letter-spacing:-.03em;margin:4px 0 12px}
.scr .yn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.scr .yn span{border-radius:var(--pill);height:44px;display:flex;align-items:center;justify-content:center;font-weight:700}
.prow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F1F2F4;font-size:14px;font-weight:500}
.prow{white-space:nowrap}
.prow small{margin-left:auto;color:var(--soft);font-size:12px;white-space:normal;text-align:right;min-width:0;line-height:1.25}
.float{position:absolute;background:#fff;border-radius:24px;padding:16px 18px;box-shadow:0 20px 40px rgba(0,0,0,.18);font-size:15px;display:flex;align-items:center;gap:10px;text-align:left}
.float b{display:block;font:800 34px/1 Inter,sans-serif;letter-spacing:-.03em}
.login{margin:28px auto 0;background:var(--card);border-radius:var(--r-lg);padding:22px 28px}
.login form{display:flex;align-items:flex-end;gap:16px}
.login .intro{flex:1.1;text-align:left}
.login h2{margin:0;font:800 24px/1.2 Inter,sans-serif;letter-spacing:-.02em}
.login p{margin:2px 0 0;color:var(--muted);font-size:14px}
.login .notice{font-weight:600}
.login-links{display:flex;gap:18px;justify-content:center;margin-top:12px;font-size:14px;font-weight:600;color:var(--accent)}
.sec{padding:88px 0 0}
.h2{font:800 60px/1.02 Inter,sans-serif;letter-spacing:-.04em;margin:0 0 14px}
.sub{font-size:19px;color:var(--muted);margin:0 0 36px;max-width:640px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{background:var(--card);border-radius:32px;padding:36px}
.stat b{display:block;font:800 64px/1 Inter,sans-serif;letter-spacing:-.04em}
.stat span{color:var(--muted);font-size:17px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fc{border-radius:var(--r-xl);padding:44px;min-height:420px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.fc.wide{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.wtx .btn{margin-top:4px}.wvis{display:flex;justify-content:flex-end}.wide .mcard{max-width:420px}
.fc h3{font:800 40px/1.05 Inter,sans-serif;letter-spacing:-.03em;margin:0 0 10px}
.fc p{font-size:17px;margin:0 0 22px;max-width:440px}
.fc .lnk{font-weight:700;display:inline-flex;gap:6px;align-items:center;align-self:flex-start}
.fc .vis{margin-top:auto;padding-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.g1{background:var(--card)}
.g2{background:var(--ink);color:#fff}.g2 p{color:#B9BEC4}
.g3{background:linear-gradient(160deg,#E7F0FF,#CFE0FF)}
.g4{background:linear-gradient(160deg,#FFF0E5,#FFD9C2)}
.chip{background:#fff;border-radius:var(--pill);padding:10px 16px;font-weight:600;font-size:15px;box-shadow:0 1px 2px rgba(0,0,0,.05);display:inline-flex;align-items:center;gap:8px}
.g2 .chip{background:#2A2E33;color:#fff}
.mcard{background:#fff;border-radius:24px;padding:18px;width:100%;max-width:400px;box-shadow:0 14px 30px rgba(0,0,0,.08);color:var(--ink)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{background:var(--card);border-radius:24px;padding:24px;font-weight:600;font-size:17px;counter-increment:s}
.steps li::before{content:counter(s);display:flex;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px}
.fl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fi{background:var(--card);border-radius:24px;padding:22px;display:block}
.fi:hover{background:var(--card-hover)}
.fi .i{width:44px;height:44px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.fi b{display:block;font-size:16px;overflow-wrap:break-word;hyphens:auto}
.quote{margin:0;background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:56px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.quote img{width:120px;height:120px;border-radius:50%;object-fit:cover;background:#2A2E33}
.quote p{margin:0;font:700 38px/1.15 Inter,sans-serif;letter-spacing:-.03em}
.quote small{display:block;color:#B9BEC4;font-size:16px;margin-top:14px}
@media (max-width:760px){
  .hero{padding:24px 0 8px}
  .hero h1{font-size:clamp(36px,13vw,50px)}
  .hero .lead{font-size:17px;margin-bottom:24px}
  .ctas .btn{flex:1 1 100%}
  .stage{height:400px;border-radius:28px;margin-top:28px}
  .phone{width:240px;height:480px;top:36px}
  .float{display:none}
  .login{border-radius:24px;padding:20px}
  .login form{flex-direction:column;align-items:stretch;gap:12px}
  .login .btn{width:100%}
  .sec{padding-top:56px}
  .h2{font-size:38px}
  .sub{font-size:16px;margin-bottom:22px}
  .stats{grid-template-columns:1fr;gap:10px}
  .stat{padding:24px;border-radius:24px}
  .stat b{font-size:44px}
  .feat{grid-template-columns:minmax(0,1fr);gap:14px}
  .fc.wide{grid-template-columns:minmax(0,1fr);gap:24px}
  .wtx .btn{width:100%}.wvis{justify-content:stretch}
  .fc{min-height:0;padding:28px;border-radius:28px}
  .fc h3{font-size:30px}
  .steps{grid-template-columns:1fr;gap:10px}
  .fl{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fi:last-child{grid-column:1/-1}
  .fi{padding:16px}
  .quote{grid-template-columns:1fr;padding:30px;border-radius:28px;gap:18px}
  .quote img{width:72px;height:72px}
  .quote p{font-size:24px}
}

/* =====================================================================
   12. Svarssidan (statNew.jsp)
   ===================================================================== */
/* Aktiviteten */
.ev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.ev.utan-datum{grid-template-columns:minmax(0,1fr)}
.bigdt{background:#fff;border-radius:24px;width:96px;padding:12px 0;text-align:center;line-height:1.1}
.bigdt .w{font-weight:700;font-size:13px;color:var(--accent);text-transform:uppercase}
.bigdt .d{font:800 44px/1 Inter,sans-serif;letter-spacing:-.03em;margin:4px 0}
.bigdt .m{font-weight:600;font-size:13px;color:var(--muted);text-transform:uppercase}
.ev h1{font:800 48px/1.02 Inter,sans-serif;letter-spacing:-.04em;margin:0 0 12px;overflow-wrap:anywhere}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.meta span{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:var(--pill);padding:7px 14px;font-weight:500;font-size:14px}
.meta span.varn{background:#FDECEA;color:#9B2318}
.meta:empty{display:none}
/* Sista svarsdag: ruta över hela bredden. .snart = mindre än ett dygn kvar. */
.osa{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:13px 18px;border-radius:16px;background:#E7F0FF;color:var(--accent-ink);font-weight:600;font-size:16px}
.osa .ic{flex:none}
.osa.snart{background:#FFF1DE;color:#8A4B00}
.msg{margin-top:18px;background:#fff;border-radius:20px;padding:16px 18px;overflow-wrap:anywhere}
.msg small{display:block;color:var(--soft);font-weight:600;font-size:13px;margin-bottom:2px}
.msg a.las{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;color:var(--accent)}
.msg .full a{color:var(--accent);text-decoration:underline}

/* Svaret */
.answer{margin-top:16px;background:#fff;border:2px solid #E2E5E9;border-radius:28px;padding:26px;scroll-margin-top:16px}
.answer h2{font-size:28px}
.answer .now{display:flex;align-items:center;gap:8px;margin:6px 0 18px;color:var(--muted);font-size:15px}
.answer .now strong{color:var(--ink)}
.answer .notice{margin:0 0 16px}
.answer label.l{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px 4px}
.answer .f{margin-bottom:14px}
.answer input[type=text],.answer input[type=number],.answer textarea{width:100%;border:2px solid transparent;background:var(--card);color:var(--ink);border-radius:18px;padding:12px 16px;font-size:16px}
.answer textarea{min-height:52px;resize:vertical;line-height:1.4}
.answer input:focus,.answer textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.answer input.fel{border-color:var(--nej)}
.answer input[type=number]{width:90px;text-align:center}
.gast{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;color:var(--muted);font-size:15px}
.gast label{flex:1 1 100%;font-size:13px;font-weight:600;margin-left:4px}
.gast input[disabled]{opacity:.55;cursor:not-allowed}
.val{border:0;margin:0 0 14px;padding:0}
.val legend{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px 4px;padding:0}
.val .opts{display:flex;flex-wrap:wrap;gap:8px}
.val label{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:2px solid transparent;border-radius:var(--pill);padding:8px 15px;font-weight:600;font-size:15px;cursor:pointer}
.val input{accent-color:var(--accent);margin:0}
.val label:has(input:checked){background:#E7F0FF;border-color:var(--accent);color:var(--accent-ink)}
.big2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.bigb{height:58px;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:18px;white-space:nowrap;padding:0 12px;border:2px solid transparent;cursor:pointer}
.bigb.ja{background:var(--ja);color:#fff}
.bigb.ja:hover{background:#278A4F}
.bigb.nej{background:#fff;color:var(--nej);border-color:#F1C4BF}
.bigb.nej:hover{background:#FDF3F2}
.bigb.vald{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--accent)}
.bigb[disabled]{opacity:.35;cursor:not-allowed}
.bara{display:flex;margin:12px auto 0;width:100%;max-width:340px}
.lank{background:var(--card);border-radius:18px;padding:14px 16px;margin:0 0 16px}
.lank p{margin:0 0 8px;font-size:14px;color:var(--muted)}
.lank .rad{display:flex;gap:8px}
.lank input{flex:1;min-width:0;height:40px;border-radius:var(--pill);border:0;background:#fff;color:var(--ink);padding:0 14px;font-size:14px}
.betala{margin-top:16px;background:#fff;border-radius:22px;padding:18px 20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.betala p{margin:0;flex:1;min-width:220px;font-size:15px}
.notis{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top:12px;padding:10px 12px 10px 18px;background:#fff;border-radius:var(--pill);font-size:14px;color:var(--muted);scroll-margin-top:16px}
.notis span{display:inline-flex;align-items:center;gap:8px}
.notis .btn{background:var(--card)}

/* Status för inbjudna */
.stiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 8px}
.stiles.fem{grid-template-columns:repeat(5,minmax(0,1fr))}
.stile{background:#fff;border-radius:20px;padding:14px;display:flex;align-items:center;gap:12px;border:2px solid transparent;cursor:default;text-align:left;min-width:0}
button.stile{cursor:pointer}
button.stile:hover{border-color:#D6D9DD}
.stile.on{border-color:var(--ink)}
.stile b{font:800 30px/1 Inter,sans-serif;letter-spacing:-.03em;display:block}
.stile .st b{font:800 10px/1 Inter,sans-serif;letter-spacing:0;display:inline}
.stile b small{font-size:15px;font-weight:700;color:var(--muted);letter-spacing:0;margin-left:6px;vertical-align:5px}
.stile span.t{font-size:12px;color:var(--muted);font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.summa{color:var(--muted);font-size:14px;margin:4px 0 14px}
.ltool{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.srch{flex:1;min-width:200px;height:44px;border-radius:var(--pill);background:#fff;display:flex;align-items:center;gap:8px;padding:0 16px;color:var(--soft)}
.srch input{border:0;outline:0;background:none;flex:1;min-width:0;height:100%;color:var(--ink);font-size:15px}
.sort{display:flex;align-items:center;gap:6px;height:44px;border-radius:var(--pill);background:#fff;padding:0 6px 0 16px;font-size:14px;font-weight:600}
.sort select{border:0;background:none;font-weight:600;font-size:14px;height:100%;padding:0 6px;cursor:pointer}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;background:#fff;border-radius:22px;overflow:hidden}
.tbl th{text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);padding:12px 14px;border-bottom:1px solid #EDEEF0;font-weight:600}
.tbl td{padding:11px 14px;border-bottom:1px solid #F4F5F6;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.s{width:56px}
.tbl td.n{font-weight:600;width:30%;overflow-wrap:anywhere}
.tbl td.n small{display:block;font-weight:400;color:#9AA0A6;font-size:12px}
/* Har någon rad ett svarsdatum blir alla rader minst lika höga som en rad med namn och datum */
.tbl.med-datum td.n{height:62px}
.tbl td.g{white-space:nowrap;color:var(--muted);font-weight:600;width:60px}
.tbl td.k{color:var(--muted);font-size:14px;overflow-wrap:anywhere;white-space:pre-line}
.tbl td.b{width:64px}
.tbl td.b img{height:45px;border-radius:10px;display:block}
.tbl .du{font-size:11px;background:#E7F0FF;color:var(--accent-ink);border-radius:var(--pill);padding:2px 8px;margin-left:6px;vertical-align:1px}
/* Varannan rad lite mörkare. JavaScript räknar om när listan filtreras. */
.tbl tbody tr:nth-child(even){background:#F5F6F8}
.tbl.zebra-js tbody tr{background:none}
.tbl.zebra-js tbody tr.alt{background:#F5F6F8}
.tbl tbody tr.me,.tbl.zebra-js tbody tr.me{background:#EAF1FF}
.koppla{color:var(--soft);font-size:13px;margin:18px 0 0}
.koppla a{text-decoration:underline}

/* Omröstning */
.res{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px}
.bar{background:#fff;border-radius:16px;padding:12px 14px}
.bar .r{display:flex;justify-content:space-between;gap:10px;font-weight:600;font-size:15px}
.bar .r span{color:var(--muted);white-space:nowrap}
.bar .t{height:8px;border-radius:99px;background:var(--card);margin-top:8px;overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--ja);border-radius:99px}

/* Chatt */
.c1{padding:12px 0;border-bottom:1px solid #E4E6E9}
.c1 b{font-size:14px}.c1 small{color:#9AA0A6;margin-left:6px}
.c1 p{margin:2px 0 0;font-size:15px;overflow-wrap:anywhere;white-space:pre-line}
.skriv{display:flex;gap:8px;margin-top:14px}
.skriv input{flex:1;min-width:0;height:48px;border-radius:var(--pill);border:2px solid transparent;background:#fff;padding:0 18px}
.skriv input:focus{outline:none;border-color:var(--accent)}

/* Hela inbjudningstexten */
.text h1{font:800 44px/1.05 Inter,sans-serif;letter-spacing:-.04em;margin:0 0 18px;overflow-wrap:anywhere}
.text .full{background:#fff;border-radius:22px;padding:22px 24px;font-size:17px;line-height:1.6;overflow-wrap:anywhere}
.text .full a{color:var(--accent);text-decoration:underline}

@media (max-width:760px){
  .ev{grid-template-columns:minmax(0,1fr);gap:12px}
  .bigdt{display:flex;gap:8px;align-items:baseline;width:auto;justify-self:start;padding:8px 16px}
  .bigdt .d{font-size:24px;margin:0}
  .ev h1{font-size:34px}
  .answer{padding:20px;border-radius:24px}
  .answer h2{font-size:26px}
  .bigb{height:58px;font-size:17px;gap:6px}
  .bigb .ic{width:22px;height:22px}
  .notis{border-radius:20px;padding:12px 14px}
  .notis .btn{width:100%}
  .stiles,.stiles.fem{grid-template-columns:1fr 1fr}
  .stile{padding:12px}
  .stile b{font-size:26px}
  .sort{width:100%;justify-content:space-between}
  .tbl thead{display:none}
  .tbl,.tbl tbody{display:block}
  .tbl tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:11px 14px;border-bottom:1px solid #F4F5F6}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{border:0;padding:0;width:auto}
  .tbl td.s{grid-row:span 2;align-self:center;width:auto}
  .tbl td.n{width:auto}
  .tbl td.g{grid-column:3;grid-row:1}
  .tbl td.k{grid-column:2/4}
  .tbl td.k:empty{display:none}
  .tbl td.b{grid-column:3;grid-row:1/3;align-self:center}
  .tbl.med-datum td.n{height:auto}
  .tbl.med-datum tr{min-height:64px;align-content:center}
  .text h1{font-size:32px}
  .text .full{padding:18px;font-size:16px}
}

/* =====================================================================
   13. Textsidor och formulär (Om Bokat.se, villkor, tipsa en vän)
   .prose = löptext i ett kort. .falt = formulär med fält under varandra.
   .kontakt = rutnät med kontaktuppgifter.
   ===================================================================== */
.prose p{margin:14px 0 0;max-width:68ch}
.prose h2{margin-top:28px;font-size:21px;letter-spacing:-.02em}
.prose h2 + p{margin-top:8px}
.prose ul{margin:8px 0 0;padding-left:22px;max-width:68ch}
.prose li{margin:4px 0}
.prose .knappar{margin-top:20px}
.prose a.btn{color:var(--ink);text-decoration:none}
.prose a,.kontakt a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.falt{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.falt .knappar{margin-top:4px}
.fld input[aria-invalid],.fld textarea[aria-invalid]{border-color:#C9372C}
.kontakt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.kontakt > div{background:#fff;border-radius:22px;padding:18px 20px;line-height:1.5;overflow-wrap:anywhere}
.kontakt b{display:block;margin-bottom:4px}
.kontakt span{color:var(--muted)}
@media (max-width:760px){
  .kontakt{grid-template-columns:minmax(0,1fr)}
  .prose h2{font-size:19px}
}

/* =====================================================================
   14. Gruppens sidor: Funktioner (admin.jsp), forum, inställningar, skicka mejl
   .lankar = lista med länkar (ikon, rubrik, text, pil). .kod = verifieringskod (bild + fält).
   .mottagare = kryssrutor för mottagare. .hjalp = liten hjälptext under ett fält.
   ===================================================================== */
.lankar{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.lankar a{display:flex;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:14px 18px;color:var(--ink)}
.lankar a:hover{box-shadow:0 0 0 2px var(--accent) inset}
.lankar .ikon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--accent-ink)}
.lankar .txt{flex:1;min-width:0}
.lankar b{display:block;font-size:16px}
.lankar small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.lankar a > .ic:last-child{flex:none;color:var(--soft)}
.hjalp{margin:6px 0 0 6px;font-size:13px;color:var(--muted)}
.kod{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.kod img{border-radius:12px;background:#fff;display:block;height:52px;width:auto}
.kod .fld{min-width:180px}
.mottagare{border:0;margin:0;padding:0;min-width:0}
.mottagare legend{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px 6px;padding:0}
.mottagare .knappar{margin-bottom:8px}
.mottagare .mlista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;background:#fff;border-radius:22px;padding:12px}
.mottagare label{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;cursor:pointer;font-size:15px;min-width:0}
.mottagare label:hover{background:var(--card)}
.mottagare label span:last-child{overflow-wrap:anywhere}
.mottagare input{width:18px;height:18px;flex:none;accent-color:var(--accent)}

/* Bildalbum, bildvisare och personlig bild */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:18px}
.album figure{margin:0;background:#fff;border-radius:20px;padding:8px;min-width:0}
.album img{display:block;width:100%;height:150px;object-fit:cover;border-radius:14px;background:var(--card)}
.album figcaption{font-size:13px;color:var(--muted);padding:8px 4px 2px;overflow-wrap:anywhere}
.album figcaption small{display:block;color:var(--soft);font-size:12px}
.bildvisare{position:fixed;inset:0;z-index:50;background:rgba(17,18,20,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}
.bildvisare[hidden]{display:none}
.bildvisare img{max-width:100%;max-height:78vh;border-radius:16px;background:#fff}
.bildvisare p{margin:0;color:#fff;font-size:15px;text-align:center;max-width:640px}
.bildvisare [data-stang]{position:absolute;top:16px;right:16px}
.minbild{display:flex;align-items:center;gap:16px;margin-top:18px;background:#fff;border-radius:22px;padding:14px 16px}
.minbild img{height:96px;width:auto;border-radius:14px;display:block}
.minbild b{display:block;margin-bottom:8px}
.minbild small{display:block;color:var(--muted)}
.minbild .tom-bild{width:64px;height:64px;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--soft);flex:none}
.minbild form .btn{margin:0}
.fld input[type=file]{height:auto;padding:12px 18px;font-size:14px}

/* =====================================================================
   15. Utskrift. Sidhuvud, sidfot, knappar och annonser skrivs inte ut.
   ===================================================================== */
@media print{
  .drift,.top,.foot,.knappar,.ad,.side{display:none !important}
  body{background:#fff}
  .page{display:block;padding:0}
  .card{background:#fff;padding:0;border-radius:0}
  .tbl{border:1px solid #ccc;border-radius:0}
  .tbl tbody tr:nth-child(even){background:#f3f3f3}
}

/* =====================================================================
   16. Appens sidor (visas bara i Bokat-appens webbvy, html.app)
   Skärmens kanter med env(safe-area-inset-*), ingen zoom vid dubbeltryck, ingen blå tryckmarkering.
   .apphd = rubrik, .flikar = Kommande/Tidigare, .chips = filter per grupp, .dag = en dag, .akt = en aktivitet.
   ===================================================================== */
html.app{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
.app body,body.app{background:var(--bg);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.app a,.app button{touch-action:manipulation}
.app .wrap{padding-left:16px;padding-right:16px}
.appsida{padding-top:14px;padding-bottom:32px;display:flex;flex-direction:column;gap:14px}
.apphd h1{margin:0;font:800 32px/1.1 Inter,sans-serif;letter-spacing:-.03em}
.apphd p{margin:4px 0 0;color:var(--muted);font-size:15px}
.flikar{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-radius:var(--pill);padding:4px}
.flikar a{text-align:center;padding:10px 12px;border-radius:var(--pill);font-weight:600;font-size:15px;color:var(--muted)}
.flikar a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;border:0;background:var(--card);color:var(--ink);font:600 14px/1 Inter,sans-serif;padding:10px 14px;border-radius:var(--pill);cursor:pointer;white-space:nowrap}
.chips button.on{background:var(--ink);color:#fff}
.dag{display:flex;flex-direction:column;gap:8px}
.dag[hidden]{display:none}
.dag h2{margin:10px 4px 2px;font:700 14px/1.2 Inter,sans-serif;color:var(--muted);text-transform:none}
.akt{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:22px;padding:14px 16px;color:var(--ink);min-height:76px}
.akt[hidden]{display:none}
.akt:active{background:var(--card-hover)}
.akt.obesvarad{box-shadow:inset 4px 0 0 var(--accent)}
.akt .tid{flex:none;width:52px;text-align:center}
.akt .tid b{display:block;font:800 18px/1.1 Inter,sans-serif;letter-spacing:-.02em}
.akt .tid small{display:block;color:var(--soft);font-size:12px;margin-top:2px}
.akt .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.akt .grupp{font-size:12px;font-weight:600;color:var(--accent-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akt .namn{font:700 17px/1.25 Inter,sans-serif;overflow-wrap:anywhere}
.akt .rad{font-size:13px;color:var(--muted)}
.akt .etikett{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:4px;font-size:12px;font-weight:600;background:#fff;color:var(--muted);border-radius:var(--pill);padding:4px 9px}
.akt .etikett.osa-liten{background:#E7F0FF;color:var(--accent-ink)}
.akt .etikett.osa-liten.snart{background:#FFF1DE;color:#8A4B00}
.akt .etikett.full{background:#FDECEA;color:#9B2318}
.akt .minst{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;text-align:center}
.akt .minst small{font-size:11px;color:var(--muted);line-height:1.2}
.tomlista{text-align:center;padding:36px 24px}
.tomlista .ic{color:var(--soft)}
.tomlista h2{margin:10px 0 6px;font-size:20px}
.app .ad{margin-top:4px;margin-bottom:4px}
.apptillbaka{padding-top:10px}
.apptillbaka a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--accent-ink);padding:8px 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .page{padding-top:6px}

/* =====================================================================
   17. Förfrågan (statOccNew.jsp, statOccMobile.jsp)
   .alts = alternativen (.alt) med datum (.alt-dt), text (.alt-txt), vilka som svarat (.alt-vem) och
   Ja/Nej/Inget svar (.alt-val: radioknappar med etiketter som knappar). .alt-man = månadsrubrik.
   .matris = alla svar i en tabell (namn x alternativ), rullar i sidled. .bast = flest ja.
   ===================================================================== */
.meta span.bast{background:#E3F4EA;color:#1E6B3E}
.alts-fs{border:0;margin:0 0 16px;padding:0;min-width:0}
.alts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.alt-man{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin:12px 0 0 8px}
.alt-man:first-child{margin-top:0}
.alts > .alt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--card);border-radius:22px;padding:12px 14px;border:2px solid transparent}
.alts > .alt.bast{border-color:#BFE3CC}
.alts > .alt:has(input[value=yes]:checked){background:#EAF6EF}
.alts > .alt:has(input[value=no]:checked){background:#FBEDEC}
.alt-dt{width:58px;background:#fff;border-radius:16px;padding:6px 0;text-align:center;line-height:1.1;display:flex;flex-direction:column;align-self:start}
.alt-dt .w{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase}
.alt-dt .d{font:800 24px/1 Inter,sans-serif;letter-spacing:-.02em;margin:2px 0}
.alt-dt .m{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase}
.alt-dt.nr .d{margin:8px 0;color:var(--muted)}
.alt-txt{min-width:0}
.alt-txt > b{display:block;font-size:17px;overflow-wrap:anywhere}
.alt-txt > .sub{display:block;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.alt-vem{margin-top:6px;font-size:13px}
.alt-vem summary{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;list-style:none;color:var(--muted);font-weight:600}
.alt-vem summary::-webkit-details-marker{display:none}
.alt-vem summary:hover .alt-n{color:var(--ink);text-decoration:underline}
.alt-bar{display:flex;width:72px;height:6px;border-radius:99px;background:#fff;overflow:hidden}
.alt-bar i{display:block;height:100%}
.alt-bar .ja{background:var(--ja)}
.alt-bar .nej{background:var(--nej)}
.pill-bast{display:inline-flex;align-items:center;gap:4px;background:#E3F4EA;color:#1E6B3E;border-radius:var(--pill);padding:2px 8px;font-size:12px;font-weight:700}
.alt-namn{margin-top:6px;background:#fff;border-radius:14px;padding:8px 12px;color:var(--muted);overflow-wrap:anywhere}
.alt-namn p{margin:2px 0}
.alt-namn b.ja{color:var(--ja)}
.alt-namn b.nej{color:var(--nej)}
.alt-val{display:flex;gap:6px}
.alt-val input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.alt-val label{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 14px;border-radius:var(--pill);background:#fff;border:2px solid #E2E5E9;font-weight:700;font-size:15px;cursor:pointer;color:var(--muted);user-select:none}
.alt-val label:hover{border-color:#C9CDD2;color:var(--ink)}
.alt-val label.ingen{padding:0;width:44px}
.alt-val input:checked + label.ja{background:var(--ja);border-color:var(--ja);color:#fff}
.alt-val input:checked + label.nej{background:var(--nej);border-color:var(--nej);color:#fff}
.alt-val input:checked + label.ingen{border-color:var(--ink);color:var(--ink)}
.alt-val input:focus-visible + label{outline:3px solid var(--accent);outline-offset:2px}
/* Spara-knappen följer med längst ner i rutan när listan är lång */
.spara{position:sticky;bottom:0;z-index:2;display:flex;justify-content:center;padding:14px 0 calc(4px + env(safe-area-inset-bottom));margin-top:4px;background:linear-gradient(rgba(255,255,255,0),#fff 35%)}
.spara .btn{min-width:260px}

/* Alla svar */
.matris-wrap{position:relative;overflow-x:auto;background:#fff;border-radius:22px;margin-top:14px}
.matris{border-collapse:separate;border-spacing:0;font-size:14px;min-width:100%}
.matris th,.matris td{padding:10px 12px;border-bottom:1px solid #F1F2F4;text-align:center;white-space:nowrap;vertical-align:middle}
.matris thead th{font-size:12px;color:var(--muted);font-weight:600;vertical-align:bottom;line-height:1.3}
.matris thead th span{display:block}
.matris thead th b{display:block;color:var(--ink);font-size:14px}
.matris .namn{text-align:left;position:sticky;left:0;z-index:1;background:#fff;font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;box-shadow:1px 0 0 #F1F2F4}
.matris thead .namn{vertical-align:bottom}
.matris .k{text-align:left;white-space:normal;min-width:200px;color:var(--muted);overflow-wrap:anywhere}
.matris .bast{background:#F1FAF4}
.matris tr.me > *{background:#EAF1FF}
.matris .du{font-size:11px;background:#fff;color:var(--accent-ink);border-radius:var(--pill);padding:2px 8px;margin-left:6px;vertical-align:1px}
.matris .st{vertical-align:middle}
.matris .m-kom{display:inline-flex;margin-left:2px;color:var(--soft);vertical-align:middle}
.matris tbody tr:last-child > *{border-bottom:0}
.matris tfoot > tr > *{border-top:1px solid #E4E6E9;border-bottom:0}
.matris tfoot b{display:block;font:800 18px/1.1 Inter,sans-serif;color:var(--ja)}
.matris tfoot small{color:var(--muted);font-size:12px}

@media (max-width:760px){
  .alts > .alt{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:12px}
  .alt-dt{width:52px}
  .alt-val{grid-column:1/-1}
  .alt-val label{flex:1}
  .alt-val label.ingen{flex:none;width:52px}
  .spara .btn{width:100%;min-width:0}
  .matris th,.matris td{padding:9px 10px}
  .matris .namn{max-width:120px}
}

/* =====================================================================
   18. Gruppens huvudsida i inloggat läge (protected/groupInfoNew.jsp)
   .gi-akts = aktiviteterna (.gi-akt: datum, text och knappar, .gi-mer = menyn med Kopiera/Arkivera/Radera).
   .gi-medl = medlemmarna. .gi-andra = formuläret för en medlem. .gi-lagg = lägg till en eller flera.
   ===================================================================== */
.gi-topp{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.gi-topp h1{margin:0;font:800 44px/1.05 Inter,sans-serif;letter-spacing:-.04em;overflow-wrap:anywhere;min-width:0}
.gi-nya{display:flex;gap:10px;flex-wrap:wrap}
.gi-tom .gi-nya{justify-content:center}
.gi-sort{display:inline-grid;grid-template-columns:auto auto}
.gi-sort a{padding:8px 16px;font-size:14px}
.gi-tom{margin-top:16px;padding:28px 20px}
.gi-tom b{display:block;color:var(--ink);font-size:18px}
.gi-tom p{margin:6px auto 16px;max-width:520px}
.gi-akts{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.gi-akt{display:flex;align-items:center;gap:10px;background:#fff;border-radius:22px;padding:10px 12px 10px 10px}
.gi-akt:hover{box-shadow:0 0 0 2px #D6D9DD inset}
.gi-akt-info{flex:1;min-width:0;display:flex;align-items:center;gap:14px;color:var(--ink)}
.gi-akt .alt-dt{background:var(--card);align-self:center}
.gi-akt-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.gi-akt-txt > b{font-size:17px;overflow-wrap:anywhere}
.gi-rad{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;color:var(--muted)}
.gi-rad .ic{vertical-align:-2px}
.gi-svar .ja{color:#1E6B3E;font-weight:600}
.gi-svar .nej{color:#9B2318;font-weight:600}
.gi-utskick{display:block;font-size:13px;color:var(--soft)}
.gi-etikett{display:inline-flex;align-items:center;gap:4px;background:#E7F0FF;color:var(--accent-ink);border-radius:var(--pill);padding:1px 8px;font-size:12px;font-weight:700}
.gi-akt-knappar{display:flex;gap:6px;flex:none;align-items:center}
.gi-akt-knappar .btn,.gi-medl-knappar .btn{background:var(--card)}
.gi-akt-knappar .btn:hover,.gi-medl-knappar .btn:hover{background:var(--card-hover)}
.gi-mer{position:relative}
.gi-mer summary{list-style:none;padding:0;width:40px}
.gi-mer summary::-webkit-details-marker{display:none}
.gi-meny{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:#fff;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:6px;min-width:180px;display:flex;flex-direction:column}
.gi-meny button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 14px;border-radius:10px;font-weight:600;font-size:15px;cursor:pointer;color:var(--ink)}
.gi-meny button:hover{background:var(--card)}
.gi-meny button.farlig{color:var(--nej)}
.gi-lank{color:var(--accent-ink);font-weight:600}
.gi-medl{list-style:none;margin:14px 0 0;padding:0;background:#fff;border-radius:22px;overflow:hidden}
.gi-medl li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #F1F2F4;scroll-margin-top:16px}
.gi-medl li:last-child{border-bottom:0}
.gi-medl li.andras{background:#EAF1FF;border-bottom:0}
.gi-medl li.gi-andra-li{display:block;padding:0 10px 12px;background:#EAF1FF}
.gi-medl li.gi-andra-li .gi-andra{margin-top:0}
.gi-bild{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.gi-bild img{width:100%;height:100%;object-fit:cover;display:block}
.gi-bild.tom-bild{background:var(--card);color:var(--muted);font-weight:700;font-size:14px}
.gi-medl-txt{flex:1;min-width:0}
.gi-medl-txt b{font-size:15px;overflow-wrap:anywhere}
.gi-medl-txt small{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.gi-kat{display:inline-block;margin-left:8px;background:var(--card);color:var(--muted);border-radius:var(--pill);padding:1px 8px;font-size:12px;font-weight:600;vertical-align:1px}
.gi-felmail{display:inline-flex;align-items:center;gap:4px;margin-top:2px;color:#9B2318;font-size:12px;font-weight:700}
.gi-medl-knappar{display:flex;gap:6px;flex:none}
.gi-tabort{width:40px;padding:0}
.gi-tabort:hover{color:var(--nej)}
.gi-mail{margin-top:14px}
.gi-mail summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:14px;color:var(--accent-ink)}
.gi-mail .lank{margin:8px 0 0;background:#fff}
.gi-mail .lank input{background:var(--card)}
.gi-andra{margin-top:12px;background:#fff;border:2px solid var(--accent);border-radius:20px;padding:14px 16px;scroll-margin-top:16px}
.gi-andra h3{margin:0;font-size:17px;letter-spacing:-.01em}
.gi-andra h4{margin:12px 0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--soft)}
.gi-andra .hjalp{margin-top:2px}
.gi-andra .fld label{margin-bottom:4px;font-size:12px}
.gi-andra .fld input,.gi-andra .fld select{height:42px;border-radius:12px;padding:0 12px;font-size:15px}
.gi-andra .knappar{margin-top:12px}
.gi-merfalt{margin-top:10px}
.gi-merfalt summary,.gi-flera summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;font-size:14px;color:var(--accent-ink)}
.gi-andra .fld input,.gi-andra .fld select{background:var(--card)}
.gi-falt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;margin-top:8px}
.gi-falt .hel{grid-column:1/-1}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* Lägg till medlemmar: en rad med namn, e-post, kategori och knapp. Flera samtidigt fälls ut. */
.gi-lagg-kort{padding:20px 24px}
.gi-lagg-kort h2{font-size:22px}
.gi-lagg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:12px}
.gi-lagg .fld label,.gi-flera .fld label{margin-bottom:4px;font-size:12px}
.gi-lagg .fld input,.gi-lagg .fld select{height:44px;border-radius:14px;padding:0 14px;font-size:15px}
.gi-lagg .btn{height:44px}
.gi-flera{margin-top:10px}
.gi-flera form{margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.gi-flera .fld{width:100%}
.gi-flera textarea{min-height:72px}
@media (max-width:760px){
  .gi-topp h1{font-size:32px}
  .gi-topp .btn{width:100%}
  .gi-nya{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .gi-nya .btn{padding:6px 10px;white-space:normal;height:auto;min-height:48px;line-height:1.2;text-align:center;min-width:0}
  .gi-akt{flex-wrap:wrap;padding:12px}
  .gi-akt-knappar{width:100%;justify-content:flex-end}
  .gi-akt-knappar > .btn{flex:1}
  .gi-falt,.gi-lagg{grid-template-columns:minmax(0,1fr)}
  .gi-lagg .btn{width:100%}
  .gi-lagg-kort{padding:18px}
  .gi-medl li{padding:10px 12px}
  .gi-kat{margin:2px 0 0;display:table}
}

/* =====================================================================
   19. Arkivet, status och inställningar i inloggat läge
   (protected/eventArchiveNew.jsp, eventInfoNew.jsp, occInfoNew.jsp, modifyGroupNew.jsp)
   .gi-tillbaka = länken tillbaka till gruppen. .ei-plan = utskicken. .ei-tbl = de inbjudna med formulär per rad.
   .mg-rutnat = inställningarnas små kort två och två.
   ===================================================================== */
.gi-tillbaka{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--accent-ink);margin:0 0 8px}
.gi-tillbaka .ic{transform:rotate(90deg)}
.gi-tillbaka:hover{text-decoration:underline}
.gi-topp .gi-tillbaka{margin-bottom:4px}
.ei-over{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin:0 0 4px}
.ei-plan{list-style:none;margin:16px 0 0;padding:14px 16px;background:#fff;border-radius:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.ei-plan li{display:flex;align-items:flex-start;gap:10px}
.ei-plan li .ic{flex:none;margin-top:3px;color:var(--accent)}
.ei-plan li.klar{color:var(--muted)}
.ei-plan li.klar .ic{color:var(--soft)}
.ei-tbl td{vertical-align:top}
.ei-tbl td.s{padding-top:16px}
.ei-tbl td.n{padding-top:15px}
.ei-gast{display:inline-block;background:var(--card);color:var(--muted);border-radius:var(--pill);padding:0 7px;font-size:12px;font-weight:700;vertical-align:1px}
.ei-val{display:table;margin-top:4px;background:#E7F0FF;color:var(--accent-ink);border-radius:var(--pill);padding:1px 9px;font-size:12px;font-weight:600}
.ei-sparat{display:flex;align-items:center;gap:4px;margin-top:4px;color:#1E6B3E;font-size:12px;font-weight:700}
.tbl tbody tr.sparad,.tbl.zebra-js tbody tr.sparad{background:#E6F4EC}
.ei-andra form{display:flex;flex-direction:column;gap:6px}
.ei-andra textarea{width:100%;min-height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;padding:8px 12px;font-size:14px;resize:vertical}
.ei-andra textarea:focus{border-color:var(--accent);outline:none}
.ei-knappar{display:flex;flex-wrap:wrap;gap:6px}
.ei-knappar .btn{height:34px;padding:0 12px;font-size:13px;gap:4px}
.ei-knappar .btn b{font-size:11px}
.ei-knappar .btn.ja.on{background:var(--ja);color:#fff}
.ei-knappar .btn.nej.on{background:var(--nej);color:#fff}
.ei-knappar .btn.betalt.on{background:var(--betalt);color:#fff}
.mg-rutnat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mg-kort{padding:24px}
.mg-kort h2{font-size:22px}
.mg-kort form{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.mg-kort .hjalp{margin-top:0}
.mg-kort .knappar{margin-top:4px}
.mg-kort .fld input,.mg-kort .fld select,.mg-falt .fld input{height:46px;border-radius:14px;padding:0 14px;font-size:15px}
.mg-falt{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-top:14px}
@media (max-width:1000px){
  .mg-rutnat{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ei-tbl thead{display:none}
  .ei-tbl,.ei-tbl tbody,.ei-tbl tr{display:block}
  .ei-tbl tr[hidden]{display:none}
  .ei-tbl tr{display:grid;grid-template-columns:44px minmax(0,1fr);border-bottom:1px solid #F4F5F6;padding:10px 12px}
  .ei-tbl td{border:0;padding:0}
  .ei-tbl td.s{padding-top:2px}
  .ei-tbl td.n{width:auto;padding:0 0 8px}
  .ei-tbl td.ei-andra{grid-column:1/-1}
  .mg-kort{padding:20px}
  .mg-falt{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   20. Funktioner, forum och bilder i inloggat läge
   (protected/functionsNew.jsp, chatAdminNew.jsp, uploadGroupPicNew.jsp, listAlbumPicNew.jsp)
   .fu-antal = antal till höger i en länk. .ca-lista = forumets meddelanden. .al-knappar = knappar under en bild.
   figure.ny = bilden som just laddats upp. .gp-lagg/.al-lagg = uppladdning på en rad.
   ===================================================================== */
.fu-lead{margin:-6px 0 0 4px}
.fu-antal{flex:none;font-size:13px;font-weight:600;color:var(--muted);background:var(--card);border-radius:var(--pill);padding:3px 10px;white-space:nowrap}
.ca-lista{list-style:none;margin:14px 0 0;padding:0;background:#fff;border-radius:22px;overflow:hidden}
.ca-lista li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-bottom:1px solid #F1F2F4}
.ca-lista li:last-child{border-bottom:0}
.ca-txt{flex:1;min-width:0}
.ca-txt b{font-size:15px}
.ca-txt small{color:var(--soft);margin-left:8px;font-size:13px}
.ca-txt p{margin:2px 0 0;font-size:15px;overflow-wrap:anywhere;white-space:pre-line}
.gp-lagg{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto}
.al-lagg{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) auto}
.gp-lagg .fld input[type=file],.al-lagg .fld input[type=file]{height:44px;padding:9px 12px;font-size:14px}
.al-knappar{display:flex;gap:6px;padding:6px 4px 2px;flex-wrap:wrap}
.al-knappar .btn{background:var(--card)}
.al-knappar form{flex:1;min-width:0}
.al-knappar form .btn:not(.gi-tabort){width:100%}
.al-knappar .btn:hover{background:var(--card-hover)}
.album figure{scroll-margin-top:16px}
.album figure.ny{box-shadow:0 0 0 3px var(--ja)}
.gp-album{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.gp-album img{height:140px}
.gp-album figcaption b{color:var(--ink);font-size:14px}
@media (max-width:760px){
  .gp-lagg,.al-lagg{grid-template-columns:minmax(0,1fr)}
  .lankar .fu-antal{display:none}
  .album{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================================
   21. Ändra aktivitet, deltagare och meddelande i inloggat läge
   (protected/modifyEventMainNew.jsp, addUserToEventNew.jsp, removeUserFromEventNew.jsp,
   resendInviteToUserNew.jsp, sendEventMessageNew.jsp)
   .me-snabb = raderna under Mer som fälls ut. .eu-lista = personer att bocka för, .eu-verktyg = knapparna
   som följer med längst ner. .sm-form = formuläret för meddelande.
   ===================================================================== */
.me-namn{margin:0 0 10px;font:800 40px/1.05 Inter,sans-serif;letter-spacing:-.04em;overflow-wrap:anywhere}
.card > .me-namn:last-child{margin-bottom:0}
.me-snabb{margin-top:14px;background:#fff;border-radius:22px;overflow:hidden}
.me-snabb details{border-bottom:1px solid #F1F2F4;scroll-margin-top:16px}
.me-snabb details:last-child{border-bottom:0}
.me-snabb summary{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer}
.me-snabb summary::-webkit-details-marker{display:none}
.me-snabb summary:hover{background:#FAFAFB}
.me-snabb .ikon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--accent-ink)}
.me-snabb .txt{flex:1;min-width:0}
.me-snabb summary b{display:block;font-size:16px}
.me-snabb summary small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.me-snabb summary > .ic:last-child{flex:none;color:var(--soft);transition:transform .15s}
.me-snabb details[open] summary > .ic:last-child{transform:rotate(180deg)}
.me-snabb .inne{padding:0 18px 16px 72px}
.me-snabb .inne .notice{margin:0 0 10px}
.me-pa{display:inline-block;background:#FFF6DA;color:#5A4300;border-radius:var(--pill);padding:1px 9px;font-size:12px;font-weight:700;vertical-align:2px;margin-left:6px}
.me-rad{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.me-rad input[type=text],.me-rad select{height:42px;border-radius:12px;border:2px solid var(--line);background:#fff;padding:0 12px;font-size:15px;color:var(--ink)}
.me-rad input[type=text]{flex:1;min-width:220px}
.me-rad input:focus,.me-rad select:focus{border-color:var(--accent);outline:none}
.me-etikett{font-size:13px;font-weight:600;color:var(--muted)}
.me-farlig{color:var(--nej)}
.me-plan{background:var(--card);margin-top:12px;font-size:14px}
.eu-verktyg-topp{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.eu-verktyg-topp .srch{margin-left:auto}
.eu-valj select{height:40px;border-radius:var(--pill);border:0;background:#fff;padding:0 14px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
.eu-lista{list-style:none;margin:12px 0 0;padding:0;background:#fff;border-radius:22px;overflow:hidden}
.eu-lista li{border-bottom:1px solid #F1F2F4}
.eu-lista li:last-child{border-bottom:0}
.eu-lista label{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer}
.eu-lista label:hover{background:#FAFAFB}
.eu-lista input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.eu-lista .n{flex:1;min-width:0}
.eu-lista .n b{display:block;font-size:15px;overflow-wrap:anywhere}
.eu-lista .n small{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.eu-lista li:has(input:checked){background:#EAF1FF}
.eu-verktyg{position:sticky;bottom:12px;z-index:5;margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fff;border-radius:22px;padding:12px 16px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.eu-verktyg > b{margin-right:auto;font-size:14px}
.eu-verktyg > b:empty{display:none}
.sm-form{gap:14px}
.sm-kryss{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;cursor:pointer;margin-left:6px}
.sm-kryss input{width:18px;height:18px;accent-color:var(--accent)}
.sm-avs select{max-width:420px}
.sm-antal{font-size:14px;margin-left:auto}
.mottagare label.utan{opacity:.5;cursor:not-allowed}
@media (max-width:760px){
  .me-namn{font-size:30px}
  .me-snabb summary{padding:12px 14px;gap:12px}
  .me-snabb .inne{padding:0 14px 14px}
  .me-rad input[type=text]{min-width:0;width:100%}
  .eu-verktyg-topp .srch{margin-left:0;width:100%}
  .eu-verktyg .btn{flex:1}
}

/* =====================================================================
   22. Statistik för en aktivitet (protected/eventStatNew.jsp)
   .es-period = val av år och veckor. .es-tal = siffrorna. .es-diagram = antal ja per vecka (en stapel per vecka).
   .es-matris = tabellen (bygger på .matris). .es-mini = liten stapel för närvaro i procent.
   ===================================================================== */
.es-period{display:grid;grid-template-columns:repeat(3,minmax(0,140px)) auto;gap:10px;align-items:end;margin-top:18px}
.es-period .fld label{margin-bottom:4px;font-size:12px}
.es-period .fld select{height:44px;border-radius:14px;padding:0 12px;font-size:15px}
.es-period .btn{height:44px}
.es-snabb{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.es-hur{margin-top:16px;background:#fff;border-radius:18px;padding:12px 16px;font-size:15px}
.es-hur summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:var(--accent-ink)}
.es-hur p,.es-hur ul{margin:10px 0 0;color:var(--muted)}
.es-hur ul{padding-left:20px}
.es-hur li{margin-top:4px}
.es-hur .btn{margin-top:12px;background:var(--card)}
.es-tal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.es-tal div{background:#fff;border-radius:20px;padding:16px}
.es-tal b{display:block;font:800 32px/1 Inter,sans-serif;letter-spacing:-.03em}
.es-tal span{display:block;margin-top:6px;font-size:13px;color:var(--muted);font-weight:600}
.es-h2{font-size:20px !important;margin-top:22px !important}
.es-diagram-wrap{position:relative;overflow-x:auto;background:#fff;border-radius:22px;margin-top:12px;padding:16px 14px 10px}
.es-diagram{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--veckor),minmax(22px,1fr));gap:6px;align-items:end;min-width:calc(var(--veckor) * 28px)}
.es-diagram li{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.es-stapel{display:flex;align-items:flex-end;width:100%;max-width:36px;height:140px;background:var(--card);border-radius:8px;overflow:hidden}
.es-stapel i{display:block;width:100%;background:var(--ja);border-radius:8px 8px 0 0;min-height:2px}
.es-diagram li.es-tom .es-stapel i{min-height:0;height:0 !important}
.es-diagram b{font-size:13px;line-height:1;min-height:13px}
.es-diagram small{font-size:11px;color:var(--soft);line-height:1}
.es-matris thead th b{font-size:13px}
.es-matris thead th span{font-size:11px}
.es-matris .es-sum{background:#FAFAFB;font-weight:600}
.es-matris thead .es-sum{font-size:12px}
.es-matris b.ja{color:#1E6B3E}
.es-matris b.nej{color:#9B2318}
.es-pct{white-space:nowrap;text-align:left !important}
.es-matris .es-sista{box-shadow:inset -1px 0 0 #E4E6E9}
.es-mini{display:inline-block;width:44px;height:6px;border-radius:3px;background:var(--card);overflow:hidden;vertical-align:middle;margin-right:8px}
.es-mini i{display:block;height:100%;background:var(--ja)}
.es-matris tfoot small{display:block;font-size:11px;color:var(--soft);font-weight:500}
.es-matris tr.es-andra > *{border-top:0;padding-top:4px}
.es-matris tr.es-andra a{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;background:var(--card);color:var(--muted)}
.es-matris tr.es-andra a:hover{background:var(--card-hover);color:var(--ink)}
/* Ändra en vecka: rubrikerna, staplarna och raden Ändra länkar till modifyEventStatNew.jsp */
.es-tips{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:14px;color:var(--muted)}
.es-tips .ic{color:var(--accent-ink)}
.es-vlank{display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:10px;padding:2px 4px;color:inherit}
.es-vlank .ic{color:var(--soft);margin-top:2px}
.es-vlank:hover{background:var(--card)}
.es-vlank:hover .ic{color:var(--accent-ink)}
.es-diagram li > a{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;border-radius:10px;color:inherit}
.es-diagram li > a:hover .es-stapel{box-shadow:0 0 0 2px var(--accent)}
.es-matris tr.es-andra th{font-size:13px;color:var(--muted);font-weight:600}
@media (max-width:760px){
  .es-period{grid-template-columns:repeat(3,minmax(0,1fr))}
  .es-period .btn{grid-column:1/-1}
  .es-tal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .es-tal b{font-size:26px}
  .es-stapel{height:110px}
}

/* =====================================================================
   23. Skapa och ändra aktivitet och förfrågan (protected/createEventNew.jsp, modifyEventNew.jsp,
   createPollNew.jsp, pollOptionsNew.jsp, pollSendNew.jsp, modifyPollNew.jsp)
   .ak-typ = växeln Aktivitet/Förfrågan. .ak-steg = steg 1-3. .ak-rad = ett utskick med val (.ak-chip) och
   egen tid (.ak-egen). .ak-mer = Fler inställningar (stängd från början). .ak-bar = knapparna längst ner,
   följer med när man skrollar. .ak-alt = förfrågans alternativ. .ak-kal = kalendern för flera datum.
   .rte = textredigeraren (bokat.js gör om textarea[data-rte]).
   ===================================================================== */
.ak-form{display:flex;flex-direction:column;gap:20px}
.ak-huvud .lead{margin:0;color:var(--muted)}
.ak-huvud .me-namn{margin-bottom:8px}
.ak-typ{display:inline-flex;background:var(--card);border-radius:var(--pill);padding:4px;margin:0 0 16px}
.ak-typ a{padding:9px 18px;border-radius:var(--pill);font-weight:600;font-size:14px;color:var(--muted)}
.ak-typ a:hover{color:var(--ink)}
.ak-typ a.on{background:var(--ink);color:#fff}
.ak-steg{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.ak-steg li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--soft)}
.ak-steg i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.ak-steg li.klar{color:var(--muted)}.ak-steg li.klar i{background:var(--ja);color:#fff}
.ak-steg li.nu{color:var(--ink)}.ak-steg li.nu i{background:var(--ink);color:#fff}
.ak-falt{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.card h2 + .lead{margin-top:6px}
.ak-g2,.ak-g3{display:grid;gap:12px;margin-top:16px}
.ak-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ak-g3{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
.ak-falt .ak-g2{margin-top:0}
.card .hjalp{margin:8px 6px 0;font-size:13px;color:var(--muted)}
.fld input[type=date],.fld input[type=time]{min-width:0;-webkit-appearance:none;appearance:none}
.fld input[aria-invalid=true],.fld select[aria-invalid=true],.fld textarea[aria-invalid=true],.ak-egen input[aria-invalid=true]{border-color:var(--nej)}
.ak-fel ul{margin:4px 0 0;padding-left:18px}
.ak-fel li{margin-top:2px}
.ak-fel > div{min-width:0}

/* Textredigeraren */
.rte{background:#fff;border-radius:16px;border:2px solid transparent;overflow:hidden}
.rte:focus-within{border-color:var(--accent)}
.rte-verktyg{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid #F1F2F4}
.rte-verktyg button{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.rte-verktyg button:hover{background:var(--card);color:var(--ink)}
.rte-yta{min-height:150px;max-height:60vh;overflow:auto;padding:12px 18px;outline:none;overflow-wrap:anywhere}
.rte-yta:empty::before{content:attr(data-ph);color:var(--soft)}
.rte-yta p{margin:0 0 8px}
.rte-yta ul,.rte-yta ol{margin:0 0 8px;padding-left:22px}
.rte-yta a{color:var(--accent-ink);text-decoration:underline}
.rte-yta img{max-width:100%;height:auto}

/* Utskick */
.ak-rader{margin-top:16px;background:#fff;border-radius:22px;overflow:hidden}
.ak-rad{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:14px 18px;border-bottom:1px solid #F1F2F4}
.ak-rad:last-child{border-bottom:0}
.ak-rad > .ikon{width:40px;height:40px;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;color:var(--accent-ink)}
.ak-rad-txt b{display:block;font-size:16px}
.ak-rad-txt small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.ak-rad-fel{box-shadow:inset 3px 0 0 var(--nej)}
.ak-val{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ak-chip{position:relative;cursor:pointer}
.ak-chip input{position:absolute;opacity:0;width:1px;height:1px}
.ak-chip span{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:var(--pill);background:var(--card);font-size:14px;font-weight:600;white-space:nowrap}
.ak-chip:hover span{background:var(--card-hover)}
.ak-chip input:checked + span{background:var(--ink);color:#fff}
.ak-chip input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.ak-chip input:disabled + span{opacity:.4;cursor:not-allowed}
.ak-egen,.ak-nar{grid-column:2 / 4}
.ak-egen{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ak-egen input{height:44px;border-radius:14px;border:2px solid var(--line);background:#fff;padding:0 12px;font-size:15px;color:var(--ink);min-width:0}
.ak-egen input:focus{border-color:var(--accent);outline:none}
.ak-egen input[type=date]{width:170px}
.ak-egen input[type=time]{width:110px}
.ak-nar{font-size:13px;color:var(--accent-ink);font-weight:600}
.ak-nar:empty{display:none}
.ak-klar{display:inline-flex;align-items:center;gap:4px;margin-left:8px;background:#E6F4EC;color:#1E6B3E;border-radius:var(--pill);padding:2px 9px;font-size:12px;font-weight:700;vertical-align:2px}

/* Fler inställningar */
.ak-mer-kort{padding:0}
.ak-mer > summary{list-style:none;display:flex;align-items:center;gap:14px;padding:26px 30px;cursor:pointer;border-radius:32px}
.ak-mer > summary::-webkit-details-marker{display:none}
.ak-mer > summary:hover{background:var(--card-hover)}
.ak-mer > summary > .ic{flex:none;color:var(--muted);transition:transform .15s}
.ak-mer[open] > summary > .ic{transform:rotate(180deg)}
.ak-mer-txt{flex:1;min-width:0}
.ak-h2{display:block;font:800 28px/1.1 Inter,sans-serif;letter-spacing:-.03em}
.ak-mer-txt small{display:block;margin-top:6px;color:var(--muted);font-size:14px}
.ak-mer-inne{padding:0 30px 30px}
.ak-grupp{background:#fff;border-radius:22px;padding:18px 20px;margin-top:12px}
.ak-grupp:first-child{margin-top:0}
.ak-grupp h3{margin:0;font-size:17px;font-weight:700}
.ak-grupp .ak-g2{margin-top:10px}
.ak-grupp .fld{margin-top:10px}
.ak-grupp .ak-g2 .fld{margin-top:0}
.ak-grupp .fld input,.ak-grupp .fld select{background:var(--card)}
.ak-grupp .hjalp{margin-left:2px}
.ak-kryss{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.ak-kryss label{display:flex;gap:12px;align-items:flex-start;padding:7px 0;font-size:15px;cursor:pointer}
.ak-kryss input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--accent)}
.card > .ak-kryss label{padding:4px 6px}

/* Deltagare */
.ak-lista .ak-kat{flex:none;font-size:11px;font-weight:800;color:var(--muted);background:var(--card);border-radius:6px;padding:2px 6px}
.ak-lista-fel .eu-lista{box-shadow:0 0 0 2px var(--nej)}
.ak-lankar{margin-top:14px}
.card .sm-avs{margin-top:16px}

/* Knapparna längst ner */
.ak-bar{position:sticky;bottom:12px;z-index:5;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;background:#fff;border-radius:24px;padding:12px 14px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.ak-bar-txt{margin-right:auto;font-size:14px;color:var(--muted);padding-left:6px}
.ak-bar-txt b{color:var(--ink)}
.ak-bar .btn-white{background:var(--card)}
.ak-bar .btn-white:hover{background:var(--card-hover)}
.ak-av{opacity:.35;cursor:not-allowed}

/* Förfrågans alternativ */
.ak-alt{list-style:none;margin:16px 0 0;padding:0;background:#fff;border-radius:22px;overflow:hidden}
.ak-alt li{display:flex;gap:14px;align-items:center;padding:12px 14px 12px 12px;border-bottom:1px solid #F1F2F4}
.ak-alt li:last-child{border-bottom:0}
.ak-alt-nr{width:22px;flex:none;text-align:right;color:var(--soft);font-size:13px;font-weight:700}
.ak-alt-dt{flex:none;width:54px;height:58px;border-radius:14px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;color:var(--muted)}
.ak-alt-dt small{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.ak-alt-dt b{font-size:22px;font-weight:800;margin:3px 0;color:var(--ink)}
.ak-alt-t{flex:1;min-width:0}
.ak-alt-t b{display:block;font-size:16px;overflow-wrap:anywhere}
.ak-alt-t small{display:block;color:var(--muted);font-size:13px}
.ak-alt-t .ak-alt-mer{margin-top:2px;overflow-wrap:anywhere}
.ak-alt form{flex:none}
.ak-alt-bort{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ak-alt-bort:hover{background:#FDECEA;color:var(--nej)}
.ak-mer-info summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:14px;color:var(--accent-ink);margin-left:6px}
.ak-mer-info .fld{margin-top:10px}

/* Kalendern */
.ak-kal-etikett{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px 6px}
.ak-valfri{font-weight:500;color:var(--soft)}
.ak-kal.is-aktiv{position:relative;background:#fff;border-radius:22px;padding:14px 16px}
.ak-kal-nav{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none}
.ak-kal-nav button{pointer-events:auto;width:40px;height:40px;border:0;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.ak-kal-nav button:disabled{opacity:.35;cursor:default}
.ak-kal-manader{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.ak-kal-titel{text-align:center;font-weight:700;line-height:40px;margin-bottom:4px;text-transform:capitalize}
.ak-kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ak-kal-vd{text-align:center;font-size:11px;font-weight:700;line-height:24px;color:var(--soft);text-transform:uppercase}
.ak-kal-dag{position:relative;aspect-ratio:1;min-height:38px;border:0;border-radius:12px;background:transparent;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;padding:0}
.ak-kal-dag:hover:not(:disabled){background:var(--card)}
.ak-kal-dag.idag{box-shadow:inset 0 0 0 1px var(--line)}
.ak-kal-dag.vald{background:var(--ink);color:#fff;box-shadow:none}
.ak-kal-dag:disabled{opacity:.3;cursor:default}
.ak-kal-dag.har::after{content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
.ak-kal-dag.vald.har::after{background:#fff}
.ak-kal-summa{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.ak-kal-antal{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;font-weight:600;padding:0 6px}
.ak-kal-antal button{border:0;background:none;color:var(--accent-ink);font-weight:600;cursor:pointer;font-size:14px}
.ak-kal-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ak-kal-chips li{display:inline-flex;align-items:center;gap:4px;background:#fff;border-radius:var(--pill);padding:4px 4px 4px 12px;font-size:13px;font-weight:600}
.ak-kal-chips button{width:26px;height:26px;border:0;border-radius:50%;background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.ak-kal-tips{font-size:13px;color:var(--muted);padding:0 6px}

@media (max-width:760px){
  .ak-form{gap:16px}
  .ak-typ{margin-bottom:12px}
  .ak-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ak-g3 .fld:first-child{grid-column:1 / 3}
  .ak-rad{grid-template-columns:40px minmax(0,1fr);padding:14px}
  .ak-val{grid-column:1 / 3;justify-content:flex-start}
  .ak-egen,.ak-nar{grid-column:1 / 3}
  .ak-egen label{flex:1}
  .ak-egen input[type=date],.ak-egen input[type=time]{width:100%}
  .ak-mer > summary{padding:20px;border-radius:26px}
  .ak-h2{font-size:24px}
  .ak-mer-inne{padding:0 14px 14px}
  .ak-grupp{padding:16px}
  .ak-bar{border-radius:20px;padding:10px}
  .ak-bar .btn{flex:1;padding:0 14px}
  .ak-bar-txt{flex-basis:100%;padding:0 4px}
  .ak-alt-dt{width:48px;height:52px}
}

/* =====================================================================
   24. Ändra statistik för en vecka (protected/modifyEventStatNew.jsp)
   .ms-vecka = veckan med pilar. .ms-summa = antal per status. .ms-lista = en rad per inbjuden med tre knappar.
   ===================================================================== */
.ms-vecka{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:center;text-align:center;margin-top:6px}
.ms-vecka .me-namn{margin:0}
.ms-vecka .lead{margin:4px 0 0}
.ms-pil{width:44px;height:44px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
a.ms-pil:hover{background:var(--card-hover)}
span.ms-pil{background:none}
.ms-summa{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:14px;color:var(--muted)}
.ms-summa span{display:inline-flex;align-items:center;gap:6px}
.ms-summa b{color:var(--ink);font-size:15px}
.ms-lista{list-style:none;margin:16px 0 0;padding:0;background:#fff;border-radius:22px;overflow:hidden}
.ms-lista li{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-bottom:1px solid #F1F2F4;scroll-margin-top:90px}
.ms-lista li:last-child{border-bottom:0}
.ms-lista li.ms-sparad{background:#F3F8FF}
.ms-n{flex:1;min-width:0}
.ms-n b{display:block;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.ms-n small{display:block;font-size:12px;color:var(--soft)}
.ms-val{flex:none;display:inline-flex;background:var(--card);border-radius:var(--pill);padding:3px}
.ms-val button{border:0;background:transparent;height:34px;padding:0 12px;border-radius:var(--pill);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.ms-val button:hover{color:var(--ink)}
.ms-val button.on{color:#fff}
.ms-val .ms-ja.on{background:var(--ja)}
.ms-val .ms-nej.on{background:var(--nej)}
.ms-val .ms-ingen.on{background:var(--muted)}
@media (max-width:760px){
  .ms-lista li{flex-wrap:wrap;padding:12px 14px}
  .ms-val{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .ms-val button{padding:0 6px}
  .ms-vecka .me-namn{font-size:26px}
}
/* Ny aktivitet och Ny förfrågan på smala skärmar: utan plustecken, så att längre språk får plats */
@media (max-width:420px){.gi-nya .btn .ic{display:none}}