/* ═══════════════════════════════════════════════════════════════
崎酩管理後台 — 共用外殼樣式（橄欖綠＋金）
搭配 admin-shell.js 使用。各頁結構：
═══════════════════════════════════════════════════════════════ */
:root{
--cs-olive:#4A5E3A; --cs-olive-deep:#3D4F30; --cs-olive-dark:#2e3a24; --cs-olive-light:#7A8C6A;
--cs-gold:#C4A882; --cs-gold-light:#d6c098;
--cs-bg:#f4f1e6; --cs-border:#e3ddca; --cs-ink:#2f2f22; --cs-ink2:#6b6655; --cs-muted:#9a9484;
}
/* 永遠保留捲軸空間 → 內容長短切換時版面不會左右跳動（解決切分頁/換頁/登入時「縮小」感） */
html{scrollbar-gutter:stable;}
/* 防換頁閃跳(FOUC):載入先隱藏,admin-shell.js 把外殼建好(transform完)加 .cs-ready 才顯示。
→消除「先畫舊結構→JS重組→版面突跳」。POS不載此css不受影響。
失效保險用「純CSS animation」(不依賴JS):即使 admin-shell.js 整支載入失敗,2s 後仍強制顯示,
絕不讓頁面永久空白。JS正常時 .cs-ready 立即顯示並取消動畫。 */
body{opacity:0;animation:cs-fouc-failsafe 0s linear 2s forwards;}
@keyframes cs-fouc-failsafe{to{opacity:1;}}
body.cs-ready{opacity:1;animation:none;transition:opacity .12s ease;}
.cs-wrap{display:flex;min-height:100vh;background:var(--cs-bg);}
.cs-side{width:236px;flex-shrink:0;background:linear-gradient(180deg,var(--cs-olive-deep),var(--cs-olive-dark));color:#fff;position:sticky;top:0;height:100vh;overflow-y:auto;}
.cs-brand{display:flex;align-items:center;gap:11px;padding:17px 18px 15px;border-bottom:1px solid rgba(255,255,255,.14);}
.cs-brand .lg{width:38px;height:38px;border-radius:9px;background:var(--cs-bg);color:var(--cs-olive);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;flex-shrink:0;}
.cs-brand .nm{font-size:14px;font-weight:800;letter-spacing:1px;}
.cs-brand .sb{font-size:10px;letter-spacing:2.5px;color:var(--cs-gold);font-family:'JetBrains Mono',monospace;}
.cs-grp{padding:12px 0 2px;}
.cs-lbl{font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.42);padding:4px 20px;font-weight:800;}
.cs-nav{display:flex;align-items:center;gap:11px;padding:9px 20px;color:rgba(255,255,255,.82);text-decoration:none;border-left:3px solid transparent;font-size:13px;transition:all .12s;}
.cs-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.cs-nav:hover{background:rgba(255,255,255,.08);color:#fff;}
.cs-nav.on{background:rgba(210,190,130,.18);border-left-color:var(--cs-gold);color:#fff;font-weight:700;}
.cs-nav .ext{margin-left:auto;font-size:10px;opacity:.5;}
.cs-foot{padding:14px 20px;font-size:10px;color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.12);margin-top:6px;}
.cs-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.cs-top{height:58px;background:#fff;border-bottom:1px solid var(--cs-border);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 26px;position:sticky;top:0;z-index:20;}
.cs-top>div:first-child{min-width:0;} /* 標題區可縮，右側才不被擠到折行 */
.cs-top h1{font-size:18px;font-weight:800;color:var(--cs-olive);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cs-top-r{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--cs-ink2);flex:0 0 auto;} /* 右側固定、不被壓縮 */
.cs-top-r .cs-date{font-family:'JetBrains Mono',monospace;white-space:nowrap;} /* 日期不折成 2026/06/27 三行 */
.cs-top-r .cs-user{white-space:nowrap;} /* 「你好，XXX」不折行 */
/* 平板/窄窗(≤1024)：藏日期與問候，只留 視角切換＋鈴鐺＋頭像，避免右側擠成一團 */
@media(max-width:1024px){ .cs-top-r .cs-date,.cs-top-r .cs-user{display:none;} }
.cs-ava{width:31px;height:31px;border-radius:50%;background:var(--cs-olive);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.cs-body{flex:1;min-width:0;}
/* 放進外殼的頁面內容容器：cs-main 是 flex 欄，子層用 margin:0 auto 會「自動邊距抵銷 stretch」→ 寬度隨內容縮放、版面跳動。
強制滿寬，讓 KPI 列／分頁列位置固定不隨分頁內容改變。 */
/* 統一置中留白:各頁內容容器(.wrap/.main-content)原本各自 max-width(1200/1240/1300)+padding 不一。
進外殼後一律對齊 .admin-main 標準(1240 置中、padding 28/32)→tool 頁與 admin 頁的左右「區間」完全一致。
(老闆偏好置中留白而非貼邊滿版;手機版 .wrap{padding:12px..!important} 仍以 !important 勝出,維持窄內距。
內部文件預覽如薪資單 .pay-doc 自帶 max-width 不受影響) */
.cs-main>.wrap, .cs-main>.main-content{ width:100%; max-width:1240px; margin-left:auto; margin-right:auto; padding:28px 32px; box-sizing:border-box; }
/* admin-shell.js 會把各頁 .admin-main 內容＋.admin-foot 搬進 cs-main(flex 直欄)。
讓內容區撐開 → footer 釘到底，內容少時不浮在畫面中央。 */
.cs-main>.admin-main{flex:1 1 auto;}
#cs-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:199;}
@media(max-width:820px){
.cs-side{position:fixed;left:-236px;z-index:200;transition:left .2s;box-shadow:2px 0 16px rgba(0,0,0,.2);}
.cs-side.open{left:0;}
.cs-burger{display:inline-flex!important;}
body.cs-nav-open #cs-backdrop{display:block;}
}
/* owner 檢視視角切換：手機放進側欄（頂列那份手機隱藏） */
#cs-view-side{display:none;padding:10px 14px 4px;}
#cs-view-side select{width:100%;padding:9px 10px;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:13px;font-family:inherit;cursor:pointer;}
/* 手機 App Bar：統一乾淨的頂部列 ── 左「☰ 標題」、右「🔔 頭像」，其餘隱藏 */
@media(max-width:600px){
.cs-top{padding:0 14px;height:54px;}
.cs-top>div:first-child{min-width:0;flex:1 1 auto;gap:8px;} /* 標題區吃滿剩餘空間 */
.cs-top h1{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cs-top-r{gap:12px;flex:0 0 auto;} /* 右側圖示固定、不被壓縮 */
.cs-date,.cs-user{display:none;} /* 隱藏日期與「你好，XX」問候語 */
.cs-top-r select{display:none;} /* 其他 select 手機隱藏 */
.cs-top-r #cs-view-sel{display:inline-block;max-width:120px;padding:5px 8px;font-size:12px;} /* 視角切換改在頂列直接可點(膠囊)，不必開漢堡 */
#cs-view-side{display:none;} /* 已移到頂列，側欄不再重複 */
.cs-ava{width:30px;height:30px;font-size:13px;}
.cs-burger{font-size:21px;margin-right:0;}
}
.cs-burger{display:none;background:none;border:none;color:var(--cs-olive);font-size:22px;cursor:pointer;margin-right:8px;}
/* 扁平線性圖示（取代 emoji，繼承文字色） */
.fic{width:1.05em;height:1.05em;flex:none;vertical-align:-.15em;}
/* 日期輸入靠左顯示（iOS 預設會把日期置中，看起來像空按鈕；靠左更像正常輸入框） */
input[type="date"], input[type="datetime-local"], input[type="time"]{ text-align:left; }
/* ── SPA 嵌入模式：頁面被包在外殼 iframe 裡 → 隱藏自身外殼，只顯示內容 ──
（適用所有結構：寫死的 #cs-side/.cs-top、admin-shell 動態建的、業務工具的 .topbar） */
body.cs-embedded .cs-side,
body.cs-embedded .cs-top,
body.cs-embedded .cs-burger,
body.cs-embedded .admin-top,
body.cs-embedded .admin-side,
body.cs-embedded .topbar { display:none !important; }
/* 不覆蓋 .cs-wrap/.cs-main 的 display：側欄已 display:none(不佔位)，.cs-main 仍以原本 flex 直欄填滿，
保留各頁原版面（報價/請款/合約靠 .cs-main flex 直欄＋.wrap flex:1 鎖一頁、左右欄各自內捲；改 block 會裁掉內容無法下拉）。 */
/* 列印（報價單/薪資單等）時隱藏外殼，只印內容 */
@media print {
.cs-side, .cs-top, .cs-burger { display:none !important; }
.cs-wrap { display:block !important; }
.cs-main { display:block !important; }
}
/* HR 共用分頁列（人事/薪資/獎金/出勤/排班 一致導覽，跨頁 link） */
.hr-tabs{ display:flex; gap:8px; margin-bottom:18px; border-bottom:2px solid var(--border,#e3ddca); flex-wrap:wrap; }
.hr-tab{ padding:9px 18px; border:none; background:none; color:var(--muted,#8a8576); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; border-bottom:3px solid transparent; margin-bottom:-2px; text-decoration:none; display:inline-block; }
.hr-tab.on{ color:var(--forest,#4A5E3A); border-bottom-color:var(--forest,#4A5E3A); }
/* 標準頁首(全後台一致):值同 chiming-pos.css;讓不載 chiming-pos.css 的 tool 頁也能用標準 .page-head */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:14px; }
.page-head .num{ font-size:11px; letter-spacing:.22em; color:var(--cs-gold,#C4A882); font-weight:600; font-family:'JetBrains Mono',monospace; margin-bottom:4px; }
.page-head h1{ font-size:24px; font-weight:700; color:var(--cs-olive,#4A5E3A); margin:0; }
.page-head .actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
@media(max-width:768px){ .page-head{ align-items:flex-start; } .page-head h1{ font-size:20px; } .page-head .actions{ width:100%; } }