/* ui.css — shared components drawn by static/js/ui_dialog.js and
 * static/js/session_timer.js, plus the skip link (docs/p0/T4_SPEC.md E3).
 *
 * Loaded by templates/base.html after base.css, and by the admin console
 * (admin/dashboard.html) after tokens.css. Everything drawn inside a .ui-dialog
 * (text, helper and countdown text, errors, fields, its buttons, the focus
 * outline) takes its colour ONLY from the --dialog-* variables below, so a page
 * theme can't leak into a dialog. The admin console sets the whole set in both
 * of its palette blocks; every other page uses these defaults (the tokens, with
 * the tokens' own values as fallbacks for a page that has no tokens.css).
 */

:root {
  --dialog-bg: var(--surface, #FFFFFF);
  --dialog-ink: var(--ink, #0F172A);
  --dialog-muted: var(--muted, #475569);
  --dialog-line: var(--line-strong, #7B8798);
  --dialog-err: var(--err-ink, #B91C1C);
  --dialog-field-bg: var(--surface, #FFFFFF);
  --dialog-primary: var(--brand-primary, #1E3A8A);
  --dialog-on-primary: var(--on-brand, #FFFFFF);
  --dialog-danger-bg: var(--err-ink, #B91C1C);
  --dialog-danger-ink: var(--on-brand, #FFFFFF);
  --dialog-focus: var(--focus-ring, #1E3A8A);
}

/* ---------- Dialog (a native <dialog>, opened modal by window.__dialog) ---------- */
.ui-dialog {
  box-sizing: border-box;
  width: min(480px, 100vw - 32px);
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: auto;
  padding: 24px;
  border: 0;
  border-radius: 12px;
  background: var(--dialog-bg);
  color: var(--dialog-ink);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.10);
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.ui-dialog *, .ui-dialog *::before, .ui-dialog *::after { box-sizing: border-box; }
.ui-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
/* The session dialog (the expiry warning and "Your session has ended") blurs the page behind it,
   so what was on screen stays unreadable until the person signs in again. Without blur support
   the backdrop is simply darker. */
.ui-dialog.ui-session::backdrop {
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(0.8);
  backdrop-filter: blur(12px) saturate(0.8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-dialog.ui-session::backdrop { background: rgba(15, 23, 42, 0.88); }
}
/* A dangerous action's dialog carries a red top edge as well as its red button. */
.ui-dialog.ui-dialog--danger { border-top: 4px solid var(--dialog-danger-bg); }
/* Without a native <dialog> (ui_dialog.js then sets the open attribute,
   role="dialog" and this class itself), the same box is centred over the page. */
.ui-dialog--fallback[open] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  height: fit-content;
}

.ui-dialog .ui-dialog__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dialog-ink);
}
.ui-dialog .ui-dialog__body { margin: 0 0 4px; color: var(--dialog-ink); }
.ui-dialog .ui-dialog__body p {
  margin: 0 0 12px;
  color: var(--dialog-ink);
  white-space: pre-line;   /* a single line break inside a paragraph stays a break */
  overflow-wrap: anywhere;
}
.ui-dialog .ui-dialog__note {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--dialog-muted);
}

/* Fields (the session re-authentication form) */
.ui-dialog .ui-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0 0 12px;
}
.ui-dialog .ui-dialog__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dialog-ink);
}
.ui-dialog .ui-dialog__field .ui-dialog__note { margin: 0; }
.ui-dialog .ui-dialog__input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--dialog-line);
  border-radius: 8px;
  background: var(--dialog-field-bg);
  color: var(--dialog-ink);
  font: inherit;
  font-size: 16px;   /* never below 16px, so iOS does not zoom on focus */
  box-shadow: none;
}
.ui-dialog .ui-dialog__input:focus { border-color: var(--dialog-primary); box-shadow: none; }
.ui-dialog .ui-dialog__input[readonly] { color: var(--dialog-muted); }
.ui-dialog .ui-dialog__error {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dialog-err);
}
.ui-dialog .ui-dialog__error:empty { display: none; }

/* Buttons */
.ui-dialog .ui-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.ui-dialog .ui-dialog__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 88px;
  width: auto;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--dialog-line);
  border-radius: 8px;
  background: var(--dialog-bg);
  color: var(--dialog-ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  opacity: 1;
  box-shadow: none;
}
.ui-dialog .ui-dialog__btn:hover { background: var(--dialog-bg); border-color: var(--dialog-ink); }
.ui-dialog .ui-dialog__btn--primary,
.ui-dialog .ui-dialog__btn--primary:hover {
  background: var(--dialog-primary);
  border-color: var(--dialog-primary);
  color: var(--dialog-on-primary);
}
.ui-dialog .ui-dialog__btn--danger,
.ui-dialog .ui-dialog__btn--danger:hover {
  background: var(--dialog-danger-bg);
  border-color: var(--dialog-danger-bg);
  color: var(--dialog-danger-ink);
}
/* Busy: ui_dialog/session_timer disable the button and say "Please wait…"
   (never aria-busy, which a page theme may style). */
.ui-dialog .ui-dialog__btn[disabled] { cursor: progress; opacity: 0.7; }

/* The focus outline inside a dialog, whatever the page's own focus rules. */
.ui-dialog.ui-dialog :focus-visible,
.ui-dialog.ui-dialog:focus-visible {
  outline: 2px solid var(--dialog-focus);
  outline-offset: 2px;
}

/* Screen-reader-only text (the throttled countdown announcements). */
.ui-dialog .ui-dialog__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip link (WUX-31): off-screen until focused ---------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--brand-primary, #1E3A8A);
  color: var(--on-brand, #FFFFFF);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; }