/* V3.1: forbedret lesbarhet i <select> i dark mode */
html[data-theme="dark"] select,
body[data-theme="dark"] select {
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

html[data-theme="dark"] option,
body[data-theme="dark"] option {
  color: #0b1220;            /* tekst i dropdown-lista */
  background: #ffffff;       /* hvit bakgrunn for maksimal kontrast */
}

/* Hvis nettleseren faktisk bruker mørk bakgrunn for options, sørg for fallback */
@supports (color-scheme: dark) {
  html[data-theme="dark"] option {
    color: #0b1220;
    background: #ffffff;
  }
}

/* Shoutbox */
.shout-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.shout{
  display:flex;
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(255,255,255,.02);
}
.shout-avatar{
  width:42px;
  height:42px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.15);
}
.shout-body{ flex:1; min-width:0; }
.shout-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:baseline;
  margin-bottom:6px;
}
.shout-msg{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media (max-width: 720px){
  .grid.grid-2{ grid-template-columns: 1fr; }
}
/* Shoutbox: avatar + nivå-badge */
.shout-avatar-wrap{
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}
.shout-avatar{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.15);
  display: block;
}
.shout-badge{
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
/* Tabeller: unngå "halve streker" fra understrek på lenker */
.table a{ text-decoration: none; }
.table a:hover{ text-decoration: underline; }

/* Personcelle: avatar + navn i samme kolonne */
.lb-person{
  width: 1%;
  min-width: 90px;
}
.lb-name-under{
  margin-top: 6px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.lb-name-under a{ color: inherit; text-decoration: none; }

.lb-avatar-wrap{ position: relative; width:34px; height:34px; }
.lb-avatar-img{ width:32px; height:32px; border-radius:8px; object-fit:cover; border:1px solid rgba(255,255,255,.18); display:block; }
.lb-avatar-wrap-lg{ width:40px; height:40px; }
.lb-avatar-img-lg{ width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.15); }

/* Badge litt inn (-2px) */
.lb-badge-img{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:22px;
  height:22px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}

.lb-count{ text-align:right; white-space:nowrap; }

/* Ikke del opp header-ord */
.table th{ white-space: nowrap; }

@media (max-width: 520px){
  .table{ font-size: 14px; }
  .table th{ font-size: 14px; }
  .lb-name-under{ max-width: 110px; font-size: 14px; }
  .lb-col-count{ width: 58px; }
}