/**
 * Varsel - kvittering, feil, advarsel eller opplysning i sidas flyt.
 *
 * Enkel form er en <p class="varsel varsel--ok">. Med ikon, tittel eller
 * lukkeknapp blir den en <div> med samme klasser og egne deler.
 *
 * Formene er betydning, ikke farge: info = opplysning, ok = gikk bra,
 * advarsel = se her, feil = noe er galt.
 */

.varsel {
  border-left: 3px solid var(--border, var(--color-divider-strong, var(--color-divider)));
  background: color-mix(in srgb, var(--card-bg, var(--color-surface)) 70%, transparent);
  padding: 9px 12px;
  margin: 0 0 var(--space-4);
  font-size: var(--tt-ui-text, 14px);  /* Jaktleder: brødtekstens størrelse; ttas 14px */
  color: var(--text, var(--color-text));
  border-radius: 0 var(--radius, 6px) var(--radius, 6px) 0;
}

.varsel--info     { border-left-color: rgb(var(--primary-rgb)); }
.varsel--ok       { border-left-color: rgb(var(--success-rgb)); }
.varsel--advarsel { border-left-color: var(--color-warning); }
.varsel--feil     { border-left-color: var(--color-danger); }

/* Rik form: ikon + kropp + lukkeknapp på en linje. */
div.varsel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 720px;
}

.varsel__ikon { font-size: 16px; margin-top: 1px; flex-shrink: 0; }

.varsel--info     .varsel__ikon { color: rgb(var(--primary-rgb)); }
.varsel--ok       .varsel__ikon { color: rgb(var(--success-rgb)); }
.varsel--advarsel .varsel__ikon { color: var(--color-warning); }
.varsel--feil     .varsel__ikon { color: var(--color-danger); }

.varsel__kropp  { flex: 1; min-width: 0; }
.varsel__tittel { font-weight: 600; margin: 0 0 2px; }
.varsel__tekst  { margin: 0; color: var(--text-muted); line-height: 1.55; }

.varsel__lukk {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  font-size: 13px;
  line-height: 1;
  min-width: 24px;
  min-height: 24px;
}
.varsel__lukk:hover { color: var(--text); }

/* Banner: systemmelding over hele bredden, fylt flate. */
.varsel--banner {
  border-left: 0;
  border-radius: var(--radius, 6px);
  background: rgb(var(--primary-rgb));
  color: rgb(var(--primary-fg-rgb));
  align-items: center;
  max-width: none;
  padding: 10px 14px;
}
.varsel--banner .varsel__ikon,
.varsel--banner .varsel__tekst,
.varsel--banner .varsel__lukk { color: rgb(var(--primary-fg-rgb)); }
.varsel--banner .varsel__lukk { opacity: .8; }
.varsel--banner .varsel__lukk:hover { opacity: 1; }

/* ------------------------------------------------------------------ toast
   Varselet som toast (`toast` i varsel.php, Ds1Varsel/Ds1Toast i varsel.js). Fra ttas sin toast.css (én komponent her).
   Jaktleder: toppen regnes fra appens header og toppmelding (--ws-shell-header-h, --shell-topmsg-h), ikke --ttas-shell-header-h. */

/* Midt på siden rett under headeren, over slidein-panelet (dekket lukkeknappen i panelet). */
.ds1_toast-container {
    position: fixed;
    top: calc(var(--ws-shell-header-h, 0px) + var(--shell-topmsg-h, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10060;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100% - 32px);
}

.ds1_toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius, 8px);
    /* Svak tone og farget venstrekant etter type, så toasten skiller seg fra skjemaet bak. */
    --toast-rgb: var(--primary-rgb, 59, 130, 246);
    background: color-mix(in srgb, rgb(var(--toast-rgb)) 14%, var(--card-bg, #fff));
    border: 1px solid color-mix(in srgb, rgb(var(--toast-rgb)) 45%, var(--card-bg, #fff));
    border-left: 4px solid rgb(var(--toast-rgb));
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    pointer-events: auto;
    animation: ds1_toast-in 0.3s ease forwards;
    max-width: 100%;
    box-sizing: border-box;
}

.ds1_toast.ds1_toast--removing {
    animation: ds1_toast-out 0.25s ease forwards;
}

@keyframes ds1_toast-in {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds1_toast-out {
    from { opacity: 1; transform: translateY(0); max-height: 120px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateY(-16px); max-height: 0; margin-bottom: -8px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ds1_toast, .ds1_toast.ds1_toast--removing { animation-duration: .01s; }
}

.ds1_toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 1px;
}

.ds1_toast--success { --toast-rgb: var(--success-rgb, 34, 197, 94); }
.ds1_toast--error   { --toast-rgb: var(--destructive-rgb, 239, 68, 68); }
.ds1_toast--warning { --toast-rgb: var(--warning-rgb, 245, 158, 11); }
.ds1_toast--info    { --toast-rgb: var(--primary-rgb, 59, 130, 246); }
.ds1_toast .ds1_toast-icon { color: rgb(var(--toast-rgb)); }

.ds1_toast-body {
    flex: 1;
    min-width: 0;
}

.ds1_toast-title {
    /* Tekststørrelse og vekt 400 (ingen fet skrift utenom sidetittelen). */
    font-size: var(--tt-ui-text, 13px);
    font-weight: 400;
    color: var(--text, #1a1a1a);
    margin-bottom: 2px;
}
.ds1_toast-title:only-child { margin-bottom: 0; }

.ds1_toast-message {
    font-size: 13px;
    color: var(--text-muted, #666);
    line-height: 1.4;
    word-break: break-word;
}

/* Handling (options.handling, f.eks. Angre): liten tekstknapp under meldingen, vekt 400. */
.ds1_toast-handling {
    display: inline-block;
    margin: 4px 0 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: var(--ui-font-sm, 13px);
    font-weight: 400;
    cursor: pointer;
}

/* Flere handlinger på rad (Ja og Nei): litt luft mellom. */
.ds1_toast-handling + .ds1_toast-handling {
    margin-left: 16px;
}

.ds1_toast-handling:hover {
    text-decoration: underline;
}

.ds1_toast-handling:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.ds1_toast-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius, 6px);
    background: transparent;
    color: var(--text-muted, #999);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
    margin: -4px -6px -4px 0;
}

.ds1_toast-close:hover {
    background: var(--hover-bg, rgba(0,0,0,0.06));
    color: var(--text, #1a1a1a);
}

@media (max-width: 640px) {
    .ds1_toast-container {
        top: calc(var(--ws-shell-header-h, 0px) + var(--shell-topmsg-h, 0px) + 8px);
        right: 8px;
        left: 8px;
        transform: none;
        width: auto;
        max-width: none;
    }
}