/*
 * admin-side — designspråk for "pyntesider": admin, innstillinger, profil,
 * onboarding. Brukes der innholdet er skjemaer og bevisste handlinger, ikke
 * datatunge tabeller. Se 05-frontend.md §1.1 for kriterier og full liste.
 *
 * Designspråket er inspirert av Claude/UniFi sine innstillingsmodaler:
 * rad-basert (label til venstre, kontroll til høyre), gruppert i seksjoner
 * med tydelig overskrift, subtile linjer mellom rader — ingen tunge kort-
 * rammer rundt hver enkelt innstilling.
 *
 * Markup-mønster:
 *   <section class="seksjon admin-side">
 *     <header class="admin-side__topp">
 *       <h1 class="admin-side__overskrift">Tittel</h1>
 *       <p class="admin-side__undertittel">Forklaring</p>
 *     </header>
 *
 *     <section class="admin-seksjon">
 *       <h2 class="admin-seksjon__tittel">Gruppe</h2>
 *
 *       <div class="admin-rad">
 *         <div class="admin-rad__label">
 *           <span class="admin-rad__label-tekst">Innstilling</span>
 *           <span class="admin-rad__hjelp">Kort hjelp</span>
 *         </div>
 *         <div class="admin-rad__kontroll">
 *           <label class="bryter">…</label>
 *         </div>
 *       </div>
 *
 *       <div class="admin-rad admin-rad--stablet">
 *         <div class="admin-rad__label">…</div>
 *         <p class="admin-rad__beskrivelse">Lengre forklaring</p>
 *         <textarea class="felt felt--full">…</textarea>
 *       </div>
 *     </section>
 *
 *     <div class="admin-handlinger">
 *       <button class="knapp knapp--primary">Lagre</button>
 *     </div>
 *   </section>
 */

/* Wrapper — bygger på .seksjon, gir bredde-grense og topp-luft. */
.admin-side {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--avstand-7); /* 48 px — luft fra navbar */
  padding-bottom: var(--avstand-8); /* 64 px — bunn-luft */
  gap: var(--avstand-6);
}

/* Topp-seksjon: overskrift + undertittel + valgfri handlinger til høyre.
   Bruk .admin-side__topp-tekst-wrapperen rundt H1+P slik at handlinger kan
   ligge til høyre via flex-justify. Wrapperen er obligatorisk — vi støtter
   ikke H1 og P som direkte barn (det ville stable feil i flex-row). */
.admin-side__topp {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--avstand-4);
  margin-bottom: var(--avstand-5);
  flex-wrap: wrap;
}

.admin-side__topp-tekst {
  flex: 1;
  min-width: 0;
}

.admin-side__topp-handlinger {
  display: flex;
  gap: var(--avstand-2);
  flex-shrink: 0;
  align-items: center;
}

/* Tilbake-lenke — vises som breadcrumb over H1 på undersider. Plasser
   som første barn i .admin-side__topp-tekst. Visuelt subtilt så den ikke
   konkurrerer med overskriften. */
.admin-side__tilbake {
  display: inline-flex;
  align-items: center;
  gap: var(--avstand-1);
  font-size: var(--font-base);
  color: var(--farge-tekst-dempet);
  margin-bottom: var(--avstand-2);
  text-decoration: none;
  font-weight: 500;
}
.admin-side__tilbake:hover {
  color: var(--farge-tekst);
  text-decoration: none;
}
.admin-side__tilbake:focus-visible {
  outline: 2px solid var(--farge-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.admin-side__overskrift {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--avstand-2) 0;
  color: var(--farge-tekst);
}

.admin-side__undertittel {
  font-size: var(--font-stor);
  color: var(--farge-tekst-dempet);
  margin: 0;
  line-height: 1.4;
  max-width: 60ch;
}

/* Seksjons-gruppering — alle rader i samme tema (f.eks. "Sikkerhet",
   "Onboarding"). Gir lufting mellom grupper og en h2 som anker. */
.admin-seksjon {
  margin-bottom: var(--avstand-6);
}

.admin-seksjon:last-of-type {
  margin-bottom: 0;
}

.admin-seksjon__tittel {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--avstand-4) 0;
  color: var(--farge-tekst);
}

/* Rad — én innstilling. Default er horisontal: label venstre + kontroll høyre.
   Subtil divider mellom rader (border-top, ikke border-bottom, så siste rad
   ikke trenger override). */
.admin-rad {
  display: flex;
  align-items: center;
  gap: var(--avstand-5);
  padding: var(--avstand-4) 0;
  border-top: 1px solid var(--farge-radkant);
  min-height: 56px;
}

.admin-rad:first-child {
  border-top: none;
  padding-top: 0;
}

.admin-rad:last-child {
  padding-bottom: 0;
}

/* Label-kolonnen — fast bredde for å holde kontroller på linje. */
.admin-rad__label {
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 280px;
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--farge-tekst);
}

.admin-rad__label-tekst {
  /* Wrapper for å samspille pent med tooltip-ikonet. */
}

.admin-rad__hjelp {
  font-size: var(--font-liten);
  color: var(--farge-tekst-svak);
  font-weight: 400;
  line-height: 1.4;
}

/* Kontroll-kolonnen — fyller resten, høyrejustert innhold som default. */
.admin-rad__kontroll {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--avstand-2);
  min-width: 0; /* tillat at innhold krymper i stedet for å sprenge raden */
}

.admin-rad__kontroll--venstre {
  justify-content: flex-start;
}

/* Stablet-variant — label oppe, kontroll under. Brukes for textareas,
   lange dropdown-menyer, eller når kontrollen trenger full bredde. */
.admin-rad--stablet {
  flex-direction: column;
  align-items: stretch;
  gap: var(--avstand-2);
}

.admin-rad--stablet .admin-rad__label {
  min-width: 0;
  max-width: none;
}

.admin-rad--stablet .admin-rad__kontroll {
  justify-content: flex-start;
  flex: 1;
}

/* Beskrivelse for stablet-rader: ligger mellom label og kontroll. */
.admin-rad__beskrivelse {
  font-size: var(--font-base);
  color: var(--farge-tekst-dempet);
  margin: 0 0 var(--avstand-2) 0;
  line-height: 1.5;
  max-width: 56ch;
}

/* Tekstområder i admin-rad skal være litt mer luftige enn dataview-felt. */
.admin-rad .felt {
  padding: var(--avstand-3);
  line-height: 1.5;
}

.admin-rad textarea.felt {
  min-height: 96px;
  font-family: var(--font-monospace);
  font-size: var(--font-base);
}

/* Handlings-rad nederst — typisk én primary-knapp. */
.admin-handlinger {
  display: flex;
  gap: var(--avstand-2);
  justify-content: flex-end;
  margin-top: var(--avstand-5);
  padding-top: var(--avstand-4);
  border-top: 1px solid var(--farge-kant);
}

.admin-handlinger--venstre {
  justify-content: flex-start;
}

/* Meta-tekst nederst (sist oppdatert, osv) — subtil, ikke konkurrer. */
.admin-meta {
  margin-top: var(--avstand-5);
  font-size: var(--font-liten);
  color: var(--farge-tekst-svak);
  line-height: 1.5;
  text-align: center;
}

/* Flash-meldinger i admin-mode. */
.admin-flash {
  padding: var(--avstand-3) var(--avstand-4);
  border-radius: var(--radius);
  font-size: var(--font-base);
  margin-bottom: var(--avstand-4);
  border: 1px solid;
}

.admin-flash--ok {
  background: color-mix(in srgb, var(--farge-ok) 10%, var(--farge-bakgrunn));
  border-color: color-mix(in srgb, var(--farge-ok) 40%, var(--farge-kant));
  color: var(--farge-tekst);
}

.admin-flash--feil {
  background: color-mix(in srgb, var(--farge-feil) 10%, var(--farge-bakgrunn));
  border-color: color-mix(in srgb, var(--farge-feil) 40%, var(--farge-kant));
  color: var(--farge-tekst);
}

/* Responsivt: på smale viewporter (tablet/mobil) bør radene stables også
   for default-varianten, ellers presses label og kontroll for tett. */
@media (max-width: 640px) {
  .admin-rad {
    flex-direction: column;
    align-items: stretch;
    gap: var(--avstand-2);
  }
  .admin-rad__label {
    min-width: 0;
    max-width: none;
  }
  .admin-rad__kontroll {
    justify-content: flex-start;
  }
}