/* Shared modal palette. Public signing stays light; admin inherits its theme.
   Theme properties are important because legacy form rules include ID-scoped
   important declarations. Keep this layer after the page CSS and before Apple compatibility. */
.signature-modal,
.signature-discard-modal {
  --signature-surface: #ffffff;
  --signature-soft: #f3f7fc;
  --signature-text: #263e5f;
  --signature-muted: #526b88;
  --signature-line: #b5cce9;
  --signature-field: #ffffff;
  --signature-accent: #174c91;
  --signature-selected: #e8f1ff;
  --signature-action: #08735c;
  --signature-action-hover: #075d4b;
  --signature-action-text: #ffffff;
  --signature-error: #a8293b;
  --signature-error-bg: #fff3f4;
  --signature-error-line: #d9475b;
  color-scheme: light;
}

#adminSignatureModal,
#adminSignatureDiscardModal {
  --signature-surface: var(--admin-surface);
  --signature-soft: var(--admin-surface-soft);
  --signature-text: var(--admin-text);
  --signature-muted: #526b62;
  --signature-line: var(--admin-line-strong);
  --signature-field: var(--admin-field-bg);
  --signature-accent: var(--admin-primary-strong);
  --signature-selected: var(--admin-primary-soft);
  --signature-action: var(--admin-action-bg);
  --signature-action-hover: var(--admin-action-hover-bg);
  --signature-action-text: var(--admin-action-text);
  --signature-error: var(--admin-danger-text);
  --signature-error-bg: var(--admin-danger-soft);
  --signature-error-line: var(--admin-danger-border);
}

body[data-theme="dark"] #adminSignatureModal,
body[data-theme="dark"] #adminSignatureDiscardModal {
  --signature-muted: var(--admin-muted);
  color-scheme: dark;
}

.signature-modal .signature-modal-backdrop,
.signature-discard-modal .signature-discard-backdrop {
  width: 100%;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(8, 25, 52, 0.66) !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.signature-modal .signature-dialog,
.signature-discard-modal .signature-discard-dialog {
  color: var(--signature-text) !important;
  border-color: var(--signature-line) !important;
  background: var(--signature-surface) !important;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.signature-discard-modal .signature-discard-dialog {
  overflow: auto;
  overscroll-behavior: contain;
}

.signature-modal .signature-dialog > header,
.signature-modal .signature-dialog > footer {
  border-color: var(--signature-line) !important;
  background: var(--signature-soft) !important;
}

.signature-modal .signature-tabs,
.signature-modal .signature-modal-body {
  border-color: var(--signature-line) !important;
  background: var(--signature-surface) !important;
}

.signature-modal .signature-dialog h2,
.signature-modal .signature-dialog label,
.signature-discard-modal .signature-discard-dialog h2 {
  color: var(--signature-text) !important;
}

.signature-modal .signature-dialog p,
.signature-modal .signature-file-name,
.signature-discard-modal .signature-discard-dialog p,
#signatureModal .signature-dialog footer #signatureModalStatus {
  color: var(--signature-muted) !important;
}

.signature-modal .signature-dialog .eyebrow,
.signature-discard-modal .signature-discard-dialog .eyebrow {
  color: var(--signature-accent) !important;
}

.signature-modal .signature-dialog button,
.signature-modal .signature-file-action,
.signature-discard-modal .signature-discard-dialog button {
  border-color: var(--signature-line) !important;
  background: var(--signature-surface) !important;
  color: var(--signature-accent) !important;
  box-shadow: none !important;
}

.signature-modal .signature-dialog button:hover:not(:disabled),
.signature-modal .signature-file-action:hover,
.signature-discard-modal .signature-discard-dialog button:hover:not(:disabled),
.signature-modal .signature-tabs button[aria-selected="true"] {
  border-color: var(--signature-accent) !important;
  background: var(--signature-selected) !important;
}

.signature-modal .signature-dialog .signature-confirm {
  background: var(--signature-action) !important;
  color: var(--signature-action-text) !important;
  border-color: transparent !important;
}

.signature-modal .signature-dialog .signature-confirm:hover:not(:disabled) {
  background: var(--signature-action-hover) !important;
}

.signature-modal .signature-dialog button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.signature-discard-modal .signature-discard-dialog .signature-discard-action {
  background: #b42335 !important;
  border-color: #b42335 !important;
  color: #ffffff !important;
}

.signature-discard-modal .signature-discard-dialog .signature-discard-action:hover {
  background: #921c2b !important;
}

.signature-modal .signature-dialog input,
.signature-modal .signature-dialog textarea {
  color: var(--signature-text) !important;
  background: var(--signature-field) !important;
  border-color: var(--signature-line) !important;
  accent-color: var(--signature-accent);
}

.signature-modal .signature-dialog input::placeholder,
.signature-modal .signature-dialog textarea::placeholder {
  color: var(--signature-muted) !important;
  opacity: 1;
}

.signature-modal .admin-signature-record {
  border-color: var(--signature-line) !important;
}

/* Ink and uploaded evidence must stay legible in both themes. */
.signature-modal .signature-dialog canvas,
.signature-modal .signature-dialog img {
  background: #ffffff !important;
  border-color: #7fa5d4 !important;
  color-scheme: light;
}

.signature-modal .signature-dialog .signature-acknowledgment {
  color: var(--signature-text) !important;
  background: transparent !important;
}

#signatureModal .signature-dialog footer .signature-acknowledgment.is-invalid,
.signature-modal .signature-dialog .signature-acknowledgment.is-invalid,
.signature-modal .signature-dialog :is(input, textarea).is-invalid,
.signature-modal .signature-panel.is-invalid .signature-file-action {
  color: var(--signature-error) !important;
  background: var(--signature-error-bg) !important;
  border: 1px solid var(--signature-error-line) !important;
}

.signature-modal .signature-dialog canvas.is-invalid {
  border-color: var(--signature-error-line) !important;
}

#signatureModal .signature-dialog footer #signatureModalStatus.is-error,
#adminSignatureModal #adminSignatureStatus.is-error {
  color: var(--signature-error) !important;
}

.signature-modal :is(button, input, textarea, label[for]):focus-visible,
.signature-discard-modal button:focus-visible,
.signature-modal .signature-file-input:focus-visible + .signature-file-action {
  outline: 3px solid var(--signature-accent) !important;
  outline-offset: 2px;
}