/* 閲覧/編集モード共通スタイル
 *
 * 編集 UI …… .edit-only + v-if="isEditable"
 * フォーム文字表示化 …… .form-as-plain-text（閲覧時に data-readonly-wrapper へ自動付与）
 * 参照: js/sheetModeMixin.js（sheetMode / sheetModeMixin）
 */

.sheet-mode--view .edit-only {
  display: none !important;
}

.sheet-mode--view .view-only {
  display: revert;
}

.sheet-mode--view .view-static {
  pointer-events: none;
  cursor: default;
}

.sheet-mode--view .view-static:hover {
  transform: none;
  box-shadow: none;
}

/* ===== フォーム → 文字表示（共通） ===== */
.form-as-plain-text :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .default-input-style
) {
  pointer-events: none;
  cursor: default;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0;
  color: rgba(240, 251, 250, 0.94);
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.45;
  resize: none;
  opacity: 1;
  -webkit-text-fill-color: rgba(240, 251, 250, 0.94);
}

.form-as-plain-text select,
.form-as-plain-text .form-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
}

.form-as-plain-text select:disabled,
.form-as-plain-text .form-select:disabled {
  color: rgba(240, 251, 250, 0.94);
  -webkit-text-fill-color: rgba(240, 251, 250, 0.94);
}

.form-as-plain-text input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.form-as-plain-text input[type="number"]::-webkit-outer-spin-button,
.form-as-plain-text input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-as-plain-text :is(input, select, textarea, .form-control, .form-select):focus,
.form-as-plain-text :is(input, select, textarea, .form-control, .form-select):focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.form-as-plain-text datalist {
  display: none;
}

/* 閲覧時はプレースホルダーを表示しない */
.form-as-plain-text :is(input, textarea)::placeholder {
  color: transparent;
  opacity: 0;
}

.form-as-plain-text :is(input, textarea)::-webkit-input-placeholder {
  color: transparent;
  opacity: 0;
}

.form-as-plain-text :is(input, textarea)::-moz-placeholder {
  color: transparent;
  opacity: 0;
}

/* プロフィールは下線スタイルのみ（profile.css を維持） */
.form-as-plain-text #profile :is(input, select, textarea, .form-control, .form-select) {
  background-color: #1F3635 !important;
  border: none !important;
  border-bottom: 2px solid #999 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: var(--form-control-min-height) !important;
  height: auto !important;
  padding: 0.375rem 0.75rem !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.form-as-plain-text #profile .dynamicline {
  border-bottom: 1px solid #d1d5db !important;
  padding: 0 !important;
}

.form-as-plain-text #profile #selectImage,
.form-as-plain-text #profile label[for="chooseImage"] {
  pointer-events: none;
}

/* ステータス: 閲覧時はフォームを文字表示・ラベルはクリック不可 */
.sheet-mode--view .status-stat-identity,
.sheet-mode--view .status-mobile-identity {
  cursor: default;
}

.sheet-mode--view .status-stat-identity .whiteColorBtn,
.sheet-mode--view .status-mobile-identity .whiteColorBtn {
  pointer-events: none;
}

.sheet-mode--view .sheet-status #statusAll :is(
  input.form-control,
  select.form-select,
  .stts_slct,
  .statusSelectForm,
  .statusInputForm,
  .status-mobile-control
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
}

/* Firefox: 閲覧時の number 入力は textfield 表示に戻しスピンボタンを隠す */
.sheet-mode--view .sheet-status #statusAll input[type="number"],
.form-as-plain-text .sheet-status #statusAll input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sheet-mode--view .sheet-status #statusAll input[type="number"]::-webkit-outer-spin-button,
.sheet-mode--view .sheet-status #statusAll input[type="number"]::-webkit-inner-spin-button,
.form-as-plain-text .sheet-status #statusAll input[type="number"]::-webkit-outer-spin-button,
.form-as-plain-text .sheet-status #statusAll input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-as-plain-text .sheet-status #statusAll :is(
  input.form-control,
  select.form-select,
  .stts_slct,
  .statusSelectForm,
  .statusInputForm,
  .status-mobile-control
) {
  text-align: center;
  min-width: 2rem;
}

.form-as-plain-text .status-derived-card {
  padding-bottom: 0.55rem;
}

.form-as-plain-text .status-mobile-stepper :is(.stts_slct, .statusSelectForm) {
  flex: 1 1 auto;
}

@media (max-width: 767px) {
  /* 閲覧時スマホ: 技能エリアと同じ 13.5ch + 58px の間隔 */
  .form-as-plain-text .sheet-status #statusAll .status-mobile-fields--view .status-mobile-stepper :is(.stts_slct, .statusSelectForm, select.form-select),
  .form-as-plain-text .sheet-status #statusAll .status-mobile-fields--view .status-mobile-view-value {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    justify-content: center;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
}

/* メモ欄（閲覧時は編集モーダルを開かず、本文は内容に合わせて伸びる） */
.sheet-mode--view .sheet-memo-viewer,
.sheet-mode--view .sheet-memo-viewer--readonly {
  pointer-events: auto;
  cursor: default;
  height: auto;
  max-height: none;
  overflow: visible;
}

.sheet-mode--view .sheet-memo-viewer:hover {
  border-color: rgba(186, 255, 252, 0.26);
}

.sheet-mode--view .sheet-memo-viewer a {
  pointer-events: auto;
  cursor: pointer;
}

.form-as-plain-text .sheet-memo-viewer {
  pointer-events: auto;
  cursor: default;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* 技能: 閲覧時は合計値に枠線・背景を付けない */
.sheet-mode--view .sheet-skill .skill-summary-value.view-static,
.sheet-mode--view .sheet-skill .skill-summary-value.view-static .skill-summary-value-btn {
  pointer-events: none;
  cursor: default;
}

.sheet-mode--view .sheet-skill .skill-summary-value.view-static .skill-summary-value-btn {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}