/* public/portal/se-som.css — "Se som" (public/portal/se-som.js): knappen i topbjælken, listen over
   personer, banneret i den nye fane og siden, når visningen er lukket. Farver fra gt-ui.css. */

/* Knappen i topbjælken (kun admin) */
.gt-se-som-knap { white-space: nowrap; }
.gt-se-som-knap[aria-expanded="true"] { background: var(--gt-tekst); border-color: var(--gt-tekst); color: var(--gt-flade); }

/* Listen */
.ss-soeg-etiket { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gt-tekst2); margin-bottom: 4px; }
.ss-soeg { width: 100%; height: 40px; border: 1px solid var(--gt-kant); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--gt-flade2); color: var(--gt-tekst); margin-bottom: 12px; }
.ss-soeg:focus-visible { outline: 2px solid var(--gt-tekst); outline-offset: 1px; }
.ss-liste { display: flex; flex-direction: column; gap: 8px; }
.ss-rk { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--gt-flade2); border: 1px solid var(--gt-kant); border-radius: 8px; padding: 8px 12px; color: var(--gt-tekst); font: inherit; cursor: pointer; transition: border-color 150ms; }
.ss-rk:hover:not(:disabled), .ss-rk:focus-visible { border-color: var(--gt-accent); outline: none; }
.ss-rk:disabled { opacity: .6; cursor: default; }
.ss-maerke { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--gt-tekst); background: var(--gt-flade); border: 1px solid var(--gt-kant); }
.ss-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.ss-tx b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tx span { font-size: 12px; color: var(--gt-tekst2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-ny { font-size: 12px; color: var(--gt-tekst2); white-space: nowrap; }
.ss-rk:hover:not(:disabled) .ss-ny { color: var(--gt-accent); }
.ss-ingen { font-size: 14px; color: var(--gt-tekst2); padding: 8px 0; }
.ss-skelet { height: 50px; margin-bottom: 0; border-radius: 8px; }
.ss-besked { font-size: 13px; color: var(--gt-tone-ok); margin-top: 12px; }
.ss-besked:empty { display: none; }
.ss-besked.gt-fejl { color: var(--gt-tone-fejl); }

/* Banneret i en se som-fane: mørkt bånd over topbjælken, så fanen aldrig forveksles med ens egen. */
.gt-se-som-banner { background: var(--gt-tekst); color: var(--gt-flade); }
.gt-se-som-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: none; padding: 8px max(22px, calc((100vw - 980px) / 2 + 22px)); font-size: 13px; }
.gt-se-som-banner[hidden] { display: none; }
.gt-se-som-banner p { min-width: 0; }
.gt-se-som-banner b { font-weight: 700; }
.gt-se-som-prik { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--gt-accent); margin-right: 8px; vertical-align: 1px; }
.gt-se-som-kun { color: var(--gt-kant); }
.gt-se-som-banner button { flex-shrink: 0; background: none; border: 1px solid var(--gt-tekst2); color: var(--gt-flade); border-radius: 8px; padding: 4px 12px; font: inherit; font-size: 13px; white-space: nowrap; }
.gt-se-som-banner button:hover { border-color: var(--gt-accent); color: #fdf8ec; }

/* I en visning: ingen "Log ud" (den ville logge admin ud i alle faner) og ingen "Se som". */
.gt-i-se-som [data-log-ud], .gt-i-se-som #vis-se-som { display: none !important; }
.gt-i-se-som .gt-pop { top: 100px; }

/* Visningen er lukket */
.gt-se-som-lukket { max-width: 440px; padding: 24px; }
.gt-se-som-lukket h2 { font-family: Georgia, serif; font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.gt-se-som-lukket .gt-hint { margin-bottom: 16px; }

@media (max-width: 760px) {
  .gt-se-som-banner { padding: 8px 16px; font-size: 12px; }
  .gt-se-som-kun { display: none; }
  .ss-soeg { font-size: 16px; }
  .ss-ny { display: none; }
  .gt-i-se-som .gt-pop { top: 96px; }
}