/* ============================================================
 * erp-design.css — Ray's ERP 設計系統規範（mobile + future shared）
 * 來源：UIUX-Manual.md §1（字體）/ §9（pill）/ §10（breadcrumb）/ §11（filter select）/ §12（meta/tag）
 * 給 mobile.html 載入；dashboard.html 仍用自己 inline 版本
 * ============================================================ */

/* ============================================================
 * §1.5 字體 @font-face（Blender TSL 本地 + Latin 600 unicode-range）
 * ============================================================ */
@font-face{
  font-family:'Blender TSL';
  src:url('fonts/Blender-TSL-Book.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Blender TSL';
  src:url('fonts/Blender-TSL-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
/* §11.3 字體 stack（2026-06-16 更新）— Latin 走 Overpass / Blender TSL；**中文字體不指定**
   font-family 一律收尾 sans-serif，CJK 字交給系統字體（PingFang TC / Microsoft JhengHei…）。
   原因：思源黑體（Noto Sans TC）字形基線偏高，line-height:1 + flex 置中時頻繁視覺偏上；
   改用系統字體後基線正常、置中問題大幅改善。全站 font stack 已移除所有 'Noto Sans TC'。
   - Latin 字（2026, $1.6M）→ Overpass（數字另用 Blender TSL）
   - CJK 字（年, 月）→ 不指定，由系統 sans-serif 接手 */

/* ============================================================
 * §9 Pill 元素規範（凍結 — 26px / 8px / 12px / 500）
 * ⚠ 垂直置中根因（2026-06-10 量測）：Noto Sans TC/Overpass 字形 ink 在 line-height:1 + flex 置中時
 *   會「偏上」約 1.5~1.8px。任何 pill 文字置中的鐵則：在 flex(align-items:center)+line-height:1 基礎上，
 *   padding-top 比 padding-bottom 多 ~3px（等效把文字往下推 1.5px），內含 svg/dot 給 margin-top:-1.5px 補回。
 *   不可用對稱/零垂直 padding（會偏上）也不可用非 flex 的 inline-block（同樣偏上）。ray-pill 已內建此補償。
 * ============================================================ */
.ray-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:26px;padding:3px 10px 0 10px;
  border-radius:8px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 1px 2px rgba(15,23,42,0.06);
  font-size:12px;font-weight:500;letter-spacing:.02em;line-height:1;
  font-family:'Overpass',sans-serif;
  box-sizing:border-box;white-space:nowrap;cursor:default;vertical-align:middle;
  text-align:center;
}
.ray-pill.has-tail{padding:3px 3px 0 10px}
/* v34.18.3: pill 文字偏上修正 — padding-top:3 推下文字 1.5px，svg/inner/dot 用負 margin 補回原位 */
.ray-pill > svg{display:block;width:13px;height:13px;flex-shrink:0;color:currentColor;margin-top:-1.5px}
.ray-pill > .ray-pill-text{display:inline-flex;align-items:center;justify-content:center;height:auto}
.ray-pill > .ray-pill-inner{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;
  padding:1.5px 8px 0 8px;height:18px;border-radius:6px;
  font-size:10.5px;font-weight:600;line-height:1;flex-shrink:0;
  margin-top:-3px;
  box-sizing:border-box
}
.ray-pill > .ray-pill-inner > .ray-pill-text{padding-top:0;height:auto}
/* 5 業務類型（深底白字） */
.ray-pill.t-vendor{background:#1e40af;color:#fff}
.ray-pill.t-traffic{background:#a16207;color:#fff}
.ray-pill.t-postal{background:#15803d;color:#fff}
.ray-pill.t-other{background:#475569;color:#fff}
.ray-pill.t-admin{background:#6d28d9;color:#fff}
/* v34.72.20+: 地租 — 深褐紅 */
.ray-pill.t-rent{background:#7c2d12;color:#fff}
.ray-pill.t-vendor > .ray-pill-inner{color:#1e40af}
.ray-pill.t-traffic > .ray-pill-inner{color:#a16207}
.ray-pill.t-postal > .ray-pill-inner{color:#15803d}
.ray-pill.t-other > .ray-pill-inner{color:#475569}
.ray-pill.t-admin > .ray-pill-inner{color:#6d28d9}
.ray-pill.t-rent > .ray-pill-inner{color:#7c2d12}
/* 站點 — 中性 */
.ray-pill.t-site{background:#f1f5f9;color:#475569}
/* 4 狀態（dot prefix） */
.ray-pill.t-status::before{content:'';width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;margin-top:-1.5px}
.ray-pill.s-draft{background:#f1f5f9;color:#475569}.ray-pill.s-draft::before{background:#94a3b8}
.ray-pill.s-pending{background:#fef3c7;color:#a16207}.ray-pill.s-pending::before{background:#f59e0b}
.ray-pill.s-approved{background:#dcfce7;color:#15803d}.ray-pill.s-approved::before{background:#16a34a}
.ray-pill.s-rejected{background:#fee2e2;color:#991b1b}.ray-pill.s-rejected::before{background:#ef4444}
/* v32.8: s-forecast — 預估/未實現（amber, 無 dot — 不加 t-status 即可） */
.ray-pill.s-forecast{background:#fef3c7;color:#a16207}
/* 數值類型 — 用顏色表達正/負（mobile YoY/MoM 用） */
.ray-pill.t-num-up{background:#dcfce7;color:#15803d}
.ray-pill.t-num-down{background:#fee2e2;color:#991b1b}

/* ============================================================
 * §12 Meta / Tag 規範（14px / 500 / #94a3b8 純事實 vs 22px / 600 主識別）
 * ============================================================ */
.ray-meta{display:inline-flex;align-items:center;flex-wrap:wrap;column-gap:14px;row-gap:4px;line-height:1;vertical-align:middle}
.ray-meta-item{font-size:14px;font-weight:500;color:#94a3b8;font-family:'Overpass',sans-serif;letter-spacing:0;line-height:1;display:inline-flex;align-items:center;gap:5px}
.ray-meta-item.is-strong{color:#475569;font-weight:600}
.ray-meta-item.is-actual{color:#15803d;font-weight:600}
.ray-meta-item.is-forecast{color:#a16207;font-weight:600}
.ray-meta-divider{display:inline-block;width:1px;height:12px;background:#e2e8f0;flex-shrink:0;align-self:center}

.ray-tag{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:2px 9px 0 9px;background:#475569;color:#fff;border-radius:5px;font-size:11.5px;font-weight:600;letter-spacing:.02em;font-family:'Overpass',sans-serif;line-height:1;flex-shrink:0;white-space:nowrap;vertical-align:middle;box-sizing:border-box;text-align:center}
.ray-tag.t-bank-mega{background:#0f5132}
.ray-tag.t-bank-bot{background:#1e3a8a}
.ray-tag.t-tesla{background:#0f172a}
.ray-tag.t-upower{background:#a16207}

/* ============================================================
 * §10 Breadcrumb 規範（14px / link 500 灰 / current 600 深）
 * ============================================================ */
.exp-breadcrumb{display:block;margin:0 0 12px 2px}
.exp-breadcrumb-title{font-size:14px;font-weight:600;color:#0f172a;line-height:1.2;margin:0;display:inline-flex;align-items:center;flex-wrap:wrap;letter-spacing:0;font-family:'Overpass',sans-serif}
.exp-breadcrumb-title .exp-bc-link{background:none;border:none;padding:0;cursor:pointer;font-size:14px;font-weight:500;color:#94a3b8;font-family:inherit;text-decoration:none;transition:color .12s;letter-spacing:0}
.exp-breadcrumb-title .exp-bc-link:hover{color:#2F64B2}
.exp-breadcrumb-title .exp-bc-sep{color:#cbd5e1;margin:0 8px;font-weight:500}
.exp-breadcrumb-title .exp-bc-current{color:#0f172a;font-weight:600}

/* ============================================================
 * §11 Filter dropdown — RAY_SELECT（28px desktop / 36px mobile）+ Latin 600/CJK 500 分流
 * ============================================================ */
.ray-select{position:relative;display:inline-block;vertical-align:middle}
.ray-select-native{position:absolute !important;left:-9999px;top:0;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;margin:0;padding:0}
.ray-select-trigger{
  display:inline-flex;align-items:center;justify-content:space-between;gap:6px;
  width:100%;height:44px;padding:0 12px 0 14px;
  background:#fff;border:1px solid #e2e8f0;border-radius:8px;
  font-family:'Overpass',sans-serif;
  font-size:14px;font-weight:600;color:#0f172a;
  letter-spacing:0;line-height:1.4;cursor:pointer;
  box-sizing:border-box;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, color .15s ease
}
.ray-select-trigger > .ray-select-chev{color:#475569;flex-shrink:0;display:block;transition:transform .18s ease, color .15s ease}
.ray-select-trigger:hover{border-color:#cbd5e1}
.ray-select.ray-select-open > .ray-select-trigger{border:2px solid #2F64B2;padding:0 11px 0 13px}
.ray-select.ray-select-open > .ray-select-trigger > .ray-select-chev{color:#2F64B2;transform:rotate(180deg)}
/* v32.3c: padding-top 2px CJK 視覺補償 */
.ray-select-trigger > .ray-select-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:2px}
.ray-select-trigger > .ray-select-label.is-placeholder{color:#94a3b8}
/* override removed — see new spec above */
.ray-select-panel{
  position:absolute;top:calc(100% + 4px);left:0;
  background:#fff;border:1px solid #e2e8f0;border-radius:10px;
  box-shadow:0 12px 32px -10px rgba(15,23,42,0.18),0 2px 6px -2px rgba(15,23,42,0.06);
  padding:4px;min-width:100%;
  font-family:'Overpass',sans-serif;font-size:14px;font-weight:600;
  z-index:120;max-height:280px;overflow-y:auto;
  animation:raySelectPop .15s ease-out
}
@keyframes raySelectPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ray-select-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:44px;padding:0 14px;border-radius:6px;
  font-weight:600;color:#0f172a;cursor:pointer;white-space:nowrap;
  transition:background .12s ease, color .12s ease
}
.ray-select-opt:hover,.ray-select-opt.is-active{background:#f1f5f9}
.ray-select-opt.sel{background:#eff4fb;color:#2F64B2;font-weight:600}
.ray-select-opt > span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.ray-select-opt .ray-select-check{color:transparent;display:block;flex-shrink:0}
.ray-select-opt.sel .ray-select-check{color:#2F64B2}

/* 月份快切 stepper（‹ 6月 ›）— 沿用 ray-select 規範：28px/8px、同下拉面板 */
/* 手機：年份 trigger 為 44px/14px/600（erp-design ray-select-trigger），月份 stepper 同尺寸才一致 */
.ms{position:relative;display:inline-flex;align-items:center;height:44px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;box-sizing:border-box;font-family:'Overpass',sans-serif}
.ms-arr{width:32px;align-self:stretch;display:flex;align-items:center;justify-content:center;color:#64748b;cursor:pointer;border:0;background:none;padding:0}
.ms-arr:first-of-type{border-radius:7px 0 0 7px}.ms-arr:last-of-type{border-radius:0 7px 7px 0}
.ms-arr:hover{background:#f1f5f9;color:#0f172a}
.ms-arr:disabled{opacity:.35;cursor:default;background:none;color:#94a3b8}
.ms-arr svg{width:18px;height:18px;display:block}
.ms-mid{display:flex;align-items:center;align-self:stretch;padding:2px 4px 0;min-width:40px;justify-content:center;white-space:nowrap;font-size:14px;font-weight:600;line-height:1.4;color:#0f172a;cursor:pointer}
.ms-mid:hover{background:#f8fafc}
.ms.open{border-color:#2F64B2}.ms.open .ms-mid{color:#2F64B2}
.ms-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 32px -10px rgba(15,23,42,.18),0 2px 6px -2px rgba(15,23,42,.06);padding:4px;z-index:130;max-height:260px;overflow:auto;animation:msPop .15s ease-out}
.ms-panel[hidden]{display:none}
@keyframes msPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ms-opt{display:flex;align-items:center;justify-content:center;height:40px;padding:0 6px;border-radius:6px;font-size:14px;font-weight:500;color:#0f172a;cursor:pointer;white-space:nowrap}
.ms-opt:hover{background:#f1f5f9}.ms-opt.sel{background:#eff4fb;color:#2F64B2;font-weight:600}
.m-filter-row .ms{flex-shrink:0}

.ray-search-input{
  display:inline-flex;align-items:center;gap:6px;
  height:44px;padding:0 14px;
  background:#fff;border:1px solid #e2e8f0;border-radius:8px;
  font-family:'Overpass',sans-serif;
  font-size:14px;font-weight:500;color:#0f172a;
  letter-spacing:0;line-height:1.4;
  box-sizing:border-box;outline:none;
  transition:border-color .15s ease
}
.ray-search-input:hover{border-color:#cbd5e1}
.ray-search-input:focus,.ray-search-input:focus-within{border:2px solid #2F64B2;padding:0 11px}
.ray-search-input::placeholder{color:#94a3b8;font-weight:500}

/* ============================================================
 * RAY_DIALOG — 取代 alert / confirm 的自訂 modal
 * ============================================================ */
.ray-dialog-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,0.32);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  z-index:10000;padding:20px;
  opacity:0;transition:opacity .18s ease;
  font-family:'Overpass',sans-serif;
}
.ray-dialog-overlay.open{opacity:1}
.ray-dialog{
  width:100%;max-width:420px;background:#fff;border-radius:14px;
  box-shadow:0 24px 64px -12px rgba(15,23,42,0.28),0 8px 16px -4px rgba(15,23,42,0.08);
  overflow:hidden;
  transform:translateY(8px) scale(0.98);transition:transform .18s ease;
}
.ray-dialog-overlay.open > .ray-dialog{transform:translateY(0) scale(1)}
.ray-dialog-head{display:flex;gap:14px;padding:22px 22px 16px}
.ray-dialog-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.ray-dialog-title-wrap{flex:1;min-width:0;padding-top:2px}
.ray-dialog-title{
  margin:0 0 6px;font-size:15px;font-weight:600;color:#0f172a;line-height:1.3;
}
.ray-dialog-msg{
  font-size:13.5px;font-weight:500;color:#475569;line-height:1.55;
  word-break:break-word;
}
.ray-dialog-actions{
  display:flex;justify-content:flex-end;gap:8px;
  padding:12px 18px 18px;background:#f8fafc;border-top:1px solid #e2e8f0;
}
.ray-dialog-btn{
  height:36px;padding:0 16px;border-radius:8px;border:1px solid transparent;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
  letter-spacing:.02em;
}
.ray-dialog-btn-cancel{background:#fff;border-color:#cbd5e1;color:#475569}
.ray-dialog-btn-cancel:hover{background:#f1f5f9;border-color:#94a3b8}
.ray-dialog-btn-ok{background:#2F64B2;color:#fff;border-color:#2F64B2}
.ray-dialog-btn-ok:hover{background:#264f8d;border-color:#264f8d}
.ray-dialog-btn-ok.is-danger{background:#dc2626;border-color:#dc2626}
.ray-dialog-btn-ok.is-danger:hover{background:#b91c1c;border-color:#b91c1c}
.ray-dialog-btn:focus-visible{outline:2px solid #2F64B2;outline-offset:2px}
@media (max-width:480px){
  .ray-dialog{max-width:100%}
  .ray-dialog-head{padding:18px 18px 14px}
  .ray-dialog-actions{padding:10px 14px 14px}
}

/* ============================================================
 * §14 (v34.18) BETA tag — 標示尚未完善的功能
 * 灰色 outline 風格（user 選 B 風格）
 * ============================================================ */
.ray-beta{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#94a3b8;border:1px solid #cbd5e1;font-size:9.5px;font-weight:700;padding:2px 6px 0;height:16px;border-radius:4px;letter-spacing:0.04em;text-transform:uppercase;line-height:1;font-family:'Overpass',sans-serif;flex-shrink:0;vertical-align:middle;text-indent:0.04em;box-sizing:border-box}
body.dark-theme .ray-beta{color:rgba(255,255,255,0.5);border-color:rgba(255,255,255,0.25)}
.notify-panel.theme-dark .ray-beta{color:rgba(255,255,255,0.55);border-color:rgba(255,255,255,0.3)}

/* §14 (v34.18) BETA 在 mobile sub-tab / page heading 的尺寸調整 */
.m-sub-btn .ray-beta{font-size:8.5px;padding:2px 5px 0;height:14px;margin-left:4px;letter-spacing:0.03em}
/* v34.20: 分頁標題 BETA 改黑底白字 */
.m-page-h .ray-beta{font-size:10px;padding:2px 7px 0;height:18px;margin-left:8px;letter-spacing:0.04em;background:#0f172a;color:#fff;border-color:#1e293b}
body.dark-theme .m-page-h .ray-beta{background:#0f172a;color:#fff;border-color:rgba(255,255,255,0.15)}

/* ============================================================
 * §15 (v34.47-49) Button system — 5 size 對齊 ray-pill / ray-select / ray-tag
 * dashboard.html 有同份 inline 版本；之後 Phase J 會把 dashboard 改 import 此檔
 * ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:5px 18px 0 18px;
  border-radius:10px;border:1px solid transparent;background:transparent;
  color:#334155;font-size:13.5px;font-weight:600;line-height:1;
  font-family:'Overpass',sans-serif;cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  user-select:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;
}
.btn:focus{outline:none}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(47,100,178,0.25)}
.btn .btn-ic{width:16px;height:16px;flex-shrink:0;stroke-width:2;display:block;margin-top:-2px}
.btn:active{transform:translateY(1px)}
/* sizes */
.btn-xs{height:22px;padding:3px 9px 0 9px;font-size:11.5px;border-radius:5px;gap:4px}
.btn-xs .btn-ic{width:11px;height:11px;margin-top:-1.5px}
.btn-sm{height:26px;padding:3px 10px 0 10px;font-size:12px;border-radius:8px;gap:5px;font-weight:500}
.btn-sm .btn-ic{width:12px;height:12px;margin-top:-1.5px}
.btn-md{height:28px;padding:3px 12px 0 12px;font-size:12.5px;border-radius:8px;gap:5px}
.btn-md .btn-ic{width:13px;height:13px;margin-top:-1.5px}
.btn-lg{height:40px;padding:5px 18px 0 18px;font-size:13.5px;border-radius:10px;gap:6px}
.btn-lg .btn-ic{width:16px;height:16px;margin-top:-2px}
.btn-xl{height:48px;padding:6px 26px 0 26px;font-size:14.5px;border-radius:12px;gap:6px}
.btn-xl .btn-ic{width:18px;height:18px;margin-top:-2px}
/* hierarchy */
.btn-primary{background:#0f172a;color:#fff;border-color:#0f172a}
.btn-primary:hover{background:#1e293b;border-color:#1e293b;box-shadow:0 4px 12px rgba(15,23,42,0.18)}
.btn-primary:active{background:#0b1220;border-color:#0b1220;box-shadow:0 1px 3px rgba(15,23,42,0.2)}
.btn-brand{background:#2F64B2;color:#fff;border-color:#2F64B2}
.btn-brand:hover{background:#264f8f;border-color:#264f8f;box-shadow:0 4px 12px rgba(47,100,178,0.25)}
.btn-brand:active{background:#1f4377;border-color:#1f4377}
.btn-secondary{background:#fff;color:#334155;border-color:#e2e8f0}
.btn-secondary:hover{background:#f1f5f9;border-color:#cbd5e1;color:#0f172a}
.btn-secondary:active{background:#f8fafc;border-color:#94a3b8}
.btn-ghost{background:transparent;color:#334155;border-color:transparent}
.btn-ghost:hover{background:#f1f5f9;color:#0f172a}
.btn-ghost:active{background:#e2e8f0}
.btn-danger{background:#fff;color:#dc2626;border-color:#fca5a5}
.btn-danger:hover{background:#fef2f2;border-color:#dc2626}
.btn-danger:active{background:#fde0e0}
.btn-danger-solid{background:#dc2626;color:#fff;border-color:#dc2626}
.btn-danger-solid:hover{background:#b91c1c;border-color:#b91c1c}
.btn-success{background:#fff;color:#15803d;border-color:#86efac}
.btn-success:hover{background:#f0fdf4;border-color:#16a34a}
.btn-success:active{background:#dcfce7}
.btn-success-solid{background:#16a34a;color:#fff;border-color:#16a34a}
.btn-success-solid:hover{background:#15803d;border-color:#15803d}
.btn-on-dark{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.12)}
.btn-on-dark:hover{background:rgba(255,255,255,0.18);color:#fff;border-color:rgba(255,255,255,0.22)}
.btn-on-dark:active{background:rgba(255,255,255,0.12)}
/* states */
.btn:disabled,.btn.is-disabled{
  cursor:not-allowed;opacity:1;
  background:#f1f5f9!important;color:#94a3b8!important;border-color:#f1f5f9!important;
  box-shadow:none!important;transform:none!important;
}
.btn.is-loading{cursor:wait;color:transparent!important;position:relative}
.btn.is-loading::after{
  content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  transform:translate(-50%,-50%);animation:btnSpin .7s linear infinite;color:#fff;
}
.btn-secondary.is-loading::after,.btn-ghost.is-loading::after,.btn-danger.is-loading::after{color:#334155}
@keyframes btnSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* icon-only */
.btn-icon{padding:0!important}
.btn-icon.btn-xs{width:22px}
.btn-icon.btn-sm{width:26px}
.btn-icon.btn-md{width:28px}
.btn-icon.btn-lg{width:40px}
.btn-icon.btn-xl{width:48px}
.btn-block{width:100%}