/* ==========================================================================
   kundeadmin.css — kundefladen
   Indlæses EFTER grundlag.css og komponenter.css. Indeholder kun det, der
   adskiller kundeadmin fra tenantadmin. Ingen komponent redefineres her.

   Kendetegnet, en supportkonsulent aflæser på et halvt sekund:
     LYS chrome · BLÅ signaturstribe · BLØDE hjørner · tenantnavnet i båndet
   Modstykket står i tenantadmin.css.
   ========================================================================== */

.flade-kunde {
  /* --- Chrome: lys ------------------------------------------------------ */
  --signatur:         var(--primaer);       /* #0d5296 blå                   */
  --chrome-bund:      var(--hvid);
  --chrome-tekst:     var(--tekst-krop);
  --chrome-daempet:   var(--tekst-daempet);
  --chrome-kant:      var(--kant-kort);
  --rail-bund:        var(--graa-75);
  --rail-tekst:       var(--tekst-krop);
  --rail-daempet:     var(--tekst-daempet);
  --rail-aktiv-bund:  var(--hvid);
  --rail-aktiv-tekst: var(--tekst-overskrift);
  --chrome-fokus:     var(--graa-900);      /* mørk ring på lys chrome       */

  /* --- Flade og form: bløde hjørner, lys bund --------------------------- */
  --sideflade:    var(--graa-50);           /* #f5f7f9                       */
  --radius-lille: 3px;
  --radius:       6px;
  --radius-stor:  8px;
}

/* Tenantnavnet er fladens identitet og står først i båndet. */
.flade-kunde .topbaand__navn::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: var(--rum-2);
  border-radius: 2px;
  background: var(--signatur);
  vertical-align: baseline;
}

/* Badge i venstremenuen — kun ÉT sted: Godkendelseskøen.
   Tallet står skrevet, og en skjult tekst siger hvad det tæller; farven er
   tilbehør. Et badge, der altid lyser, holder ingen op med at ignorere. */
.flade-kunde .rail__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--tone-opmaerksom-tint);
  color: var(--tone-opmaerksom);
  border: 1px solid var(--tone-opmaerksom);
  font-family: var(--skrift-tal);
  font-size: var(--tekst-mikro);
  font-weight: var(--vaegt-fed);
  text-align: center;
  line-height: 18px;
}
.flade-kunde .rail__badge--nul {
  background: none;
  color: var(--tekst-daempet);
  border-color: var(--kant-felt);
}

/* K-14 · impersoneringsbåndet findes KUN her (ikke på platformsfladen).
   Det ligger over topbåndet og skubber alt ned — overlejrer aldrig. */
.flade-kunde .side { grid-template-rows: auto auto 1fr; }
.flade-kunde .baand--impersonering {
  grid-column: 1 / -1;
  grid-row: 1;
}
.flade-kunde .topbaand { grid-row: 2; }
.flade-kunde .rail,
.flade-kunde .indhold { grid-row: 3; }

/* Under impersonering skifter topbåndets signatur til advarselsfarven,
   så fladen er mærket, også når man har scrollet båndet forbi. */
.flade-kunde.impersoneret .topbaand {
  box-shadow: inset 0 4px 0 0 var(--baand-impersonering);
}
.flade-kunde.impersoneret .topbaand__navn::before { background: var(--baand-impersonering); }

/* Under 1024 px har fladen kun ÉN kolonne, og så lander rail og indhold i
   samme celle af den `grid-row: 3`, båndet ovenfor kræver. Rettelsen står
   HER og ikke i grundlag.css: et @media hæver ikke specificiteten, og dette
   ark indlæses sidst — en regel med samme specificitet i grundlag.css ville
   tabe mod linjerne ovenfor. Én række mere, indholdet en række længere nede. */
@media (max-width: 1023px) {
  .flade-kunde .side { grid-template-rows: auto auto auto 1fr; }
  .flade-kunde .rail { grid-row: 3; }
  .flade-kunde .indhold { grid-row: 4; }
}

/* Hjælpetekst på irreversible handlinger under impersonering. */
.flade-kunde.impersoneret .knap-forklaring--impersoneret { color: var(--baand-impersonering); font-weight: var(--vaegt-halvfed); }