/* =================================================================
   modals.css — visual corrections for shared modal partials.
   (_LogoutModal, _SessionWarningModal, _TokenErrorModal, _LoginRequiredModal)
   Loaded after site.css in _Layout.cshtml. Uses only var(--sjmn-*)
   tokens; no raw hex or rgb() literals outside the allowed pattern.
   ================================================================= */

/* ---- Shared modal card elevation ----
   Adds box-shadow to the white card inside each modal.
   site.css defines the card geometry (border-radius, padding, bg). */

.logout-modal-frame,
.token-error-modal-frame,
.login-required-modal-frame,
.session-warning-contents {
  box-shadow: 0 8px 32px rgb(from var(--sjmn-color-overlay-primary) r g b / 20%);
}

/* ================================================================
   Logout modal
   ================================================================ */

/* "ログアウト" button — override site.css pink (new-business-frame)
   with the standard primary button token (dark indigo #1e02ac). */
.logout-modal-logout-button-frame {
  background-color: var(--sjmn-color-button-main-color);
  border-color: var(--sjmn-color-button-main-color);
  color: var(--sjmn-color-base-white);
}

/* "キャンセル" button — explicit white background + outline */
.logout-modal-close-button-frame {
  background-color: var(--sjmn-color-base-white);
  color: var(--sjmn-color-text-color-base);
}

/* ================================================================
   Session warning modal
   ================================================================ */

/* Title "セッションタイムアウトの警告" — present for screen readers
   via aria-labelledby but not shown in the Figma visual baseline. */
.session-warning-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contents box — stretch items to full width so text and button
   both span the card. site.css uses align-items: center.
   gap overrides site.css 16px to match the Figma spacing. */
.session-warning-contents {
  align-items: stretch;
  gap: 24px;
}

/* Warning message — body type, no extra margins */
.session-warning-message {
  font-size: var(--sjmn-size-16);
  color: var(--sjmn-color-text-color-base);
  line-height: 1.6;
  margin: 0;
}

/* "延長する" button — pill-shaped primary action, fixed 262px on PC.
   site.css uses text-color-base (navy); Figma baseline matches
   button-main-color (dark indigo) used by all primary buttons. */
.session-extend-button {
  width: 262px;
  align-self: center;
  display: flex;
  padding: 12px 24px;
  background-color: var(--sjmn-color-button-main-color);
  border-radius: 20px;
  font-size: var(--sjmn-size-16);
  font-weight: 700;
}

.session-extend-button-text {
  font-size: var(--sjmn-size-16);
  font-weight: 700;
}

/* ================================================================
   Token error modal
   ================================================================ */

/* "ログアウト" button — .token-error-modal reuses
   .logout-modal-logout-button-frame; ensure indigo here as well. */
.token-error-modal .logout-modal-logout-button-frame {
  background-color: var(--sjmn-color-button-main-color);
  border-color: var(--sjmn-color-button-main-color);
  color: var(--sjmn-color-base-white);
}

/* "閉じる" → "× 閉じる": Figma baseline shows an × glyph prefix */
.token-error-modal-close-button-frame .modal-close-button-text::before {
  content: "\00D7\00A0";
}

/* Explicit white background + text colour (mirrors .logout-modal-close-button-frame). */
.token-error-modal-close-button-frame {
  background-color: var(--sjmn-color-base-white);
  color: var(--sjmn-color-text-color-base);
}

/* ================================================================
   Login-required modal
   ================================================================ */

/* "× 閉じる": Figma baseline shows an × glyph prefix */
.login-required-modal-close-button-frame .modal-close-button-text::before {
  content: "\00D7\00A0";
}

/* Explicit white background + text colour */
.login-required-modal-close-button-frame {
  background-color: var(--sjmn-color-base-white);
  color: var(--sjmn-color-text-color-base);
}

/* ================================================================
   Initial-notice modal (#initial-notice-modal)
   ================================================================ */

#initial-notice-modal .modal-content {
  padding: 32px;
}

#initial-notice-modal .modal-header,
#initial-notice-modal .modal-body,
#initial-notice-modal .modal-footer {
  padding: 0;
}

#initial-notice-modal .modal-body {
  margin-top: 16px;
}

#initial-notice-modal .modal-title {
  font-size: var(--sjmn-size-32);
}

/* Heading row with info icon */
#initial-notice-modal .modal-body .fw-bold {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 30px;
  font-weight: 700;
  margin: 0;
}

#initial-notice-modal .initial-notice-info-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* Body paragraphs */
#initial-notice-modal .modal-body p {
  font-weight: 400;
  font-size: var(--sjmn-size-18);
  line-height: 160%;
  letter-spacing: 0;
  margin: 0;
}

/* Footer: gray separator, vertically-stacked items horizontally centered */
#initial-notice-modal .modal-footer {
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top-color: var(--sjmn-color-line-gray);
}

/* Checkbox row: flex so input and label are vertically centered */
#initial-notice-modal .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

#initial-notice-modal .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}

/* ================================================================
   Dynamic-form modal: vertical centering fix
   Bootstrap's modal-dialog-centered uses min-height: calc(100% - margin*2),
   but 100% inside overflow-y:auto may not resolve to the viewport height in
   some mobile browsers / emulators. Override with dvh units so the dialog
   always fills the visual viewport and align-items:center works correctly.
   ================================================================ */

.modal .modal-dialog-dynamic-form.modal-dialog-centered {
  min-height: calc(100vh - var(--bs-modal-margin) * 2);
  min-height: calc(100dvh - var(--bs-modal-margin) * 2);
}

/* ================================================================
   Application-screen notice modals
   - #temporarySaveModal
   - #inputCharacterNoticeModal
   - #inputFileUploadNoticeModal
   ================================================================ */

:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-content {
  padding: 32px;
}

:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-header,
:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-body,
:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-footer {
  padding: 0;
}

:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-title {
  font-size: var(--sjmn-size-32);
  line-height: 1.4;
  margin: 0;
}

:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-body {
  margin-top: 16px;
}

:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-body
  p {
  font-weight: 700;
  font-size: var(--sjmn-size-18);
  line-height: 1.6;
  letter-spacing: 0;
  margin: 0;
}

:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-body
  p
  + p {
  margin-top: 12px;
}

:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .modal-footer {
  justify-content: center;
  margin-top: 24px;
}

:is(
    [id="temporarySaveModal"],
    [id="inputCharacterNoticeModal"],
    [id="inputFileUploadNoticeModal"]
  )
  .dynamic-form-modal-close-btn {
  margin: 0;
}

/* ================================================================
   Application-screen modals (oubo) — shared close button
   ================================================================ */

/* "× 閉じる": Figma baseline shows an × glyph prefix */
.dynamic-form-modal-close-btn .modal-close-button-text::before {
  content: "\00D7\00A0";
}

.dynamic-form-modal-close-btn {
  background-color: var(--sjmn-color-base-white);
  color: var(--sjmn-color-text-color-base);
}

/* ================================================================
   Next-page confirmation dialog shown when current page has input errors
   ================================================================ */

dialog.next-page-error-confirm-dialog {
  width: min(520px, calc(100% - 32px));
  max-width: 520px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
}

dialog.next-page-error-confirm-dialog::backdrop {
  background: rgb(9 22 36 / 48%);
  background: rgb(from var(--sjmn-color-overlay-dark) r g b / 48%);
}

.next-page-error-confirm-dialog__frame {
  padding: 32px;
  border-radius: 20px;
  background: var(--sjmn-color-base-white);
  box-shadow: 0 28px 50px rgb(from var(--sjmn-color-shadow-deep) r g b / 24%);
}

.next-page-error-confirm-dialog__title {
  margin: 0 0 20px;
  color: var(--sjmn-color-text-color-base);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.next-page-error-confirm-dialog__body {
  margin-bottom: 24px;
  color: var(--sjmn-color-text-color-base);
  font-size: var(--sjmn-size-16);
  line-height: 1.7;
}

.next-page-error-confirm-dialog__body p {
  margin: 0;
}

.next-page-error-confirm-dialog__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.next-page-error-confirm-dialog__close-btn,
.next-page-error-confirm-dialog__submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 44px;
  padding: 0 24px;
  appearance: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--sjmn-size-16);
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.next-page-error-confirm-dialog__close-btn {
  border: 1px solid var(--sjmn-color-border-color-gray);
  background: var(--sjmn-color-base-white);
  color: var(--sjmn-color-text-color-base);
}

.next-page-error-confirm-dialog__submit-btn {
  border: none;
  background: var(--sjmn-color-button-main-color);
  color: var(--sjmn-color-base-white);
}

.next-page-error-confirm-dialog__close-btn:hover,
.next-page-error-confirm-dialog__close-btn:focus-visible,
.next-page-error-confirm-dialog__submit-btn:hover,
.next-page-error-confirm-dialog__submit-btn:focus-visible {
  filter: brightness(0.94);
}

/* ================================================================
   SP responsive (≤ 767px)
   ================================================================ */

@media (width <= 767px) {
  /* Logout / token-error / login-required modal dialog — full-width with gutters */
  .logout-modal,
  .token-error-modal,
  .login-required-modal {
    width: calc(100% - 32px);
  }

  /* Card padding reduced for narrow viewport */
  .logout-modal-frame,
  .token-error-modal-frame,
  .login-required-modal-frame {
    width: 100%;
    padding: 24px 16px;
  }

  /* Button row → vertical stack, each button full-width */
  .logout-modal-buttons,
  .token-error-modal-buttons,
  .login-required-modal-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .logout-modal-close-button-frame,
  .logout-modal-logout-button-frame,
  .token-error-modal-close-button-frame,
  .token-error-modal .logout-modal-logout-button-frame,
  .login-required-modal-close-button-frame {
    width: 100%;
    padding: 12px 24px;
    text-align: center;
    justify-content: center;
  }

  /* Form wrapper around logout button — must stretch to row width so the
       button inside fills the full container (form is a flex child). */
  .logout-modal-buttons form,
  .token-error-modal-buttons form {
    width: 100%;
  }

  /* Session warning card — 16px gutter on each side (card = 100vw - 32px),
     32px inner padding so the button and text align with the Figma SP baseline. */
  .session-warning-contents {
    width: calc(100% - 32px);
    padding: 32px;
  }

  /* Session extend button — full-width on SP */
  .session-extend-button {
    width: 100%;
    align-self: stretch;
  }

  /* Initial-notice modal — reduce padding and font sizes for narrow viewports */
  #initial-notice-modal .modal-content {
    padding: 24px 20px;
  }

  #initial-notice-modal .modal-title {
    font-size: var(--sjmn-size-22);
  }

  /* Heading row: smaller font and align icon to the top of wrapped text */
  #initial-notice-modal .modal-body .fw-bold {
    font-size: var(--sjmn-size-18);
    align-items: flex-start;
  }

  #initial-notice-modal .initial-notice-info-icon {
    width: 20px;
    height: 20px;
    margin-top: 2px; /* optical alignment to cap-height of 18px text */
  }

  /* Application-screen notice modals — reduce padding and title font size */
  :is(
      [id="temporarySaveModal"],
      [id="inputCharacterNoticeModal"],
      [id="inputFileUploadNoticeModal"]
    )
    .modal-content {
    padding: 24px 20px;
  }

  :is(
      [id="temporarySaveModal"],
      [id="inputCharacterNoticeModal"],
      [id="inputFileUploadNoticeModal"]
    )
    .modal-title {
    font-size: var(--sjmn-size-22);
  }
}