/* Dialog Reset */
dialog {
  border: none;
  padding: 0;
  max-width: 90vw;
  max-height: 90vh;
  /* 原生 dialog 置中特性：showModal() 配合 margin: auto 實現置中 */
  margin: auto;
}

/* Dialog Container */
.dialog {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 300px;
}

/* Backdrop */
.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Content Area */
.dialog-content {
  padding: 20px;
}

/* Actions Area */
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
  border-radius: 0 0 8px 8px;
}

/* Button Base Style (Bootstrap-like) */
.dialog-btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  transition: color 0.15s ease-in-out,
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
}

.dialog-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Primary Button */
.dialog-btn.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.dialog-btn.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.dialog-btn.btn-primary:active {
  background-color: #0a58ca;
  border-color: #0a53be;
}

/* Secondary Button */
.dialog-btn.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.dialog-btn.btn-secondary:hover {
  background-color: #5c636a;
  border-color: #565e64;
}

.dialog-btn.btn-secondary:active {
  background-color: #565e64;
  border-color: #51585e;
}

/* Success Button */
.dialog-btn.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.dialog-btn.btn-success:hover {
  background-color: #157347;
  border-color: #146c43;
}

.dialog-btn.btn-success:active {
  background-color: #146c43;
  border-color: #13653f;
}

/* Danger Button */
.dialog-btn.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.dialog-btn.btn-danger:hover {
  background-color: #bb2d3b;
  border-color: #b02a37;
}

.dialog-btn.btn-danger:active {
  background-color: #b02a37;
  border-color: #a52834;
}

/* Warning Button */
.dialog-btn.btn-warning {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.dialog-btn.btn-warning:hover {
  background-color: #ffca2c;
  border-color: #ffc720;
}

.dialog-btn.btn-warning:active {
  background-color: #ffcd39;
  border-color: #ffc720;
}

/* Info Button */
.dialog-btn.btn-info {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.dialog-btn.btn-info:hover {
  background-color: #31d2f2;
  border-color: #25cff2;
}

.dialog-btn.btn-info:active {
  background-color: #3dd5f3;
  border-color: #25cff2;
}