:root {
  --main-bg-color:  #eceef0;
  --mild-black:     #4a4a4a;
  --mild-blueblack: #495c7e;
  --yellow:         #fbbc04;


  --pastel-yellow:  #faedcb;
  --pastel-green:   #c9e4de;
  --pastel-blue:    #c6def1;
  --pastel-purple:  #dbcdf0;
  --pastel-pink:    #f2c6de;
  --pastel-orange:  #f7d9c4;
}

/* ==========================================================================
   INNEHALL

   Filen ar medvetet INTE omsorterad. I CSS ar kallordningen semantik: nar tva
   regler har samma specificitet vinner den som star sist, sa att flytta regler
   kan tyst andra vilken som galler. Sektionerna nedan ar darfor markerade dar
   de redan ligger - filen gar att navigera utan att nagot har flyttats.

      1. HJALPKLASSER
      2. GRUND: html, body, typsnitt
      3. SIDHUVUD OCH MENYKNAPP
      4. NAVIGERINGSPANEL (utfallbar meny)
      5. LAYOUT: kolumner, sidfot
      6. TYPOGRAFI: rubriker, text, lankar
      7. KNAPPAR OCH IKONER (nollstallning av <button>)
      8. RUTOR: box, tight_box, column
      9. VERKTYGSKLASSER: justering, farg, bakgrund
     10. FORMULARFALT: label, ajaxInput, postInput
     11. VERKTYGSKLASSER: text och bredd
     12. DELTAGARE (attendant)
     13. KOSTNAD (cost)
     14. VERKTYGSKLASSER: flex och bredder
     15. KNAPPGRUND (huvuddelen ligger i button.css)
     16. KOSTNADENS DETALJRADER OCH UPPLADDNINGSYTOR
     17. LADDNINGSINDIKATOR
     18. MODAL
     19. MEDDELANDEN: fel, info, inloggning
     20. UNDERNAVIGERING (kort/tabell-vaxling)
     21. KORT- OCH TABELLVISNING, MARKERINGAR
     22. FORMULARSVEP OCH LAGG-TILL-KNAPPAR
     23. OVRIGT: tabellsvep, aktivitetsserier, statusrader
   ========================================================================== */


* {
  box-sizing: border-box;
  line-height: 1;
}

/* Anvands for etiketter (<label>) som ett falt behover for skarmlasare/
   ifyllnadsstod (t.ex. i mobilens tangentbord), men som inte ska synas i det
   visuella granssnittet - t.ex. faltet for "Namnge aktiviteten" som redan har
   en tydlig placeholder-text. Doljer visuellt utan display:none, sa
   skarmlasare fortfarande laser upp texten. */
/* Det dolda filfaltet som uppladdningsytorna oppnar.
   Doldes tidigare av jquery.filedrop, som satte display:none pa det via JS nar
   sidan laddats. Nar pluginet togs bort fanns ingen kvar som gomde det, och
   faltet syntes hogst upp pa varje sida ("Valj fil / Ingen fil har valts").
   Doljs nu i CSS istallet - dessutom battre an forut, eftersom det aldrig ens
   hinner ritas ut innan JS korts.
   display:none hindrar inte att faltet oppnas via .click() fran koden. */
#upload_button {
  display: none;
  width: 0;
  height: 0;
}

/* -------- HJALPKLASSER ------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------- GRUND: html, body, typsnitt --------------------------------- */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Open sans", sans-serif;
  color: var(--mild-black);
  background-color: var(--main-bg-color);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

/* -------- SIDHUVUD OCH MENYKNAPP -------------------------------------- */
header {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  padding: 1.5em 1.5em 0 1.5em;
}

header img {
  width: 100%;
}
.logoContainer {
  margin-right: 2em;
}

.nameContainer h2 {
  margin: 0 0 0 0;
  padding: 0;
  font-size: 1.5em;
  font-weight: 400;
}

.menuButton {
  padding: 0.25em;
  border-radius: 0.25em;
}
.menuButton:hover {
  cursor: pointer;
  background-color: #eee;
}

.menu_mobile {
  display: none;
}

.start {
  max-width: 50em;
}

input {
  color: inherit;
}


/* -------- NAVIGERINGSPANEL (utfallbar meny) --------------------------- */
nav {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em;
  background-color: #fff;
  width: 20em;
  height: 100%;
  box-sizing: border-box;
  z-index: 2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  display: none;
}

nav ul {
  font-size: 1em;
  font-weight: 400;
  margin: 0;
  padding: 1.5em 0;
  border-bottom: 1px solid #eee;
}

nav ul:first-of-type {
  margin: 10em 0 0;
}

nav ul:last-of-type {
  border: none;
}

nav li {
  margin: 0 0 0.75em;
}

nav li:hover {
  cursor: pointer;
  text-decoration: underline;
}

nav li .material-icons {
  margin-right: 0.5em;
}

/* Menyraderna (redigera serie, kopiera aktivitet, verifiera mobilnummer m.fl.)
   var tidigare rena <li>-element med en klick-lyssnare - de gick inte att nå
   med Tab och lästes bara upp som vanlig text av skärmläsare. Innehållet ligger
   nu i en riktig <button> inuti samma <li> (li:n behåller sin klass, så
   befintlig JS-klick-hantering fortsätter fungera oförändrat) - den här stilen
   får knappen att se och bete sig exakt som den gamla klickbara raden. */
nav li button.navItemButton {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
nav li button.navItemButton:hover {
  text-decoration: underline;
}

nav .close {
  font-size: 1.5em;
  color: inherit;
}

.navBg {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(22, 24, 26, 0.32);
  display: none;
  z-index: 1;
}


/* -------- LAYOUT: kolumner, sidfot ------------------------------------ */
footer img {
  max-height: 2em;
}

table {
  margin: auto;
}
td {
  padding: 0.5em;
  white-space: nowrap;
}

.top-section {
  display: flex;
  padding: 1em;
}

.main-section {
  min-height: calc(100% - 10em);
  display: flex;
  padding: 1em;
}

.left-column {
  flex: 1;
  border-right: 1px solid lightgray;
  padding: 0 1em 0 0;
}

.main-column {
  flex: 2;
  padding: 0 1em 0 1em;
}

.right-column {
  flex: 2;
  border-left: 1px solid lightgray;
  padding: 0 0 0 1em;
}

footer {
  background-color: #333537;
  overflow: hidden;
  height: 20em;
  color: rgba(255, 255, 255, 0.75);
}
.footerTable {
  width: 80%;
  margin: 1em auto;
}
.footerTable td {
  vertical-align: top;
  width: 33%;
  white-space: normal;
}
.seeThrough {
  opacity: 0.75;
}


/* -------- TYPOGRAFI: rubriker, text, lankar --------------------------- */
hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 2em 0;
}

h1 {
  font-size: 2em;
  margin-top: -0.05em;
  font-weight: bold;
}

h1.startPage {
  font-size: 2.5em;
  font-family: "Protest Riot", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #166ea7;
}
section h1 {
  margin: 1em 0 0.5em 0;
}
h3 {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0 0 0.75em;
  color: var(--mild-blueblack);
}
h4 {
  font-size: 1em;
  font-weight: 600;
  padding: 0.5em 1em;
  background-color: rgba(0,0,0,0.5);
  color: white;
  margin: 2em 0 0.5em 0;
}
h5 {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.25em;
  font-weight: bold;
  margin: 1em 0 0 0;
}
.thin {
  font-weight: 400;
}
p, ul {
  margin: 1em 0 1em 0;
  line-height: 1.25;
}
a, .link {
  color: var(--mild-blueblack);
  text-decoration: none;
  font: inherit;
}
a:hover, .link:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* -------- KNAPPAR OCH IKONER (nollstallning av <button>) -------------- */
.iconButton {
  opacity: 0.5;
  border-radius: 0.25em;
  padding: 0.2em;
}
.iconButton:hover {
  opacity: 1;
  cursor: pointer;
  background-color: #eee;
}

/* Flera "klickbara" element (meny, stäng-knapp, ta bort, expandera osv) var tidigare
   div/span/li/p med en klick-handler istället för riktiga <button>-element - det gick
   inte att nå dem med tangentbordet (Tab) eller aktivera dem med Enter/Space, och
   skärmläsare läste bara upp dem som vanlig text. De har nu bytts till <button
   type="button">, med samma klassnamn kvar så att befintlig JS och styling
   fortsätter fungera oförändrat. Den här regeln nollställer bara webbläsarens
   standardutseende för <button> (bakgrund, kantlinje, typsnitt) - befintliga
   klassregler ovan (t.ex. .menuButton, .addButton, .iconButton, .close) styr
   fortfarande padding/border-radius precis som innan. */
button.menuButton,
button.addButton,
button.openModal,
button.openNordeaCsv,
button.close,
button.link,
button.iconButton,
button.deleteActivity,
button.openExpandContainer {
  background: none;
  border: none;
  margin: 0;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* .material-icons kommer fran ett externt Google Fonts-typsnitt och satter bara
   font-family/font-size/etc. Om vi skriver "font: inherit" (vilket nollstaller
   ALLA typsnittsegenskaper, inklusive font-family) pa samma element som ocksa
   har klassen material-icons (stang-knappen, expandera-pilarna, papperskorgen
   m.fl.), vinner var regel over ikon-typsnittet pga hogre specificitet - da
   visas ikonens namn som ren text ("expand_more") istallet for sjalva
   ikon-glyfen. De knapparna far darfor INTE font: inherit har; .material-icons,
   .close och .iconButton nedan styr deras typsnitt/storlek precis som forut. */
button.menuButton,
button.addButton,
button.openModal,
button.openNordeaCsv,
button.link,
button.deleteActivity {
  font: inherit;
}
/* Dessa hade ingen egen padding sedan tidigare - sätt 0 så webbläsarens
   standardpadding för <button> inte lägger till oväntat mellanrum.
   openExpandContainer är INTE med här - den har redan klassen iconButton,
   som ger den sin egen (avsiktliga) padding: 0.2em. */
button.openModal,
button.openNordeaCsv,
button.link,
button.deleteActivity {
  padding: 0;
}
/* Atershaller ikon-typsnittet for knappar dar klassen material-icons ligger
   direkt pa <button>-elementet (se forklaringen ovan). Samma vardet som
   Google Fonts-snippet for Material Icons anvander. */
button.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}
button:focus-visible {
  outline: 2px solid var(--mild-blueblack, #1a4a6e);
  outline-offset: 2px;
}

/* Uppladdningsytorna ar <div>-element med role="button" (se cost.php), sa de
   traffas inte av regeln ovan. Samma markering som riktiga knappar far, sa att
   man ser var man ar nar man tabbar. Bara vid tangentbordsnavigering
   (:focus-visible), inte vid musklick. */
.dropzone:focus-visible {
  outline: 2px solid var(--mild-blueblack, #1a4a6e);
  outline-offset: 2px;
}

.material-icons {
  vertical-align: text-bottom;
  font-size: 1.5em;
}

/* -------- RUTOR: box, tight_box, column ------------------------------- */
.box {
  box-shadow: 1px 1px 1px rgba(0,0,0,.1);
  border-radius: 4px;
  background-color: white;
  padding: 1em 1em;
  border: 1px solid #e7eaf0;
  margin: 0 0 1em 0;
  position: relative;
  overflow: hidden;
}

.tight_box {
  box-shadow: 1px 1px 1px rgba(0,0,0,.1);
  border-radius: 4px;
  background-color: white;
  padding: 0em 0.5em 0.25em;
  border: 1px solid #e7eaf0;
  margin: 0 0 1em 0;
  position: relative;
  overflow: hidden;
}

.tight_box h5 {
  margin: -0.25em -0.5em 0.5em;
  padding: 0.75em 0.5em 0.5em;
}

.tight_box label {
  display: inline-block;
  font-weight: 600;
}

.tight_box .material-icons {
  vertical-align: sub;
}

.column {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  padding: 1em;
  margin: 0;
  border-right: 1px solid gray;
}

.column:last-child {
  margin: 0 0 1em 0;
  border: none;
}

h2 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0.5em 0 1em;
}


/* -------- VERKTYGSKLASSER: justering, farg, bakgrund ------------------ */
.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-middle {
  align-items: center;
}

.bg_green {
  background-color: #34a853;
}
.bg_red {
  background-color: #a83434;
}
.bg_gray {
  background-color: gray;
}
.bg_yellow {
  background-color: var(--yellow, #fbbc04);
}
.bg_blue {
  background-color: #2c78e7;
}
.bg_lightyellow {
  background-color: lightyellow;
}

.color_green {
  color: #34a853;
}
.color_red {
  color: #a83434;
}
.color_gray {
  color: gray;
}
.color_yellow {
  color: var(--yellow, #fbbc04);
}
.color_blue {
  color: #2c78e7;
}
.color_white {
  color: white;
}

/* -------- FORMULARFALT: label, ajaxInput, postInput ------------------- */
label {
  display: block;
  margin: 0.25em 0 1em;
  padding: 0 0.25em;
  font-size: 1em;
}

.ajaxInput {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  max-width: calc(100% - 2em);
}
.ajaxInput:hover {
  border: none;
  border-bottom: 1px dashed gray;
}
.ajaxInput.nodash:hover {
  border: none;
}
.dashed {
  border: none;
  border-bottom: 1px dashed gray;
}
/* button.link satter "border: none" (se nollstallningsregeln langre upp i
   filen) med hogre specificitet (element+klass) an .dashed ensamt
   (bara-klass), sa .dashed skulle annars tystas pa knappar. Den har regeln
   ar minst lika specifik och vinner darmed istallet, sa knappar som "Betalat"
   och "Delaktig" i kostnadstabellen fortfarande visar en dashad
   understrykning - ett tydligt, beroringsvanligt tecken pa att de gar att
   trycka pa (fungerar aven utan hover, till skillnad fran .ajaxInput:hover). */
button.link.dashed {
  border-bottom: 1px dashed gray;
}
/* Lite extra klickyta runt siffran i "Betalat"/"Delaktig", sa tryckytan
   kommer narmare de rekommenderade ~24x24px aven i den smala tabellen. */
/* button:focus-visible langre ner i filen ger redan en synlig
   fokusindikator - ingen egen behovs har. */
.openEditTransValue {
  padding: 0.3em 0.15em;
  margin: -0.3em -0.15em;
}
.ajaxNumber {
  width: 6em;
}
.ajaxInput:focus {
  outline: none;
  background-color: lightyellow;
  border-bottom: 1px dashed gray;
}

.semi_bold {
  font-weight: 600;
}

.postInput {
  font: inherit;
  width: 100%;
  min-height: 2.5em;
  border: none;
  border-bottom: 1px dashed gray;
  padding: 0.5em 1em;
  line-height: 1.5;
  appearance: none;
}

.box .postInput {
  background-color: #f2f2f2;
}

.postInput:focus {
  outline: none;
  border-bottom: 1px dashed black;
  background-color: lightyellow;
}
/* -------- VERKTYGSKLASSER: text och bredd ----------------------------- */
.bold {
  font-weight: bold;
}

.large {
  font-size: 2em;
  height: 2em;
}

.air {
  line-height: 1.5;
}


.width20em {
  width: 20em;
}

.width40em {
  width: 40em;
}
.width50em {
  width: 50em;
}

.float {
  float: left;
  margin: 0 1em 1em 0;
}

.float:last-child {
  margin: 0;
}

.halfWidth {
  width: 50%;
  float: left;
}
.fullWidth {
  width: 100%;
}


/* --------- DOCUMENT --------- */


.bg_lightgreen {
	background-color:lightgreen;
}
.bg_lightcoral {
	background-color:lightcoral;
}
i {
  vertical-align: middle;
}

/* --------- ATTENDANT --------- */


/* -------- DELTAGARE (attendant) --------------------------------------- */
.attendant h3 {
  font-weight: 400;
}

.attendant p {
  margin: 0;
}

.attendant_fields p {
  margin: 0.5em 0;
}

.attendant:last-of-type {
  margin-right: 0em;
}

h4.attendant_name {
  margin: -0.35em -0.35em 1em;
	font-size: 1.5em;
	font-family: 'Nunito', sans-serif;
	background-color: #e1e8e2;
	padding: 0.5em 0.5em 0.5em;
	color: #5a5555;
	vertical-align: bottom;
}
h4.attendant_name i {
  font-size: 2em;
  color: #60c0b2;
  margin-bottom: 0em;
  vertical-align: bottom;
}

.loading_attendant_transaktions {
  margin: 1em;
  text-align: center;
  display: none;
}
.loading_attendant_transaktions img {
  height: 3em;
}

.attendant_table {
  width: 100%;
}
.attendant_table th {
  padding: 0.2em;
}
.attendant_table td {
  padding: 0.2em;
}
.attendant_table_top_row {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75em;
}
.attendant_table_second_row {
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}
.will_get, .will_pay {
  display: none;
}

.attendant ul {
  margin-top: 1em;
  font-size: 1em;
}

.attendant ul li {
  margin-bottom: 0.5em;
}


/* --------- COST --------- */

/* -------- KOSTNAD (cost) ---------------------------------------------- */
.cost h3 {
  margin: 0;
}
.cost img {
  max-width: 100%;
}
.costName {
  font-weight: 400;
}
.cost_attendant {
  display: inline-block;
	margin:0.2em;
	padding:0.2em;
	background-color: rgba(255, 255, 255, 0.5);
  /* Sammanslagen med en andra .cost_attendant-regel som lag ~25 rader
     langre ner. Ingen av egenskaperna krockade, sa utfallet ar oforandrat. */
  line-height: 1.5;
    width: 100%;
}


h4.cost_name {
  margin: -0.35em -0.35em 1em;
	font-size: 1.5em;
	font-family: 'Nunito', sans-serif;
	background-color: #efe9e6;
	padding: 0.5em 0.5em 0.5em;
	color: #5a5555;
	vertical-align: bottom;
}

h4.cost_name i {
  font-size: 2em;
  color: #d5605e;
  margin-bottom: 0em;
  vertical-align: bottom;
}


.cost_attendant h5 {
  font-family: 'Nunito', sans-serif;
  color: #d5605e;
  font-size: 1.2em;
}
.cost_attendant table {
  width: 80%;
}
.cost_right {
  text-align: right;
}


/* -------- VERKTYGSKLASSER: flex och bredder --------------------------- */
.flexColumns {
  display: flex;
  flex-direction: column;
}
.flexRows {
  display: flex;
  flex-direction: row;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.flex4 {
  flex: 4;
}
.width1em {
  width: 1em;
}
.width4em {
  width: 4em;
}
.width6em {
  width: 6em;
}
.width10em {
  width: 10em;
}


thead tr {
  border-bottom: 2px solid #252525;
  font-weight: bold;
}

/* -------- KNAPPGRUND (huvuddelen ligger i button.css) ----------------- */
.button {
  font-size: inherit;
}
.button img {
  max-height: 1.25em;
  vertical-align: sub;
}

.expandContainer {
  display: none;
}


.redBoarder {
  border: 1px solid red;
}

.noWrap {
  white-space: nowrap;
}

.small {
  font-size: 1em;
}

.smaller {
  font-size: 0.75em;
}

.previousContainer span {
  font-weight: bold;
  color: var(--mild-blueblack);
}

.previousContainer {
  padding: 0.4em 0;
  text-align: right;
}

.previousContainer a:hover {
  text-decoration: underline;
}

/* -------- KOSTNADENS DETALJRADER OCH UPPLADDNINGSYTOR ----------------- */
.cost p.costPayer {
  margin: 0.5em 0 0 0.25em;
}
.cost p.costDate {
  margin: 0.5em 0 0 0.25em;
}
.cost p.costPlace {
  margin: 0.5em 0 0 0.25em;
}

.cost .costDescription {
  margin: 2em 0 1em 0;
  max-width: 100%;
}

.splash {
  background-image: var(--start-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: -1em -1em -1em 0;
}


.dropzone:hover {
  cursor: pointer;
}

/* Visuell aterkoppling pa uppladdningsytorna. Tidigare fanns ingen alls -
   ytan sag exakt likadan ut oavsett om man holl musen over den eller drog en
   fil rakt over den (koden for det lag utkommenterad i inskick.js).
   Klassen dragOver sätts av inskick.js medan en fil dras over ytan.

   Reglerna gäller bara div.dropzone, dvs. de tre "släpp filen här"-ytorna.
   Knapparna "Byt bild"/"Välj bild" har ocksa klassen dropzone men ar riktiga
   <button>-element och ska behalla sitt vanliga knapputseende - darfor
   div-prefixet, sa att .button:hover inte skrivs over.

   Ramen ar streckad for att signalera att ytan gar att slappa filer pa.
   box-sizing: border-box galler globalt (se toppen av filen), sa ramen
   forandrar inte elementets yttermatt. */
div.dropzone {
  border: 2px dashed rgba(73, 92, 126, 0.35);
  border-radius: 4px;
  transition: background-color 150ms ease, border-color 150ms ease;
}

div.dropzone:hover {
  background-color: rgba(73, 92, 126, 0.08);
  border-color: rgba(73, 92, 126, 0.6);
}

/* Nar en fil faktiskt dras over ytan: tydligare an hover, sa det gar att se
   skillnad pa "musen ar har" och "slapp nu". */
div.dropzone.dragOver {
  background-color: var(--pastel-green, #c9e4de);
  border-color: var(--mild-blueblack, #495c7e);
  border-style: solid;
}

header .dropzone {
  margin-top: -1.5em;
  margin-bottom: -1.5em;
  padding: 1.5em 0;
}

.cost .dropzone {
  margin: 1em 0;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 1em;
  text-align: center;
}

.cost p.costImage {
  margin: 0 0 1em 0;
}

.uploadCostImage {
  position: relative;
}

.progressBarContainer {
  width: 100%;
  height: 1em;
  border-radius: 0.5em;
  position: relative;
  overflow: hidden;
}
.progressBar {
  background-color: rgba(0, 255, 0, 0.75);
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: green;
  text-align: right;
  overflow: hidden;
}

/* -------- LADDNINGSINDIKATOR ------------------------------------------ */
.fetchingChangesBg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
}

.fetchingChanges {
  padding: 2em;
  border: 1px solid green;
}

/* -------- MODAL ------------------------------------------------------- */
.modalBg {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(22, 24, 26, 0.32);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1;
  padding: 2em;
}
.modalWrapper {
  position: relative;
  background-color: white;
  display: flex;
  padding: 5em;

  max-width: calc(100% - 5em);
  border-radius: 1.5em;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 0 1px hsla(0, 0%, 100%, 0.08);
  max-height: 100%;
}

.modalContent {
  max-width: 100%;
  overflow: auto;
}

.close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.25em;
  border-radius: 0.25em;
  font-size: 2em;
  color: #707f8f;
}
.close:hover {
  cursor: pointer;
  background-color: #eee;
}

.maxWidth10 {
  max-width: 10em;
}

.overflowDots {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* -------- MEDDELANDEN: fel, info, inloggning -------------------------- */
.error {
  background-color: rgb(250, 226, 227);
  color: rgb(236, 85, 93);
  padding: 0.5em 1em;
  margin: 1em 0em;
  border-radius: 0.25em;
}

.error p {
  margin: 0.5em;
}

.error ul {
  margin: 0.5em 0em;
  list-style: disc;
}

.error li {
  margin: 0 0 0 2em;
}

.info {
  background-color: rgb(219, 239, 251);
  padding: 0.5em 1em;
  margin: 1em 0em;
  border-radius: 0.25em;
}

.hidden {
  display: none;
}

.login h3 {
  font-size: 1em;
  color: gray;
}

.loginField {
  background-color: gray;
}

.login .button {
  font-size: 1em;
  padding: 0.25em 0.5em;
}


/* -------- UNDERNAVIGERING (kort/tabell-vaxling) ----------------------- */
.subNav {
  margin: 0 0 1em;
  font-family: 'Barlow', sans-serif;
  display: flex;
  vertical-align: middle;
  padding-top: 0.25em;
}
.subNav li {
  display: inline-block;
  border: 1px solid var(--mild-blueblack);
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 0.8em;
  text-transform: uppercase;
  color: var(--mild-blueblack);
  margin: 0 0 0 -0.4em;
  text-align: center;
}

.subNav li:hover {
  cursor: pointer;
}

.subNav li:first-child {
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  margin: 0;
}

.subNav li:last-child {
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}

.subNav li.marked a {
  color: white;
  background-color: var(--mild-blueblack);
}

.subNav li.marked {
  color: white;
  background-color: var(--mild-blueblack);
}

/* "Visa som kort"/"Visa som tabell" var tidigare rena <li>-flikar utan koppling
   till tangentbordet. Texten ligger nu i en riktig <button> inuti samma <li>
   (li:n behåller sin klick-hantering och sitt utseende oförändrat) så att fliken
   även går att nå och växla med tangentbordet. */
.subNav li button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* -------- KORT- OCH TABELLVISNING, MARKERINGAR ------------------------ */
.costsCards, .costsTable {
  display: none;
}

.costsTable td {
  max-width: 8em;
}

div.show {
  display: block;
}

table.show {
  display: table;
}

.hide {
  display: none;
}

/* Markeringarna nar ett varde uppdateras (gront) eller tas bort (rott).
   Fargtoningen sköttes tidigare av jQuery UI via .addClass("updating", 500) -
   ett API som inte finns i jQuery core, och som var hela skalet till att
   jQuery UI (286 KB) laddades. Toningen ligger nu i CSS istallet, och JS
   satter bara klassen (se flashUpdate/flashDelete i scripts.js). */
.updating {
  background-color: lightgreen !important;
  transition: background-color 400ms ease;
}

.deleting {
  background-color: lightcoral !important;
  transition: background-color 400ms ease;
}

input.apple-switch {
  position: relative;
  -webkit-appearance: none;
  outline: none;
  width: 50px;
  height: 30px;
  background-color: #fff;
  /* Bytt fran #D9DADC (~1.2:1 mot vitt) till --mild-blueblack (~6.7:1),
     for att uppfylla WCAG 1.4.11 (Non-text Contrast, kravet ar 3:1) for
     gransen pa ett UI-komponent. */
  border: 1px solid var(--mild-blueblack, #495c7e);
  border-radius: 50px;
  box-shadow: inset -20px 0 0 0 #fff;
  cursor: pointer;
  flex-shrink: 0;
}

input.apple-switch:focus-visible {
  /* Den globala button:focus-visible-regeln traffar inte input-element,
     sa reglaget behover sin egen - annars finns inget synligt fokus alls
     vid tangentbordsnavigering (WCAG 2.4.7). */
  outline: 2px solid var(--mild-blueblack, #1a4a6e);
  outline-offset: 2px;
}

input.apple-switch:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  background: transparent;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}

input.apple-switch:checked {
  /* Morkare gron (~5.1:1 mot vitt) an originalets #4ed164 (~2:1), av samma
     kontrastskal som ovan - fyllningen ar ocksa en UI-komponentgrans. */
  box-shadow: inset 20px 0 0 0 #1e7e34;
  border-color: #1e7e34;
}

input.apple-switch:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

/* -------- GODKANNANDE: EGNA REGLAGE OCH OVRIGA DELTAGARES STATUS ------ */
/* Egen rad ("Jag ar klar" / "Jag godkanner") - reglage i samma stil som
   Carls andra sajt (zinken.se/ecoflow), anpassat till ljust lage (den
   sajten kor dark mode). Hela raden ar klickytan (label om bade text och
   switch), med synligt fokus pa hela raden - inte bara pa den visuellt
   dolda checkboxen. Lagen (vanster/hoger) ar den primara, icke-fargbaserade
   signalen for pa/av (WCAG 1.4.1 anvands inte fargen ensam). */
.approvalToggles {
  margin-top: 0.5em;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 10px;
  cursor: pointer;
  max-width: 100%;
  user-select: none;
  font: inherit;
  color: var(--mild-black, #4a4a4a);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  margin: 0 0 0.6em 0;
}

.switch-row:hover {
  background: var(--main-bg-color, #eceef0);
  border-color: #c7cdd4;
}

.switch-row:focus-within {
  /* Rutan far ett tydligt fokusskal aven fast checkboxen sjalv ar
     visuellt dold (se .switch-input nedan) - WCAG 2.4.7. */
  box-shadow: 0 0 0 3px rgba(73, 92, 126, 0.3);
  border-color: var(--mild-blueblack, #495c7e);
}

.switch-label-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mild-black, #4a4a4a);
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  flex: 0 0 auto;
}

/* Dolj checkboxen visuellt men behall tillganglighet - fokus/tangentbord/
   skarmlasare gar fortfarande via det riktiga input-elementet. */
.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  /* Gra (~3,6:1 mot vitt) istallet for referensens morka #30363d (som var
     tank for morkt lage) - uppfyller WCAG 1.4.11 aven i ljust lage. */
  background: #7d8797;
  transition: .25s;
}

.switch-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: .25s;
}

.switch-input:checked + .switch-slider {
  /* Samma grona ton som anvands for "klart"/"godkant" pa annat hall i
     appen (statusBadge-done, approvalBanner-success) - 5,1:1 mot vitt,
     istallet for referensens #3fb950 som bara ger ~2,5:1. */
  background: #1e7e34;
}

.switch-input:checked + .switch-slider::before {
  transform: translateX(22px);
}

.switch-input:disabled + .switch-slider {
  opacity: .5;
}

/* Ovriga deltagares status - samma platta rut-formel som .error/.info
   ovan (bakgrundsfarg + padding + rundade horn, ingen kant, ingen ikon) -
   istallet for inaktiverade kryssrutor som sag ut som (men inte agerade
   som) kontroller, eller badges som inte matchade appens ovriga
   status/info-rutor (se Carls feedback). Texten skiljer sig at mellan
   lagena, sa betydelsen inte bara ligger i fargen (WCAG 1.4.1). */
.approvalStatus {
  margin-top: 0.5em;
}

.statusRow {
  margin: 0 0 0.4em 0;
}

.statusBadge {
  display: block;
  padding: 0.5em 1em;
  border-radius: 0.25em;
  font-weight: 400;
}

.statusBadge-pending {
  /* Ljusare/blekare an --pastel-yellow (som anvands pa stallen med hardare
     kontrastbehov) - Carl tyckte den var for stark har. */
  background-color: #fdf6df;
  color: var(--mild-black, #4a4a4a);
}

.statusBadge-done {
  background-color: var(--pastel-green, #c9e4de);
  color: var(--mild-black, #4a4a4a);
}

/* Overgripande godkannande-banner i toppen av aktiviteten - samma
   formel igen. Visas bara nar minst en person har godkant, se
   getApprovalSummary() i functions.php. */
.approvalBanner {
  padding: 0.75em 1em;
  border-radius: 0.25em;
  font-weight: 600;
  width: 100%;
}

.approvalBanner-success {
  background-color: var(--pastel-green, #c9e4de);
  color: var(--mild-black, #4a4a4a);
}

.approvalBanner-info {
  background-color: var(--pastel-blue, #c6def1);
  color: var(--mild-black, #4a4a4a);
}

.approvalBanner-action {
  background-color: var(--pastel-orange, #f7d9c4);
  color: var(--mild-black, #4a4a4a);
}

/* -------- FORMULARSVEP OCH LAGG-TILL-KNAPPAR -------------------------- */
.addCostRowContainer {
  display: none;
}

.label_wrap {
  position: relative;
}

.label_wrap label {
  color: #666;
  padding: 0.5em 1em;
  position: absolute;
  top: 0;
  left: 0;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
  pointer-events: none;
  background-color: #f2f2f2;
}

.label_wrap input:focus + label, .label_wrap input:not(:placeholder-shown) + label, .label_wrap select + label, .label_wrap [type=date] + label, .label_wrap [type=month] + label, .label_wrap textarea:focus + label {
  font-size: 0.75em;
  top: -0.75em;
  left: 0;
  padding: 0 1em;
}

.label_wrap input::placeholder, .label_wrap textarea::placeholder, .label_wrap select::placeholder {
  color: transparent;
}

.startPageList {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.addButton {
  text-align: center;
  font-size: 0.75em;
  padding: 0.5em;
  border-radius: 0.25em;
  /* Explicit flex-stapling av ikon- och textraden (istallet for att bara lita
     pa att tva block-element rakar hamna under varandra) - det gjorde att
     "Ladda upp kvitto" och "Lägg till kostnad" hamnade snett/omlott med
     varandra sedan elementet blev en riktig <button>. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.addButton .material-icons {
  font-size: 3em;
}

.addButton:hover {
  background-color: #fff;
  cursor: pointer;
}

/* Mellanrum mellan tva knappar som star bredvid varandra i samma rad
   (t.ex. "Ladda upp kvitto" och "Lägg till kostnad") - utan detta ligger
   knapparna dikt an mot varandra. */
.addButton + .addButton {
  margin-left: 0.5em;
}

/* Luft under rubrikraden med "Ladda upp kvitto"/"Lägg till kostnad"/
   "Lägg till deltagare", innan innehållet under (kostnadslistan/
   deltagarlistan) börjar. */
.sectionHeader {
  margin-bottom: 0.75em;
}

/* -------- OVRIGT: tabellsvep, aktivitetsserier, statusrader ----------- */
.meMy {
  border-left: 0.25em solid #269CE9;
}

/* Sveper i sidled istallet for att tyst klippa av innehall (t.ex. Swisha-
   knappen) om tabellen nagon gang blir bredare an sitt utrymme - paverkar
   inget om allt redan far plats. */
.tableScroll {
  overflow-x: auto;
}

/* Kostnadsnamnet i tabellvyn ar en knapp (se costs_table.php) for att raden
   ska ga att oppna med tangentbordet. Den ska dock inte SE ut som en knapp -
   harifran ser den ut precis som texten gjorde tidigare. Arver farg och
   typografi fran cellen, och behaller cellens avkortning med "..." for langa
   namn (td har overflow: hidden + text-overflow: ellipsis, vilket inte arvs
   in i knappen automatiskt). */
.costRowOpen {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}


.nordeaAction:hover {
  cursor: pointer;
}

.analyzingUpload {
  font-weight: bold;
  color: var(--mild-blueblack);
}

.analyzingUpload img {
  vertical-align: bottom;
}

.somethingWentWrong {
  font-weight: bold;
  color: lightcoral;
}

.groupActivitiesWrapper {
  overflow: hidden;
  width: 100%;
}

.groupActivities {
  white-space: nowrap;
  overflow: auto;
  padding: 0;
  margin: 1em 0 0;
}

.groupActivities::-webkit-scrollbar {
    height: 0px; /* Sätt höjden på den horisontella scrollbaren till 0 */
}

.groupActivities li {
  display: inline-block;
  width: 10em;
  background-color: #fff;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 0.5em;
  border-radius: 0.5em 0.5em 0 0;
}

.groupActivities li.active {
  background-color: #eee;
}

.groupActivities li:hover {
  font-weight: bold;
  background-color: #eee;
}

.groupActivities li a {
  display: block;
  width: 100%;
  height: 100%;
}

.groupActivities li a:hover {
  text-decoration: none;
}

.addActivityImage img {
  max-width: 20em;
}


.activityDates {
  font-size: 0.6em;
  background-color: #eee;
  padding: 0.05em 0.5em;
  color: #252525;
  display: inline-block;
}