/* ========================================================================== 
   Bioguard 全站主樣式（修正版：modal 正確隱藏/顯示、訂閱勾勾僅在有資料時顯示且置中）
   ========================================================================== */

/* —— 全局 —— */
html[lang^="zh"] body { font-family:'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif; }
html[lang="en"] body { font-family:'Outfit',Arial,sans-serif; }
body { margin:0; padding:0; background:#f5f8fb; color:#12457a; font-size:1em; line-height:1.6; }

/* —— 頂部 —— */
.header-top { display:flex; align-items:center; justify-content:space-between; background:#1763a6; padding:0 2%; height:74px; box-sizing:border-box; }
.header-logo { height:60px; flex-shrink:0; }
.header-title { flex:1; text-align:center; color:#fff; font-size:2.4rem; font-weight:800; letter-spacing:2px; margin:0; }
.header-lang select { height:40px; min-width:90px; font-size:1rem; border:none; border-radius:.6em; padding:0 .8em; background:#fff; color:#1763a6; font-weight:bold; }

/* —— 導覽 —— */
.header-nav { display:flex; justify-content:center; background:#1763a6; padding:.6em 0; }
.header-nav .nav-item { position:relative; }
.header-nav a, .header-nav .dropdown-toggle { color:#fff; text-decoration:none; padding:0 1.2em; line-height:58px; font-weight:600; white-space:nowrap; transition:background .2s,color .2s; }
.header-nav a.active, .header-nav a:hover, .header-nav .dropdown-toggle.open { background:#12548b; color:#ffe13c; border-bottom:4px solid #ffe13c; }
.header-nav .dropdown-toggle:after { content:" ▼"; font-size:.8em; color:#ffe13c; }
.header-nav .dropdown { position:absolute; top:58px; left:0; display:none; background:#1763a6; border-radius:0 0 8px 8px; box-shadow:0 6px 16px rgba(0,0,0,.2); z-index:1000; }
.header-nav .nav-item.open > .dropdown { display:block; }
.header-nav .dropdown a { display:block; padding:.8em 1.5em; color:#fff; text-decoration:none; border-bottom:1px solid #205b99; }
.header-nav .dropdown a:last-child { border-bottom:none; }
.header-nav .dropdown a:hover, .header-nav .dropdown a.active { background:#12548b; color:#ffe13c; }

/* —— 容器 & 表格 —— */
.wrap { max-width:1200px; margin:2em auto; padding:0 1em; box-sizing:border-box; }
.wrap table, .wrap .table, .wrap .mainlist { width:100%; border-collapse:collapse; table-layout:auto; }
.wrap table th, .wrap table td { padding:.6em .8em; border-bottom:1px solid #e3f0ff; white-space:nowrap; overflow:visible; text-overflow:clip; vertical-align:middle; text-align:left; }
.wrap table th { background:#f0f7fe; color:#1763a6; font-weight:700; }
.wrap table tr:nth-child(even) { background:#f9fcff; }
.wrap table tr:hover { background:#f8fafd; }

/* 是否訂閱：未訂閱空白；有訂閱才顯示 ✔，而且水平/垂直置中 */
td.subscribe-status{
  /* 先把左右 padding 收斂，避免看起來偏左 */
  padding-left: 0.2em;
  padding-right: 0.2em;

  /* 用 flex 真的置中 */
  display: flex;
  align-items: center;    /* 垂直置中 */
  justify-content: center;/* 水平置中 */

  text-align: center;     /* 保險，若改回行內布局也會置中 */
  vertical-align: middle;
}

/* 不自動加符號 */
td.subscribe-status::before,
td.subscribe-status::after{
  content: none !important;
}

/* 方案 A：用 class 控制 */
td.subscribe-status.has-subscribe::before{
  content: "✔";
  color: #28a745;
  font-size: 1.4em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* 方案 B：用 <span class="chk">✔</span> */
td.subscribe-status .chk{
  display: inline-block;
  color: #28a745;
  font-size: 1.4em;
  line-height: 1;
  vertical-align: middle;
}


/* —— 按鈕 / 分頁 —— */
.btn, .circle-page, .btn-home { background:#1763a6; color:#fff; border:none; border-radius:1.2em; padding:.4em 1em; font-size:.95em; cursor:pointer; transition:background .2s; display:inline-block; text-decoration:none; }
.btn:hover, .circle-page:hover, .btn-home:hover { background:#114d86; }
.pagenav, .bottom-bar { text-align:center; margin:1.5em 0; }
.pagenav .circle-page { margin:0 .3em; }
a.btn-home { margin:.5em 0; }

/* —— 響應式 —— */
@media (max-width:768px){
  .header-title{font-size:1.5rem;}
  .header-nav{flex-wrap:wrap; padding:.4em 0;}
  .wrap{padding:0 .5em;}
  .wrap table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* ======== Modal：正確隱藏/顯示（不自動彈出） ======== */
.modal {
  display:none;                 /* 預設隱藏 */
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.4); z-index:9999;
  padding:1em; box-sizing:border-box;
  align-items:center; justify-content:center; /* 讓 .show 時可置中 */
}
.modal.show {                   /* 需要顯示時才加上 .show */
  display:flex;
}

.modal-content {
  background:#fff; width:90%; max-width:700px; max-height:90vh; overflow-y:auto;
  border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,0.1); margin:0; padding:1.5em; position:relative;
}
.modal-content .close { position:absolute; top:.5em; right:.5em; }

/* 表單橫排 */
.form-row { display:flex; align-items:center; margin-bottom:1em; }
.form-row > label { width:140px; text-align:right; margin-right:1em; font-weight:bold; }
.form-row > input, .form-row > select, .form-row > textarea, .form-row > .select2-container { flex:1; box-sizing:border-box; }
.modal-content .btn { margin-left:.5em; }

/* 讓訂閱欄位的勾勾置中（customers + export 頁面通用） */
.table td.subscribe-status,
.preview td.subs { 
  text-align: center !important;
}

/* 勾勾本體的外觀與真正置中 */
.table td.subscribe-status .chk,
.preview td.subs .chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;         /* 統一寬度，視覺真正置中 */
  height: 1.6em;
  line-height: 1;
  color: #28a745;
  font-size: 1.2em;
}
/* 固定表格版型，避免單欄撐大 */
.table-fixed { table-layout: fixed; width: 100%; }

/* 電子郵件欄位：固定寬度、允許換行與在標點處斷行 */
th.col-email, td.col-email {
  width: 460px;          /* 你可依頁面寬度調整 360~520px 都可 */
  max-width: 460px;
  white-space: normal;   /* 允許換行 */
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* 可選：每個 email 做成小標籤外觀（好讀） */
.col-email .email-item {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px 0;
  border-radius: 6px;
  background: #f1f6ff;
  border: 1px solid #d9e7ff;
  text-decoration: none;
  color: #12457a;
}
.col-email .email-item:hover { background: #e8f1ff; }

/* 手機寬度時，讓 email 欄占滿行，仍保持換行 */
@media (max-width: 768px) {
  th.col-email, td.col-email { width: auto; max-width: none; }
}
/* === i18n-friendly layout overrides === */
.wrap.form-page { 
  /* 預設（中文等）標籤寬與頁面寬 */
  --label-w: 120px;
  max-width: 1000px;
}

/* 英文：字較長 → 放大頁面與標籤寬，避免被裁切 */
html[lang="en"] .wrap.form-page {
  --label-w: 170px;       /* 需要更寬可調 180~200px */
  max-width: 1200px;      /* 頁面寬也放大 */
}

/* 日文：略放大標籤欄位即可（可依實際再調） */
html[lang="ja"] .wrap.form-page { --label-w: 130px; }

/* 簡中（如需） */
html[lang="zh-CN"] .wrap.form-page { --label-w: 130px; }

/* 讓 grid 用變數控制欄寬，並避免內容溢出 */
.row2{
  grid-template-columns: var(--label-w) minmax(0,1fr) var(--label-w) minmax(0,1fr);
}
.row1{
  grid-template-columns: var(--label-w) minmax(0,1fr);
}

/* label 不換行（英文字不會斷在中間）；如果還是太長，就加大 --label-w */
label{ 
  white-space: nowrap;
  line-height: 1.25;
}

/* 小螢幕時自動改單欄，避免擠壓 */
@media (max-width: 900px){
  .row2{ grid-template-columns: var(--label-w) minmax(0,1fr); }
}

/* 英文窄視窗時，頁寬跟著放到視窗 96% */
@media (max-width: 1200px){
  html[lang="en"] .wrap.form-page { max-width: 96vw; }
}