/* Audit Envoy — administrationsflade til kontrolplanet (F005).
 *
 * Nøgternt og læsbart. Det er et driftsværktøj til én person, ikke en kundeflade.
 * Ingen webfonte, ingen CDN, ingen JavaScript — alt hentes fra samme oprindelse.
 *
 * REGEL: farve er ALDRIG den eneste bærer af en status. Hvert mærkat indeholder
 * ordet; farven gentager det. Et driftsværktøj skal kunne læses i gråtoner, i sollys
 * og af en der ikke skelner rødt fra grønt.
 */

:root {
    --bg: #ffffff;
    --bg2: #f6f6f4;
    --bg3: #ecece8;
    --tekst: #1b1b1a;
    --daempet: #5c5c58;
    --kant: #cfcfc9;
    --ok-bg: #e7f2e7;      --ok-kant: #3f7a41;   --ok-tekst: #1e4a20;
    --advar-bg: #fdf3e0;   --advar-kant: #a06d12; --advar-tekst: #6a4708;
    --fejl-bg: #fbeaea;    --fejl-kant: #9d2f2f;  --fejl-tekst: #6d1d1d;
    --neutral-bg: #eeeeea; --neutral-kant: #9a9a94;
    --link: #12457a;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg2);
    color: var(--tekst);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--link); }
a:hover { text-decoration: none; }

/* ------------------------------------------------------------------ ramme */

header.top {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    padding: 10px 20px;
    background: #22262b;
    color: #f2f2ee;
    border-bottom: 3px solid #11141a;
}
header.top a { color: #cfe0f2; text-decoration: none; margin-right: 18px; }
header.top a:hover { text-decoration: underline; }
header.top .maerke { font-size: 16px; }
header.top nav { flex: 1 1 auto; }
header.top .bruger { margin-left: auto; font-size: 13px; color: #cfcfc9; }

main {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
}

footer {
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 20px 40px;
    color: var(--daempet);
    font-size: 12px;
}

h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 17px; margin: 28px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--kant); }
h3 { font-size: 15px; margin: 20px 0 6px; }

p.krumme { margin: 0 0 6px; font-size: 13px; color: var(--daempet); }
p.lille, .lille { font-size: 12.5px; color: var(--daempet); }
.fejltekst { color: var(--fejl-tekst); }
.paakraevet { color: var(--daempet); font-weight: normal; font-size: 12px; }

.mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
}

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

.besked {
    padding: 10px 12px;
    margin: 10px 0;
    border-left: 5px solid var(--neutral-kant);
    background: var(--neutral-bg);
    border-radius: 2px;
}
.besked.ok       { background: var(--ok-bg);     border-left-color: var(--ok-kant);     color: var(--ok-tekst); }
.besked.advarsel { background: var(--advar-bg);  border-left-color: var(--advar-kant);  color: var(--advar-tekst); }
.besked.fejl     { background: var(--fejl-bg);   border-left-color: var(--fejl-kant);   color: var(--fejl-tekst); }

.note {
    background: var(--bg);
    border: 1px solid var(--kant);
    padding: 4px 16px 12px;
    margin: 24px 0;
    border-radius: 2px;
}
.note h2 { border: 0; margin-top: 12px; }
.note pre { background: var(--bg3); padding: 8px 10px; overflow-x: auto; border-radius: 2px; }

/* ------------------------------------------------------------- mærkater */

.maerkat {
    display: inline-block;
    padding: 1px 7px;
    margin: 1px 0;
    border: 1px solid var(--neutral-kant);
    border-radius: 2px;
    background: var(--neutral-bg);
    font-size: 12px;
    white-space: normal;
}
.maerkat.ok         { background: var(--ok-bg);    border-color: var(--ok-kant);    color: var(--ok-tekst); }
.maerkat.opmaerksom { background: var(--advar-bg); border-color: var(--advar-kant); color: var(--advar-tekst); }
.maerkat.kritisk    { background: var(--fejl-bg);  border-color: var(--fejl-kant);  color: var(--fejl-tekst);
                      font-weight: 600; }

/* --------------------------------------------------------------- tabeller */

.rul { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg);
    border: 1px solid var(--kant);
    margin: 8px 0 16px;
}
th, td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--kant);
}
thead th {
    background: var(--bg3);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
/* Tal højrestilles — altid. */
th.tal, td.tal { text-align: right; font-variant-numeric: tabular-nums; }

tr.raekke-kritisk    > td { background: var(--fejl-bg); }
tr.raekke-opmaerksom > td { background: var(--advar-bg); }
tr.noter > td { background: var(--bg3); }
tr.noter ul { margin: 4px 0; padding-left: 20px; }
tr.noter li { font-size: 12.5px; }

/* ------------------------------------------------------------ definitioner */

dl.stam {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 16px;
    background: var(--bg);
    border: 1px solid var(--kant);
    padding: 12px 14px;
    margin: 8px 0;
}
dl.stam dt { color: var(--daempet); font-size: 12.5px; }
dl.stam dd { margin: 0; }

/* -------------------------------------------------------------- formularer */

form.smal { max-width: 460px; background: var(--bg); border: 1px solid var(--kant); padding: 14px 16px; }
form.raekkeform {
    display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end;
    background: var(--bg); border: 1px solid var(--kant); padding: 12px 14px; margin: 8px 0;
}
form.inline { display: inline; }

label { display: block; margin: 10px 0 3px; font-size: 13px; color: var(--daempet); }
form.raekkeform label { margin-top: 0; }

input[type=text], input[type=email], input[type=password], select {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--kant);
    border-radius: 2px;
    background: var(--bg);
    color: var(--tekst);
    font: inherit;
}
form.raekkeform input, form.raekkeform select { width: auto; min-width: 220px; }

button {
    margin-top: 12px;
    padding: 7px 14px;
    border: 1px solid #2c3b4d;
    border-radius: 2px;
    background: #2f3f52;
    color: #fff;
    font: inherit;
    cursor: pointer;
}
button:hover { background: #3c5069; }
form.raekkeform button, form.inline button { margin-top: 0; }
button.fare { background: #7e2b2b; border-color: #6a2222; }
button.fare:hover { background: #943737; }
button.link {
    background: none; border: 0; color: #cfe0f2; padding: 0; margin: 0;
    text-decoration: underline; cursor: pointer; font-size: 13px;
}

@media (max-width: 720px) {
    dl.stam { grid-template-columns: 1fr; }
    header.top { flex-direction: column; align-items: flex-start; }
    header.top .bruger { margin-left: 0; }
}