/* Gasdepån – admin. Enkelt arbetsverktyg som fungerar i telefonen (chauffören) och på datorn. */
:root {
  --bla: #1F4A6E;
  --bla-mork: #163650;
  --bla-mjuk: #8AA4BA;
  --ljus: #F4F7FA;
  --papper: #E5ECF2;
  --linje: #CDD7E0;
  --text: #1C2430;
  --gra: #4B5563;
  --rod: #B0362C;
  --rod-bak: #F5DEDB;
  --gul: #8A6A12;
  --gul-bak: #F6EDD3;
  --gron: #2A6A45;
  --gron-bak: #E1EFE6;
  --typsnitt: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: Consolas, "Courier New", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ljus); color: var(--text); font-family: var(--typsnitt); font-size: 1rem; line-height: 1.5; }
a { color: var(--bla); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
h1, h2 { line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-size: 1.7rem; color: var(--bla); }
h2 { font-size: 1.25rem; }
p { margin: 0 0 .75rem; }

/* Sidhuvud och meny */
.topp { background: var(--bla); color: #fff; }
.topp-inre { max-width: 72rem; margin: 0 auto; padding: .6rem 16px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.marke { color: #fff; text-decoration: none; font-size: 1.2rem; display: flex; gap: .4rem; align-items: baseline; }
.marke span { font-size: .95rem; opacity: .8; }
.anvandare { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .92rem; margin-left: auto; }
.anvandare form { margin: 0; }
.anvandare a.lank { color: #fff; }
button.lank { background: none; border: 1px solid var(--bla-mjuk); color: #fff; font: inherit; padding: .2rem .6rem; cursor: pointer; border-radius: 4px; }
button.lank:hover { background: rgba(255,255,255,.1); }
.menyknapp { display: none; background: none; border: 1px solid var(--bla-mjuk); color: #fff; font: inherit; padding: .35rem .8rem; border-radius: 4px; cursor: pointer; }
.meny { max-width: 72rem; margin: 0 auto; padding: 0 16px .4rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.meny a { color: #fff; text-decoration: none; padding: .35rem .7rem; border-bottom: 2px solid transparent; }
.meny a:hover { background: rgba(255,255,255,.08); }
.meny a.aktiv { border-bottom-color: #fff; font-weight: 600; }

/* Innehåll */
.sida { max-width: 72rem; margin: 0 auto; padding: 1.25rem 16px 3rem; }
.ruta { background: #fff; border: 1px solid var(--linje); border-radius: 6px; padding: 1.1rem; margin-bottom: 1.25rem; }
.ruta.smal { max-width: 28rem; margin: 2rem auto; }
.hjalp { color: var(--gra); font-size: .95rem; }
.tomt { color: var(--gra); margin: 0; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.antal { font-size: .9rem; color: var(--gra); margin: 0 0 .5rem; }
.meddelande { background: var(--gron-bak); border-left: 4px solid var(--gron); padding: .6rem .9rem; margin-bottom: 1.25rem; }
.meddelande.fel-meddelande { border-left-color: var(--rod); background: var(--rod-bak); color: var(--rod); }
.sidrubrik { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.sidrubrik h1 { margin: 0; flex: 1 1 auto; }
.brodsmula { margin: 0 0 .25rem; font-size: .9rem; }
.brodsmula a::before { content: "← "; }

/* Startsidans kort */
.rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.kort { display: grid; gap: .25rem; background: #fff; border: 1px solid var(--linje); border-top: 4px solid var(--bla); border-radius: 6px; padding: 1rem; text-decoration: none; color: inherit; min-height: 5.5rem; }
.kort b { font-size: 1.15rem; color: var(--bla); }
.kort span { color: var(--gra); font-size: .92rem; }
.kort:hover { border-color: var(--bla); }

/* Tabeller – scrollar i sidled i egen behållare på smal skärm */
.tabell { overflow-x: auto; border: 1px solid var(--linje); border-radius: 6px; background: #fff; }
table { width: 100%; min-width: 36rem; border-collapse: collapse; }
th { font-size: .85rem; text-align: left; padding: .5rem .75rem; border-bottom: 2px solid var(--bla); background: var(--papper); color: var(--bla); }
td { padding: .5rem .75rem; border-bottom: 1px solid var(--linje); vertical-align: top; }
tbody tr:hover td { background: var(--ljus); }
th a.sortlank { color: inherit; text-decoration: none; display: inline-block; padding: .15rem 0; white-space: nowrap; }
th a.sortlank:hover { text-decoration: underline; }
tr.inaktiv td, tr.inaktiv td a { color: #6B7280; }
table.logg { font-size: .9rem; }
table.logg td.varde { max-width: 18rem; overflow-wrap: anywhere; }
table.logg td.kort { max-width: 10rem; overflow-wrap: anywhere; }

.markering { display: inline-block; font-size: .85rem; font-weight: 600; padding: .05rem .5rem; border: 1px solid currentColor; border-radius: 4px; }
.markering.fara { color: var(--rod); background: var(--rod-bak); }
.markering.varning { color: var(--gul); background: var(--gul-bak); }
.markering.ok { color: var(--gron); background: var(--gron-bak); }

/* Formulär */
.falt { display: grid; gap: .25rem; margin-bottom: 1rem; }
.falt label { font-weight: 600; font-size: .92rem; color: var(--bla); }
.falt input, .falt select, .falt textarea { font: inherit; font-size: 1rem; padding: .55rem .6rem; border: 1px solid var(--bla-mjuk); border-radius: 4px; background: #fff; color: var(--text); width: 100%; min-height: 2.6rem; }
.falt input:focus, .falt select:focus, .falt textarea:focus { outline: 2px solid var(--bla); outline-offset: 0; }
.falt .hjalp { font-size: .85rem; margin: 0; }
.fel, .field-validation-error { color: var(--rod); font-size: .9rem; }
.input-validation-error { border-color: var(--rod) !important; }
.fel-sammanfattning ul { margin: 0 0 1rem; padding: .6rem .9rem .6rem 2rem; background: var(--rod-bak); border-left: 4px solid var(--rod); color: var(--rod); }
.validation-summary-valid { display: none; }
.formrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; align-items: start; }
.kryss { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; cursor: pointer; }
.kryss input { width: 1.2rem; height: 1.2rem; accent-color: var(--bla); }

.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; background: #fff; border: 1px solid var(--linje); border-radius: 6px; padding: .9rem 1rem; margin-bottom: 1rem; }
.filter .falt { margin: 0; min-width: 10rem; flex: 1 1 10rem; }
.filter .knappar { margin: 0; }

.knappar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.knappar form { margin: 0; }
.knapp { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; text-decoration: none; padding: .55rem 1.1rem; min-height: 2.75rem; border: 1.5px solid var(--bla); border-radius: 4px; background: var(--bla); color: #fff; cursor: pointer; }
.knapp:hover { background: var(--bla-mork); }
.knapp.sekundar { background: #fff; color: var(--bla); }
.knapp.sekundar:hover { background: var(--papper); }
.knapp.fara { background: var(--rod); border-color: var(--rod); color: #fff; }

.bekrafta { background: var(--rod-bak); border: 1.5px solid var(--rod); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.bekrafta p { margin-bottom: .5rem; }

/* Larm, listor och kundkortet */
.larm { padding: .6rem .9rem; margin-bottom: 1rem; border-left: 4px solid currentColor; border-radius: 4px; }
.larm.fara { color: var(--rod); background: var(--rod-bak); }
.larm.varning { color: var(--gul); background: var(--gul-bak); }
.fara-text { color: var(--rod) !important; }
.litet { font-size: .85rem; color: var(--gra); }
.punkter { margin: 0 0 1rem; padding-left: 1.25rem; }
.punkter li { margin-bottom: .2rem; }
details { margin-bottom: .75rem; }
summary { cursor: pointer; padding: .25rem 0; }
h3 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
tr.stopp td:first-child { border-left: 4px solid var(--rod); }
.formrad .bred { grid-column: span 2; }
.siffror { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.siffra { background: var(--ljus); border: 1px solid var(--linje); border-top: 3px solid var(--bla); border-radius: 4px; padding: .6rem .8rem; display: grid; }
.siffra .etikett { font-size: .85rem; color: var(--gra); }
.siffra b { font-size: 1.6rem; }
.avsnittsmeny { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.avsnittsmeny a { text-decoration: none; padding: .35rem .7rem; border: 1px solid var(--linje); border-radius: 4px; background: #fff; }
.ruta { scroll-margin-top: .75rem; }
.kryssgrupp { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.stopp-kryss { color: var(--rod); font-weight: 600; }
fieldset.dagval { border: 1px solid var(--linje); border-radius: 4px; padding: .5rem .9rem 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
fieldset.dagval legend { font-weight: 600; font-size: .92rem; color: var(--bla); padding: 0 .3rem; }
fieldset.dagval .kryss { min-height: 2.5rem; margin-bottom: .5rem; }
ul.lista { list-style: none; padding: 0; margin: 0 0 1rem; border: 1px solid var(--linje); border-radius: 4px; }
ul.lista li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .75rem; border-bottom: 1px solid var(--linje); min-height: 2.75rem; }
ul.lista li:last-child { border-bottom: 0; }
ul.lista form { margin: 0; }
.lanknapp { background: none; border: 0; padding: .4rem 0; font: inherit; color: var(--bla); text-decoration: underline; cursor: pointer; min-height: 2.5rem; }
.radform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin: 0 0 .75rem; }
.radform .falt { margin: 0; flex: 1 1 14rem; }
.radform .falt.smalt { flex: 0 1 10rem; }
.radform .falt.antal-falt { flex: 0 0 6rem; }
.radform.prova { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--linje); }
.provresultat { background: var(--ljus); border: 1px solid var(--linje); border-radius: 4px; padding: .5rem .75rem; }
.abonnemang { border: 1.5px solid var(--bla); border-radius: 6px; padding: .75rem .9rem; margin-bottom: 1rem; scroll-margin-top: .75rem; }
.abonnemang.pausat { border-style: dashed; border-color: var(--gul); background: #FFFCF3; }
.abonnemang-huvud { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem; }
.abonnemang-huvud h3 { margin: 0; flex: 1 1 auto; }
.abonnemang-huvud form { margin: 0; }
.litenknapp { min-height: 2.4rem; padding: .3rem .8rem; }
.abrader { border-top: 1px solid var(--linje); padding-top: .6rem; margin-bottom: .25rem; }
.abrad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 .75rem; border-bottom: 1px dotted var(--linje); margin-bottom: .6rem; }
.abrad .radform { flex: 1 1 auto; margin-bottom: .4rem; }
.abrad > form:last-child { margin: 0 0 .5rem; }
.ny-rad { background: var(--ljus); padding: .5rem; border-radius: 4px; }
.satser { display: grid; gap: .5rem; }
.satsrad { display: grid; grid-template-columns: 8rem 7rem 1fr; gap: .5rem 1rem; align-items: end; border-bottom: 1px solid var(--linje); padding-bottom: .5rem; }
.satsrad b { padding-bottom: .7rem; }
.satsrad .falt { margin: 0; }
.summa { margin: .75rem 0 0; }

/* Artikelväljaren (sökfält med lista, se admin.js) */
.artikelval { position: relative; }
.artikelval input { font: inherit; font-size: 1rem; padding: .55rem 2rem .55rem .6rem; border: 1px solid var(--bla-mjuk); border-radius: 4px; width: 100%; min-height: 2.6rem; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231F4A6E' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat right .6rem center; }
.artikelval input:focus { outline: 2px solid var(--bla); outline-offset: 0; }
.artikellista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); max-height: 20rem; overflow-y: auto; margin: 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid var(--bla); border-radius: 4px; box-shadow: 0 6px 18px rgba(20, 40, 60, .18); min-width: min(24rem, 90vw); }
.artikellista li { display: grid; gap: .05rem; padding: .55rem .7rem; border-bottom: 1px solid var(--linje); cursor: pointer; min-height: 2.75rem; }
.artikellista li:last-child { border-bottom: 0; }
.artikellista li small { color: var(--gra); font-family: var(--mono); font-size: .82rem; }
.artikellista li.aktiv { background: var(--papper); }
.artikellista li.vald span { font-weight: 600; }
.artikellista li.inga { color: var(--gra); cursor: default; }
form.sparar { opacity: .6; pointer-events: none; }

/* Testläge och läge */
.testlage { margin: 0; padding: .55rem 16px; background: var(--gul-bak); color: var(--gul); border-bottom: 2px solid var(--gul); text-align: center; font-size: .95rem; }
.testlage a { color: inherit; }
.ruta.lage.test { border-left: 6px solid var(--gul); }
.ruta.lage.drift { border-left: 6px solid var(--gron); }
.antalbubbla { display: inline-block; min-width: 1.4rem; margin-left: .35rem; padding: 0 .4rem; border-radius: 1rem; background: #fff; color: var(--rod); font-weight: 700; font-size: .85rem; text-align: center; line-height: 1.4rem; }
.kort.viktig { border-top-color: var(--gul); background: var(--gul-bak); }

/* Ordrar och granskning */
.granskning { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.25rem; align-items: start; }
.granskning.utan-mejl { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.originalmejl { position: sticky; top: .75rem; }
.mejlhuvud { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; margin: 0 0 .75rem; font-size: .92rem; }
.mejlhuvud dt { font-weight: 600; color: var(--gra); }
.mejlhuvud dd { margin: 0; overflow-wrap: anywhere; }
.mejltext { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--typsnitt); font-size: .95rem; background: var(--ljus); border: 1px solid var(--linje); border-radius: 4px; padding: .75rem; max-height: 60vh; overflow: auto; margin: 0 0 .75rem; }
.orderrader { display: grid; gap: .6rem; margin-bottom: 1rem; }
.orderrad { border: 1px solid var(--linje); border-radius: 6px; padding: .6rem .7rem 0; }
.orderrad.ny { border-style: dashed; background: var(--ljus); }
.orderrad.flaggad { border-color: var(--gul); }
.orderrad .radform { margin-bottom: .5rem; }
.orderrad > .falt { margin-bottom: .5rem; }
.radflagga { margin: 0 0 .5rem; font-size: .9rem; }
ul.orderlista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.orderkort { display: grid; gap: .2rem; padding: .7rem .85rem; border: 1px solid var(--linje); border-radius: 6px; background: #fff; text-decoration: none; color: inherit; }
.orderkort:hover { border-color: var(--bla); }
.orderkund { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }
.ordermarken { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.orderrader-kort { color: var(--gra); font-size: .92rem; }
.orderlista li.inaktiv .orderkort { opacity: .6; }
.skal { color: var(--gul); font-size: .92rem; }
.tal { text-align: right; white-space: nowrap; }

/* Larmraden överst och upplysningar */
.larmrad { margin: 0; padding: .6rem 16px; background: var(--rod-bak); border-bottom: 2px solid var(--rod); text-align: center; }
.larmrad a { color: var(--rod); }
.larm.info { color: var(--bla); background: var(--papper); }
pre.sms { white-space: pre-wrap; font-family: var(--typsnitt); font-size: 1rem; line-height: 1.45; background: #EAF3EA; border: 1px solid #C9DCC9; border-radius: 14px; padding: .8rem 1rem; max-width: 26rem; margin: 0 0 .5rem; }

/* Chaufförens sida */
.jobbantal { font-size: .85rem; font-weight: 400; }
.jobblista { display: grid; gap: .75rem; }
.jobb { background: #fff; border: 1px solid var(--linje); border-left: 6px solid var(--bla); border-radius: 8px; padding: .8rem .9rem; scroll-margin-top: 4.5rem; }
.jobb.hamta { border-left-color: var(--gul); }
.jobb.klar { opacity: .65; border-left-color: var(--gron); }
.jobb header { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-bottom: .2rem; }
.jobb h2 { margin: 0; font-size: 1.35rem; flex: 1 1 100%; }
.jobb p { margin: .15rem 0; }
.jobbkund { color: var(--gra); font-size: .9rem; }
.markning { font-size: 1.05rem; }
ul.jobbrader { list-style: none; margin: .4rem 0; padding: 0; font-size: 1.25rem; font-weight: 600; }
ul.jobbrader li { padding: .1rem 0; }
.jobbnotering { background: var(--gul-bak); color: var(--gul); padding: .35rem .6rem; border-radius: 4px; }
.jobbknappar { display: grid; gap: .5rem; margin-top: .6rem; }
.jobbknappar form { margin: 0; }
.knapp.stor { width: 100%; min-height: 3.4rem; font-size: 1.2rem; }
details.ejutfort summary { display: flex; align-items: center; justify-content: center; min-height: 3rem; border: 1.5px solid var(--rod); color: var(--rod); border-radius: 4px; font-weight: 600; cursor: pointer; list-style: none; }
details.ejutfort summary::-webkit-details-marker { display: none; }
details.ejutfort[open] summary { margin-bottom: .5rem; }

/* Chaufförens "Klara idag" */
details.klaraidag { margin-top: 1.25rem; }
details.klaraidag > summary { display: flex; align-items: center; justify-content: center; min-height: 3rem; border: 1.5px solid var(--gron); color: var(--gron); border-radius: 8px; font-weight: 600; cursor: pointer; background: #fff; }
details.klaraidag[open] > summary { margin-bottom: .75rem; }
.jobbtomt { font-size: 1.15rem; text-align: center; padding: 1rem 0; }

/* Kalendern */
.sida:has(.vecka) { max-width: 96rem; }
.kalenderrubrik { align-items: center; }
.kalendernav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kalenderperiod { font-weight: 600; padding: 0 .4rem; min-width: 10rem; text-align: center; }
.vecka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; align-items: start; }
.dagkolumn { background: #fff; border: 1px solid var(--linje); border-radius: 8px; padding: .5rem; min-height: 14rem; }
.dagkolumn.idag { border: 2px solid var(--bla); }
.dagkolumn.ingengas { background: var(--ljus); }
.dagkolumn.helg { background: #ECECEC; color: #6B7280; }
.dagkolumn.mal { outline: 3px dashed var(--bla); outline-offset: -3px; background: var(--papper); }
.daghuvud { border-bottom: 1px solid var(--linje); padding-bottom: .4rem; margin-bottom: .5rem; display: grid; gap: .2rem; }
.daghuvud h2 { margin: 0; font-size: 1.1rem; }
.daghuvud > .markering { justify-self: start; }
.daghuvud h2 span { font-weight: 400; color: var(--gra); }
.daghuvud h2 a { color: inherit; text-decoration: none; }
.daghuvud h2 a:hover { text-decoration: underline; }
.dagstatus { margin: 0; font-size: .85rem; color: var(--gra); display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: center; }
.dagknappar { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .9rem; }
.dagknappar form { margin: 0; }
.dagknappar .lanknapp { min-height: 0; padding: 0; }
.dagkort { display: grid; gap: .4rem; }
.kortrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem; }
.ruta.utandag { border-left: 6px solid var(--gul); }
.orderkort-k { background: #fff; border: 1px solid var(--linje); border-left: 5px solid var(--bla); border-radius: 6px; padding: .4rem .5rem; font-size: .9rem; display: grid; gap: .2rem; }
.orderkort-k[draggable="true"], .orderkort-k[draggable="true"] .kortlank { cursor: grab; }
.orderkort-k[draggable="true"]:active { cursor: grabbing; }
.orderkort-k[draggable="true"]:hover { box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.orderkort-k.drar { opacity: .4; }
.orderkort-k.abonnemang { border-left-color: #6B4FA0; }
.orderkort-k.hamtasjalv { border-left-color: var(--gul); }
.orderkort-k.tomflaskor { border-left-color: #8A5A2B; }
.orderkort-k.granska { border-left-color: var(--rod); background: var(--rod-bak); }
.orderkort-k.klar { border-left-color: var(--gron); opacity: .7; }
.kortlank { text-decoration: none; color: inherit; display: grid; }
.kortlank:hover b { text-decoration: underline; }
.kortlank span { color: var(--gra); }
.kortmarken { display: flex; flex-wrap: wrap; gap: .2rem; }
.kortmarken .markering { font-size: .72rem; padding: 0 .3rem; }
details.flytta summary { font-size: .8rem; color: var(--bla); cursor: pointer; }
.flyttval { display: flex; gap: .3rem; margin-top: .3rem; }
.flyttval select { font: inherit; font-size: .85rem; flex: 1; min-width: 0; }
.flyttval .knapp { min-height: 2rem; padding: .2rem .5rem; font-size: .85rem; }
.manad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.manadhuvud { font-weight: 600; color: var(--bla); text-align: center; }
.manaddag { display: grid; gap: .15rem; align-content: start; min-height: 5.5rem; background: #fff; border: 1px solid var(--linje); border-radius: 6px; padding: .4rem; text-decoration: none; color: inherit; }
.manaddag:hover { border-color: var(--bla); }
.manaddag.utanfor { opacity: .45; }
.manaddag.helg { background: #ECECEC; color: #6B7280; }
.manaddag.idag { border: 2px solid var(--bla); }
.utskicksrad { display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline; margin: .2rem 0 .8rem; }
.flyttnotis { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 30; display: flex; gap: 1rem; align-items: center; background: #1F2937; color: #fff; padding: .7rem 1rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.3); max-width: calc(100vw - 2rem); transition: opacity .4s; }
.flyttnotis form { margin: 0; }
.flyttnotis .lanknapp { color: #93C5FD; font-weight: 600; min-height: 0; padding: 0; }
.flyttnotis.borta { opacity: 0; }
.panelbakgrund { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.35); display: flex; justify-content: flex-end; }
.dagpanel { background: #fff; width: min(36rem, 100%); height: 100%; overflow-y: auto; padding: 1rem 1.2rem 2rem; box-shadow: -4px 0 16px rgba(0,0,0,.2); }
.dagpanel h3 { margin: 1.2rem 0 .4rem; }
.panelhuvud { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.panelhuvud h2 { margin: 0; }
.flyttfraga { border: 0; border-radius: 10px; padding: 1.2rem; max-width: min(30rem, calc(100vw - 2rem)); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.flyttfraga::backdrop { background: rgba(0,0,0,.4); }
.flyttfraga h2 { margin-top: 0; }

/* Telefon: menyn fälls ihop bakom ☰ och knappar blir breda. */
@media (max-width: 48rem) {
  .menyknapp { display: inline-block; }
  .anvandare { margin-left: 0; width: 100%; }
  html.js .meny { display: none; }
  html.js .meny.oppen { display: flex; }
  .meny { flex-direction: column; gap: 0; padding-bottom: .6rem; }
  .meny a { padding: .7rem .5rem; border-bottom: 1px solid rgba(255,255,255,.15); }
  .meny a.aktiv { border-bottom-color: rgba(255,255,255,.15); background: rgba(255,255,255,.12); }
  h1 { font-size: 1.45rem; }
  .ruta.smal { margin: 1rem auto; }
  .ruta > .knappar .knapp, form > .knappar .knapp { flex: 1 1 auto; }
  .formrad .bred { grid-column: auto; }
  .radform .falt, .radform .falt.smalt { flex: 1 1 100%; }
  .radform .falt.antal-falt { flex: 0 0 5.5rem; }
  .radform > .knapp { flex: 1 1 auto; }
  .satsrad { grid-template-columns: 1fr 6rem; }
  .granskning { grid-template-columns: minmax(0, 1fr); }
  .vecka { grid-template-columns: minmax(0, 1fr); }
  .dagkolumn { min-height: 0; }
  .manad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .2rem; font-size: .8rem; }
  .manaddag { min-height: 4rem; padding: .25rem; }
  .originalmejl { position: static; }
  .mejltext { max-height: 40vh; }
  .satsrad .falt:last-child { grid-column: 1 / -1; }
}

/* Startsida (redigering av den publika sidan) */
.startsidaform textarea { width: 100%; font: inherit; line-height: 1.5; }
.startsidaform input[type=text] { width: 100%; }
.bildval { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.bildforhand { display: block; max-width: 220px; max-height: 140px; width: auto; height: auto; border: 1px solid var(--linje); border-radius: 6px; padding: .4rem; background: #fff; margin: .3rem 0; }
.kryss { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
.stickyknappar { position: sticky; bottom: 0; background: var(--papper, #fff); padding: .6rem 0; border-top: 1px solid var(--linje); z-index: 5; }
.hjalpruta summary { cursor: pointer; font-weight: 600; }

/* Chaufförens sida: en liten kalender. Tre kolumner bredvid varandra även i telefonen (ca 375 px):
   Idag, nästa arbetsdag och Kan tas. Fliken överst är kolumnens rubrik och står kvar när man scrollar. */
.sida:has(.chaufforvy) { max-width: 64rem; padding-left: 8px; padding-right: 8px; }
.chaufforvy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: start; }
.chaufforkolumn { min-width: 0; display: grid; gap: 6px; align-content: start; }
.chaufforflik { position: sticky; top: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
  padding: .35rem .2rem; min-height: 3.3rem; border: 1.5px solid var(--bla); border-radius: 8px; background: #fff; line-height: 1.15; box-shadow: 0 2px 0 var(--ljus); }
.chaufforkolumn.idag .chaufforflik { background: var(--bla); color: #fff; }
.chaufforflik b { font-size: 1rem; white-space: nowrap; }
.flikmarke { font-size: .72rem; font-weight: 600; opacity: .85; }
.chaufforflik .jobbantal { font-size: .78rem; }
.chaufforvy .dagkort { display: grid; gap: 6px; }
.chaufforvy .jobbtomt { font-size: .95rem; padding: .6rem 0; }

.jobbkort-k { padding: 0; gap: 0; font-size: .85rem; overflow: hidden; border-left-width: 4px; }
.kortyta { display: grid; gap: .1rem; width: 100%; min-width: 0; text-align: left; background: none; border: 0; padding: .35rem .4rem .25rem; font: inherit; color: inherit; cursor: pointer; }
.kortyta:hover .kortnamn { text-decoration: underline; }
.kortnamn { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kortrader { color: var(--gra); font-size: .8rem; overflow-wrap: anywhere; }
.jobbkort-k .kortmarken { gap: 2px; }
.jobbkort-k .kortmarken .markering { font-size: .66rem; padding: 0 .25rem; line-height: 1.4; }
.snabbknappar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 .3rem .3rem; }
.snabbknappar form { margin: 0; }
.snabbknappar form:only-child { grid-column: 1 / -1; }
.snabb { width: 100%; min-height: 40px; border-radius: 6px; font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; line-height: 1; }
.klarknapp { background: var(--bla); color: #fff; border: 1.5px solid var(--bla); }
.ejknapp { background: #fff; color: var(--rod); border: 1.5px solid var(--rod); }
.angraknapp { background: #fff; color: var(--bla); border: 1.5px solid var(--bla); font-size: .85rem; }
.jobbkort-k.klar { opacity: 1; background: #F3F4F6; border-left-color: #9CA3AF; color: #6B7280; }

.jobbdetalj { border: 0; border-radius: 10px; padding: 1rem 1.1rem; width: min(26rem, calc(100vw - 1.5rem)); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.jobbdetalj::backdrop { background: rgba(0,0,0,.4); }
.jobbdetalj h2 { margin: 0 0 .2rem; font-size: 1.35rem; overflow-wrap: anywhere; }
.jobbdetalj p { margin: .25rem 0; }
.jobbdetalj .jobbknappar { margin-top: .8rem; }

.chaufforvy details.klaraidag { margin-top: 0; }
.chaufforvy details.klaraidag > summary { min-height: 2.6rem; font-size: .9rem; }
.dagenklar { margin: 0; }
.dagenklarknapp { width: 100%; min-height: 40px; font-size: .85rem; padding: .3rem .4rem; }
.dagkolumn .dagenklar { margin-top: .5rem; }

/* Korta bekräftelser överst ("Klar.", "Klar är ångrat.") som försvinner av sig själva. */
.meddelande.toast { position: fixed; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 30; margin: 0; width: max-content; max-width: calc(100vw - 1.5rem);
  box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: opacity .4s; cursor: pointer; }
.meddelande.toast.borta { opacity: 0; }

/* Admin-kalendern: "→ Nästa dag" på korten. */
.nastadag { margin: 0; }
.nastaknapp { background: none; border: 1px solid var(--bla); color: var(--bla); border-radius: 5px; font: inherit; font-size: .8rem; padding: .25rem .45rem; min-height: 2rem; cursor: pointer; width: 100%; text-align: left; }
.nastaknapp span { color: var(--gra); }

@media (min-width: 48rem) {
  .chaufforvy { gap: .75rem; }
  .chaufforkolumn, .chaufforvy .dagkort { gap: .5rem; }
  .jobbkort-k { font-size: 1rem; }
  .kortnamn { font-size: 1.15rem; }
  .kortrader { font-size: .95rem; }
  .jobbkort-k .kortmarken .markering { font-size: .75rem; }
  .chaufforflik b { font-size: 1.15rem; }
}

/* Kort av typen abonnemang ska inte ärva kundkortets ruta för abonnemang (.abonnemang ovan). */
.orderkort-k.abonnemang { margin-bottom: 0; border: 1px solid var(--linje); border-left: 5px solid #6B4FA0; padding: .4rem .5rem; scroll-margin-top: 0; }
.jobbkort-k.abonnemang { padding: 0; border-left-width: 4px; }
.notering-kort { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gra); font-size: .9rem; }

/* Kundens notering ("Helst tor/fre") och paket på måndag på korten (admin-kalendern och chauffören). */
.kundnotering { display: block; margin: 0; font-size: .75rem; color: #6B5A1E; font-style: italic; overflow-wrap: anywhere; }
.orderkort-k .kundnotering { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paketvarning { display: block; margin: 0; font-size: .75rem; font-weight: 700; color: var(--rod); background: var(--rod-bak); border-radius: 4px; padding: .05rem .3rem; }
.liverad { background: #7F1D1D; } .liverad b { color: #fff; }
.versionsrad { text-align: center; color: var(--gra); font-size: .75rem; padding: 1rem 0 1.5rem; }
.versionsrad p { margin: .15rem 1rem; }

/* Driftstart: checklistan */
.checklista { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.checklista li { display: flex; gap: .6rem; align-items: baseline; padding: .45rem .6rem; border-radius: 6px; border: 1px solid var(--linje); background: #fff; }
.checklista li.gron { border-color: var(--gron); background: #F0FAF3; }
.checklista li.rod { border-color: var(--rod); background: var(--rod-bak); }
.checklista .ikon { font-weight: 700; width: 1.2rem; text-align: center; }
.checklista li.gron .ikon { color: var(--gron); }
.checklista li.rod .ikon { color: var(--rod); }

/* Läs mejl nu (Att granska och Ordrar) */
.lasmejl { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: -.5rem 0 1rem; }
.lasmejl form { margin: 0; }
.lasmejl .hjalp { margin: 0; flex: 1 1 18rem; }

/* Ordrar: det som kräver åtgärd */
.atgard { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.atgard a { text-decoration: none; }

/* SMS som inte gick fram: röd rad överst och röd ruta i dagpanelen. */
.smslarmrad { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: center; align-items: center; color: var(--rod); }
.smslarmrad form { display: inline; }
.smslarmrad .lanknapp { color: var(--rod); font-weight: 600; min-height: 0; padding: 0; }
.markering.smsfel { white-space: normal; }
.smsfelruta p { margin: .25rem 0; }
.dagsmeddelande { margin-top: 1rem; }
.dagsmeddelande textarea { width: 100%; }
.dagsmeddelande-chauffor { margin: 0 0 .5rem; padding: .4rem .6rem; background: var(--gul-bak); color: var(--text, #1F2937); border-left: 4px solid var(--gul); border-radius: 4px; font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }
/* Inloggningen: stora fält och knapp, bra i mobilen (16 px text så att iPhone inte zoomar). */
.inloggning input { width: 100%; font-size: 16px; min-height: 2.75rem; }
.inloggning .knapp { width: 100%; min-height: 2.75rem; }
/* Dagväljaren: ← tis 13/10 → och en liten kalender. */
.dagval { position: relative; display: flex; gap: .35rem; align-items: stretch; }
.dagval .dagpil { min-width: 2.75rem; padding-left: .5rem; padding-right: .5rem; }
.dagval .dagvisning { flex: 1; min-width: 7rem; font-weight: 600; }
.dagval .dagvisning.ingengasdag { color: var(--gul); }
.minikalender { position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; width: 17.5rem; max-width: calc(100vw - 2rem); background: #fff; border: 1px solid #D1D5DB; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: .5rem; }
.minikalender-huvud { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.minikalender-huvud .lanknapp { font-size: 1.25rem; padding: 0 .6rem; min-height: 2.25rem; text-decoration: none; }
.minikalender-dagar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.minikalender-dagar span { font-size: .75rem; color: var(--gra); }
.minikalender-dagar button { font: inherit; min-height: 2.25rem; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; color: var(--text); }
.minikalender-dagar button:hover:not(:disabled) { background: #F3F4F6; }
.minikalender-dagar button.ingengasdag { color: var(--gra); }
.minikalender-dagar button:disabled { color: #C4C8CE; cursor: default; }
.minikalender-dagar button.idag { border-color: var(--gra); }
.minikalender-dagar button.vald { background: var(--bla); color: #fff; }
.minikalender-fot { display: flex; justify-content: space-between; gap: .5rem; margin-top: .25rem; }
.minikalender-fot .lanknapp { min-height: 2rem; font-size: .85rem; }
/* "+ Ny artikel" / "+ Ny kund" i ordern. */
.artikellista .nyknapp { margin-top: .4rem; min-height: 2.25rem; }
.nyruta { width: min(28rem, calc(100vw - 2rem)); border: 1px solid var(--linje); border-radius: 8px; padding: 1rem 1.25rem; }
.nyruta::backdrop { background: rgba(0,0,0,.35); }
.nyruta h2 { margin-top: 0; }
.nyruta input, .nyruta select { width: 100%; }
.nyruta fieldset { border: 0; padding: 0; margin: 0 0 .75rem; }