/**
 * Black & white dialogs — auth and app modals never inherit portal brand colors.
 * Surface: white. Primary: black. Secondary: outline black (hover fill black).
 */

.auth-modal,
dialog.modal,
.modal {
  --text: #000000;
  --muted: #2a2a2a;
  --line: rgba(0, 0, 0, 0.18);
  --surface: #ffffff;
  --bg: #ffffff;
  --mint: #000000;
  --accent: #000000;
  --accent-2: #ffffff;
  --link-color: #000000;
  --btn-text: #ffffff;
  --btn-border: #000000;
  --btn-gradient: #000000;
  --btn-inset-color: #000000;
  --btn-hover-glow: color-mix(in srgb, #000 30%, transparent);
  --btn-hover-text: #ffffff;
  --secondary-text: #000000;
  --danger: #a32020;
  --panel-text: #000000;
  --panel-muted: #2a2a2a;
  --panel-surface: #ffffff;
  --panel-field-bg: #ffffff;
  --panel-line: rgba(0, 0, 0, 0.18);
  color-scheme: light;
  background: #ffffff;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.18);
}

.auth-modal::backdrop,
dialog.modal::backdrop,
.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.auth-modal .auth-modal-head h2,
.auth-modal .auth-modal-head p,
.auth-modal label,
.auth-modal .hint,
.auth-modal .muted,
.auth-modal .auth-or,
.modal .modal-head h2,
.modal .modal-head h3,
.modal label,
.modal .muted,
.modal .hint,
.modal p {
  color: #000000;
}

.auth-modal .auth-modal-head p,
.auth-modal .hint,
.auth-modal .muted,
.auth-modal .auth-or,
.auth-modal label,
.modal .muted,
.modal .hint,
.modal label,
.modal .label-optional {
  color: #2a2a2a;
}

.auth-modal .auth-close,
.modal .modal-close-btn {
  color: #2a2a2a;
}

.modal .modal-close-btn:hover,
.modal .modal-close-btn:focus-visible {
  color: #000000;
  background: color-mix(in srgb, #000 6%, transparent);
}

.auth-modal .subtabs button {
  color: #2a2a2a;
  background: transparent;
  border-bottom-color: transparent;
}

.auth-modal .subtabs button:hover {
  color: #000000;
}

.auth-modal .subtabs button[aria-selected="true"] {
  color: #000000 !important;
  border-bottom-color: #000000 !important;
  background: color-mix(in srgb, #000 6%, transparent) !important;
}

.auth-modal .linkish,
.auth-modal a:not(.btn):not(.auth-google),
.modal a:not(.btn),
.modal .linkish {
  color: #000000 !important;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.auth-modal .btn.primary,
.auth-modal button.primary,
.modal .btn.primary,
.modal button.primary {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
  --btn-text: #ffffff;
  --btn-hover-text: #ffffff;
  --btn-gradient: #000000;
  --btn-inset-color: #333333;
  --btn-hover-glow: color-mix(in srgb, #000 35%, transparent);
}

.auth-modal .btn.secondary,
.auth-modal .secondary,
.auth-modal .auth-warn-cancel,
.modal .btn.secondary,
.modal .secondary {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #000000 !important;
  --text: #000000;
  --btn-hover-text: #ffffff;
  --btn-inset-color: #000000;
  --btn-hover-glow: color-mix(in srgb, #000 30%, transparent);
  box-shadow: none;
}

.auth-modal .btn.secondary:hover,
.auth-modal .btn.secondary:focus-visible,
.auth-modal .secondary:hover,
.auth-modal .secondary:focus-visible,
.auth-modal .auth-warn-cancel:hover,
.auth-modal .auth-warn-cancel:focus-visible,
.modal .btn.secondary:hover,
.modal .btn.secondary:focus-visible,
.modal .secondary:hover,
.modal .secondary:focus-visible {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
  --btn-hover-text: #ffffff;
  box-shadow: none;
  transform: none;
}

.auth-modal .reg-closed-warn-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.65rem;
  margin-top: 1rem;
}

.auth-modal .reg-closed-warn-actions .btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.auth-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.auth-modal select,
.auth-modal textarea,
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal select,
.modal textarea {
  color-scheme: light;
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000;
  caret-color: #000000;
  border-color: rgba(0, 0, 0, 0.22) !important;
}

.auth-modal input::placeholder,
.auth-modal textarea::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
  color: #2a2a2a !important;
  -webkit-text-fill-color: #2a2a2a;
  opacity: 1;
}

.auth-modal .subtabs button,
.auth-modal input:not([type="checkbox"]),
.modal input:not([type="checkbox"]),
.modal select,
.modal textarea {
  border-radius: 0;
}

.auth-modal .err,
.auth-modal .field-error,
.modal .err,
.modal .field-error,
.modal .req,
.auth-modal .req {
  color: var(--danger);
}

.auth-modal .input-invalid,
.modal .input-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent);
}

.auth-modal .gsi-btn-slot {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.35rem;
}

/* Tables / lists inside modals stay readable B&W */
.modal th,
.modal .section-title,
.modal .submit-catalog-separator {
  color: #2a2a2a;
}

.modal td,
.modal .modal-inner {
  color: #000000;
}