/* vLab - hubsidene (page.html og sidene som arver den). Arbeidsstrøm A1.
 *
 * Bygger på tokenene og komponentene i vlab.css og legger til:
 *  1. topplinje-tillegg: miljømerke, brukernavn, mobilmeny
 *  2. sideoppsett: kompakt sidehode, celle-lister med [n]-margen
 *  3. en liten shim for Bootstrap-klassene som stock-malene og stock-JS
 *     bruker (.hidden, .container, .alert, .form-control ...), siden vi
 *     ikke laster Bootstrap-CSS på vanlige sider (den kolliderer med .btn,
 *     .card, .badge og .table i vlab.css)
 *  4. Mitt vLab, token, feilsider, utlogging, deling
 *  5. admin: React-admin bruker Bootstrap, vi kobler Bootstrap-variablene
 *     til vLab-tokenene i stedet for å overstyre komponentene
 *
 * Bare tokens, ingen hardkodede farger (unntak: .on-hero-mønsteret fra
 * vlab.css, der bakgrunnen alltid er SINTEF-blå).
 */

/* ---------- 0. små tillegg til vlab.css ---------- */
.vlab .brand-name{white-space:nowrap}
.vlab a.vl-brand{color:var(--heading)}
.vlab .vl-hero .nb :focus-visible,.vlab .vl-hero .chat-msg :focus-visible{outline-color:var(--focus)}

/* ---------- 1. topplinje ---------- */
.vlab body{min-height:100vh;display:flex;flex-direction:column}
.vlab main{display:block;flex:1 0 auto}
.vlab .vl-foot{flex:none}
.vlab main:focus{outline:none}
.vl-env{font-family:var(--mono);font-weight:400;font-size:.72rem;padding:2px 6px;margin-left:4px;vertical-align:1px}
.vl-login{display:flex;align-items:center;gap:8px}
.vl-user{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:.92rem}
.vl-menu-btn{display:none}
/* Heldekkende: navnet tar plass på mellomstore skjermer, kortnavnet holder. */
/* Menyen ligger på egen rad under merket på brede skjermer. Da får både
   landingssidens ankerlenker og adminlenkene plass ved siden av
   sintef.energy-logoen, uansett hvor mange lenker brukeren ser. */
@media (min-width:861px){
  .vl-head .head-row{flex-wrap:wrap;row-gap:4px;padding-bottom:0}
  .vl-head .head-row > .vl-brand,.vl-head .head-row > .head-side{margin-bottom:10px}
  .vl-nav{order:10;flex-basis:100%;margin:0 0 0 -10px;gap:4px}
  .vl-nav a{padding:6px 10px 10px;border-radius:6px 6px 0 0}
  .vl-nav[hidden]{display:none}
}
@media (max-width:1000px){
  .vlab.has-user .org-logo{display:none}
}
@media (max-width:640px){
  .vlab .org-logo{display:none}
}
/* Mobil: vlab.css skjuler .vl-nav under 860px. Menyknappen viser den som
   en loddrett liste under topplinja. */
@media (max-width:860px){
  .vl-menu-btn{display:inline-flex}
  .vl-menu-btn[hidden]{display:none}
  .vl-head .head-row{flex-wrap:wrap}
  .vl-head.nav-open .vl-nav{display:flex;flex-direction:column;order:10;flex-basis:100%;margin:6px 0 4px;
    padding-top:8px;border-top:1px solid var(--line);gap:2px}
  .vl-head.nav-open .vl-nav a{padding:10px 8px}
  .vl-head.nav-open .vl-nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--cell);border-radius:0 6px 6px 0}
  .vl-user{display:none}
}
@media (max-width:520px){
  /* «.vlab .wrap» i vlab.css nullstiller ellers topp/bunn-luften her. */
  .vlab .vl-head .head-row{gap:10px;flex-wrap:nowrap;padding-top:12px;padding-bottom:10px}
  .vl-head.nav-open .head-row{flex-wrap:wrap}
  .vl-head .sw{padding:5px 8px}
  .head-side{gap:6px}
  .sintef-mark{width:40px;height:35px}
  .brand-short .vl-env{display:none}
  .vl-login .btn.small{padding:6px 10px}
}
.vlab .announcement{margin:16px 0 0}
.vlab body > .wrap{width:100%}
#noscript{margin:16px}
/* Tospråklige blokker (data-lang-only) skal stemme fra første opptegning,
   før vlab.js har satt hidden. data-lang settes av inline-skriptet. */
html:not([data-lang="en"]) [data-lang-only="en"],html[data-lang="en"] [data-lang-only="no"]{display:none}

/* ---------- 2. sideoppsett ---------- */
.vlab .vl-page{padding-top:32px;padding-bottom:8px}
.vl-page-head{padding:34px 0 30px}
.vl-page-head h1{margin-bottom:.2em}
.vl-page-head .lead{font-size:1.12rem;margin:0;max-width:62ch}
.vl-eyebrow{display:block;font:14px/1.4 var(--mono);color:var(--hero-dim);margin-bottom:8px}
.vl-eyebrow b{color:var(--cell);font-weight:400}
.vl-section{margin-top:40px}
.vl-section > h2{margin-bottom:.6em}
.vl-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vl-section-head h2{margin:0}
.measure{max-width:68ch}
/* Celler med [n] i margen trenger plass til venstre på brede skjermer. */
.cells{display:flex;flex-direction:column;gap:16px;padding-left:3.6em}
@media (max-width:760px){.cells{padding-left:0}}
.cell h2,.cell h3{margin-bottom:.35em}
.cell > :last-child{margin-bottom:0}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:10px 0 0;font-size:.95rem}
.kv dt{color:var(--dim)}
.kv dd{margin:0;overflow-wrap:anywhere}
.out{font:13px/1.5 var(--mono);color:var(--dim);margin:0 0 6px}
.out b{color:var(--heading);font-weight:400}
.vl-center{max-width:720px;margin-left:auto;margin-right:auto}

/* ---------- 3. Bootstrap-shim (ikke på sider som laster Bootstrap) ---------- */
.vlab .hidden{display:none !important}
.vlab .visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
body:not(.vl-bs) .container{max-width:var(--wrap);margin:0 auto;padding:24px 24px 0}
body:not(.vl-bs) .row{display:block}
body:not(.vl-bs) .text-center{text-align:center}
body:not(.vl-bs) .lead{font-size:1.1rem}
body:not(.vl-bs) .alert{border-left:4px solid var(--cell);background:var(--surface);padding:12px 16px;border-radius:0 8px 8px 0;margin:0 0 1em}
body:not(.vl-bs) .alert-warning{border-left-color:var(--warn);background:var(--warn-soft)}
body:not(.vl-bs) .alert-danger{border-left-color:var(--bad);background:var(--bad-soft)}
body:not(.vl-bs) .form-control,body:not(.vl-bs) .form-select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line-strong);
  border-radius:8px;padding:9px 12px;min-height:40px;width:100%}
body:not(.vl-bs) .form-control:focus,body:not(.vl-bs) .form-select:focus{outline:3px solid var(--focus);outline-offset:1px}
body:not(.vl-bs) .form-label{display:block;font-weight:700;color:var(--heading);font-size:.95rem;margin-bottom:4px}
body:not(.vl-bs) .form-text{display:block;color:var(--dim);font-size:.88rem;margin-top:4px}
body:not(.vl-bs) .btn-danger{background:var(--bad-soft);color:var(--bad-ink)}
body:not(.vl-bs) .btn-lg{font-size:1.08rem;padding:12px 22px}
body:not(.vl-bs) .btn-xs,body:not(.vl-bs) .btn-sm{font-size:.88rem;padding:5px 10px}
body:not(.vl-bs) .card-header{font-weight:700;color:var(--heading);border-bottom:1px solid var(--line);padding:0 0 10px;margin-bottom:10px}
body:not(.vl-bs) .card-footer{border-top:1px solid var(--line);padding:12px 0 0;margin-top:12px}
body:not(.vl-bs) .fa-spinner::before{content:"";display:inline-block;width:1em;height:1em;border:2px solid var(--line);border-top-color:var(--cell);
  border-radius:50%;animation:vl-spin 1s linear infinite;vertical-align:-.15em}
@keyframes vl-spin{to{transform:rotate(360deg)}}
/* Feilmodalen fra page.html (vises av bootstrap.Modal i utils.js). */
body:not(.vl-bs) .modal{position:fixed;inset:0;z-index:1050;display:none;overflow-y:auto;padding:16px}
body:not(.vl-bs) .modal.show{display:block}
body:not(.vl-bs) .modal-dialog{max-width:520px;margin:10vh auto 0}
body:not(.vl-bs) .modal-content{background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--bad);
  border-radius:4px var(--radius) var(--radius) 4px;box-shadow:var(--shadow)}
body:not(.vl-bs) .modal-header,body:not(.vl-bs) .modal-body,body:not(.vl-bs) .modal-footer{padding:14px 20px}
body:not(.vl-bs) .modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
body:not(.vl-bs) .modal-title{font-size:1.15rem;margin:0}
body:not(.vl-bs) .modal-footer{display:flex;justify-content:flex-end;border-top:1px solid var(--line)}
body:not(.vl-bs) .btn-close{width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--fg);cursor:pointer;font:inherit;font-size:1.3rem;line-height:1}
body:not(.vl-bs) .btn-close::before{content:"\00d7"}
body:not(.vl-bs) .modal-backdrop{position:fixed;inset:0;z-index:1040;background:var(--fg);opacity:.35}
body:not(.vl-bs) .ajax-error{font-family:var(--mono);font-size:.9rem;white-space:pre-wrap}

/* ---------- 4a. Mitt vLab ---------- */
.vl-home-grid{display:grid;gap:24px 32px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.vl-home-grid{grid-template-columns:minmax(0,1fr)}}
.server-cell{padding:22px 24px}
.server-cell .status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.server-cell h2{font-size:1.35rem;margin:0}
.server-cell .btn{min-height:46px}
.server-cell.done .status-dot{background:var(--ok)}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);flex:none}
.server-cell.active .status-dot{background:var(--cell);animation:vl-pulse 1.4s ease-in-out infinite}
@keyframes vl-pulse{50%{opacity:.35}}
.quick{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.quick a{display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 16px;border:1px solid var(--line);border-left:4px solid var(--line-strong);
  border-radius:4px 8px 8px 4px;text-decoration:none;color:var(--fg);background:var(--bg)}
.quick a:hover{border-left-color:var(--cell);background:var(--surface)}
.quick b{color:var(--heading)}
.quick span{color:var(--dim);font-size:.9rem}
.news{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.news li{border-left:4px solid var(--line);padding:2px 0 2px 14px}
.news li.is-new{border-left-color:var(--cell)}
.news time{display:block;font:13px/1.4 var(--mono);color:var(--dim)}
.news h3{font-size:1.02rem;margin:2px 0 4px}
.news p{margin:0;color:var(--fg);font-size:.95rem}
.news-foot{margin-top:12px;font-size:.85rem}
.server-table-wrap{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.server-table{min-width:480px}
/* Smal skjerm: radene stables, så «Legg til server» ikke havner utenfor. */
@media (max-width:560px){
  .server-table{min-width:0}
  .server-table thead{display:none}
  .server-table tr,.server-table td{display:block}
  .server-table td{border:0;padding:4px 12px}
  .server-table tr{border-bottom:1px solid var(--line);padding:8px 0}
  .server-table tr:last-child{border-bottom:0}
}
.vl-page-home .cell h2,.vl-home-side h2{font-size:1.35rem}
.server-table td,.server-table th{vertical-align:middle}
.server-table .add-server-row td{background:var(--surface)}
.input-group{display:flex;gap:8px;flex-wrap:wrap}
.input-group .input{flex:1 1 200px}
.server-link{font-family:var(--mono);font-size:.88rem}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- 4b. token ---------- */
.vl-token-form{max-width:640px}
.vl-token-form .input,.vl-token-form .select{width:100%}
.vl-token-form .hint{color:var(--dim);font-size:.88rem;margin:0}
#token-area .cell{border-left-color:var(--ok)}
#token-result{display:block;font:15px/1.5 var(--mono);background:var(--code-bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;
  margin:8px 0 10px;overflow-wrap:anywhere;user-select:all;color:var(--heading)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.table-wrap .table{min-width:640px}
.token-scope{margin:2px 0;font-size:.82rem;white-space:pre-wrap;color:var(--dim)}
details summary{cursor:pointer;color:var(--link)}

/* ---------- 4c. feil, utlogget, ikke startet, deling ---------- */
.vl-msg{max-width:760px;margin:0 auto;padding:56px 0 8px}
.vl-msg .cell{padding:26px 28px}
.vl-msg.cells{padding-left:4.6em}
.vl-msg .cell[data-n]::before{width:4em;left:-4.4em;top:28px}
@media (max-width:760px){.vl-msg.cells{padding-left:0}}
.vl-msg h1{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.vl-msg .code{font:14px/1.4 var(--mono);color:var(--dim);margin-bottom:6px}
.vl-msg .detail{margin-top:14px;font-size:.92rem}
.vl-msg .detail pre,.vl-msg .detail .tech{font-family:var(--mono);font-size:.86rem;background:var(--code-bg);border:1px solid var(--line);
  border-radius:6px;padding:10px 12px;margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg)}
.vl-msg .detail .tech p{margin:0}
.vl-msg .lead{font-size:1.1rem}
@media (max-width:760px){.vl-msg{padding-top:28px}.vl-msg .cell{padding:20px}}
.scope-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.scope-list li{padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:.95rem}

/* ---------- 5. admin (React-admin med Bootstrap) ---------- */
/* Bootstrap-variablene får vLab-verdier. Settes på body, så de overstyrer
   :root og [data-bs-theme] for alt inni. */
body.vl-bs{
  --bs-body-bg:var(--bg);--bs-body-color:var(--fg);--bs-emphasis-color:var(--heading);
  --bs-secondary-color:var(--dim);--bs-tertiary-color:var(--dim);
  --bs-secondary-bg:var(--surface-2);--bs-tertiary-bg:var(--surface);
  --bs-border-color:var(--line);--bs-border-color-translucent:var(--line);
  --bs-link-color:var(--link);--bs-link-hover-color:var(--link);
  --bs-heading-color:var(--heading);
  --bs-body-font-family:var(--font);--bs-font-monospace:var(--mono);
  --bs-border-radius:8px;
  --bs-focus-ring-color:var(--cell-soft);
}
/* vlab.css sin .btn vinner over Bootstrap fordi den lastes senere. Inne i
   admin vil vi ha Bootstrap-knappene, bare med vLab-farger. */
.vl-bs #react-admin-hook .btn{background:var(--bs-btn-bg);color:var(--bs-btn-color);border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  font-weight:400;font-size:var(--bs-btn-font-size);padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);border-radius:var(--bs-btn-border-radius);box-shadow:none;transition:none}
.vl-bs #react-admin-hook .btn:hover{background:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color);border-color:var(--bs-btn-hover-border-color)}
.vl-bs #react-admin-hook .btn:active{transform:none}
.vl-bs #react-admin-hook .btn-primary,.vl-bs #react-admin-hook .btn-jupyter{
  --bs-btn-bg:var(--btn-bg);--bs-btn-color:var(--btn-fg);--bs-btn-border-color:var(--btn-bg);
  --bs-btn-hover-bg:var(--heading);--bs-btn-hover-color:var(--bg);--bs-btn-hover-border-color:var(--heading);
  --bs-btn-active-bg:var(--heading);--bs-btn-active-border-color:var(--heading);
  --bs-btn-disabled-bg:var(--btn-bg);--bs-btn-disabled-border-color:var(--btn-bg)}
.vl-bs #react-admin-hook .btn-light,.vl-bs #react-admin-hook .btn-secondary,.vl-bs #react-admin-hook .btn-outline-secondary{
  --bs-btn-bg:var(--btn-2-bg);--bs-btn-color:var(--btn-2-fg);--bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-bg:var(--surface);--bs-btn-hover-color:var(--heading);--bs-btn-hover-border-color:var(--line-strong)}
.vl-bs #react-admin-hook .btn-danger{
  --bs-btn-bg:var(--bad-soft);--bs-btn-color:var(--bad-ink);--bs-btn-border-color:var(--bad-soft);
  --bs-btn-hover-bg:var(--bad);--bs-btn-hover-color:var(--bg);--bs-btn-hover-border-color:var(--bad)}
.vl-bs #react-admin-hook .btn-success{
  --bs-btn-bg:var(--ok-soft);--bs-btn-color:var(--ok-ink);--bs-btn-border-color:var(--ok-soft);
  --bs-btn-hover-bg:var(--ok);--bs-btn-hover-color:var(--fg);--bs-btn-hover-border-color:var(--ok)}
.vl-bs #react-admin-hook{width:100%;max-width:var(--wrap);margin:0 auto;padding:24px 24px 0}
.vl-bs #react-admin-hook .container{max-width:none;padding:0}
.vl-bs #react-admin-hook .table{--bs-table-bg:var(--bg);--bs-table-color:var(--fg);--bs-table-striped-bg:var(--surface);--bs-table-striped-color:var(--fg);
  --bs-table-hover-bg:var(--surface-2);--bs-table-border-color:var(--line);font-size:.95rem}
.vl-bs #react-admin-hook .table th{white-space:nowrap}
.vl-bs #react-admin-hook .card{box-shadow:none}
.vl-bs #react-admin-hook .badge{font-weight:700}
.vl-bs #react-admin-hook .form-control,.vl-bs #react-admin-hook .form-select{background-color:var(--bg);color:var(--fg);border-color:var(--line-strong)}
.vl-bs #react-admin-hook .page-link{background:var(--bg);color:var(--link);border-color:var(--line)}
.vl-bs #react-admin-hook .page-item.active .page-link{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.vl-bs #react-admin-hook h1,.vl-bs #react-admin-hook h2{color:var(--heading)}
.vl-bs .vl-admin-intro{width:100%;max-width:var(--wrap);margin:0 auto;padding:28px 24px 0}
.vl-bs .vl-admin-intro h1{margin-bottom:.2em}
.vl-bs .vl-admin-intro p{margin:0;color:var(--dim)}
@media (max-width:520px){
  .vl-bs #react-admin-hook,.vl-bs .vl-admin-intro{padding-left:16px;padding-right:16px}
}