/*
	Tellur – designsystem (se design.md)

	- Lastes ETTER Fomantic på alle sider i web- og mobilportalen (tema_hode() i web/funksjoner/tema.php).
	- Alle farger, størrelser og avstander hentes fra variablene i del 1. Bruk ALDRI faste fargekoder i ny CSS.
	- Lyst er standard. Mørkt settes med data-theme="dark" på <html> (mork_sett() / mork_bytt() i annet.js).
	- Mobilportalen har klassen tl-mobile på <body>, som gir større kontroller.
	- Del 1–20 følger design.md §2 og §6. Delene merket «Tellur» er tilpasninger til dagens markup og
	  dagens skall. De ryddes bort etter hvert som sidene bygges om (fase 2 og 3).
*/


/* ===== Font: Figtree (variabel vekt, ligger lokalt i fonter/) ===== */
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('fonter/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('fonter/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== tellur-theme.css – del 1: tokens ===== */
:root {
  /* Typografi */
  --tl-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tl-font-tabell: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* innholdet i tabellcellene (Lato fra Fomantic, skarpere enn Figtree på Windows) */
  --tl-fs-xs: 12px;      /* bunnmeny, små merker */
  --tl-fs-sm: 13px;      /* feltetiketter, tabellhoder, statusmerker */
  --tl-fs-meta: 14px;    /* hjelpetekst, metadata */
  --tl-fs-body: 15px;    /* brødtekst og kontroller på PC */
  --tl-fs-md: 16px;      /* brødtekst og kontroller på mobil */
  --tl-fs-lg: 17px;      /* korttitler, listetitler */
  --tl-fs-xl: 20px;      /* modaltitler, skjermtitler med tilbakeknapp */
  --tl-fs-h1: 26px;      /* sidetittel på PC */
  --tl-fs-display: 28px; /* stor tittel på mobil */
  --tl-lh: 1.45;

  /* Avstand (4-px-rutenett) */
  --tl-s1: 4px;  --tl-s2: 8px;  --tl-s3: 12px; --tl-s4: 16px;
  --tl-s5: 20px; --tl-s6: 24px; --tl-s8: 32px; --tl-s10: 40px; --tl-s12: 48px;

  /* Radius */
  --tl-r-sm: 8px;       /* små elementer, vaktblokker */
  --tl-r-ctl: 10px;     /* felt og nedtrekk */
  --tl-r-btn: 10px;     /* knapper */
  --tl-r-card: 14px;    /* kort, tabeller, segmenter */
  --tl-r-modal: 16px;
  --tl-r-pill: 999px;   /* statusmerker, bryter */

  /* Størrelser */
  --tl-ctl-h: 44px;     /* felt og nedtrekk */
  --tl-btn-h: 44px;     /* knapper */
  --tl-ctl-h-sm: 36px;  /* kompakte knapper i tabeller */
  --tl-nav-w: 248px;
  --tl-nav-w-min: 68px;
  --tl-topbar-h: 64px;

  /* Flater og tekst – lyst */
  --tl-bg: #F4F6FA;            /* sidebakgrunn */
  --tl-surface: #FFFFFF;       /* kort, tabeller, modaler */
  --tl-surface-2: #F8FAFC;     /* tabellhode, hover på rader */
  --tl-surface-3: #EEF1F6;     /* hover på knapper, nøytrale merker */
  --tl-field: #FFFFFF;         /* bakgrunn i felt */
  --tl-chrome: #FFFFFF;        /* bunnmeny og fast handlingsfelt på mobil */
  --tl-border: #DDE3EC;
  --tl-border-strong: #C9D2DF; /* kant på felt og sekundærknapper */
  --tl-divider: #E7EBF1;       /* skillelinjer i lister */
  --tl-text: #14203A;
  --tl-text-2: #3D4960;        /* sekundær tekst med mye innhold */
  --tl-muted: #56627A;         /* etiketter, metadata */
  --tl-placeholder: #6B7689;
  --tl-disabled: #8A94A6;

  /* Merkevare og handling */
  --tl-primary: #1A64B7;
  --tl-primary-hover: #124A8A;
  --tl-on-primary: #FFFFFF;
  --tl-primary-soft: #E8F1FB;       /* valgt rad, aktiv fane i bunnmeny, infomerker */
  --tl-primary-soft-text: #124A8A;
  --tl-link: #1A64B7;
  --tl-link-hover: #124A8A;
  --tl-focus: #1A64B7;
  --tl-focus-ring: 0 0 0 3px rgba(26, 100, 183, 0.25);
  --tl-brand-ring: #5B9BD5;         /* ringen i logoen */

  /* Sterke nøytrale flater (datomerke, initialer, «På vakt»-kort) */
  --tl-strong-bg: #14203A;
  --tl-strong-text: #FFFFFF;
  --tl-hero-bg: #14203A;
  --tl-hero-border: transparent;

  /* Status */
  --tl-ok-bg: #E3F4E8;     --tl-ok-text: #17603A;
  --tl-warn-bg: #FDF0D5;   --tl-warn-text: #7A4B00;
  --tl-danger-bg: #FCE4E4; --tl-danger-text: #9B1C1C;
  --tl-danger: #B42318;           /* fylt fareknapp, uleste-teller */
  --tl-danger-hover: #912018;
  --tl-danger-border: #E3B4B0;    /* kant på fareknapp med kontur */

  /* Venstremeny på PC (mørk i begge temaer) */
  --tl-nav-bg: #14203A;
  --tl-nav-text: #C9D3E3;
  --tl-nav-muted: #8E9BB3;
  --tl-nav-hover: rgba(255, 255, 255, 0.08);
  --tl-nav-active: #1A64B7;
  --tl-nav-active-text: #FFFFFF;
  --tl-nav-link: #7DB6F5;         /* lenke på mørk blå bakgrunn (innloggingen i mobilportalen) */

  /* Lag og skygger */
  --tl-overlay: rgba(14, 20, 32, 0.55);   /* bak modaler */
  --tl-veil: rgba(255, 255, 255, 0.8);    /* lasteslør over et kort */
  --tl-tooltip-bg: #14203A;
  --tl-tooltip-text: #FFFFFF;
  --tl-shadow-sm: 0 1px 2px rgba(10, 20, 40, 0.06);
  --tl-shadow-md: 0 8px 24px rgba(10, 20, 40, 0.16);
  --tl-shadow-lg: 0 24px 60px rgba(10, 20, 40, 0.28);

  /* Bevegelse */
  --tl-dur: 150ms;
  --tl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light;
}

html[data-theme="dark"] {
  --tl-bg: #0E1420;
  --tl-surface: #182132;
  --tl-surface-2: #131B2A;
  --tl-surface-3: #26324A;
  --tl-field: #1F2A3D;
  --tl-chrome: #131B2A;
  --tl-border: #2C3850;
  --tl-border-strong: #3A4864;
  --tl-divider: #26324A;
  --tl-text: #EEF2F8;
  --tl-text-2: #C5CEDD;
  --tl-muted: #A3AEC2;
  --tl-placeholder: #8793A8;
  --tl-disabled: #5A6780;

  --tl-primary: #1F6FC9;
  --tl-primary-hover: #2F7FDB;
  --tl-primary-soft: #1B3352;
  --tl-primary-soft-text: #DCEBFC;
  --tl-link: #7DB6F5;
  --tl-link-hover: #A9CFFA;
  --tl-focus: #7DB6F5;
  --tl-focus-ring: 0 0 0 3px rgba(125, 182, 245, 0.3);

  --tl-strong-bg: #2A3650;
  --tl-strong-text: #EEF2F8;
  --tl-hero-bg: #16345A;
  --tl-hero-border: #2F5C92;

  --tl-ok-bg: #143524;     --tl-ok-text: #8FE0B0;
  --tl-warn-bg: #3D2E0C;   --tl-warn-text: #F5CB73;
  --tl-danger-bg: #40181A; --tl-danger-text: #F7A8A8;
  --tl-danger: #D13A2E;
  --tl-danger-hover: #E04B3F;
  --tl-danger-border: #6B2F2B;

  --tl-nav-bg: #0A0F18;

  --tl-overlay: rgba(0, 0, 0, 0.6);
  --tl-veil: rgba(24, 33, 50, 0.8);
  --tl-tooltip-bg: #EEF2F8;
  --tl-tooltip-text: #14203A;
  --tl-shadow-sm: none;
  --tl-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --tl-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Mobilappen: større kontroller og rundere hjørner */
body.tl-mobile {
  --tl-fs-body: 16px;
  --tl-ctl-h: 52px;
  --tl-btn-h: 56px;
  --tl-ctl-h-sm: 44px;
  --tl-r-ctl: 12px;
  --tl-r-btn: 14px;
  --tl-r-card: 18px;
  --tl-r-modal: 20px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --tl-dur: 0ms; }
}


/* ===== tellur-theme.css – del 2: skall for nettsiden ===== */
/* Avvik fra §5.1.1: lagene ligger over Fomantics klebrige felt (800) og under modalene (1000), og menyen er
   sammenslått som standard under 1500 px (ikke 1024), fordi brede tabeller trenger plassen */
.tl-app { display: flex; min-height: 100vh; background: var(--tl-bg); }

.tl-nav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  flex: 0 0 var(--tl-nav-w); width: var(--tl-nav-w);
  box-sizing: border-box; padding: 16px 12px 20px;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--tl-nav-bg); color: var(--tl-nav-text);
  transition: width var(--tl-dur) var(--tl-ease), flex-basis var(--tl-dur) var(--tl-ease);
  z-index: 860;
}
.tl-app[data-nav="min"] .tl-nav { flex-basis: var(--tl-nav-w-min); width: var(--tl-nav-w-min); }
.tl-app[data-nav="min"] .tl-nav-label { display: none; }

.tl-nav-brand {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; flex: none;
  color: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 0.28em;
}
.tl-nav-brand:hover { color: #FFFFFF; }
.tl-nav-group { display: flex; flex-direction: column; gap: 2px; }
.tl-nav-group-title {
  padding: 0 10px 6px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-nav-muted);
}
.tl-nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px; flex: none;
  border-radius: 10px; color: var(--tl-nav-text); text-decoration: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.tl-nav-item:hover { background: var(--tl-nav-hover); color: #FFFFFF; }
.tl-nav-item[aria-current="page"] { background: var(--tl-nav-active); color: var(--tl-nav-active-text); }
.tl-nav-item > i.icon { margin: 0; width: 22px; font-size: 18px; flex: none; }
.tl-app[data-nav="min"] .tl-nav-item { justify-content: center; padding: 0; }
.tl-nav-item:focus-visible { outline: 2px solid #7DB6F5; outline-offset: 2px; }

.tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tl-topbar {
  position: sticky; top: 0; z-index: 850;
  min-height: var(--tl-topbar-h); box-sizing: border-box; padding: 10px 24px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--tl-surface); border-bottom: 1px solid var(--tl-border);
}
.tl-spacer { flex: 1; }

.tl-content { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.tl-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tl-page-head h1 { margin: 0; font-size: var(--tl-fs-h1); font-weight: 700; letter-spacing: -0.01em; }
.tl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Filterlinje rett under fanene (§12). Eget valg etter §11: valgknapper og nedtrekk til venstre, søkefeltet fyller resten.
   Innholdet oppdateres når et valg endres – ingen «Vis»-knapp */
.tl-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 -4px; }
.tl-filters > .tl-choices { flex: none; }
.tl-filters .tl-choice { flex: none; padding: 0 16px; }
.tl-filters > .ui.input { flex: 1 1 240px; }
/* Avstanden mellom knappene kommer fra gap, ikke fra Fomantics marg (§6.2) */
.tl-toolbar > .ui.button, .tl-filters .ui.button { margin: 0; }
/* Søkefelt, nedtrekk og bryter i sidehodet (Ansatte, Arbeidssteder, Vaktliste) */
.tl-toolbar > .ui.input, .tl-toolbar > .ui.dropdown, .tl-toolbar > .ui.checkbox, .tl-toolbar > span > .ui.button { margin: 0; }

/* Maskert verdi (§1 punkt 7): prikker i stedet for personnummer og kontonummer, med «Vis»-knapp bak */
.tl-masked { display: inline-block; margin-right: 12px; color: var(--tl-muted); letter-spacing: 0.12em; vertical-align: middle; }
/* Verdien vises (knappen heter da «Skjul») */
.tl-masked.vist { color: var(--tl-text); letter-spacing: normal; }

/* Teller på meldingsknappen */
.tl-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--tl-danger); color: #FFFFFF;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.tl-badge:empty { display: none; }

/* Smalere skjermer: menyen lagt sammen som standard */
@media (max-width: 1499px) {
  .tl-app:not([data-nav="full"]) .tl-nav { flex-basis: var(--tl-nav-w-min); width: var(--tl-nav-w-min); }
  .tl-app:not([data-nav="full"]) .tl-nav-label { display: none; }
  .tl-app:not([data-nav="full"]) .tl-nav-item { justify-content: center; padding: 0; }
}

/* Menyknappen i topplinjen: kolonner når den slår menyen sammen, hamburgermeny når den åpner skuffen (telefon) */
.tl-meny-knapp > .bars.icon { display: none; }

/* Telefon: menyen blir en skuff som åpnes fra menyknappen */
@media (max-width: 767px) {
  .tl-meny-knapp > .columns.icon { display: none; }
  .tl-meny-knapp > .bars.icon { display: inline-block; }
  /* body foran: må slå regelen for sammenslått meny over (.tl-app:not([data-nav="full"]) .tl-nav), ellers blir skuffen bare 68 px bred */
  body .tl-app.tl-app .tl-nav {
    position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: 280px; flex-basis: 280px;
    transform: translateX(-100%); transition: transform var(--tl-dur) var(--tl-ease);
  }
  body .tl-app.tl-app[data-nav-open="true"] .tl-nav { transform: none; box-shadow: var(--tl-shadow-lg); }
  .tl-app[data-nav-open="true"]::after {
    content: ""; position: fixed; inset: 0; background: var(--tl-overlay); z-index: 855;
  }
  .tl-app .tl-nav .tl-nav-label { display: initial; }
  .tl-app .tl-nav .tl-nav-item { justify-content: flex-start; padding: 0 10px; }
  .tl-topbar { padding: 10px 16px; }
  .tl-content { padding: 20px 16px 40px; }
}

/* --- Tellur: logo, undergrupper og tellere i menyen (egne valg) --- */
/* Logoen er en SVG uten tom kant (blå ring, hvit tekst). Menyen har egen versjon med større ordmerke (tellur_meny.svg), klokken er lik.
   I sammenslått meny er feltet like smalt som klokken, slik at bare den vises */
/* Logoen står midt i menyen (etter ønske 20.10.2026) */
.tl-nav-brand { justify-content: center; }
.tl-nav-logo {
  display: block; width: 150px; height: 44px; flex: none;
  background: url('../bilder/tellur_meny.svg') no-repeat center center; background-size: auto 26px;
}
.tl-app[data-nav="min"] .tl-nav-brand { padding: 0; justify-content: center; }
.tl-app[data-nav="min"] .tl-nav-logo { width: 26px; background-position: 0 center; }

/* HMS, Økonomi og Verktøy har underpunkter: overskriften er en knapp, og punktene åpnes som en egen meny ut til høyre.
   Menyen er position:fixed og plasseres av meny_undermeny_vis() i annet.js, fordi .tl-nav ruller og ellers ville klippet den.
   Feltet til venstre i .tl-nav-sub-menu er gjennomsiktig og dekker avstanden fra overskriften, slik at menyen ikke lukkes på veien */
.tl-nav-sub { display: flex; flex-direction: column; gap: 2px; }
.tl-nav-sub-title {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 10px; flex: none;
  border: 0; border-radius: 10px; background: transparent; color: var(--tl-nav-text);
  font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.tl-nav-sub-title:hover, .tl-nav-sub.tl-open > .tl-nav-sub-title { background: var(--tl-nav-hover); color: #FFFFFF; }
.tl-nav-sub:has(.tl-nav-item[aria-current="page"]) > .tl-nav-sub-title { background: var(--tl-nav-active); color: var(--tl-nav-active-text); }
.tl-nav-sub-title:focus-visible { outline: 2px solid #7DB6F5; outline-offset: 2px; }
.tl-nav-sub-title > i.icon { margin: 0; width: 22px; font-size: 18px; flex: none; }
.tl-nav-sub-title > .tl-nav-label { flex: 1; }
.tl-nav-sub-title > i.tl-nav-sub-pil { width: auto; font-size: 14px; color: var(--tl-nav-muted); }
.tl-nav-sub-menu { display: none; position: fixed; left: 0; top: 0; padding-left: 18px; z-index: 1; }
.tl-nav-sub.tl-open > .tl-nav-sub-menu { display: block; }
.tl-nav-sub-list {
  display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 6px;
  background: var(--tl-nav-bg); border: 1px solid var(--tl-nav-hover); border-radius: 12px; box-shadow: var(--tl-shadow-lg);
}
/* Punktene i undermenyen har alltid ikon og navn, også når hovedmenyen er slått sammen til bare ikoner */
.tl-app .tl-nav .tl-nav-sub-menu .tl-nav-item { height: 40px; padding: 0 12px; justify-content: flex-start; font-size: 14px; font-weight: 500; white-space: nowrap; }
.tl-app .tl-nav .tl-nav-sub-menu .tl-nav-label { display: initial; }
.tl-app .tl-nav .tl-nav-sub-menu .tl-nav-teller { position: static; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; line-height: 1; }
.tl-app[data-nav="min"] .tl-nav-sub-title { justify-content: center; padding: 0; }
.tl-app[data-nav="min"] .tl-nav-sub-pil { display: none; }

/* Rullefeltet i menyen er smalt og mørkt */
.tl-nav { scrollbar-width: thin; scrollbar-color: var(--tl-nav-muted) transparent; }
.tl-nav::-webkit-scrollbar { width: 6px; }
.tl-nav::-webkit-scrollbar-track { background: transparent; }
.tl-nav::-webkit-scrollbar-thumb { background: var(--tl-nav-hover); border-radius: 3px; }

/* Telleren har egen linjehøyde: den arvede (1.15) la tallet ca. 1 px over midten av boblen. Den lille boblen (16 px) står midt med 1.1 */
.tl-nav-teller {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; flex: none;
  background: var(--tl-danger); color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.tl-nav-teller:empty { display: none; }
.tl-app[data-nav="min"] .tl-nav-teller { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 1.1; }

@media (max-width: 1499px) {
  .tl-app:not([data-nav="full"]) .tl-nav-brand { padding: 0; justify-content: center; }
  .tl-app:not([data-nav="full"]) .tl-nav-logo { width: 26px; background-position: 0 center; }
  .tl-app:not([data-nav="full"]) .tl-nav-sub-title { justify-content: center; padding: 0; }
  .tl-app:not([data-nav="full"]) .tl-nav-sub-pil { display: none; }
  .tl-app:not([data-nav="full"]) .tl-nav-teller { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 1.1; }
}
/* Nettbrett og smale vinduer (768-1179 px): menyen er alltid bare ikoner, også når brukeren har valgt åpen meny (tl_nav=full).
   Menyknappen skjules, fordi den ikke har noe å bytte til her */
@media (min-width: 768px) and (max-width: 1179px) {
  .tl-app .tl-nav { flex-basis: var(--tl-nav-w-min); width: var(--tl-nav-w-min); }
  .tl-app .tl-nav-label { display: none; }
  .tl-app .tl-nav-item { justify-content: center; padding: 0; }
  .tl-app .tl-nav-brand { padding: 0; justify-content: center; }
  .tl-app .tl-nav-logo { width: 26px; background-position: 0 center; }
  .tl-app .tl-nav-sub-title { justify-content: center; padding: 0; }
  .tl-app .tl-nav-sub-pil { display: none; }
  .tl-app .tl-nav-teller { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 1.1; }
  .tl-topbar .ui.button.tl-meny-knapp { display: none; }
}
@media (max-width: 767px) {
  .tl-app .tl-nav .tl-nav-brand { padding: 0 8px; justify-content: center; }
  .tl-app .tl-nav .tl-nav-logo { width: 150px; background-position: center center; }
  /* I skuffen er det ikke plass til en meny ut til høyre: underpunktene står rykket inn under overskriften */
  .tl-app .tl-nav .tl-nav-sub-title { justify-content: flex-start; padding: 0 10px; }
  .tl-app .tl-nav .tl-nav-sub-pil { display: none; }
  .tl-app .tl-nav .tl-nav-sub-menu { display: block; position: static; padding: 0; }
  .tl-app .tl-nav .tl-nav-sub-list { min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .tl-app .tl-nav .tl-nav-sub-menu .tl-nav-item { padding: 0 10px 0 22px; }
  .tl-app .tl-nav .tl-nav-teller { position: static; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; line-height: 1; }
  .tl-app .tl-nav .tl-nav-sub-teller { display: none; }
}

/* --- Tellur: innlogging, tofaktor og glemt passord (design.md §12, web/01-innlogging.png) --- */
/* Mørk blå bakgrunn, logo og hvitt kort midt på siden. Brukes av web/index.php, web/tofaktor.php og mobil/glemt_passord.php,
   send_mail.php og send_passord.php (body har klassen innlogging) */
body.innlogging {
  margin: 0; min-height: 100vh; box-sizing: border-box; padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--tl-nav-bg);
}
.innlogging_logo { height: 36px; margin: 12px 0 32px 0; }
.innlogging_kort {
  width: 100%; max-width: 440px; box-sizing: border-box; padding: 32px;
  background: var(--tl-surface); border-radius: var(--tl-r-modal); box-shadow: var(--tl-shadow-lg);
}
.innlogging_kort h1 { margin: 0 0 20px 0; font-size: var(--tl-fs-h1); font-weight: 700; }
.innlogging_kort form + form { margin-top: 12px; }
.innlogging_kort .innlogging_tekst { margin: 0 0 20px 0; color: var(--tl-text-2); }
.innlogging_lenke { margin-top: 20px; text-align: center; }
.innlogging_hjelp { margin-top: 24px; text-align: center; color: var(--tl-nav-text); }
.innlogging_hjelp a { color: inherit; text-decoration: underline; }

/* Innlogging og tofaktor i mobilportalen (mobil/index.php og mobil/tofaktor.php): ikke noe kort - logo, overskrift og felt
   står rett på den mørke blå bakgrunnen, og hjelpeteksten står nederst på skjermen. Følger valgt tema (lys/mørk) */
body.innlogging.innlogging_mobil {
  min-height: 100dvh; align-items: stretch; justify-content: flex-start;
  padding: calc(env(safe-area-inset-top) + 56px) 20px calc(env(safe-area-inset-bottom) + 20px);
  color: var(--tl-nav-text);
}
.innlogging_side { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; max-width: 440px; align-self: center; }
.innlogging_topp { margin-bottom: 40px; text-align: center; }
.innlogging_mobil .innlogging_logo { height: 44px; margin: 0 0 14px 0; }
.innlogging_slagord { font-size: var(--tl-fs-meta); color: var(--tl-nav-text); }
/* Overskriften og hjelpeteksten deler den ledige høyden (margin-top:auto på begge), slik at skjemaet står midt på skjermen */
.innlogging_mobil h1 { margin: auto 0 16px 0; font-size: var(--tl-fs-display); font-weight: 700; color: var(--tl-nav-active-text); }
body.innlogging_mobil .ui.form:not(.inverted) .field > label:not(.button) { color: var(--tl-nav-active-text); }
.innlogging_mobil .ui.form + .ui.form { margin-top: 12px; }
.innlogging_mobil .innlogging_lenke a { color: var(--tl-nav-link); font-weight: 600; }
.innlogging_mobil .innlogging_hjelp { margin-top: auto; padding-top: 32px; font-size: var(--tl-fs-sm); }
.innlogging_mobil .ui.message { margin: 0 0 16px 0; }
/* Feilmelding med ikon foran teksten */
.innlogging_melding { display: flex; align-items: flex-start; gap: 10px; }
.innlogging_melding > i.icon { flex: 0 0 auto; margin: 0; }
/* Passordfeltet med «Vis»-knappen inni */
.innlogging_passord { position: relative; }
body.innlogging_mobil .ui.form .innlogging_passord > input { padding-right: 72px; }
.innlogging_vis {
  position: absolute; top: 0; right: 0; height: 100%; min-width: 64px; padding: 0 14px;
  border: 0; background: transparent; color: var(--tl-link); font: inherit; font-weight: 600; cursor: pointer;
}
/* Feil passord: rød ramme, men feltet beholder bakgrunnen */
body.innlogging_mobil .ui.form .field.innlogging_feil input { border-color: var(--tl-danger); }
/* Installer app og forklaringen for iPhone står under hjelpeteksten */
.innlogging_mobil #installer_app, .innlogging_mobil #installer_ios { margin: 16px 0 0 0; }

/* --- Tellur: topplinjen (egne valg) --- */
.tl-topbar .ui.button { margin: 0; }
.tl-icon-btn { position: relative; }
/* Avdelingsvalget (designet kaller det arbeidssted, men nedtrekket velger avdeling) */
.tl-topbar .ui.selection.dropdown.tl-avdeling { min-width: 210px; }
.tl-avdeling > i.icon:not(.dropdown) { margin: 0 8px 0 0; color: var(--tl-muted); }
/* Profilknappen åpner en meny med Min profil, Kontrollpanel, Bytt konto og Logg ut */
.ui.dropdown.tl-profil {
  display: flex; align-items: center; gap: 10px; min-height: var(--tl-btn-h); padding: 0 16px 0 4px;
  border-radius: var(--tl-r-pill); background: var(--tl-surface); color: var(--tl-text);
  box-shadow: inset 0 0 0 1px var(--tl-border-strong); font-size: var(--tl-fs-body); font-weight: 600; cursor: pointer;
}
.ui.dropdown.tl-profil:hover { background: var(--tl-surface-3); box-shadow: inset 0 0 0 1px var(--tl-text-2); }
.ui.dropdown.tl-profil > .menu { left: auto; right: 0; margin-top: 6px; min-width: max-content; }
.ui.dropdown.tl-profil > .menu > .item > i.icon { margin: 0 10px 0 0; color: var(--tl-muted); }
img.tl-avatar { object-fit: cover; }

/* Telefon: topplinjen holder seg på én linje (bare bilde/forbokstaver på profilknappen, og avdelingsvalget fyller plassen som er igjen) */
@media (max-width: 767px) {
  .tl-topbar { flex-wrap: nowrap; gap: 8px; }
  .tl-topbar .ui.selection.dropdown.tl-avdeling { min-width: 0; flex: 1 1 auto; }
  .tl-topbar .tl-spacer { flex: 0 1 0px; }
  /* Uten avdelingsvalg (ansatte) er det ingenting som fyller plassen, så knappene skyves til høyre */
  .tl-topbar:not(:has(.tl-avdeling)) .tl-spacer { flex: 1 1 0px; }
  .ui.dropdown.tl-profil { padding: 0 4px; }
  .ui.dropdown.tl-profil > span:not(.tl-avatar) { display: none; }
}
/* Smal telefon: avdelingsvalget blir en ikonknapp som åpner den samme listen (teksten får ikke plass på én linje).
   Ikonet er blått når en bestemt avdeling er valgt, slik at det synes at listen er avgrenset */
@media (max-width: 520px) {
  .tl-topbar .ui.selection.dropdown.tl-avdeling {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: var(--tl-btn-h); min-width: 0; min-height: var(--tl-btn-h); padding: 0;
  }
  .tl-topbar .tl-avdeling > .text, .tl-topbar .tl-avdeling > i.dropdown.icon { display: none !important; }
  .tl-topbar .tl-avdeling > i.icon:not(.dropdown) { margin: 0; color: var(--tl-text); }
  .tl-topbar .tl-avdeling:has(> input:not([value="0"])) > i.icon:not(.dropdown) { color: var(--tl-primary); }
  .tl-topbar .ui.selection.dropdown.tl-avdeling > .menu { width: 260px; min-width: 0 !important; max-width: calc(100vw - 90px); }
  .tl-topbar .ui.selection.dropdown.tl-avdeling > .menu > .item { white-space: normal; }
  .tl-topbar .tl-spacer { flex: 1 1 0px; }
}

/* Innholdet og sidetittelen (skrives ut av side_topp()) */
.tl-content > #innhold { margin: 0; min-height: 300px; }
.tl-content .tl-page-head { margin-bottom: 20px; }


/* ===== tellur-theme.css – del 3: mobilappen ===== */
.tl-mobile, .tl-mobile body { background: var(--tl-bg); }
.tl-m-screen { min-height: 100dvh; display: flex; flex-direction: column; background: var(--tl-bg); color: var(--tl-text); }

.tl-m-header {
  padding: calc(env(safe-area-inset-top) + 12px) 20px 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tl-m-title { margin: 0; font-size: var(--tl-fs-display); font-weight: 700; letter-spacing: -0.01em; }
.tl-m-header--back { padding-left: 12px; justify-content: flex-start; gap: 4px; }
.tl-m-header--back .tl-m-title { font-size: var(--tl-fs-xl); }
.tl-m-back {
  width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  color: var(--tl-text); text-decoration: none;
}

.tl-m-content { flex: 1; padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 18px; }
/* Plass til bunnmenyen på skjermer som viser den (hovedskjermene og underskjermene med fane, se data-fane under) */
.tl-m-screen:not([data-fane=""]) .tl-m-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

.tl-m-section-title {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tl-muted);
}

.tl-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--tl-chrome); border-top: 1px solid var(--tl-border);
}
.tl-tab {
  flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0;
  color: var(--tl-muted); text-decoration: none; font-size: var(--tl-fs-xs); font-weight: 600;
}
.tl-tab-pill { position: relative; width: 56px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.tl-tab-pill > i.icon { margin: 0; font-size: 20px; }
.tl-tab[aria-current="page"] { color: var(--tl-link); font-weight: 700; }
.tl-tab[aria-current="page"] .tl-tab-pill { background: var(--tl-primary-soft); }

.tl-m-actionbar {
  position: sticky; bottom: 0; z-index: 20;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  background: var(--tl-chrome); border-top: 1px solid var(--tl-border);
}

/* Felt på mobil må være minst 16 px, ellers zoomer iPhone inn */
.tl-mobile input, .tl-mobile select, .tl-mobile textarea { font-size: 16px !important; }

/* --- Tellur: toppfeltet og bunnmenyen i mobilportalen (egne valg) --- */
/* Avvik fra §5.2.1: skjermtypen står som data-skjerm på .tl-m-screen (settes av skall_sett() i mobil/js/annet.js),
   fordi sidene byttes med innerHTML og toppfelt og bunnmeny er de samme elementene hele tiden */
.tl-tab:hover, .tl-tab:focus { color: var(--tl-muted); }
.tl-tab[aria-current="page"]:hover, .tl-tab[aria-current="page"]:focus { color: var(--tl-link); }
.tl-tab-pill > .tl-badge { top: -4px; right: 2px; }
/* Meldinger i bunnmenyen er et nedtrekk (Meldinger og Chat). Fanen beholder oppsettet sitt, og menyen åpnes oppover,
   høyrestilt mot fanen slik at den ikke går utenfor skjermen. Valgene merkes ikke som valgt */
.ui.dropdown.tl-tab { display: flex; cursor: pointer; font-size: var(--tl-fs-xs); font-weight: 600; }
.ui.dropdown.tl-tab[aria-current="page"] { font-weight: 700; }
.ui.dropdown.tl-tab > .menu { left: auto; right: 0; min-width: max-content; margin-bottom: 8px; }
.ui.dropdown.tl-tab > .menu > .item { display: flex; align-items: center; gap: 10px; font-size: var(--tl-fs-body); font-weight: 500; color: var(--tl-text); }
.ui.dropdown.tl-tab > .menu > .item.active, .ui.dropdown.tl-tab > .menu > .item.selected { background: transparent; color: var(--tl-text); font-weight: 500; }
.ui.dropdown.tl-tab > .menu > .item > i.icon { margin: 0; color: var(--tl-muted); }
.ui.dropdown.tl-tab > .menu > .item > .tl-list-teller { margin-left: auto; }
/* Bunnmenyen skjules på skjermer uten valgt fane: underskjermer som ikke står i window.skall_under_faner (mobil/js/annet.js) */
.tl-m-screen[data-fane=""] .tl-tabbar { display: none; }
.tl-m-screen[data-skjerm="under"] .tl-m-header { padding-left: 12px; justify-content: flex-start; gap: 4px; }
.tl-m-screen[data-skjerm="under"] .tl-m-title { font-size: var(--tl-fs-xl); }
.tl-m-screen[data-skjerm="hoved"] .tl-m-back { display: none; }
.tl-m-logo { height: 40px; width: auto; display: none; }
/* Profilbildet eller forbokstavene står alltid helt til høyre i toppfeltet, også på underskjermer der resten er venstrestilt */
.tl-m-profil { margin-left: auto; flex: none; }
.tl-m-screen[data-fane="hjem"] .tl-m-logo { display: block; }
.tl-m-screen[data-fane="hjem"] .tl-m-title { display: none; }
.tl-m-title:empty { display: none; }
/* Logoen har mørk tekst - gjøres lys i mørk modus */
html[data-theme="dark"] .tl-m-logo { filter: brightness(0) invert(1); }

/* Deler som står under hverandre på en skjerm, med luft mellom */
.tl-m-stack { display: flex; flex-direction: column; gap: 18px; }

/* Hjem (§13, mobil/01-hjem.png): hilsen med dato, og kort med vakt eller arbeidssted og knapp under */
.tl-m-hilsen h1 { margin: 0; font-size: var(--tl-fs-display); font-weight: 700; letter-spacing: -0.01em; }
.tl-m-card {
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
  background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-r-card);
}
.tl-m-card-rad { display: flex; align-items: center; gap: 12px; }
.tl-m-card .ui.button { margin: 0; }
.tl-m-stack > .tl-m-section-title { margin-bottom: -8px; }
.tl-m-stack > #intranett_holder:empty { display: none; }
/* Tittel og undertekst i en listerad står under hverandre. Klokkeslett til venstre har fast bredde */
.tl-list-body > span, .tl-list-tid > span { display: block; }
.tl-list-tid { flex: none; min-width: 52px; }
/* «På vakt»-kortet: grønn prikk foran statusen, og dempet tekst under tiden */
.tl-hero-status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tl-hero-prikk { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--tl-ok-text); }
.tl-hero-sub { margin-top: 6px; opacity: 0.75; }
.tl-hero-card .ui.button { margin: 0; }

/* Listene på «Mer»-skjermen: ikon i lys blå rute, tittel, eventuell teller og pil */
.tl-list-row { cursor: pointer; }
.tl-list-row > .tl-list-body { flex: 1; min-width: 0; }
.tl-list-icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tl-primary-soft); color: var(--tl-link); font-size: 18px;
}
.tl-list-icon > i.icon { margin: 0; }
.tl-list-row > i.chevron.icon { margin: 0; color: var(--tl-muted); flex: none; }
.tl-list-teller {
  min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; flex: none;
  background: var(--tl-primary); color: var(--tl-on-primary); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tl-list-teller:empty { display: none; }

/* Segmentert kontroll (§6.5: faner på mobil) - brukes til Lys / Mørk / Automatisk */
.tl-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--tl-surface-3); }
.tl-seg-item {
  flex: 1; min-height: 44px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--tl-text-2);
  font: 600 var(--tl-fs-body) var(--tl-font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tl-seg-item > i.icon { margin: 0; }
.tl-seg-item[aria-pressed="true"] { background: var(--tl-surface); color: var(--tl-text); box-shadow: var(--tl-shadow-sm); }


/* ===== tellur-theme.css – del 4: grunnstil ===== */
html, body {
  background: var(--tl-bg); color: var(--tl-text);
  font-family: var(--tl-font); font-size: var(--tl-fs-body); line-height: var(--tl-lh);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tl-link); }
a:hover { color: var(--tl-link-hover); }
:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
::selection { background: var(--tl-primary-soft); color: var(--tl-text); }

h1, h2, h3, h4, h5, .ui.header,
.ui.button, .ui.input > input, .ui.form input, .ui.form textarea, .ui.form select,
.ui.dropdown, .ui.dropdown .menu > .item, .ui.menu, .ui.table, .ui.label, .ui.labels .label,
.ui.message, .ui.modal > .header, .ui.modal > .content, .ui.card > .content > .header,
.ui.cards > .card > .content > .header, .ui.statistic > .value, .ui.statistic > .label,
.ui.accordion .title, .ui.popup, .ui.list, .ui.items > .item > .content > .header,
.ui.checkbox label, .ui.toast, .ui.breadcrumb, .ui.steps .step .title,
.ui.segment, .ui.form, .ui.grid, .ui.search > .prompt, .ui.feed, textarea, input, select, button {
  font-family: var(--tl-font);
}
h1, h2, h3, h4, h5, .ui.header { color: var(--tl-text); letter-spacing: -0.01em; }
.ui.header .sub.header, .ui.sub.header { color: var(--tl-muted); }
.ui.divider { border-color: var(--tl-divider) !important; color: var(--tl-muted); }

/* Ikoner (§4) */
i.icon { color: inherit; }
.ui.button > i.icon:not(.button) { margin: 0 !important; height: auto; opacity: 1; }


/* ===== tellur-theme.css – del 5: knapper ===== */
/* Avvik fra §6.2: Fomantics marg mellom knapper beholdes til sidene får tl-toolbar med gap (fase 3) */
.ui.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tl-btn-h); padding: 0 18px;
  border-radius: var(--tl-r-btn); border: 0;
  background: var(--tl-surface); color: var(--tl-text);
  box-shadow: inset 0 0 0 1px var(--tl-border-strong);
  font-size: var(--tl-fs-body); font-weight: 600; line-height: 1.2; text-shadow: none;
  transition: background var(--tl-dur) var(--tl-ease), box-shadow var(--tl-dur) var(--tl-ease), color var(--tl-dur) var(--tl-ease);
}
/* Avvik fra §6.2: et klikk gir ikke varig grå bakgrunn (knappen beholder fokus etter klikket). Bare tastaturfokus ser ut som hover.
   :focus står med hvilefargene, ellers slår Fomantics .ui.button:focus gjennom */
.ui.button:focus { background: var(--tl-surface); color: var(--tl-text); box-shadow: inset 0 0 0 1px var(--tl-border-strong); }
.ui.button:hover, .ui.button:focus-visible { background: var(--tl-surface-3); color: var(--tl-text); box-shadow: inset 0 0 0 1px var(--tl-text-2); }
.ui.button:active, .ui.active.button { background: var(--tl-surface-3); color: var(--tl-text); }
.ui.button:focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
.ui.fluid.button { display: flex; width: 100%; }
.ui.buttons .button { margin: 0; }
.ui.buttons > .button { border-radius: 0; }
.ui.buttons > .button:first-child { border-radius: var(--tl-r-btn) 0 0 var(--tl-r-btn); }
.ui.buttons > .button:last-child { border-radius: 0 var(--tl-r-btn) var(--tl-r-btn) 0; }
.ui.vertical.buttons > .button:first-child { border-radius: var(--tl-r-btn) var(--tl-r-btn) 0 0; }
.ui.vertical.buttons > .button:last-child { border-radius: 0 0 var(--tl-r-btn) var(--tl-r-btn); }

/* Primær */
.ui.primary.button, .ui.positive.button, .ui.green.button, .ui.blue.button, .ui.teal.button {
  background: var(--tl-primary); color: var(--tl-on-primary); box-shadow: none; font-weight: 700;
}
.ui.primary.button:focus, .ui.positive.button:focus, .ui.green.button:focus, .ui.blue.button:focus, .ui.teal.button:focus {
  background: var(--tl-primary); color: var(--tl-on-primary); box-shadow: none;
}
.ui.primary.button:hover, .ui.positive.button:hover, .ui.green.button:hover, .ui.blue.button:hover, .ui.teal.button:hover,
.ui.primary.button:focus-visible, .ui.positive.button:focus-visible, .ui.green.button:focus-visible, .ui.blue.button:focus-visible, .ui.teal.button:focus-visible,
.ui.primary.button:active, .ui.positive.button:active, .ui.green.button:active, .ui.blue.button:active, .ui.teal.button:active {
  background: var(--tl-primary-hover); color: var(--tl-on-primary); box-shadow: none;
}

/* Sekundær (basic-varianter bruker !important i Fomantic) */
.ui.basic.button, .ui.basic.buttons .button, .ui.secondary.button, .ui.grey.button,
.ui.basic.primary.button, .ui.basic.blue.button, .ui.basic.green.button, .ui.basic.positive.button, .ui.basic.orange.button {
  background: var(--tl-surface) !important; color: var(--tl-text) !important;
  box-shadow: inset 0 0 0 1px var(--tl-border-strong) !important; font-weight: 600;
}
.ui.basic.button { border-radius: var(--tl-r-btn); }
.ui.basic.button:hover, .ui.basic.buttons .button:hover, .ui.secondary.button:hover, .ui.grey.button:hover,
.ui.basic.primary.button:hover, .ui.basic.blue.button:hover, .ui.basic.green.button:hover, .ui.basic.positive.button:hover, .ui.basic.orange.button:hover {
  background: var(--tl-surface-3) !important; color: var(--tl-text) !important;
  box-shadow: inset 0 0 0 1px var(--tl-text-2) !important;
}

/* Tekstknapp */
.ui.tertiary.button { background: transparent !important; box-shadow: none !important; color: var(--tl-link) !important; padding: 0 10px; }
.ui.tertiary.button:hover { color: var(--tl-link-hover) !important; text-decoration: underline; }

/* Fare */
.ui.negative.button, .ui.red.button { background: var(--tl-danger); color: var(--tl-on-primary); box-shadow: none; font-weight: 700; }
.ui.negative.button:focus, .ui.red.button:focus { background: var(--tl-danger); color: var(--tl-on-primary); box-shadow: none; }
.ui.negative.button:hover, .ui.red.button:hover, .ui.negative.button:focus-visible, .ui.red.button:focus-visible { background: var(--tl-danger-hover); color: var(--tl-on-primary); box-shadow: none; }
.ui.basic.negative.button, .ui.basic.red.button {
  background: var(--tl-surface) !important; color: var(--tl-danger-text) !important;
  box-shadow: inset 0 0 0 1px var(--tl-danger-border) !important;
}
.ui.basic.negative.button:hover, .ui.basic.red.button:hover { background: var(--tl-danger-bg) !important; color: var(--tl-danger-text) !important; box-shadow: inset 0 0 0 1px var(--tl-danger-border) !important; }

/* Ikonknapp (min-width i stedet for width, fordi noen ikonknapper i Tellur også har tekst) */
.ui.icon.button:not(.labeled), .ui.icon.button:not(.animated):not(.compact):not(.labeled) { min-width: var(--tl-btn-h); padding: 0 12px; }
.ui.icon.button > i.icon { font-size: 18px; }

/* Ikon + tekst (labeled) – flat ut Fomantic sin ikonboks */
.ui.labeled.icon.button { padding: 0 18px !important; }
.ui.labeled.icon.button > i.icon { position: static; width: auto; height: auto; background: none !important; box-shadow: none; }

/* Kompakt. 3 px over teksten: Figtree i 14 px står ellers ca. 1,5 px for høyt i knappen (ikonknappene under har egen padding) */
.ui.ui.ui.ui.mini.button, .ui.ui.ui.ui.tiny.button, .ui.ui.ui.ui.small.button, .ui.compact.button {
  min-height: var(--tl-ctl-h-sm); padding: 3px 12px 0; font-size: 14px;
}
.ui.ui.ui.ui.mini.icon.button:not(.labeled), .ui.ui.ui.ui.tiny.icon.button:not(.labeled),
.ui.ui.ui.ui.small.icon.button:not(.labeled), .ui.ui.ui.ui.compact.icon.button:not(.labeled) { min-width: var(--tl-ctl-h-sm); padding: 0 8px; }
.ui.ui.ui.ui.mini.icon.button > i.icon, .ui.ui.ui.ui.tiny.icon.button > i.icon, .ui.ui.ui.ui.small.icon.button > i.icon { font-size: 15px; }

/* Store knapper (mobilens hovedhandlinger) */
.ui.ui.ui.ui.large.button, .ui.ui.ui.ui.big.button { min-height: 56px; font-size: 17px; border-radius: 14px; }

/* Deaktivert og laster */
.ui.disabled.button, .ui.button:disabled, .ui.buttons .disabled.button { opacity: 0.5 !important; cursor: not-allowed; }
.ui.loading.button::before { border-color: var(--tl-border-strong); }
.ui.loading.button::after { border-color: var(--tl-text-2) transparent transparent; }
.ui.primary.loading.button::after, .ui.positive.loading.button::after, .ui.green.loading.button::after,
.ui.blue.loading.button::after, .ui.negative.loading.button::after, .ui.red.loading.button::after {
  border-color: var(--tl-on-primary) transparent transparent;
}

/* Hjelpeklasser */
.tl-push-left { margin-right: auto !important; }


/* ===== tellur-theme.css – del 6: skjema ===== */
.ui.form .field > label, .ui.form:not(.inverted) .field > label:not(.button), .ui.form .fields > label, .tl-label {
  display: block; margin: 0 0 6px; font-size: var(--tl-fs-sm); font-weight: 600;
  color: var(--tl-muted); text-transform: none;
}
.ui.form .field { margin-bottom: 16px; }
.ui.form .fields { gap: 0; }
/* Tellur: filterradene på sidene i webportalen brytes til ny linje når feltene ikke får plass (nettbrett) */
@media (max-width: 1199px) {
  .tl-content .ui.form .fields:not(.inline):not(.grouped) { flex-wrap: wrap; row-gap: 16px; }
}
/* Telefon: Fomantic gir hvert felt 1em marg under, så row-gap ville lagt seg oppå den og gitt dobbel avstand */
@media (max-width: 767px) {
  .tl-content .ui.form .fields:not(.inline):not(.grouped) { row-gap: 0; }
}
/* Filterradene (felt uten egen bredde, rett i et segment) går over til to kolonner på smale skjermer, og én kolonne når det
   blir for smalt for to. Nedtrekk og felt fyller kolonnen (inline min-width og marg fra gammel markup nulles) */
@media (max-width: 1023px) {
  .tl-content .ui.segment > .ui.form > .fields:not(.inline):not(.grouped) > .field:not([class*="wide"]) { flex: 0 0 50%; width: 50%; max-width: 50%; }
  .tl-content .ui.segment > .ui.form > .fields:not(.inline):not(.grouped) > .field:not([class*="wide"]) > .ui.dropdown,
  .tl-content .ui.segment > .ui.form > .fields:not(.inline):not(.grouped) > .field:not([class*="wide"]) > .ui.input {
    width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
  }
}
@media (max-width: 599px) {
  .tl-content .ui.segment > .ui.form > .fields:not(.inline):not(.grouped) > .field:not([class*="wide"]) { flex: 0 0 100%; width: 100%; max-width: 100%; }
}
/* Filterlinjer uten skjema: segmenter som BARE inneholder løse nedtrekk og knapper (Lønn, Timeliste for ansatte osv.).
   Kontrollene legges i en rad med lik avstand som brytes pent, i stedet for inline-blokker med ulik marg. Segmenter med
   annet innhold (etiketter, tekst, tabeller) treffes ikke */
.tl-content .ui.segment:has(> .ui.dropdown, > .ui.button):not(:has(> :not(.ui.dropdown, .ui.button, .ui.input, .ui.checkbox, input[type="hidden"], br, script))) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tl-content .ui.segment:has(> .ui.dropdown, > .ui.button):not(:has(> :not(.ui.dropdown, .ui.button, .ui.input, .ui.checkbox, input[type="hidden"], br, script))) > * {
  margin: 0 !important;
}
.tl-content .ui.segment:has(> .ui.dropdown, > .ui.button):not(:has(> :not(.ui.dropdown, .ui.button, .ui.input, .ui.checkbox, input[type="hidden"], br, script))) > br {
  display: none;
}
/* Smalere vindu (som filterradene over): nedtrekkene deler raden to og to (inline min-width fra gammel markup nulles),
   og knappene står samlet etter dem */
@media (max-width: 1023px) {
  .tl-content .ui.segment:has(> .ui.dropdown, > .ui.button):not(:has(> :not(.ui.dropdown, .ui.button, .ui.input, .ui.checkbox, input[type="hidden"], br, script))) > .ui.dropdown,
  .tl-content .ui.segment:has(> .ui.dropdown, > .ui.button):not(:has(> :not(.ui.dropdown, .ui.button, .ui.input, .ui.checkbox, input[type="hidden"], br, script))) > .ui.input {
    flex: 1 1 calc(50% - 4px); min-width: 0 !important; width: auto !important;
  }
}
/* Telefon: Fomantic legger feltene under hverandre. Den usynlige etiketten som løfter knapper ned på linje med feltene
   (label med color:#FFF) trengs da ikke, og gir bare et tomrom over knappen */
@media (max-width: 767px) {
  .tl-content .ui.form .fields > .field > label[style*="color:#FFF"] { display: none; }
}
/* Unntak: filterradene over står fortsatt i to kolonner ned til 600 px, og der trengs etiketten for at knappen skal stå
   på linje med feltet ved siden av */
@media (min-width: 600px) and (max-width: 767px) {
  .tl-content .ui.segment > .ui.form > .fields:not(.inline):not(.grouped) > .field:not([class*="wide"]) > label[style*="color:#FFF"] { display: block; }
}
/* Uke-filteret i ukesoversikten på telefon: uke og år side om side, og knappene side om side under, alle i full bredde av
   sin halvdel. !important fordi Fomantic setter 100 % bredde på felt under 768 px med høyere spesifisitet, og fordi gammel
   markup har marg og minstebredde i inline-stil */
@media (max-width: 767px) {
  /* :not(.inline):not(.grouped) gir høyere spesifisitet enn regelen for telefon over (row-gap: 0), som ellers vinner.
     16 px mellom feltene og knappene, som mellom radene i de andre filterradene */
  .tl-content .ui.form .fields.uke_filter:not(.inline):not(.grouped) { display: flex; flex-wrap: wrap; row-gap: 16px; margin: 0 -6px; }
  .tl-content .ui.form .fields.uke_filter > .field { flex: 0 0 50%; width: 50% !important; max-width: 50%; margin: 0 !important; padding: 0 6px; }
  .tl-content .ui.form .fields.uke_filter > .field > .ui.dropdown { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  .tl-content .ui.form .fields.uke_filter > .field > .ui.button { width: 100%; margin: 0 !important; }
  .tl-content .ui.grid > .ui.form:has(> .fields.uke_filter) { width: 100%; }
}

.ui.form input:not([type]), .ui.form input[type="text"], .ui.form input[type="email"],
.ui.form input[type="password"], .ui.form input[type="number"], .ui.form input[type="tel"],
.ui.form input[type="date"], .ui.form input[type="time"], .ui.form input[type="search"],
.ui.form input[type="url"], .ui.input > input, .ui.form select, .ui.form textarea {
  min-height: var(--tl-ctl-h); padding: 10px 12px; line-height: 1.4;
  border: 1px solid var(--tl-border-strong); border-radius: var(--tl-r-ctl);
  background: var(--tl-field); color: var(--tl-text);
  font-size: var(--tl-fs-body); font-weight: 500; box-shadow: none;
  transition: border-color var(--tl-dur), box-shadow var(--tl-dur);
}
.ui.form textarea { min-height: 96px; padding: 12px; resize: vertical; }
.ui.form input:focus, .ui.input > input:focus, .ui.form select:focus, .ui.form textarea:focus {
  border-color: var(--tl-primary); box-shadow: var(--tl-focus-ring); background: var(--tl-field); color: var(--tl-text);
  outline: 0;
}
.ui.form ::placeholder, .ui.input > input::placeholder { color: var(--tl-placeholder); opacity: 1; }
.ui.form .disabled.field, .ui.form .field :disabled, .ui.disabled.input { opacity: 0.6; }

/* Tekstfelt som står utenfor ui form (for eksempel meldingsteksten i Send melding) */
textarea {
  padding: 10px 12px; border: 1px solid var(--tl-border-strong); border-radius: var(--tl-r-ctl);
  background: var(--tl-field); color: var(--tl-text); font-size: var(--tl-fs-body); line-height: 1.4;
}
textarea:focus { border-color: var(--tl-primary); box-shadow: var(--tl-focus-ring); outline: 0; }

/* Felt med ikon (for eksempel søk, kalender) */
.ui.icon.input > i.icon { color: var(--tl-muted); opacity: 1; }

/* Feil */
.ui.form .field.error input, .ui.form .field.error textarea, .ui.form .field.error select,
.ui.form .fields.error .field input, .ui.form .field.error .ui.dropdown {
  background: var(--tl-danger-bg) !important; border-color: var(--tl-danger) !important; color: var(--tl-text) !important;
}
.ui.form .field.error > label { color: var(--tl-danger-text); }
.ui.form .field .prompt.label, .tl-field-error {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 0 !important;
  color: var(--tl-danger-text) !important; font-size: 14px; font-weight: 500;
}
.ui.form .field .prompt.label::before { display: none; }
.tl-help { margin-top: 6px; font-size: 14px; color: var(--tl-muted); }

/* Nedtrekk (selection dropdown) */
/* Avvik fra §6.4: beholder Fomantics inline-block i stedet for flex, slik at nedtrekk uten «fluid» ikke fyller hele raden.
   Teksten midtstilles med utregnet luft over og under */
.ui.selection.dropdown {
  min-height: var(--tl-ctl-h); line-height: 1.4;
  padding: calc((var(--tl-ctl-h) - 2px - 1.4em) / 2) 40px calc((var(--tl-ctl-h) - 2px - 1.4em) / 2) 12px;
  border: 1px solid var(--tl-border-strong); border-radius: var(--tl-r-ctl);
  background: var(--tl-field); color: var(--tl-text); box-shadow: none;
  font-size: var(--tl-fs-body); font-weight: 500;
}
.ui.selection.dropdown:hover { border-color: var(--tl-text-2); }
.ui.selection.active.dropdown, .ui.selection.active.dropdown .menu, .ui.selection.dropdown:focus {
  border-color: var(--tl-primary); box-shadow: var(--tl-focus-ring);
}
.ui.dropdown:focus-visible { outline: 0; }
.ui.selection.dropdown > .dropdown.icon { top: 50%; right: 12px; margin: 0; padding: 0; transform: translateY(-50%); opacity: 0.7; }
.ui.multiple.selection.dropdown { padding-top: 1px; padding-bottom: 1px; }
/* Teksten og søkefeltet i flervalg har Fomantics faste marg, som er laget for et lavere felt. Regnes ut slik at teksten står midt i feltet */
.ui.multiple.selection.dropdown > .text, .ui.multiple.search.selection.dropdown > .text, .ui.multiple.search.selection.dropdown > input.search {
  margin-top: calc((var(--tl-ctl-h) - 4px - 1.21428571em) / 2); margin-bottom: calc((var(--tl-ctl-h) - 4px - 1.21428571em) / 2);
}
/* Teksten er inline-block. På grunnlinjen gir den plass til underlengder under seg, og feltet blir 6 px høyere enn de andre feltene */
.ui.multiple.selection.dropdown > .text { vertical-align: top; }
/* Søkefeltet inni et nedtrekk er ikke et eget felt og skal ikke ha felthøyde */
.ui.dropdown > input.search, .ui.form .ui.dropdown > input.search, .ui.form .ui.multiple.search.dropdown > input.search { min-height: 0; border-radius: 0; }
.ui.selection.dropdown > .text.default, .ui.dropdown > .default.text { color: var(--tl-placeholder); }
.ui.dropdown > .text, .ui.selection.visible.dropdown > .text:not(.default) { color: inherit; }
.ui.dropdown .menu, .ui.selection.dropdown .menu {
  background: var(--tl-surface); border: 1px solid var(--tl-border-strong);
  box-shadow: var(--tl-shadow-md); border-radius: 0 0 var(--tl-r-ctl) var(--tl-r-ctl);
}
.ui.selection.dropdown:not(.pointing):not(.floating) > .menu { border-radius: 0 0 var(--tl-r-ctl) var(--tl-r-ctl); }
.ui.upward.selection.dropdown:not(.pointing):not(.floating) > .menu { border-radius: var(--tl-r-ctl) var(--tl-r-ctl) 0 0; }
.ui.selection.active.dropdown .menu { box-shadow: var(--tl-shadow-md); }
.ui.dropdown:not(.selection) .menu { border-radius: var(--tl-r-ctl); }
.ui.floating.dropdown .menu, .ui.floating.dropdown > .menu { border-radius: var(--tl-r-ctl) !important; }
.ui.dropdown .menu > .item {
  padding: 12px 14px !important; color: var(--tl-text); font-size: var(--tl-fs-body);
  border-top: 1px solid var(--tl-divider);
}
/* Fomantic har fast #fafafa på skillelinjene i utvalgsnedtrekk, med høyere spesifisitet (ble hvite i mørk modus) */
.ui.selection.dropdown .menu > .item { border-top-color: var(--tl-divider); }
.ui.dropdown .menu > .item:first-child { border-top: 0; }
.ui.dropdown .menu > .item:hover { background: var(--tl-surface-3); color: var(--tl-text); }
/* Avvik fra §6: «selected» er bare markøren for tastaturet (Fomantic setter den på første punkt når søkefeltet
   får fokus), og tegnes derfor som pekeren over et punkt. Bare «active» (faktisk valgt) får valgt-fargen. */
.ui.dropdown .menu .selected.item { background: var(--tl-surface-3) !important; color: var(--tl-text) !important; }
.ui.dropdown .menu .active.item {
  background: var(--tl-primary-soft) !important; color: var(--tl-primary-soft-text) !important; font-weight: 600;
}
.ui.dropdown .menu > .header { color: var(--tl-muted); font-size: 12px; letter-spacing: 0.06em; }
.ui.dropdown .menu > .divider { border-color: var(--tl-divider); }
.ui.dropdown .menu > .message:not(.ui) { color: var(--tl-muted); }
.ui.dropdown .menu > .input > input, .ui.dropdown > input.search, .ui.search.dropdown > input.search { color: var(--tl-text); }
/* Fomantics flervalgsetikett er inline-block med høyere spesifisitet enn pilleformen i del 10, og ikonene har ingen marg
   (del 10), så varsler, navn og slett-krysset sto inntil hverandre */
.ui.multiple.dropdown > .label {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tl-primary-soft); color: var(--tl-primary-soft-text); box-shadow: none;
  border-radius: var(--tl-r-pill); font-size: 13px; font-weight: 600;
}

/* Avkrysning og radio */
.ui.checkbox { min-height: 24px; }
.ui.checkbox label, .ui.checkbox + label { color: var(--tl-text) !important; font-size: var(--tl-fs-body); padding-left: 30px; }
.ui.checkbox label::before {
  width: 20px; height: 20px; top: 1px; border-radius: 5px;
  border: 1px solid var(--tl-border-strong); background: var(--tl-field);
}
.ui.checkbox input:focus ~ label::before { border-color: var(--tl-primary); box-shadow: var(--tl-focus-ring); }
/* Fomantic har egen regel for avkrysset felt med fokus (hvit bakgrunn) - uten :checked:focus her blir haken hvit på hvitt rett etter et trykk */
.ui.checkbox input:checked ~ label::before, .ui.checkbox input:checked:focus ~ label::before { background: var(--tl-primary); border-color: var(--tl-primary); }
.ui.checkbox:not(.toggle):not(.slider) input:checked ~ label::after { color: var(--tl-on-primary) !important; width: 20px; height: 20px; top: 1px; font-size: 13px; line-height: 20px; }
.ui.radio.checkbox label::before { border-radius: 10px; }
.ui.radio.checkbox input:checked ~ label::before, .ui.radio.checkbox input:focus:checked ~ label::before { background: var(--tl-field); border: 6px solid var(--tl-primary); }
.ui.radio.checkbox input:checked ~ label::after { display: none; }

/* Bryter (toggle) */
.ui.toggle.checkbox { min-height: 28px; }
.ui.toggle.checkbox label { padding-left: 60px !important; padding-top: 3px; min-height: 28px; }
.ui.toggle.checkbox label::before {
  width: 48px; height: 28px; top: 0; border-radius: 14px; border: 0;
  background: var(--tl-border-strong) !important; box-shadow: none !important;
}
.ui.toggle.checkbox label::after {
  width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 11px;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(10, 20, 40, 0.25);
  transition: left var(--tl-dur) var(--tl-ease);
}
.ui.toggle.checkbox input:checked ~ label::before { background: var(--tl-primary) !important; }
.ui.toggle.checkbox input:checked ~ label::after { left: 23px; }
.ui.toggle.checkbox input:focus ~ label::before { box-shadow: var(--tl-focus-ring) !important; }

/* Valgknapper (pause, alvorlighetsgrad, Lys/Mørk/Automatisk) */
.tl-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-choice {
  flex: 1; min-height: var(--tl-ctl-h); padding: 0 12px; border-radius: var(--tl-r-ctl);
  border: 1px solid var(--tl-border-strong); background: var(--tl-field); color: var(--tl-text);
  font: 500 var(--tl-fs-body) var(--tl-font); cursor: pointer;
}
.tl-choice[aria-pressed="true"], .tl-choice.active {
  border: 2px solid var(--tl-link); background: var(--tl-primary-soft); color: var(--tl-primary-soft-text); font-weight: 700;
}

/* Kalender (ui calendar) */
.ui.calendar .ui.popup { padding: 8px; }
.ui.calendar .ui.table { border: 0; }
.ui.calendar .ui.table th { background: transparent; color: var(--tl-muted); border: 0; }
.ui.calendar .ui.table tr td { border: 0; border-radius: var(--tl-r-sm); color: var(--tl-text); font-family: var(--tl-font); }
.ui.calendar .ui.table tr .link:hover { background: var(--tl-surface-3); }
.ui.calendar .ui.table tr .today { font-weight: 700; box-shadow: inset 0 0 0 2px var(--tl-text); }
.ui.calendar .ui.table tr .active, .ui.calendar .ui.table tr td.range {
  background: var(--tl-primary) !important; color: var(--tl-on-primary) !important;
}
.ui.calendar .ui.table tr .disabled { color: var(--tl-disabled); }


/* ===== tellur-theme.css – del 7: faner ===== */
.ui.tabular.menu, .ui.secondary.pointing.menu {
  display: flex; flex-wrap: wrap; gap: 4px; min-height: auto;
  background: transparent; border: 0; border-bottom: 1px solid var(--tl-border); box-shadow: none;
}
.ui.tabular.menu .item, .ui.secondary.pointing.menu .item {
  min-height: 44px; padding: 0 16px !important; margin: 0 0 -1px !important;
  background: transparent !important; border: 0 !important; border-bottom: 3px solid transparent !important;
  border-radius: 0 !important; color: var(--tl-muted) !important; font-size: var(--tl-fs-body); font-weight: 600;
}
.ui.tabular.menu .item:hover, .ui.secondary.pointing.menu .item:hover { color: var(--tl-text) !important; }
.ui.tabular.menu .active.item, .ui.secondary.pointing.menu .active.item {
  color: var(--tl-link) !important; border-bottom-color: var(--tl-link) !important; font-weight: 700;
  border-radius: 0 !important;
}
/* Tellur: faneraden på sidene i webportalen ruller sidelengs når den ikke får plass (nettbrett), i stedet for å brytes over flere linjer */
.tl-content .ui.tabular.menu { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tl-content .ui.tabular.menu::-webkit-scrollbar { display: none; }
.tl-content .ui.tabular.menu > .item { flex: none; white-space: nowrap; margin-bottom: 0 !important; }
/* Pilene i hver ende av en fanerad som ruller (fanerad_piler() i annet.js). De står fast mot kanten mens fanene ruller under,
   og vises bare på den siden det finnes flere faner. Negativ marg gjør at de ligger oppå fanene uten å flytte dem */
.tl-fane-pil {
  display: none; position: sticky; z-index: 2; flex: none; align-self: stretch; width: 44px; padding: 0;
  align-items: center; border: 0; color: var(--tl-text); cursor: pointer;
}
.tl-fane-pil > i.icon { margin: 0; }
.tl-fane-pil.venstre { left: 0; margin-right: -44px; justify-content: flex-start; background: linear-gradient(to right, var(--tl-bg) 55%, transparent); }
.tl-fane-pil.hoyre { right: 0; margin-left: -44px; justify-content: flex-end; background: linear-gradient(to left, var(--tl-bg) 55%, transparent); }
.tl-rull-venstre > .tl-fane-pil.venstre, .tl-rull-hoyre > .tl-fane-pil.hoyre { display: flex; }
/* Tellur: faner i en modal der innholdet (.content) ikke har egen luft (ansattkortet). På sidene står fanene og innholdet
   helt ut i kanten av innholdsflaten, men i en modal må de ha luft mot kanten av modalen */
.ui.modal > div[id$="_container"] > .content:not([style*="padding"]) > .ui.tabular.menu { padding: 0 20px; }
.ui.modal > div[id$="_container"] > .content:not([style*="padding"]) > .ui.attached.tab.segment,
.ui.modal > div[id$="_container"] > .content:not([style*="padding"]) > .ui.bottom.attached.segment.tab { padding: 20px; }
/* Tellur: fanerad med handling til høyre (Meldinger: «Ny melding»). Knappen står 5 px over streken under fanene, og
   streken går under begge. Fanene ruller sidelengs i sin del når det blir trangt, mens knappen står fast */
.tl-fanerad { display: flex; flex-wrap: wrap-reverse; align-items: flex-end; column-gap: 12px; border-bottom: 1px solid var(--tl-border); }
/* Fanene trenger minst 160 px. Får ikke handlingene plass ved siden av, legger de seg på egen linje OVER fanene (wrap-reverse) */
.tl-fanerad > .ui.tabular.menu { flex: 1 1 160px; min-width: 0; margin: 0; border-bottom: 0; }
/* Flere handlinger (Ansatte: søk, kategori, import og «Ny ansatt») står på rad med luft mellom, og brytes ved behov */
.tl-fanerad-handling {
  flex: 0 1 auto; max-width: 100%; margin-left: auto; padding-bottom: 5px;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 10px;
}
.tl-fanerad-handling > .ui.button, .tl-fanerad-handling > .ui.input, .tl-fanerad-handling > .ui.dropdown,
.tl-fanerad-handling > span > .ui.button { margin: 0; }
.ui.attached.tab.segment, .ui.bottom.attached.segment.tab {
  border: 0; background: transparent; box-shadow: none; padding: 20px 0 0; margin: 0;
  width: auto; max-width: none;
}


/* ===== tellur-theme.css – del 8: tabeller ===== */
/* Avvik fra §6.6: Fomantics marg over og under tabellen beholdes, og tabellhodet får bryte linjen,
   til tabellene ligger i tl-table-wrap (fase 3) */
.tl-table-wrap { overflow-x: auto; background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-r-card); }
.ui.table {
  border: 1px solid var(--tl-border); border-radius: var(--tl-r-card); border-collapse: separate; border-spacing: 0;
  background: var(--tl-surface); color: var(--tl-text); box-shadow: none;
  font-size: var(--tl-fs-body); font-variant-numeric: tabular-nums;
}
.tl-table-wrap > .ui.table { margin: 0; border: 0; border-radius: 0; }
/* Tellur: brede tabeller som ikke ligger i tl-table-wrap ennå (ukesoversikten, ansattlisten osv.) ruller sidelengs inni
   rammen i stedet for å skyve hele siden (nettbrett). Navnekolonnen i ukesoversikten står fast mens resten ruller */
.tl-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; clear: both; }
/* overflow-x:auto klipper også loddrett, så lista til et nedtrekk i de nederste radene (Ledige vakter, Vaktbytte) ble skjult.
   Mens et nedtrekk er åpent får rammen plass til lista under seg (høyeste max-height i Fomantic er 21,37rem), og den
   negative margen gjør at innholdet under ikke flytter seg. Åpner lista oppover (raden står nederst i vinduet, f.eks.
   ansattlisten i Sted-fanen), får rammen den samme plassen over seg */
.tl-table-scroll:has(.ui.dropdown.active > .menu) { padding-bottom: 22rem; margin-bottom: -22rem; }
.tl-table-scroll:has(.ui.upward.dropdown.active > .menu) { padding-top: 22rem; margin-top: -22rem; }
.tl-table-scroll > .ui.table.uke_midtstilt > tbody > tr > td:first-child,
.tl-table-scroll > .ui.table.uke_midtstilt > thead > tr > th:first-child { position: sticky; left: 0; z-index: 2; }
/* Søkepopupen ligger i første celle i hodet og skal legge seg over navnekolonnen under (samme z-index ga cellene under forrang) */
.tl-table-scroll > .ui.table.uke_midtstilt > thead > tr > th:first-child { z-index: 3; }
.tl-table-scroll > .ui.table.uke_midtstilt > tbody > tr > td:first-child { background: var(--tl-surface); }
.ui.table thead th, .ui.table > thead > tr > th {
  padding: 12px 16px; background: var(--tl-surface-2) !important; color: var(--tl-muted);
  font-size: var(--tl-fs-sm); font-weight: 700; text-transform: none;
  border-bottom: 1px solid var(--tl-border); border-left: 0 !important;
}
.ui.table > thead > tr:first-child > th:first-child { border-radius: var(--tl-r-card) 0 0 0; }
.ui.table > thead > tr:first-child > th:last-child { border-radius: 0 var(--tl-r-card) 0 0; }
.ui.table > thead > tr:first-child > th:only-child { border-radius: var(--tl-r-card) var(--tl-r-card) 0 0; }
/* Tellur: hjørnecellene følger tabellens avrunding også uten tabellhode (definisjonstabeller) og nederst. Ellers ligger
   bakgrunnen i cellene (etikettkolonnen, sumrader, hover) firkantet oppå de runde hjørnene */
.ui.table > tbody:first-child > tr:first-child > td:first-child { border-top-left-radius: calc(var(--tl-r-card) - 1px); }
.ui.table > tbody:first-child > tr:first-child > td:last-child { border-top-right-radius: calc(var(--tl-r-card) - 1px); }
.ui.table > :is(tbody, tfoot, thead:not(:first-child)):last-child > tr:last-child > :is(td, th):first-child { border-bottom-left-radius: calc(var(--tl-r-card) - 1px); }
.ui.table > :is(tbody, tfoot, thead:not(:first-child)):last-child > tr:last-child > :is(td, th):last-child { border-bottom-right-radius: calc(var(--tl-r-card) - 1px); }
.ui.table td, .ui.table > tbody > tr > td, .ui.table > tr > td, .ui.table > tfoot > tr > td {
  padding: 12px 16px; border-top: 1px solid var(--tl-border); border-left: 0 !important; vertical-align: middle;
  font-family: var(--tl-font-tabell);
}
.ui.table > tbody > tr:first-child > td { border-top: 0; }
.ui.celled.table tr td, .ui.celled.table tr th { border-left: 0 !important; }
.ui.striped.table > tbody > tr:nth-child(2n), .ui.striped.table > tr:nth-child(2n) { background: transparent !important; }
.ui.selectable.table tbody tr:hover, .ui.table tbody tr.tl-clickable:hover { background: var(--tl-surface-2) !important; cursor: pointer; }
.ui.table tfoot th, .ui.table tfoot td, .ui.table > tfoot > tr > th, .ui.table > tfoot > tr > td, .ui.table tr.tl-sum td {
  background: var(--tl-surface-2) !important; color: var(--tl-text); font-weight: 700; border-top: 1px solid var(--tl-border);
}
.ui.table tr.active, .ui.table td.active { background: var(--tl-primary-soft) !important; color: var(--tl-text) !important; }
.ui.table tr.warning, .ui.table td.warning { background: var(--tl-warn-bg) !important; color: var(--tl-text) !important; box-shadow: none; }
.ui.table tr.error, .ui.table td.error, .ui.table tr.negative, .ui.table td.negative { background: var(--tl-danger-bg) !important; color: var(--tl-text) !important; box-shadow: none; }
.ui.table tr.positive, .ui.table td.positive { background: var(--tl-ok-bg) !important; color: var(--tl-text) !important; box-shadow: none; }
.ui.compact.table td, .ui.compact.table th { padding: 8px 12px; }
.ui.table .tl-num { text-align: right; }
.ui.table .tl-actions { text-align: right; white-space: nowrap; }
.ui.table .tl-actions > .ui.button + .ui.button { margin-left: 8px; }
.ui.table .tl-strong { font-weight: 600; }


/* ===== tellur-theme.css – del 9: kort ===== */
.ui.segment, .ui.segments {
  background: var(--tl-surface); color: var(--tl-text);
  border: 1px solid var(--tl-border); border-radius: var(--tl-r-card); box-shadow: none;
}
.ui.segment { padding: 20px; }
.ui.raised.segment, .ui.raised.segments, .ui.stacked.segment, .ui.piled.segment { box-shadow: none; }
.ui.stacked.segment::after, .ui.piled.segment::before, .ui.piled.segment::after { display: none; }
.ui.basic.segment { background: transparent; border: 0; padding: 0; }
.ui.secondary.segment { background: var(--tl-surface-2); color: var(--tl-text); }
.ui.segments > .segment { border-top: 1px solid var(--tl-divider); }

.ui.card, .ui.cards > .card {
  background: var(--tl-surface); color: var(--tl-text);
  border-radius: var(--tl-r-card); box-shadow: 0 0 0 1px var(--tl-border);
}
.ui.link.card:hover, .ui.link.cards .card:hover, a.ui.card:hover { box-shadow: 0 0 0 1px var(--tl-link); transform: none; }
.ui.card > .content > .header, .ui.cards > .card > .content > .header,
.ui.card > .content > a.header, .ui.cards > .card > .content > a.header { color: var(--tl-text); font-size: var(--tl-fs-lg); font-weight: 700; }
.ui.card .meta, .ui.cards > .card .meta, .ui.card > .content > .description { color: var(--tl-muted); }
.ui.card > .content, .ui.cards > .card > .content { border-top-color: var(--tl-divider); }
.ui.card > .extra, .ui.cards > .card > .extra { border-top: 1px solid var(--tl-divider) !important; color: var(--tl-muted); }

/* Korttittel med handling til høyre */
.tl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px; }
.tl-card-head h2 { margin: 0; font-size: var(--tl-fs-lg); font-weight: 700; }


/* ===== tellur-theme.css – del 10: statusmerker ===== */
/* Avvik fra §6.8: Fomantics marg beholdes. Merker som ikke er status (overskrift øverst i segment, fargeprikk,
   nedtrekk i felt, feltetikett) holdes utenfor pilleformen – se «Tellur: merker» lenger ned */
.ui.label:where(:not(.attached):not(.dropdown):not(.empty):not(.ribbon)), .ui.labels .label, .tl-status {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 0 10px;
  border: 0; border-radius: var(--tl-r-pill);
  background: var(--tl-surface-3); color: var(--tl-text-2);
  font-size: var(--tl-fs-sm); font-weight: 700; line-height: 1; white-space: nowrap;
}
.ui.label > i.icon, .tl-status > i.icon { margin: 0 !important; font-size: 12px; }
.ui.ui.ui.green.label, .ui.ui.ui.olive.label, .ui.ui.ui.positive.label, .tl-status.ok {
  background: var(--tl-ok-bg) !important; color: var(--tl-ok-text) !important; border-color: transparent !important;
}
.ui.ui.ui.yellow.label, .ui.ui.ui.orange.label, .ui.ui.ui.warning.label, .tl-status.warn {
  background: var(--tl-warn-bg) !important; color: var(--tl-warn-text) !important; border-color: transparent !important;
}
.ui.ui.ui.red.label, .ui.ui.ui.negative.label, .ui.ui.ui.error.label, .tl-status.danger {
  background: var(--tl-danger-bg) !important; color: var(--tl-danger-text) !important; border-color: transparent !important;
}
.ui.ui.ui.blue.label, .ui.ui.ui.teal.label, .ui.ui.ui.primary.label, .ui.ui.ui.info.label, .tl-status.info {
  background: var(--tl-primary-soft) !important; color: var(--tl-primary-soft-text) !important; border-color: transparent !important;
}
.ui.ui.ui.grey.label, .ui.basic.label:not(.dropdown) { background: var(--tl-surface-3) !important; color: var(--tl-text-2) !important; border: 0 !important; }
/* Fomantic sentrerer horisontale merker med text-align, som ikke virker i inline-flex */
.ui.horizontal.label { justify-content: center; }

/* Teller (uleste, antall) */
.ui.circular.label:not(.empty), .ui.floating.label { min-width: 20px; height: 20px; min-height: 20px; padding: 0 6px !important; border-radius: 10px; font-size: 12px; justify-content: center; }
.ui.floating.label.red, .ui.ui.ui.floating.red.label, .ui.ui.ui.red.circular.label:not(.empty) { background: var(--tl-danger) !important; color: #FFFFFF !important; }


/* ===== tellur-theme.css – del 11: meldinger ===== */
.ui.message {
  background: var(--tl-surface); color: var(--tl-text);
  border: 1px solid var(--tl-border); border-radius: var(--tl-r-card); box-shadow: none !important;
  padding: 14px 16px; font-size: var(--tl-fs-body);
}
.ui.message .header, .ui.ui.message .header { color: inherit; font-weight: 700; }
.ui.info.message, .ui.blue.message { background: var(--tl-primary-soft); color: var(--tl-primary-soft-text); border-color: transparent; }
.ui.positive.message, .ui.success.message, .ui.green.message { background: var(--tl-ok-bg); color: var(--tl-ok-text); border-color: transparent; }
.ui.warning.message, .ui.yellow.message, .ui.orange.message { background: var(--tl-warn-bg); color: var(--tl-warn-text); border-color: transparent; }
.ui.negative.message, .ui.error.message, .ui.red.message { background: var(--tl-danger-bg); color: var(--tl-danger-text); border-color: transparent; }
.ui.icon.message > i.icon:not(.close) { font-size: 22px; opacity: 1; }
.ui.message > .close.icon { color: inherit; opacity: 0.7; }


/* ===== tellur-theme.css – del 12: modaler ===== */
.ui.dimmer { background-color: var(--tl-overlay) !important; }
.ui.inverted.dimmer { background-color: var(--tl-veil) !important; }
.ui.inverted.dimmer .ui.loader, .ui.inverted.dimmer > .content, .ui.inverted.dimmer > .content > * { color: var(--tl-text); }
.ui.modal { background: var(--tl-surface); color: var(--tl-text); border: 0; border-radius: var(--tl-r-modal); box-shadow: var(--tl-shadow-lg); }
.ui.modal > .header {
  padding: 20px 56px 20px 24px; background: var(--tl-surface); color: var(--tl-text);
  border-bottom: 1px solid var(--tl-divider); border-radius: var(--tl-r-modal) var(--tl-r-modal) 0 0;
  font-size: var(--tl-fs-xl); font-weight: 700;
}
.ui.modal > .content { padding: 24px; background: var(--tl-surface); color: var(--tl-text); }
.ui.modal > .actions {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 24px; background: var(--tl-surface); border-top: 1px solid var(--tl-divider);
  border-radius: 0 0 var(--tl-r-modal) var(--tl-r-modal);
}
.ui.modal > .actions > .button { margin: 0 !important; }
.ui.modal > .close {
  top: 12px !important; right: 12px !important; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--tl-text) !important; opacity: 1; font-size: 20px; border-radius: var(--tl-r-ctl);
}
.ui.modal > .close:hover { background: var(--tl-surface-2); }
/* Fomantic gir krysset skygge (laget for et hvitt kryss utenfor modalen). Samme selektor som i semantic.css, så den slår gjennom */
.ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside),
.ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) { text-shadow: none; }
.ui.fullscreen.modal { border-radius: 0; }
/* Tellur: Fomantic gir large-modalen fast bredde (1020 px fra 992 px), så .bred.modal og .ekstra.modal ble bredere enn
   vinduet mellom 992 og ca. 1050 px. Maks bredde holder den innenfor */
.ui.large.modal { max-width: calc(100% - 2em); }


/* ===== tellur-theme.css – del 13: popup ===== */
.ui.popup {
  background: var(--tl-surface); color: var(--tl-text);
  border: 1px solid var(--tl-border); border-radius: var(--tl-r-ctl); box-shadow: var(--tl-shadow-md);
  font-size: var(--tl-fs-body);
}
.ui.popup::before { background: var(--tl-surface); box-shadow: 1px 1px 0 0 var(--tl-border); }
.ui.bottom.popup::before, .ui.bottom.left.popup::before, .ui.bottom.center.popup::before, .ui.bottom.right.popup::before { box-shadow: -1px -1px 0 0 var(--tl-border); }
.ui.left.center.popup::before { box-shadow: 1px -1px 0 0 var(--tl-border); }
.ui.right.center.popup::before { box-shadow: -1px 1px 0 0 var(--tl-border); }
.ui.popup > .header { color: var(--tl-text); font-weight: 700; }
.ui.inverted.popup, [data-tooltip]::after { background: var(--tl-tooltip-bg) !important; color: var(--tl-tooltip-text) !important; border: 0; border-radius: var(--tl-r-sm); font-size: 13px; font-weight: 500; }
.ui.inverted.popup::before, [data-tooltip]::before { background: var(--tl-tooltip-bg) !important; }
[data-tooltip]::after { font-family: var(--tl-font); }


/* ===== tellur-theme.css – del 14: trekkspill ===== */
.ui.styled.accordion, .ui.styled.accordion .accordion {
  background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-r-card); box-shadow: none; width: 100%;
}
.ui.styled.accordion .title, .ui.accordion .title:not(.ui) {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  color: var(--tl-text); font-size: var(--tl-fs-lg); font-weight: 700; border-top: 1px solid var(--tl-divider);
}
.ui.styled.accordion > .title:first-child { border-top: 0; }
.ui.styled.accordion .title:hover, .ui.styled.accordion .active.title { color: var(--tl-text); background: transparent; }
.ui.styled.accordion .content, .ui.accordion .content { padding: 0 16px 20px; color: var(--tl-text); }
/* Kort inne i et trekkspill (ansattkortet, Min profil) beholder Fomantics luft rundt innholdet */
.ui.accordion .ui.card > .content { padding: 1em; }
.ui.accordion .title > .dropdown.icon { order: 2; margin-left: auto; color: var(--tl-muted); }


/* ===== tellur-theme.css – del 15: nøkkeltall ===== */
.tl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tl-kpi {
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-r-card);
  color: var(--tl-text); text-decoration: none;
}
.tl-kpi:hover { border-color: var(--tl-link); color: var(--tl-text); }
.tl-kpi-value { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tl-kpi-label { font-weight: 600; }
.tl-kpi-meta { font-size: 14px; color: var(--tl-muted); }
/* Tellur: kortet er en knapp (<button>) som åpner listen det gjelder */
button.tl-kpi { width: 100%; margin: 0; font: inherit; text-align: left; align-items: flex-start; cursor: pointer; }
button.tl-kpi:focus-visible { border-color: var(--tl-link); }


/* ===== tellur-theme.css – del 16: lister og avatarer ===== */
.tl-list { background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-r-card); overflow: hidden; }
.tl-list-row {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px 10px 14px;
  border-top: 1px solid var(--tl-divider); color: var(--tl-text); text-decoration: none;
}
.tl-list-row:first-child { border-top: 0; }
a.tl-list-row:hover { background: var(--tl-surface-2); color: var(--tl-text); }
.tl-list-row[aria-current="true"] { background: var(--tl-primary-soft); }
.tl-list-title { font-size: var(--tl-fs-md); font-weight: 600; }
.tl-list-sub { font-size: 14px; color: var(--tl-muted); }

/* Erstatter ui avatar image og klipp-bildene */
.tl-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tl-primary-soft); color: var(--tl-primary-soft-text);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.tl-avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.tl-avatar.strong { background: var(--tl-strong-bg); color: var(--tl-strong-text); }
.tl-mobile .tl-avatar { width: 44px; height: 44px; font-size: 15px; }

/* «LØR 10» */
.tl-datebadge {
  width: 52px; height: 56px; flex: none; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--tl-strong-bg); color: var(--tl-strong-text);
}
.tl-datebadge .dow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.tl-datebadge .day { font-size: 22px; font-weight: 700; line-height: 1; }


/* ===== tellur-theme.css – del 17: tomtilstand ===== */
.tl-empty {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  background: var(--tl-surface); border: 1px dashed var(--tl-border-strong); border-radius: var(--tl-r-card);
}
.tl-empty-icon {
  width: 48px; height: 48px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tl-primary-soft); color: var(--tl-link); font-size: 20px;
}
.tl-empty-title { font-weight: 700; }
.tl-empty-text { color: var(--tl-muted); font-size: 14px; }


/* ===== tellur-theme.css – del 18: toast ===== */
/* Avvik fra §6.16: toast_vis() lager .ui.message med farge, så toastene får meldingsfargene i del 11.
   Den nøytrale («Lagrer …») får den mørke toasten */
.ui.toast-container .toast-box { border-radius: 12px; box-shadow: var(--tl-shadow-md); }
.ui.toast-container .toast-box > .ui.message { border-radius: 12px; border-color: transparent; }
.ui.toast-container .toast-box > .ui.grey.message, .ui.toast {
  background: var(--tl-tooltip-bg) !important; color: var(--tl-tooltip-text) !important;
  border-radius: 12px; font-size: var(--tl-fs-body);
}
.ui.toast .header { color: inherit !important; font-weight: 700; }
.ui.toast.success .ui.icon, .ui.toast.success > i.icon { color: var(--tl-ok-text); }
.ui.toast.error .ui.icon, .ui.toast.error > i.icon { color: var(--tl-danger-text); }


/* ===== tellur-theme.css – del 19: diverse ===== */
.ui.loader::before { border-color: var(--tl-border) !important; }
.ui.loader::after { border-color: var(--tl-primary) transparent transparent !important; }
.ui.placeholder, .ui.placeholder .line, .ui.placeholder > ::before { background-color: var(--tl-surface-3) !important; }

.ui.pagination.menu { border: 1px solid var(--tl-border); border-radius: var(--tl-r-ctl); background: var(--tl-surface); box-shadow: none; }
.ui.pagination.menu .item { min-width: 44px; justify-content: center; color: var(--tl-text); }
.ui.pagination.menu .active.item { background: var(--tl-primary-soft); color: var(--tl-primary-soft-text); font-weight: 700; }
/* Luft mellom paginering og tabellen over/under den */
.ui.pagination.menu + .tl-table-scroll, .tl-table-scroll + .ui.pagination.menu,
.ui.pagination.menu + .tl-table-wrap, .tl-table-wrap + .ui.pagination.menu { margin-top: 16px; }
.ui.menu .item::before { background: var(--tl-border); }

.ui.progress { height: 8px; background: var(--tl-surface-3); border-radius: var(--tl-r-pill); box-shadow: none; }
.ui.progress .bar { height: 8px; min-width: 0; background: var(--tl-primary); border-radius: var(--tl-r-pill); }

.ui.breadcrumb a { color: var(--tl-link); }
.ui.breadcrumb .divider, .ui.breadcrumb .active.section { color: var(--tl-muted); }

/* Andre ui menu-varianter som ikke er faner eller paginering */
/* Avvik fra §6.17: dagens hovedmeny, headermeny og mobilens toppmeny unntas direkte, siden markup ikke får tl-keep ennå */
.ui.menu:not(.tabular):not(.pointing):not(.pagination):not(.tl-keep):not(.hoved):not(.headermeny):not(.fixed) {
  background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-r-ctl); box-shadow: none;
}
.ui.menu .item { color: var(--tl-text); }
.ui.menu:not(.hoved):not(.headermeny) .active.item:not(.tabular *) { background: var(--tl-primary-soft); color: var(--tl-primary-soft-text); }
.ui.vertical.menu .item > i.icon:not(.dropdown) { float: none; margin: 0 10px 0 0; }


/* ===== tellur-theme.css – del 20: vaktplan ===== */
.tl-week td { padding: 6px; vertical-align: top; min-width: 112px; border-right: 1px solid var(--tl-border); }
.tl-week td:last-child, .tl-week th:last-child { border-right: 0; }
.tl-week th.today { color: var(--tl-link); }
.tl-shift {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--tl-r-sm);
  background: var(--tl-primary-soft); color: var(--tl-primary-soft-text);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.tl-shift small { font-size: 12px; font-weight: 500; }
.tl-shift.warn { background: var(--tl-warn-bg); color: var(--tl-warn-text); }
.tl-shift.open { background: transparent; border: 1.5px dashed var(--tl-border-strong); color: var(--tl-muted); }
.tl-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--tl-muted); }

/* «På vakt»-kortet (mobil, §6.20) */
.tl-hero-card {
  display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 20px;
  background: var(--tl-hero-bg); border: 1px solid var(--tl-hero-border); color: #FFFFFF;
}
.tl-hero-card .tl-timer { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tl-hero-card .ui.button { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); background: transparent; color: #FFFFFF; }
.tl-hero-card .ui.primary.button { background: #FFFFFF; color: #14203A; box-shadow: none; }


/* ======================================================================================================
   Tellur: tilpasninger til dagens markup (egne valg etter design.md §11)
   Alt herfra og ned er broer som fjernes når sidene bygges om i fase 2 og 3.
   ====================================================================================================== */


/* ===== Tellur: knapper ===== */
/* Luft mellom knapper som står side om side. Knapper som er floatet til høyre får luften på venstre side,
   slik at den ytterste står kant i kant med innholdet */
.ui.button { margin: 0 8px 0 0; }
.ui.button[style*="float:right" i], .ui.button[style*="float: right" i] { margin: 0 0 0 8px; }
.ui.fluid.button, .ui.action.input > .button, .ui.labeled.input > .button { margin: 0; }

/* «Lukk» i modaler er sekundærknapp, slik at hver modal bare har én primærknapp (§1 punkt 1) */
.ui.blue.button[onclick^="steng_"] {
  background: var(--tl-surface); color: var(--tl-text); box-shadow: inset 0 0 0 1px var(--tl-border-strong); font-weight: 600;
}
.ui.blue.button[onclick^="steng_"]:hover, .ui.blue.button[onclick^="steng_"]:focus-visible {
  background: var(--tl-surface-3); color: var(--tl-text); box-shadow: inset 0 0 0 1px var(--tl-text-2);
}

/* Knapper i tabeller er kompakte (§6.6), også uten mini-klassen. 3 px over teksten som i del 5 */
.ui.table .ui.button:not(.fluid) { min-height: var(--tl-ctl-h-sm); padding: 3px 12px 0; font-size: 14px; }
.ui.table .ui.icon.button:not(.labeled):not(.fluid) { min-width: var(--tl-ctl-h-sm); padding: 0 8px; }

/* Knapp og nedtrekk bygd sammen med et felt (action input og labeled input) */
.ui.action.input > .button, .ui.action.input > .dropdown { min-height: var(--tl-ctl-h); }
.ui.action.input:not([class*="left action"]) > .button:last-child,
.ui.action.input:not([class*="left action"]) > .dropdown:last-child { border-radius: 0 var(--tl-r-ctl) var(--tl-r-ctl) 0; }
.ui[class*="left action"].input > .button:first-child,
.ui[class*="left action"].input > .dropdown:first-child { border-radius: var(--tl-r-ctl) 0 0 var(--tl-r-ctl); }
.ui.labeled.input > .label:not(.dropdown) {
  display: flex; align-items: center; min-height: var(--tl-ctl-h); padding: 0 12px; margin: 0;
  background: var(--tl-surface-3); color: var(--tl-text-2); border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-r-ctl); font-size: var(--tl-fs-body); font-weight: 500; white-space: nowrap;
}
.ui.labeled.input:not([class*="corner labeled"]) > .label:first-child { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui[class*="right labeled"].input > input + .label { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ui.buttons .or::before { background-color: var(--tl-surface); color: var(--tl-muted); box-shadow: 0 0 0 1px var(--tl-border) inset; }
/* Nedtrekk med ikonknapp til høyre (hurtigvalget ved mottakerne): nedtrekket fyller bredden, knappen er like høy som feltet.
   Knappen er selv et nedtrekk, og lista må være minst like bred som punktene (knappen er bare 44 px) */
.tl-felt-knapp { display: flex; align-items: flex-start; gap: 8px; }
.tl-felt-knapp > .ui.dropdown:first-child { flex: 1 1 auto; min-width: 0; }
.tl-felt-knapp > .ui.button { flex: none; min-height: var(--tl-ctl-h); margin: 0; }
.tl-felt-knapp > .ui.icon.button:not(.animated):not(.compact):not(.labeled) { min-width: var(--tl-ctl-h); }
.tl-felt-knapp > .ui.button.dropdown > .menu { min-width: max-content !important; }
/* I en tabellcelle (årsvalget i HMS-fanen på ansattkortet): bare så bred som innholdet, og knappen like høy som feltet.
   .ui.table gjør ellers knappene små (se «Tellur: tabeller») */
.ui.table .tl-felt-knapp { display: inline-flex; }
.ui.table .tl-felt-knapp > .ui.button:not(.fluid) { min-height: var(--tl-ctl-h); padding: 0 18px; font-size: var(--tl-fs-body); }


/* ===== Tellur: merker ===== */
/* Overskrift øverst i et segment (top attached label) – beholder formen, får tokens */
.ui.attached.label {
  background: var(--tl-surface-2); color: var(--tl-text);
  font-size: var(--tl-fs-sm); font-weight: 700; border: 0;
}
.ui.top.attached.label { border-bottom: 1px solid var(--tl-border); border-radius: calc(var(--tl-r-card) - 1px) calc(var(--tl-r-card) - 1px) 0 0; }
.ui.bottom.attached.label { border-top: 1px solid var(--tl-border); border-radius: 0 0 calc(var(--tl-r-card) - 1px) calc(var(--tl-r-card) - 1px); }
a.ui.attached.label:hover { background: var(--tl-surface-2); color: var(--tl-text); }

/* De grønne båndmerkene er feltetiketter, ikke status – vises som etikett uten boks (§6.4) */
.ui.ui.ui.ribbon.label {
  position: static; left: auto; display: flex; align-items: center;
  min-height: var(--tl-ctl-h); padding: 0 10px 0 0; margin: 0 !important;
  background: none !important; color: var(--tl-muted) !important; border: 0 !important; border-radius: 0 !important;
  font-size: var(--tl-fs-sm); font-weight: 600;
}
.ui.ribbon.label::after { display: none !important; }

/* Fargeprikker med farge i inline-stil (tjenester i booking) og dagnummer i kalenderne */
.ui.empty.circular.label { border: 0; }
.ui.ui.ui.blue.circular.label[style*="background-color"] { color: var(--tl-on-primary) !important; }


/* ===== Tellur: tabeller ===== */
/* Loddrette streker beholdes der tabellen er et rutenett: ukesoversikten og bookingkalenderen (som i §6.18 og §6.19),
   og grovmatrisen i ROS-analysen (kryss mellom berørte og hendelser) */
.ui.table.uke_midtstilt tr td, .ui.table.uke_midtstilt tr th,
.ui.table.booking tr td, .ui.table.booking tr th,
.ui.table.ros_grov tr td, .ui.table.ros_grov tr th { border-left: 1px solid var(--tl-border) !important; }
.ui.table.uke_midtstilt tr td:first-child, .ui.table.uke_midtstilt tr th:first-child,
.ui.table.booking tr td:first-child, .ui.table.booking tr th:first-child,
.ui.table.ros_grov tr td:first-child, .ui.table.ros_grov tr th:first-child { border-left: 0 !important; }
/* Datolinjen i ukesoversikten står fast mens listen rulles (som i Chromium). --uke-topp settes av uke_lag_kalender() i
   adm_vaktliste.js: høyden på topplinjen, pluss uke-filteret når det er klebrig. Gjelder der tabellen får plass i bredden -
   på smalere skjermer ruller tabellen sidelengs i tl-table-scroll, og da kan ikke hodet stå fast mot siden */
@media (min-width: 1280px) {
  #uke_kalender > .tl-table-scroll { overflow: visible; }
  #uke_kalender .ui.table.uke_midtstilt > thead > tr > th { position: sticky; top: var(--uke-topp, var(--tl-topbar-h)); z-index: 3; }
  /* Søkepopupen ligger i første celle og skal legge seg over resten av datolinjen */
  #uke_kalender .ui.table.uke_midtstilt > thead > tr > th:first-child { z-index: 4; }
}
/* Dagens dato i ukesoversikten (som i Chromium: egen bakgrunn og ramme på dagen i tabellhodet) */
.ui.table.uke_midtstilt > thead > tr > th.i_dag {
  background: var(--tl-primary-soft) !important; color: var(--tl-primary-soft-text);
  box-shadow: inset 0 0 0 2px var(--tl-primary);
}

/* Definisjonstabeller: første kolonne er etiketten */
.ui.definition.table > tr > td:first-child:not(.ignored), .ui.definition.table > tbody > tr > td:first-child:not(.ignored),
.ui.definition.table > tfoot > tr > td:first-child:not(.ignored), .ui.definition.table tr td.definition {
  background: var(--tl-surface-2); color: var(--tl-muted); font-weight: 600; box-shadow: none;
}
.ui.definition.table > thead:not(.full-width) > tr > th:first-child { background: transparent !important; box-shadow: none; }

/* Sorterbare tabeller */
.ui.sortable.table > thead > tr > th { color: var(--tl-muted); border-left: 0; }
.ui.sortable.table > thead > tr > th:hover, .ui.sortable.table > thead > tr > th.sorted, .ui.sortable.table > thead > tr > th.sorted:hover {
  background: var(--tl-surface-3) !important; color: var(--tl-text);
}
.ui.table tr td.selectable:hover { background: var(--tl-surface-2) !important; color: var(--tl-text) !important; }
.ui.table td.disabled, .ui.table th.disabled, .ui.table tr.disabled td { color: var(--tl-disabled); }


/* ===== Tellur: segmenter og overskrifter ===== */
/* Fargestripen øverst på fargede segmenter */
.ui.blue.segment:not(.inverted), .ui.primary.segment:not(.inverted) { border-top-color: var(--tl-primary) !important; }
.ui.green.segment:not(.inverted) { border-top-color: var(--tl-ok-text) !important; }
.ui.red.segment:not(.inverted) { border-top-color: var(--tl-danger) !important; }
.ui.tertiary.segment { background: var(--tl-surface-3); color: var(--tl-text-2); }
.ui.attached.segment { border-color: var(--tl-border); }
.ui.loading.segment::before, .ui.loading.form::before { background: var(--tl-veil); }
.ui.dividing.header { border-bottom-color: var(--tl-divider); }
.ui.block.header { background: var(--tl-surface-2); border-color: var(--tl-border); box-shadow: none; }
.ui.statistic > .value, .ui.statistics .statistic > .value, .ui.statistic > .label, .ui.statistics .statistic > .label { color: var(--tl-text); }
.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
.ui.divided.grid:not([class*="vertically divided"]) > .row > .column { box-shadow: -1px 0 0 0 var(--tl-divider); }

/* Rullebokser (ui scrolling container/segment, verktøyene på startsiden): Fomantic setter overscroll-behavior: none, og da ruller ikke
   siden når musepekeren står over boksen. Med auto ruller boksen først, og siden ruller videre når boksen er ved enden eller ikke har noe å rulle */
.ui.scrolling.container, .ui.scrolling.segment { overscroll-behavior: auto; }

/* Meldingsbokser: Fomantic gir overskriften egen farge per variant */
.ui.info.message .header, .ui.positive.message .header, .ui.success.message .header, .ui.warning.message .header,
.ui.negative.message .header, .ui.error.message .header, .ui.blue.message .header, .ui.green.message .header,
.ui.yellow.message .header, .ui.orange.message .header, .ui.red.message .header { color: inherit; }
.ui.grey.message { background: var(--tl-surface-2); color: var(--tl-text); border-color: var(--tl-border); }


/* ===== Tellur: lister, feed og søk ===== */
.ui.list .list > .item .header, .ui.list > .item .header { color: var(--tl-text); }
.ui.list .list > .item .description, .ui.list > .item .description { color: var(--tl-muted); }
.ui.divided.list > .item, .ui.divided.list .list > .item, .ui.celled.list > .item, .ui.celled.list > .list { border-top-color: var(--tl-divider); }
.ui.celled.list > .item:last-child { border-bottom-color: var(--tl-divider); }
.ui.selection.list .list > .item, .ui.selection.list > .item { color: var(--tl-text-2); }
.ui.selection.list .list > .item:hover, .ui.selection.list > .item:hover,
.ui.selection.list .list > .item.active, .ui.selection.list > .item.active { background: var(--tl-surface-3); color: var(--tl-text); }
.ui.items > .item > .content > .header, .ui.items > .item > .content > .description,
.ui.comments .comment .author, .ui.comments .comment .text,
.ui.feed > .event > .content .summary, .ui.feed > .event > .content .extra.text { color: var(--tl-text); }
.ui.items > .item .meta, .ui.items > .item .extra, .ui.comments .comment .metadata, .ui.comments .comment .actions a,
.ui.feed > .event > .content .date, .ui.feed > .event > .content .meta { color: var(--tl-muted); }
.ui.divided.items > .item { border-top-color: var(--tl-divider); }
.ui.search > .results { background: var(--tl-surface); border-color: var(--tl-border-strong); box-shadow: var(--tl-shadow-md); border-radius: var(--tl-r-ctl); }
.ui.search > .results .result { border-bottom-color: var(--tl-divider); }
.ui.search > .results .result .title { color: var(--tl-text); }
.ui.search > .results .result .description { color: var(--tl-muted); }
.ui.search > .results .result:hover, .ui.search > .results .result.active { background: var(--tl-surface-3); }
/* Trinnoversikt (ROS-analysen). Fomantic 2.9 skriver trinnene som .ui.steps:not(.circular) .step, så samme selektor brukes her */
.ui.steps, .ui.steps:not(.circular) .step { border-color: var(--tl-border); }
.ui.steps:not(.circular) .step, .ui.steps:not(.circular) .step::after { background: var(--tl-surface); color: var(--tl-text); border-color: var(--tl-border); }
.ui.steps:not(.circular) .link.step:hover, .ui.steps:not(.circular) .link.step:hover::after,
.ui.steps:not(.circular) .link.step:active, .ui.steps:not(.circular) .link.step:active::after { background: var(--tl-surface-3); color: var(--tl-text); }
.ui.steps:not(.circular) .step.active, .ui.steps:not(.circular) .step.active::after,
.ui.steps:not(.circular) .link.active.step:hover, .ui.steps:not(.circular) .link.active.step:hover::after { background: var(--tl-primary-soft); }
.ui.steps:not(.circular) .step .title, .ui.steps:not(.circular) .step .description { color: inherit; }
.ui.steps:not(.circular) .step.active .title { color: var(--tl-primary); }


/* Teller for uleste på fanene Innboks og Chat (#antall_innboks / #antall_chat, settes av meldinger_fane_teller_sett()) */
.tl-fane-teller {
  margin-left: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--tl-danger); color: var(--tl-on-primary); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tl-fane-teller:empty { display: none; }

/* ===== Tellur: innboksen i webportalen (design.md §12, web/18-meldinger-innboks.png) ===== */
/* Listen til venstre og leseruten til høyre. Nettbrett: listen får fast bredde. Under 768 px vises én del om gangen
   (data-apen settes av meldinger_apne() og fjernes av meldinger_lukk() i ans_meldinger.js) */
.tl-innboks { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: start; }
.tl-innboks-liste { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tl-innboks-liste > .ui.pagination.menu { align-self: flex-start; margin: 0; }
.tl-innboks-rad { align-items: flex-start; padding: 14px 16px; }
.tl-innboks-rad > .tl-list-body { display: flex; flex-direction: column; gap: 2px; }
.tl-list-body > .tl-innboks-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tl-innboks-topp > .tl-list-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-innboks-topp > .tl-list-sub { flex: none; }
.tl-innboks-topp > .tl-list-sub > i.icon { margin: 0 6px 0 0; }
.tl-innboks-emne, .tl-innboks-utdrag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-innboks-emne > i.icon { margin: 0 4px 0 0; color: var(--tl-danger); }
.tl-innboks-utdrag:empty { display: none; }
/* Uleste meldinger har halvfet avsender og emne, leste har vanlig vekt */
.tl-innboks-rad.melding_ulest .tl-list-title, .tl-innboks-rad.melding_ulest .tl-innboks-emne { font-weight: 700; }
.tl-innboks-rad.melding_lest .tl-list-title, .tl-innboks-rad.melding_lest .tl-innboks-emne { font-weight: 400; }

.tl-innboks-leser {
  min-width: 0; background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-r-card);
}
.tl-innboks-melding { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.tl-innboks-hode { display: flex; align-items: center; gap: 12px; }
.tl-innboks-hode > .tl-list-body { flex: 1; min-width: 0; }
.tl-innboks-hode > .tl-list-body > span { display: block; }
.tl-innboks-melding > h2 { margin: 0; font-size: var(--tl-fs-lg); font-weight: 700; overflow-wrap: anywhere; }
.tl-innboks-melding > h2 > i.icon { color: var(--tl-danger); }
.tl-innboks-tekst { line-height: 1.6; overflow-wrap: anywhere; }
.tl-innboks-vedlegg { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-innboks-vedlegg > .ui.button { margin: 0; }
.tl-innboks-tilbake { display: none !important; }
/* Sendte meldinger: merke for SMS/Tellur og hvor mange som har lest under emnet, og mottakerne som merker i leseruten */
.tl-list-body > .tl-innboks-status { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tl-innboks-status > .tl-status { margin: 0; flex: none; }
.tl-innboks-status i.check.icon { margin: 0 4px 0 0; }
/* Hvor mange som har lest meldingen står nederst til høyre i raden */
.tl-innboks-status > .tl-innboks-lest { margin-left: auto; flex: none; }
.tl-innboks-hode > .tl-status { margin: 0; flex: none; }
/* Mottakerne i leseruten: oppsummering og fremdriftslinje først, så navnene som merker. Mange navn foldes sammen bak en knapp */
.tl-innboks-mottakere { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--tl-divider); }
.tl-innboks-mottakere > .tl-label { margin: 4px 0 0; }
.tl-innboks-mottakere > .ui.progress { margin: 0; }
.tl-innboks-lestlinje { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tl-innboks-lestlinje > .tl-label { margin: 0; }
.tl-innboks-piller { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-innboks-mottakere .tl-status { margin: 0; }
.tl-innboks-mottakere .ui.tertiary.button { margin: 0; padding-left: 0; padding-right: 0; min-height: 0; }

/* Leseruten følger med når listen rulles (klebrig under topplinjen), og ruller selv når meldingen er lengre enn skjermen.
   Gjelder bare når liste og leserute står side om side */
@media (min-width: 768px) {
  .tl-innboks > .tl-innboks-leser {
    position: sticky; top: calc(var(--tl-topbar-h) + 16px);
    max-height: calc(100vh - var(--tl-topbar-h) - 32px); overflow-y: auto;
  }
}
/* Nettbrett: listen får fast bredde, og leseruten resten */
@media (max-width: 1099px) {
  .tl-innboks { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
}
/* Telefon: én del om gangen. Listen vises til en melding er åpnet, og «Tilbake til innboks» tar deg tilbake */
@media (max-width: 767px) {
  .tl-innboks { grid-template-columns: minmax(0, 1fr); }
  .tl-innboks > .tl-innboks-leser { display: none; }
  .tl-innboks[data-apen="true"] > .tl-innboks-liste { display: none; }
  .tl-innboks[data-apen="true"] > .tl-innboks-leser { display: block; }
  .tl-innboks-tilbake { display: inline-flex !important; margin: 16px 16px 0 !important; }
  .tl-innboks-melding { padding: 16px; }
}


/* ===== Tellur: «N item menu» brukt som valgknapper (pause, alvorlighetsgrad, ja/nei) ===== */
.ui.item.menu:not(.tabular):not(.pagination) { min-height: var(--tl-ctl-h); overflow: hidden; background: var(--tl-field); border-color: var(--tl-border-strong); }
.ui.item.menu:not(.tabular):not(.pagination) > .item { min-height: var(--tl-ctl-h); font-weight: 500; }
.ui.item.menu:not(.tabular):not(.pagination) > .active.item {
  background: var(--tl-primary-soft) !important; color: var(--tl-primary-soft-text) !important; font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--tl-link) !important;
}
.ui.item.menu:not(.tabular):not(.pagination) > .item:first-child { border-radius: var(--tl-r-ctl) 0 0 var(--tl-r-ctl); }
.ui.item.menu:not(.tabular):not(.pagination) > .item:last-child { border-radius: 0 var(--tl-r-ctl) var(--tl-r-ctl) 0; }
.ui.vertical.menu .item > .menu > .item, .ui.vertical.menu .menu .item { color: var(--tl-text-2); }


/* ===== Tellur: fargede ikoner ===== */
/* Røde, grønne og blå ikoner (mange er klikkbare) får tokenfarger, slik at de synes i mørkt. Byttes til knapper med tekst i fase 3 */
i.red.icon.icon.icon.icon.icon.icon { color: var(--tl-danger) !important; }
i.green.icon.icon.icon.icon.icon.icon { color: var(--tl-ok-text) !important; }
i.blue.icon.icon.icon.icon.icon.icon { color: var(--tl-link) !important; }
i.orange.icon.icon.icon.icon.icon.icon, i.yellow.icon.icon.icon.icon.icon.icon { color: var(--tl-warn-text) !important; }
i.grey.icon.icon.icon.icon.icon.icon { color: var(--tl-muted) !important; }
.ui.button > i.icon.icon.icon.icon.icon.icon.icon { color: inherit !important; }


/* ===== Tellur: modaler ===== */
/* Webportalens modaler har innholdet i #modal_container (og tilsvarende), med topp og bunn som egne div-er med
   inline bakgrunn (#efefef eller #c3c3c3). De får samme utseende som .header og .actions i del 12 */
[style*="background:#efefef" i], [style*="background:#c3c3c3" i] { background: var(--tl-surface-2) !important; }
.ui.modal [style*="background:#efefef" i], .ui.modal [style*="background:#c3c3c3" i] {
  background: var(--tl-surface) !important; border-bottom: 1px solid var(--tl-divider);
}
.ui.modal [style*="background:#efefef" i][style*="overflow:auto" i],
.ui.modal [style*="background:#efefef" i]:last-child:not(:first-child),
.ui.modal [style*="background:#c3c3c3" i]:last-child:not(:first-child),
.ui.modal > .actions[style] { border-bottom: 0; border-top: 1px solid var(--tl-divider); }
.ui.modal > div[id$="_container"] > [style*="background:#efefef" i]:first-child,
.ui.modal > div[id$="_container"] > [style*="background:#c3c3c3" i]:first-child,
.ui.modal > i.close + div[style*="background:#c3c3c3" i] { border-radius: var(--tl-r-modal) var(--tl-r-modal) 0 0; padding-right: 56px !important; }
.ui.modal > div[id$="_container"] > [style*="background:#efefef" i]:last-child:not(:first-child),
.ui.modal > div[id$="_container"] > [style*="background:#c3c3c3" i]:last-child:not(:first-child) { border-radius: 0 0 var(--tl-r-modal) var(--tl-r-modal); }
.ui.modal [style*="background:#efefef" i] > h3, .ui.modal [style*="background:#c3c3c3" i] > h3,
.ui.modal [style*="background:#c3c3c3" i] > h4.ui.header { margin: 0; font-size: var(--tl-fs-xl); font-weight: 700; }

/* Usynlig label som holder knapper på linje med felt: <label style="color:#FFF;">.</label> */
label[style*="color:#FFF" i] { color: transparent !important; }


/* ===== Tellur: mobilportalen ===== */
/* Tittelen på en underskjerm står skjult i innholdet og vises i toppfeltet (skjermtittel_sett() i mobil/js/annet.js) */
.tl-m-skjermtittel, .tl-m-skjermhandling { display: none; }
/* Skjermens handling til høyre i toppfeltet (pilleformet knapp, mobil/20-bookinger.png). Tittelen kortes ned når det blir trangt */
.tl-m-handling { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.tl-m-handling:empty { display: none; }
.tl-m-handling:not(:empty) + .tl-m-profil { margin-left: 0; }
.tl-m-handling .ui.button { min-height: 40px; margin: 0; padding: 0 16px; border-radius: var(--tl-r-pill); font-size: 15px; white-space: nowrap; }
.tl-m-header > .tl-m-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Markøren for piltastene i nedtrekk vises ikke på mobil (etter ønske): den ser ut som et valg når søkefeltet får fokus */
.tl-mobile .ui.dropdown .menu .selected.item:not(.active) { background: transparent !important; }

/* Flytende handlingsknapp nederst til høyre (nytt chatrom). Eget valg - står ikke i design.md. Brukes bare på underskjermer, der bunnmenyen er skjult */
.tl-mobile .ui.icon.button.tl-m-fab:not(.labeled) {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20;
  width: 56px; min-width: 56px; height: 56px; min-height: 56px; margin: 0; padding: 0;
  border-radius: var(--tl-r-pill); box-shadow: var(--tl-shadow-md);
}
.tl-mobile .ui.icon.button.tl-m-fab > i.icon { margin: 0; font-size: 20px; }

/* Uke med dager (mobil/20-bookinger.png): valgt dag er fylt blå, dagen i dag har ramme, prikk betyr at dagen har innhold */
.tl-m-uke-topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Pilknapp for forrige/neste uke eller måned */
.tl-m-pil {
  width: 44px; height: 44px; flex: none; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 22px; background: transparent; color: var(--tl-text); cursor: pointer;
}
.tl-m-pil > i.icon { margin: 0; height: auto; }
.tl-m-pil:active { background: var(--tl-surface-2); }
.tl-m-uke-dager { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tl-m-dag {
  position: relative; min-height: 60px; padding: 6px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--tl-text);
  font-family: var(--tl-font); cursor: pointer;
}
.tl-m-dag .dow { font-size: 12px; font-weight: 500; color: var(--tl-muted); }
.tl-m-dag .day { font-size: 18px; font-weight: 600; line-height: 1.2; }
.tl-m-dag .prikk { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--tl-link); }
.tl-m-dag.i_dag { border-color: var(--tl-text); }
.tl-m-dag[aria-pressed="true"] { background: var(--tl-primary); border-color: var(--tl-primary); color: var(--tl-on-primary); }
.tl-m-dag[aria-pressed="true"] .dow, .tl-m-dag[aria-pressed="true"] .day { color: var(--tl-on-primary); }
.tl-m-dag[aria-pressed="true"] .prikk { background: var(--tl-on-primary); }

/* Menyen bak de tre prikkene i en listerad (endre, slett osv.) åpnes mot venstre */
.ui.dropdown.tl-m-radmeny { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--tl-muted); }
.ui.dropdown.tl-m-radmeny > i.icon { margin: 0; }
.ui.dropdown.tl-m-radmeny > .menu { left: auto; right: 0; min-width: max-content; }
/* .tl-list klipper innholdet for å få runde hjørner. En liste med radmeny må slippe menyen ut over kanten,
   så der rundes første og siste rad i stedet */
.tl-list:has(.tl-m-radmeny) { overflow: visible; }
.tl-list:has(.tl-m-radmeny) > .tl-list-row:first-child { border-radius: var(--tl-r-card) var(--tl-r-card) 0 0; }
.tl-list:has(.tl-m-radmeny) > .tl-list-row:last-child { border-radius: 0 0 var(--tl-r-card) var(--tl-r-card); }
.tl-list:has(.tl-m-radmeny) > .tl-list-row:only-child { border-radius: var(--tl-r-card); }

/* Faner er en segmentkontroll på mobil (§6.5, mobil/04-vakter.png): grå bane, og valgt fane er hvit.
   Fanene står på én rad. Får de ikke plass, går fanenavn med mellomrom over to linjer («Ledige vakter»),
   mens enkeltord aldri kuttes. Blir raden likevel for bred, ruller den sidelengs */
.tl-mobile .ui.tabular.menu {
  flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 4px; min-height: 0;
  border: 0; border-radius: 12px; background: var(--tl-surface-3);
}
.tl-mobile .ui.tabular.menu .item {
  flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 0 12px !important; margin: 0 !important;
  white-space: normal; text-align: center; line-height: 1.2;
  border: 0 !important; border-radius: 9px !important; color: var(--tl-text-2) !important; font-weight: 600;
}
/* Mindre luft i fanene på de smaleste skjermene, slik at tre faner får plass ved 320 px */
@media (max-width: 374px) {
  .tl-mobile .ui.tabular.menu .item { padding: 0 8px !important; }
}
.tl-mobile .ui.tabular.menu .active.item {
  background: var(--tl-surface) !important; color: var(--tl-text) !important; box-shadow: var(--tl-shadow-sm); font-weight: 700;
}
.tl-mobile .ui.attached.tab.segment, .tl-mobile .ui.bottom.attached.segment.tab { padding-top: 16px; }

/* Fomantics container har egen marg på smale skjermer. Innholdet har allerede luft fra .tl-m-content */
.tl-mobile .tl-m-content .ui.ui.ui.container:not(.fluid) { width: auto; margin-left: 0 !important; margin-right: 0 !important; }

/* Skjema (mobil/18-avvik.png): ledeteksten står over feltet, uten ramme */
.tl-mobile legend {
  display: block; width: auto; margin: 18px 0 6px; padding: 0; border: 0; background: transparent;
  text-align: left; font-size: var(--tl-fs-sm); font-weight: 600; color: var(--tl-text);
}
.tl-mobile .ui.form > legend:first-child, .tl-mobile .tl-m-skjermtittel + legend { margin-top: 0; }

/* Valgknapper (ui item menu) står hver for seg på mobil, og valgt knapp har blå ramme (§6.4 .tl-choice) */
.tl-mobile .ui.item.menu:not(.tabular):not(.pagination) {
  display: flex; gap: 8px; min-height: 0; margin: 0; overflow: visible;
  background: transparent !important; border: 0 !important; box-shadow: none;
}
/* Fomantics clearfix (::after) ville blitt et eget element i raden og gitt luft til høyre */
.tl-mobile .ui.item.menu:not(.tabular):not(.pagination)::after { display: none; }
.tl-mobile .ui.item.menu:not(.tabular):not(.pagination) > .item {
  flex: 1 1 0; width: auto; min-height: 52px; padding: 0 8px; justify-content: center; text-align: center;
  background: var(--tl-field); border: 1px solid var(--tl-border-strong); border-radius: var(--tl-r-ctl) !important;
  color: var(--tl-text); font-weight: 500;
}
.tl-mobile .ui.item.menu:not(.tabular):not(.pagination) > .item::before { display: none; }
.tl-mobile .ui.item.menu:not(.tabular):not(.pagination) > .active.item {
  background: var(--tl-primary-soft) !important; color: var(--tl-primary-soft-text) !important;
  border-color: var(--tl-link); box-shadow: inset 0 0 0 1px var(--tl-link) !important; font-weight: 700;
}

/* Skalaen 1–10 i spørreundersøkelsen har elleve valg. De står på to linjer, slik at hvert valg er stort nok til å treffe */
.tl-mobile .ui.eleven.item.menu:not(.tabular):not(.pagination) { display: grid; grid-template-columns: repeat(6, 1fr); }
.tl-mobile .ui.eleven.item.menu:not(.tabular):not(.pagination) > .item { min-height: 44px; padding: 0; }
/* Tellur: samme skala i webportalen (Besvar spørreundersøkelse) står på to linjer når den ikke får plass på én */
@media (max-width: 959px) {
  .tl-content .ui.eleven.item.menu:not(.tabular):not(.pagination),
  .ui.modal .ui.eleven.item.menu:not(.tabular):not(.pagination) { display: grid; grid-template-columns: repeat(6, 1fr); }
  .tl-content .ui.eleven.item.menu:not(.tabular):not(.pagination) > .item,
  .ui.modal .ui.eleven.item.menu:not(.tabular):not(.pagination) > .item { min-height: 44px; padding: 0; justify-content: center; }
}

/* Skjema med fast handlingsfelt nederst (§5.2.1). Avvik fra §5.2.1: feltet er position:fixed i stedet for sticky, fordi det
   står inne i skjemaet (innholdet byttes med innerHTML) og skal stå nederst også når skjemaet er kort.
   Brukes av .ui.form som har .tl-m-actionbar som barn, og av .tl-m-skjema. Skjemaet får luft nederst, slik at feltet ikke dekker noe */
.tl-mobile .ui.form > .tl-m-actionbar, .tl-m-skjema > .tl-m-actionbar { position: fixed; left: 0; right: 0; bottom: 0; }
.tl-mobile .ui.form:has(> .tl-m-actionbar), .tl-m-skjema { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.tl-m-actionbar .ui.button { margin: 0; }

/* Fliser til valg av type (mobil/17-hms.png): ikon over navn, tre i bredden */
.tl-m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tl-m-tile {
  min-height: 84px; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-r-card);
  color: var(--tl-text); font: 600 15px var(--tl-font); cursor: pointer;
}
.tl-m-tile > i.icon { margin: 0; height: auto; font-size: 22px; color: var(--tl-link); }
.tl-m-tile:active { background: var(--tl-surface-2); }

/* Månedskalenderen på Vakter (mobil/04-vakter.png): dagene er runde merker. Vakt er fylt blå, dagen i dag har ramme,
   opptatt har stiplet ramme. Ledig, delvis og fravær har Tellurs statusfarger (egne valg etter §11) */
.tl-kal-tittel { text-align: center; }
/* Kolonnene kan bli smalere enn 40 px (minmax), og dagene krymper med dem, slik at søndag ikke stikker ut av kortet ved 320 px */
.tl-kal-dager { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; justify-items: center; }
.tl-kal-ukedag { padding: 4px 0 6px; font-size: 13px; font-weight: 600; color: var(--tl-muted); }
.tl-kal-dag {
  width: 100%; max-width: 40px; height: auto; aspect-ratio: 1; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent; border-radius: 50%; background: transparent; color: var(--tl-text);
  font: 500 16px var(--tl-font); cursor: pointer;
}
.tl-kal-dag.utenfor { color: var(--tl-muted); opacity: 0.6; cursor: default; }
.tl-kal-dag.vakt { background: var(--tl-primary); border-color: var(--tl-primary); color: var(--tl-on-primary); font-weight: 700; }
.tl-kal-dag.konflikt { background: var(--tl-danger); border-color: var(--tl-danger); }
.tl-kal-dag.ledig { background: var(--tl-ok-bg); color: var(--tl-ok-text); }
.tl-kal-dag.opptatt { background: var(--tl-surface-3); border: 1.5px dashed var(--tl-border-strong); }
.tl-kal-dag.delvis { background: var(--tl-warn-bg); color: var(--tl-warn-text); }
.tl-kal-dag.fravar { background: var(--tl-danger-bg); color: var(--tl-danger-text); }
.tl-kal-dag.i_dag { border: 2px solid var(--tl-text); font-weight: 700; }
.tl-kal-dag.vakt.i_dag { box-shadow: 0 0 0 2px var(--tl-surface), 0 0 0 4px var(--tl-text); border-color: var(--tl-primary); }
.tl-kal-forklaring { padding-top: 12px; border-top: 1px solid var(--tl-divider); gap: 14px; }
.tl-kal-forklaring > span { display: inline-flex; align-items: center; gap: 6px; }
.tl-kal-prikk { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid transparent; }
.tl-kal-prikk.vakt { background: var(--tl-primary); }
.tl-kal-prikk.i_dag { border-color: var(--tl-text); }
.tl-kal-prikk.ledig { background: var(--tl-ok-bg); border-color: var(--tl-ok-text); }
.tl-kal-prikk.opptatt { background: var(--tl-surface-3); border: 1.5px dashed var(--tl-border-strong); }
.tl-kal-prikk.fravar { background: var(--tl-danger-bg); border-color: var(--tl-danger-text); }
.tl-kal-prikk.delvis { background: var(--tl-warn-bg); border-color: var(--tl-warn-text); }

/* Innboksen (mobil/09-meldinger.png): raden er tittelen i et trekkspill, og meldingen åpnes under raden */
.tl-mobile .ui.accordion .title.tl-m-melding { display: flex; align-items: flex-start; gap: 12px; padding: 14px; }
.tl-m-melding > .tl-list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-list-body > .tl-m-melding-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tl-m-melding-topp > .tl-list-title { min-width: 0; }
.tl-m-melding-topp > .tl-list-sub { flex: none; }
.tl-m-melding > .tl-list-body > .tl-list-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-list-body > .tl-m-ulest { display: inline-flex; align-items: center; gap: 6px; color: var(--tl-link); font-size: 14px; font-weight: 700; }
.tl-m-ulest > .prikk { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tl-link); }
.tl-m-melding > .tl-avatar > i.icon { margin: 0; height: auto; }
/* inline-flex på nytt: «.tl-list-body > span» gjør merket til blokk, og teksten havner øverst i pillen */
.tl-m-melding > .tl-list-body > .tl-status { display: inline-flex; align-self: flex-start; margin-top: 4px; }

/* Filteret over innboksen (Alle / Uleste / Sendt): pilleformede valgknapper, valgt knapp er mørk */
.tl-m-filter { margin-bottom: 12px; }
.tl-m-filter > .tl-choice { flex: none; padding: 0 16px; border-radius: 999px; }
.tl-m-filter > .tl-choice[aria-pressed="true"] {
  border: 1px solid var(--tl-strong-bg); background: var(--tl-strong-bg); color: var(--tl-strong-text);
}

/* Overskrift med statusmerke til høyre (mobil/07-timeliste.png) */
.tl-m-seksjon { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: -8px; }
.tl-list-row > .tl-list-tid.tl-list-title { min-width: 64px; }
/* To felt ved siden av hverandre (start og slutt) */
.tl-m-to-felt { display: flex; gap: 10px; }
.tl-m-to-felt > .field { flex: 1; min-width: 0; }
.tl-mobile .ui.form .tl-m-to-felt > .field { margin-bottom: 1em; }
.tl-m-to-felt .ui.input > input { text-align: center; font-weight: 600; padding-left: 8px !important; padding-right: 8px !important; }
/* Velg arbeidssted (mobil/03-velg-arbeidssted.png, §5.2.3): enkeltvalg som egen skjerm. Valgt rad har uthevet navn og hake */
.tl-m-valg .tl-list-title { font-weight: 400; }
.tl-m-valg .tl-list-row[aria-checked="true"] .tl-list-title { font-weight: 700; }
.tl-m-valg .tl-list-row > i.check.icon { font-size: 22px; height: auto; }
.tl-m-card-rad > .ui.button { flex: none; margin: 0; }
/* Registrer timer (mobil/08-registrer-timer.png, §5.2.3): dato med piler, klokkeslett med store tall og sum over send-knappen */
.tl-m-dato {
  position: relative; display: flex; align-items: center; gap: 4px; min-height: var(--tl-ctl-h); padding: 0 4px;
  background: var(--tl-field); border: 1px solid var(--tl-border-strong); border-radius: var(--tl-r-ctl);
}
.tl-m-dato-tekst {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--tl-text);
  font: 500 var(--tl-fs-body) var(--tl-font); text-align: center; cursor: pointer;
}
/* Feltet datovelgeren er knyttet til. Datoen vises som tekst mellom pilene */
/* Antall med minus og pluss (bookingskjemaet): samme ramme som datoen, men tallet står synlig i midten og kan skrives inn */
.tl-mobile .ui.form .tl-m-antall > input {
  position: static; flex: 1; min-width: 0; width: auto; height: 44px; min-height: 0; padding: 0 !important; border: 0 !important;
  background: transparent; text-align: center; font-weight: 600; opacity: 1; pointer-events: auto; box-shadow: none;
}
.tl-mobile .ui.form .tl-m-dato:not(.tl-m-antall) > input {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; min-height: 0; padding: 0 !important; border: 0 !important;
  opacity: 0; pointer-events: none;
}
/* !important fordi alle felt på mobil er låst til 16 px (hindrer zoom i iOS) - 26 px er over grensen */
.tl-mobile .ui.form .tl-m-klokke .ui.input > input { height: 64px; font-size: 26px !important; font-weight: 700; }
.tl-m-valgfritt { font-weight: 400; color: var(--tl-muted); }
.tl-m-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--tl-muted); }
.tl-m-sum > strong { color: var(--tl-text); font-size: 22px; font-weight: 700; white-space: nowrap; }
.tl-mobile .ui.form:has(> .tl-m-actionbar > .tl-m-sum) { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
/* Bryter som står som eget felt ved siden av et annet (Faktureres i bookingskjemaet): midtstilt i felthøyden */
.tl-m-to-felt > .field > .ui.toggle.checkbox { display: block; margin: calc((var(--tl-ctl-h) - 28px) / 2) 0; }

/* Oppgavekort (mobil/14-oppgaver.png): tittel, avsender og frist under hverandre, pil til høyre */
.tl-m-oppgave { cursor: pointer; }
.tl-m-oppgave .tl-list-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tl-m-card-rad > .tl-list-body { flex: 1; min-width: 0; }
.tl-m-card-rad > i.chevron.icon { margin: 0; flex: none; color: var(--tl-muted); }
/* Sidetallene står på én rad. Er det flere sider enn det er plass til, ruller raden sidelengs (som fanene) i stedet for å kuttes */
.tl-mobile .ui.pagination.menu {
  align-self: center; display: flex; width: max-content; max-width: 100%; margin: 16px auto 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tl-mobile .ui.pagination.menu::-webkit-scrollbar { display: none; }

/* To fliser i bredden, og flis som er hovedhandlingen (Ring på kontaktkortet) */
.tl-m-tiles.to { grid-template-columns: repeat(2, 1fr); }
.tl-m-tile.primary { background: var(--tl-primary); border-color: var(--tl-primary); color: var(--tl-on-primary); }
.tl-m-tile.primary > i.icon { color: inherit; }
a.tl-m-tile, a.tl-m-tile:hover { text-decoration: none; color: var(--tl-text); }
a.tl-m-tile.primary, a.tl-m-tile.primary:hover { color: var(--tl-on-primary); }

/* Kontaktkortet (mobil/13-kontakt.png): stort, rundt merke med forbokstaver, og navnet midtstilt under */
.tl-mobile .tl-avatar.xl { width: 88px; height: 88px; font-size: 30px; }
.tl-avatar.xl > i.icon { margin: 0; height: auto; }
.tl-m-kontakt { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 8px; }
.tl-m-kontakt h2 { margin: 4px 0 0; font-size: var(--tl-fs-xl); font-weight: 700; }
.tl-m-kontakt .tl-list-sub:empty { display: none; }

/* Min profil (mobil/js_php/min_profil.php): profilmerket i toppfeltet er en lenke, og radene med ledetekst over verdien kan trykkes på */
a.tl-m-profil { display: flex; border-radius: 50%; text-decoration: none; }
a.tl-list-row.info { cursor: pointer; }
.tl-list-row.info > .ui.button { flex: none; margin: 0; }
.tl-list-row > i.check.icon { margin: 0; color: var(--tl-primary); flex: none; }
/* Fraværsoversikten: to tallkolonner til høyre (hele året og siste 12 måneder) */
.tl-m-tall { flex: none; width: 56px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-m-tall.tl-list-sub { font-weight: 400; }
.tl-m-fravar > .tl-list-row.sum > .tl-list-body > .tl-list-title { font-weight: 700; }
/* Ferie, permisjon og sykdom (Oversikt): tre nøkkeltall side om side, og søknadene med trekk-knapp til høyre.
   Ledeteksten er liten nok til at «Egenmelding» og «Sykemelding» får plass ned til 320 px.
   Er raden for smal til statusmerket og knappen (320 px), legger knappen seg på egen linje i stedet for oppå merket */
.tl-kpis.tl-m-nokkeltall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tl-m-nokkeltall > .tl-kpi { padding: 14px 4px; align-items: center; text-align: center; }
.tl-m-nokkeltall .tl-kpi-label { font-size: var(--tl-fs-sm); overflow-wrap: anywhere; }
.tl-m-nokkeltall > .tl-kpi:hover { border-color: var(--tl-border); }
.tl-list-row.tl-m-soknad { cursor: default; flex-wrap: wrap; }
.tl-m-soknad > .tl-list-body { flex: 1 1 150px; min-width: min-content; }
.tl-m-soknad > .ui.button { flex: none; margin: 0 0 0 auto; }
/* Menypunktene i bunnmenyen og radmenyene er trykkflater og skal være minst 44 px høye (§1 punkt 9) */
.tl-mobile .ui.dropdown .menu > .item { padding-top: 14px !important; padding-bottom: 14px !important; }

/* Kort under hverandre (vakter, oppgavelisten). Kortene står tettere enn delene ellers på skjermen, med overskrifter imellom */
.tl-m-kortliste { display: flex; flex-direction: column; gap: 10px; }
.tl-m-kortliste > .tl-m-section-title { margin-top: 10px; }
.tl-m-kortliste > .tl-m-section-title:first-child { margin-top: 0; }
/* Vaktkort (mobil/04-vakter.png og mobil/05-ledige-vakter.png): datomerke eller klokkeslett til venstre, sted og tid,
   og handling til høyre. Merker, kommentar og kolleger står under */
.tl-m-vakt { gap: 10px; }
.tl-m-vakt > .tl-m-card-rad > .ui.button { flex: none; }
.tl-m-vakt .tl-list-sub:empty { display: none; }
/* Datomerke uten bakgrunn («LØR» over «10») */
.tl-datebadge.plain { width: 44px; height: auto; border-radius: 0; background: transparent; color: var(--tl-text); }
.tl-datebadge.plain .dow { color: var(--tl-muted); }
/* Statusmerker ved siden av hverandre under en rad */
.tl-m-merker { display: flex; flex-wrap: wrap; gap: 6px; }
/* Hvem som er på jobb samtidig: profilmerke, navn med klokkeslett (og rolle) under, og ring-knapp til høyre */
.tl-m-kolleger { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--tl-divider); }
.tl-m-kollega { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tl-mobile .tl-m-kollega > .tl-avatar { width: 40px; height: 40px; font-size: 14px; flex: none; }
.tl-m-kollega > .ui.button { flex: none; margin: 0; }
.tl-m-kollega > .tl-list-body { flex: 1; min-width: 0; }
.tl-m-kollega > .tl-list-sub { flex: none; }
/* Dempet knapp til en handling som gjentas på hvert kort («Vis interesse») */
.ui.button.tl-soft, .ui.button.tl-soft:hover, .ui.button.tl-soft:focus {
  background: var(--tl-primary-soft); color: var(--tl-primary-soft-text); box-shadow: none; font-weight: 700;
}

/* Dialogen i mobilportalen (.hoved.modal i mobil/header.php) har tom topp og bunn. Toppen gir plass til krysset,
   og overskriften i innholdet (.tl-m-modal-tittel) trekkes opp på linje med det. Bunnen skjules når den er tom */
.tl-mobile .ui.hoved.modal > .header:empty { height: 48px; padding: 0 !important; border-bottom: 0; }
.tl-mobile .ui.hoved.modal > .actions:empty { display: none; }
.tl-mobile .ui.hoved.modal > .close { top: 2px !important; right: 4px !important; }
.tl-mobile .ui.hoved.modal > .content { border-radius: 0 0 var(--tl-r-modal) var(--tl-r-modal); }
/* Meldingsdialogen vises uten topp og bunn når den brukes til en bekreftelse (slett booking) - innholdet følger da hjørnene */
.tl-mobile .ui.melding.modal > .content { border-radius: var(--tl-r-modal); }
.tl-m-modal-tittel { margin: 0; font-size: var(--tl-fs-xl); font-weight: 700; line-height: 1.3; }
.tl-mobile .ui.hoved.modal .tl-m-stack > .tl-m-modal-tittel:first-child { margin-top: -50px; padding-right: 40px; }
/* Lite bilde foran en listerad (oppslagstavlen på Hjem) */
.tl-m-bilde { width: 40px; height: 40px; flex: none; border-radius: 10px; object-fit: cover; }
/* Opplysninger i en dialog: ledetekst over verdien, én rad per opplysning */
.tl-list-row.info { cursor: default; min-height: 0; }
.tl-list-row.info > .tl-list-body > .tl-list-title { font-size: var(--tl-fs-body); }

/* Knapper under hverandre nederst i en dialog (én primær øverst), og knapper ved siden av hverandre som brytes når det blir trangt */
.tl-m-handlinger { display: flex; flex-direction: column; gap: 10px; }
.tl-m-handlinger .ui.button, .tl-m-knapper > .ui.button { margin: 0; }
.tl-m-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-m-knapper > .ui.basic.button, .tl-m-knapper > .ui.primary.button { flex: 1 1 auto; }

/* Bryter i eget kort (mobil/06-tilgjengelighet.png): teksten står til venstre og bryteren til høyre */
.tl-m-bryter { padding: 14px 16px; }
.tl-mobile .ui.form .tl-m-bryter { margin-bottom: 16px; }
.tl-m-bryter .ui.toggle.checkbox { display: block; width: 100%; }
.tl-m-bryter .ui.toggle.checkbox label { padding: 3px 60px 0 0 !important; font-weight: 600; }
.tl-m-bryter .ui.toggle.checkbox label::before { left: auto; right: 0; }
.tl-m-bryter .ui.toggle.checkbox label::after { left: auto; right: 23px; transition: right var(--tl-dur) var(--tl-ease); }
.tl-m-bryter .ui.toggle.checkbox input:checked ~ label::after { left: auto; right: 3px; }
.tl-m-bryter .ui.toggle.checkbox input { left: auto; right: 0; }

/* Statusmerker i kort og under rader brytes over flere linjer når teksten er lengre enn kortet
   («Overlapper med vakten din på ...», «Bekreftelse sendt ...»). Korte merker ser ut som før.
   break-word (ikke anywhere), slik at et merke ved siden av annet innhold ikke klemmes ned til ett tegn i bredden */
.tl-mobile .tl-m-card .tl-status, .tl-mobile .tl-m-merker > .tl-status {
  max-width: 100%; white-space: normal; padding: 4px 10px; line-height: 1.3; overflow-wrap: break-word;
}

/* Lange ord uten mellomrom (lenker, e-postadresser, filnavn) brytes i stedet for å kuttes i skjermkanten (som .tl-innboks-tekst på web).
   Rader med ellipsis (white-space:nowrap) påvirkes ikke */
.tl-mobile .tl-list-body, .tl-mobile .tl-m-card, .tl-mobile .ui.accordion .content,
.tl-mobile .ui.hoved.modal .tl-m-stack { overflow-wrap: anywhere; }

/* Mappene i Dokumenter: undermappene står i trekkspillet til mappen over. Undermappene har ikke egen ramme og luft på sidene,
   slik at dokumentnavnene ikke blir smalere for hvert nivå. Nivået vises med innrykk på mappenavnet */
.tl-mobile #dokumenter_mapper .ui.styled.accordion .accordion { margin-top: 0; border: 0; border-radius: 0; box-shadow: none; }
.tl-mobile #dokumenter_mapper .ui.styled.accordion > .content { padding-left: 8px; padding-right: 8px; }
.tl-mobile #dokumenter_mapper .ui.styled.accordion .accordion > .content { padding-left: 0; padding-right: 0; }
.tl-mobile #dokumenter_mapper .ui.styled.accordion .accordion > .title:first-child { border-top: 1px solid var(--tl-divider); }
.tl-mobile #dokumenter_mapper .ui.styled.accordion .accordion > .title { padding-left: 28px; }
.tl-mobile #dokumenter_mapper .ui.styled.accordion .accordion .accordion > .title { padding-left: 40px; }
.tl-mobile #dokumenter_mapper .ui.styled.accordion .accordion .accordion .accordion > .title { padding-left: 52px; }

/* Tekstfelt uten rows eller egen høyde (Ny melding, Avvik, kommentarer). Felt med rows og Forslag (inline 192 px) beholder sin høyde */
.tl-mobile .ui.form textarea:not([rows]):not([style*="height"]) { height: 120px; min-height: 96px; }

/* Listen over chatrom får plass under den flytende knappen (56 px + 16 px), slik at det nederste rommet kan rulles fram.
   #chatrom har klassen active bare mens listen vises, så chatvinduet påvirkes ikke */
.tl-mobile #chatrom.active { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
/* Listen over chatrom står helt ut i skjermkanten, uten ramme rundt (etter ønske). Den negative margen tar igjen sideluften
   i .tl-m-content (20 px), og radene får den samme luften inn til profilbildet */
.tl-mobile #chat_rom_holder > .tl-list { margin: 0 -20px; border: 0; border-radius: 0; background: transparent; }
.tl-mobile #chat_rom_holder > .tl-list > .tl-list-row { padding-left: 20px; }

/* To felt ved siden av hverandre legges under hverandre på de smaleste skjermene (dato og klokkeslett i tilgjengelighet).
   Klokkefeltene (.tl-m-klokke) har korte verdier og står fortsatt side om side */
@media (max-width: 359px) {
  .tl-mobile .tl-m-to-felt:not(.tl-m-klokke) { flex-direction: column; gap: 0; }
}

/* Et åpent nedtrekk legger seg over de faste feltene nederst, slik at de nederste valgene ikke skjules.
   Tallet må være over .tl-tabbar (30) og .tl-m-actionbar (20). .visible er med, slik at menyen ikke havner bak feltet mens den lukkes */
.tl-mobile .tl-m-content .ui.dropdown.active, .tl-mobile .tl-m-content .ui.dropdown.visible { z-index: 31; }


/* ===== Tellur: tredjepart ===== */
/* Datovelger (jQuery datetimepicker) */
.xdsoft_datetimepicker {
  background: var(--tl-surface); border: 1px solid var(--tl-border-strong); border-radius: var(--tl-r-ctl);
  color: var(--tl-text); box-shadow: var(--tl-shadow-md); font-family: var(--tl-font);
}
.xdsoft_datetimepicker .xdsoft_label { background-color: var(--tl-surface); }
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { border-color: var(--tl-border-strong); background: var(--tl-surface); }
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { color: var(--tl-text); background: var(--tl-surface-3); }
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { background: var(--tl-primary); box-shadow: none; color: var(--tl-on-primary); }
.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  background: var(--tl-field); border-color: var(--tl-border); color: var(--tl-text); font-family: var(--tl-font);
}
.xdsoft_datetimepicker .xdsoft_calendar th { background: var(--tl-surface-2); color: var(--tl-muted); }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { border-color: var(--tl-border); }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: var(--tl-link); }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--tl-primary); box-shadow: none; color: var(--tl-on-primary);
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { color: var(--tl-primary-soft-text) !important; background: var(--tl-primary-soft) !important; }
.xdsoft_scrollbar > .xdsoft_scroller { background: var(--tl-border-strong) !important; }
/* Pilene og knappene er mørke bilder – gjøres lyse i mørkt */
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label i,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_prev,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_next,
html[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_today_button { filter: invert(1); }

/* Rullefelt og autofyll */
body ::-webkit-scrollbar-track { background: var(--tl-surface-3); }
body ::-webkit-scrollbar-thumb { background: var(--tl-border-strong); }
input:-webkit-autofill, .ui.form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--tl-field) inset !important; box-shadow: 0 0 0 100px var(--tl-field) inset !important;
  -webkit-text-fill-color: var(--tl-text) !important; border-color: var(--tl-border-strong) !important;
}


/* ===== Tellur: hardkodede farger i inline-stil og fra JavaScript (kun mørkt) ===== */
/* Treffer bare de etablerte skrivemåtene – bruk dem nøyaktig slik i kode som ennå ikke er bygd om */

/* Hvite og lysegrå flater */
html[data-theme="dark"] [style*="background-color: #f0f0f0" i] { background: var(--tl-surface-2) !important; }
html[data-theme="dark"] [style*="background-color:#fff" i] { background-color: var(--tl-surface) !important; }

html[data-theme="dark"] [style*="color:black" i]:not([style*="background-color:black" i]) { color: var(--tl-text) !important; }
html[data-theme="dark"] [style*="border-left: 1px solid white"],
html[data-theme="dark"] [style*="border-right: 1px solid white"] { border-color: var(--tl-surface) !important; }

/* Skjemavalidering fra JavaScript: felt.style.backgroundColor = "#fcc" og tilbake til "white" */
html[data-theme="dark"] [style*="background-color: rgb(255, 204, 204)"] { background-color: var(--tl-danger-bg) !important; }
html[data-theme="dark"] [style*="background-color: white"] { background-color: var(--tl-field) !important; }

/* Statusfarger i kalendere og ukesoversikter (settes som background-color:$farge i PHP) */
html[data-theme="dark"] .kalender_kolonne[style*="background-color:#ffffff" i] { background-color: transparent !important; }
html[data-theme="dark"] [style*="background-color:#99ccff" i] { background-color: #1f4e79 !important; }
html[data-theme="dark"] [style*="background-color:#ff6e6e" i] { background-color: #8a2e2e !important; }
html[data-theme="dark"] [style*="background-color:#7ade91" i] { background-color: #256b38 !important; }
html[data-theme="dark"] [style*="background-color:#bdbdbd" i] { background-color: #4a4d52 !important; }
html[data-theme="dark"] [style*="background-color:#afafaf" i] { background-color: #55585e !important; }
html[data-theme="dark"] [style*="background-color:#fff992" i] { background-color: #6b6420 !important; }
html[data-theme="dark"] [style*="background-color:#ffd3d3" i] { background-color: #5a3030 !important; }
html[data-theme="dark"] [style*="background-color: #fff6f6" i] { background-color: var(--tl-danger-bg) !important; color: var(--tl-danger-text) !important; }