/* Tiger Trädfällare portal: personalens sidor. Formspråk från tradfallare.se: vitt, tigerorange, nästan svart.
   Kontrast (AAA, 7:1): text #1a1411 mot vitt, primärfärgen #8b3012 mot vitt 8,3:1, vitt mot sidomenyn #17110e
   18,7:1, ljusorange #ffb38a mot #17110e 10,8:1. Tigerorange #e84a17 bara som dekor. */
:root {
  --bg: #f4f5f6; --yta: #ffffff; --vit: #ffffff; --linje: #dde1e4; --falt-kant: #6f7880;
  --text: #1a1411; --dampad: #474d52; --gra: #f5f6f7;
  --gron: #8b3012; --morkgron: #5c1f0b; --sido: #17110e; --sido-dampad: #ffb38a; --ljusgron: #eceff1;
  --brun: #2a2a2a; --kram: #efe4d8; --rod: #8a1c1c; --ljusrod: #fbecec; --gul: #6b4e00; --ljusgul: #fbf4e2; --ok: #1f5a1a;
  --orange: #e84a17;
  --radie: 12px; --skugga: 0 1px 2px rgba(17, 17, 17, .06), 0 2px 8px rgba(17, 17, 17, .05);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@font-face { font-family: "Epilogue"; src: url("typsnitt/Epilogue-wght.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
body { font: 17px/1.55 Epilogue, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); min-height: 100vh; }
a { color: var(--gron); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gron); outline-offset: 2px; }
img { max-width: 100%; }
.hopp { position: absolute; top: 12px; inset-inline-start: 12px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; z-index: 50; }
.hopp:focus { width: auto; height: auto; overflow: visible; clip-path: none; background: var(--vit); padding: 10px 14px; }
/* left: 0 håller den dolda texten inom sidans bredd: utan den hamnade .sr i breda tabeller (som rullar
   i sidled i sin egen ruta) utanför rutan och gjorde hela sidan bredare än telefonen (bokföringen, personalen). */
.sr { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dold { display: none !important; }

h1, h2, h3 { font-weight: 650; line-height: 1.2; letter-spacing: -.012em; }
h1 { font-size: clamp(1.5rem, 3vw, 1.85rem); margin: 22px 0 6px; }
h2 { font-size: 1.18rem; margin-bottom: 12px; }
h3 { font-size: 1.02rem; margin-bottom: 8px; }
p + p { margin-top: 8px; }
.dampad { color: var(--dampad); }
.liten { font-size: .9rem; }
.ingress { color: var(--dampad); max-width: 760px; margin-bottom: 4px; }
.inner { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.tillbaka { display: inline-block; margin-top: 18px; font-size: .92rem; }

/* ── Ramen: sidomeny + innehåll ─────────────────────────────────────────── */
.ram { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sido { background: var(--sido); color: var(--vit); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 14px 24px; }
.sido-logga { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--vit); padding: 4px 6px 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 12px; }
.loggpar { display: flex; gap: 6px; align-items: center; background: var(--vit); border-radius: 10px; padding: 5px 7px; width: fit-content; }
.loggpar img { height: 34px; width: auto; display: block; }
.loggpar img.lg { background: var(--brun); border-radius: 6px; padding: 3px 5px; height: 34px; }
.sido-namn { font-weight: 650; font-size: 1.05rem; letter-spacing: .01em; }
/* Sidomenyn (admin/_meny.html, meny.py): genvägarna överst, sedan grupperna. Varje namngiven grupp
   är en details: rubriken (summary) är en knapp på 48 punkter som fäller in och ut gruppen. */
.sido nav { display: flex; flex-direction: column; gap: 6px; }
.sido-rubrik { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; border-radius: 9px; cursor: pointer;
               list-style: none; color: var(--sido-dampad); font-size: .82rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.sido-rubrik::-webkit-details-marker { display: none; }
.sido-rubrik, .sido nav a { -webkit-tap-highlight-color: rgba(255,255,255,.12); }
.sido-rubrik::marker { content: ""; }
.sido-rubrik:hover { background: rgba(255,255,255,.08); }
.sido-rubrik-text { flex: 1 1 auto; min-width: 0; }
/* Pilen pekar åt höger när gruppen är infälld och nedåt när den är utfälld: formen bär läget, inte färgen. */
.sido-rubrik::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 4px 0 2px; border: solid currentColor;
                      border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.sido-grupp[open] > .sido-rubrik::after { transform: rotate(45deg); margin-top: -4px; }
.sido-grupp[open] > .sido-rubrik .raknare { display: none; }
.sido-grupp.genvagar { background: rgba(255,255,255,.06); border-radius: 12px; padding: 2px 4px 6px; }
.sido ul { list-style: none; }
.sido nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 10px; border-radius: 9px;
              color: var(--vit); text-decoration: none; font-size: .97rem; border-left: 3px solid transparent; }
.sido nav a:hover { background: rgba(255,255,255,.08); }
.sido nav a[aria-current="page"] { background: rgba(255,255,255,.14); border-left-color: var(--orange); font-weight: 650; }
.sido nav a.sido-andra { color: var(--sido-dampad); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.sido :focus-visible { outline-color: var(--orange); }
/* Lägg till i genvägar: knappen för sidan man står på, uppe till höger. Stjärnan är tom eller fylld, och texten säger läget. */
.genvag-knapp { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; background: var(--yta); color: var(--gron);
                border: 1px solid var(--falt-kant); border-radius: 99px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.genvag-knapp:hover { background: var(--ljusgron); }
.stjarna { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.stjarna.fylld { fill: currentColor; }
.genvag-knapp .text-kort { display: none; }
.raknare { background: var(--kram); color: var(--brun); border-radius: 99px; font-size: .78rem; font-weight: 700; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }

.yta { min-width: 0; display: flex; flex-direction: column; }
.list { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 32px; background: var(--yta); border-bottom: 1px solid var(--linje); min-height: 64px; flex-wrap: wrap; }
.list-hoger { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.list .tg-oppna { color: var(--gron); }
.demo-pill { background: var(--kram); color: var(--brun); border-radius: 99px; padding: 6px 14px; font-size: .88rem; }
.vem { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: 600; min-height: 44px; }
.initial { width: 34px; height: 34px; border-radius: 50%; background: var(--gron); color: var(--vit); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.lank-knapp { background: none; border: 0; font: inherit; color: var(--gron); text-decoration: underline; cursor: pointer; min-height: 44px; }
main { padding: 6px 32px 48px; width: 100%; max-width: 1320px; flex: 1; }
footer.fot { color: var(--dampad); font-size: .88rem; padding: 18px 32px 28px; }
footer.fot a { color: var(--dampad); }

@media (max-width: 980px) {
  .ram { display: block; }
  .sido { position: static; height: auto; padding: 10px 16px 4px; overflow: visible; }
  .sido-logga { flex-direction: row; align-items: center; border: 0; padding: 0 0 8px; margin: 0; }
  /* Samma meny som på datorn, utan sidledsrullning: allt bryts på nya rader. Varje grupprubrik är en
     rund knapp. En infälld grupp står i raden med de andra, en utfälld tar hela bredden och dess val
     följer direkt efter rubriken (rubriken flyter till vänster, valen är inline-block). */
  .sido nav { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding-bottom: 8px; }
  .sido-grupp { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  .sido-grupp[open] { flex-basis: 100%; }
  .sido-rubrik { border: 1px solid rgba(255,255,255,.4); border-radius: 99px; padding: 0 10px 0 12px; letter-spacing: .04em; }
  .sido-grupp[open] > .sido-rubrik { float: left; margin: 0 5px 5px 0; }
  /* Gruppen med sidan man står på: en orange prick före namnet (formen, inte bara färgen) och "här är du" för skärmläsaren. */
  .sido-grupp[data-aktuell] > .sido-rubrik { border-color: var(--sido-dampad); }
  .sido-grupp[data-aktuell] > .sido-rubrik::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
  .sido-grupp.genvagar { padding: 5px 0 0 5px; }
  .sido-grupp.genvagar:not([open]) { background: none; padding: 0; }
  .sido ul { font-size: 0; }
  .sido li { display: inline-block; vertical-align: top; max-width: 100%; margin: 0 5px 5px 0; font-size: 1rem; }
  .utan-rubrik li { margin: 0; }
  .sido nav a { max-width: 100%; background: rgba(255,255,255,.07); border-left: 0; border-bottom: 3px solid transparent;
                padding: 0 10px; font-size: .92rem; }
  .sido nav a[aria-current="page"] { border-bottom-color: var(--orange); }
  .genvag-knapp { padding: 0 12px; }
  .genvag-knapp .text-lang { display: none; }
  .genvag-knapp .text-kort { display: inline; }
  .list, main, footer.fot { padding-left: 16px; padding-right: 16px; }
  .list-hoger { flex-wrap: wrap; justify-content: flex-end; gap: 0 14px; }
  .demo-pill { font-size: .82rem; }
}

html.tg-kontrast { --linje: #172215; --dampad: #172215; --bg: #ffffff; --gron: #1f3a18; --skugga: none; }
html.tg-kontrast .kort, html.tg-kontrast .stat > *, html.tg-kontrast .falt input, html.tg-kontrast .falt select,
html.tg-kontrast .falt textarea, html.tg-kontrast .flash { border-width: 2px; border-color: #172215; }
html.tg-fargblind .chip::before { content: attr(data-symbol) " "; font-weight: 700; }

/* ── Meddelanden ────────────────────────────────────────────────────────── */
.flash { background: var(--yta); border: 1px solid var(--linje); border-left: 6px solid var(--text); border-radius: var(--radie); padding: 12px 16px; margin: 16px 0 0; box-shadow: var(--skugga); }
.flash.ok { border-left-color: var(--ok); }
.flash.fel { border-left-color: var(--rod); color: var(--rod); }
.flash.info { border-left-color: var(--gul); background: var(--ljusgul); box-shadow: none; }

/* ── Kort, rutnät ───────────────────────────────────────────────────────── */
.kort { background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie); padding: 22px; margin: 18px 0; box-shadow: var(--skugga); }
.kort.tunn { padding: 16px; }
.kort.markerad { border: 2px solid var(--gron); }
.kort > h2:first-child, .kort > h3:first-child { margin-top: 0; }
.kort.tabellkort, .tabell-wrap.kort.tunn { padding: 0; overflow-x: auto; }
.lista-luft { margin: 10px 0 0 24px; } .lista-luft li + li { margin-top: 8px; }
.rad { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.rad.mellan { justify-content: space-between; }
.rad.topp-just { align-items: flex-start; }
.rad.mellan > h1, .rad.mellan > h2 { margin-bottom: 0; }
.sidhuvud { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 22px 0 6px; }
.sidhuvud h1 { margin: 0; }
.sidhuvud .rad { gap: 8px; }
.sidhuvud .knapprad { margin-top: 0; }
.rutnat { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tva { display: grid; gap: 0 22px; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); align-items: start; }
@media (max-width: 1100px) { .tva { grid-template-columns: minmax(0, 1fr); } }

/* Siffror */
.stat { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-rows: 1fr; margin: 18px 0 4px; }
.stat > a, .stat > div { background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie); padding: 16px 18px; color: var(--text);
                         text-decoration: none; display: flex; flex-direction: column; box-shadow: var(--skugga); }
.stat > a:hover { border-color: var(--gron); }
.stat > a[aria-current="true"] { border: 2px solid var(--gron); }
.stat .etikett { color: var(--dampad); font-size: .9rem; min-height: 26px; }
.stat .tal { font-size: 1.8rem; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.stat .under { font-size: .86rem; color: var(--dampad); margin-top: auto; padding-top: 4px; }
.stat .varning { color: var(--rod); font-weight: 600; }
.stat.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
@media (max-width: 900px) { .stat.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stat.tre { grid-template-columns: 1fr; } }
.sektionsrubrik { color: var(--dampad); font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin: 22px 0 0; }
.mataren { height: 8px; background: var(--ljusgron); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.mataren > span { display: block; height: 100%; background: var(--gron); width: 0; border-radius: 99px; }
.mataren > span.bredd-10 { width: 10%; } .mataren > span.bredd-20 { width: 20%; } .mataren > span.bredd-30 { width: 30%; }
.mataren > span.bredd-40 { width: 40%; } .mataren > span.bredd-50 { width: 50%; } .mataren > span.bredd-60 { width: 60%; }
.mataren > span.bredd-70 { width: 70%; } .mataren > span.bredd-80 { width: 80%; } .mataren > span.bredd-90 { width: 90%; }
.mataren > span.bredd-100 { width: 100%; }

/* ── Knappar (minst 44–48 px) ───────────────────────────────────────────── */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; cursor: pointer; font: inherit;
         font-size: .95rem; font-weight: 600; text-decoration: none; background: var(--gron); color: var(--vit); border: 2px solid var(--gron); border-radius: 10px; white-space: nowrap; }
.knapp:hover { background: var(--morkgron); border-color: var(--morkgron); }
a.knapp { color: var(--vit); }
.knapp.kontur, a.knapp.kontur { background: var(--yta); color: var(--gron); }
.knapp.kontur:hover { background: var(--ljusgron); }
.knapp.fara, a.knapp.fara { background: var(--yta); color: var(--rod); border-color: var(--rod); }
.knapp.fara:hover { background: var(--ljusrod); }
.knapp.brun { background: var(--brun); border-color: var(--brun); }
.knapp.stor { width: 100%; min-height: 56px; font-size: 1.02rem; }
.knapp.liten { min-height: 44px; padding: 0 14px; font-size: .88rem; }
form.inline { display: inline; }
.knapprad { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; }
.filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--linje);
            background: var(--yta); color: var(--text); text-decoration: none; font-size: .9rem; }
.filter a:hover { border-color: var(--gron); }
.filter a[aria-current="true"] { background: var(--gron); border-color: var(--gron); color: var(--vit); font-weight: 600; }

/* ── Formulär ───────────────────────────────────────────────────────────── */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px 16px; margin-top: 12px; }
.falt label, .falt .etikett { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.falt input:not([type=checkbox]):not([type=radio]), .falt select, .falt textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--yta); border: 1px solid var(--falt-kant); border-radius: 10px; }
.falt textarea { min-height: 100px; resize: vertical; }
.falt .hjalp { font-size: .86rem; color: var(--dampad); margin-top: 5px; }
.kryss { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.kryss input { width: 22px; height: 22px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--gron); }
.helrad { grid-column: 1 / -1; }
fieldset { border: 0; }
legend { font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.valrad { display: flex; gap: 6px 18px; flex-wrap: wrap; }
dl.form dd { margin: 0; }
.tabell input.smal { width: 76px; min-height: 40px; padding: 6px 8px; font: inherit; border: 1px solid var(--falt-kant); border-radius: 8px; }

/* ── Tabeller ───────────────────────────────────────────────────────────── */
.tabell-wrap { overflow-x: auto; }
table.tabell { width: 100%; border-collapse: collapse; background: var(--yta); font-size: .95rem; }
.tabell th, .tabell td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linje); vertical-align: top; }
.tabell th { font-size: .82rem; color: var(--dampad); font-weight: 600; background: var(--gra); white-space: nowrap; }
.tabell tbody tr:hover td { background: #fafcf8; }
.tabell tbody tr:last-child td { border-bottom: 0; }
.tabell td.tal, .tabell th.tal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabell tr.summa td { font-weight: 650; border-top: 2px solid var(--text); background: var(--gra); }
.tabell tr.dampad td { color: var(--dampad); }
.tabell td > a:first-child { font-weight: 600; }
.tabell .rad { flex-wrap: nowrap; }
.kort > .tabell-wrap { margin: 0 -22px -22px; }
.kort.tunn > .tabell-wrap { margin: 0 -16px -16px; }
.kort.tunn > .tabell-wrap:only-child { margin: -16px; }
.kort > .tabell-wrap:not(:last-child) { margin-bottom: 12px; }
.kort > h2 + .tabell-wrap, .kort > .rad + .tabell-wrap { margin-top: 4px; }

/* ── Status och varumärken ──────────────────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--dampad); color: var(--dampad); border-radius: 99px; padding: 1px 10px; font-size: .8rem; white-space: nowrap; font-weight: 600; background: var(--yta); }
.status.ok, .status.godkand, .status.betald, .status.utbetald, .status.klar { border-color: var(--ok); color: var(--ok); background: #eef6ec; }
.status.ny, .status.skickad, .status.att_begara, .status.pagaende, .status.begard, .status.besok { border-color: var(--gron); color: var(--gron); background: var(--ljusgron); }
.status.fel, .status.avbojd, .status.forfallen, .status.nekad, .status.makulerad, .status.utgangen, .status.spam { border-color: var(--rod); color: var(--rod); background: var(--ljusrod); }
.vm { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px; font-size: .78rem; font-weight: 650; color: var(--vit); white-space: nowrap; background: var(--gron); }
.prick { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--dampad); flex: 0 0 auto; }

/* ── Belopp ─────────────────────────────────────────────────────────────── */
.belopp { width: 100%; border-collapse: collapse; margin-top: 4px; }
.belopp td { padding: 6px 0; }
.belopp td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.belopp tr.rot td { color: var(--gron); font-weight: 600; }
.belopp tr.att-betala td { font-size: 1.25rem; font-weight: 700; border-top: 2px solid var(--text); padding-top: 10px; }
.dokument .belopp { max-width: 440px; margin-left: auto; }

/* ── Planeringen ────────────────────────────────────────────────────────── */
.plan-wrap { overflow-x: auto; margin-top: 16px; border-radius: var(--radie); border: 1px solid var(--linje); background: var(--yta); box-shadow: var(--skugga); }
table.plan { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1000px; font-size: .88rem; table-layout: fixed; }
.plan col.person-kol { width: 190px; }
.plan col.helg-kol { width: 92px; }
.plan th, .plan td { border-bottom: 1px solid var(--linje); border-right: 1px solid var(--linje); vertical-align: top; padding: 6px; }
.plan tr:last-child th, .plan tr:last-child td { border-bottom: 0; }
.plan th:last-child, .plan td:last-child { border-right: 0; }
.plan thead th { background: var(--gra); font-weight: 600; text-align: left; padding: 10px 8px; }
.plan thead th.idag { background: var(--ljusgron); color: var(--gron); }
.plan th.person { text-align: left; background: var(--yta); position: sticky; left: 0; z-index: 1; padding: 10px; font-weight: 600; }
.plan th.person .namnrad { display: flex; align-items: center; }
.plan th.person .yrke { display: block; font-weight: 400; color: var(--dampad); font-size: .8rem; margin: 2px 0 0 20px; }
.plan td { height: 74px; }
.plan td.helg { background: #f8faf6; }
.plan td.idag { background: #f7fbf4; }
.plan td.over { outline: 3px dashed var(--gron); outline-offset: -3px; }
.chip { display: block; border-radius: 8px; padding: 6px 8px; margin-bottom: 5px; color: var(--vit); text-decoration: none; font-size: .8rem; line-height: 1.3;
        cursor: grab; background: var(--gron); overflow: hidden; }
.chip:hover { filter: brightness(1.12); }
.chip strong { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.besok { background: #7a2c10; }
.chip.ledig, .chip.sjuk, .chip.utbildning { background: var(--yta); color: var(--dampad); border: 1.5px dashed var(--falt-kant); cursor: pointer; }
.chip.sjuk { border-color: var(--rod); color: var(--rod); }
.cell-varning { color: var(--rod); font-size: .76rem; font-weight: 600; }
.dra-hjalp { font-size: .88rem; color: var(--dampad); min-height: 1.4em; margin-top: 6px; }
.forklaring-rad { display: flex; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: var(--dampad); margin-top: 10px; }
.forklaring-rad span { display: inline-flex; align-items: center; gap: 6px; }
.forklaring-rad i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; background: var(--gron); }
.forklaring-rad i.besok { background: #7a2c10; }
.forklaring-rad i.franvaro { background: var(--yta); border: 1.5px dashed var(--falt-kant); }
/* Underentreprenörernas vecka: krysset syntes inte mot chipets färg. */
.chip .lank-knapp { color: var(--vit); }
/* Tabellen ryms utan sidledsrullning ner till 700 punkter (telefonen liggande, plattan). */
@media (max-width: 1100px) {
  table.plan { min-width: 0; }
  .plan col.person-kol { width: 140px; }
  .plan col.helg-kol { width: 66px; }
  /* Smalare dagar: namnet bryts på två rader i stället för att kortas. */
  .plan .chip strong, .plan .chip span { white-space: normal; overflow-wrap: break-word; }
}

/* ── Kalendrarna i telefonen (stående läge) ─────────────────────────────── */
/* Veckans bläddring: förra, den här och nästa vecka, minst 48 punkter höga. */
.veckonav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.sidhuvud .veckonav { margin-top: 0; }
.veckonav .knapp { min-height: 48px; }
/* Veckoremsan: veckans sju dagar på en rad med ett ord om varje dag. Varje dag är en länk
   till sitt block (minst 48 x 64 punkter), i dag står i klartext. */
.veckoremsa { margin: 14px 0 6px; }
.veckoremsa ol { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.veckoremsa .vr-dag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 64px;
                      padding: 4px 1px; border: 1px solid var(--linje); border-radius: 8px; background: var(--yta); color: var(--text);
                      text-decoration: none; line-height: 1.15; text-align: center; }
.veckoremsa a.vr-dag:hover { border-color: var(--gron); }
.veckoremsa .vr-vd { font-size: .82rem; color: var(--dampad); }
.veckoremsa .vr-nr { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.veckoremsa .vr-mark { font-size: .82rem; font-weight: 650; color: var(--gron); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.veckoremsa .vr-dag.helg { background: var(--gra); }
.veckoremsa .vr-dag.idag { border: 2px solid var(--gron); background: var(--ljusgron); }
.veckoremsa .vr-dag.idag .vr-vd { color: var(--gron); font-weight: 700; }
.veckoremsa.fast { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 6px 0; margin-bottom: 0; }
/* Dagslistan: samma vecka som tabellen, dag för dag, med personerna (eller företagen) i varje dag. */
.plan-dagar, .bara-dagar { display: none; }
.plan-dag { background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie); padding: 12px 12px 10px; margin-top: 12px;
            box-shadow: var(--skugga); scroll-margin-top: 92px; }
.plan-dag.helg { background: var(--gra); }
.plan-dag.idag { border: 2px solid var(--gron); }
.plan-dag > h2 { font-size: 1.1rem; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.idag-mark { display: inline-block; background: var(--gron); color: var(--vit); border-radius: 99px; padding: 1px 10px; font-size: .82rem; font-weight: 700; letter-spacing: 0; }
.plan-dag-lista { list-style: none; }
.plan-dag-lista > li { display: grid; grid-template-columns: minmax(0, 7.2rem) minmax(0, 1fr); gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--linje); align-items: start; }
.plan-dag-lista > li:first-child { border-top: 0; padding-top: 0; }
.plan-dag-namn { display: flex; align-items: center; min-height: 48px; font-weight: 600; font-size: .95rem; line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
/* Företagens namn är långa: namnet över posterna i stället för bredvid. */
.plan-dag-lista.staplad > li { grid-template-columns: minmax(0, 1fr); }
.plan-dag-lista.staplad .plan-dag-namn { min-height: 0; }
.plan-dag-poster .chip { display: flex; flex-direction: column; justify-content: center; min-height: 48px; font-size: .88rem; cursor: pointer; }
.plan-dag-poster .chip strong, .plan-dag-poster .chip span { white-space: normal; }
.plan-dag-poster > .chip:last-of-type { margin-bottom: 0; }
.plan-dag-poster .cell-varning { margin-top: 4px; font-size: .86rem; }
.plan-dag-tomma { color: var(--dampad); font-size: .92rem; margin-top: 8px; }
.plan-dag > .plan-dag-tomma:only-of-type { margin-top: 0; }
.chip.ue-post { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; padding-right: 0; cursor: default; }
.chip.ue-post .ue-post-text { min-width: 0; }
.chip.ue-post .ta-bort { min-width: 48px; min-height: 48px; font-size: 1.1rem; text-decoration: none; }
@media (max-width: 699px) {
  .plan-wrap, .dra-hjalp, .bara-tabell { display: none; }
  .plan-dagar { display: block; }
  .bara-dagar { display: inline; }
  /* Remsan går nästan kant i kant (4 punkter kvar), så att varje dag är minst 48 punkter bred på 360 punkter. */
  main .veckoremsa { margin-inline: -12px; }
  .veckonav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .veckonav .knapp { white-space: normal; text-align: center; padding: 4px 6px; line-height: 1.2; }
}

/* Vem är var */
.morgon { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.morgon > div { border: 1px solid var(--linje); border-radius: 10px; padding: 10px 12px; background: var(--gra); }
.morgon .namnrad { display: flex; align-items: center; font-weight: 600; margin-bottom: 2px; }
.morgon .ingen { color: var(--dampad); }
.lista-rad { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linje); }
.lista-rad:last-child { border-bottom: 0; }

.utkorg { display: grid; gap: 12px; margin-top: 16px; }
.bubbla { background: var(--gra); border: 1px solid var(--linje); border-radius: 16px 16px 16px 4px; padding: 12px 16px; max-width: 620px; white-space: pre-wrap; overflow-wrap: anywhere; }
.forfragan-bilder { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.forfragan-bilder img { display: block; width: 100%; height: 150px; object-fit: cover; border: 1px solid var(--linje); border-radius: 8px; }
.forfragan-bilder a:focus-visible img { outline: 3px solid var(--fokus, #1d4ed8); outline-offset: 2px; }

/* Fakturan som dokument */
.dokument { padding: 30px; }
.dok-logga { height: 64px; width: auto; }
.dok-logga.lg { background: var(--brun); border-radius: 8px; padding: 8px 10px; height: 60px; }
.dok-huvud { text-align: right; }
.dok-huvud h2 { margin-bottom: 4px; font-size: 1.35rem; }
.dok-parter { margin: 24px 0; gap: 24px; }
.dok-parter > div { min-width: 220px; line-height: 1.6; }
.dokument .tabell-wrap { margin: 0; border: 1px solid var(--linje); border-radius: 10px; }

/* ── Inloggning och felsidor ────────────────────────────────────────────── */
body.login { background: var(--sido); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.loginkort { background: var(--yta); width: 100%; max-width: 440px; padding: 34px 30px 30px; border-radius: 18px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.loginkort .loggor { display: flex; gap: 12px; justify-content: center; align-items: center; margin-bottom: 18px; }
.loginkort .loggor img { height: 64px; width: auto; }
.loginkort .loggor .lg { background: var(--brun); border-radius: 10px; padding: 8px 10px; height: 52px; }
.loginkort h1 { font-size: 1.45rem; margin: 6px 0 4px; }
.loginkort .under { color: var(--dampad); margin-bottom: 22px; }
.loginkort .falt { text-align: left; margin-bottom: 14px; }
.loginkort .demo-tips { text-align: left; background: var(--kram); color: var(--brun); border-radius: 10px; padding: 12px 14px; font-size: .9rem; margin-top: 18px; }

/* Mobilen och kundens sidor: demo-bandet */
.demo-band { background: var(--kram); color: var(--brun); font-size: .92rem; }
.demo-band .inner { padding-top: 8px; padding-bottom: 8px; }

/* ── Konversationen med kunden (konversation.py), på kontorets och kundens sidor ──
   Avsändaren står alltid i text (inte bara färg och placering). Egna meddelanden till höger. */
.trad { list-style: none; display: grid; gap: 12px; margin: 8px 0 4px; }
.medd { border: 1px solid var(--linje); border-left: 6px solid var(--brun); border-radius: var(--radie); padding: 12px 16px;
        background: var(--yta); max-width: 92%; }
.medd.egen { border-left-color: var(--gron); background: var(--ljusgron); margin-left: auto; }
.medd-huvud { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .92rem; }
.medd-text { white-space: pre-line; overflow-wrap: anywhere; }
.medd-lage { font-size: .84rem; color: var(--dampad); }
.svarsruta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linje); }
.svarsruta .falt + .falt { margin-top: 12px; }
.tradlista { list-style: none; margin: 4px 0 8px; }
.tradlista li { padding: 10px 0; border-bottom: 1px solid var(--linje); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tradlista a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.tradlista .utdrag { flex-basis: 100%; color: var(--dampad); overflow-wrap: anywhere; }
.portal-lank { margin-top: 12px; }
@media (max-width: 560px) { .medd, .medd.egen { max-width: 100%; } }
html.tg-kontrast .medd { border-width: 2px; border-color: #172215; border-left-width: 6px; }

/* Ändra genvägar (admin/genvagar.html): numrerad lista med Upp, Ned och Ta bort per rad. */
.genvag-lista { list-style: none; counter-reset: genvag; }
.genvag-lista li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
                   padding: 8px 0; border-bottom: 1px solid var(--linje); }
.genvag-lista li:last-child { border-bottom: 0; }
ul.genvag-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 28px; }
ul.genvag-lista li:last-child { border-bottom: 1px solid var(--linje); }
.genvag-namn { font-weight: 600; overflow-wrap: anywhere; }
ol.genvag-lista .genvag-namn::before { counter-increment: genvag; content: counter(genvag) ". "; color: var(--dampad); font-weight: 400; }
.genvag-knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.genvag-knappar .knapp { padding: 0 16px; }
.genvag-knappar .knapp:disabled { opacity: .45; cursor: not-allowed; background: var(--yta); }
.genvag-grupp { margin: 16px 0 2px; font-size: .95rem; color: var(--dampad); }
.genvag-lista li:focus-visible, .kort:focus-visible { outline: 3px solid var(--gron); outline-offset: 2px; }

/* ── Hemsidans bilder (hemsida_bilder.py) ──────────────────────────────────
   Varifrån bilden kommer står alltid i text, märket är bara ett stöd. */
.bildfilter a { min-height: 48px; }
.bildplatser { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); margin-top: 12px; }
.bildplats { display: flex; flex-direction: column; border: 1px solid var(--linje); border-radius: var(--radie); background: var(--yta); overflow: hidden; }
.bildplats picture, .bildval picture, .galleri-rad picture, .bildstor picture, .bildliten picture { display: block; }
.bildplats img, .bildval img, .galleri-rad img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gra); }
.bildplats-text { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.bildplats-text h3 { margin: 0; }
.bildplats-text p { margin: 0; }
.bildplats-text .knapp { margin-top: auto; align-self: flex-start; }
.status.shutterstock { border-color: var(--gul); color: var(--gul); background: var(--ljusgul); }
.bildstor { max-width: 640px; margin-bottom: 10px; }
.bildliten { max-width: 280px; margin-bottom: 8px; }
.bildstor img, .bildliten img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--gra); }
.galleri-rader { list-style: none; margin-top: 8px; }
.galleri-rad { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--linje); align-items: start; }
.galleri-rad img { border-radius: 8px; }
.galleri-rad form p { margin: 0 0 6px; }
.galleri-rad .falt { max-width: 560px; }
.bildval { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); margin: 8px 0 4px; }
.bildval label { display: flex; flex-direction: column; gap: 8px; min-height: 48px; padding: 10px; border: 2px solid var(--linje); border-radius: var(--radie); background: var(--yta); cursor: pointer; }
.bildval label:has(input:checked) { border-color: var(--gron); background: var(--ljusgron); }
.bildval-rad { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.bildval-rad input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--gron); }
.bildval-form fieldset + .falt { margin-top: 12px; max-width: 560px; }
.bildval-form { margin-top: 24px; }
.bild-rubrik { margin-top: 22px; }
.kryss.intyg { min-height: 48px; align-items: center; }
.bildalla { margin-top: 14px; }
.brodsmula { margin-top: 18px; }
.filfel { color: var(--rod); font-weight: 600; margin-top: 6px; }
@media (max-width: 560px) { .galleri-rad { grid-template-columns: minmax(0, 1fr); } }

@media print {
  .sido, .list, footer.fot, .ej-utskrift, .tg-oppna, .demo-band { display: none !important; }
  .ram { display: block; }
  body { background: #fff; }
  main { padding: 0; }
  .kort { border: 0; box-shadow: none; }
}