/* === PROFILE PAGE (scoped) === */
.profile-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}
.profile-page .muted { color: #666; }
.profile-page .chip {
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.8rem; margin-right:.35rem;
  background:#eef2ff; color:#4338ca;
}
.profile-page .chip.ok { background:#e8fff0; color:#16a34a; }
.profile-page .chip.warn { background:#fff7ed; color:#ea580c; }
.profile-page .chip.link { background:#e0f2fe; color:#0369a1; text-decoration:none; }

.profile-hero {
  display:flex; gap:1rem; align-items:center; margin-bottom:1rem;
  background:linear-gradient(180deg,#f9fbff,#fff); padding:1rem; border-radius:12px; border-left:5px solid #007bff;
}
.p-avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid #007bff; }
.p-hero-text h1 { margin:.1rem 0 .25rem; font-size:1.5rem; }
.p-hero-text .chips { margin-top:.25rem; }

.p-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.profile-page .card { background:#fff; border-radius:12px; box-shadow:0 3px 12px rgba(0,0,0,.08); padding:1rem 1.2rem; display:flex; flex-direction:column; }
.profile-page .card h3 { margin:.1rem 0 .6rem; }

.kv { list-style:none; padding:0; margin:0; }
.kv li { display:flex; justify-content:space-between; padding:.35rem 0; border-bottom:1px dashed #eee; }
.kv li span { color:#555; }
.kv li strong { color:#222; }
/* === Forbedret utseende for "Dine detaljer" === */
.kv li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem .3rem;
  border-bottom: 1px dashed #eee;
}

.kv li span {
  flex: 1;
  color: #555;
}

.kv li strong {
  flex: 1;
  text-align: right;
  color: #111;
  word-break: break-word;
}

.kv li strong a.homepark-link {
  color: #0369a1;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.kv li strong a.homepark-link:hover {
  background: #e0f2fe;
  color: #075985;
}


.missing { background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:.6rem; margin-top:.6rem; }
.missing ul { padding-left:1.2rem; margin:.35rem 0 0; }

.medal-row { display:flex; gap:.8rem; margin-bottom: 0.8rem;}
.medal { flex:1; background:#f9fafb; border-radius:10px; padding:.6rem; text-align:center; }
.medal b { font-size:1.2rem; display:block; }
.medal.gold span{filter:saturate(1.3);}
.medal.silver span{filter:grayscale(.2);}
.medal.bronze span{filter:saturate(.9) brightness(.95);}

.tbl { width:100%; border-collapse:collapse; }
.tbl th, .tbl td { padding:.45rem .4rem; border-bottom:1px solid #eee; text-align:left; font-size:.92rem; }
.tbl.compact th, .tbl.compact td { padding:.35rem .35rem; }

.achv-summary { display:flex; gap:1rem; margin-bottom:.6rem; }
.achv-summary > div { background:#f9fafb; border-radius:10px; padding:.6rem .8rem; text-align:center; flex:0 0 auto; }
.achv-summary b { font-size:1.2rem; display:block; }

.achv-list { display:grid; gap:.6rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.badge { border:1px solid #eee; border-radius:10px; padding:.6rem .7rem; display:flex; flex-direction:column; gap:.25rem; }
.badge.on { border-color:#000000; background:#f0fdf4; }
.badge.off { background:#f8fafc; }
.badge .title { font-weight:600; }
.badge .desc { color:#555; font-size:.9rem; }
.badge .pts { margin-top:.2rem; color:#065f46; font-weight:600; }

.rec-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.rec-list li { display:flex; align-items:center; gap:.6rem; background:#f9fafb; padding:.5rem .6rem; border-radius:10px; }
.rec-list .tag { font-size:1rem; }
.ms-btn.outline { background:#fff; border:1px solid #e5e7eb; color:#111; }
.ms-btn.outline.sm { height:32px; padding:0 .6rem; border-radius:8px; font-size:.85rem; }

/* === PROFILE EDIT MODAL === */
.nv-modal-backdrop {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 1rem;
  box-sizing: border-box;
}

.nv-modal-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  animation: nvModalFadeIn 0.25s ease;
}

@keyframes nvModalFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.nv-modal-head {
  background: #f5f7fa;
  padding: 0.9rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
}

.nv-modal-head .btn-close {
  background: none;
  border: none;
  font-size: 0.9rem;
  color: #666;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.nv-modal-head .btn-close:hover {
  background: #eee;
}

.nv-modal-body {
  padding: 1.4rem;
  font-size: 0.95rem;
  color: #222;
  background: #fff;
}

#editProfileForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#editProfileForm label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  color: #333;
  font-size: 0.9rem;
}

#editProfileForm input[type="text"],
#editProfileForm input[type="email"],
#editProfileForm input[type="date"] {
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#editProfileForm input:focus {
  border-color: #0078d4;
  box-shadow: 0 0 0 2px rgba(0,120,212,0.15);
  outline: none;
}

#editProfileForm .ms-btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

#editProfileForm .ms-btn.danger {
  background-color: #d33;
  color: #fff;
  border: none;
}
#editProfileForm .ms-btn.danger:hover {
  background-color: #b22;
}

#editMsg {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #333;
}

/* === Dropdown styling (for profilmodalen) === */
#editProfileForm select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #222;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: linear-gradient(45deg, transparent 50%, #666 50%), 
                    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px),
                       calc(100% - 12px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

#editProfileForm select:focus {
  border-color: #0078d4;
  box-shadow: 0 0 0 2px rgba(0,120,212,0.15);
  outline: none;
}

#editProfileForm select:hover {
  border-color: #999;
}

#editProfileForm option {
  padding: 4px 6px;
}

/* --- Fix for narrow selects (mobile-friendly) --- */
@media (max-width: 480px) {
  #editProfileForm select {
    font-size: 1rem;
    padding: 10px 12px;
  }
}

/* === Ensartet stil for knapper og lenker i profilkort === */
.ms-btn-group a.ms-btn,
.ms-btn-group button.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 40px;
  line-height: 1;
  padding: 0 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

/* Match visuell stil for forskjellige typer */
.ms-btn.primary {
  background: #0078d4;
  color: #fff;
  border: none;
}
.ms-btn.primary:hover {
  background: #005fa3;
}

.ms-btn.secondary {
  background: #f3f4f6;
  color: #111;
  border: 1px solid #d1d5db;
}
.ms-btn.secondary:hover {
  background: #e5e7eb;
}
/* === FIKS for knapperekke i profilkort === */
.ms-btn-group {
  display: flex;
  flex-wrap: wrap;              /* tillat linjebryting */
  gap: 0.5rem;                  /* mellomrom mellom knapper */
  margin-top: 1rem;
}

.ms-btn-group .ms-btn {
  flex: 1 1 auto;               /* la knappene tilpasse seg kortets bredde */
  min-width: 140px;             /* aldri for små */
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .ms-btn-group .ms-btn {
    flex: 1 1 100%;             /* på mobil — legg de under hverandre */
  }
}
/* === Forbedret utseende for banerekordkort === */
.rec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rec-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: linear-gradient(180deg, #f9fafb, #fff);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rec-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.rec-list .tag {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.rec-list .rec-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rec-list .rec-content b {
  font-size: 1rem;
  color: #111;
}

.rec-list .rec-meta {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.2rem;
}

.rec-list .rec-meta span {
  color: #0369a1;
}
.rec-list .rec-title {
  font-size: 1.05rem;
  color: #0f172a;
  font-weight: 600;
}

.rec-list .rec-meta {
  font-size: 0.9rem;
  color: #475569;
  margin-top: 0.25rem;
}

.rec-list .rec-meta span {
  color: #0369a1;
}

/* === ACHIEVEMENT CARDS (BRAGDER) — NY OG REN VERSJON === */
.achv-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.achv-summary > div {
  flex: 0 0 auto;
  background: #f9fafb;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  text-align: center;
}
.achv-summary b {
  font-size: 1.1rem;
  display: block;
}

/* --- Grid med kort --- */
.achv-list {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* --- Selve kortet --- */
.badge {
  position: relative;
  border: 1px solid #000000;
  border-left: 6px solid transparent;
  border-radius: 12px;
  padding: 0.9rem 1rem 0.8rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.badge:hover {
  transform: translateY(-2px);
}
.badge.on {
  border-color: var(--achv-color, #000000);
  background: linear-gradient(180deg, var(--achv-color, #d1fae5)18%, #fff 90%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.badge.off {
  opacity: 0.65;
  background: #f8fafc;
  filter: grayscale(0.3);
}

/* --- Tittelrad --- */
.badge .title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: #111;
  font-size: 1rem;
}

/* --- Subtil nivåtekst øverst til høyre --- */
.achv-level-text {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.65rem;      /* veldig liten */
  font-weight: 800;
  opacity: 0.70;           /* subtil */
  color: var(--achv-color, #666);
  font-style: bold;
  pointer-events: none;
  user-select: none;
}

/* --- Beskrivelse og poeng --- */
/* --- Beskrivelse og poeng (oppdatert for bedre lesbarhet) --- */
.badge .desc {
  color: #000;
  font-size: 0.88rem;
  line-height: 1.35;
  font-weight: 600;
  position: relative;
  z-index: 2;

  
  
}

.badge .pts {
  align-self: flex-end;
  font-weight: 600;
  font-size: 0.82rem;
  position: relative;
  z-index: 2;

  /* Farge og lys bakgrunn */
  color: #0F9400;
  

  /* Lett skygge bak tekst for kontrast */
  
}

/* --- Nivåliste i modalen --- */
.achv-levels {
  list-style: none;
  padding-left: 0;
  margin-top: 0.6rem;
  border-top: 1px solid #eee;
}
.achv-levels li {
  background: #fafafa;
  margin-top: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.achv-levels li.active {
  background: #fffbe6;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}
.achv-levels .lvl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.achv-levels .lvl-name {
  font-size: 0.82rem;
}
.achv-levels .lvl-points {
  font-size: 0.78rem;
  color: #333;
}
.achv-levels .lvl-desc {
  font-size: 0.78rem;
  color: #555;
  margin-top: 0.2rem;
  
}

/* =========================================================
   🔒 KANONISK: Knapperekker i profil (desktop + mobil)
   Bruk Grid for å unngå flex-wrap/inline-block konflikt.
   ========================================================= */

/* Knappebeholder – grid på tvers av sidene */
.profile-page .ms-btn-group,
.profile-page .ms-profile-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  width: 100%;
  align-items: stretch;
  box-sizing: border-box;
  margin-top: 1rem;
}

/* Selve knappene – sikre konsistent form og sentrering */
.profile-page .ms-btn-group .ms-btn,
.profile-page .ms-profile-actions .ms-btn {
  display: flex !important;           /* trumfer inline-block globalt */
  justify-content: center;
  align-items: center;
  height: 44px;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;                /* holdes på desktop */
  min-width: 0;                       /* tillat shrink i grid */
  max-width: 100%;
  box-sizing: border-box;
}

/* 📱 Mobil: alltid 1 kolonne, bryt linjer hvis nødvendig */
@media (max-width: 700px) {
  .profile-page .ms-btn-group,
  .profile-page .ms-profile-actions {
    grid-template-columns: 1fr !important;  /* én pr. rad uansett */
  }
  .profile-page .ms-btn-group .ms-btn,
  .profile-page .ms-profile-actions .ms-btn {
    width: 100%;
    white-space: normal;    /* tillat brytning av tekst for å hindre overflow */
  }
}

/* 🔧 Forebygging av “breddelås” pga min-width i foreldre */
.profile-page .p-grid,
.profile-page .card {
  min-width: 0;  /* viktig i grid/flex for å hindre horisontal overflow */
}

/* Bevar primær/sekundær farger men unngå å re-definere layout */
.profile-page .ms-btn.primary { background: #007bff; color: #fff; border: none; }
.profile-page .ms-btn.primary:hover { background: #0069d9; }
.profile-page .ms-btn.danger  { background: #dc3545; color: #fff; border: none; }
.profile-page .ms-btn.danger:hover { background: #b92b3a; }
.profile-page .ms-btn.secondary { background: #f3f4f6; color: #111; border: 1px solid #d1d5db; }
.profile-page .ms-btn.secondary:hover { background: #e5e7eb; }

/* =========================================================
   🔧 FIKS: Knappene i "Endre profil"-modalkortet
   ========================================================= */

/* 1️⃣ Modalens knappegruppe */
#editProfileForm .ms-btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
}

/* 2️⃣ Selve knappene */
#editProfileForm .ms-btn {
  display: flex !important;           /* trumfer inline-block globalt */
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-width: 140px;
  height: 42px;                       /* 🔹 gir fyldig, pen høyde */
  font-size: 0.95rem;
  border-radius: 8px;
  text-align: center;
  box-sizing: border-box;
  padding: 0 1rem;
  line-height: 1;
}

/* 3️⃣ Mobil: knappene under hverandre */
@media (max-width: 600px) {
  #editProfileForm .ms-btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  #editProfileForm .ms-btn {
    width: 100%;
    min-width: 0;
  }
}

/* 4️⃣ Sikre visuell konsistens */
#editProfileForm .ms-btn.primary {
  background: #0078d4;
  color: #fff;
  border: none;
}
#editProfileForm .ms-btn.primary:hover {
  background: #005fa3;
}

#editProfileForm .ms-btn.danger {
  background: #d33;
  color: #fff;
  border: none;
}
#editProfileForm .ms-btn.danger:hover {
  background: #b22;
}