/* Dialog/Overlay System */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dialog-overlay.show {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.dialog-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;

  /* Three stops rather than one. A single large blur reads as a grey haze and leaves the panel
     looking pasted on; the tight first stop draws the edge, the middle gives the lift, and the
     wide negative-spread stop grounds it. Cool-tinted (16, 24, 40) rather than pure black,
     which keeps it from muddying the blurred page behind. */
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.06),
    0 12px 24px -6px rgba(16, 24, 40, 0.14),
    0 32px 64px -12px rgba(16, 24, 40, 0.22);

  /* min() rather than a percentage plus a margin. The old pairing was width:90% here and
     width:95% + margin:20px in the 768px block, and 95% + 40px of margin is wider than the
     viewport - the panel could not fit its own gutter. This expresses the gutter once and
     cannot overflow at any width. */
  width: min(500px, calc(100% - 2rem));
  max-height: 80vh;

  /* overflow:hidden keeps the rounded corners, so the scrolling has to happen inside.
     Without the flex column below, content past 80vh was clipped outright - and the
     footer is last in DOM order, so the buttons went first. On a dialog configured
     with escapeKey:false and backdropClick:false those buttons are the only way out
     of a focus trap. Latent today, because no live page opens a dialog long enough,
     but it is one long message away from locking someone in. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dialog-overlay.show .dialog-container {
  transform: scale(1);
}

.dialog-header {
  padding: 24px 24px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-title i {
  font-size: 1.1rem;

  /* A fixed box so the title text starts at the same x in every variant. The icons are
     different glyph widths - a triangle is wider than an i - and without this the headings
     of an error and an info dialog do not line up with each other. No background: the icon
     colour is contrast-checked against the composited panel, and a tint behind it would
     change the surface those ratios were derived on. */
  flex: 0 0 1.5rem;
  text-align: center;
}

.dialog-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  line-height: 1;
}

.dialog-close:hover,
.dialog-close:focus {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

/* Same two-stop ring as .dialog-button below - one ring in this file, not two. A bare <button>
   with no .btn class inherits nothing from Bootstrap, so without this the close control is a
   tab stop that shows nothing when reached. It is now inside a focus trap, which makes an
   invisible stop worse: it is one of only a few places focus can go while the dialog is open. */
.dialog-close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.dialog-body {
  padding: 16px 24px 24px 24px;

  /* the scrolling region, so the header and footer stay put. min-height:0 is
     required: a flex item defaults to min-height:auto and refuses to shrink
     below its content, which would push the footer out again. */
  overflow-y: auto;
  min-height: 0;
}

.dialog-message {
  color: #555;

  /* 1.6 rather than 1.5. This paragraph is the whole content of most dialogs and runs to the
     full 500px measure, so it wants a little more air than body copy inside a column. */
  line-height: 1.6;
  margin: 0;
  font-size: 1rem;
}

.dialog-footer {
  padding: 8px 24px 24px 24px;
  display: flex;
  justify-content: flex-end;

  /* wrap so two long localized labels drop to a second line instead of shrinking below the
     24px minimum target size (WCAG 2.5.8) or overflowing the panel */
  flex-wrap: wrap;
  gap: 12px;
}

.dialog-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

/* Focus indicator. This file previously had no :focus rule at all, and these are bare
   <button> with no .btn class, so they inherited nothing from Bootstrap - inside a
   focus-trapped overlay, which is the one surface a keyboard user cannot leave.
   White inner ring separates from the button fill; opaque #1d4ed8 carries the contrast
   (6.70:1 on white). Same two-stop pattern as the nav and skip links in Site.css. */
.dialog-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.dialog-button.primary {
  /* White label 15.67:1. Was #007bff at 3.98:1, under the 4.5:1 floor. */
  background: #172145;
  color: white;
}

.dialog-button.primary:hover,
.dialog-button.primary:focus {
  /* 17.71:1. Re-derived, not kept: the old #0056b3 is lighter than the new base, which
       would have made hover read as the lift rather than the press. */
  background: #0f1730;
  transform: translateY(-1px);
}

.dialog-button.secondary {
  /* White label 8.18:1, the same grey as .btn-secondary in Site.css. The old #6c757d
       passed at 4.69:1, but only just, and it did not match the house value. */
  background: #495057;
  color: white;
}

.dialog-button.secondary:hover,
.dialog-button.secondary:focus {
  /* 11.51:1. Re-derived for the same reason as primary - #545b62 is lighter than #495057. */
  background: #343a40;
  transform: translateY(-1px);
}

.dialog-button.danger {
  /* White label 4.53:1 - clears 4.5:1, but only just. Left as-is; if this block is ever
       retouched, #9b1b30 (8.10:1) is the house value and gives real headroom. */
  background: #dc3545;
  color: white;
}

.dialog-button.danger:hover,
.dialog-button.danger:focus {
  background: #c82333;
  transform: translateY(-1px);
}

/* NOVA-4889: callers passed class: 'success' / 'warning' and fell through to the bare
   .dialog-button rule, so both rendered identical to each other and to no variant at all. */
.dialog-button.success {
  /* White label 6.45:1. Bootstrap #198754 is only 4.53:1, the same thin margin danger sits
     on, so the darker house green is used instead. */
  background: #146c43;
  color: white;
}

.dialog-button.success:hover,
.dialog-button.success:focus {
  /* 9.36:1, darker than its base so hover reads as a press like the others. */
  background: #0f5132;
  transform: translateY(-1px);
}

.dialog-button.warning {
  /* The one variant that cannot take a white label - amber on white is 1.63:1. Dark label
     on amber is 9.46:1, so the colour pair inverts here on purpose. */
  background: #ffc107;
  color: #212529;
}

.dialog-button.warning:hover,
.dialog-button.warning:focus {
  /* 7.18:1 against the same dark label, and darker than its base. */
  background: #e0a800;
  transform: translateY(-1px);
}

/* Dialog Types */
.dialog-container.error .dialog-title {
  /* 7.69:1 on the composited #f9f9f9, the house danger red */
  color: #9b1b30;
}

.dialog-container.error .dialog-title i {
  /* Same value as the title beside it; also clears the 3:1 non-text floor. */
  color: #9b1b30;
}

.dialog-container.success .dialog-title {
  /* 6.13:1 on the composited #f9f9f9 */
  color: #146c43;
}

.dialog-container.success .dialog-title i {
  /* Same value as the title beside it; also clears the 3:1 non-text floor. */
  color: #146c43;
}

.dialog-container.info .dialog-title {
  /* 5.92:1 on the composited #f9f9f9 */
  color: #0a6a7d;
}

.dialog-container.info .dialog-title i {
  /* Same value as the title beside it; also clears the 3:1 non-text floor. */
  color: #0a6a7d;
}

.dialog-container.warning .dialog-title {
  /* 7.59:1 on the composited #f9f9f9 - amber on near-white cannot carry text */
  color: #664d03;
}

.dialog-container.warning .dialog-title i {
  /* Same value as the title beside it; also clears the 3:1 non-text floor. */
  color: #664d03;
}

/* Responsive Design */
@media (max-width: 768px) {
  /* No width or margin override here any more. The base rule is
     width: min(500px, calc(100% - 2rem)), which already gives a gutter at every size; the old
     95% + 20px margin was wider than the viewport it was meant to fit inside. */

  .dialog-header {
    padding: 16px 20px 0 20px;
  }

  .dialog-body {
    padding: 12px 20px 20px 20px;
  }

  .dialog-footer {
    padding: 8px 20px 20px 20px;

    /* column-REVERSE, so the primary action is the top button. The DOM order is cancel-first
       on purpose - it is the safe default for a destructive confirm, and it is what the tab
       order follows - but when the buttons stack, the one a thumb reaches first should be the
       one the dialog is asking for. */
    flex-direction: column-reverse;
  }

  .dialog-button {
    width: 100%;
  }
}

/* Reduced motion (WCAG 2.3.3) - disable transitions and animations */
@media screen and (prefers-reduced-motion: reduce) {
  .dialog-overlay {
    transition: none;
  }

  .dialog-container {
    transform: scale(1);
    transition: none;
  }

  .dialog-close,
  .dialog-button {
    transition: none;
  }
}

/* The countdown the session-expiry warning appends to its dialog (NOVA-4980). It is aria-hidden
   and purely a convenience for sighted users - the dialog message states the remaining time in
   words when it opens, which is what a screen reader announces. Tabular figures so the digits
   do not jitter as the clock ticks down, and no colour of its own: it inherits the dialog body
   colour, which is already contrast-checked against the dialog background. */
.session-timeout-countdown {
  /* Separated by a rule and real space rather than floating under the paragraph, which is how
     it read as a stray "5:00". No background or colour of its own, deliberately: the comment
     above is the reason - it inherits the body colour, whose ratio is derived against the
     composited panel, and a tint would move that surface. */
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}