/* DriveBase: vyn Personer (#/admin/personer), i översiktens uttryck (beslut 0008, css/vyer/admin-oversikt.css).
   Direkt på marinblått: rubriken, den ljusa knappen Bjud in och en vit panel med filtret och en rad per person.
   Ingen yta är fylld med färg. Färg finns bara i statusmärkena (Inbjuden, Spärrad). Bara klasser med prefixet
   .personer- och bara variabler ur tokens.css. Raden följer innehållsytans bredd (containern innehall på <main>).
   Dialogen Bjud in och personens låda ligger i <body>, utanför vyn, så deras klasser står utan föräldern .personer. */

/* ================= Ramen och rubriken ================= */
.personer {
  min-width: 0;
  padding-bottom: var(--s-4);
  color: var(--text-pa-mork);
}
.personer-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
}
.personer-huvud__text { display: grid; gap: var(--s-2); min-width: 0; }
/* Portalens rubrikmått (Rethink Sans 800, .004em), som översiktens */
.personer-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;
}
.personer-lage {
  max-width: 62ch;
  margin-top: var(--s-1);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-l);
  line-height: 1.45;
}

/* Den ljusa knappen: portalens Lägg till i samlingen, vit med marinblå text */
.personer-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) {
  .personer-ljusknapp:hover { background: var(--yta-mjuk); }
}
.personer-ljusknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }
.personer-ljusknapp[aria-busy="true"] { cursor: progress; }

/* ================= Panelen ================= */
.personer-del { margin-top: var(--s-8); }
/* Den vita panelen, som översiktens: inuti gäller ljusa ytans värden */
.personer-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;
}
.personer-panel .tomt { margin: var(--s-4) 0; }
.personer-panel .tomt__ikon { background: var(--yta-mjuk); }

/* Filtret: portalens flikar i samlingen */
.personer-flikar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: var(--s-3) var(--s-2) var(--s-2);
  padding: var(--s-1);
  border: 1.5px solid var(--linje);
  border-radius: var(--r-m);
}
.personer-flik {
  min-height: var(--klickyta);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-dampad);
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  cursor: pointer;
}
.personer-flik:hover { color: var(--text); background: var(--hover-mork); }
.personer-flik[aria-pressed="true"] { background: var(--primar); color: var(--primar-text); }
.personer-flik:focus-visible { outline: var(--fokus-bredd) solid var(--pal-navy); outline-offset: 2px; }

/* ================= Raderna ================= */
/* Initialerna och pilen har fasta spalter, personen tar resten. Rollen, åtkomsten och statusen står i linje i alla rader. */
.personer-kolumner,
.personer-rad__oppna {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 6.5rem 14rem 7.5rem 18px;
  align-items: center;
  gap: var(--s-4);
}
.personer-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);
}
.personer-lista { margin: 0; padding: 0; list-style: none; }
.personer-rad { border-top: 1px solid var(--linje); }
.personer-rad__oppna {
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: var(--s-3);
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.personer-rad__oppna:hover { background: var(--yta-mjuk); }
.personer-rad__oppna:focus-visible { outline: var(--fokus-bredd) solid var(--pal-navy); outline-offset: 0; }
.personer-rad__person { display: grid; gap: 2px; min-width: 0; }
.personer-rad__namn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); min-width: 0; }
.personer-rad__titel { font-size: var(--fs-bas); font-weight: var(--vikt-fet); line-height: 1.35; overflow-wrap: anywhere; }
.personer-rad__epost { color: var(--text-dampad); font-size: var(--fs-s); line-height: 1.4; overflow-wrap: anywhere; }
/* Roll, åtkomst och status står i rutnätets spalter här, och på en egen rad i en smal yta */
.personer-rad__matt { display: contents; }
.personer-rad__roll,
.personer-rad__system { min-width: 0; font-size: var(--fs-s); line-height: 1.4; }
.personer-rad__status { display: flex; min-width: 0; }
/* Etiketterna läses av skärmläsare i breda rader och syns i smala, där spalternas rubriker saknas */
.personer-rad__etikett {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.personer-rad__pil { display: grid; color: var(--text-dampad); }
.personer-rad__pil .ikon { transition: translate var(--t-normal) var(--kurva); }
@media (hover: hover) {
  .personer-rad__oppna:hover .personer-rad__pil .ikon { translate: 2px 0; }
}

/* "Du" bredvid namnet: en liten text, ingen platta */
.personer-du {
  color: var(--text-dampad);
  font-size: var(--fs-xs);
  font-weight: var(--vikt-fet);
}

/* Initialerna i en tunn ring. Streckad för en inbjuden och dämpad för en spärrad, utan fyllnad */
.personer-initialer {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--linje);
  border-radius: 50%;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--vikt-fet);
  letter-spacing: .02em;
}
.personer-initialer--inbjuden { border-style: dashed; border-color: var(--text-dampad); }
.personer-initialer--sparrad { color: var(--text-dampad); }
.personer-initialer--stor { width: 56px; height: 56px; font-size: var(--fs-l); }

/* ================= Dialogerna Bjud in och personens låda ================= */
.personer-falt-rubrik { font-size: var(--fs-bas); }

.personer-roller {
  display: grid;
  gap: var(--s-2);
}
.kryss.personer-roll {
  display: flex;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--linje);
  border-radius: var(--r-m);
  background: var(--yta);
  transition: border-color var(--t-snabb) var(--kurva), background-color var(--t-snabb) var(--kurva);
}
.kryss.personer-roll:hover { border-color: var(--primar); }
.kryss.personer-roll:has(input:checked) {
  border-color: var(--primar);
  background: var(--yta-mjuk);
}
.kryss.personer-roll:has(input:disabled):hover { border-color: var(--linje); }
.personer-roll__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.personer-roll__namn { font-weight: var(--vikt-fet); }
.personer-roll__hjalp {
  color: var(--text-dampad);
  font-weight: var(--vikt-normal);
  font-size: var(--fs-s);
  line-height: 1.4;
}

.personer-systemval {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 var(--s-4);
}
.kryss.personer-kryss { align-items: center; }

.personer-forklaring {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.personer-forklaring > svg { margin-top: 1px; }

.personer-lada {
  display: grid;
  min-width: 0;
}
.personer-lada__profil {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}
.personer-lada__profiltext {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}
.personer-lada__epost {
  font-weight: var(--vikt-mellan);
  overflow-wrap: anywhere;
}
.personer-markor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--s-3);
}
.personer-lada__senast { color: var(--text-dampad); font-size: var(--fs-s); }
.personer-lada__del {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1.5px solid var(--linje);
}
.personer-lada__rubrik {
  margin-bottom: var(--s-3);
  font-family: var(--font-text);
  font-weight: var(--vikt-fet);
  font-size: var(--fs-bas);
  letter-spacing: 0;
}
.personer-konto__text {
  margin-bottom: var(--s-4);
  color: var(--text-dampad);
  font-size: var(--fs-m);
  line-height: 1.45;
}
.personer-konto__knappar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ================= Smala ytor ================= */
@container innehall (max-width: 879.98px) {
  /* Raden bryter till två: initialerna, personen och pilen överst, roll, åtkomst och status med sina etiketter under */
  .personer-kolumner { display: none; }
  .personer .personer-panel { padding: var(--s-1) var(--s-2); }
  .personer-rad:first-child { border-top: 0; }
  .personer-rad__oppna {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    grid-template-areas: "ini person pil" "matt matt matt";
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-2);
  }
  .personer-rad__initialer { grid-area: ini; }
  .personer-rad__person { grid-area: person; }
  .personer-rad__pil { grid-area: pil; }
  .personer-rad__matt {
    grid-area: matt;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
  }
  .personer-rad__etikett {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    color: var(--text-dampad);
  }
  .personer-rad__status:empty { display: none; }
}
@container innehall (max-width: 559.98px) {
  /* Filtret på en rad i panelens bredd */
  .personer-flikar { display: flex; flex-wrap: nowrap; margin-inline: var(--s-1); }
  .personer-flik { flex: 1 1 auto; padding: 0 var(--s-2); }
}