/* account-actions.css — styles for the My-account modal.
   Loaded by both the board (board/index.php) and the home page (Frontend/app.js)
   so the modal looks the same regardless of which entry point triggered it. */

.mp-account-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-account-modal[hidden] {
  display: none;
}

.mp-account-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}

.mp-account-modal__card {
  position: relative;
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow: auto;
  background: #ffffff;
  color: #1f2937;
  border-radius: 12px;
  box-shadow: 0 20px 60px -10px rgba(15, 23, 42, .35);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mp-account-modal__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 6px;
}

.mp-account-modal__close:hover,
.mp-account-modal__close:focus {
  background: #f3f4f6;
  color: #111827;
}

.mp-account-modal__body {
  padding: 1.5rem;
}

.mp-account-modal__section + .mp-account-modal__section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

/* Same pattern as .settings-section-title in shared/settings-popup.css so
 * the My account modal looks like a peer of the board settings popup. */
.mp-account-modal__section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted, #718096);
  margin: 0 0 .85rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid #e5e7eb;
}

.mp-account-modal__profile-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.mp-account-modal__field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .85rem;
  color: #4b5563;
}

.mp-account-modal__field input {
  font: inherit;
  padding: .5rem .7rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #1f2937;
}

.mp-account-modal__field input:focus {
  outline: 2px solid var(--primary-navy, #0D467F);
  outline-offset: 1px;
  border-color: var(--primary-navy, #0D467F);
}

.mp-account-modal__profile-status {
  font-size: .85rem;
  padding: .4rem .6rem;
  border-radius: 6px;
}

.mp-account-modal__profile-status[data-kind="ok"] {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.mp-account-modal__profile-status[data-kind="error"] {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.mp-account-modal__profile-save {
  font: inherit;
  font-weight: 600;
  padding: .5rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--primary-navy, #0D467F);
  color: #fff;
  cursor: pointer;
  align-self: flex-start;
}

.mp-account-modal__profile-save:hover:not(:disabled),
.mp-account-modal__profile-save:focus:not(:disabled) {
  background: #0A3866;
}

.mp-account-modal__profile-save:disabled {
  opacity: .6;
  cursor: progress;
}

/* Hanko Elements styling.
 *
 * <hanko-profile> lives in a Shadow DOM and ignores page-level CSS, but
 * Hanko Elements exposes a set of bare-name CSS custom properties on the
 * host element (see https://docs.hanko.io/guides/hanko-elements/customize-appearance).
 * Setting them on the wrapper below makes the embedded profile inherit the
 * Strategy Assistant look + feel — same font, same blue primary, same
 * rounded inputs. */
.mp-account-modal__hanko {
  /* Bare-name custom properties, per Hanko 1.x docs (no --hanko- prefix).
   * Brand accents pulled from the Perfect Days palette (--primary-navy
   * #0D467F in shared/settings-popup.css, --color-milestone in
   * board/app.css). Body text + headline sizes match
   * .user-menu__item / .settings-row__label (13px) so the embedded
   * surface reads as part of the same menu language. */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size: 13px;
  --font-weight: 400;
  --color: var(--text-main, #1A202C);
  --color-shade-1: var(--text-muted, #718096);
  --color-shade-2: #d1d5db;
  --background-color: #ffffff;
  --brand-color: var(--primary-navy, #0D467F);
  --brand-color-shade-1: #0A3866;
  --brand-contrast-color: #ffffff;
  --error-color: #991b1b;
  --headline1-font-size: 13px;     /* "E-mailadressen", "Passkeys" etc. */
  --headline1-font-weight: 700;
  --headline2-font-size: 13px;
  --headline2-font-weight: 600;
  --border-radius: 6px;
  --container-padding: 0;           /* flush with the rest of the modal */
  --container-max-width: 100%;
  --input-min-height: 36px;
  --button-min-height: 36px;
  --item-height: 36px;
  --link-color: var(--primary-navy, #0D467F);
  --link-color-shade-1: #0A3866;
}