/* Färgerna är hämtade ur temat på my.se (GeneratePress globala färger):
     --accent   #2ca737   grön
     --accent-2 #24892c   mörkare grön
     --contrast #222222   text
     --contrast-2 #6a6a6a dämpad text
     --contrast-3 #cccccc linjer
     --base     #F5F5F5   mjuk bakgrund
     --base-2   #ffffff   sidbakgrund
   samt #bd403c som deras cookiedialog använder för destruktiva knappar.

   Ett tillägg: vit text på #2ca737 ger kontrast 3,2:1, under WCAG AA:s 4,5:1.
   Fyllda knappar använder därför MY:s mörkare gröna #24892c (4,5:1) och
   länktext en nedtonad variant #1f7a29 (5,4:1). Båda ligger kvar i deras
   egen färgfamilj – ljusgrönt används bara till ytor, aldrig till text. */
:root {
  --ink: #222222;          /* my.se --contrast */
  --ink-soft: #6a6a6a;     /* my.se --contrast-2 */
  --line: #dcdcdc;         /* mellan my.se --contrast-3 och en hårfin linje */
  --bg: #ffffff;           /* my.se --base-2 */
  --bg-soft: #f5f5f5;      /* my.se --base */
  --brand: #2ca737;        /* my.se --accent */
  --accent: #1f7a29;       /* länktext, nedtonad för läsbarhet */
  --accent-fill: #24892c;  /* my.se --accent-2, fyllda knappar */
  --accent-fill-ink: #ffffff;
  --accent-soft: #e9f4ea;  /* ljus ton av grönt, till ytor */
  --danger: #bd403c;       /* my.se destruktiv knapp */
  --radius: 10px;

  /* Genomskinliga ytor till de fastnaglade raderna. Texten under ska anas,
     inte läsas – därför hög opacitet plus blur. Utan blur blir rubriker som
     glider förbi under raden oläsliga rörigt. */
  --glass: rgba(255, 255, 255, 0.78);
  --glass-soft: rgba(245, 245, 245, 0.82);
  --glass-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.45);

  /* Höjden på den fastnaglade sidhuvudsraden, och avståndet från textspalten
     ut till fönsterkanten. Skriptet i base.html mäter båda och skriver över
     värdena; startvärdena här gör att sidan ser vettig ut även utan
     JavaScript – filterraden hamnar bara något fel och slutar vid spaltens
     kant i stället för fönstrets. */
  --topbar-h: 66px;
  --bleed: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef3;
    --ink-soft: #a2a8b8;
    --line: #2b2f38;
    --bg: #14161a;
    --bg-soft: #1b1e24;
    --brand: #3aa347;
    --accent: #5cc768;       /* 8,6:1 mot mörk bakgrund */
    --accent-fill: #3aa347;
    --accent-fill-ink: #0f1218;
    --accent-soft: #1c2a1e;
    --danger: #e8837f;
    --glass: rgba(20, 22, 26, 0.76);
    --glass-soft: rgba(27, 30, 36, 0.82);
    --glass-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.8);
  }
}

* { box-sizing: border-box; }

/* Ankarhopp och webbläsarens återställda scrollposition ska inte hamna under
   de fastnaglade raderna. Marginalen är sidhuvudet plus den hopfällda
   filterraden. */
html { scroll-padding-top: calc(var(--topbar-h) + 100px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
/* Adminsidorna redigerar tabellika data och behöver mer bredd. */
.wrap.wide { max-width: 1060px; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

/* Grön kontaktrad överst, som på my.se. Alltid samma gröna oavsett mörkt
   eller ljust läge – det är varumärkesfärgen, inte en temafärg. */
.mybar { background: var(--brand); color: #fff; }
.mybar-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px;
  padding-top: 9px; padding-bottom: 9px; font-size: 14px;
}
.mybar a { color: #fff; text-decoration: none; }
.mybar a:hover { text-decoration: underline; }
.mybar-item { display: inline-flex; align-items: center; gap: 7px; }
.mybar svg { width: 17px; height: 17px; flex: none; }
.mybar-social { display: inline-flex; align-items: center; gap: 14px; }
.mybar-social a { display: inline-flex; }
.mybar-social a:hover { opacity: 0.75; }
.mybar-social svg { width: 19px; height: 19px; }
.mybar-cta {
  margin-left: auto; border: 2px solid #fff; border-radius: 999px;
  padding: 5px 20px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; font-size: 13px; white-space: nowrap;
}
.mybar-cta:hover { background: #fff; color: var(--brand); text-decoration: none; }

/* Under 720px tar adressen för mycket plats. Mejl, ikoner och knappen räcker. */
@media (max-width: 720px) {
  .mybar-inner { gap: 8px 16px; font-size: 13px; }
  .mybar-item + .mybar-item { display: none; }
  .mybar-cta { padding: 4px 15px; }
}

/* Sidhuvudet följer med nedåt. Den gröna kontaktraden gör det inte – den är
   adress och öppettider, inte navigation, och 44 extra pixlar i toppen på
   varje sida är för dyrt för något man läser en gång. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--glass-soft);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  margin-bottom: 20px;
}
.topbar-inner {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  align-items: center; justify-content: space-between;
  padding-top: 9px; padding-bottom: 9px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 650; text-decoration: none; color: var(--ink);
}
.brand img { width: 44px; height: 44px; display: block; border-radius: 8px; }
.topbar nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.topbar nav a { font-size: 14px; text-decoration: none; }

/* Under 560px får logotyp och navigation inte plats bredvid varandra. Då
   döljs sidnamnet i texten – logotypen säger samma sak – så att raden blir
   en enda och sidhuvudet stannar lågt. */
@media (max-width: 560px) {
  .brand span { display: none; }
  .brand img { width: 38px; height: 38px; }
  .topbar nav { gap: 13px; }
}

/* Webbläsare utan backdrop-filter (äldre Firefox) får en tät bakgrund i
   stället – genomskinligt utan blur gör texten under oläslig. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--bg-soft); }
}

h1 { font-size: 30px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 19px; margin: 28px 0 10px; }
h3 { font-size: 16px; }

.lead { font-size: 17px; margin: 0 0 6px; }
.jobcount {
  margin: 0 0 20px; font-size: 15px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding-bottom: 14px;
  line-height: 1.45;
}
.jobcount strong {
  color: var(--brand); font-size: 30px; font-weight: 700;
  letter-spacing: -0.01em; vertical-align: -2px; margin-right: 2px;
}
.intro { color: var(--ink-soft); margin-top: 0; }
.count { color: var(--ink-soft); font-size: 14px; margin: 20px 0 8px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }

.badge {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600;
  vertical-align: 2px;
}

.daynav {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 0; margin: 22px 0; font-size: 14px;
}

/* Filterrad: områdeschips + fritext + yrkesroll */
/* Filterraden naglas fast direkt under sidhuvudet. Den breddas ut till
   .wrap-behållarens ytterkanter med negativ marginal, så att inget av
   innehållet under kan glida förbi utanför den genomskinliga ytan. Sidans
   text är lika bred som behållaren, alltså täcks den helt. */
.filters {
  position: sticky; top: var(--topbar-h); z-index: 40;
  margin-bottom: 8px; padding-top: 14px; padding-bottom: 6px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  /* Bara box-shadow animeras. En padding-övergång får webbläsaren att
     räkna om layouten varje bildruta i 150 ms – mitt under en scroll,
     alltså exakt när det märks som mest. */
  transition: box-shadow 0.15s ease;

  /* Ytan går kant till kant medan innehållet håller sig i textspalten.
     Marginalen drar ut elementet ur .wrap till fönstrets kanter, paddingen
     skjuter tillbaka chipsen så att de står i linje med rubrikerna ovanför.

     --bleed är avståndet från textspaltens vänsterkant till fönsterkanten och
     mäts av skriptet i base.html. Alternativet, calc(50% - 50vw), räknar in
     rullningslisten och ger några pixlars vågrät överhäng som måste klippas
     bort med overflow på body – och det klipper i sin tur adminvyns breda
     tabeller. Ett mätt värde slipper hela problemet.
     Utan JavaScript blir utfallet 20px, alltså ut till spaltens ytterkant. */
  margin-left: calc(-1 * var(--bleed));
  margin-right: calc(-1 * var(--bleed));
  padding-left: var(--bleed);
  padding-right: var(--bleed);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .filters { background: var(--bg); }
}

/* MOBIL: ingen suddning. backdrop-filter tvingar webbläsaren att rendera om
   hela ytan bakom elementet varje scroll-bildruta, och här ligger två sådana
   ytor ovanpå varandra – sidhuvudet och filterraden. På desktop är det gratis,
   på en iPhone är det den enskilt största orsaken till att raden hackar.
   Tät bakgrund ser nästan likadant ut och kostar ingenting. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .topbar,
  .filters {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .topbar { background: var(--bg-soft); }
  .filters { background: var(--bg); }

  /* Håll omritningen inne i raden i stället för att låta den smitta av sig
     på resten av sidan när .stuck slår om. */
  .filters { contain: layout paint; }
}

/* Fastnaglat läge, satt av skriptet i base.html. Fritextsökningen fälls ihop:
   den är ett medvetet val man scrollar upp för, medan chipsen är det man
   klickar i förbifarten. Utan det tar raden en fjärdedel av skärmen. */
.filters.stuck {
  padding-top: 6px; padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
}
.filters.stuck .filterform,
.filters.stuck .fnote { display: none; }
.filters.stuck .chiprow { margin-bottom: 3px; }
.filters.stuck .fchip { padding: 2px 10px; font-size: 12.5px; }
.filters.stuck .flabel { font-size: 11px; min-width: 88px; }

.chiprow {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
  align-items: center;
}
.flabel {
  font-size: 12px; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.04em; min-width: 96px;
}
@media (max-width: 560px) {
  .flabel { min-width: 100%; margin-bottom: -2px; }
  /* Fastnaglat på mobil radbryts chipsen till sex rader. Låt varje grupp
     ligga på en rad som går att dra i sidled i stället – etiketten krymper
     till sin egen bredd och raden blir 34 px hög. */
  .filters.stuck .chiprow {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-bottom: 4px;
  }
  .filters.stuck .chiprow::-webkit-scrollbar { display: none; }
  /* flex: none på båda – annars kläms etiketten ihop till en bokstav och
     chipsen till sina kortaste ord när raden inte får radbryta. */
  .filters.stuck .flabel {
    min-width: 0; margin-bottom: 0; flex: none; white-space: nowrap;
  }
  .filters.stuck .fchip { flex: none; }
}
.fnote { margin: 6px 0 0; }
.fchip {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13px; text-decoration: none; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px;
}
.fchip:hover { border-color: var(--ink-soft); }
.fchip .n { color: var(--ink-soft); font-size: 12px; }
.fchip.on {
  background: var(--accent-fill); border-color: var(--accent-fill);
  color: var(--accent-fill-ink); font-weight: 600;
}
.fchip.on .n { color: var(--accent-fill-ink); opacity: 0.75; }

.filterform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filterform input[type=search] {
  flex: 1 1 200px; min-width: 0; margin: 0;
  padding: 7px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink);
}
.filterform select {
  font: inherit; font-size: 14px; padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); max-width: 220px;
}
.filterform .clear { font-size: 13px; }
@media (max-width: 560px) {
  .filterform input[type=search], .filterform select { flex: 1 1 100%; max-width: none; }
}

a.tag { text-decoration: none; }
a.tag:hover { border-color: var(--ink-soft); color: var(--ink); }

.jobs { list-style: none; padding: 0; margin: 0; }
.job {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.job:first-child { border-top: none; }
.job h2 { font-size: 18px; margin: 0 0 4px; }
.job h2 a { text-decoration: none; }
.job h2 a:hover { text-decoration: underline; }
.meta { margin: 0 0 6px; color: var(--ink-soft); font-size: 14px; }
.why { margin: 0 0 8px; font-size: 14px; }
.sources { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }

/* Erfarenhetskrav. Röd markering, men inte en varning – annonsen är fullt
   giltig, den vänder sig bara till någon som redan hunnit jobba några år.
   Färgen är my.se destruktiva röd, som klarar 4,5:1 mot både ljus och mörk
   bakgrund. */
.explabel {
  display: inline-block; margin: 0 0 8px; padding: 2px 9px;
  font-size: 13px; font-weight: 600; color: var(--danger);
  border: 1px solid currentColor; border-radius: 999px;
}

.tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 12px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; color: var(--ink-soft);
}
.tag.src { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 28px 22px; text-align: center; margin: 24px 0;
}
.empty p { margin: 4px 0; }

.archhead { margin-top: 36px; }
.archlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.archlist li { background: var(--bg-soft); border-radius: 999px; padding: 3px 12px; }
.archgrid { list-style: none; padding: 0; }
.archgrid li {
  display: flex; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line); padding: 9px 0;
}

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin: 18px 0; background: var(--bg-soft);
}
.card h2 { margin-top: 0; }
.card.narrow { max-width: 340px; }
.stats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 20px; }

.flash {
  background: var(--accent-soft); border-radius: var(--radius);
  padding: 10px 14px; font-size: 14px;
}
.flash.warn { background: #fdecea; color: #7f1d1b; }
@media (prefers-color-scheme: dark) { .flash.warn { background: #3a1f1e; color: #ffb4ad; } }

.adminnav { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 20px; font-size: 15px; }

label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
input[type=text], input[type=password], input:not([type]), textarea {
  display: block; width: 100%; margin-top: 3px;
  padding: 7px 9px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink);
}
textarea { resize: vertical; }

button {
  font: inherit; font-size: 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 13px; background: var(--bg); color: var(--ink);
}
button:hover { border-color: var(--ink-soft); }
button.primary {
  background: var(--accent-fill); border-color: var(--accent-fill);
  color: var(--accent-fill-ink); font-weight: 600;
}
button.primary:hover { background: var(--brand); border-color: var(--brand); }
button.danger { color: var(--danger); }
button.small { padding: 4px 10px; font-size: 13px; }
button[disabled] { opacity: 0.55; cursor: default; }
.linkbtn {
  border: none; background: none; padding: 0; color: var(--accent);
  font-size: 14px; text-decoration: underline;
}
.inline { display: inline; }

.editrow {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: 1fr 1.4fr 1fr auto;
  border-bottom: 1px solid var(--line); padding: 12px 0;
}
.editrow.new { border: none; padding: 0; }
.editrow.off { opacity: 0.5; }
.editrow label { margin-bottom: 0; }
.editrow .actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.editrow .check {
  display: flex; align-items: center; gap: 4px; font-size: 13px; margin: 0;
}
.editrow .check input { width: auto; margin: 0; }
@media (max-width: 720px) {
  .editrow { grid-template-columns: 1fr; }
}

/* Områden: region som kort, dess orter som kompakta chips */
.card.region.off { opacity: 0.6; }
.region-head { border-bottom: none; padding-top: 0; grid-template-columns: 1fr 1.4fr auto; }
.addcity {
  border-bottom: none; border-top: 1px solid var(--line);
  margin-top: 14px; grid-template-columns: 1.4fr 1fr auto;
}
.citychips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.chipform {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); padding: 2px 4px 2px 9px;
}
.chipform label {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0; font-size: 13px; color: var(--ink); cursor: pointer;
}
.chipform input[type=checkbox] { width: auto; margin: 0; }
.chipform.off { opacity: 0.45; }
.chipform.off label { color: var(--ink-soft); }
.chipx {
  border: none; background: none; padding: 0 5px;
  color: var(--ink-soft); font-size: 15px; line-height: 1;
}
.chipx:hover { color: var(--danger); }

.adminjob {
  display: flex; gap: 14px; justify-content: space-between;
  border-bottom: 1px solid var(--line); padding: 12px 0;
}
.adminjob-title { margin: 0 0 2px; font-weight: 600; }
.adminjob-title a { text-decoration: none; }
.adminjob.hiddenjob { opacity: 0.45; }
.adminjob.filtered { opacity: 0.6; }
.adminjob p { margin: 0 0 3px; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); }
th { color: var(--ink-soft); font-weight: 600; font-size: 13px; }

pre.log {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.5;
}

.foot {
  margin: 56px 0 32px; padding-top: 16px;
  border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px;
}

/* Yrkesrollstabellen. Två kryssrutor per rad, så de behöver stå tydligt isär
   och ha en generös klickyta – kunden sitter ofta i mobil. */
table.roles { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.roles th, table.roles td {
  padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left;
  vertical-align: top;
}
table.roles th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); font-weight: 600;
}
table.roles th.num, table.roles td.num { text-align: right; }
table.roles th.mid, table.roles td.mid { text-align: center; width: 62px; }
table.roles td.mid input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
table.roles tr.off td { opacity: 0.5; }
table.roles tr.off td.mid { opacity: 1; }