/* stil.css
   Vanlig webbsidebakgrund, eller en egen bild per månad, bakom en halvgenomskinlig yta,
   mossgrönt för det valda och för inkomster, rött för utgifter och borttagning. */

/* Typsnittet ligger i appens egen mapp, så ingen extern sajt kontaktas */
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap;
  src: url("typsnitt/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap;
  src: url("typsnitt/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap;
  src: url("typsnitt/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* ---------- Färger (tokens) ---------- */
:root {
  --yta: rgba(255, 255, 255, 0.88);
  --ruta: rgba(255, 255, 255, 0.72);
  --falt: #ffffff;
  --text: #31333f;
  --text-svag: #6b6e7a;
  --linje: rgba(49, 51, 63, 0.14);
  --rutnat: rgba(47, 93, 58, 0.22);
  --gron: #2f5d3a;
  --bla: #1d5fae;
  --gron-mork: #1f4128;
  --gron-ljus: rgba(47, 93, 58, 0.12);
  --rod: #c62828;
  --rod-mork: #8e1c1c;
  --rod-ljus: rgba(198, 40, 40, 0.1);
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --yta: rgba(18, 22, 20, 0.88);
    --ruta: rgba(30, 36, 32, 0.8);
    --falt: #1b201d;
    --text: #e8ece9;
    --text-svag: #a3aba6;
    --linje: rgba(232, 236, 233, 0.16);
    --rutnat: rgba(95, 157, 110, 0.3);
    --gron: #5f9d6e;
    --bla: #8ab8ff;
    --gron-mork: #4b8a5b;
    --gron-ljus: rgba(95, 157, 110, 0.2);
    --rod: #ef6b6b;
    --rod-mork: #d55252;
    --rod-ljus: rgba(239, 107, 107, 0.14);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --yta: rgba(18, 22, 20, 0.88); --ruta: rgba(30, 36, 32, 0.8); --falt: #1b201d;
  --text: #e8ece9; --text-svag: #a3aba6; --linje: rgba(232, 236, 233, 0.16); --rutnat: rgba(95, 157, 110, 0.3);
  --bla: #8ab8ff;
  --gron: #5f9d6e; --gron-mork: #4b8a5b; --gron-ljus: rgba(95, 157, 110, 0.2);
  --rod: #ef6b6b; --rod-mork: #d55252; --rod-ljus: rgba(239, 107, 107, 0.14);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  /* Canvas är webbläsarens egen sidfärg: vit i ljust läge, mörk i mörkt läge.
     Resten gäller en egen månadsbild: centrerad, fyller fönstret och står still när sidan skrollas. */
  background: Canvas center / cover no-repeat fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gron); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Ytan och rutorna ---------- */
.ram {
  max-width: 1180px;
  margin: 2.5rem auto;
  padding: 1.75rem 2.25rem 2.25rem;
  background: var(--yta);
  border-radius: 16px;
}
.topp { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
h1 { font-size: 2.25rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.ruta {
  background: var(--ruta);
  border: 1px solid var(--linje);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.stapel { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
/* Layouten från Inställningar (layout.js). Kolumnernas bredd sätts direkt på .layout. */
/* minmax(0, 1fr): kolumnens enda spår är exakt så brett som kolumnen. Utan det växer spåret efter
   den bredaste rutans innehåll, och rutorna sticker ut ur sin kolumn. */
.layoutkolumn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-width: 0; }
/* Fri layout: 12 kolumner och rader på 40 pixlar. Varje ruta får sin plats med grid-column och grid-row.
   Innehåll som inte får plats i rutan går att skrolla i, i stället för att flyta ut över grannen. */
.layout[data-layout="fri"] { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 40px; align-items: stretch; }
.layout[data-layout="fri"] > .ruta { overflow: auto; min-height: 0; min-width: 0; }
/* Anteckningar: textfältet fyller rutan. I fri layout har rutan en fast höjd, och då växer fältet med den. */
.anteckningstext { width: 100%; min-height: 8rem; resize: vertical; overflow: auto; font: inherit; line-height: 1.5; padding: 0.6rem 0.7rem;
  border: 1px solid var(--linje); border-radius: 8px; background: var(--falt); color: var(--text); overflow-wrap: anywhere; }
.anteckningstext:focus { outline: none; border-color: var(--gron); box-shadow: 0 0 0 3px var(--gron-ljus); }
/* Textfältet är ett vanligt element (contenteditable), som saknar placeholder. Klassen tom sätts av app.js. */
.anteckningstext.tom::before { content: attr(data-platshallare); color: var(--text-svag); pointer-events: none; float: left; }
.anteckningstext ul, .anteckningstext ol { margin: 0.15rem 0; padding-left: 1.5rem; }
.anteckningstext li { margin: 0.1rem 0; }
.anteckningstext ul ul { list-style-type: circle; }
.anteckningstext ul ul ul { list-style-type: square; }
.anteckningstext ol ol { list-style-type: lower-alpha; }
.listverktyg { display: flex; gap: 0.35rem; margin: -0.2rem 0 0.45rem; }
.listknapp { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 1.75rem; border: 1px solid var(--linje);
  border-radius: 6px; background: var(--falt); color: var(--text); padding: 0; cursor: pointer; }
.listknapp:hover { border-color: var(--gron); color: var(--gron); }
.listknapp[aria-pressed="true"] { background: var(--gron-ljus); border-color: var(--gron); color: var(--gron); }
/* Rubriken går att klicka på för att byta namn. Pennan syns svagt och tydligare när pekaren är över. */
.anteckningsrubrik { display: flex; align-items: center; min-width: 0; }
/* Lite luft runt texten, så att ringen inte ligger tätt intill. Den negativa marginalen håller texten kvar på samma ställe. */
.rubrikknapp { display: inline-flex; align-items: baseline; gap: 0.4rem; max-width: calc(100% + 0.8rem); border: 1px solid transparent;
  background: none; padding: 0.05rem 0.4rem; margin: -0.1rem -0.4rem; font: inherit; color: inherit; text-align: left; cursor: text;
  border-radius: 6px; transition: border-color 0.12s; }
/* Ringen när pekaren är över rubriken visar att den går att klicka på och ändra */
.rubrikknapp:hover { border-color: var(--gron); }
.rubrikknapp:focus-visible { outline: none; border-color: var(--gron); box-shadow: 0 0 0 3px var(--gron-ljus); }
.rubriknamn { overflow-wrap: anywhere; }
.penna { font-size: 0.8em; color: var(--text-svag); opacity: 0.5; }
.rubrikknapp:hover .penna, .rubrikknapp:focus-visible .penna { opacity: 1; color: var(--gron); }
.rubrikfalt { font: inherit; width: 100%; padding: 0.1rem 0.35rem; }
.layout[data-layout="fri"] > .ruta:has(> .anteckningstext) { display: flex; flex-direction: column; }
.layout[data-layout="fri"] > .ruta > .anteckningstext { flex: 1; resize: none; }
/* I fritt läge bestämmer rutans storlek i rutnätet, så en sparad höjd från de andra lägena gäller inte */
.layout[data-layout="fri"] > .ruta > .anteckningstext[style] { height: auto !important; }
.svag { color: var(--text-svag); font-size: 0.9rem; }
.tom { color: var(--text-svag); margin: 0; }

/* ---------- Flikar ---------- */
.flikar { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--ruta);
  border: 1px solid var(--linje); border-radius: 12px; }
.flik { border: 0; background: none; padding: 0.45rem 1.1rem; border-radius: 9px; cursor: pointer; font-weight: 600; }
.flik:hover { color: var(--gron); }
.flik[aria-selected="true"] { background: var(--gron); color: #fff; }
/* Kugghjulet: margin-left:auto tar allt utrymme som blir över i raden och skjuter knappen längst till höger */
.kugghjul { margin-left: auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0;
  background: var(--ruta); border: 1px solid var(--linje); border-radius: 12px; cursor: pointer; color: var(--text); }
.kugghjul svg { width: 1.3rem; height: 1.3rem; }
.kugghjul:hover { color: var(--gron); }
.kugghjul[aria-current="page"] { background: var(--gron); border-color: var(--gron); color: #fff; }

/* ---------- Inställningar ---------- */
/* auto-fill gör så många kolumner som ryms, minst 150 px breda */
.bakgrundsrutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
/* align-content: start hindrar att kortets rader sträcks ut när ett grannkort i raden är högre */
.bakgrundskort { display: grid; align-content: start; gap: 0.45rem; padding: 0.5rem; border: 1px solid var(--linje); border-radius: 10px; background: var(--falt); }
.bakgrundskort.nu { border-color: var(--gron); box-shadow: 0 0 0 1px var(--gron); }
/* Bredden är fast, så att höjden räknas ut från bredden och inte tvärtom */
.miniatyr { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; background: center / cover no-repeat; display: grid; place-items: center; }
/* Utan egen bild visar rutan samma färg som standardbakgrunden, med streckad kant */
.miniatyr.standard { background: Canvas; border: 1px dashed var(--linje); }
.miniatyr.standard span { font-size: 0.8rem; font-weight: 600; color: var(--text-svag); }
.bakgrundsnamn { display: flex; align-items: center; gap: 0.4rem; }
.nu-markering { font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--gron); border-radius: 999px; padding: 0 0.45rem; }
.animerad-markering { font-size: 0.75rem; font-weight: 600; color: var(--text-svag); border: 1px solid var(--linje); border-radius: 999px; padding: 0 0.45rem; }
.bakgrundsnamn { flex-wrap: wrap; }
#kopia-bakgrunder-storlek { white-space: nowrap; }
.snabbval { margin: 0 0 0.9rem; }

/* ---------- Layout i Inställningar ---------- */
.layouttyper { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.layouttyp { display: grid; justify-items: center; gap: 0.35rem; padding: 0.55rem 0.4rem; border: 1px solid var(--linje);
  border-radius: 10px; background: var(--falt); cursor: pointer; font-size: 0.85rem; }
.layouttyp:hover { border-color: var(--gron); }
.layouttyp[aria-checked="true"] { border-color: var(--gron); box-shadow: 0 0 0 1px var(--gron); font-weight: 600; }
/* Små bilder av layouttyperna, ritade med CSS */
.typikon { display: grid; gap: 3px; width: 56px; height: 36px; }
.typikon span { background: var(--gron-ljus); border: 1px solid var(--gron); border-radius: 3px; }
.typ-en { grid-template-columns: 1fr; }
.typ-stor-smal { grid-template-columns: 2.3fr 1fr; }
.typ-smal-stor { grid-template-columns: 1fr 2.3fr; }
.typ-tre { grid-template-columns: 1fr 1fr 1fr; }
.typ-fri { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); }
.typ-fri span:nth-child(1) { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.typ-fri span:nth-child(2) { grid-column: 5 / span 2; grid-row: 1 / span 4; }
.typ-fri span:nth-child(3) { grid-column: 2 / span 3; grid-row: 3 / span 2; }
/* Förhandsvisningen. container-type gör att storlekarna inuti kan anges i procent av dess bredd (cqw):
   1108 pixlar på sidan motsvarar hela bredden, så proportionerna blir desamma som på sidan. */
.forhand-ram { container-type: inline-size; padding: 0.6rem; border: 1px dashed var(--linje); border-radius: 10px; }
.forhand { display: grid; gap: 1.44cqw; align-items: start; }
.fkol { position: relative; display: grid; gap: 1.44cqw; align-content: start; min-height: 12cqw;
  border-radius: 6px; background: var(--gron-ljus); padding: 0.3rem; }
.fruta { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.3rem;
  min-height: calc(var(--h) * 5.05cqw - 1.44cqw); padding: 0.35rem 0.45rem; border: 1px solid var(--linje); border-radius: 6px;
  background: var(--falt); font-size: 0.82rem; font-weight: 600; cursor: grab; touch-action: none; user-select: none; }
.fruta:hover { border-color: var(--gron); }
/* Namnet vill ha minst 6rem. Får det inte plats bredvid knapparna flyttar knapparna ner på en egen rad. */
.fruta { flex-wrap: wrap; row-gap: 0.25rem; }
.frutanamn { flex: 1 1 6rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Mellanrummet mellan Byt namn och Ta bort gör det svårare att trycka på fel knapp.
   Båda är grå. Byt namn blir blå och Ta bort röd när pekaren är på knappen. */
.fknappar { display: flex; flex: none; gap: 1rem; }
.fgom.fbytnamn:hover { color: var(--bla); }   /* två klasser, så att den går före .fgom:hover längre ner */
.fgom { flex: none; border: 0; background: none; padding: 0 0.15rem; color: var(--text-svag); font-size: 0.75rem; cursor: pointer; }
.fgom:hover { color: var(--rod); text-decoration: underline; }
.fruta.flyttas { opacity: 0.35; }
.fdrag { position: fixed; z-index: 50; pointer-events: none; opacity: 0.9; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.flinje { position: absolute; left: 0.2rem; right: 0.2rem; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--gron); pointer-events: none; }
body.drar, body.drar * { cursor: grabbing !important; user-select: none; }
/* Fria läget: samma rutnät som på sidan, 12 kolumner och rader på 40 pixlar, räknat i cqw */
/* Rutnätet i bakgrunden: en linje mitt i varje mellanrum, både lodrätt och vågrätt. Ett steg är en kolumn
   plus ett mellanrum, (100% + mellanrummet) / 12 i sidled och en rad plus ett mellanrum (5,05cqw) i höjdled.
   Mönstret flyttas ett halvt mellanrum åt vänster och uppåt, så att linjerna hamnar mitt i mellanrummen. */
.forhand.fri { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 3.61cqw; align-items: stretch; min-height: 30cqw;
  background-image: linear-gradient(to right, var(--rutnat) 1px, transparent 1px), linear-gradient(to bottom, var(--rutnat) 1px, transparent 1px);
  background-size: calc((100% + 1.44cqw) / 12) 5.05cqw; background-position: -0.72cqw -0.72cqw;
  border: 1px solid var(--rutnat); }
.forhand.fri .fruta { min-height: 0; overflow: hidden; }
.forhand.fri .fruta.aktiv { border-color: var(--gron); box-shadow: 0 0 0 1px var(--gron); z-index: 2; }
.fhandtag { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; border-radius: 0 0 6px 0;
  background: linear-gradient(135deg, transparent 50%, var(--gron) 50%); }
.fruta.kopia { border-style: dashed; }
/* Lägg till ruta: en rullgardin under knappen */
.laggtill { position: relative; border-top: 0; padding-top: 0; margin-top: 0; }   /* utan linjen som andra details har */
.laggtill > summary { list-style: none; display: inline-block; }
.laggtill > summary::-webkit-details-marker { display: none; }
/* Andra details får luft under rubriken när de öppnas. Här ligger listan ovanpå sidan i stället,
   så luften skulle bara knuffa ner allt under knappen. */
.laggtill[open] > summary { margin-bottom: 0; }
.laggtill > summary::after { content: " ▾"; }
.laggtill-lista { position: absolute; z-index: 20; top: calc(100% + 0.3rem); left: 0; width: max-content; min-width: 12rem; max-width: 80vw; margin: 0; padding: 0.3rem;
  list-style: none; background: var(--falt); border: 1px solid var(--linje); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
/* border-box: bredden 100 % räknas med utfyllnaden, så att valet och dess markering ryms i menyn */
.laggtill-val { display: block; box-sizing: border-box; width: 100%; text-align: left; padding: 0.45rem 0.6rem; border: 0; border-radius: 7px;
  background: none; cursor: pointer; font-size: 0.9rem; }
.laggtill-val:hover:not(:disabled) { background: var(--gron-ljus); }
.laggtill-val:focus-visible { outline-offset: -3px; }   /* ramen för tangentbordet ritas innanför, så att den inte sticker ut ur menyn */
.laggtill-val:disabled { cursor: default; opacity: 0.55; }
/* Frågefönstret som ersätter webbläsarens confirm() */
/* Två klasser, så att bredden går före .handelsedialog som står längre ner i filen */
.handelsedialog.fragedialog { width: min(26rem, calc(100vw - 2rem)); }
.fragedialog h2 { margin-bottom: 0.4rem; }
.fragedialog p { margin: 0 0 1rem; }
.frageknappar { justify-content: flex-end; }
.steglista { margin: 0.5rem 0; padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.steglista .kodrad { margin-top: 0.3rem; }

/* ---------- Knappar ---------- */
.knapp {
  border: 1px solid var(--linje); background: var(--falt);
  border-radius: 8px; padding: 0.45rem 0.95rem; cursor: pointer;
}
.knapp:hover { border-color: var(--gron); color: var(--gron); }
.knapp:disabled { opacity: 0.5; cursor: not-allowed; }
.knapp.primar, .knapp.inkomst { background: var(--gron); border-color: var(--gron); color: #fff; font-weight: 600; }
.knapp.primar:hover, .knapp.inkomst:hover { background: var(--gron-mork); border-color: var(--gron-mork); color: #fff; }
.knapp.utgift, .knapp.farlig { background: var(--rod); border-color: var(--rod); color: #fff; font-weight: 600; }
.knapp.utgift:hover, .knapp.farlig:hover { background: var(--rod-mork); border-color: var(--rod-mork); color: #fff; }
.knapp.liten { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.lank { border: 0; background: none; padding: 0.15rem 0.3rem; color: var(--rod); cursor: pointer; font-size: 0.85rem; border-radius: 6px; }
.lank:hover { text-decoration: underline; }
.lank.gron { color: var(--gron); }
.lank.bla { color: var(--bla); }
.knapprad { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pil {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: var(--gron); color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.pil:hover { background: var(--gron-mork); }
.pil svg { width: 20px; height: 20px; }

/* ---------- Fält ---------- */
.falt { display: grid; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; }
input, select, textarea {
  width: 100%; border: 1px solid var(--linje); border-radius: 8px;
  padding: 0.45rem 0.6rem; background: var(--falt); font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gron); box-shadow: 0 0 0 3px var(--gron-ljus); }
input[type="checkbox"] { width: auto; accent-color: var(--gron); }
textarea { resize: vertical; min-height: 4.5rem; }
.formular { display: grid; gap: 0.7rem; }
.tva { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.kryss { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; cursor: pointer; }

/* ---------- Månadsväljaren ---------- */
.manadsval { margin-bottom: 1rem; }
.arsrad { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.arsrad .ar { font-weight: 700; font-size: 1.15rem; margin: 0 auto 0 0.35rem; }
.manader { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; }
.manad-knapp { border: 1px solid var(--linje); background: var(--falt); border-radius: 8px;
  padding: 0.45rem 0.3rem; cursor: pointer; text-align: center; }
.manad-knapp:hover { border-color: var(--gron); }
/* En tom rad är lika hög som en rad med text (radhöjden 1.45 gånger textstorleken), och texten radbryts aldrig.
   Då har knapparna samma höjd vilket år som helst, och sidan hoppar inte när du byter år. */
.manad-knapp .antal { font-size: 0.8rem; color: var(--text-svag); min-height: calc(0.8rem * 1.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manad-knapp[aria-pressed="true"] { background: var(--gron); border-color: var(--gron); color: #fff; font-weight: 600; }
.manad-knapp[aria-pressed="true"] .antal { color: rgba(255, 255, 255, 0.85); }

/* ---------- Nyckeltal ---------- */
.nyckeltal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.nyckeltal div { display: grid; }
.nyckeltal .etikett { font-size: 0.85rem; color: var(--text-svag); }
.nyckeltal .varde { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.negativ { color: var(--rod); }

/* ---------- Tabeller ---------- */
.tabellram { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th { text-align: left; font-size: 0.8rem; font-weight: 600; color: var(--text-svag); padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--linje); }
td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--linje); vertical-align: top; }
td.tal, th.tal { text-align: right; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.markor { display: inline-block; font-size: 0.75rem; padding: 0 0.45rem; border-radius: 999px; white-space: nowrap; }
.markor.inkomst { background: var(--gron-ljus); color: var(--gron); }
.markor.utgift { background: var(--rod-ljus); color: var(--rod); }
.markor.info { background: var(--linje); color: var(--text-svag); }

/* ---------- Diagram ---------- */
.kategorier { display: grid; gap: 0.45rem; }
.kategori { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 6.5rem; gap: 0.6rem; align-items: center; font-size: 0.9rem; }
.kategori .stang-yta { height: 14px; background: var(--linje); border-radius: 4px; overflow: hidden; }
.kategori .fyllning { height: 100%; background: var(--rod); border-radius: 4px; }
.kategori .belopp { text-align: right; white-space: nowrap; }
.arsdiagram { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.35rem; align-items: end; height: 170px; margin-bottom: 0.25rem; }
.arsmanad { display: flex; gap: 2px; align-items: end; justify-content: center; height: 100%; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 4px; }
.arsmanad:hover { background: var(--gron-ljus); }
.arsmanad.vald { background: var(--gron-ljus); }
.arsmanad span { width: 40%; max-width: 16px; border-radius: 3px 3px 0 0; min-height: 0; }
.arsmanad .in { background: var(--gron); }
.arsmanad .ut { background: var(--rod); }
.arsetiketter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.35rem; text-align: center; font-size: 0.75rem; color: var(--text-svag); margin-bottom: 0.75rem; }
.forklaring { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-svag); margin-bottom: 0.75rem; }
.forklaring span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.forklaring .in::before { background: var(--gron); }
.forklaring .ut::before { background: var(--rod); }

/* ---------- Budget per kategori ---------- */
.ramrad { display: grid; grid-template-columns: 6.5rem 7rem minmax(0, 1fr); gap: 0.6rem; align-items: center;
  padding: 0.45rem 0; border-bottom: 1px solid var(--linje); }
.ramrad:last-of-type { border-bottom: 0; }
.ramrad.rubrikrad { font-size: 0.8rem; font-weight: 600; color: var(--text-svag); padding-top: 0; }
.ramrad input { padding: 0.3rem 0.5rem; text-align: right; }
.ramrad .uppfoljning { display: grid; gap: 0.2rem; font-size: 0.85rem; }
.ramrad .stang-yta { height: 10px; background: var(--linje); border-radius: 4px; overflow: hidden; }
.ramrad .fyllning { height: 100%; background: var(--gron); border-radius: 4px; }
.ramrad .fyllning.over { background: var(--rod); }
.ramsumma { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.ramsumma div { display: grid; }
.ramsumma .etikett { font-size: 0.8rem; color: var(--text-svag); }
.ramsumma .varde { font-weight: 700; font-size: 1.1rem; }

/* ---------- Listor i sidokolumnen ---------- */
.poster-lista { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.poster-lista li { display: grid; gap: 0.1rem; }
.poster-lista .rad { display: flex; justify-content: space-between; gap: 0.5rem; }
details { border-top: 1px solid var(--linje); padding-top: 0.6rem; margin-top: 0.6rem; }
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: 0.6rem; }
/* Ett recept i inköpslistan: linjen ovanför hör till hela posten, så att knapparna under rubriken räknas till samma recept */
.receptpost { border-top: 1px solid var(--linje); padding-top: 0.6rem; margin-top: 0.6rem; }
.receptpost > details { border-top: 0; padding-top: 0; margin-top: 0; }
.receptpost > .knapprad { margin-top: 0.15rem; }

/* ---------- Kalendern ---------- */
/* flex-wrap: får knapparna inte plats bredvid månadsnamnet, till exempel i en smal kolumn, hamnar de på nästa rad */
.kalenderhuvud { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.kalenderhuvud h2 { margin: 0 auto 0 0.35rem; white-space: nowrap; }
.rutnat { display: grid; grid-template-columns: 2.1rem repeat(7, minmax(0, 1fr)); gap: 4px; }
.rubrik-dag, .vecka { font-size: 0.8rem; color: var(--text-svag); text-align: center; padding: 0.25rem 0; }
.rubrik-dag.sondag { color: var(--rod); }
.vecka { align-self: start; padding-top: 0.55rem; }
.dag {
  min-height: 88px; display: flex; flex-direction: column; gap: 3px;
  padding: 0.3rem 0.35rem; border: 1px solid var(--linje); border-radius: 8px;
  background: var(--falt); text-align: left; cursor: pointer; overflow: hidden;
}
.dag:hover { border-color: var(--gron); }
.dag.annan { opacity: 0.45; }
.dag .nr { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; font-weight: 600; }
.dag.sondag .nr { color: var(--rod); }
.dag.idag .nr { background: var(--gron); color: #fff; }
.dag.vald { border: 2px solid var(--gron); background: var(--gron-ljus); padding: calc(0.3rem - 1px) calc(0.35rem - 1px); }
.helgnamn { font-size: 0.72rem; line-height: 1.2; color: var(--rod); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dag.helg .nr { color: var(--rod); }
.dag.idag.helg .nr { color: #fff; }
.lapp.extern { background: transparent; color: var(--gron); border: 1px solid var(--gron); }
.handelse.extern { border-style: dashed; }
.handelse .kalla { font-size: 0.8rem; color: var(--text-svag); }
.lapp { font-size: 0.76rem; line-height: 1.25; padding: 1px 6px; border-radius: 4px; background: var(--gron); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fler { font-size: 0.75rem; color: var(--text-svag); }
.prickar { display: none; gap: 3px; justify-content: center; }
.prickar span { width: 6px; height: 6px; border-radius: 50%; background: var(--gron); }
.handelse { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.55rem 0.65rem;
  border-radius: 8px; background: var(--falt); border: 1px solid var(--linje); }
.handelse .tid { font-weight: 600; color: var(--gron); }
.handelse .titel { font-weight: 600; overflow-wrap: anywhere; }
.handelse .anteckning { font-size: 0.9rem; color: var(--text-svag); white-space: pre-wrap; overflow-wrap: anywhere; }
.handelselista { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }

/* ---------- Veckovyn ---------- */
button.vecka { border: 0; background: none; cursor: pointer; border-radius: 6px; font: inherit; font-size: 0.8rem; text-decoration: underline; }
button.vecka:hover { color: var(--gron); background: var(--gron-ljus); }
.tabortval { display: grid; justify-items: end; align-content: start; }
.vspann { font-weight: 400; }
/* På en smal skärm får knapparna i veckans rubrikrad bryta till en ny rad i stället för att göra sidan bredare */
#veckovy .kalenderhuvud { flex-wrap: wrap; }
/* Minikalendern för att välja vecka. Den ligger ovanpå sidan, under knappen. */
.minikal-ram { position: relative; }
.minikal { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 17rem; padding: 0.6rem;
  background: var(--falt); color: var(--text); border: 1px solid var(--linje); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.minikal-huvud { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.minikal-huvud strong { flex: 1; text-align: center; }
.minikal .pil { width: 1.9rem; height: 1.9rem; }
.minikal .pil svg { width: 16px; height: 16px; }
.minikal-rutnat { display: grid; grid-template-columns: 1.9rem repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; margin-bottom: 0.4rem; }
.minikal-rutnat .mrubrik { font-size: 0.72rem; color: var(--text-svag); padding: 0.15rem 0; }
.minikal-rutnat button { border: 0; background: none; border-radius: 6px; padding: 0.3rem 0; font: inherit; font-size: 0.85rem; color: inherit; cursor: pointer; }
.minikal-rutnat button:hover { background: var(--gron-ljus); }
.minikal-rutnat .mvecka { font-size: 0.72rem; color: var(--text-svag); text-decoration: underline; }
.minikal-rutnat .annan { opacity: 0.45; }
.minikal-rutnat .rod { color: var(--rod); }
.minikal-rutnat .vald { background: var(--gron-ljus); }
.minikal-rutnat .idag { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--gron); }
.vhjalp { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.vecka-ram { overflow-x: auto; }
.veckorutnat { --timme: 2.5rem; display: grid; grid-template-columns: 3.2rem repeat(7, minmax(6.5rem, 1fr));
  background: var(--falt); border: 1px solid var(--linje); border-radius: 8px; overflow: hidden; min-width: 49rem; }
.vhorn, .vrubrik { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--linje); text-align: center; font-weight: 600; }
.vrubrik { border-left: 1px solid var(--linje); }
.vrubrik.rod .vdagnamn, .vrubrik.rod .vdatum { color: var(--rod); }
.vrubrik.idag { background: var(--gron); color: #fff; }
.vrubrik.idag.rod .vdagnamn, .vrubrik.idag.rod .vdatum { color: #fff; }
.vdatum { font-weight: 400; }
.vtidrubrik { height: calc(var(--timme) * var(--steg, 1)); padding: 0.1rem 0.35rem; font-size: 0.78rem; color: var(--text-svag); text-align: right;
  border-bottom: 1px solid var(--linje); }
.vheldagrubrik { height: auto; align-self: stretch; border-bottom-width: 2px; }
.vheldag { display: flex; flex-direction: column; gap: 2px; min-height: 2.2rem; padding: 2px; border-left: 1px solid var(--linje);
  border-bottom: 2px solid var(--linje); min-width: 0; }
.vhelgnamn { font-size: 0.72rem; line-height: 1.2; color: var(--text-svag); padding: 0 0.2rem; }
.vhelgnamn.rod { color: var(--rod); }
.vlagg { flex: 1; min-height: 1rem; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.vlagg:not(:disabled):hover, .vrad:not(:disabled):hover { background: var(--gron-ljus); }
.vlagg:disabled, .vrad:disabled { cursor: default; }
/* Den nuvarande timmen i dagens kolumn. Klassen sätts av markeraNu i app.js och flyttas varje timme. */
.vrad.nu { background: color-mix(in srgb, var(--gron) 35%, transparent); box-shadow: inset 3px 0 0 var(--gron); }
.vhuvud { display: block; }
/* Händelserna fyller hela dagens bredd. I redigeringsläget lämnas en remsa fri till höger,
   så att raden bakom en händelse går att klicka på. */
.veckorutnat.redigerar .vdag { --andel: 90%; }
.vdag { --andel: 100%; position: relative; border-left: 1px solid var(--linje); min-width: 0; }
/* Dagens kolumn får en svag ton hela vägen, även heldagsraden. Rubriken markerar dagen tydligare. */
.vdag.idag, .vheldag.idag { background: color-mix(in srgb, var(--gron) 7%, transparent); }
.vrad { display: block; width: 100%; height: calc(var(--timme) * var(--steg, 1)); padding: 0; border: 0; border-bottom: 1px solid var(--linje);
  background: none; cursor: pointer; }
.vhandelse { display: block; border: 1px solid var(--gron); border-radius: 4px; background: var(--gron); color: #fff; padding: 1px 4px;
  font-size: 0.76rem; line-height: 1.2; text-align: left; overflow: hidden; overflow-wrap: normal; cursor: pointer;
  container-type: inline-size; }
/* Ljusa och streckade händelser har en täckande botten (--falt) under den genomskinliga färgen.
   Annars lyser rutorna bakom igenom, till exempel den gröna rutan för den nuvarande timmen. */
.vhandelse.bara-vecka { background: linear-gradient(var(--gron-ljus), var(--gron-ljus)), var(--falt); color: var(--text); border-left-width: 3px; }
.vhandelse.extern { background: var(--falt); color: var(--text); border-style: dashed; }
div.vhandelse { cursor: default; }
.vblock { position: absolute; z-index: 1; height: var(--hojd); min-height: 1.15rem; margin: 1px; }
/* En anteckning ska synas hel eller inte alls, aldrig kapas mitt i.
   Händelsen blir en kolumn som får bryta: får anteckningen inte plats under huvudet
   hamnar den i en ny kolumn till höger, utanför kanten, där den inte syns.
   Mellanrummet skjuter den nya kolumnen förbi kantutrymmet, så att inget av den syns.
   När händelsen växer (muspekaren över den) får allt plats i första kolumnen igen. */
.vblock { display: flex; flex-flow: column wrap; align-content: flex-start; column-gap: 12px; }
.vblock > * { flex: none; width: 100%; }
/* Hörnmarkering på händelser som visar mer när muspekaren är över dem (dold anteckning, sluttid, plats,
   förkortat namn och liknande). Klassen sätts av markeraDoldaAnteckningar i app.js efter att veckan ritats.
   currentColor gör att markeringen får textens färg, så den syns både på mörka och ljusa händelser. */
.vblock.dolt-innehall::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 9px 9px 0; border-color: transparent currentColor transparent transparent; opacity: 0.85; }
.vblock:hover, .vchip:hover { z-index: 2; filter: brightness(0.92); }
.vtid { display: block; font-weight: 600; font-size: 0.7rem; }
.vblock.liten .vtid { display: inline; }
/* Små händelser har bara plats för starttiden. Sluttiden visas när händelsen växer under muspekaren (nedan). */
.vblock.liten .vslut { display: none; }
.veckorutnat.steg-2 { --timme: 1.75rem; }
.veckorutnat.steg-3 { --timme: 1.4rem; }
.veckorutnat.steg-4 { --timme: 1.2rem; }
.vinstallningar { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
.vinstallningar .falt { font-size: 0.8rem; }
.vinstallningar select { width: auto; padding: 0.2rem 0.4rem; }
.vutanfor { margin: 0 0 0.6rem; }
.vanteckning { display: block; font-size: 0.68rem; opacity: 0.85; white-space: pre-wrap; overflow-wrap: break-word; }
/* Platsen i veckan syns bara när muspekaren är över händelsen (nedan) och på papperet */
.vplats { display: none; font-size: 0.68rem; font-style: italic; overflow-wrap: break-word; }
.vanteckningar { display: none; }
/* Håll muspekaren över en händelse så växer den och visar allt. Blir den bredare
   gör container queryn nedan att hela namnet visas igen. */
@media (hover: hover) {
  .vblock:hover::after, .vblock:focus-visible::after { display: none; }
  .vblock:hover, .vblock:focus-visible { height: auto; min-height: var(--hojd); min-width: 9rem; z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
  .vblock.liten:hover .vslut, .vblock.liten:focus-visible .vslut { display: inline; }
  .vblock:hover .vplats, .vblock:focus-visible .vplats { display: block; }
}
/* Förkortade namn. Varje namn har klassen ord-N, där N/2 em är bredden dess längsta ord behöver.
   Är händelsen smalare än så visas den korta formen. em räknas från händelsens egen textstorlek,
   så samma regler fungerar på skärmen och på papper. */
.vnamn .kort { display: none; }
/* Specifikare än .vblock.liten .vtid ovan, annars vinner den regeln */
@container (max-width: 5.5em) { .vblock.liten.en-rad .vtid { display: none; } }
@container (max-width: 1em) { .ord-2 > .hel { display: none; } .ord-2 > .kort { display: inline; } }
@container (max-width: 1.5em) { .ord-3 > .hel { display: none; } .ord-3 > .kort { display: inline; } }
@container (max-width: 2em) { .ord-4 > .hel { display: none; } .ord-4 > .kort { display: inline; } }
@container (max-width: 2.5em) { .ord-5 > .hel { display: none; } .ord-5 > .kort { display: inline; } }
@container (max-width: 3em) { .ord-6 > .hel { display: none; } .ord-6 > .kort { display: inline; } }
@container (max-width: 3.5em) { .ord-7 > .hel { display: none; } .ord-7 > .kort { display: inline; } }
@container (max-width: 4em) { .ord-8 > .hel { display: none; } .ord-8 > .kort { display: inline; } }
@container (max-width: 4.5em) { .ord-9 > .hel { display: none; } .ord-9 > .kort { display: inline; } }
@container (max-width: 5em) { .ord-10 > .hel { display: none; } .ord-10 > .kort { display: inline; } }
@container (max-width: 5.5em) { .ord-11 > .hel { display: none; } .ord-11 > .kort { display: inline; } }
@container (max-width: 6em) { .ord-12 > .hel { display: none; } .ord-12 > .kort { display: inline; } }
@container (max-width: 6.5em) { .ord-13 > .hel { display: none; } .ord-13 > .kort { display: inline; } }
@container (max-width: 7em) { .ord-14 > .hel { display: none; } .ord-14 > .kort { display: inline; } }
@container (max-width: 7.5em) { .ord-15 > .hel { display: none; } .ord-15 > .kort { display: inline; } }
@container (max-width: 8em) { .ord-16 > .hel { display: none; } .ord-16 > .kort { display: inline; } }
@container (max-width: 8.5em) { .ord-17 > .hel { display: none; } .ord-17 > .kort { display: inline; } }
@container (max-width: 9em) { .ord-18 > .hel { display: none; } .ord-18 > .kort { display: inline; } }
@container (max-width: 9.5em) { .ord-19 > .hel { display: none; } .ord-19 > .kort { display: inline; } }
@container (max-width: 10em) { .ord-20 > .hel { display: none; } .ord-20 > .kort { display: inline; } }
@container (max-width: 10.5em) { .ord-21 > .hel { display: none; } .ord-21 > .kort { display: inline; } }
@container (max-width: 11em) { .ord-22 > .hel { display: none; } .ord-22 > .kort { display: inline; } }
@container (max-width: 11.5em) { .ord-23 > .hel { display: none; } .ord-23 > .kort { display: inline; } }
@container (max-width: 12em) { .ord-24 > .hel { display: none; } .ord-24 > .kort { display: inline; } }
@container (max-width: 12.5em) { .ord-25 > .hel { display: none; } .ord-25 > .kort { display: inline; } }
@container (max-width: 13em) { .ord-26 > .hel { display: none; } .ord-26 > .kort { display: inline; } }
@container (max-width: 13.5em) { .ord-27 > .hel { display: none; } .ord-27 > .kort { display: inline; } }
@container (max-width: 14em) { .ord-28 > .hel { display: none; } .ord-28 > .kort { display: inline; } }
@container (max-width: 14.5em) { .ord-29 > .hel { display: none; } .ord-29 > .kort { display: inline; } }
@container (max-width: 15em) { .ord-30 > .hel { display: none; } .ord-30 > .kort { display: inline; } }
@container (max-width: 15.5em) { .ord-31 > .hel { display: none; } .ord-31 > .kort { display: inline; } }
@container (max-width: 16em) { .ord-32 > .hel { display: none; } .ord-32 > .kort { display: inline; } }
@container (max-width: 16.5em) { .ord-33 > .hel { display: none; } .ord-33 > .kort { display: inline; } }
@container (max-width: 17em) { .ord-34 > .hel { display: none; } .ord-34 > .kort { display: inline; } }
@container (max-width: 17.5em) { .ord-35 > .hel { display: none; } .ord-35 > .kort { display: inline; } }
@container (max-width: 18em) { .ord-36 > .hel { display: none; } .ord-36 > .kort { display: inline; } }
@container (max-width: 18.5em) { .ord-37 > .hel { display: none; } .ord-37 > .kort { display: inline; } }
@container (max-width: 19em) { .ord-38 > .hel { display: none; } .ord-38 > .kort { display: inline; } }
@container (max-width: 19.5em) { .ord-39 > .hel { display: none; } .ord-39 > .kort { display: inline; } }
@container (max-width: 20em) { .ord-40 > .hel { display: none; } .ord-40 > .kort { display: inline; } }
.handelsedialog { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--linje);
  border-radius: 12px; background: var(--falt); color: var(--text); padding: 1.1rem; }
.handelsedialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.handelsedialog h2 { margin-top: 0; }
.handelsedialog .varning:empty { display: none; }
.bara-tryck { display: none; }
.kryssrad { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.dagval { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.dagval legend { padding: 0; margin-bottom: 0.25rem; font-size: 0.9rem; font-weight: 600; }
.visalista { display: grid; gap: 0.3rem; margin-bottom: 0.8rem; }
.visarad { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; }
.visarad > span { overflow-wrap: anywhere; }
.kartlank, .visakarta { font-size: 0.85rem; white-space: nowrap; color: var(--bla); }
/* Flikarna Uppgifter och Karta i fönstret för en händelse med plats */
.flikrad { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--linje); margin-bottom: 0.7rem; }
.flikknapp { border: 0; border-bottom: 2px solid transparent; background: none; padding: 0.3rem 0.7rem; margin-bottom: -1px;
  cursor: pointer; color: var(--text-svag); font-weight: 600; font-size: 0.9rem; }
.flikknapp:hover { color: var(--gron); }
.flikknapp[aria-selected="true"] { color: var(--text); border-bottom-color: var(--gron); }
/* Kartan (karta.js). Brickorna läggs ut med transform, nålen och pricken likaså. */
.kartvy { display: grid; gap: 0.45rem; }
.kverktyg { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: space-between; align-items: center; }
.kvagval { display: flex; gap: 0.4rem; }
.kvagval select { width: auto; padding: 0.25rem 0.4rem; }
.kstatus { margin: 0; font-size: 0.82rem; }
.kstatus:empty { display: none; }
.kyta { position: relative; height: 22.5rem; overflow: hidden; border: 1px solid var(--linje); border-radius: 8px;
  background: #e8e4dc; cursor: grab; touch-action: none; user-select: none; }
.kyta.drar { cursor: grabbing; }
.kyta.valjer { cursor: crosshair; outline: 3px dashed var(--bla); outline-offset: -3px; }
.kandra { display: grid; gap: 0.4rem; padding: 0.6rem; border: 1px solid var(--linje); border-radius: 8px; }
.kandra[hidden] { display: none; }
.kandra-rad { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.kartvy > .lank { justify-self: start; padding-left: 0; }
.kartvy > .lank[hidden] { display: none; }
.kyta:focus-visible { outline: 3px solid var(--gron); outline-offset: 2px; }
.kbrickor img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; }
.klinje { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.klinje polyline { fill: none; stroke: #1d5fae; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
/* Kollektivtrafik: åkturerna lila, gångvägarna streckade */
.klinje polyline.kollektiv { stroke: #7b2d9b; }
.klinje polyline.gang { stroke: #444; stroke-width: 3.5; stroke-dasharray: 1 7; opacity: 0.9; }
.linjeprick { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: 0.05rem; }
.resaval-rad { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.resaval { border: 1px solid var(--linje); border-radius: 6px; background: var(--falt); color: var(--text); padding: 0.25rem 0.55rem;
  font-size: 0.85rem; cursor: pointer; }
.resaval[aria-pressed="true"] { border-color: var(--gron); background: var(--gron-ljus); font-weight: 600; }
/* En sparad nyckel är låst. Den ser ut som text, inte som ett fält att skriva i. */
#resrobot-nyckel[readonly] { background: transparent; color: var(--text-svag); cursor: default; }
.kollektivsteg { margin: 0 0 0.6rem; padding-left: 1.3rem; display: grid; gap: 0.15rem; }
/* Nålen: en droppe vars spets står på platsen. translate flyttar elementets hörn, margin flyttar spetsen dit. */
.knal { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -26px 0 0 -13px; pointer-events: none; }
.knal::before { content: ""; position: absolute; inset: 0; background: #c62828; border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.kprick { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #1d5fae; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(29, 95, 174, 0.25); pointer-events: none; }
/* En plats du ställt in själv: samma prick men med en ring i stället för fylld halo */
.kprick.manuell { background: #fff; border-color: #1d5fae; border-width: 4px; }
.kzoomrad { position: absolute; top: 8px; right: 8px; display: grid; gap: 4px; }
.kzoom { width: 30px; height: 30px; border: 1px solid #aaa; border-radius: 6px; background: #fff; color: #222; font-size: 1.1rem;
  line-height: 1; cursor: pointer; }
.kzoom:disabled { opacity: 0.4; cursor: default; }
.kkalla { position: absolute; right: 0; bottom: 0; padding: 1px 6px; font-size: 0.7rem; background: rgba(255, 255, 255, 0.85); color: #333; }
.kkalla a { color: #1d5fae; }
.ksteg ol { margin: 0.4rem 0; padding-left: 1.4rem; font-size: 0.85rem; display: grid; gap: 0.2rem; }
.ksteg summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.ksteg p { margin: 0.3rem 0 0; font-size: 0.78rem; }
.ksteg a, .kartrad a { color: var(--bla); }
.kartrad { margin: 0.4rem 0 0; font-size: 0.82rem; overflow-wrap: anywhere; }
.kartrad .lank, .varning .lank { font-size: inherit; padding: 0 0.2rem; }
.rattadrad { display: block; margin-top: 0.2rem; }
.rattaplats { display: grid; gap: 0.35rem; margin-top: 0.5rem; padding: 0.6rem; border: 1px solid var(--linje); border-radius: 8px; }
.rattaplats > p { margin: 0; font-size: 0.82rem; }
.dagblock .flikrad { margin-bottom: 0.5rem; }

/* Platsfältet i formulären: fält och Sök-knapp på en rad, träffarna under */
.platsrad { display: flex; gap: 0.4rem; }
.platsrad input { flex: 1; min-width: 0; }
.platskoppling { font-weight: 400; font-size: 0.8rem; margin-left: 0.4rem; }
.platstraffar { display: grid; gap: 0.25rem; font-weight: 400; }
.platstraffar:empty { display: none; }
.platstraffar p { margin: 0; font-size: 0.82rem; }
.platstraff { display: grid; gap: 0.1rem; text-align: left; padding: 0.4rem 0.55rem; border: 1px solid var(--linje); border-radius: 6px;
  background: var(--falt); cursor: pointer; font-size: 0.85rem; }
.platstraff:hover, .platstraff:focus-visible { border-color: var(--gron); background: var(--gron-ljus); }
.platstraff .platsnamn { font-weight: 600; }
.platstraff .svag { font-size: 0.75rem; overflow-wrap: anywhere; }
/* Fönstret för en dag i månadsvyn: ett block per händelse, med en linje emellan */
.dagblock { border-top: 1px solid var(--linje); padding-top: 0.8rem; margin-top: 0.8rem; }
.dagdialog h2 + .dagblock { border-top: 0; padding-top: 0; margin-top: 0; }
.dagblock-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dagblock h3 { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
/* Fönstret är brett nog för knapparna på rad bredvid titeln. Mellanrummet gör det svårare att trycka fel. */
.dagblock .tabortval { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem 0.75rem; }
.dagblock .visalista { margin-bottom: 0.5rem; }
.visaanteckning { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.6rem 0.7rem; border-radius: 8px;
  background: var(--gron-ljus); max-height: 50vh; overflow: auto; }

/* ---------- Mat ---------- */
.status { display: flex; gap: 0.6rem; align-items: flex-start; }
.status .prick { width: 12px; height: 12px; border-radius: 50%; margin-top: 0.35rem; flex: none; background: var(--text-svag); }
.status.ansluten .prick { background: var(--gron); }
.status.av .prick, .status.ej-tillaten .prick { background: var(--rod); }
.kodrad { display: block; font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem;
  background: var(--falt); border: 1px solid var(--linje); border-radius: 6px; padding: 0.4rem 0.6rem; margin: 0.4rem 0; overflow-x: auto; white-space: nowrap; }
.utkastrad { border: 1px solid var(--linje); border-radius: 8px; padding: 0.6rem 0.75rem; background: var(--falt); display: grid; gap: 0.5rem; }
.utkastrad .val { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; gap: 0.5rem; }
/* Receptsökningen i Mat-fliken: bild, namn med sajt och tid, och en Hämta-knapp på varje rad */
.receptsok { padding: 0.9rem 1rem; margin-bottom: 1rem; border: 1px solid var(--linje); border-radius: 10px; background: var(--falt); }
.recepttraffar { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.recepttraffar li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; }
.recepttraffar img, .recepttraffar .ingen-bild { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--gron-ljus); }
.traffinfo { display: grid; min-width: 0; }
.sparade-recept { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sparade-recept li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; }
/* Långa namn får två rader och slutar sedan med … */
.traffinfo a { color: var(--text); font-weight: 600; text-decoration: none; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.traffinfo a:hover { color: var(--gron); text-decoration: underline; }
.sokrad { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; }
.varning { color: var(--rod); font-size: 0.9rem; margin: 0; }

/* ---------- Meddelanden ---------- */
.meddelande { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--gron); color: #fff; padding: 0.6rem 1.1rem; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  max-width: calc(100% - 2rem); z-index: 10; }
.meddelande.fel { background: var(--rod); }

/* ---------- Smal skärm ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Inköpslistor ---------- */
.listknappar { margin-bottom: 0.75rem; }
.knapp.vald { background: var(--gron); border-color: var(--gron); color: #fff; font-weight: 600; }
.knapp.vald:hover { background: var(--gron-mork); border-color: var(--gron-mork); color: #fff; }
.listnamn { margin-bottom: 0.5rem; }
.prisrad { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.prisrad > span:first-child { margin-right: auto; }
.prisfalt { width: 5.5rem; padding: 0.15rem 0.4rem; text-align: right; }
.mobildialog { width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--linje);
  border-radius: 12px; background: var(--falt); color: var(--text); padding: 1.1rem; }
.mobildialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.mobildialog h2 { margin-top: 0; outline: none; }
.qr-ram { text-align: center; }
.qr { background: #fff; max-width: 100%; height: auto; image-rendering: pixelated; }
.listtext { width: 100%; margin-bottom: 0.6rem; }
/* Knapparna stannar i bild även när QR-koden gör rutan högre än skärmen */
.dialogfot { position: sticky; bottom: -1.1rem; margin: 0 -1.1rem -1.1rem; padding: 0.7rem 1.1rem 1.1rem;
  background: var(--falt); border-top: 1px solid var(--linje); }
.dialogfot p:empty { display: none; }
.dialogfot p { margin: 0.5rem 0 0; }

@media (max-width: 640px) {
  .ram { margin: 0.75rem 0.4rem; padding: 1.1rem 0.85rem 1.5rem; border-radius: 12px; }
  h1 { font-size: 1.7rem; }
  .ruta { padding: 0.9rem 0.85rem; }
  .manader { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nyckeltal .varde { font-size: 1.2rem; }
  .tva { grid-template-columns: 1fr; }
  .kategori { grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem; }
  .ramrad { grid-template-columns: 5.5rem 5.5rem minmax(0, 1fr); gap: 0.4rem; }
  .helgnamn { display: none; }
  .rutnat { grid-template-columns: 1.5rem repeat(7, minmax(0, 1fr)); gap: 3px; }
  .dag { min-height: 52px; align-items: center; padding: 0.2rem 0.1rem; }
  .dag.vald { padding: calc(0.2rem - 1px) calc(0.1rem - 1px); }
  .lapp, .fler { display: none; }
  .prickar { display: flex; }
}
@media (prefers-reduced-motion: no-preference) {
  .knapp, .flik, .manad-knapp, .dag, .pil { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
}

/* ---------- Utskrift av veckan ----------
   Sidan får egna, ljusa färger oavsett tema, och allt utom veckan döljs.
   Timhöjden räknas ut så att alla timmar ryms på ett liggande A4.
   :has gör att reglerna bara gäller när veckovyn visas. */
@page { size: A4 landscape; margin: 9mm; }
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --falt: #fff; --text: #000; --text-svag: #333; --linje: #999; --gron: #222; --gron-ljus: #eee; --rod: #000;
    color-scheme: light;
  }
  /* Reglerna gäller bara när kalenderfliken visas, så att andra flikar skrivs ut som vanligt */
  body:has(#vy-kalender:not([hidden]) :is(#veckovy, #manadslayout):not([hidden])) { background: #fff !important; min-height: 0; }
  body:has(#vy-kalender:not([hidden]) :is(#veckovy, #manadslayout):not([hidden])) :is(.topp, #manadsval, #manadslayout .ruta:not(.utskrift)) { display: none !important; }
  body:has(#vy-kalender:not([hidden]) :is(#veckovy, #manadslayout):not([hidden])) :is(.ram, .ruta) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
    box-shadow: none; backdrop-filter: none; max-width: none; width: auto; }
  #meddelande, .vhjalp, .vutanfor, .minikal-ram, #veckovy .kalenderhuvud :is(.pil, .knapp) { display: none !important; }
  #veckovy .kalenderhuvud { margin: 0 0 2mm; }
  #veckovy .kalenderhuvud h2 { margin: 0; font-size: 13pt; }
  .vecka-ram { overflow: visible; }
  .veckorutnat { --timme: calc(var(--utskrift-hojd, 158mm) / var(--antal-timmar)) !important; min-width: 0; grid-template-columns: 11mm repeat(7, minmax(0, 1fr));
    border-radius: 0; font-size: 9pt; break-inside: avoid; }
  .vrubrik.idag { background: none; color: #000; }
  .vdag.idag, .vheldag.idag { background: none; }
  .vtidrubrik { font-size: 7.5pt; padding: 0 1mm; }
  .vheldag { min-height: 6mm; }
  .vhandelse { background: #eee !important; color: #000 !important; border-color: #000; font-size: 7.5pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* Samma utseende oavsett om händelsen också syns i månadskalendern */
  .vhandelse.bara-vecka { border-left-width: 1px; }
  .vtid { display: inline; font-size: 7pt; }
  .vrad, .vlagg { background: none !important; }
  /* Den gröna nuvarande timmen hör till skärmen, inte papperet */
  .vrad.nu { box-shadow: none; }
  /* Ytan för att lägga till en heldagshändelse går inte att använda på papper och ska inte ta plats */
  .vlagg { display: none; }
  /* Samma regel som på skärmen gäller: en anteckning syns hel eller inte alls.
     Alla anteckningar finns dessutom i listan under veckan. */
  .vanteckning { font-size: 6.5pt; line-height: 1.1; opacity: 1; }
  /* Tätare än på skärmen, så att fler anteckningar ryms */
  .vblock { padding: 0.3mm 1mm; line-height: 1.1; }
  /* Ihopklämda händelser: mindre text, och sist utan anteckning. Klasserna sätts av app.js. */
  .vhandelse.tryck-6-5pt { font-size: 6.5pt; }
  .vhandelse.tryck-6-5pt .vtid { font-size: 6pt; }
  .vhandelse.tryck-6-5pt .vanteckning { font-size: 5.5pt; }
  .vhandelse.tryck-6pt { font-size: 6pt; }
  .vhandelse.tryck-6pt .vtid { font-size: 5.5pt; }
  .vhandelse.tryck-6pt .vanteckning { font-size: 5pt; }
  .vhandelse.tryck-utan-anteckning .vanteckning { display: none; }
  /* Platsen har samma storlek som anteckningen. Ryms den inte döljs den, och finns då i listan under veckan. */
  .vplats { display: block; font-size: 6.5pt; line-height: 1.1; }
  .vhandelse.tryck-6-5pt .vplats { font-size: 5.5pt; }
  .vhandelse.tryck-6pt .vplats { font-size: 5pt; }
  .vhandelse.tryck-utan-plats .vplats { display: none; }
  .vhandelse.tryck-utan-tid .vtid { display: none; }
  .vhandelse.tryck-kort-namn .vnamn > .hel { display: none !important; }
  .vhandelse.tryck-kort-namn .vnamn > .kort { display: inline !important; }
  /* På papper går det inte att klicka, så händelserna kan fylla hela dagens bredd */
  .veckorutnat .vdag, .veckorutnat.redigerar .vdag { --andel: 100%; }
  .dolt-innehall::after { display: none; }
  .vanteckningar { display: block; margin-top: 3mm; font-size: 7.5pt; }
  .vanteckningar h3 { margin: 0 0 1mm; font-size: 9pt; }
  .vanteckningar ul { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 6mm; }
  .vanteckningar li { break-inside: avoid; margin-bottom: 1mm; white-space: pre-wrap; overflow-wrap: break-word; }

  /* --- Månaden --- */
  #manadslayout, #manadslayout .layoutkolumn { display: block; }
  /* I den fria layouten har kalendern en fast höjd och skrollas. På papper ska allt synas. */
  /* .utskrift är den tidigaste kalendern på sidan (layout.js). Rutorna som syns är kopior utan id. */
  .utskrift { overflow: visible !important; grid-column: auto !important; grid-row: auto !important; }
  .utskrift .kalenderhuvud :is(.pil, .knapp), .utskrift > p.svag { display: none !important; }
  .utskrift .kalenderhuvud { margin: 0 0 2mm; }
  .utskrift .kalenderhuvud h2 { margin: 0; font-size: 13pt; }
  /* Raderna får den höjd app.js räknat ut, så att månaden fyller en sida */
  .rutnat { grid-template-columns: 7mm repeat(7, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: var(--cellhojd);
    gap: 1mm; break-inside: avoid; }
  .rubrik-dag, .vecka { font-size: 7.5pt; padding: 0.5mm 0; }
  .vecka { text-decoration: none; padding-top: 1mm; }
  /* Samma regel som i veckan: det som inte ryms hamnar i en kolumn utanför kanten och syns inte alls */
  .dag { min-height: 0; height: var(--cellhojd); padding: 0.8mm; border: 0.3mm solid #999; border-radius: 0; background: #fff !important;
    display: flex; flex-flow: column wrap; align-content: flex-start; gap: 0.5mm 12px; font-size: 7pt; }
  .dag > * { flex: none; width: 100%; }
  /* Vald dag och muspekaren över en ruta ska inte synas på papperet */
  .dag.vald, .dag:hover { border: 0.3mm solid #999; padding: 0.8mm; }
  .dag .nr { width: auto; height: auto; display: block; text-align: left; font-size: 8pt; }
  .dag.idag .nr { background: none; color: #000; }
  .helgnamn { white-space: normal; font-size: 6.5pt; color: #000; }
  .lapp { white-space: normal; overflow: visible; font-size: 7pt; line-height: 1.15; padding: 0.2mm 1mm;
    background: #eee !important; color: #000 !important; border: 1px solid #000; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .lapp.extern { background: #fff !important; border-style: dashed; }
  .lapp-anteckning { font-size: 6.5pt; line-height: 1.15; white-space: pre-wrap; overflow-wrap: break-word; font-weight: 400; }
  .lapp-plats { font-size: 6.5pt; line-height: 1.15; font-style: italic; overflow-wrap: break-word; font-weight: 400; }
  /* Ihopklämda rutor: mindre text, och två spalter där varje del är halva rutans bredd.
     Med spalter syns två kolumner, och en tredje hamnar utanför kanten som förut. */
  .dag.tryck-6pt .lapp { font-size: 6pt; }
  .dag.tryck-6pt :is(.lapp-anteckning, .lapp-plats) { font-size: 5.5pt; }
  .dag.tryck-5-5pt .lapp { font-size: 5.5pt; }
  .dag.tryck-5-5pt :is(.lapp-anteckning, .lapp-plats) { font-size: 5pt; }
  .dag.tryck-2-spalter { column-gap: 1.2mm; }
  .dag.tryck-2-spalter > * { width: calc(50% - 0.6mm); }
  .tryck-fler { font-size: 6.5pt; color: #333; }
  .bara-tryck { display: block; }
  .tryck-dold, .fler, .prickar { display: none !important; }
}