/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── «Send lenke»-modalen i nettsikkerhetsveiviseren ──────────────────────
 *
 * Torleiv 24.10.2026: «begge deler åpnes i modal uten at en hopper bort fra
 * der en var kommet.»
 *
 * UTEN SKRIPT ER DETTE EN HELT VANLIG SEKSJON i flyten, og da gjelder ingen
 * av reglene her — de slår bare inn når sikkerhet.js har flyttet panelet inn
 * i en <dialog>. Samme mønster som bestillingssiden: det som skjules, skjules
 * fra skriptet og ikke i malen.
 *
 * REGLENE STÅR UTENFOR @layer, med vilje. Tailwind legger sine klasser i
 * `@layer utilities`, og stiler uten lag vinner over stiler i et lag uansett
 * spesifisitet. Panelet beholder altså sin egen ramme i flyten, og mister den
 * inne i modalen — uten !important.
 */
dialog.send-lenke-modal {
  /* SENTRERT, OG DET MÅ STÅ HER. Nettleserens egen regel for en modal
   * <dialog> er `inset: 0; margin: auto` — altså midt på skjermen. Men
   * Tailwinds preflight nullstiller margin på ALT, og da vinner den over
   * nettleserens regel: dialogen havner i øverste venstre hjørne.
   * Torleiv 24.10.2026, med skjermbilde: «på pc må modalen være
   * sentrert». Målt i systemtesten, ikke bare satt. */
  inset: 0;
  margin: auto;
  width: min(34rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  color: var(--color-base-content);
}

dialog.send-lenke-modal::backdrop {
  background: rgb(10 40 75 / 0.55);
}

/* Inne i modalen ER dialogen flata. Panelets egen ramme og bakgrunn ville
 * blitt en ramme inni en ramme. */
dialog.send-lenke-modal > .send-lenke-panel {
  margin: 0;
  border: 0;
  background: transparent;
}

/* Lukkeknappen i modalen. Den lages av sikkerhet.js og finnes ikke i noen
 * mal, så den har sin egen klasse her i stedet for Tailwind-klasser: det
 * Tailwind ikke finner i en kildefil, bygger den ikke. */
dialog.send-lenke-modal > .send-lenke-panel { position: relative; }

.send-lenke-lukk {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-muted, #475569);
  cursor: pointer;
}

.send-lenke-lukk:hover { background: var(--color-base-200, #f1f5f9); }