/* 通用訊息 dialog（showAlert）樣式，搭配 js/custom/dialog.js */

/*
	寬度上限。掛在 dialog 的外框（.ui-dialog）上，不是內容區。

	為什麼不用 jQuery UI 的 maxWidth 選項：dialog 的 _size() 只讀 options.width，
	maxWidth 是傳給 resizable widget 用的，本 dialog 是 resizable:false → 該選項完全不生效，
	width:'auto' 遇到長訊息就會一路撐到整個螢幕。

	兩行 max-width 是刻意的：舊瀏覽器不支援 min() 時會忽略第二行，退回 90vw，
	仍然有上限，不會爆版。
*/
.ui-dialog.showAlertWidget {
	min-width: 240px;
	min-width: min(240px, 90vw);
	max-width: 90vw;
	max-width: min(600px, 90vw);
}

/*
	內容區為直向 flex：訊息區自己捲動，按鈕列固定在底部。

	不這樣做的話（讓整個內容區捲動），長訊息會把「關閉」鈕推到捲動區底部，
	使用者得一路捲到底才找得到 —— 加這顆鈕的用意就沒了。
	overflow 從 jQuery UI 預設的 auto 改成 hidden，捲動交給訊息區。
*/
#showAlertDialog {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	line-height: 1.7;
	padding: 16px 18px;
}

#showAlertDialog .showAlertMessage {
	flex: 1 1 auto;
	min-height: 0;              /* flex 子項要能縮，overflow 才會生效 */
	overflow-y: auto;
	white-space: pre-line;      /* 訊息內的換行照顯示，不必依賴 HTML */
	word-break: break-word;
	font-size: 15px;
}

#showAlertDialog .showAlertActionArea {
	flex: 0 0 auto;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #e0e0e0;
	text-align: right;
}

/* 關閉鈕為次要動作，樣式與主要的引導按鈕區隔 */
#showAlertDialog .showAlertCloseBtn {
	display: inline-block;
	margin-right: 8px;
	padding: 7px 18px;
	border: 1px solid #c4c4c4;
	border-radius: 3px;
	background-color: #f5f5f5;
	color: #333;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

#showAlertDialog .showAlertCloseBtn:hover,
#showAlertDialog .showAlertCloseBtn:focus {
	background-color: #e6e6e6;
}

/* 引導按鈕實際上是 <a>，樣式做成按鈕外觀 */
#showAlertDialog .showAlertActionBtn {
	display: inline-block;
	padding: 7px 18px;
	border: 0;
	border-radius: 3px;
	background-color: #337ab7;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

#showAlertDialog .showAlertActionBtn:hover,
#showAlertDialog .showAlertActionBtn:focus {
	background-color: #286090;
	color: #fff;
	text-decoration: none;
}