/**
 * 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: var(--c-black);
  --muted: var(--c-gray-2a);
  --line: rgba(0, 0, 0, 0.18);
  --surface: var(--c-white);
  --bg: var(--c-white);
  --mint: var(--c-black);
  --accent: var(--c-black);
  --accent-2: var(--c-white);
  --link-color: var(--c-black);
  --btn-text: var(--c-white);
  --btn-border: var(--c-black);
  --btn-gradient: var(--c-black);
  --btn-inset-color: var(--c-black);
  --btn-hover-glow: color-mix(in srgb, var(--c-black) 30%, transparent);
  --btn-hover-text: var(--c-white);
  --secondary-text: var(--c-black);
  --danger: var(--c-red-800);
  --panel-text: var(--c-black);
  --panel-muted: var(--c-gray-2a);
  --panel-surface: var(--c-white);
  --panel-field-bg: var(--c-white);
  --panel-line: rgba(0, 0, 0, 0.18);
  color-scheme: light;
  background: var(--c-white);
  color: var(--c-black);
  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: var(--c-black);
}

.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: var(--c-gray-2a);
}

.auth-modal .auth-close,
.modal .modal-close-btn {
  color: var(--c-gray-2a);
}

.modal .modal-close-btn:hover,
.modal .modal-close-btn:focus-visible {
  color: var(--c-black);
  background: color-mix(in srgb, var(--c-black) 6%, transparent);
}

.auth-modal .subtabs button {
  color: var(--c-gray-2a);
  background: transparent;
  border-bottom-color: transparent;
}

.auth-modal .subtabs button:hover {
  color: var(--c-black);
}

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

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

.auth-modal .btn.primary,
.auth-modal button.primary,
.modal .btn.primary,
.modal button.primary {
  color: var(--c-white) !important;
  background: var(--c-black) !important;
  border-color: var(--c-black) !important;
  --btn-text: var(--c-white);
  --btn-hover-text: var(--c-white);
  --btn-gradient: var(--c-black);
  --btn-inset-color: var(--c-gray-33);
  --btn-hover-glow: color-mix(in srgb, var(--c-black) 35%, transparent);
}

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

/*
 * Tables inside modals keep their own surface/text tokens (incl. portal dark tables).
 * Do not force B&W secondary chrome there — black glyphs on a dark row are invisible.
 */
.auth-modal .dionis-table-host .btn.secondary,
.auth-modal .ccp-table-host .btn.secondary,
.modal .dionis-table-host .btn.secondary,
.modal .ccp-table-host .btn.secondary {
  color: inherit !important;
  background: transparent !important;
  border-color: currentColor !important;
  --btn-inset-color: currentColor;
  --btn-hover-text: var(--surface, var(--bg, #000));
  --secondary-text: inherit;
  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: var(--c-white) !important;
  background: var(--c-black) !important;
  border-color: var(--c-black) !important;
  --btn-hover-text: var(--c-white);
  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: var(--c-white) !important;
  color: var(--c-black) !important;
  -webkit-text-fill-color: var(--c-black);
  caret-color: var(--c-black);
  border-color: rgba(0, 0, 0, 0.22) !important;
}

.auth-modal input::placeholder,
.auth-modal textarea::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
  color: var(--c-gray-2a) !important;
  -webkit-text-fill-color: var(--c-gray-2a);
  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);
}

/* Registration category fill state (overrides B&W modal control borders) */
.modal .routine-category-block--filled .routine-category-label,
.modal .routine-category-block--filled .routine-category-label .req {
  color: var(--c-green-750) !important;
}
.modal .routine-category-block--empty .routine-category-label,
.modal .routine-category-block--empty .routine-category-label .req {
  color: var(--c-red-800) !important;
}
.modal .routine-category-block--filled .routine-category-control {
  border-color: var(--c-green-750) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-green-750) 35%, transparent);
}
.modal .routine-category-block--empty .routine-category-control {
  border-color: var(--c-red-800) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-red-800) 28%, 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 {
  color: var(--c-gray-2a);
}

.modal td,
.modal .modal-inner {
  color: var(--c-black);
}