/*
 * Operational messages (Driftsmeddelelse) bar and popup styles.
 *
 * Consumes the design tokens from tokens.css. Do not hard-code colours,
 * fonts or spacing here; reference the custom properties so the site
 * stays themeable.
 */

.padis-operational-messages {
  /* Fixed above the header (which sits at top: var(--padis-operational-height))
     so the bar is always visible and its trigger buttons are never covered by
     the header's click-through area. */
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 31;

  display: flex;
  flex-direction: column;
}

.padis-operational-message__trigger {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;

  padding: 0.75rem var(--padis-gutter);

  background: var(--padis-color-alert);
  color: var(--padis-color-on-alert);

  border: none;

  cursor: pointer;

  font: inherit;
  font-weight: 600;
  text-align: left;

  transition: padding 0.2s ease, font-size 0.2s ease;
}

/* Minimized state: applied via JS once the page scrolls past the same
   threshold that triggers the header's "is-scrolled" pill state, so the two
   stay in sync. Shrinks the bar instead of hiding it, so the trigger/title
   remain reachable while scrolling. */
.padis-operational-messages.is-minimized .padis-operational-message__trigger {
  padding: 0.35rem var(--padis-gutter);
  font-size: 0.8125rem;
  gap: 0.5rem;
}

.padis-operational-messages.is-minimized .padis-operational-message__icon {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.75rem;
}

.padis-operational-message__trigger:hover,
.padis-operational-message__trigger:focus-visible {
  background: color-mix(in srgb, var(--padis-color-alert) 85%, black);
}

/* Message-type modifiers. Color is paired with the icon glyph/label below so
   Info and Advarsel are never distinguished by color alone (WCAG 2.1 AA). */
.padis-operational-message__trigger--info {
  background: var(--padis-color-alert-info);
  color: var(--padis-color-on-alert-info);
}

.padis-operational-message__trigger--info:hover,
.padis-operational-message__trigger--info:focus-visible {
  background: color-mix(in srgb, var(--padis-color-alert-info) 85%, black);
}

.padis-operational-message__trigger--warning {
  background: var(--padis-color-alert-warning);
  color: var(--padis-color-on-alert-warning);
}

.padis-operational-message__trigger--warning:hover,
.padis-operational-message__trigger--warning:focus-visible {
  background: color-mix(in srgb, var(--padis-color-alert-warning) 85%, black);
}

.padis-operational-message__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.5rem;
  height: 1.5rem;
  flex: none;

  border-radius: 50%;
  border: 2px solid currentColor;

  font-size: 0.875rem;
  line-height: 1;
}

.padis-operational-message__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* Keeps the centred title from pushing the icon off-screen on narrow bars
     while still letting long titles ellipsis instead of wrapping. */
  max-width: min(70vw, 40rem);

  font-weight: 600;
  font-size: inherit;
}

.padis-operational-message__type-label {
  /* Text label paired with the icon/color so message type is never conveyed
     by color alone (WCAG 2.1 AA). Sized and weighted to match the title so
     the two read as one continuous line instead of two mismatched styles. */
  font-weight: 600;
  font-size: inherit;
}

/* Dialog */

.padis-operational-message__dialog {
  position: fixed;
  inset: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--padis-space-md);

  background: rgba(28, 19, 48, 0.55);
}

.padis-operational-message__dialog[hidden] {
  display: none;
}

.padis-operational-message__panel {
  position: relative;

  width: 100%;
  max-width: 32rem;
  max-height: 100%;

  overflow-y: auto;

  background: var(--padis-color-surface);
  color: var(--padis-color-text);

  border-radius: var(--padis-radius);
  box-shadow: var(--padis-shadow);

  padding: var(--padis-space-lg) var(--padis-space-md) var(--padis-space-md);
}

.padis-operational-message__close {
  position: absolute;
  top: var(--padis-space-sm);
  right: var(--padis-space-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;

  background: transparent;
  color: var(--padis-color-text-muted);

  border: none;
  border-radius: 50%;

  cursor: pointer;
}

.padis-operational-message__close:hover,
.padis-operational-message__close:focus-visible {
  background: var(--padis-color-surface-alt);
  color: var(--padis-color-text);
}

.padis-operational-message__panel-title {
  margin: 0 var(--padis-space-lg) var(--padis-space-sm) 0;

  font-family: var(--padis-font-heading);
}

.padis-operational-message__description {
  white-space: pre-line;
  overflow-wrap: break-word;
}

.padis-operational-message__area {
  color: var(--padis-color-text-muted);
}

.padis-operational-message__links {
  margin: var(--padis-space-sm) 0 0;
  padding: 0;

  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.padis-operational-message__links a {
  color: var(--padis-color-primary);
}

.padis-operational-message__link-external-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35em;
  font-size: 0.8em;
  color: var(--padis-color-text-muted);
}

.padis-operational-message__link-external-indicator svg {
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.25em;
}

@media (max-width: 600px) {
  .padis-operational-message__title {
    white-space: normal;
  }
}