/* Umeå kommuns grafiska profil: Björk och Bris, Calibri (Carlito som reserv), mörkgrön för länkar. */
:root {
  --bjork: #00a01e;
  --bris: #d1e8ff;
  --morkgron: #006e1e;
  --text: #555555;
  --rubrik: #222222;
  --ljusgra: #f0f0f0;
  --mellangra: #afafaf;
  --linje: #d6d6d6;
  --yta: #ffffff;
  --sida: #f5f7f9;
  --fel: #b50034;
  --fel-ljus: #fbe6ec;
  --gul: #be5900;
  --font: "Calibri", "Carlito", "Trebuchet MS", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.4; color: var(--text); background: var(--sida); }
h1, h2, h3 { color: var(--rubrik); line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0 0 .8em; }
a { color: var(--morkgron); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #007ac8; outline-offset: 2px; }

/* Prototypremsa */
.prototyp { background: #fff4d6; color: #5a3d00; font-size: 14px; text-align: center; padding: 6px 16px; border-bottom: 1px solid #f0d58a; }

/* Portalens toppbalk (självserviceportal) */
.portal { background: var(--yta); border-bottom: 4px solid var(--bjork); }
.portal .inner { max-width: 1120px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.portal img { height: 34px; display: block; }
.portal .namn { font-weight: bold; color: var(--rubrik); font-size: 18px; border-left: 1px solid var(--linje); padding-left: 16px; }
.portal .anv { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.portal select { font: inherit; font-size: 15px; padding: 4px 6px; border: 1px solid var(--mellangra); border-radius: 4px; background: var(--yta); color: var(--rubrik); }
.meny { background: var(--morkgron); }
.meny .inner { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; }
.meny a { color: #fff; text-decoration: none; padding: 10px 12px; white-space: nowrap; font-size: 15px; }
.meny a[aria-current] { background: rgba(255,255,255,.18); font-weight: bold; }

.sida { max-width: 1120px; margin: 0 auto; padding: 20px 16px 48px; }
.brodsmula { font-size: 14px; margin-bottom: 14px; }
.brodsmula a { color: var(--text); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } .layout aside { order: -1; } }

.kort { background: var(--yta); border: 1px solid var(--linje); border-radius: 6px; padding: 22px 24px; }
.kort + .kort { margin-top: 16px; }
@media (max-width: 520px) { .kort { padding: 18px 16px; } }

.ingress { font-size: 19px; font-style: italic; }

/* Rekommendation */
.rek { background: var(--bris); border-left: 6px solid var(--bjork); border-radius: 6px; padding: 16px 18px; margin: 0 0 20px; }
.rek h2 { font-size: 19px; margin-bottom: 6px; }
.rek ul { margin: 6px 0 0; padding-left: 20px; }
.rek li { margin: 3px 0; }
.rek .stopp { margin-top: 10px; padding-top: 10px; border-top: 1px solid #a9cdf0; }

/* Formulär */
fieldset { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
legend { font-size: 20px; font-weight: bold; color: var(--rubrik); padding: 0; margin-bottom: 4px; display: flex; gap: 10px; align-items: center; }
legend .nr { background: var(--bjork); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: inline-grid; place-items: center; font-size: 16px; flex: none; }
.falt { margin-top: 14px; }
.falt label, .falt .etikett { display: block; font-weight: bold; color: var(--rubrik); margin-bottom: 4px; }
.kravs::after { content: " *"; color: var(--fel); }
.hjalp { font-size: 15px; margin: -2px 0 6px; }
input[type=text], input[type=email], textarea { width: 100%; font: inherit; color: var(--rubrik); padding: 9px 11px; border: 1px solid #8f8f8f; border-radius: 4px; background: var(--yta); }
input[readonly] { background: var(--ljusgra); border-color: var(--linje); }
textarea { min-height: 110px; resize: vertical; }
.tva { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .tva { grid-template-columns: 1fr; } }
.raknare { font-size: 14px; text-align: right; margin-top: 2px; }
.felmed { color: var(--fel); font-size: 15px; margin-top: 4px; display: none; }
.falt.fel input, .falt.fel textarea { border-color: var(--fel); background: var(--fel-ljus); }
.falt.fel .felmed, .intyg.fel .felmed { display: block; }

.intyg { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linje); border-radius: 6px; margin-top: 10px; background: var(--yta); }
.intyg.fel { border-color: var(--fel); background: var(--fel-ljus); }
.intyg input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--morkgron); flex: none; }
.intyg label { color: var(--rubrik); }
.intyg .felmed { margin-top: 2px; }

/* Jämförelsetabell */
.tabellram { overflow-x: auto; margin: 10px 0 6px; border: 1px solid var(--linje); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; background: var(--yta); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linje); vertical-align: top; }
thead th { background: var(--ljusgra); color: var(--rubrik); }
thead th small { display: block; font-weight: normal; color: var(--text); }
thead th.licens { background: var(--bris); }
td.licens { background: #eef6ff; }
tbody th { font-weight: normal; color: var(--rubrik); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
.ja { color: var(--morkgron); font-weight: bold; }
.nej { color: var(--fel); font-weight: bold; }
.liten { font-size: 14px; }

.knappar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.knapp { font: inherit; font-weight: bold; border: 0; border-radius: 4px; padding: 12px 22px; cursor: pointer; background: var(--bjork); color: #fff; text-decoration: none; display: inline-block; }
.knapp:hover { background: var(--morkgron); }
.knapp.vit { background: var(--yta); color: var(--morkgron); border: 2px solid var(--morkgron); padding: 10px 20px; }
.felsammanfattning { display: none; border: 2px solid var(--fel); background: var(--fel-ljus); color: var(--rubrik); border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }
.felsammanfattning.visa { display: block; }
.felsammanfattning ul { margin: 4px 0 0; padding-left: 20px; }

/* Sidokolumn */
aside .kort h2 { font-size: 18px; }
aside ul { padding-left: 18px; margin: 0; }
aside li { margin: 5px 0; }
.fakta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; margin: 0; }
.fakta dt { font-weight: bold; color: var(--rubrik); }
.fakta dd { margin: 0; }

/* Spärr för den som inte är chef */
.sparr { border-left: 6px solid var(--gul); }

/* Kvitto */
.kvitto .bock { width: 56px; height: 56px; border-radius: 50%; background: var(--bjork); color: #fff; display: grid; place-items: center; font-size: 32px; margin-bottom: 12px; }
.kvitto dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0; }
.kvitto dt { font-weight: bold; color: var(--rubrik); }
.kvitto dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.steg { padding-left: 22px; }
.steg li { margin: 6px 0; }
@media (max-width: 520px) { .kvitto dl { grid-template-columns: 1fr; } .kvitto dd { margin-bottom: 8px; } }

footer { background: var(--morkgron); color: #fff; }
footer .inner { max-width: 1120px; margin: 0 auto; padding: 22px 16px; font-size: 15px; }
footer a { color: #fff; }

[hidden] { display: none !important; }

/* ---------- Intranätet ---------- */
.intra-topp { background: var(--bjork); color: #fff; }
.intra-topp .inner { max-width: 1120px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.intra-topp img { height: 32px; display: block; }
.intra-topp .namn { font-weight: bold; font-size: 20px; border-left: 1px solid rgba(255,255,255,.6); padding-left: 16px; }
.intra-topp .sok { margin-left: auto; background: #fff; color: var(--text); border-radius: 4px; padding: 6px 12px; font-size: 15px; min-width: 200px; }
@media (max-width: 560px) { .intra-topp .sok { display: none; } }
.hero { background: var(--bris); }
.hero .inner { max-width: 1120px; margin: 0 auto; padding: 28px 16px; }
.hero h1 { font-size: 34px; }
.hero p { font-size: 19px; font-style: italic; max-width: 720px; margin: 0; }
.intra { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .intra { grid-template-columns: minmax(0, 1fr); } .intra nav { position: static !important; } }
.intra nav { position: sticky; top: 16px; background: var(--yta); border: 1px solid var(--linje); border-radius: 6px; padding: 10px 0; }
.intra nav a { display: block; padding: 7px 16px; text-decoration: none; color: var(--rubrik); border-left: 4px solid transparent; }
.intra nav a:hover { border-left-color: var(--bjork); background: var(--ljusgra); }
.intra section { background: var(--yta); border: 1px solid var(--linje); border-radius: 6px; padding: 24px; margin-bottom: 18px; scroll-margin-top: 16px; }
@media (max-width: 520px) { .intra section { padding: 18px 16px; } }
.intra section h2 { font-size: 24px; }
.intra ul, .intra ol { padding-left: 22px; }
.intra li { margin: 5px 0; }
.klasser { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.klass { border-radius: 6px; padding: 12px 14px; border: 1px solid var(--linje); border-top-width: 8px; }
.klass h3 { margin-bottom: 4px; }
.klass.vit { border-top-color: #e6e6e6; }
.klass.gron { border-top-color: var(--bjork); }
.klass.gulk { border-top-color: #f2c200; background: #fffbea; }
.klass.rod { border-top-color: var(--fel); background: var(--fel-ljus); }
.klass .tag { font-weight: bold; font-size: 14px; }
.klass.vit .tag, .klass.gron .tag { color: var(--morkgron); }
.klass.gulk .tag, .klass.rod .tag { color: var(--fel); }
.tva-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .tva-kol { grid-template-columns: 1fr; } }
.ruta { border-radius: 6px; padding: 14px 16px; }
.ruta.ok { background: #e8f5ea; border-left: 6px solid var(--bjork); }
.ruta.inte { background: var(--fel-ljus); border-left: 6px solid var(--fel); }
.ruta h3 { margin-bottom: 6px; }
.ruta ul { margin: 0; }
.exempel { background: var(--ljusgra); border-radius: 6px; padding: 10px 14px; margin: 8px 0; font-style: italic; }
.puff { font-weight: bold; font-style: italic; color: var(--morkgron); font-size: 20px; line-height: 1.1; margin: 8px 0 14px; }
.utb { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--bris); border-radius: 6px; padding: 16px; }
.utb p { margin: 0; flex: 1 1 260px; }
.uppdaterad { font-size: 14px; color: #6b6b6b; margin-top: 10px; }