/* OP 後台外觀重現層 —— 用純 CSS 做出 Bootstrap 3 的視覺，讓員工零學習成本。
   ⛔ 這不是 Bootstrap，是照 OP 實際畫面量出來的對應值。 */
:root{
  /* ⭐⭐ 全部取自 OP 的 bootstrap-reset.css —— OP 蓋掉了 Bootstrap 原色，
     這些才是員工每天看到的顏色。⛔ 不要改回 Bootstrap 預設。 */
  --op-success:#95b75d; --op-success-h:#88a755;   /* 橄欖綠（編輯/確認） */
  --op-info:#57c8f1;    --op-info-h:#53bee6;      /* 亮藍（查詢/查看） */
  --op-warning:#f3c022; --op-warning-h:#e4ba00;   /* 金黃（清空/新增） */
  --op-danger:#fa8564;  --op-danger-h:#ec6459;    /* 橘紅（刪除/作廢/退款） */
  --op-primary:#1fb5ad; --op-primary-h:#1ca59e;   /* 青綠（連結/主要） */
  --op-teal:#2eb4ad;
  --op-head:#8fa9bd;
  --op-bd:#ddd; --op-bg:#f1f2f7; --op-text:#333;
}
*{box-sizing:border-box}
body{margin:0;background:var(--op-bg);color:var(--op-text);
  font:13px/1.42857 "Microsoft JhengHei","微軟正黑體","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
  /* ⭐ 13px＋微軟正黑體優先，取自 OP style.css body */

/* ── 版面 ── */
.op-wrap{padding:16px}
.op-panel{background:#fff;border:1px solid var(--op-bd);border-radius:4px;margin-bottom:18px}
.op-panel-head{padding:10px 15px;border-bottom:1px solid var(--op-bd);background:#fafafa;
  font-size:13px;color:#777}
.op-panel-body{padding:15px}
.op-title{font-size:20px;font-weight:400;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.op-title i{color:#666}
.op-title-bar{display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:10px;margin-bottom:14px}

/* ── 按鈕（對齊 Bootstrap 3 尺寸） ── */
.btn{display:inline-block;padding:6px 12px;border:1px solid transparent;border-radius:4px;
  font-size:14px;line-height:1.42857;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .15s}
.btn:disabled,.btn.is-disabled{opacity:.65;cursor:not-allowed}
.btn-xs{padding:1px 5px;font-size:12px;border-radius:3px}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-success{background:var(--op-success);border-color:var(--op-success-h);color:#fff}.btn-success:hover{background:var(--op-success-h)}
.btn-info{background:var(--op-info);border-color:var(--op-info-h);color:#fff}   .btn-info:hover{background:var(--op-info-h)}
.btn-warning{background:var(--op-warning);border-color:var(--op-warning-h);color:#fff}.btn-warning:hover{background:var(--op-warning-h)}
.btn-danger{background:var(--op-danger);border-color:var(--op-danger-h);color:#fff} .btn-danger:hover{background:var(--op-danger-h)}
.btn-primary{background:var(--op-primary);border-color:var(--op-primary-h);color:#fff}.btn-primary:hover{background:var(--op-primary-h)}
.btn-teal   {background:var(--op-teal);color:#fff}
.btn-default{background:#fff;border-color:#ccc;color:#333}.btn-default:hover{background:#e6e6e6}

/* ── 篩選列 ── */
.op-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.op-sel,.op-inp{height:34px;padding:6px 12px;border:1px solid #ccc;border-radius:4px;
  background:#fff;font-size:14px;line-height:1.42857143;color:#555;max-width:100%}
  /* ⭐ 取自 OP bootstrap .form-control */
.op-sel{min-width:150px;cursor:pointer}
.op-inp{min-width:180px}
.op-sel:focus,.op-inp:focus{outline:0;border-color:#66afe9;box-shadow:0 0 6px rgba(102,175,233,.4)}
.op-hint{font-size:13px;color:#777}

/* ── 表格 ── */
.op-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.op-table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
.op-table th{background:#f0f3f6;border:1px solid var(--op-bd);padding:8px;
  text-align:left;font-weight:700;white-space:nowrap;color:#4a5c6b}
.op-table td{border:1px solid var(--op-bd);padding:8px;vertical-align:middle;line-height:1.42857143}
.op-table tbody tr:nth-child(odd){background:#f9f9f9}
.op-table tbody tr:hover{background:#f0f7fb}
.op-table .num{text-align:right;font-variant-numeric:tabular-nums}
.op-table .ctr{text-align:center}
.op-thumb{width:46px;height:46px;object-fit:cover;border:1px solid #e5e5e5;border-radius:2px;
  background:#fafafa;display:block}

/* ── 狀態文字（OP 用純文字不用色塊） ── */
.st{font-size:13px}
.st-sub{color:#e74c3c;font-size:12px;display:block}
.st-ok{color:#5cb85c}.st-warn{color:#f0ad4e}.st-mute{color:#999}

/* ── 分頁 ── */
.op-pager{display:flex;gap:4px;align-items:center;font-size:13px;color:#666}
.op-pager button{width:30px;height:30px;border:1px solid #ccc;background:#fff;border-radius:3px;cursor:pointer}
.op-pager button:disabled{opacity:.4;cursor:not-allowed}

/* ── 提示條（OP 的貼心小提醒） ── */
.op-tip{background:#fcf8e3;border:1px solid #faebcc;color:#8a6d3b;padding:12px 15px;
  border-radius:4px;margin-bottom:14px;font-size:13px;line-height:1.7;position:relative}
.op-tip .x{position:absolute;right:10px;top:8px;cursor:pointer;opacity:.5;background:none;border:0;font-size:18px}
.op-tip b{color:#c9302c}
.op-note{color:#c9302c;font-size:13px;margin-bottom:10px}

/* ── 測試標記（⛔ 平行版專用，換新時整條移除） ── */
.op-testbar{background:#d9534f;color:#fff;text-align:center;padding:5px;font-size:13px;
  font-weight:700;letter-spacing:.05em;position:sticky;top:0;z-index:50}
.op-testbar a{color:#fff;text-decoration:underline}

/* ── 頂列 ── */
.op-nav{background:#fff;border-bottom:1px solid var(--op-bd);padding:9px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.op-nav .brand{font-weight:700;font-size:15px}
.op-nav a{color:#337ab7;text-decoration:none;font-size:13px}
.op-nav a:hover{text-decoration:underline}
.op-nav .sp{margin-left:auto}
@media(max-width:640px){.op-wrap{padding:10px}.op-sel,.op-inp{min-width:0;flex:1 1 45%}}