/* As-is portal — Fællesitdrift Midtjylland
   Ét brandfarve-system: coral i fuld styrke og som tints, varme neutraler.
   Kontrastværdier er valgt så tekst holder AA; coral til hvid tekst er den
   mørke variant, brandfarven selv bruges kun til flader og mærker. */

:root {
  --grund:        #faf9f7;
  --flade:        #ffffff;
  --flade-2:      #f4f2ee;
  --blaek:        #1c1a19;
  --daempet:      #625d58;   /* 5,9:1 på grund — brødtekst i det små */
  --svag:         #767069;   /* 4,7:1 — etiketter, aldrig løbende tekst */
  --linje:        #e4e2de;
  --linje-fin:    #efede9;

  --coral:        #e4685a;   /* brandfarve: flader og mærker */
  --coral-tekst:  #b8412f;   /* 6,3:1 på grund — tekst og knapper */
  --coral-60:     #ee9a90;
  --coral-28:     #f7cdc8;
  --coral-svag:   #fdf3f1;
  --tom:          #e8e6e2;

  --maks:         1264px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--blaek);
  font-family: 'Schibsted Grotesk', system-ui, 'Segoe UI', sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--coral-tekst); text-decoration: none; }
a:hover { color: var(--blaek); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--coral-tekst); outline-offset: 2px;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
        font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- struktur */

.ramme { max-width: var(--maks); margin: 0 auto; padding: 0 44px; }

.masthead { display: flex; align-items: center; justify-content: space-between;
            gap: 40px; padding: 24px 0 22px; }
.masthead .venstre { display: flex; align-items: center; gap: 20px; }
.masthead img { width: 168px; height: auto; display: block; }
.skel { width: 1px; height: 38px; background: var(--linje); }
.kontekst { display: flex; flex-direction: column; gap: 3px; }
.kontekst .over { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
                  letter-spacing: 0.17em; text-transform: uppercase; color: var(--svag); }
.kontekst .titel { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }

.bruger { display: flex; align-items: center; gap: 10px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--blaek);
          color: var(--grund); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
          display: flex; align-items: center; justify-content: center; }

nav.faner { display: flex; align-items: center; gap: 28px;
            border-top: 1.5px solid var(--blaek); border-bottom: 1px solid var(--linje); }
nav.faner a { padding: 13px 0; font-size: 14px; color: var(--daempet);
              border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.faner a:hover { color: var(--blaek); text-decoration: none; }
nav.faner a.aktiv { color: var(--blaek); font-weight: 600; border-bottom-color: var(--coral); }
nav.faner .hoejre { margin-left: auto; display: flex; align-items: center; gap: 14px;
                    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--svag); }

h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.025em; }
h3 { margin: 0; font-size: 15px; font-weight: 600; }
p  { margin: 0; }

.sektion { margin-top: 34px; }
.sektion > .hoved { display: flex; align-items: flex-end; justify-content: space-between;
                    gap: 24px; padding-bottom: 10px; }

/* ---------------------------------------------------------- beskeder */

.besked { display: flex; align-items: center; gap: 11px; padding: 12px 15px; margin-top: 14px;
          border-left: 3px solid var(--coral); background: var(--coral-svag); font-size: 14px; }
.besked.fejl { border-left-color: var(--blaek); background: var(--flade-2); }

.adgangslinje { display: flex; align-items: center; gap: 12px; padding: 15px 0 0; font-size: 13.5px; }
.adgangslinje .prik { width: 8px; height: 8px; flex: none; background: var(--coral); }

/* ---------------------------------------------------------- nøgletal */

.noegletal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
             margin-top: 22px; border-top: 1px solid var(--linje); }
.noegletal > div { padding: 20px 26px; border-right: 1px solid var(--linje); }
.noegletal > div:first-child { padding-left: 0; }
.noegletal > div:last-child { border-right: 0; padding-right: 0; }
.noegletal .tal { font-size: 44px; font-weight: 700; letter-spacing: -0.045em;
                  line-height: 1; font-variant-numeric: tabular-nums; }
.noegletal .tal small { font-size: 22px; color: var(--svag); font-weight: 400; }
.noegletal .under { margin-top: 8px; font-size: 13px; color: var(--daempet); }

/* ---------------------------------------------------------- register */

.register { width: 100%; }
.register .hovedraekke,
.register .raekke { display: grid; align-items: center;
                    grid-template-columns: 34px 1fr 250px 84px 128px; }
.register .hovedraekke { padding-bottom: 9px; border-bottom: 1.5px solid var(--blaek); }
.register .hovedraekke span { font-family: 'IBM Plex Mono', monospace; font-size: 10px;
                              letter-spacing: 0.1em; text-transform: uppercase; color: var(--svag); }
.register .raekke { height: 40px; border-bottom: 1px solid var(--linje-fin); }
.register .raekke.laast { opacity: 0.55; }
.register .raekke.egen .navn { font-weight: 700; }
.register .navn { font-size: 16px; letter-spacing: -0.015em; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.register .stribe { display: flex; gap: 2px; height: 11px; }
.register .stribe span { flex: 1; }
.register .hoejre { text-align: right; }

.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.legende i { display: inline-block; width: 18px; height: 9px; }
.legende span { font-size: 12px; color: var(--daempet); }

/* statusfarver — intensitet i brandfarven, aldrig farve alene som betydning */
.s-godkendt    { background: var(--coral); }
.s-indsendt    { background: var(--coral-60); }
.s-retur       { background: var(--coral-28); }
.s-kladde      { background: var(--coral-28); }
.s-ikke_startet{ background: var(--tom); }

.mærke { font-size: 12.5px; }
.mærke.m-godkendt     { color: var(--coral-tekst); font-weight: 600; }
.mærke.m-indsendt     { color: var(--blaek); }
.mærke.m-kladde       { color: var(--daempet); }
.mærke.m-retur        { color: var(--coral-tekst); }
.mærke.m-ikke_startet { color: var(--svag); }

/* ---------------------------------------------------------- lister */

.liste .post { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
               border-bottom: 1px solid var(--linje-fin); }
.liste .post .prik { margin-top: 5px; width: 7px; height: 7px; flex: none; background: var(--coral); }
.liste .post .ts { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
                   color: var(--svag); width: 88px; flex: none; }
.liste .post .lille { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--svag); }
.to-spalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px; }

/* ---------------------------------------------------------- formular */

.felt { display: flex; flex-direction: column; gap: 9px; padding: 20px 0;
        border-bottom: 1px solid var(--linje-fin); }
.felt .etiket { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.felt .nr { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--svag); }
.felt label.navn { font-size: 15px; font-weight: 600; }
.felt .krav { font-size: 11px; color: var(--coral-tekst); font-weight: 600; }
.felt .hjaelp { font-size: 12.5px; color: var(--daempet); max-width: 68ch; }
.felt .enhed { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--svag); }

input[type=text], input[type=number], input[type=date], input[type=password],
select, textarea {
  font-family: inherit; font-size: 14.5px; color: var(--blaek);
  background: var(--flade); border: 1px solid #d9d5d0; border-radius: 0;
  padding: 11px 13px; width: 100%; max-width: 520px;
}
textarea { min-height: 84px; max-width: 760px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { background: var(--flade-2); color: var(--daempet); }

.valgrække { display: flex; flex-wrap: wrap; gap: 8px; }
.valgrække label { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px;
                   background: var(--flade); border: 1px solid #d9d5d0; font-size: 13.5px;
                   color: var(--daempet); cursor: pointer; }
.valgrække input { position: absolute; opacity: 0; width: 0; height: 0; }
.valgrække label:has(input:checked) { background: var(--blaek); border-color: var(--blaek); color: var(--flade); }
.valgrække label .kugle { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #b5b0ab; }
.valgrække label:has(input:checked) .kugle { background: var(--coral); border-color: var(--coral); }

.vedikke { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--daempet); }

.knapper { display: flex; align-items: center; gap: 10px; }
.knap { font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
        height: 42px; padding: 0 20px; border: 1px solid var(--blaek);
        background: var(--grund); color: var(--blaek); border-radius: 0; }
.knap:hover { background: var(--flade-2); }
.knap.primær { background: var(--coral-tekst); border-color: var(--coral-tekst);
               color: #ffffff; font-weight: 600; }
.knap.primær:hover { background: #9d3626; }
.knap.lille { height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------------------------------------------------------- tabel */

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
     text-transform: uppercase; color: var(--svag); text-align: left; font-weight: 500;
     padding: 10px 12px 9px; border-bottom: 1.5px solid var(--blaek); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--linje-fin); vertical-align: baseline; }
td.tal, th.tal { text-align: right; font-family: 'IBM Plex Mono', monospace;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 1.5px solid var(--blaek); }

.katalogliste a { display: flex; align-items: center; gap: 12px; padding: 11px 0;
                  border-bottom: 1px solid var(--linje-fin); color: var(--blaek); }
.katalogliste a:hover { text-decoration: none; background: var(--flade-2); }
.katalogliste a.aktiv { background: var(--blaek); color: var(--grund); padding-left: 12px;
                        padding-right: 12px; margin: 0 -12px; border-bottom-color: var(--blaek); }
.katalogliste a.aktiv .nr { color: var(--coral-60); }
.katalogliste .nr { font-family: 'IBM Plex Mono', monospace; font-size: 11px;
                    color: var(--svag); width: 30px; flex: none; }
.katalogliste .tekst { flex: 1; font-size: 14px; }
.katalogliste .tal { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--svag); }

.fordeling { display: flex; height: 30px; gap: 2px; margin-bottom: 12px; }
.fordeling div { display: flex; align-items: center; padding-left: 10px; min-width: 26px;
                 font-size: 12.5px; font-weight: 600; }

.filterlinje { display: flex; align-items: center; gap: 10px; padding: 16px 0 20px; }
.filterlinje select { max-width: 260px; }

/* ---------------------------------------------------------- login */

body.login-side { display: flex; align-items: center; justify-content: center;
                  min-height: 100vh; background: var(--grund); }
.login-kort { width: 100%; max-width: 420px; padding: 0 24px; }
.login-kort img { width: 200px; margin-bottom: 30px; }
.login-kort h1 { font-size: 26px; margin-bottom: 6px; }
.login-kort .under { color: var(--daempet); font-size: 14px; margin-bottom: 26px; }
.login-kort .felt { border-bottom: 0; padding: 0 0 16px; }
.login-kort input { max-width: none; }
.login-kort .knap { width: 100%; justify-content: center; }
.demo { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linje);
        font-size: 12.5px; color: var(--daempet); line-height: 1.7; }

footer.bund { margin-top: 46px; padding: 18px 0 40px; border-top: 1px solid var(--linje);
              font-size: 12.5px; color: var(--svag); display: flex;
              justify-content: space-between; gap: 20px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .ramme { padding: 0 18px; }
  .noegletal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noegletal > div { padding: 16px; border-right: 0; border-bottom: 1px solid var(--linje); }
  .to-spalter { grid-template-columns: 1fr; gap: 28px; }
  .register .hovedraekke, .register .raekke { grid-template-columns: 26px 1fr 110px 60px; }
  .register .hovedraekke span:last-child, .register .raekke > *:last-child { display: none; }
}