/* DriveBase: systemregistret (#/admin/system) och systemsidan (#/admin/system/:id), i översiktens uttryck
   (beslut 0008, css/vyer/admin-oversikt.css). Direkt på marinblått: vit text, tunna ljusa linjer, larmet som en
   konturrad, tabelldata i vita paneler och flöden som rader på marinblått. Ingen yta är fylld med färg. Färg finns bara
   i statusmärkena, och kurvan är marinblå på vitt. Bara klasser med prefixet .system- och bara variabler ur tokens.css.
   Raderna följer innehållsytans bredd (containern innehall på <main>), inte fönstrets. */

/* ================= Ramen ================= */
.system,
.system-sida {
  min-width: 0;
  padding-bottom: var(--s-4);
  color: var(--text-pa-mork);
}

/* Vägen tillbaka till översikten, ovanför rubriken */
.system-tillbaka {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--klickyta);
  margin: calc(-1 * var(--s-3)) 0 var(--s-2);
  color: var(--text-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  text-decoration: none;
}
.system-tillbaka .ikon { transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .system-tillbaka:hover { text-decoration: underline; text-underline-offset: 5px; }
  .system-tillbaka:hover .ikon { translate: -2px 0; }
}
.system-tillbaka:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); border-radius: var(--r-xs); }

/* ================= Rubriken och läget ================= */
.system-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
}
.system-huvud__text { display: grid; gap: var(--s-2); min-width: 0; }
.system-huvud__rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  min-width: 0;
}
/* Portalens rubrikmått (Rethink Sans 800, .004em), som översiktens */
.system-rubrik {
  min-width: 0;
  font-family: var(--font-rubrik);
  font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  font-weight: var(--vikt-rubrik);
  line-height: 1.08;
  letter-spacing: .004em;
  color: var(--text-pa-mork);
  overflow-wrap: anywhere;
}
.system-huvud__status { display: flex; }
.system-lage {
  max-width: 62ch;
  margin-top: var(--s-1);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-l);
  line-height: 1.45;
}
.system-lage:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); border-radius: var(--r-xs); }

/* Adressen som länk ut, under namnet */
.system-adress {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: var(--klickyta);
  min-width: 0;
  color: var(--text-pa-mork);
  font-size: var(--fs-m);
  font-weight: var(--vikt-mellan);
  text-decoration: underline;
  text-decoration-color: var(--linje-pa-mork);
  text-underline-offset: 5px;
}
.system-adress__text { overflow-wrap: anywhere; }
.system-adress .ikon { width: 16px; height: 16px; }
.system-adress:hover { text-decoration-color: var(--text-pa-mork); }
.system-adress:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); border-radius: var(--r-xs); }
.system-adress--ingen { color: var(--text-dampad-pa-mork); text-decoration: none; }

/* Den ljusa knappen: portalens Lägg till i samlingen, vit med marinblå text */
.system-ljusknapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--klickyta);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-m);
  background: var(--pal-vit);
  color: var(--pal-navy);
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) {
  .system-ljusknapp:hover { background: var(--yta-mjuk); }
}
.system-ljusknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }
.system-ljusknapp[aria-busy="true"] { cursor: progress; }

/* En diskret länk vidare i delens huvud, som översiktens Alla system */
.system-lank {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--klickyta);
  color: var(--text-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  text-decoration: none;
}
.system-lank .ikon { width: 18px; height: 18px; transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .system-lank:hover { text-decoration: underline; text-underline-offset: 5px; }
  .system-lank:hover .ikon { translate: 2px 0; }
}
.system-lank:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); border-radius: var(--r-xs); }

/* ================= Larmet ================= */
/* Översiktens konturrad: ingen fyllnad, en tunn ljus kant och ikonen i en ljus ring */
.system-larmdel { margin-top: var(--s-8); }
.system-larm__lista {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.system-larm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-l);
}
.system-larm__ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: 50%;
  color: var(--text-pa-mork);
}
.system-larm__text { min-width: 0; }
.system-larm__etikett {
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
}
.system-larm__titel {
  margin-top: 2px;
  font-family: var(--font-rubrik);
  font-size: var(--fs-l);
  font-weight: var(--vikt-rubrik);
  line-height: 1.3;
  letter-spacing: .004em;
  overflow-wrap: anywhere;
}
.system-larm__meta {
  margin-top: var(--s-1);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
  line-height: 1.45;
}
.system-larm__meta .tal { color: var(--text-pa-mork); font-weight: var(--vikt-fet); }

/* Textknappen Kvittera, som översiktens */
.system-textknapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--klickyta);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: var(--text-pa-mork);
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  white-space: nowrap;
  cursor: pointer;
}
.system-textknapp:hover { text-decoration: underline; text-underline-offset: 5px; }
.system-textknapp .ikon { width: 17px; height: 17px; }
.system-textknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }
.system-textknapp[aria-busy="true"] { cursor: progress; }

/* ================= Delarna ================= */
.system-del { margin-top: var(--s-12); }
.system-del--forsta { margin-top: var(--s-8); }
.system-del__huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
}
.system-del__rubrik {
  font-family: var(--font-rubrik);
  font-size: var(--fs-2xl);
  font-weight: var(--vikt-rubrik);
  line-height: 1.15;
  letter-spacing: .004em;
  color: var(--text-pa-mork);
}
.system-del__not { color: var(--text-dampad-pa-mork); font-size: var(--fs-s); font-weight: var(--vikt-fet); }
.system-del__tomt { color: var(--text-dampad-pa-mork); font-size: var(--fs-m); line-height: 1.5; }

/* Den vita panelen, som översiktens: inuti gäller ljusa ytans värden */
.system-panel {
  --text: var(--pal-navy);
  --text-dampad: var(--pal-dampad);
  --fokus: var(--pal-navy);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-l);
  background: var(--yta);
  color: var(--text);
  color-scheme: light;
}
.system-panel--luft { padding: var(--s-5) var(--s-6) var(--s-5); }
.system-panel__tomt {
  padding: var(--s-8) var(--s-4);
  color: var(--text-dampad);
  font-size: var(--fs-m);
  text-align: center;
}
.system-panel__not {
  padding: var(--s-3);
  border-top: 1px solid var(--linje);
  color: var(--text-dampad);
  font-size: var(--fs-s);
}

/* ================= Registret ================= */
/* Namnet tar resten. Statusen, driften och inloggningen har fasta spalter, så att raderna står i linje. */
.system-kolumner,
.system-rad__lank {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12.5rem 6.5rem 7.5rem 18px;
  align-items: center;
  gap: var(--s-4);
}
.system-kolumner {
  padding: var(--s-3) var(--s-3) var(--s-2);
  color: var(--text-dampad);
  font-size: var(--fs-xs);
  font-weight: var(--vikt-fet);
}
.system-lista { margin: 0; padding: 0; list-style: none; }
.system-rad { border-top: 1px solid var(--linje); }
.system-rad__lank {
  min-height: 64px;
  padding: var(--s-3);
  border-radius: var(--r-m);
  color: var(--text);
  text-decoration: none;
}
.system-rad__lank:hover { background: var(--yta-mjuk); text-decoration: none; }
.system-rad__lank:focus-visible { outline: var(--fokus-bredd) solid var(--pal-navy); outline-offset: 0; }
.system-rad__namn { display: grid; gap: 2px; min-width: 0; }
.system-rad__titel { font-size: var(--fs-bas); font-weight: var(--vikt-fet); line-height: 1.35; overflow-wrap: anywhere; }
.system-rad__adress { color: var(--text-dampad); font-size: var(--fs-s); line-height: 1.4; overflow-wrap: anywhere; }
/* Mätningen och fakta står i rutnätets spalter här, och på en egen rad i en smal yta */
.system-rad__matt { display: contents; }
.system-rad__status { display: flex; min-width: 0; }
.system-rad__drift,
.system-rad__inloggning { min-width: 0; font-size: var(--fs-s); line-height: 1.4; }
/* Etiketterna läses av skärmläsare i breda rader och syns i smala, där spalternas rubriker saknas */
.system-rad__etikett {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.system-rad__pil { display: grid; color: var(--text-dampad); }
.system-rad__pil .ikon { transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .system-rad__lank:hover .system-rad__pil .ikon { translate: 2px 0; }
}

/* ================= Läget och kurvan ================= */
.system-fakta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
  margin: 0;
}
.system-fakta__punkt { min-width: 0; }
.system-fakta__punkt dt { color: var(--text-dampad); font-size: var(--fs-xs); font-weight: var(--vikt-fet); }
.system-fakta__punkt dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-2);
  margin: var(--s-1) 0 0;
}
.system-fakta__varde {
  font-family: var(--font-rubrik);
  font-size: var(--fs-xl);
  font-weight: var(--vikt-rubrik);
  line-height: 1.2;
  letter-spacing: .004em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.system-fakta__varde--ingen { color: var(--text-dampad); font-family: var(--font-text); font-size: var(--fs-m); font-weight: var(--vikt-mellan); }
.system-fakta__not { color: var(--text-dampad); font-size: var(--fs-s); }
.system-fakta__ingen { color: var(--text-dampad); font-family: var(--font-text); font-size: var(--fs-m); font-weight: var(--vikt-mellan); }

/* En linje och gränsen streckad, i marinblått på vitt, utan fyllnad. Linjerna behåller sin tjocklek när rutan sträcks. */
.system-kurva { margin: var(--s-6) 0 0; }
.system-kurva__svg { display: block; width: 100%; height: 140px; overflow: visible; }
.system-kurva__linje {
  fill: none;
  stroke: var(--pal-navy);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.system-kurva__grans {
  fill: none;
  stroke: var(--pal-navy);
  stroke-opacity: .5;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.system-kurva__axel {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--linje);
  color: var(--text-dampad);
  font-size: var(--fs-xs);
}
.system-kurva__text { margin-top: var(--s-3); color: var(--text-dampad); font-size: var(--fs-s); line-height: 1.45; }
.system-kurva__tom { padding: var(--s-4) 0 0; border-top: 1px solid var(--linje); color: var(--text-dampad); font-size: var(--fs-m); line-height: 1.5; }

/* ================= Deployer ================= */
.system-deploy__kolumner,
.system-deploy {
  display: grid;
  grid-template-columns: 8.5rem 6rem minmax(0, 1fr) 11rem;
  align-items: center;
  gap: var(--s-4);
}
.system-deploy__kolumner {
  padding: var(--s-3) var(--s-3) var(--s-2);
  color: var(--text-dampad);
  font-size: var(--fs-xs);
  font-weight: var(--vikt-fet);
}
.system-deployer { margin: 0; padding: 0; list-style: none; }
.system-deploy {
  min-height: 56px;
  padding: var(--s-3);
  border-top: 1px solid var(--linje);
}
.system-deploy__tid,
.system-deploy__av { min-width: 0; color: var(--text-dampad); font-size: var(--fs-s); }
.system-deploy__commit code { font-family: var(--font-mono); font-size: var(--fs-s); }
.system-deploy__meddelande { min-width: 0; font-weight: var(--vikt-mellan); overflow-wrap: anywhere; }

/* ================= Visa detaljer ================= */
/* En lugn textknapp under Händelser, som delarnas länkar: ingen yta och ingen färg. Pilen pekar ned och vänds upp
   när detaljerna är öppna. Den stängda delen har attributet hidden. */
.system-detaljknapp {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: fit-content;
  min-height: var(--klickyta);
  margin-top: var(--s-6);
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--text-pa-mork);
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  cursor: pointer;
}
.system-detaljknapp .ikon { width: 18px; height: 18px; rotate: 90deg; transition: rotate var(--t-normal) var(--kurva); }
.system-detaljknapp[aria-expanded="true"] .ikon { rotate: -90deg; }
@media (hover: hover) {
  .system-detaljknapp:hover { text-decoration: underline; text-underline-offset: 5px; }
}
.system-detaljknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }
.system-detaljer > .system-del:first-child { margin-top: var(--s-8); }
/* Delen tonar fram när den öppnas med knappen, bara opacitet och oskärpa, som menyerna i rorelse.css */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rorelse="lugn"]) .system-detaljer--in {
    animation: system-detaljer-in var(--t-normal) var(--kurva) backwards;
  }
}
@keyframes system-detaljer-in {
  from { opacity: 0; filter: blur(4px); }
}

/* ================= Händelser och kontraktet ================= */
/* Rader med tunna ljusa linjer på marinblått, som översiktens händelser. Markörerna är ljusa ringar. */
.system-handelser,
.system-krav {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linje-pa-mork);
}
.system-handelse,
.system-krav__punkt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--linje-pa-mork);
}
.system-ring {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: 50%;
  color: var(--text-pa-mork);
}
.system-ring .ikon { width: 18px; height: 18px; }
.system-ring--tom { border-style: dashed; border-color: var(--text-dampad-pa-mork); }
/* Ett uppfyllt krav: ringen med en bock, i ringarnas linjetjocklek */
.system-krav__markor { display: grid; width: 36px; height: 36px; color: var(--text-pa-mork); }
.system-krav__markor .ikon { width: 36px; height: 36px; stroke-width: 1.15; }
.system-handelse__text,
.system-krav__text { min-width: 0; font-size: var(--fs-bas); line-height: 1.4; overflow-wrap: anywhere; }
.system-krav__text { color: var(--text-dampad-pa-mork); }
.system-krav__text strong { color: var(--text-pa-mork); }
.system-handelse__tid,
.system-krav__lage { color: var(--text-dampad-pa-mork); font-size: var(--fs-s); white-space: nowrap; }
.system-krav__punkt.is-ok .system-krav__lage { color: var(--text-pa-mork); font-weight: var(--vikt-fet); }

/* ================= Åtkomst ================= */
.system-atkomst { max-width: 72ch; font-size: var(--fs-bas); line-height: 1.55; }

/* ================= Inställningar ================= */
.system-installningar { margin: 0; }
.system-installning {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3);
  border-top: 1px solid var(--linje);
}
.system-installning:first-child { border-top: 0; }
.system-installning dt { color: var(--text-dampad); font-size: var(--fs-s); font-weight: var(--vikt-fet); }
.system-installning dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

/* ================= Dialogerna Lägg till system och Redigera ================= */
/* I dialogens ljusa yta: fältet med ett fast slut (.drivebase.se eller ms), radioknapparna på en rad och DNS-posten */
.system-tillagg {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.system-tillagg .inmatning {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.system-tillagg__slut {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 14px;
  border: 2px solid var(--linje-falt);
  border-left: 0;
  border-radius: 0 var(--r-m) var(--r-m) 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-m);
  white-space: nowrap;
}
.falt--fel .system-tillagg__slut {
  border-color: var(--status-kontur);
  box-shadow: 0 0 0 3px var(--fel);
}
.system-tillagg--kort { max-width: 240px; }
.system-valrad {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-6);
}
.system-dns {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-4);
  border: 1.5px solid var(--linje);
  border-radius: var(--r-m);
  color: var(--text);
}
.system-dns__rubrik {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: var(--vikt-fet);
}
.system-dns__text { font-size: var(--fs-s); line-height: 1.45; }
.system-dns__post {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  margin: var(--s-1) 0 0;
}
.system-dns__post div { min-width: 0; }
.system-dns__post dt {
  color: var(--text-dampad);
  font-size: var(--fs-2xs);
  font-weight: var(--vikt-fet);
}
.system-dns__post dd {
  margin: 2px 0 0;
  font-weight: var(--vikt-fet);
  font-size: var(--fs-s);
  overflow-wrap: anywhere;
}

/* ================= Smala ytor ================= */
@container innehall (max-width: 879.98px) {
  /* Registrets rad bryter till två: namnet och pilen överst, mätningen och fakta med sina etiketter under */
  .system-kolumner { display: none; }
  .system .system-panel { padding: var(--s-1) var(--s-2); }
  .system-rad:first-child { border-top: 0; }
  .system-rad__lank {
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-areas: "namn pil" "matt matt";
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-2);
  }
  .system-rad__namn { grid-area: namn; }
  .system-rad__pil { grid-area: pil; }
  .system-rad__matt {
    grid-area: matt;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
  }
  .system-rad__etikett {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    color: var(--text-dampad);
  }
}
@container innehall (max-width: 699.98px) {
  /* Deployerna: meddelandet överst, commit, tid och vem under */
  .system-deploy__kolumner { display: none; }
  .system-deploy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--s-3);
    padding: var(--s-3) var(--s-2);
  }
  .system-deploy:first-child { border-top: 0; }
  .system-deploy__meddelande { order: -1; flex: 1 0 100%; }
  .system-panel--luft { padding: var(--s-4); }
  .system-kurva__svg { height: 112px; }
  .system-installning { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--s-3) var(--s-2); }
}
@container innehall (max-width: 559.98px) {
  /* Larmet: ikonen och texten överst, Kvittera under texten */
  .system-larm { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-4); }
  .system-larm__ikon { align-self: start; }
  .system-textknapp { grid-column: 2; justify-self: start; margin-left: calc(-1 * var(--s-3)); }
  /* Händelserna och kontraktet: tiden och läget under texten */
  .system-handelse,
  .system-krav__punkt { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; align-items: start; }
  .system-ring,
  .system-krav__markor { grid-row: span 2; }
  .system-handelse__tid,
  .system-krav__lage { grid-column: 2; }
  .system-fakta { grid-template-columns: minmax(0, 1fr); }
  .system-huvud--register { align-items: flex-start; }
}