/* 上方導航列 —— 全系統單一樣式來源（SSOT）。
老闆 2026-07-21：所有頁面的導航列統一成 /portal/ 這條。
www 端由 _portal_nav.php 以 載入；lagolfi（損益分析／會計）跨網域用絕對網址載同一支。
🔴 改這裡＝三邊一起變，不要各自複製一份。 */
/* 字型明確宣告：子系統的 body 字型可能不同，導航列要跟工作檯長一樣。
⚠️ 字體檔仍需各站自己 載入，否則會 fallback 成系統字（實測差很明顯）。 */
.pnav{font-family:"Plus Jakarta Sans","Noto Sans TC",sans-serif;line-height:normal;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:14px;
height:64px;padding:0 clamp(18px,4vw,40px);background:rgba(255,255,255,.92);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid #e2e8f0;box-shadow:0 10px 26px -22px rgba(15,23,42,.3)}
/* 🔴 .brand / .right 這類通用 class 在子系統可能已被別的樣式用掉（損益分析的 app.css
就有 .brand{padding:6px 8px 18px}，會把 logo 撐高）。導航列自己的盒模型要釘死，不吃外面的。 */
/* 🔴 連結預設值也要釘死：工作檯各頁有全域 a{text-decoration:none}，子系統（AI Reply）沒有，
同一份標記在那邊 brand 與圓鈕就會冒出底線（實測 /reply/portal/ 的「AI-BOS」有底線）。 */
.pnav a{text-decoration:none}
.pnav .brand{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;padding:0;margin:0;text-decoration:none}
.pnav .brand img{width:38px;height:38px;border-radius:10px;background:#fff;padding:3px;border:1px solid #e2e8f0;flex-shrink:0;
box-shadow:0 4px 12px -6px rgba(37,99,235,.4)}
.pnav .brand b{font-family:'Plus Jakarta Sans','Noto Sans TC',sans-serif;font-weight:800;font-size:18px;letter-spacing:.6px;
color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
/* 🔴 display / line-height 也要寫死：損益分析的 app.css 有 .brand b{display:block;line-height:1.2}，
沒宣告的屬性會從那邊漏進來，同一條導航列在 lagolfi 的字高就少 1.4px。 */
display:inline;line-height:normal}
.pnav .right{display:flex;align-items:center;gap:10px;min-width:0}
/* ── 公司／品牌切換器（三層架構：客戶→公司→品牌；只有可切的對象>1 才顯示）── */
.pnav .scope{position:relative;flex-shrink:0}
/* 老闆 2026-07-22：切換器改成圓鈕，尺寸／外框／陰影／hover 與齒輪（.gearbtn）一致。
只有外觀變，點擊照樣開同一個下拉選單。 */
.pnav .scope>button{display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;padding:0;border:1px solid #e2e8f0;border-radius:50%;background:#fff;
cursor:pointer;font:inherit;color:#64748b;
box-shadow:0 4px 12px -6px rgba(15,23,42,.22);
transition:color .15s,background .15s,border-color .15s,transform .15s}
.pnav .scope>button:hover{color:#2563eb;border-color:#bfdbfe;background:#eff6ff;transform:translateY(-1px)}
.pnav .scope>button:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}
.pnav .scope>button[aria-expanded="true"]{color:#1d4ed8;border-color:#bfdbfe;background:#eff6ff}
.pnav .scope>button[aria-expanded="true"] .caret{transform:rotate(180deg)}
.pnav .scope .badge{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:inline-flex;
align-items:center;justify-content:center;font-size:13px;font-weight:800;
background:linear-gradient(180deg,#6366f1,#4f46e5);color:#fff}
/* 品牌名不顯示但要留給螢幕閱讀器，否則這顆鈕會變成沒有名字的圓圈 */
.pnav .scope>button .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pnav .scope>button .caret{display:none}
.pnav .scope .pop .badge{border-radius:8px}
.pnav .scope .pop{position:absolute;top:calc(100% + 16px);right:0;left:auto;z-index:200;min-width:250px;
background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:7px;
box-shadow:0 24px 50px -20px rgba(15,23,42,.42),0 2px 6px rgba(15,23,42,.06);
animation:pnavGearIn .16s cubic-bezier(.22,1,.36,1) both;max-height:70vh;overflow:auto}
.pnav .scope .pop[hidden]{display:none}
.pnav .scope .grp{padding:9px 12px 5px;font-size:11.5px;font-weight:800;color:#94a3b8;letter-spacing:.4px}
.pnav .scope .pop button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 11px;
border:0;border-radius:10px;background:none;font:inherit;font-size:14px;color:#334155;
cursor:pointer;text-align:left}
.pnav .scope .pop button:hover{background:#f5f8ff;color:#1d4ed8}
.pnav .scope .pop button[aria-current="true"]{background:#eff6ff;color:#1d4ed8;font-weight:700}
.pnav .scope .pop .tick{margin-left:auto;color:#2563eb;flex-shrink:0}
@media(max-width:640px){
/* 圓鈕只有 34px，選單再從鈕的左緣往右長就會推出畫面（實測 375 寬時右緣 436）。
手機改成貼齊視窗左右緣，永遠塞得下。 */
.pnav .scope .pop{position:fixed;left:12px;right:12px;top:58px;min-width:0;width:auto}
}
/* ── 齒輪設定選單（與首頁同款） ── */
/* 個人資料獨立成一顆圓鈕（老闆 2026-07-20：從齒輪選單移出來） */
.pnav .profilebtn{display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;padding:0;border-radius:50%;color:#64748b;flex-shrink:0;
border:1px solid #e2e8f0;background:#fff;
box-shadow:0 4px 12px -6px rgba(15,23,42,.22);
transition:color .15s,background .15s,border-color .15s,transform .15s}
.pnav .profilebtn:hover{color:#2563eb;background:#eff6ff;border-color:#bfdbfe;transform:translateY(-1px)}
.pnav .profilebtn.active{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}
.pnav .profilebtn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}
.pnav .gearwrap{position:relative;flex-shrink:0}
.pnav .gearbtn{display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;padding:0;border-radius:50%;color:#64748b;
border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-family:inherit;
box-shadow:0 4px 12px -6px rgba(15,23,42,.22);
transition:color .15s,background .15s,border-color .15s,transform .15s}
.pnav .gearbtn:hover{color:#2563eb;border-color:#bfdbfe;transform:translateY(-1px)}
.pnav .gearbtn[aria-expanded="true"]{color:#1d4ed8;border-color:#bfdbfe;background:#eff6ff}
.pnav .gearbtn[aria-expanded="true"] svg{transform:rotate(60deg)}
.pnav .gearbtn svg{transition:transform .25s ease}
.pnav .gearbtn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}
.pnav .gearmenu{position:absolute;top:calc(100% + 16px);right:0;z-index:200;min-width:250px;
background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:7px;
box-shadow:0 24px 50px -20px rgba(15,23,42,.42),0 2px 6px rgba(15,23,42,.06);
animation:pnavGearIn .16s cubic-bezier(.22,1,.36,1) both}
.pnav .gearmenu[hidden]{display:none}
@keyframes pnavGearIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.pnav .gearmenu a{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border-radius:10px;
color:#334155;text-decoration:none;transition:background .13s,color .13s}
.pnav .gearmenu a:hover{background:#f5f8ff;color:#1d4ed8}
.pnav .gearmenu a:focus-visible{outline:none;background:#eff6ff;color:#1d4ed8}
.pnav .gearmenu a[aria-current="page"]{background:#eff6ff;color:#1d4ed8}
.pnav .gearmenu a[aria-current="page"] svg{color:#2563eb}
.pnav .gearmenu a svg{flex-shrink:0;margin-top:2px;color:#64748b}
.pnav .gearmenu a:hover svg{color:#2563eb}
.pnav .gearmenu a b{display:block;font-size:14px;font-weight:700;line-height:1.4}
.pnav .gearmenu a i{display:block;font-style:normal;font-size:12px;color:#94a3b8;margin-top:2px;line-height:1.5}
.pnav .gearsep{height:1px;background:#eef1f6;margin:6px 10px}
/* 登出＝關機鈕（老闆 2026-07-20 指示）：圓形圖示鈕，滑過轉紅表示「離開」 */
.pnav .logout{display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;padding:0;border-radius:50%;color:#64748b;flex-shrink:0;
border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-family:inherit;
box-shadow:0 4px 12px -6px rgba(15,23,42,.22);
transition:color .15s,background .15s,border-color .15s,transform .15s}
.pnav .logout:hover{color:#dc2626;background:#fef2f2;border-color:#fecaca;transform:translateY(-1px)}
.pnav .logout:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #dc2626}
/* ── 訪客未登入態：右上顯示「登入」按鈕（只有首頁 /portal/ 未登入時會用到）
class 一律限定在 .pnav 底下，避免撞到 ERP／Reply 模組自己的 .auth 容器 ── */
.pnav .auth{display:flex;align-items:center;gap:10px;min-height:44px;flex:0 1 auto;min-width:0}
.pnav .askel{display:inline-block;width:110px;height:40px;border-radius:999px;background:#f1f5f9;border:1px solid #e2e8f0}
.pnav .abtn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:12px;cursor:pointer;
background:linear-gradient(180deg,#4f8cf6,#2563eb);color:#fff;font-size:14.5px;font-weight:800;letter-spacing:.05em;
border:1px solid #1d4ed8;white-space:nowrap;font-family:inherit;
box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 8px 22px -6px rgba(37,99,235,.45);
transition:transform .15s,box-shadow .15s}
.pnav .abtn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 12px 28px -6px rgba(37,99,235,.55)}
.pnav .abtn:active{transform:translateY(1px)}
@media (max-width:640px){
.pnav{height:58px;padding:0 12px;gap:8px}
.pnav .brand b{font-size:16px}
.pnav .gearmenu{min-width:min(88vw,250px)}
/* 🔴 375 這種窄機：切換器＋三顆圓鈕會擠爆造成橫向捲動（實測右緣 384>375）。
圓鈕縮一號、間距收緊、切換器讓寬，讓它塞得下 */
.pnav .scope>button{width:34px;height:34px}
.pnav .scope .badge{width:22px;height:22px;font-size:11px}
.pnav .right{gap:6px}
.pnav .abtn{padding:10px 18px;font-size:13.5px}
.pnav .profilebtn,.pnav .logout,.pnav .gearbtn{width:34px;height:34px}
}