/* miniERP 全站樣式——色彩代幣與元件抽自 mockups/v7.html（窯青，僅日間） */
:root{
  --bg:#F2F5F4;            /* 頁面底：綠灰白 */
  --card:#FFFFFF;
  --muted:#E6EEEB;
  --ink:#1E2523;           /* 內文墨色 14.8:1 */
  --ink2:#5F6B67;          /* 次要文字 5.5:1 */
  --primary:#2D5A50;       /* 主色：深窯青 6.2:1 */
  --primary-muted:#E4EFEB;
  --onprimary:#FFFFFF;
  --border:#D3DEDA;
  --alert:#C93A2E;         /* 警示紅：全畫面唯一暖色 */
  --alert-bg:#FAEDEB;
  --zebra:#F5F8F7;
  --sp-1:8px; --sp-2:14px; --sp-3:20px; --sp-4:32px;
  --r:10px; --r-chip:999px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;
  font-size:18px; line-height:1.8;
}
.num{font-family:Consolas,monospace; font-variant-numeric:tabular-nums;}
h1{font-size:1.35rem;} h2{font-size:1.1rem;}
[hidden]{display:none !important;}

/* ---------- 登入畫面 ---------- */
#login-view{min-height:100vh; display:grid; place-items:center; padding:24px;}
.login-card{
  background:var(--card); border-radius:var(--r);
  box-shadow:0 1px 3px rgba(30,37,35,.08);
  padding:40px 44px; max-width:420px; width:100%; text-align:center;
}
.login-card h1{margin-bottom:24px;}
.btn-google{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--primary); color:var(--onprimary); border:none; cursor:pointer;
  border-radius:var(--r); padding:12px 28px; font-size:15px; font-weight:500; font-family:inherit;
}
.btn-google:hover{opacity:.92;}
.btn-google svg{background:#fff; border-radius:4px; padding:2px;}
.login-msg{margin-top:18px; font-size:13px; color:var(--ink2); min-height:1.2em;}
.login-msg.err{color:var(--alert);}

/* ---------- App 殼：側欄＋內容 ---------- */
.layout{display:flex; align-items:stretch; min-height:100vh;}
.sidenav{
  width:10.5em; flex:none; background:var(--card);
  border-right:1px solid var(--border);
}
.sidenav .slogo{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:0 14px;
  font-weight:700; color:var(--primary); font-size:1.05rem; cursor:pointer;
  border-bottom:1px solid var(--border); white-space:nowrap; user-select:none;
}
.sidenav .grp{font-size:.72rem; color:var(--ink2); padding:10px 14px 2px; white-space:nowrap;}
.sidenav a{
  display:flex; align-items:center; gap:10px; min-height:46px; padding:0 14px;
  color:var(--ink); text-decoration:none; font-size:.95rem; white-space:nowrap;
}
.sidenav a .ico{flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;}
.sidenav a .word{line-height:1;}
.sidenav svg{display:block; width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.sidenav a.cur{color:var(--primary); font-weight:700; background:var(--primary-muted); border-right:3px solid var(--primary);}
html.nav-collapsed .sidenav{width:58px;}
html.nav-collapsed .sidenav .word{display:none;}
html.nav-collapsed .sidenav .grp{visibility:hidden; height:6px; padding:0;}
html.nav-collapsed .sidenav a{justify-content:center; padding:0;}
html.nav-collapsed .sidenav a.cur{border-right:none;}
html.nav-collapsed .sidenav .slogo{justify-content:center; padding:0;}
/* ── 側欄活動招牌（2026-08-19）：AI訓練所入口，牌背圖可點 ──
   選擇器寫 .sidenav a.sn-promo 是必要的：上面 .sidenav a 是 flex＋nowrap，
   specificity 相同時後者贏不了，第一版就是這樣被排成一橫排爆出側欄的 */
.sidenav a.sn-promo{
  display:block; margin:18px 12px 12px; padding:0; text-decoration:none; text-align:center;
  white-space:normal; border-right:none; background:none;
}
.sidenav a.sn-promo img{
  width:100%; max-width:150px; border-radius:10px; border:1px solid var(--border); display:block;
  margin:0 auto; transition:transform .15s ease, box-shadow .15s ease;
}
.sidenav a.sn-promo:hover img{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.25);}
.sn-promo-t{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:6px; white-space:nowrap;
}
/* 彩色發亮的 ↓：金→橘漸層字＋呼吸光暈，輕輕上下點頭引導視線 */
.sn-promo-t .arr{
  background:linear-gradient(180deg,#f5c542,#e8742c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:1.1rem; animation:snArr 1.6s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(245,197,66,.9));
}
.sn-promo-t .arr:last-child{animation-delay:.8s;}
@keyframes snArr{
  0%,100%{transform:translateY(0);   filter:drop-shadow(0 0 3px rgba(245,197,66,.6));}
  50%    {transform:translateY(3px); filter:drop-shadow(0 0 7px rgba(232,116,44,1));}
}
/* 收闔時招牌不整塊藏起來，縮成一顆小牌背（2026-08-22 使用者回饋：
   原本頂部另放一顆 ◈ 迷你鈕＝同一入口出現兩次；改成入口位置不動、只是變小） */
html.nav-collapsed .sn-promo{padding:6px 0; margin:8px 4px 0; border:none; background:transparent;}
html.nav-collapsed .sn-promo .sn-promo-t{display:none;}
html.nav-collapsed .sn-promo img{
  width:42px; height:42px; margin:0 auto; display:block; border-radius:8px;
  border:1px solid #e8a53a; animation:snMini 2.2s ease-in-out infinite;
}
@keyframes snMini{
  0%,100%{box-shadow:0 0 3px rgba(245,197,66,.35); transform:scale(1);}
  50%    {box-shadow:0 0 12px rgba(232,116,44,.75); transform:scale(1.06);}
}
.content{flex:1; min-width:0; padding:var(--sp-3) var(--sp-4) var(--sp-4); container-type:inline-size;}
@media (max-width:700px){ .content{padding:var(--sp-2);} }
/* 窄螢幕的側欄改成覆蓋式抽屜：原本展開時吃掉三分之一畫面，內容區只剩 320px，
   表格幾乎沒法看（2026-08-22 實測）。覆蓋之後內容永遠是滿寬的 */
@media (max-width:760px){
  .sidenav{position:fixed; left:0; top:0; bottom:0; z-index:110;
    box-shadow:6px 0 24px rgba(0,0,0,.18);}
  html:not(.nav-collapsed) .sidenav::after{   /* 展開時把右側壓暗，視覺上就是抽屜 */
    content:''; position:fixed; left:10.5em; top:0; right:0; bottom:0;
    background:rgba(0,0,0,.32); pointer-events:none;}
  html.nav-collapsed .sidenav{box-shadow:none;}
  .content{margin-left:58px;}   /* 收合寬度，抽屜展開時不推擠內容 */
}

/* ---------- 頂列 ---------- */
.appbar{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:10px var(--sp-3); margin-bottom:var(--sp-3);
}
.appbar .sub{font-size:.85rem; color:var(--ink2); white-space:nowrap;}
.me{color:var(--ink2); font-size:.85rem; white-space:nowrap;}
.me .logout{color:var(--ink2); margin-left:8px; cursor:pointer; text-decoration:underline; background:none; border:none; font:inherit; font-size:.85rem;}

/* 全域搜尋 */
.gsearch{
  flex:1; position:relative; display:flex; align-items:center; gap:8px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-chip);
  padding:6px 16px; color:var(--ink2); min-width:140px; min-height:48px;
}
.gsearch input{border:0; background:transparent; font:inherit; color:var(--ink); width:100%; outline:none;}
.gsug{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:80;
  max-height:420px; overflow-y:auto;
  background:var(--card); border:1px solid var(--primary); border-radius:var(--r);
  box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px;
}
.gsug.on{display:block;}
.gsug .ghead{display:flex; align-items:baseline; gap:8px; font-size:.75rem; color:var(--ink2); padding:8px 10px 4px;}
.gsug .gitem{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--ink);
}
.gsug .gitem:hover{background:var(--primary-muted);}
.gsug .gitem .gt{font-weight:700;}
.gsug .gitem .gmeta{margin-left:auto; font-size:.8rem; color:var(--ink2); white-space:nowrap;}
.gsug .gempty,.gsug .gtip{padding:10px; color:var(--ink2); font-size:.85rem;}

/* ---------- 共用元件 ---------- */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:var(--sp-3); margin-bottom:var(--sp-3);
}
.chip{
  display:inline-block; border-radius:var(--r-chip); padding:1px 12px; font-size:.78rem;
  border:1px solid var(--ink2); color:var(--ink2); background:transparent;
}
.chip.done{background:var(--primary); border-color:var(--primary); color:var(--onprimary);}
.chip.warn{border-color:var(--alert); color:var(--alert);}
.chip.wh{border-color:var(--border); color:var(--ink2);}
.note{font-size:.85rem; color:var(--ink2);}
table{border-collapse:collapse; width:100%; font-size:.95rem;}
th{
  text-align:left; color:var(--ink2); font-weight:400; font-size:.85rem;
  padding:8px 12px; border-bottom:2px solid var(--border); white-space:nowrap;
}
td{padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;}
tbody tr:nth-child(even){background:var(--zebra);}
th.n, td.n{text-align:right; font-family:Consolas,monospace; font-variant-numeric:tabular-nums;}
.tblwrap{overflow:auto; border:1px solid var(--border); border-radius:var(--r); background:var(--card);}

/* 警示橫幅：首頁唯一紅色來源，無警示時整條不出現 */
.alertband{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--alert-bg);
  border:1px solid var(--alert); border-left:6px solid var(--alert);
  border-radius:var(--r); color:var(--ink);
  padding:8px 16px; margin-bottom:16px; font-size:.95rem;
}
.alertband .alink{margin-left:auto; color:var(--alert); font-weight:700; white-space:nowrap; text-decoration:none;}

/* 首頁 app 卡片格：永遠 8 格，欄數 8/4/2 依寬度切換 */
.appgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;}
@container (min-width:720px){.appgrid{grid-template-columns:repeat(4,1fr);}}
@container (min-width:1240px){.appgrid{grid-template-columns:repeat(8,1fr);}}
.appcard{
  min-height:76px; border-radius:var(--r); cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-weight:700; font-size:.95rem; padding:8px; min-width:0;
}
.appcard .label{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.appcard .d{font-size:.72rem; font-weight:400; opacity:.85; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.appcard.pri{background:var(--primary); color:var(--onprimary); border:1px solid var(--primary);}
.appcard.sec{background:var(--card); border:1px solid var(--primary); color:var(--primary);}
.appcard.empty{border:2px dashed var(--border); background:transparent; color:var(--ink2); font-weight:400; font-size:1.5rem; cursor:default;}

/* 今天該做的事 */
.todo{display:flex; gap:var(--sp-2); align-items:baseline; padding:var(--sp-2) 0; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.todo:last-child{border-bottom:none;}
.todo .n{font-family:Consolas,monospace; font-size:1.6rem; font-weight:700;}
.todo .mini{font-size:.78rem; color:var(--ink2);}
.todo .go{margin-left:auto; color:var(--primary); font-size:.9rem; white-space:nowrap; text-decoration:none;}
.homeAgrid{display:flex; gap:var(--sp-3); flex-wrap:wrap;}
.homeAgrid .card{flex:1.4; min-width:320px;}
.homeAgrid .card.entry{flex:1; min-width:280px;}

/* 按鈕與表單輸入（各頁共用，2026-08-18 依實作回報收進共用層） */
.btn{
  font:inherit; cursor:pointer; border-radius:var(--r); padding:10px 24px; min-height:48px;
  background:var(--primary); color:var(--onprimary); border:1px solid var(--primary); font-weight:700;
}
.btn.sec{background:transparent; color:var(--primary);}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.btnrow{display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-3); flex-wrap:wrap;}
.formrow{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-2);}
.field{display:flex; flex-direction:column; min-width:150px; flex:1;}
.field label{font-size:.85rem; color:var(--ink2);}
.field input,.field select,.field textarea{
  font:inherit; color:var(--ink); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r); padding:8px 12px; min-height:48px;
}

/* 按鈕變體（審查上收：各頁不得再私定義 .btn 家族） */
.btn.danger{background:transparent; color:var(--alert); border-color:var(--alert);}
.btn.sm{min-height:48px; padding:6px 16px; font-size:.9rem;}
.btn.link{background:none; border:none; color:var(--primary); text-decoration:underline; font-weight:400;}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}

/* 下拉建議框（搜尋流水線共用） */
.sug{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  max-height:260px; overflow-y:auto;
  background:var(--card); border:1px solid var(--primary); border-radius:var(--r);
  box-shadow:0 6px 18px rgba(0,0,0,.12); padding:4px;
}
.sug.on{display:block;}
.sug .sg{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 12px; border-radius:8px; cursor:pointer;}
.sug .sg.cur{background:var(--primary-muted);}

/* 匯入入口框（進貨憑單／出貨通知共用）：可點、可拖檔 */
.ib-import{
  display:block; width:100%; font:inherit;
  border:2px dashed var(--border); border-radius:var(--r); background:transparent;
  padding:var(--sp-3); text-align:center; color:var(--ink2); font-size:.95rem; margin-bottom:var(--sp-3);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.ib-import:hover, .ib-import.drag{border-color:var(--primary); background:var(--primary-muted); color:var(--ink);}
.ib-import b{color:var(--primary);}

/* 膠囊篩選鈕 */
.filterchip{
  font:inherit; cursor:pointer; border-radius:var(--r-chip); min-height:48px;
  border:1px solid var(--border); background:var(--card); color:var(--ink2); padding:6px 18px;
}
.filterchip.on{background:var(--primary); border-color:var(--primary); color:var(--onprimary); font-weight:700;}

/* 吐司 */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200;
  background:var(--ink); color:var(--card); border-radius:var(--r); padding:10px 22px;
  font-size:.95rem; opacity:0; pointer-events:none; transition:opacity .2s;
}
.toast.on{opacity:1;}

/* 手機清單列（pick-fill 與 pod 共用，審查上收） */
.plrow{background:var(--card); border-bottom:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; gap:10px; cursor:pointer; min-height:64px; width:100%; font:inherit; text-align:left; border-left:0; border-right:0; border-top:0;}
.plrow .plmain{flex:1; min-width:0;}
.plrow .plno{font-family:Consolas,monospace; font-weight:700;}
.plrow .plmeta{font-size:.85rem; color:var(--ink2); flex:1; min-width:0;}
.plrow .plgo{color:var(--primary); white-space:nowrap;}

/* 臨時品項狀態章（非警示紅——警示紅只留給真警示） */
.chip.temp{border-color:var(--ink2); color:var(--ink2); background:var(--muted);}

/* 空狀態與建置中佔位 */
.empty-state{color:var(--ink2); font-size:.9rem; padding:14px 0;}
/* 手機清單頁的空狀態：置中大留白（pod 與 pick-fill 共用，原本兩頁各寫一份相同的） */
.empty-state.lg{padding:var(--sp-4) var(--sp-3); text-align:center; line-height:1.8; font-size:1rem;}
/* 正式版開發鎖（2026-08-19）：頁面與搜尋欄的「開發中」虛線框 */
.devbox{
  border:2px dashed var(--border); border-radius:var(--r); background:transparent;
  min-height:340px; display:flex; align-items:center; justify-content:center;
  color:var(--ink2); font-size:1.4rem; letter-spacing:2px;
}
.gsearch.dev{border-style:dashed; justify-content:center; font-size:.85rem; letter-spacing:1px;}
.placeholder{
  border:2px dashed var(--border); border-radius:var(--r); background:transparent;
  padding:var(--sp-4); text-align:center; color:var(--ink2);
}
.placeholder b{color:var(--primary); display:block; font-size:1.1rem; margin-bottom:6px;}

/* ---------- 現場模式（手機優先，DESIGN_SYSTEM「模式切換」） ---------- */
/* 側欄與全域搜尋收起來，只留：我是誰、切回完整、登出。畫面全給大按鈕 */
.modechip{
  border:1px solid var(--border); background:var(--card); border-radius:var(--r-chip);
  width:44px; min-height:36px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink2); cursor:pointer; padding:0;
}
.modechip svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; display:block;}
.modechip:hover{color:var(--primary); border-color:var(--primary);}
html.field-mode .sidenav{display:none;}
html.field-mode .gsearch{display:none;}
html.field-mode .content{padding:var(--sp-2);}
html.field-mode .appbar{padding:8px 12px; justify-content:space-between;}

/* ---------- 測試版識別：側欄 logo 旁的橘標籤（正式版永不出現） ---------- */
/* 側欄收闔時縮成 ☰ 右上角一個橘點——資訊還在，但不佔空間也不吵 */
html.test-site .sidenav .slogo{position:relative;}
.testbadge{
  background:#B45309; color:#fff; border-radius:var(--r-chip);
  padding:1px 9px; font-size:.68rem; font-weight:400; white-space:nowrap; line-height:1.6;
}
html.nav-collapsed .testbadge{
  position:absolute; top:9px; right:11px;
  width:9px; height:9px; padding:0; font-size:0; line-height:0;
}

/* ---------- AI訓練所懸浮球（2026-08-26 使用者裁決 B 案） ---------- */
/* 2026-08-26 二修：圓形徽章球 → 方形牌背（圖＝閥類牌背縮圖；三修：128 太大改回 64） */
#arena-ball{position:fixed; right:22px; bottom:9vh; width:64px; height:64px; z-index:118;
  border-radius:10px; border:2px solid var(--brass, #c9a25e); padding:0; cursor:pointer;
  overflow:hidden; background:transparent; box-shadow:0 8px 22px rgba(0,0,0,.45);}
#arena-ball img{width:100%; height:100%; display:block; object-fit:cover;}
#arena-ball:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.4);}
#arena-ball:active{transform:translateY(1px);}
/* 紅點在方形外框上，overflow:hidden 會裁掉它 ⇒ 移到框內右上角 */
#arena-ball .ab-badge{position:absolute; top:3px; right:3px; min-width:20px; height:20px;
  background:#d0342c; color:#fff; font-size:.78rem; font-weight:700; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
  border:2px solid var(--bg, #fff); box-sizing:border-box;}
/* 手機現場模式已有 2×2 第一格入口，球收起來免得擋到大按鈕 */
html.field-mode #arena-ball{display:none;}