/* =====================================================================
   共用樣式（所有系統共用）
   ===================================================================== */
* { box-sizing: border-box; }
body { margin: 0; padding: 20px; font-family: Arial, "Microsoft JhengHei", "微軟正黑體", "PingFang TC", sans-serif;
       font-size: 15px; color: #333; background: #f5f5f5; line-height: 1.5; }
a { color: #00739c; }
a:hover { text-decoration: underline; }
.container { max-width: 1400px; margin: 0 auto; background: #fff; padding: 24px 30px; border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.container.narrow { max-width: 460px; margin-top: 60px; }
h1 { font-size: 24px; color: #333; border-bottom: 3px solid #4CAF50; padding-bottom: 10px; margin: 10px 0 20px; }
h2 { font-size: 19px; margin: 28px 0 12px; color: #2e7d32; }
h3 { font-size: 16px; margin: 20px 0 10px; }
.muted { color: #888; font-size: 13px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* 頂端列 */
.topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
          font-size: 14px; color: #666; margin-bottom: 12px; }
.topbar-title a { color: #333; font-weight: bold; text-decoration: none; }
.inline-form { display: inline; margin: 0; }
.link-button { background: none; border: none; color: #f44336; padding: 0; cursor: pointer; font-size: 14px; }
.link-button:hover { text-decoration: underline; }

/* 選單 */
.nav { margin-bottom: 20px; padding: 10px 15px; background: #f8f9fa; border-radius: 4px; }
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.nav-menu a { display: block; padding: 6px 12px; color: #00739c; text-decoration: none; font-weight: bold; border-radius: 4px; }
.nav-menu a:hover { background: #e8f5e9; }
.nav-menu a.active { background: #4CAF50; color: #fff; }
.menu-toggle { display: none; }
/* 第二層下拉選單（滑鼠移入或鍵盤 Tab 進入時展開） */
.nav-menu > li { position: relative; }
.sub-menu { list-style: none; margin: 0; padding: 4px; display: none; position: absolute; top: 100%; left: 0; z-index: 100;
            min-width: 150px; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu { display: block; }
.sub-menu a { font-weight: normal; white-space: nowrap; }

/* 訊息 */
.message { padding: 12px 15px; margin: 10px 0; border-radius: 4px; border: 1px solid transparent; }
.message.success { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.message.error   { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.message.warning { background: #fff3cd; color: #856404; border-color: #ffeeba; }
.message.info    { background: #e7f3fe; color: #0c5460; border-color: #bee5eb; }
.message ul { margin: 6px 0 0; padding-left: 20px; }

/* 按鈕 */
button, .btn { display: inline-block; padding: 8px 16px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer;
               background: #4CAF50; color: #fff; text-decoration: none; line-height: 1.4; font-family: inherit; }
button:hover, .btn:hover { opacity: .85; text-decoration: none; }
.btn-primary { background: #4CAF50; }
.btn-secondary { background: #008CBA; }
.btn-gray { background: #888; }
.btn-danger { background: #f44336; }
.btn-warning { background: #ff9800; }
.btn-small { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* 表單 */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: bold; }
.required::after { content: " *"; color: #f44336; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=number],
input[type=search], input[type=file], select, textarea {
    width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; font-family: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: #4CAF50; outline: 2px solid rgba(76,175,80,.25); }
textarea { min-height: 80px; resize: vertical; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.form-row > .form-group { flex: 1 1 200px; }
.form-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.checkbox-label { font-weight: normal !important; display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; }
.field-error { color: #c62828; font-size: 13px; margin-top: 4px; }
.has-error input, .has-error select, input.has-error { border-color: #f44336; background: #fff8f8; }

/* 篩選區 */
.filter-box { background: #f8f9fa; border: 1px solid #e3e3e3; border-radius: 6px; padding: 14px 16px; margin-bottom: 16px; }
.filter-box .form-group { margin-bottom: 8px; }
.filter-box label { font-size: 13px; }

/* 表格 */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; vertical-align: top; font-size: 14px; }
th { background: #4CAF50; color: #fff; white-space: nowrap; }
th a { color: #fff; }
tr:nth-child(even) td { background: #fafafa; }
tr:hover td { background: #f0f7f0; }
td.actions { white-space: nowrap; }
table.detail th { width: 180px; background: #f1f8f1; color: #333; }

/* 多筆輸入表格 */
table.entry td { padding: 4px; }
table.entry input[type=text], table.entry input[type=email], table.entry input[type=url] { padding: 6px; }
table.entry tr.row-error td { background: #fff3f3; }
table.entry tr.row-warning td { background: #fffbea; }
.row-msg { font-size: 12px; margin-top: 2px; }
.row-msg.error { color: #c62828; }
.row-msg.warning { color: #8a6d00; }

/* 標籤、狀態 */
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #e0e0e0; color: #333; white-space: nowrap; }
.badge-green { background: #c8e6c9; color: #1b5e20; }
.badge-red { background: #ffcdd2; color: #b71c1c; }
.badge-orange { background: #ffe0b2; color: #e65100; }
.badge-blue { background: #bbdefb; color: #0d47a1; }
.badge-gray { background: #eee; color: #666; }

/* 統計卡 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 10px 0 20px; }
.stat-card { border: 1px solid #e0e0e0; border-radius: 6px; padding: 14px; background: #fafafa; }
.stat-card .stat-label { font-size: 13px; color: #666; }
.stat-card .stat-value { font-size: 26px; font-weight: bold; color: #2e7d32; }
.bar { background: #4CAF50; height: 12px; border-radius: 2px; display: inline-block; vertical-align: middle; }

/* 分頁 */
.pagination { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pagination a, .pagination .current { padding: 4px 10px; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; }
.pagination .current { background: #4CAF50; color: #fff; border-color: #4CAF50; }

/* 批次操作列 */
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; background: #fff8e1;
            border: 1px solid #ffe082; border-radius: 4px; margin: 10px 0; }
.bulk-bar select, .bulk-bar input[type=text] { width: auto; min-width: 140px; }

/* 系統入口 */
.system-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.system-card { display: block; border: 1px solid #c8e6c9; border-radius: 8px; padding: 20px; text-decoration: none; color: #333; background: #f9fdf9; }
.system-card:hover { background: #e8f5e9; text-decoration: none; }
.system-card strong { display: block; font-size: 17px; color: #2e7d32; margin-bottom: 6px; }

/* 手機 */
@media (max-width: 768px) {
    body { padding: 8px; }
    .container { padding: 14px; }
    .menu-toggle { display: block; background: #4CAF50; width: 100%; }
    .nav-menu { display: none; flex-direction: column; margin-top: 8px; }
    .nav-menu.show { display: flex; }
    .sub-menu { display: block; position: static; border: 0; box-shadow: none; background: transparent; padding: 0 0 0 16px; min-width: 0; }
    table.detail th { width: 110px; }
}

/* 發信狀態列 */
.send-status { padding: 8px 14px; border-radius: 4px; margin: -8px 0 16px; font-size: 14px; }
.send-on { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.send-off { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }

/* EDM 模板與活動 */
.preview-frame { width: 100%; min-height: 600px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.checklist li { margin: 4px 0; }
.check-ok::before { content: "✔ "; color: #2e7d32; font-weight: bold; }
.check-bad::before { content: "✘ "; color: #c62828; font-weight: bold; }
.check-warn::before { content: "⚠ "; color: #e65100; font-weight: bold; }
.var-list code { background: #f1f8f1; padding: 1px 6px; border-radius: 3px; margin-right: 4px; cursor: pointer; }
code { font-family: Menlo, Consolas, monospace; font-size: 13px; }