/* =========================================================
   App Theme for SweetAlert2 (Minimal / Business)
   - Confirm: dark background + white text
   - Close/Cancel: light background + black text
   ========================================================= */

:root{
  /* Temporary accent (navy). Change later if needed. */
  --app-navy: #0B2A4A;
  --app-focus: #2563EB;

  /* Dialog */
  --dlg-bg: #ffffff;
  --dlg-title: #111827;
  --dlg-text: #374151;

  /* Buttons */
  --btn-dark-bg: #111827;
  --btn-dark-fg: #ffffff;

  --btn-light-bg: #F9FAFB;
  --btn-light-fg: #111827;
  --btn-light-border: rgba(17, 24, 39, 0.18); /* #111827 の薄め */

  --btn-danger-bg: #B91C1C;
  --btn-danger-fg: #ffffff;
  /* 上品な赤（彩度控えめ） */
  --danger-bg: #FEF2F2;           /* very light red */
  --danger-border: rgba(245, 10, 10, 0.28); /* soft red border */
  --danger-text: #7F1D1D;         /* deep red text */
  --danger-title: rgba(131, 1, 1, 0.751);
}

/* Popup */
.app-dialog{
  background: var(--dlg-bg);
  border-radius: 14px;
  padding: 22px 22px 18px;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  max-width: 420px;
}

/* Title / Body */
.app-dialog__title{
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--dlg-title);
  letter-spacing: .02em;
}

.app-dialog__body{
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  color: #374151;
}

/* Actions spacing */
.app-dialog__actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* Common button */
.app-btn{
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 120px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  transition: transform .02s ease, filter .12s ease, box-shadow .12s ease;
}

.app-btn:active{ transform: translateY(1px); }

.app-btn:focus{
  outline: none;
  /* focus ring uses app focus color (can align with nav later) */
  box-shadow: 0 0 0 2px rgba(37,99,235,.35);
}

/* Confirm (Dark) */
.app-btn--confirm-dark{
  background: var(--base-color-primary);
  color: var(--base-color-white);
  border-color: var(--btn-dark-bg);
}
.app-btn--confirm-dark:hover{ filter: brightness(1.08); }

/* Close/Cancel (Light) */
.app-btn--close-light{
  background:#aaaaaa;
  color: var(--base-color-white);
  border: 1px solid transparent; /* borderは透明 */
/*  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.16); /* 内側1px */

}

/* 白ボタン：フォーカス時は「内側1px + 外側2px」の二層 */
.app-btn--close-light:focus,
.app-btn--close-light:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 39, 0.16),
    0 0 0 2px rgba(37, 99, 235, 0.22);  /* 外側リングは薄く */
}
.app-btn--close-light:hover{ filter: brightness(0.98); }

/* Danger (Delete etc.) */

/* ダイアログ全体を薄赤で */
.app-dialog--danger{
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  box-shadow: 0 18px 50px rgba(185, 28, 28, 0.14); /* 赤寄りの影（強すぎない） */
}

/* タイトルを使わない運用なら本文が主役なので少し強調 */
.app-dialog--danger .app-dialog__body{
  color: var(--danger-text);
  font-weight: 600;  /* 上品に強調 */
}

/* （任意）ボタンエリア上の余白を少し増やすと“警告感”が整う */
.app-dialog--danger .app-dialog__actions{
  margin-top: 16px;
}

/* ✅ warn のタイトルだけ赤寄り＆少し小さめ見出し */
.app-dialog__title--danger{
  padding-top:0;
  margin-top: 0;       /* 念のため */
  margin-bottom: 10px; /* 区切り線込みで調整しやすい */
  padding-bottom: 10px;
  color: var(--danger-title);
  font-weight: 800;
  font-size: 16px;   /* 18pxが強すぎるなら 16px がおすすめ */
  border-bottom: 1px solid rgba(196, 0, 0, 0.829);
}

.app-btn--danger:hover{ filter: brightness(1.06); }


.swal2-container {
  z-index: 12000 !important;
}