/* Entrén på #/logga-in: entréns komponenter, ur entrén i DriveSpace @ 26cbc0b (komponenter.css), alla under .inloggning. */

/* ---------- Ytornas omfång ---------- */
/* Roten är marinblå (.inloggning-pa-mork). Kortet, dialogen, utforskaren och .inloggning-kort är ljusa öar.
   Komponenterna läser egenskaperna nedan, så att en ljus ö inuti den mörka sidan blir rätt. */
.inloggning.inloggning-pa-mork {
  --fokus: var(--fokus-pa-mork);
  --text: var(--text-pa-mork);
  --text-dampad: var(--text-dampad-pa-mork);
  --diagram-grans: var(--text-dampad-pa-mork);
  --status-yta: transparent;
  --status-kant: var(--linje-pa-mork);
  --status-kontur: var(--pal-vit);
  --status-bygger: var(--pal-vit);
  --chip-yta: var(--hover-ljus);
  --chip-ai-kant: var(--linje-pa-mork);
}
.inloggning :is(.pa-ljus, .inloggning-kort, dialog) {
  --fokus: var(--pal-navy);
  --text: var(--pal-text);
  --text-dampad: var(--pal-dampad);
  --diagram-grans: var(--pal-dampad);
  --status-yta: var(--pal-vit);
  --status-kant: var(--linje);
  --status-kontur: var(--pal-text);
  --status-bygger: var(--pal-navy);
  --chip-yta: var(--yta-mjuk);
  --chip-ai-kant: var(--linje-falt);
}

/* ---------- Kort (K3 rad 217-228) ---------- */
.inloggning .inloggning-kort {
  min-width: 0;
  padding: var(--s-6);
  border: 1.5px solid var(--linje);
  border-radius: var(--r-l);
  background: var(--yta);
  color: var(--text);
}
@media (max-width: 559.98px) {
  .inloggning .inloggning-kort { padding: var(--s-5) var(--s-4); }
}

/* ---------- Statusmärket (K3 rad 260-336): form plus text, aldrig bara färg ---------- */
.inloggning .inloggning-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 4px 14px 4px 10px;
  border: 1.5px solid var(--status-kant, var(--linje));
  border-radius: var(--r-rund);
  background: var(--status-yta);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: var(--vikt-fet);
  font-size: var(--fs-m);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.inloggning .inloggning-status::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--status-okant);
  border-radius: 50%;
  background: transparent;
}
.inloggning .inloggning-status--uppe::before {
  border: 0;
  background: var(--status-uppe);
}
.inloggning .inloggning-status--bygger::before {
  border-color: var(--status-bygger);
  background: linear-gradient(to top, var(--status-bygger) 50%, transparent 50%);
}

/* ---------- Chip (K3 rad 339-356) och AI-chipet ---------- */
.inloggning .inloggning-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px;
  border: 1.5px solid transparent;
  border-radius: var(--r-s);
  background: var(--chip-yta, var(--yta-mjuk));
  color: var(--text);
  font-family: var(--font-text);
  font-weight: var(--vikt-fet);
  font-size: var(--fs-xs);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}
/* DB.entre.aiChip(): streckad kant och gnistan som liten dekor före texten. */
.inloggning .inloggning-chip--ai { border: 1.5px dashed var(--chip-ai-kant, var(--linje-falt)); }
.inloggning .inloggning-chip--ai .gnista { width: 12px; height: 12px; }

/* ---------- Gnistan, DB.entre.gnista() ---------- */
.inloggning .gnista {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: var(--gnista);
  vertical-align: middle;
}

/* ---------- Segmentflikar (K3 rad 699-773). Introt lägger den glidande plattan ovanpå. ---------- */
.inloggning .inloggning-flikar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: var(--s-1);
  border: 1.5px solid var(--linje);
  border-radius: 18px;
  background: var(--yta);
}
@media (max-width: 759.98px) {
  .inloggning .inloggning-flikar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    width: 100%;
  }
  .inloggning .inloggning-flikar .inloggning-flik { justify-content: center; min-width: 0; padding-inline: var(--s-3); white-space: normal; text-align: center; }
}
.inloggning .inloggning-flik {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  min-height: var(--klickyta);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: var(--text);
  font-family: var(--font-text);
  font-weight: var(--vikt-fet);
  font-size: var(--fs-m);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva);
}
.inloggning .inloggning-flik:hover { background: var(--hover-mork); text-decoration: none; }
.inloggning .inloggning-flik:focus-visible { outline: var(--fokus-bredd) solid var(--fokus); outline-offset: -3px; }
.inloggning .inloggning-flik[aria-selected="true"],
.inloggning .inloggning-flik[aria-pressed="true"],
.inloggning .inloggning-flik[aria-current="page"],
.inloggning .inloggning-flik[aria-current="true"] {
  background: var(--primar);
  color: var(--primar-text);
  --fokus: var(--fokus-pa-mork);
}
.inloggning .inloggning-flik:disabled { background: none; color: var(--avstangd-text); cursor: not-allowed; }

/* ---------- Överraden (K3 vyer/portal.css rad 16-31) ---------- */
.inloggning .overrad {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dampad);
  font-weight: var(--vikt-fet);
  font-size: var(--fs-m);
}
.inloggning .overrad::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
}