:root{
  --navy:#113049; --navy2:#23557F; --gron:#3fb595; --lys:#4CBCCC;
  --blaek:#1c2430; --daemp:#5d6b7a; --linje:#dde3ea; --flade:#f5f7fa;
  --rod:#b3261e; --gul:#8a6100;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--flade); color:var(--blaek);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* Topbjælke */
.top{background:var(--navy);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.topinner{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{color:#fff;text-decoration:none;font-weight:600;letter-spacing:.2px;white-space:nowrap;display:flex;align-items:center;gap:10px}
.brand .logo{height:18px;width:auto;display:block}
.top nav{display:flex;gap:16px;flex-wrap:wrap;flex:1}
.top nav a{color:#cfdae6;text-decoration:none;font-size:14px;padding:3px 0;border-bottom:2px solid transparent}
.top nav a:hover{color:#fff;border-bottom-color:var(--gron)}
.udlog{display:flex;align-items:center;gap:12px;margin:0}
.hvem{font-size:13px;color:#9fb3c8}
button.link{background:none;border:0;color:#cfdae6;cursor:pointer;font-size:14px;padding:0;text-decoration:underline}
button.link:hover{color:#fff}

main{padding:44px 20px 40px}
/* .wrap (class) overrides main's padding (element), so the top air must be set on main.wrap. */
main.wrap{padding-top:44px}
h1{font-size:23px;margin:0 0 4px;color:var(--navy);font-weight:600}
h2{font-size:17px;margin:28px 0 10px;color:var(--navy);font-weight:600}
.under{color:var(--daemp);margin:0 0 22px;max-width:75ch}

/* Kort og gitre */
.kort{background:#fff;border:1px solid var(--linje);border-radius:8px;padding:18px 20px;margin-bottom:18px}
.gitter{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:8px}
.tal{background:#fff;border:1px solid var(--linje);border-radius:8px;padding:15px 17px}
.tal .n{font-size:27px;font-weight:600;color:var(--navy);line-height:1.15}
.tal .m{font-size:13px;color:var(--daemp);margin-top:3px}
.tal.advar{border-left:3px solid var(--gul)}
.tal.ok{border-left:3px solid var(--gron)}

/* Tabeller */
table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--linje);vertical-align:top}
th{background:#eef2f7;color:var(--navy);font-weight:600;font-size:13px;white-space:nowrap}
tbody tr:hover{background:#fafcfe}
td a{color:var(--navy2)}
.tabelboks{border:1px solid var(--linje);border-radius:8px;overflow:auto;margin-bottom:18px}
.tom{padding:22px;color:var(--daemp);background:#fff;text-align:center}

/* Mærkater */
.maerke{display:inline-block;padding:2px 8px;border-radius:11px;font-size:12px;font-weight:600;white-space:nowrap}
.k-A{background:#e4eefb;color:#1a4a80}
.k-B{background:#e2f4ee;color:#1d6b52}
.k-C{background:#eef0f3;color:#4a5562}
.s-afventer{background:#fdf1d8;color:var(--gul)}
.s-godkendt{background:#e2f4ee;color:#1d6b52}
.s-berigtiget{background:#e4eefb;color:#1a4a80}
.s-trukket{background:#fbe3e1;color:var(--rod)}
.flag{background:#fdf1d8;color:var(--gul)}

/* Formularer */
label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin:0 0 4px}
input[type=text],input[type=date],input[type=password],input[type=search],select,textarea{
  width:100%;padding:8px 10px;border:1px solid #c3ccd8;border-radius:5px;
  font:inherit;background:#fff;color:var(--blaek)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lys);outline-offset:-1px;border-color:var(--lys)}
textarea{min-height:74px;resize:vertical}
input[type=file]{font-size:13px}
.felt{margin-bottom:14px}
.raekke{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.hjaelp{font-size:12.5px;color:var(--daemp);margin-top:4px}
.afkryds{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--blaek)}
.afkryds input{margin-top:3px;flex:0 0 auto;width:auto}

button,.knap{
  background:var(--navy);color:#fff;border:0;border-radius:5px;padding:9px 17px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block
}
button:hover,.knap:hover{background:var(--navy2)}
button.gron{background:var(--gron)} button.gron:hover{background:#34a184}
button.stille,.knap.stille{background:#fff;color:var(--navy);border:1px solid #c3ccd8}
button.stille:hover,.knap.stille:hover{background:#eef2f7}
button.fare{background:#fff;color:var(--rod);border:1px solid #e3b8b4}
button.fare:hover{background:#fdf0ef}
.knapper{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* Beskeder */
.besked{padding:11px 15px;border-radius:6px;margin-bottom:16px;font-size:14px}
.besked.ok{background:#e2f4ee;color:#155c45;border:1px solid #b6e0d0}
.besked.fejl{background:#fbe3e1;color:#8c1d16;border:1px solid #edc0bc}
.besked.info{background:#e7eef6;color:#113049;border:1px solid #c3d3e6}
.besked.info a{color:inherit;font-weight:600}

/* Diverse */
.noegler{display:grid;grid-template-columns:190px 1fr;gap:9px 18px;font-size:14px;margin:0}
.noegler dt{color:var(--daemp);font-size:13px}
.noegler dd{margin:0}
.bund{color:var(--daemp);font-size:12.5px;padding-bottom:30px;max-width:80ch;text-align:center;line-height:1.7}
.filter{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));align-items:end}
.historik{list-style:none;padding:0;margin:0;font-size:13.5px}
.historik li{padding:6px 0;border-bottom:1px solid var(--linje);color:var(--daemp)}
.historik li b{color:var(--blaek);font-weight:600}
.lille{font-size:12.5px;color:var(--daemp)}
.login{max-width:370px;margin:9vh auto}
.login .kort{padding:26px}
.login h1{text-align:center;margin-bottom:22px}
.advarselsboks{background:#fdf9ef;border:1px solid #e8d9b4;border-left:3px solid var(--gul);
  border-radius:6px;padding:13px 16px;font-size:13.5px;margin-bottom:18px}
@media (max-width:720px){
  .noegler{grid-template-columns:1fr;gap:2px 0}
  .noegler dd{margin-bottom:9px}
  .topinner{gap:12px}
}

/* Login med Microsoft Entra ID og engangskode */
.knap.entra {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: .7rem 1rem;
  border-radius: 6px;
  background: #113049;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.knap.entra:hover { background: #17415f; }
.skillelinje {
  position: relative;
  text-align: center;
  margin: 1.2rem 0;
  color: #6b7a86;
  font-size: .85rem;
}
.skillelinje::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid #dfe5ea;
}
.skillelinje span { position: relative; background: #f4f6f8; padding: 0 .7rem; }
.noegle {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: .05em;
  background: #f0f3f5;
  border: 1px solid #dfe5ea;
  border-radius: 6px;
  padding: .6rem .7rem;
  word-break: break-all;
  user-select: all;
}

/* Indledende gennemgang */
.kort.gennemgang { border-left: 4px solid #6b7a86; }
.resultat { margin-top: 1rem; }
.resultat pre.raa {
  white-space: pre-wrap;
  font-size: .85rem;
  background: #f0f3f5;
  border: 1px solid #dfe5ea;
  border-radius: 6px;
  padding: .6rem .7rem;
}
tr.g-problem td { background: #fff4f2; }
tr.g-kan-ikke-vurderes td { background: #fffbea; }