/* DriveBase: händelseloggen på #/admin/logg (beslut 0008), i översiktens uttryck.
   Direkt på marinblått: vit text, typfilter som flikarna i adminens rubrikrad, ett sökfält som portalens sök och
   rader med tunna ljusa linjer som översiktens Senaste händelser. Ingen yta är fylld med färg. Bara klasser med
   prefixet .logg- och bara variabler ur tokens.css. */

.logg {
  min-width: 0;
  padding-bottom: var(--s-4);
  color: var(--text-pa-mork);
}

/* ================= Rubriken ================= */
.logg-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}
.logg-huvud__text { display: grid; gap: var(--s-2); min-width: 0; }
.logg-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);
}
.logg-lage {
  max-width: 62ch;
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-l);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* Den ljusa knappen i delens huvud, som Lägg till system och Bjud in */
.logg-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) {
  .logg-ljusknapp:hover { background: var(--yta-mjuk); }
}
.logg-ljusknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }
.logg-ljusknapp[aria-disabled="true"] { opacity: .5; cursor: default; }

/* Textknappen: entréns .text-button på marinblått, som översiktens Kvittera */
.logg-textknapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
}
.logg-textknapp:hover { text-decoration: underline; text-underline-offset: 5px; }
.logg-textknapp:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }
.logg-textknapp[aria-disabled="true"] { opacity: .5; cursor: default; text-decoration: none; }

/* ================= Filtret ================= */
.logg-verktyg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-8);
}
/* Flikarna har adminens form: en tunn ljus kontur och den aktiva fliken vit */
.logg-flikar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-m);
}
.logg-flik {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--klickyta);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-pa-mork);
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  cursor: pointer;
}
.logg-flik:hover { background: var(--hover-ljus); }
.logg-flik[aria-pressed="true"] { background: var(--pal-vit); color: var(--pal-navy); }
.logg-flik:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: 2px; }
.logg-flik__antal { font-variant-numeric: tabular-nums; font-weight: var(--vikt-mellan); opacity: .75; }

/* Sökfältet: konturfält på marinblått */
.logg-sok {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  max-width: 24rem;
  min-width: 0;
}
.logg-sok .ikon {
  position: absolute;
  left: 14px;
  color: var(--text-dampad-pa-mork);
  pointer-events: none;
}
.logg-sok input {
  width: 100%;
  min-height: var(--klickyta);
  padding: 0 var(--s-4) 0 46px;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-m);
  background: transparent;
  color: var(--text-pa-mork);
  font-family: var(--font-text);
  font-size: var(--fs-bas);
}
.logg-sok input::placeholder { color: var(--text-dampad-pa-mork); opacity: 1; }
.logg-sok input:hover { border-color: var(--text-dampad-pa-mork); }
.logg-sok input:focus-visible { outline: var(--fokus-bredd) solid var(--fokus-pa-mork); outline-offset: var(--fokus-avstand); }

/* ================= Listan ================= */
/* Rader med tunna ljusa linjer, som översiktens Senaste händelser */
.logg-resultat { margin-top: var(--s-6); }
.logg-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linje-pa-mork);
}
.logg-rad {
  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);
}
.logg-rad__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);
}
.logg-rad__markor .ikon { width: 18px; height: 18px; }
.logg-rad__text { min-width: 0; font-size: var(--fs-bas); line-height: 1.4; overflow-wrap: anywhere; }
.logg-rad__tid { color: var(--text-dampad-pa-mork); font-size: var(--fs-s); white-space: nowrap; }

/* Inga träffar och tom logg: kontur i stället för den ljusa ytan */
.logg-tomt {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-10) var(--s-4);
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-l);
  text-align: center;
}
.logg-tomt__titel {
  font-family: var(--font-rubrik);
  font-size: var(--fs-l);
  font-weight: var(--vikt-rubrik);
}
.logg-tomt__text { color: var(--text-dampad-pa-mork); font-size: var(--fs-s); }
.logg .tomt {
  border: 1.5px solid var(--linje-pa-mork);
  background: transparent;
  color: var(--text-pa-mork);
  --text-dampad: var(--text-dampad-pa-mork);
}
.logg .tomt__ikon { background: var(--hover-ljus); color: var(--text-pa-mork); }

/* ================= Smala ytor ================= */
@container innehall (max-width: 559.98px) {
  .logg-sok { flex-basis: 100%; max-width: none; }
  /* Tiden under texten, i textens spalt */
  .logg-rad { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; align-items: start; }
  .logg-rad__markor { grid-row: span 2; }
  .logg-rad__tid { grid-column: 2; }
}