/* markkoll — gemensam stil för karta, 3D och rapport.
   En uppsättning tokens, inget ramverk och inget byggsteg. Sidorna hade varsin
   kopierad CSS förut, vilket gjorde att samma sak såg olika ut på tre ställen. */

:root {
  /* Färg. En accent genom hela verktyget; allt annat är neutraler med blå ton.
     Neutralgrått ser smutsigt ut mot kartan — blåtonat hör ihop med den. */
  --accent: #087e83;
  --accent-mork: #0a5f63;
  --accent-ljus: #e9f4f3;
  --bakgrund: #f5f7fa;
  --kort: #ffffff;
  --text: #172b3d;
  --text-dampad: #758895;
  --text-svag: #92a0aa;
  --ram: #dce5eb;
  --ram-ljus: #eaeff3;

  /* Status. Samma tre nivåer som hinderchecklistan och rapporten. */
  --varning: #a24e37;
  --varning-yta: #fff0e9;
  --obs: #8c6a2f;
  --obs-yta: #fff7e5;
  --ok: #2a6b3d;
  --ok-yta: #f0f8f2;

  --radie: 8px;
  --radie-liten: 5px;
  --skugga: 0 1px 3px #1834420f, 0 4px 14px #1834420a;
  --skugga-hog: 0 2px 8px #18344226;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bakgrund);
}

h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Typografi. Negativt teckenavstånd på rubriker och versal spärrad etikett
   ovanför är det som får en sida att läsa som en produkt i stället för ett
   dokument. */
.eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  color: var(--text-dampad); text-transform: uppercase;
}
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.6px; line-height: 1.25; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
h3 { font-size: 13px; font-weight: 600; }
.dampad { color: var(--text-dampad); }
.svag { color: var(--text-svag); font-size: 12px; }

/* Siffror ska stå i kolumn även när de ändras. */
.tal { font-variant-numeric: tabular-nums; }

/* Kort: vitt på tonad bakgrund, tunn ram, ingen tung skugga. */
.kort {
  background: var(--kort); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 16px 18px; margin-bottom: 14px;
}
.kort > h2 { margin-bottom: 10px; }

/* Nyckeltalsrad — det enskilt mest produktlika elementet. Etikett liten över,
   värdet stort under, enhet nedtonad. */
.nyckeltal {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--kort); border: 1px solid var(--ram);
  border-radius: var(--radie); overflow: hidden; margin-bottom: 14px;
}
.nyckeltal > div { padding: 13px 16px; border-right: 1px solid var(--ram-ljus);
  border-bottom: 1px solid var(--ram-ljus); }
.nyckeltal > div:nth-child(2n) { border-right: 0; }
.nyckeltal > div:nth-last-child(-n+2) { border-bottom: 0; }
.nyckeltal span { display: block; font-size: 11px; color: var(--text-dampad); margin-bottom: 5px; }
.nyckeltal strong { font-size: 21px; font-weight: 600; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; }
.nyckeltal small { font-size: 12px; font-weight: 400; color: var(--text-dampad); margin-left: 3px; }
.nyckeltal em { display: block; font-style: normal; font-size: 11px;
  color: var(--text-svag); margin-top: 4px; }

/* Datatabeller: etikett till vänster i dämpad ton, värde till höger. */
table { border-collapse: collapse; width: 100%; }
.data td { padding: 5px 6px 5px 0; border-bottom: 1px solid var(--ram-ljus);
  vertical-align: top; font-size: 13px; }
.data tr:last-child td { border-bottom: 0; }
.data td:first-child { color: var(--text-dampad); width: 42%; }
.data small { color: var(--text-svag); }

/* Knappar. */
.knapp {
  font-size: 12px; padding: 5px 11px; border-radius: var(--radie-liten);
  border: 1px solid var(--ram); background: var(--kort); color: var(--text);
}
.knapp:hover:not(:disabled) { border-color: #c3d0da; }
.knapp.primar { background: var(--accent); border-color: var(--accent); color: #fff; }
.knapp.primar:hover:not(:disabled) { background: var(--accent-mork); border-color: var(--accent-mork); }

/* Meddelanderutor i tre allvarlighetsgrader, samma överallt. */
.notis { padding: 9px 12px; border-radius: var(--radie-liten); font-size: 12px;
  border-left: 3px solid; margin: 6px 0; }
.notis.varning { background: var(--varning-yta); border-color: var(--varning); color: var(--varning); }
.notis.obs { background: var(--obs-yta); border-color: var(--obs); color: var(--obs); }
.notis.ok { background: var(--ok-yta); border-color: var(--ok); color: var(--ok); }

.tom { color: var(--text-svag); font-style: italic; }

/* ——— appskal: mörk sidmeny + innehåll ——— */
/* Sidmenyn är mörk för att kartan ska vara det ljusa i bilden. Två sidor delar
   den, så den ligger här och inte i respektive fil. */
:root {
  --meny: #102c40;
  --meny-text: #c7d7e0;
  --meny-svag: #8ba8b7;
  --meny-ram: #294455;
  --meny-accent: #5de2cb;
}
.skal { display: flex; height: 100vh; }
.sidmeny { width: 232px; min-width: 232px; background: var(--meny); color: var(--meny-text);
  display: flex; flex-direction: column; overflow-y: auto; }
.sidmeny a { color: inherit; text-decoration: none; }
.markesrad { display: flex; align-items: center; gap: 10px; padding: 24px 20px 28px; }
.markesrad i { background: var(--meny-accent); color: #123447; width: 34px; height: 36px;
  display: grid; place-items: center; font: 800 24px/1 system-ui; border-radius: 5px;
  font-style: normal; }
.markesrad strong { display: block; font-size: 21px; color: #fff; letter-spacing: -.8px; }
.markesrad small { display: block; font-size: 9px; letter-spacing: 2.6px; color: #97b0be;
  margin-top: 2px; }

.menyrubrik { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #839eac; padding: 0 20px 11px; }
.sidmeny nav { padding: 0 12px; display: flex; flex-direction: column; gap: 3px; }
.sidmeny nav a { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 11px;
  border-radius: 5px; font-size: 13px; }
.sidmeny nav a:hover { background: #1a3d52; }
.sidmeny nav a.pa { background: #214c59; color: #89ead7; box-shadow: inset 3px 0 var(--meny-accent); }
.sidmeny nav a b { margin-left: auto; font-weight: 500; font-size: 12px; color: #93b3c2; }

.menydel { border-top: 1px solid var(--meny-ram); margin: 22px 12px 0; padding: 20px 8px 0; }
.menydel .nummer { color: #fff; font-size: 14px; font-weight: 600; }
.menydel p { font-size: 12px; line-height: 1.6; color: #9db4c1; margin-top: 5px; }
.menyfot { margin-top: auto; padding: 20px; border-top: 1px solid var(--meny-ram);
  display: flex; gap: 10px; align-items: center; font-size: 12px; }
.menyfot .kula { background: #2a4a5d; color: #d7e8ef; border-radius: 50%; width: 31px; height: 31px;
  min-width: 31px; display: grid; place-items: center; font-size: 11px; text-transform: uppercase; }
.menyfot small { display: block; font-size: 10px; color: #89a6b6; margin-top: 3px;
  overflow-wrap: anywhere; }
.menyfot button { background: none; border: 0; color: #93d9cd; font-size: 11px; padding: 0;
  text-decoration: underline; }

.innehall { flex: 1; min-width: 0; overflow-y: auto; }
.sidhuvud { padding: 26px 32px 20px; }
.sidhuvud h1 { margin: 8px 0 6px; }

/* Formulärfält */
.falt { display: flex; flex-direction: column; gap: 6px; font-size: 12px;
  color: var(--text-dampad); margin-bottom: 14px; }
.falt input { padding: 9px 11px; border: 1px solid var(--input, var(--ram));
  border-radius: var(--radie-liten); background: #fff; color: var(--text); font-size: 14px; }
.falt input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.knapp.stor { font-size: 14px; padding: 9px 16px; }

/* Radlista: en rad per projekt eller medlem. */
.lista { border: 1px solid var(--ram); border-radius: var(--radie); background: var(--kort);
  overflow: hidden; }
.lista > * { display: flex; align-items: center; gap: 14px; padding: 14px 17px;
  border-bottom: 1px solid var(--ram-ljus); text-decoration: none; color: inherit; }
.lista > *:last-child { border-bottom: 0; }
.lista a:hover { background: var(--accent-ljus); }
.lista .rubrik { font-weight: 600; }
.lista .hoger { margin-left: auto; text-align: right; font-size: 12px; color: var(--text-dampad); }
.marke { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; background: var(--accent-ljus); color: var(--accent); }
.marke.vantar { background: var(--obs-yta); color: var(--obs); }

/* Teckenförklaring under den geologiska profilen. Ett band utan namn är en
   gissning i läsarens huvud. */
.profillegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11px;
  color: var(--text-dampad); }
.profillegend span { display: inline-flex; align-items: center; gap: 5px; }
.profillegend i { width: 11px; height: 11px; border-radius: 2px; border: 1px solid #18344230; }

/* SGF-beteckningar på kartan. Ikonen är en SVG utan egen bakgrund — Leaflets
   standardruta skulle rita en vit fyrkant runt den. */
.sgf-ikon { background: none; border: 0; }
.sgf-ikon svg { display: block; overflow: visible; }
#punkttyp { font-size: 12px; padding: 4px 6px; border: 1px solid var(--ram);
  border-radius: 4px; background: #fff; max-width: 190px; }

/* Skalväljaren på provtagningsplanen. */


/* ——— uppdragskort på arbetsytan ——— */
.uppdragsrutnat { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.uppdragskort { display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--ram); border-radius: var(--radie); overflow: hidden;
  background: var(--kort); }
.uppdragskort:hover { border-color: var(--accent); box-shadow: var(--skugga); }
.tumnagel { height: 116px; background: #e9eef2; display: grid; place-items: center;
  border-bottom: 1px solid var(--ram); }
.tumnagel.har-karta { display: block; }
.tumnagel .leaflet-container { height: 100%; background: #e9eef2; }
.uppdragstext { padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.uppdragstext strong { font-size: 14px; }

/* Radering hör inte hemma bland de vanliga korten. */
.kort.farlig { border-color: #e6c9bf; background: #fffaf8; }
.kort.farlig h2 { color: var(--varning); }
.knapp.varning { background: var(--varning); border-color: var(--varning); color: #fff; }
.knapp.varning:hover:not(:disabled) { background: #8a4130; border-color: #8a4130; }

/* Redigeringsruta för en provpunkt. */
.punktruta { display: flex; flex-direction: column; gap: 2px; min-width: 224px; }
.punktruta label { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
  color: var(--text-dampad); margin-bottom: 7px; }
.punktruta input, .punktruta select { padding: 5px 7px; border: 1px solid var(--ram);
  border-radius: 4px; font-size: 13px; color: var(--text); background: #fff; }
.punktruta .koord { font-size: 11px; color: var(--text-svag);
  font-variant-numeric: tabular-nums; margin-bottom: 9px; }
.punktruta .punktknappar { display: flex; align-items: center; gap: 9px; }
.punktruta .notis { margin: 8px 0 0; }
.leaflet-popup-content { margin: 12px 14px; }

/* Handtag för områdets hörn. Fyllt = befintligt hörn, tonat = mitthandtag som
   blir ett nytt hörn när man drar i det. */
.hornhandtag { background: #fff; border: 2px solid #0c8d86; border-radius: 3px;
  box-shadow: 0 1px 3px #18344240; cursor: move; }
.hornhandtag.mitt { border-style: dashed; opacity: .65; border-radius: 50%; }
.hornhandtag.mitt:hover { opacity: 1; }

/* Val av utseende på undersökningsområdet. */
.ytruta .ytprov { display: grid; place-items: center; padding: 4px 0 10px; }
.ytruta .fargpar { display: flex; gap: 10px; }
.ytruta .fargpar label { flex: 1; }
.ytruta input[type=color] { padding: 1px; height: 27px; cursor: pointer; }
.ytruta input[type=color]:disabled { opacity: .4; cursor: not-allowed; }
.ytruta .kryss { flex-direction: row; align-items: center; gap: 6px; margin: 2px 0 0; }
.ytruta .kryss input { accent-color: var(--accent); }

/* Ingressen på inloggningssidan — vad verktyget är, för den som landar här
   utan att veta det. */
.ingress { font-size: 14px; line-height: 1.6; color: var(--text-dampad);
  margin: 0 0 20px; }

/* En länk som inte går att följa än. Att dölja den vore sämre — då undrar man
   var funktionen tog vägen. */
.sidmeny nav a.avstangd { color: #6b8595; cursor: not-allowed; }
.sidmeny nav a.avstangd:hover { background: none; }
.sidmeny nav a.avstangd::after { content: '·'; margin-left: auto; color: #4d6b7d; }