/* Fælles stil for prototypen, bygget på WeZimplify-designsystemet (assets/wez/wezimplify.css + looks/soft.css).
   Alle farver, fonte, radier og skygger kommer fra systemets tokens; de gamle navne (--brand, --line, --surface ...)
   peger på tokens, så sidernes egne stylesheets under css/pages/ virker uændret.
   Brandregler, der gælder her: Faustina til alt læsbart, Sometype Mono til labels, tags og tal; ét lime-element pr.
   side (knappen med klassen .accent); hairlines, ikke skygger; sentence case. */
:root, [data-look="soft"] {
  --bg: var(--surface-page);
  --surface: var(--surface-card);
  --text: var(--text-body);
  --muted: var(--text-muted);
  --line: var(--border-subtle);
  --line-strong: var(--border-hairline);
  /* Brandblå som blæk og fyld: navy i lys, bleg i mørk (systemets lyse primærknap på navy); --on-brand er teksten på fyldet. */
  --brand: light-dark(var(--wz-blue), var(--wz-blue-800));
  --brand-hover: var(--wz-blue-700);
  --on-brand: light-dark(var(--text-inverse), var(--wz-blue));
  --accent: var(--wz-lime);
  --warn: var(--status-warning);
  --warn-bg: color-mix(in srgb, var(--status-warning) 12%, var(--surface-card));
  --error: var(--status-danger);
  --error-bg: color-mix(in srgb, var(--status-danger) 10%, var(--surface-card));
  --ok: var(--status-success);
  --ok-bg: color-mix(in srgb, var(--status-success) 12%, var(--surface-card));
  --unknown: var(--wz-blue-600);
  --unknown-bg: var(--wz-blue-100);
  --info-bg: color-mix(in srgb, var(--status-info) 12%, var(--surface-card));
  --radius: var(--radius-card);
  --radius-ctl: var(--radius-control);
  --mono: var(--font-mono);
}
body { min-height: 100vh; }
h1 { font-size: var(--fs-3xl); margin: 0 0 var(--space-2); }
h2 { font-size: var(--fs-xl); margin: var(--space-6) 0 var(--space-2); }
h3 { font-size: var(--fs-lg); margin: var(--space-5) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
.muted { color: var(--muted); }
.lead { font: var(--type-lead); color: var(--muted); max-width: 46rem; margin-bottom: var(--space-5); }
.src, code { font-family: var(--mono); font-size: .8em; }

/* Topbar: hvid flade med hairline, logoet som artwork, siderne som mono-labels */
/* Topbar: mærke til venstre, siderne centreret, tema til højre */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--space-6); background: var(--surface-card); border-bottom: 1px solid var(--line); }
.topbar-hoejre { justify-self: end; display: flex; align-items: center; gap: var(--space-3); }
.topbar .brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-heading); }
/* Linkas logo er rødt med hvid tekst: på den mørke flade får det en hvid flise, så "ENERGY" og "a part of LINKA group" kan læses */
.brand-linka { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 8px; background: light-dark(transparent, #fff); }
.brand-linka img { display: block; height: 34px; width: auto; }
.brand-wez { display: grid; gap: 1px; }
.brand-powered { font: var(--type-label); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.brand-logo { height: 18px; width: auto; display: block; }
.log-ud { font: var(--type-label); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); text-decoration: none; }
.log-ud:hover { color: var(--text-heading); }

/* Login: Linka Energy som afsender på en navy scene til venstre, formularen til højre, WeZ som "powered by".
   Alt, der bevæger sig, er fade og små forskydninger; slået fra ved prefers-reduced-motion. */
main.page.page-login { padding: 0; max-width: none; margin: 0; min-height: 100vh; display: grid; }
.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.login-scene { position: relative; overflow: hidden; background: light-dark(var(--wz-blue), var(--surface-card)); color: #fff; display: grid; place-items: center; padding: var(--space-10); }
.login-scene-indre { position: relative; z-index: 1; display: grid; justify-items: center; }
/* Partnerskab: Linka × WeZimplify, side om side i samme højde */
.login-partner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; justify-content: center; animation: login-ind .7s var(--ease-out) both; }
.login-logo-flise { width: max-content; padding: var(--space-4) var(--space-5); background: #fff; border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.login-logo-flise img { display: block; height: 88px; width: auto; }
.login-x { font-family: var(--mono); font-size: 2rem; font-weight: 300; color: var(--wz-lime); line-height: 1; }
.login-wez { display: block; height: 40px; width: auto; }

.login-side { display: grid; place-items: center; padding: var(--space-10) var(--space-6); background: var(--bg); }
.login-form { width: min(24rem, 100%); display: grid; gap: var(--space-4); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-8); box-shadow: var(--shadow-lg); animation: login-ind .6s .18s var(--ease-out) both; }
.login-logo-lille { display: none; height: 56px; width: auto; }
.login-h2 { margin: 0; font-size: var(--fs-2xl); color: var(--text-heading); }
.login-hjaelp { margin: calc(-1 * var(--space-2)) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.login-fejl { margin: 0; animation: login-ryst .4s var(--ease-out); }
.login-felt { margin: 0; }
.login-felt input { transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.login-felt input:focus { box-shadow: 0 0 0 4px var(--wz-lime-100); outline: none; border-color: var(--wz-lime-500); }
.login-kode { position: relative; }
.login-kode input { padding-right: 3rem; }
.login-vis { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; min-height: 0; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
.login-vis:hover, .login-vis[aria-pressed="true"] { color: var(--text-heading); background: var(--surface-subtle); border-color: transparent; }
.login-knap { position: relative; width: 100%; margin-top: var(--space-2); min-height: 2.9rem; font-size: var(--fs-md); font-weight: var(--fw-medium); overflow: hidden; transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.login-knap:hover { transform: translateY(-1px); }
.login-knap:active { transform: translateY(0); }
.login-knap-venter { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.login-knap-venter::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(23,40,63,.25); border-top-color: var(--wz-blue); animation: login-snur .8s linear infinite; }
.login-knap.venter .login-knap-tekst { opacity: 0; }
.login-knap.venter .login-knap-venter { opacity: 1; }
.login-fod-tekst { margin: 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }

/* Ud af siden: formularen glider lidt op og toner ud, scenen bliver stående, så næste side kan tone ind ovenpå */
.login-ud .login-form { opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--ease-standard), transform .35s var(--ease-standard); }
.login-ud .login-scene-indre { opacity: .6; transition: opacity .35s var(--ease-standard); }

@keyframes login-ind { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes login-snur { to { transform: rotate(360deg); } }
@keyframes login-ryst { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-scene { display: none; }
  .login-side { padding: var(--space-8) var(--space-4); align-items: start; }
  .login-logo-lille { display: block; justify-self: center; }
}

/* Sideskift: browseren toner mellem siderne (cross-document view transition), og hver side glider ind */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: login-fade-ud .25s var(--ease-standard) both; }
::view-transition-new(root) { animation: login-fade-ind .35s var(--ease-out) both; }
@keyframes login-fade-ud { to { opacity: 0; } }
@keyframes login-fade-ind { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .login-partner, .login-form, .login-fejl { animation: none; }
  .login-ud .login-form, .login-ud .login-scene-indre { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand-logo { filter: invert(1) brightness(1.1); } }
.brand-sep { width: 1px; height: 22px; background: var(--line-strong); }
.brand-name { font: var(--type-h3); font-size: var(--fs-md); }
.brand-tag { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.topbar nav { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: center; }
.topbar nav a { font: var(--type-label); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-body); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-ctl); border: 1px solid transparent; }
.topbar nav a:hover { background: var(--surface-subtle); color: var(--text-heading); }
.topbar nav a[aria-current="page"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
/* Tema: ét lille segmenteret valg, Auto i midten */
.tema { display: inline-flex; gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface-subtle); }
.tema button { font: var(--type-label); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; min-height: 0; padding: .2rem .55rem; background: transparent; border: 0; border-radius: var(--radius-full); color: var(--muted); }
.tema button:hover { background: var(--surface-card); color: var(--text-heading); }
.tema button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

.page { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-24); }
@media (max-width: 600px) { .page { padding: var(--space-5) var(--space-4) var(--space-16); } .topbar { grid-template-columns: 1fr auto; padding: var(--space-3) var(--space-4); gap: var(--space-3); } .topbar nav { grid-column: 1 / -1; justify-content: flex-start; } .topbar .tema { grid-row: 1; grid-column: 2; } }

/* Kort og paneler: hvid på den blege side, hairline, lookets runding, ingen løft */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: border-color var(--dur-fast) var(--ease-standard); }
.card:hover { border-color: var(--border-strong); }
.card-nr { font: var(--type-label); letter-spacing: var(--ls-label); color: var(--muted); }
.card h2 { margin: var(--space-2) 0 var(--space-2); }
.card p { margin: 0; color: var(--muted); }
body[data-page="home"] .cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); max-width: 56rem; }
body[data-page="home"] .card { padding: var(--space-8); min-height: 13rem; }
body[data-page="home"] .card h2 { font-size: var(--fs-2xl); }
body[data-page="home"] .card p { font-size: var(--fs-md); }
.home-feedback { margin-top: var(--space-6); max-width: 60rem; color: var(--muted); }
.home-feedback strong { color: var(--text-heading); }

/* Nøgletal: fælles for herd og register; venstrekanten bærer niveauet */
.kpi { border: 1px solid var(--line); border-left-width: 4px; border-radius: 6px; padding: .5rem .7rem; background: var(--surface); min-width: 0; }
.kpi-t { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.kpi-v { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; margin: .1rem 0; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-e { font-size: .85rem; font-weight: 500; color: var(--muted); }
.kpi-s { font-size: .78rem; color: var(--muted); }
.kpi.kpi-ok { border-left-color: var(--ok); }
.kpi.kpi-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.kpi.kpi-error { border-left-color: var(--error); background: var(--error-bg); }
.kpi.kpi-unknown { border-left-color: var(--unknown); background: var(--unknown-bg); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow-card); }
.grid-2 { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .panel { padding: var(--space-4); border-radius: calc(var(--radius) * .7); } }

/* Formularer: labels i mono som i brandet, felter som lookets bløde fyldte felter */
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field > label, .skema-felt > label { font: var(--type-label); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-heading); }
.field > label .skema-en, .field > label .tag { text-transform: none; letter-spacing: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
legend { font: var(--type-h3); font-size: var(--fs-md); color: var(--text-heading); padding: 0; margin-bottom: var(--space-3); }
.field .hint, .hint { font: var(--type-small); color: var(--muted); }
input[type="number"], input[type="text"], input[type="search"], input[type="password"], select, textarea {
  font: var(--type-body); font-size: var(--fs-md); color: var(--text-body); background-color: var(--surface-card); padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-ctl); width: 100%; min-height: 2.5rem;
}
input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317283F' stroke-width='1.5' stroke-linecap='square'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right .9rem center; }
[data-theme="dark"] select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D3E4FF' stroke-width='1.5' stroke-linecap='square'><path d='M6 9l6 6 6-6'/></svg>"); }
textarea { border-radius: 20px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--border-strong); }
.field.invalid input, .field.invalid select { border-color: var(--error); }
.unit { color: var(--muted); font: var(--type-small); font-family: var(--mono); text-transform: none; letter-spacing: 0; }

button, .btn { font: var(--type-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); padding: var(--space-2) var(--space-5); border-radius: var(--radius-ctl); border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
button:hover, .btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
button.secondary, .btn.secondary { background: var(--surface-card); color: var(--brand); border-color: var(--border-strong); }
button.secondary:hover, .btn.secondary:hover { background: var(--wz-blue-050); color: var(--brand); }
button.accent, .btn.accent { background: var(--wz-lime); border-color: var(--wz-lime); color: var(--text-on-lime); }
button.accent:hover, .btn.accent:hover { background: var(--wz-lime-500); border-color: var(--wz-lime-500); color: var(--text-on-lime); }
button:disabled { opacity: .45; cursor: default; }
[hidden] { display: none !important; }
button:disabled:hover { background: var(--brand); border-color: var(--brand); }
button.secondary:disabled:hover { background: var(--surface-card); }

/* Mobil: alt, der kan trykkes på, er mindst 44 px højt; lange ord i tabeller brydes i stedet for at give vandret scroll */
@media (max-width: 600px) {
  button, .btn, .topbar nav a, select, input[type="number"], input[type="text"], input[type="search"] { min-height: 44px; }
  .tema button { min-height: 36px; }
  .topbar nav a { display: inline-flex; align-items: center; }
  td, th { overflow-wrap: anywhere; }
}

/* Tabeller: hairlines, mono i overskrifter og tal */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); background: var(--surface-card); position: sticky; top: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr.changed td { background: var(--wz-lime-100); transition: background var(--dur-slow) var(--ease-out); }

/* Advarsler og markeringer: statusfarve som kant, blød tonet flade */
.alert { border-radius: 14px; padding: var(--space-3) var(--space-4); margin: var(--space-2) 0; border: 1px solid var(--line); border-left: 3px solid; font-size: var(--fs-sm); background: var(--surface-subtle); }
.alert-error { background: var(--error-bg); border-left-color: var(--error); }
.alert-warn { background: var(--warn-bg); border-left-color: var(--warn); }
.alert-info { background: var(--info-bg); border-left-color: var(--status-info); }
.alert-unknown { background: var(--unknown-bg); border-left-color: var(--unknown); }
.alert-ok { background: var(--ok-bg); border-left-color: var(--ok); }
.alert .src { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.tag { display: inline-block; font: var(--type-label); font-size: .66rem; letter-spacing: var(--ls-label); text-transform: uppercase; padding: .12rem .5rem; border-radius: var(--radius-full); vertical-align: middle; }
.tag-unknown { background: var(--unknown-bg); color: var(--wz-blue-800); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-error { background: var(--error-bg); color: var(--error); }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-factor { background: var(--surface-sky); color: var(--brand); }