/* DriveBase: adminöversikten på #/admin (beslut 0008), i portalens språk.
   Direkt på marinblått: vit text, tunna ljusa linjer, larmen som konturrader som portalens utskick, systemen som rader
   i en vit panel som samlingen och händelserna som rader som "Senast i DriveBase". Ingen yta är fylld med färg. Färg
   finns bara i statusmärkena. Bara klasser med prefixet .oversikt- och bara variabler ur tokens.css.
   Raderna följer innehållsytans bredd (containern innehall på <main>), inte fönstrets. */

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

/* ================= Rubriken och läget ================= */
.oversikt-huvud { display: grid; gap: var(--s-2); }
/* Portalens rubrikmått (Rethink Sans 800, .004em), mindre än hjältens */
.oversikt-rubrik {
  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);
}
.oversikt-lage {
  max-width: 62ch;
  margin-top: var(--s-1);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-l);
  line-height: 1.45;
}
.oversikt-kontroll {
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
}
.oversikt-kontroll time { color: var(--text-pa-mork); font-weight: var(--vikt-fet); font-variant-numeric: tabular-nums; }

/* ================= Larmen ================= */
/* Konturraden: ingen fyllnad, en tunn ljus kant och ikonen i en ljus ring, som portalens utskick */
.oversikt-larmdel { margin-top: var(--s-8); }
.oversikt-larm__lista {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.oversikt-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);
}
.oversikt-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);
}
.oversikt-larm__text { min-width: 0; }
.oversikt-larm__etikett {
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
}
.oversikt-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;
}
.oversikt-larm__meta {
  margin-top: var(--s-1);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
  line-height: 1.45;
}
.oversikt-larm__meta .tal { color: var(--text-pa-mork); font-weight: var(--vikt-fet); }

/* Textknappen: entréns .text-button på marinblått, som portalens Visa dolda */
.oversikt-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;
}
.oversikt-textknapp:hover { text-decoration: underline; text-underline-offset: 5px; }
.oversikt-textknapp .ikon { width: 17px; height: 17px; }
.oversikt-textknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }
.oversikt-textknapp[aria-busy="true"] { cursor: progress; }

/* ================= Delarna ================= */
/* Varje del har en vänsterställd rubrik i vitt och till höger en diskret länk vidare */
.oversikt-del { margin-top: var(--s-12); }
.oversikt-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);
}
.oversikt-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);
}
.oversikt-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;
}
.oversikt-lank .ikon { width: 18px; height: 18px; transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .oversikt-lank:hover { text-decoration: underline; text-underline-offset: 5px; }
  .oversikt-lank:hover .ikon { translate: 2px 0; }
}
.oversikt-lank:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); border-radius: var(--r-xs); }

/* ================= Systemen ================= */
/* En vit panel som samlingens: en rad per system med tunna linjer. Inuti gäller ljusa ytans värden. */
.oversikt-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;
}
/* Namnet tar resten, statusen, svarstiden och tiden har fasta spalter, så att raderna står i linje. Spalterna rymmer
   det bredaste de kan visa: märket Under uppbyggnad (189 px), Inget svar och Ingen kontroll än. */
.oversikt-system__kolumner,
.oversikt-system__rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12.5rem 7rem 9rem 18px;
  align-items: center;
  gap: var(--s-4);
}
.oversikt-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);
}
.oversikt-system__kolumner > :nth-child(3),
.oversikt-system__kolumner > :nth-child(4) { text-align: right; }
.oversikt-system__lista { margin: 0; padding: 0; list-style: none; }
.oversikt-system { border-top: 1px solid var(--linje); }
.oversikt-system__rad {
  min-height: 64px;
  padding: var(--s-3);
  border-radius: var(--r-m);
  color: var(--text);
  text-decoration: none;
}
.oversikt-system__rad:hover { background: var(--yta-mjuk); text-decoration: none; }
.oversikt-system__rad:focus-visible { outline: var(--fokus-bredd) solid var(--pal-navy); outline-offset: 0; }
.oversikt-system__namn { display: grid; gap: 2px; min-width: 0; }
.oversikt-system__titel { font-size: var(--fs-bas); font-weight: var(--vikt-fet); line-height: 1.35; overflow-wrap: anywhere; }
.oversikt-system__adress { color: var(--text-dampad); font-size: var(--fs-s); line-height: 1.4; overflow-wrap: anywhere; }
/* Statusen, svarstiden och tiden står i rutnätets spalter här, och på en egen rad i en smal yta */
.oversikt-system__matt { display: contents; }
.oversikt-system__status { display: flex; min-width: 0; }
.oversikt-system__svarstid {
  font-weight: var(--vikt-fet);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.oversikt-system__ingen { color: var(--text-dampad); font-weight: var(--vikt-mellan); }
.oversikt-system__kontroll {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--text-dampad);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oversikt-system__kontroll .ikon { width: 16px; height: 16px; }
.oversikt-system__pil { display: grid; color: var(--text-dampad); }
.oversikt-system__pil .ikon { transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .oversikt-system__rad:hover .oversikt-system__pil .ikon { translate: 2px 0; }
}
.oversikt-panel__tomt {
  padding: var(--s-8) var(--s-4);
  color: var(--text-dampad);
  font-size: var(--fs-m);
  text-align: center;
}

/* ================= Senaste händelser ================= */
/* Rader med tunna ljusa linjer på marinblått, som portalens "Senast i DriveBase". Markörerna är ljusa ringar. */
.oversikt-handelser {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linje-pa-mork);
}
.oversikt-handelse {
  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);
}
.oversikt-handelse__markor {
  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);
}
.oversikt-handelse__markor .ikon { width: 18px; height: 18px; }
.oversikt-handelse__text { min-width: 0; font-size: var(--fs-bas); line-height: 1.4; overflow-wrap: anywhere; }
.oversikt-handelse__tid { color: var(--text-dampad-pa-mork); font-size: var(--fs-s); white-space: nowrap; }
/* Tomt läge på marinblått: kontur i stället för den ljusa ytan */
.oversikt .tomt {
  border: 1.5px solid var(--linje-pa-mork);
  background: transparent;
  color: var(--text-pa-mork);
  --text-dampad: var(--text-dampad-pa-mork);
}
.oversikt .tomt__ikon { background: var(--hover-ljus); color: var(--text-pa-mork); }

/* ================= Smala ytor ================= */
@container innehall (max-width: 699.98px) {
  /* Raden bryter till två: namnet och pilen överst, statusen, svarstiden och tiden under */
  .oversikt-system__kolumner { display: none; }
  .oversikt-panel { padding: var(--s-1) var(--s-2); }
  .oversikt-system:first-child { border-top: 0; }
  .oversikt-system__rad {
    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);
  }
  .oversikt-system__namn { grid-area: namn; }
  .oversikt-system__pil { grid-area: pil; }
  .oversikt-system__matt {
    grid-area: matt;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
  }
  .oversikt-system__svarstid { text-align: left; }
  .oversikt-system__svarstid:empty { display: none; }
}
@container innehall (max-width: 559.98px) {
  /* Larmet: ikonen och texten överst, Kvittera under texten */
  .oversikt-larm { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-4); }
  .oversikt-larm__ikon { align-self: start; }
  .oversikt-textknapp { grid-column: 2; justify-self: start; margin-left: calc(-1 * var(--s-3)); }
  /* Tiden under texten, i textens spalt */
  .oversikt-handelse { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; align-items: start; }
  .oversikt-handelse__markor { grid-row: span 2; }
  .oversikt-handelse__tid { grid-column: 2; }
}