/* MJ SCORE shared components
   v1065: MjWindow sticky header と画像管理ボタンの共通配置を強化。
   個別IDの上書きではなく、class状態で見た目を揃える。 */

/* =========================================================
   Button component
   ========================================================= */
.mj-btn,
.mj-image-manage-actions .mj-image-manage-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  border: 2px solid #8cc8ff !important;
  background: #ffffff !important;
  color: #0050ff !important;
  -webkit-text-fill-color: #0050ff !important;
  font-size: 1rem !important;
  font-weight: 1000 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  box-shadow: 0 8px 20px rgba(0, 80, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  transition: transform 0.12s ease, opacity 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease !important;
}

.mj-btn--block,
.mj-image-manage-actions .mj-image-manage-btn {
  width: 100% !important;
}

.mj-btn--primary,
.mj-image-manage-actions .mj-image-manage-btn-primary {
  border-color: #004bff !important;
  background: linear-gradient(180deg, #2f8cff 0%, #0050ff 58%, #003bd1 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(0, 80, 255, 0.26), inset 0 1px 0 rgba(255,255,255,0.34) !important;
}

.mj-btn--outline,
.mj-btn--delete,
.mj-image-manage-actions .mj-image-manage-btn-delete {
  border-color: #8cc8ff !important;
  background: #ffffff !important;
  color: #0050ff !important;
  -webkit-text-fill-color: #0050ff !important;
  box-shadow: 0 8px 20px rgba(0, 80, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.mj-btn:active:not(:disabled):not([disabled]):not(.is-disabled):not(.is-mj-button-disabled),
.mj-image-manage-actions .mj-image-manage-btn:active:not(:disabled):not([disabled]):not(.is-disabled):not(.is-mj-button-disabled) {
  transform: translateY(1px) scale(0.99) !important;
}

.mj-btn.is-disabled,
.mj-btn.is-mj-button-disabled,
.mj-btn:disabled,
.mj-btn[disabled],
.mj-btn[aria-disabled="true"],
.mj-image-manage-actions .mj-image-manage-btn.is-disabled,
.mj-image-manage-actions .mj-image-manage-btn.is-mj-button-disabled,
.mj-image-manage-actions .mj-image-manage-btn.is-image-action-disabled,
.mj-image-manage-actions .mj-image-manage-btn:disabled,
.mj-image-manage-actions .mj-image-manage-btn[disabled],
.mj-image-manage-actions .mj-image-manage-btn[aria-disabled="true"] {
  opacity: 0.48 !important;
  filter: grayscale(0.12) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.mj-btn--small { min-height: 38px !important; padding: 8px 12px !important; font-size: 0.86rem !important; border-radius: 13px !important; }
.mj-btn--large { min-height: 54px !important; padding: 14px 18px !important; font-size: 1.08rem !important; border-radius: 18px !important; }

/* =========================================================
   Image manage actions component
   ========================================================= */
.mj-image-manage-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 12px !important;
  direction: ltr !important;
}

.mj-image-manage-actions.hidden {
  display: none !important;
}

.mj-image-manage-actions [data-image-action="load"],
.mj-image-manage-actions [data-image-action="edit"] {
  grid-column: auto !important;
}

.mj-image-manage-actions [data-image-action="delete"] {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: min(78%, 320px) !important;
  min-height: 42px !important;
}

.mj-image-manage-actions.is-image-manage-empty .mj-image-manage-btn[data-image-action="edit"],
.mj-image-manage-actions.is-image-manage-empty .mj-image-manage-btn[data-image-action="delete"],
.mj-image-manage-actions[data-has-image="false"] .mj-image-manage-btn[data-image-action="edit"],
.mj-image-manage-actions[data-has-image="false"] .mj-image-manage-btn[data-image-action="delete"] {
  opacity: 0.48 !important;
  filter: grayscale(0.12) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.mj-image-manage-actions.is-image-manage-ready .mj-image-manage-btn:not(.is-image-action-disabled),
.mj-image-manage-actions[data-has-image="true"] .mj-image-manage-btn:not(.is-image-action-disabled) {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* =========================================================
   Chip component: 今後、卓条件/ステータス/ラベル系をここに集約する
   ========================================================= */
.mj-chip {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 24px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(0, 104, 255, 0.28) !important;
  background: #ffffff !important;
  color: #0050ff !important;
  -webkit-text-fill-color: #0050ff !important;
  font-size: 0.74rem !important;
  font-weight: 1000 !important;
  line-height: 1.1 !important;
}

.mj-chip--blue {
  border-color: #0050ff !important;
  background: #006dff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.mj-chip--muted {
  border-color: rgba(0, 104, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: rgba(0, 82, 190, 0.78) !important;
  -webkit-text-fill-color: rgba(0, 82, 190, 0.78) !important;
}

/* =========================================================
   Window component: 今後、管理ウィンドウ/確認ダイアログをここに集約する
   ========================================================= */
.mj-window {
  box-sizing: border-box !important;
  border: 3px solid #006dff !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 16px 38px rgba(0, 48, 160, 0.24) !important;
}

.mj-window__head {
  background: #0072ff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.mj-window__close {
  border-radius: 999px !important;
}


/* v1065: sticky-header window component */
.mj-window--sticky-head {
  max-height: min(92vh, 760px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.mj-window--sticky-head .mj-window__head {
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
  flex: 0 0 auto !important;
}

.mj-window__body {
  box-sizing: border-box !important;
}

.mj-window--player-info {
  width: min(100%, 360px) !important;
}

.mj-window--player-info .mj-window__head {
  background: linear-gradient(180deg, #1477ea 0%, #0058d9 100%) !important;
}