/* ══════════════════════════════════════════════════════════
   CFO Pilot App Shell — minimal · refined
   設計原則: 1) 不搶內容焦點  2) 字 < 圖示 < 內容  3) 留白比裝飾重要
   ══════════════════════════════════════════════════════════ */

:root {
  --las-app-side-w: 182px;
  --las-app-top-h: 52px;
  --las-app-side-w-rail: 56px;        /* 預設窄條,只有圖示 */
  --las-side-gap: 10px;               /* 懸浮側欄與邊緣的間距 */
}

/* 套用 shell 後 body 的位置 — 永遠保留 rail 寬 + 懸浮間距,展開時 sidebar 浮在內容上方,不擠 */
body.has-cfo-app-shell {
  margin: 0;
  padding-top: var(--las-app-top-h);
  padding-left: calc(var(--las-app-side-w-rail) + var(--las-side-gap) + 8px);   /* 內容讓出 rail + 懸浮間距 */
  background: var(--cfo-bg, #f4f6f9);
  min-height: 100vh;
  box-sizing: border-box;
}

/* ══ TOP BAR ── 跟著主題色換背景 (var(--cfo-header-a)) ══ */
.lap-top {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--las-app-top-h);
  z-index: 10001;
  background: linear-gradient(105deg, var(--cfo-header-a, #071E41) 0%, var(--cfo-header-b, #14B8A6) 58%, var(--cfo-green-2, var(--cfo-header-b, #14B8A6)) 100%);
  color: #e8eef5;
  display: flex; align-items: center;
  padding: 0 14px 0 16px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: var(--ff-base, "Inter","PingFang TC","Microsoft JhengHei",system-ui,sans-serif);
}
/* mono (高對比黑白) 主題下 topbar 要黑底白字, 加粗邊 */
:root[data-cfo-theme="mono"] .lap-top { background: #000; border-bottom: 2px solid #000; }
:root[data-cfo-theme="mono"] .lap-top * { color: #fff !important; }

.lap-top-brand {
  display: inline-flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  padding: 2px 8px 2px 2px; border-radius: 6px;
  transition: opacity .12s ease;
}
.lap-top-brand::after { content: none; }
/* 現代 SaaS 字標 — Inter、緊湊字距、雲白色（深色頂欄上） */
.lap-top-brand .brand-word {
  font-family: 'Inter', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  font-size: 21px; line-height: 1; font-weight: 800;
  letter-spacing: -.01em;
  color: #F6F9FC;
  white-space: nowrap;
}
.lap-top-brand .brand-pilot { color: #2DD4BF; font-weight: 600; }
.lap-top-brand .lap-top-logo { height: 32px; width: auto; display: block; }
.lap-top-brand:hover { opacity: .82; }
:root[data-cfo-theme="mono"] .lap-top-brand .brand-word { color: #fff; }

.lap-top-en { display: none; }  /* 拿掉 CFO Pilot 副標 — 太冗餘 */
.lap-workspace-chip {
  min-width: 0;
  max-width: min(420px, 38vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  margin-left: 4px;
  padding: 0 12px;
  border-left: 1px solid rgba(255,255,255,.12);
  flex-shrink: 1;
}
.lap-ws-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  line-height: 1.1;
}
.lap-ws-label {
  flex-shrink: 0;
  width: 4.6em;
  white-space: nowrap;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.lap-ws-code {
  color: #F6F9FC;
  font-family: var(--ff-mono, "SF Mono", "Roboto Mono", monospace);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .4px;
}
.lap-ws-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.82);
  font-size: 11.5px;
  font-weight: 650;
}
.lap-top-spacer { flex: 1; }

/* 搜尋框 — 置中、像真的搜尋欄；⌘K 靠右 */
.lap-top-search {
  display: flex; align-items: center; gap: 8px;
  width: min(420px, 36vw);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 6px 10px;
  color: rgba(255,255,255,.55);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  font-family: inherit;
  text-align: left;
}
.lap-top-search .kbd { margin-left: auto; }
.lap-top-search:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
  color: #fff;
}
.lap-top-search .kbd {
  background: rgba(255,255,255,.08);
  padding: 1px 5px; border-radius: 3px;
  font-size: 10px; font-weight: 600;
  font-family: var(--ff-mono, "SF Mono", monospace);
  letter-spacing: .5px;
  color: rgba(255,255,255,.7);
}

/* 🔔 通知鈴鐺 + 下拉面板 */
.lap-top-notif { position: relative; }
.lap-notif-badge {
  position: absolute; top: 0; right: -2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: #e25563; color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center;
  pointer-events: none;
}
.lap-notif-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 340px; max-height: 440px; overflow: auto;
  background: var(--cfo-surface, #fff); color: var(--cfo-text, #17202b);
  border: 1px solid var(--cfo-border, #dde3ea); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(11,37,64,.28); z-index: 10002;
}
.lap-notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--cfo-border, #e5e9ef);
  font-size: 12.5px; font-weight: 800;
  position: sticky; top: 0; background: inherit;
}
.lap-notif-head button { border: 0; background: transparent; color: var(--cfo-green, #14B8A6); font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.lap-notif-item { display: block; padding: 9px 12px; border-bottom: 1px solid var(--cfo-border, #eef1f5); text-decoration: none; color: inherit; }
.lap-notif-item:hover { background: rgba(20,184,166,.06); }
.lap-notif-item.unread { background: rgba(20,184,166,.08); }
.lap-notif-item .t { display: block; font-size: 12.5px; font-weight: 750; }
.lap-notif-item .b { display: block; font-size: 11.5px; color: var(--cfo-text-dim, #6f8094); margin-top: 2px; line-height: 1.45; }
.lap-notif-item .d { display: block; font-size: 10.5px; color: var(--cfo-text-dim, #8a99ab); margin-top: 3px; }
.lap-notif-empty { padding: 22px; text-align: center; font-size: 12px; color: var(--cfo-text-dim, #8a99ab); }

/* Icon buttons — 極簡, 只有 hover 時才顯背景 */
.lap-top-icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 14px;
  transition: background .12s, color .12s;
  text-decoration: none;
}
.lap-top-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Topbar 快速入口「🛡️ 後台」— admin 永遠看得到 */
.lap-top-admin-quick {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: #64748B;
  border: 1px solid #64748B;
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px; font-weight: 700;
  text-decoration: none;
  letter-spacing: .3px;
  transition: background .12s, border-color .12s, transform .08s;
}
.lap-top-admin-quick:hover {
  background: #94A3B8;
  border-color: #94A3B8;
}
.lap-top-admin-quick:active { transform: translateY(1px); }
.lap-top-admin-quick .ico { font-size: 13px; }

/* User chip — 名字 + 小圓頭, 不要邊框背景 */
.lap-top-user {
  position: relative;
  display: flex; align-items: center;
  margin-left: 4px;
}
.lap-top-userchip {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: none;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .12s, color .12s;
  border-radius: 999px;
  font-family: inherit;
}
.lap-top-userchip:hover { background: rgba(255,255,255,.08); color: #fff; }
.lap-top-userchip .av {
  width: 24px; height: 24px; border-radius: 50%;
  background: #64748B;
  color: #071E41; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.lap-top-userchip .caret { font-size: 9px; opacity: .5; margin-left: 1px; }

.lap-user-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(11,37,64,.15), 0 1px 3px rgba(11,37,64,.08);
  padding: 6px;
  z-index: 10005;
}
.lap-user-menu.open { display: block; animation: lap-fade-in .14s ease; }
@keyframes lap-fade-in { from { opacity:0; transform: translateY(-3px); } to { opacity:1; transform:none; } }
.lap-user-menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid #f0f3f6;
  margin-bottom: 4px;
}
.lap-user-menu-head .name { font-size: 13.5px; font-weight: 700; color: #1a2635; }
.lap-user-menu-head .role { font-size: 11px; color: #5f7389; margin-top: 2px; }
.lap-user-menu a, .lap-user-menu button {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #1a2635;
  text-decoration: none;
  font-size: 12.5px; font-weight: 500;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.lap-user-menu a:hover, .lap-user-menu button:hover {
  background: #f4f6f9;
  color: #14B8A6;
}
/* 下拉選單單色圖示：跟隨文字色 (currentColor)，hover 一起變主題色 */
.lap-user-menu button .mi { flex: 0 0 16px; opacity: .7; }
.lap-user-menu button:hover .mi { opacity: 1; }
.lap-user-menu a.danger, .lap-user-menu button.danger { color: #b14146; }
.lap-user-menu a.danger:hover, .lap-user-menu button.danger:hover {
  background: rgba(177,65,70,.08);
}
.lap-user-menu-divider {
  height: 1px; background: #f0f3f6; margin: 4px -6px 4px;
}
.lap-user-menu-credit {
  padding: 8px 10px 4px;
  font-size: 9.5px;
  color: #97a8ba;
  text-align: center;
  letter-spacing: .3px;
  font-weight: 500;
  border-top: 1px solid #f0f3f6;
  margin-top: 4px;
}

.lap-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
  border-radius: 6px;
  width: 32px; height: 32px;
  font-size: 16px;
  cursor: pointer;
  align-items: center; justify-content: center;
  font-family: inherit;
}

/* ══ SIDEBAR ── rail 模式 (52px) + hover 展開 (208px) ══ */
.lap-side {
  position: fixed;
  top: calc(var(--las-app-top-h) + var(--las-side-gap));
  left: var(--las-side-gap);
  width: var(--las-app-side-w-rail);
  height: calc(100vh - var(--las-app-top-h) - var(--las-side-gap) * 2);
  background: #ffffff;
  border: 1px solid #e7ecf1;
  border-radius: 18px;                /* 整塊圓角 — 懸浮面板 */
  box-shadow: 0 10px 30px rgba(11,37,64,.10), 0 2px 6px rgba(11,37,64,.05);
  padding: 10px 6px 12px;
  overflow: hidden;
  z-index: 9999;
  box-sizing: border-box;
  font-family: var(--ff-base, "Inter","PingFang TC","Microsoft JhengHei",system-ui,sans-serif);
  transition: width .22s cubic-bezier(.32,.72,0,1), box-shadow .18s ease;
  display: flex; flex-direction: column;
}
/* hover 整個 sidebar 才展開 — 滑鼠移開自動收回（懸浮卡片放大、陰影加深） */
.lap-side:hover,
body.lap-side-pinned .lap-side,
body.lap-side-open .lap-side {     /* mobile 開啟也用同樣展開效果 */
  width: var(--las-app-side-w);
  padding: 10px 10px 12px;
  overflow-y: auto;
  box-shadow: 0 18px 48px rgba(11,37,64,.18), 0 4px 12px rgba(11,37,64,.08);
  z-index: 10010;     /* hover 時提到 topbar 之上,避免被遮 */
}
/* ── 大類分組（第一層可摺疊；rail 只露 4 個群組代表 icon）── */
.lap-side-secgroup { margin: 2px 0; }

.lap-side-sectoggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 10px; margin: 0 0 1px;
  border: 0; background: transparent;
  border-radius: 10px;
  color: #33455a; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: background .1s, color .1s;
  position: relative; white-space: nowrap; overflow: hidden;
  user-select: none;
}
.lap-side-sectoggle:hover { background: #eef2f6; }
.lap-side-sectoggle .lap-side-svg { color: #64748b; }
.lap-side-sectoggle:hover .lap-side-svg { color: var(--cfo-green); }
/* 大類含當前頁子項 → 標題底色變綠（rail 收合時就是 icon 綠底） */
.lap-side-sectoggle.active { background: rgba(20,184,166,.13); }
.lap-side-sectoggle.active:hover { background: rgba(20,184,166,.18); }
.lap-side-sectoggle.active .lap-side-svg { color: #0c5d54; }
.lap-side-sectoggle.active .lap-side-sectitle { color: #0c5d54; }
:root[data-cfo-mode="dark"] .lap-side-sectoggle.active { background: var(--cfo-green-soft); }
:root[data-cfo-mode="dark"] .lap-side-sectoggle.active .lap-side-svg,
:root[data-cfo-mode="dark"] .lap-side-sectoggle.active .lap-side-sectitle { color: var(--cfo-green); }

/* 群組標題 — 只留中文；rail 未展開時淡出，只留 icon */
.lap-side-sectitle {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1.2;
  color: #2a3a4d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .15s ease .05s;
}
.lap-side:hover .lap-side-sectitle,
body.lap-side-pinned .lap-side-sectitle,
body.lap-side-open .lap-side-sectitle { opacity: 1; }
.lap-side-chev { margin-left: auto; flex: none; opacity: 0; transition: transform .18s ease, opacity .15s; }
.lap-side:hover .lap-side-chev,
body.lap-side-pinned .lap-side-chev,
body.lap-side-open .lap-side-chev { opacity: .4; }
.lap-side-sectoggle:hover .lap-side-chev { opacity: .8; }
.lap-side-secgroup.collapsed .lap-side-chev { transform: rotate(-90deg); }

/* 第二層子項容器：rail(未展開)收起只留群組 icon；展開且未摺疊才平滑滑入，
   用 max-height + opacity + translateY 過場，避免子選單「啪」地突然出現/消失 */
.lap-side-secitems {
  padding-left: 4px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .26s cubic-bezier(.32,.72,0,1), opacity .18s ease, transform .26s cubic-bezier(.32,.72,0,1);
  pointer-events: none;
}
.lap-side:hover .lap-side-secgroup:not(.collapsed) .lap-side-secitems,
body.lap-side-pinned .lap-side-secgroup:not(.collapsed) .lap-side-secitems,
body.lap-side-open .lap-side-secgroup:not(.collapsed) .lap-side-secitems {
  max-height: 420px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

:root[data-cfo-mode="dark"] .lap-side-sectoggle { color: var(--cfo-text-sub); }
:root[data-cfo-mode="dark"] .lap-side-sectoggle:hover { background: var(--cfo-surface-2); }
:root[data-cfo-mode="dark"] .lap-side-sectitle { color: var(--cfo-text); }

.lap-side-link {
  display: flex; align-items: center; gap: 10px;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 0 0 1px;
  border-radius: 10px;
  color: #44566b;
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .1s, color .1s, padding .15s;
  position: relative;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
}
.lap-side-link:hover {
  background: #eef2f6;
  color: #1a2635;
}
.lap-side-link.active {
  background: rgba(20,184,166,.13);
  color: #0c5d54;
  font-weight: 600;
}
/* 目前頁不再顯示右側品牌圓點（首頁／後台等以底色高亮即可） */
.lap-side-link.active::before { display: none; }

/* ── 第二層子項：模組入口（單行 + 小 icon），縮排但不做成第三層 ── */
.lap-side-sublink {
  min-height: 30px;
  padding: 6px 10px 6px 30px !important;
  margin: 0 0 1px !important;
  border-radius: 8px;
  color: #52657a !important;
  font-weight: 650 !important;
  gap: 8px;
}
.lap-side-sublink:hover { color: #1a2635 !important; background: #eef2f6 !important; }
.lap-side-sublink.active {
  color: #0c5d54 !important;
  background: rgba(20,184,166,.10) !important;
}
.lap-side-sublink.active::before { display: none; }
.lap-side-sublink .lap-side-svg { width: 16px; height: 16px; color: #8ba0b5; }
.lap-side-sublink:hover .lap-side-svg { color: var(--cfo-green); }
.lap-side-sublink.active .lap-side-svg { color: #0c5d54; }
.lap-side-sublink .lap-side-text .lbl { font-size: 13px; font-weight: 700; white-space: nowrap; }
:root[data-cfo-mode="dark"] .lap-side-sublink { color: var(--cfo-text-sub) !important; }
:root[data-cfo-mode="dark"] .lap-side-sublink:hover { background: var(--cfo-surface-2) !important; color: var(--cfo-text) !important; }
:root[data-cfo-mode="dark"] .lap-side-sublink.active { background: var(--cfo-green-soft) !important; color: var(--cfo-green) !important; }

/* Sidebar 頂部 admin 入口 — 醒目金色描邊 */
.lap-side-admin {
  background: linear-gradient(180deg, rgba(100,116,139,.08), rgba(100,116,139,.03)) !important;
  border: 1px solid rgba(100,116,139,.30) !important;
  color: #806017 !important;
  margin: 4px 4px 6px !important;
  font-weight: 700 !important;
}
.lap-side-admin:hover {
  background: rgba(100,116,139,.16) !important;
  border-color: #64748B !important;
  color: #5d4612 !important;
}
.lap-side-admin.active {
  background: linear-gradient(180deg, #94A3B8, #64748B) !important;
  border-color: #64748B !important;
  color: #ffffff !important;
}
.lap-side-admin.active::before { background: #5d4612 !important; }
.lap-side-admin .ico { opacity: 1; }

.lap-side-divider {
  height: 1px;
  background: #e8edf2;
  margin: 6px 8px 8px;
}
.lap-side-link .ico { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; opacity: .85; }
.lap-side-link.active .ico { opacity: 1; }

/* SVG icon (新版,單色幾何) */
.lap-side-svg {
  width: 19px; height: 19px;
  flex-shrink: 0;
  color: var(--cfo-text-sub);
  transition: color .12s, transform .12s;
}
.lap-side-link:hover .lap-side-svg { color: var(--cfo-green); }
.lap-side-link.active .lap-side-svg { color: #0c5d54; }
.lap-side-admin .lap-side-svg { color: #64748B; }      /* admin gold */
.lap-side-admin:hover .lap-side-svg { color: #94A3B8; }
.lap-side-admin.active .lap-side-svg { color: #ffffff; }

/* 中英文雙標 — 銀行/投行風 */
.lap-side-text {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0;
  opacity: 0;
  transition: opacity .15s ease .05s;
}
.lap-side:hover .lap-side-text,
body.lap-side-pinned .lap-side-text,
body.lap-side-open .lap-side-text { opacity: 1; }
.lap-side-text .lbl {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.25;
  white-space: nowrap;
}
.lap-side-text .en {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--cfo-text-dim);
  line-height: 1.2;
  white-space: nowrap;
}
.lap-side-link:hover .lap-side-text .en { color: var(--cfo-text-sub); }
.lap-side-link.active .lap-side-text .en { color: var(--cfo-green); opacity: .8; }
.lap-side-admin .lap-side-text .lbl { letter-spacing: 1px; }
.lap-side-admin .lap-side-text .en { color: rgba(100,116,139,.7); }
.lap-side-admin.active .lap-side-text .en { color: rgba(26,19,6,.6); }

/* 整個 link 高度給雙標留空間 */
.lap-side-link { padding: 7px 10px; }

/* 舊 .lbl 仍兼容(若有非新版的 link) */
.lap-side-link > .lbl {
  flex: 1;
  opacity: 0;
  transition: opacity .15s ease .05s;
}
.lap-side:hover .lap-side-link > .lbl,
body.lap-side-pinned .lap-side-link > .lbl,
body.lap-side-open .lap-side-link > .lbl { opacity: 1; }
.lap-side-link .badge {
  font-size: 9.5px; padding: 1px 6px;
  background: #eaeef2;
  color: #8da0b3;
  border-radius: 999px; font-weight: 700;
  letter-spacing: .3px;
  opacity: 0;
  transition: opacity .15s ease .05s;
}
.lap-side:hover .lap-side-link .badge,
body.lap-side-pinned .lap-side-link .badge,
body.lap-side-open .lap-side-link .badge { opacity: 1; }

/* Pin / unpin sidebar (展開時 hover-trap 保留) */
.lap-side-pin-btn {
  display: flex; align-items: center; justify-content: center;
  margin: auto 4px 4px;
  padding: 6px;
  background: transparent;
  border: none;
  color: #97a8ba;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  border-radius: 6px;
  transition: background .1s, color .1s, opacity .15s;
  opacity: 0;
  white-space: nowrap;
}
.lap-side:hover .lap-side-pin-btn,
body.lap-side-pinned .lap-side-pin-btn,
body.lap-side-open .lap-side-pin-btn { opacity: 1; }
.lap-side-pin-btn:hover { background: #eef2f6; color: #14B8A6; }
body.lap-side-pinned .lap-side-pin-btn { color: #14B8A6; background: rgba(20,184,166,.06); }

.lap-side-footer { display: none; }

.lap-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(11,37,64,.40);
  z-index: 9990;
}

/* ══ Hide legacy per-page topbars ══ */
body.has-cfo-app-shell > .topbar,
body.has-cfo-app-shell > div.topbar:not(.lap-top),
body.has-cfo-app-shell .topbar:not(.lap-top):not(.las-top):not(.ad-top) {
  display: none !important;
}
body.has-cfo-app-shell .lui-mobile-trigger { display: none !important; }

/* ══ Mobile ══ */
@media (max-width: 880px) {
  body.has-cfo-app-shell { padding-left: 0 !important; }
  .lap-top { padding: 0 8px 0 10px; gap: 6px; }
  .lap-top-brand { padding-right: 4px; }
  .lap-top-brand .brand-word { font-size: 20px; letter-spacing: .07em; }
  .lap-workspace-chip {
    max-width: calc(100vw - 230px);
    padding: 0 10px;
    gap: 2px;
  }
  .lap-ws-label { width: 4.4em; font-size: 9px; }
  .lap-ws-code { font-size: 10.5px; }
  .lap-ws-name { font-size: 10.5px; }
  .lap-top-search { display: none; }
  .lap-toggle { display: inline-flex; }
  .lap-side {
    top: var(--las-app-top-h);
    left: 0;
    height: calc(100vh - var(--las-app-top-h));
    border-radius: 0;
    border: none;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    width: min(260px, 86vw);
  }
  body.lap-side-open .lap-side { transform: translateX(0); }
  body.lap-side-open .lap-backdrop { display: block; }
  .lap-side-collapse-btn { display: none; }
}

/* ══ 手機（窄螢幕）：頂部 bar 不再擠在一起 ══ */
@media (max-width: 560px) {
  .lap-top { padding: 0 6px 0 8px; gap: 4px; }
  .lap-top-brand { padding: 2px 4px; }
  .lap-top-brand .lap-top-logo { height: 24px; }
  .lap-top-brand .brand-word { font-size: 17px; }
  /* 工作區資訊在手機隱藏（accounting 另有自己的標題列；首頁不需要） */
  .lap-workspace-chip { display: none; }
  /* 使用者選單只留頭像，不擠名字 + 箭頭 */
  .lap-top-userchip { padding: 4px; gap: 0; }
  .lap-top-userchip > span { display: none; }
  .lap-top-user { margin-left: 0; }
  /* 圖示按鈕之間更緊湊 */
  .lap-top-icon-btn { width: 30px; height: 30px; }
  /* 後台快速鍵：只留圖示 */
  .lap-top-admin-quick { padding: 5px 7px; gap: 0; font-size: 0; }
  .lap-top-admin-quick .ico { font-size: 14px; }
  /* 下拉選單貼齊右邊、不超出畫面 */
  .lap-user-menu { right: 2px; min-width: min(240px, calc(100vw - 16px)); }
}

/* ══════════════════════════════════════════════════════════
   🌙 DARK MODE — 套用於 data-cfo-mode=dark
   覆蓋 sidebar 顏色 (因為原本 hardcoded #fff)
   ══════════════════════════════════════════════════════════ */
:root[data-cfo-mode="dark"] .lap-side {
  background: #0e1622;
  border: 1px solid #243140;
  box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
}
:root[data-cfo-mode="dark"] .lap-side:hover,
:root[data-cfo-mode="dark"] body.lap-side-pinned .lap-side,
:root[data-cfo-mode="dark"] body.lap-side-open .lap-side {
  box-shadow: 0 20px 54px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.45);
}
:root[data-cfo-mode="dark"] .lap-side-section { color: var(--cfo-text-dim); }
:root[data-cfo-mode="dark"] .lap-side-link { color: var(--cfo-text-sub); }
:root[data-cfo-mode="dark"] .lap-side-link:hover {
  background: var(--cfo-surface-2);
  color: var(--cfo-text);
}
:root[data-cfo-mode="dark"] .lap-side-link.active {
  background: rgba(20,184,166,.20);
  color: #5dd4ad;
}
:root[data-cfo-mode="dark"] .lap-side-link.active .lap-side-svg { color: #5dd4ad; }
:root[data-cfo-mode="dark"] .lap-side-link.active::before { background: #14B8A6; }

:root[data-cfo-mode="dark"] .lap-user-menu {
  background: var(--cfo-surface);
  border: 1px solid var(--cfo-border);
}
:root[data-cfo-mode="dark"] .lap-user-menu-head { border-bottom-color: var(--cfo-border); }
:root[data-cfo-mode="dark"] .lap-user-menu-head .name { color: var(--cfo-text); }
:root[data-cfo-mode="dark"] .lap-user-menu-head .role { color: var(--cfo-text-sub); }
:root[data-cfo-mode="dark"] .lap-user-menu a,
:root[data-cfo-mode="dark"] .lap-user-menu button { color: var(--cfo-text); }
:root[data-cfo-mode="dark"] .lap-user-menu a:hover,
:root[data-cfo-mode="dark"] .lap-user-menu button:hover {
  background: var(--cfo-surface-2);
  color: var(--cfo-green);
}
:root[data-cfo-mode="dark"] .lap-user-menu-divider,
:root[data-cfo-mode="dark"] .lap-user-menu-credit { border-color: var(--cfo-border); background: transparent; }
:root[data-cfo-mode="dark"] .lap-user-menu-credit { color: var(--cfo-text-dim); }

:root[data-cfo-mode="dark"] .lap-side-pin-btn { color: var(--cfo-text-dim); }
:root[data-cfo-mode="dark"] .lap-side-pin-btn:hover {
  background: var(--cfo-surface-2);
  color: var(--cfo-green);
}

/* 整體 body / 卡片 fallback (頁面內 hardcoded #fff 無法覆蓋, 但 CSS var 可以) */
:root[data-cfo-mode="dark"] body { color: var(--cfo-text); }

/* ══════════════════════════════════════════════════════════
   🔠 老花閱讀模式 — 套用於 data-cfo-vision=large
   把字級拉大、行高放鬆、移除小字、加粗對比
   ══════════════════════════════════════════════════════════ */
:root[data-cfo-vision="large"] {
  /* base font-size 已由 JS 設定為 17px */
}
:root[data-cfo-vision="large"] body { line-height: 1.65; }
:root[data-cfo-vision="large"] .lap-top { height: 60px; }
:root[data-cfo-vision="large"] body.has-cfo-app-shell { padding-top: 60px; }
:root[data-cfo-vision="large"] .lap-side { top: 60px; height: calc(100vh - 60px); }
:root[data-cfo-vision="large"] .lap-top-brand .brand-word { font-size: 27px; letter-spacing: .085em; }
:root[data-cfo-vision="large"] .lap-ws-label { font-size: 12px; }
:root[data-cfo-vision="large"] .lap-ws-code { font-size: 13px; }
:root[data-cfo-vision="large"] .lap-ws-name { font-size: 13px; }
:root[data-cfo-vision="large"] .lap-top-search { font-size: 14px; padding: 7px 12px; }
:root[data-cfo-vision="large"] .lap-side-link { font-size: 15px; padding: 11px 12px; }
:root[data-cfo-vision="large"] .lap-side-link .ico { font-size: 20px; width: 28px; }
:root[data-cfo-vision="large"] .lap-side-section { font-size: 11.5px; }
:root[data-cfo-vision="large"] .lap-top-userchip { font-size: 14px; }
:root[data-cfo-vision="large"] .lap-top-userchip .av { width: 28px; height: 28px; font-size: 12px; }

/* 老花模式: 拉大整體 input/button (各頁通用) */
:root[data-cfo-vision="large"] input,
:root[data-cfo-vision="large"] select,
:root[data-cfo-vision="large"] textarea,
:root[data-cfo-vision="large"] button:not(.lap-top-icon-btn):not(.lap-side-pin-btn) {
  font-size: 15px;
  min-height: 40px;
}
:root[data-cfo-vision="large"] .lui-btn { padding: 11px 18px; font-size: 14.5px; }
:root[data-cfo-vision="large"] .lui-input,
:root[data-cfo-vision="large"] .lui-select { padding: 11px 14px; font-size: 14.5px; }
:root[data-cfo-vision="large"] table { font-size: 14px; }
:root[data-cfo-vision="large"] th, :root[data-cfo-vision="large"] td { padding: 12px 14px; }
/* 強化對比 — 不淡 */
:root[data-cfo-vision="large"] { --cfo-text-dim: var(--cfo-text-sub); }

/* ══ 頁內第二層選單（nav.tabs）優雅登場 ══
   進到模組頁時，這個第二層選單面板改成淡入＋些微滑入，
   而不是「啪」地瞬間出現；與左側大類 rail 的節奏銜接（略延遲登場）。
   只在桌機套用；尊重 prefers-reduced-motion。 */
@media (min-width: 981px) {
  @keyframes cfoTabsIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
  }
  nav.tabs { animation: cfoTabsIn .34s cubic-bezier(.32,.72,0,1) .06s both; }
}
@media (prefers-reduced-motion: reduce) {
  nav.tabs { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   頁內第二層選單 · 頂部水平模式（topnav 試作）
   在 <section class="layout ... topnav"> 上加 topnav 類即可啟用。
   大類排成一列，當前大類的子項落在其下一整列（用 flex order 讓它永遠在最後）。
   只在桌機(≥981px)套用；手機維持原本的抽屜選單。
   ══════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
  .layout.topnav { display: block !important; }
  /* 浮動圓角卡片 — 跟左側 rail 同一套視覺語言 */
  .layout.topnav .tabs {
    position: sticky !important; top: calc(var(--las-app-top-h, 52px) + 8px) !important; z-index: 30 !important;
    width: auto !important; height: auto !important; max-height: none !important;
    margin: 8px 24px 6px 24px !important; padding: 0 !important;
    border: 1px solid #e7ecf1 !important; border-radius: 16px !important; overflow: hidden !important;
    display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .layout.topnav .tabs-head { display: none !important; }
  /* 內容區與選單列靠近一點，不要被排到太下面 */
  .layout.topnav .module-content { padding-top: 8px !important; }
  /* 頂欄已標明模組脈絡：收掉內容區重複的大標題（保留描述與連結） */
  .layout.topnav .module-content .topbar .eyebrow,
  .layout.topnav .module-content .topbar h1 { display: none !important; }
  .layout.topnav .module-content .topbar { margin-bottom: 12px !important; }
  /* 頁面「釘選未開」時會在 nav 上加 .rail，其 rail 規則會把 label／子項列藏起來、
     並把選單改成直向窄軌 hover 展開——在 topnav 一律壓過，維持水平樣式。 */
  .layout.topnav .tabs.rail,
  .layout.topnav .tabs.rail:hover { width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; overflow: hidden !important; box-shadow: none !important; }
  .layout.topnav .tabs.rail:not(:hover) .tab-main { justify-content: flex-start !important; padding: 3px 10px !important; gap: 6px !important; }
  .layout.topnav .tab-main .label,
  .layout.topnav .tabs.rail:not(:hover) .tab-main .label { display: revert !important; }
  .layout.topnav .tabs.rail:not(:hover) .tab-main .ic,
  .layout.topnav .tabs.rail:not(:hover) .tab-main .ic svg { width: 15px !important; height: 15px !important; }
  /* 釘住鈕（可選）：固定把子項列展開；否則預設用滑鼠 hover 才浮出，移走即隱藏 */
  .layout.topnav .topnav-toggle {
    order: 1 !important; margin-left: auto !important; align-self: center !important;
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; width: 38px; margin-right: 6px; border: 0; border-radius: 8px;
    background: transparent; color: var(--muted, #8ba0b5); cursor: pointer;
  }
  .layout.topnav .topnav-toggle:hover { color: var(--green, #14B8A6); background: #f1f5f9; }
  .layout.topnav .topnav-toggle svg { width: 15px; height: 15px; }
  .layout.topnav.topnav-pin .topnav-toggle { color: var(--green, #14B8A6); background: rgba(20,184,166,.10); }

  /* 子項列：只顯示目前大類的，收在大類列「下方」(in-flow，不疊在內容上)；卡片裁掉溢出以做滑動 */
  .layout.topnav .tabs { overflow: hidden !important; }
  .layout.topnav .tab-group:not(.current) > .tab-sublist { display: none !important; }
  .layout.topnav .tab-group { display: contents !important; }
  .layout.topnav .tab-main {
    order: 1 !important; width: auto !important;
    padding: 3px 10px !important; margin: 3px 2px !important;
    border-radius: 8px !important; border-bottom: 0 !important;
    font-size: 12.5px !important; gap: 6px !important; white-space: nowrap !important;
  }
  .layout.topnav .tab-main .ic, .layout.topnav .tab-main .ic svg { width: 15px !important; height: 15px !important; }
  /* hover：未選取的維持灰色，只是改成圓角、不要方塊 */
  .layout.topnav .tab-main:hover { background: var(--line, #eef2f6) !important; color: var(--ink, #1a2635) !important; border-radius: 9px !important; }
  .layout.topnav .tab-main .chev { display: none !important; }
  /* 目前大類：跟第一層側欄一樣用綠底高亮，不用底線 */
  .layout.topnav .tab-group.current > .tab-main {
    color: var(--green, #14B8A6) !important;
    background: rgba(20,184,166,.13) !important;
    border-bottom-color: transparent !important;
    border-radius: 8px !important;
    margin: 3px 2px !important; padding: 3px 10px !important;
  }
  .layout.topnav .tab-group.current > .tab-main .ic { color: var(--green, #14B8A6) !important; }
  /* 目前大類的子項列：order:2 換到大類列下方；預設高度0，hover 或釘住時往下滑出 */
  .layout.topnav .tab-group.current > .tab-sublist {
    order: 2 !important; flex-basis: 100% !important; width: 100% !important;
    display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-items: center !important;
    margin: 0 !important; padding: 0 12px !important;
    background: var(--panel-2, #f8fafc) !important;
    border-top: 0 solid var(--line, #e2e8f0) !important; border-radius: 0 0 15px 15px !important;
    max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: translateY(-5px) !important;
    transition: max-height .28s cubic-bezier(.32,.72,0,1), opacity .18s ease, transform .28s cubic-bezier(.32,.72,0,1), padding .22s ease, border-top-width .22s ease !important;
    pointer-events: none !important;
  }
  .layout.topnav .tabs:hover .tab-group.current > .tab-sublist,
  .layout.topnav.topnav-pin .tab-group.current > .tab-sublist {
    max-height: 240px !important; opacity: 1 !important; transform: none !important;
    padding: 6px 10px !important; border-top-width: 1px !important; pointer-events: auto !important;
  }
  .layout.topnav .tab-sub {
    width: auto !important; padding: 2px 9px !important; min-height: 0 !important;
    border-radius: 999px !important; font-size: 12px !important; gap: 0 !important;
  }
  .layout.topnav .tab-sub::before { display: none !important; }
  .layout.topnav .tab-sub:hover { background: var(--line, #eef2f6) !important; color: var(--ink, #1a2635) !important; }
  .layout.topnav .tab-sub.active { background: var(--green-dim, rgba(20,184,166,.12)) !important; color: var(--green, #14B8A6) !important; }
  /* 子分組（subsec）在橫排攤平：小節標籤變 inline，子項照排 */
  .layout.topnav .tab-subgroup { display: contents !important; }
  .layout.topnav .tab-subgroup > .tab-subsec {
    order: 0 !important; padding: 0 4px 0 10px !important; margin: 0 !important;
    font-size: 10.5px !important; font-weight: 800 !important; color: var(--muted, #8ba0b5) !important;
    text-transform: uppercase; letter-spacing: .04em; cursor: default !important; background: transparent !important;
  }
  .layout.topnav .tab-subgroup > .tab-subsec::before { display: none !important; }
  .layout.topnav .tab-subgroup > .tab-subitems { display: contents !important; }
  .layout.topnav .tab-subgroup.sub-collapsed > .tab-subitems { display: contents !important; }

  /* ── topnav-flat：子項本身就是內容（如帳簿與報表），把所有子項一次攤成單排常顯，
     大類只當小節標籤、不用 hover/收合。 ── */
  .layout.topnav.topnav-flat .tab-main {
    order: 0 !important; pointer-events: none !important; background: transparent !important;
    color: var(--ink-soft, #5a6b82) !important; font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: .01em !important; padding: 4px 6px 4px 4px !important; margin: 0 !important;
    border-radius: 0 !important;
  }
  /* 第二個之後的大類前面加分隔線，讓「一組標籤＋子項」清楚分段 */
  .layout.topnav.topnav-flat .tab-group + .tab-group > .tab-main {
    border-left: 1px solid var(--line, #e2e8f0) !important; margin-left: 8px !important; padding-left: 14px !important;
  }
  .layout.topnav.topnav-flat .tab-main .ic,
  .layout.topnav.topnav-flat .tab-main .chev { display: none !important; }
  .layout.topnav.topnav-flat .tab-group.current > .tab-main { color: var(--muted, #8ba0b5) !important; background: transparent !important; }
  .layout.topnav.topnav-flat .tab-group > .tab-sublist,
  .layout.topnav.topnav-flat .tab-group:not(.current) > .tab-sublist {
    order: 0 !important; flex-basis: auto !important; width: auto !important;
    display: flex !important; max-height: none !important; opacity: 1 !important; transform: none !important;
    overflow: visible !important; pointer-events: auto !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; gap: 3px !important;
  }

  /* ── single-group：整頁只有一個大類時，不顯示大類列，直接把子項攤成常顯單排 ── */
  .layout.topnav .tabs.single-group .tab-main { display: none !important; }
  .layout.topnav .tabs.single-group .tab-group > .tab-sublist,
  .layout.topnav .tabs.single-group .tab-group.current > .tab-sublist,
  .layout.topnav .tabs.single-group:hover .tab-group.current > .tab-sublist {
    order: 0 !important; flex-basis: auto !important; width: auto !important;
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    max-height: none !important; opacity: 1 !important; transform: none !important;
    overflow: visible !important; pointer-events: auto !important;
    margin: 0 !important; padding: 4px 4px !important; gap: 4px !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
  }
}

/* ── 頁內第二層選單(nav.tabs)維持較輕量；全域側欄大類現在是 15px/900，
   頁內 tabs 保持 13px，讓「全域工作區」與「模組內功能」層級分明。 */
.layout .tabs .tab-main { font-size: 13px !important; font-weight: 800 !important; }
.layout .tabs .tab-sub  { font-size: 13px !important; font-weight: 500 !important; }
.layout .tabs .tab-sub.active { font-weight: 700 !important; }

/* ── 第二層選單收窄：短中文標籤不需要 212px，縮到 182px 並減少子項左縮排 ── */
.layout { --tabs-w: 162px; }                                   /* 非 rail 頁(如會計/出納)固定欄寬 */
/* 子項左縮排對齊「大類文字」的左緣：大類文字 = 內距10 + 圖示18 + gap10 = 38px */
.layout .tabs .tab-sub { padding-left: 38px !important; padding-right: 10px !important; min-height: 0 !important; }
.layout .tabs .tab-sub::before { left: 26px !important; }
/* 頁內第二層子項不吃行動裝置的 44/36px 觸控最小高度，保持與第一層側欄子項一樣緊湊 */
.layout .tabs .tab-main { min-height: 0 !important; }
.layout .tabs .tab-sub::before { left: 16px !important; }
/* 第二層 rail 收合後 hover 不再自動展開：只由左右箭頭切換（點收合後滑鼠還在上面也不會又被撐開） */
@media (min-width: 981px) {
  .layout .tabs.rail:hover { width: 60px !important; min-width: 0 !important; padding: 10px 6px 16px !important; overflow-x: visible !important; overflow-y: visible !important; box-shadow: 0 10px 30px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05) !important; z-index: auto !important; }
  .layout .tabs.rail:hover .tabs-title { display: none !important; }
  .layout .tabs.rail:hover .tabs-head { justify-content: center !important; padding: 4px 0 8px !important; }
  .layout .tabs.rail:hover .tab-main { justify-content: center !important; padding: 10px 0 !important; gap: 0 !important; }
  .layout .tabs.rail:hover .tab-main .label,
  .layout .tabs.rail:hover .tab-main .chev,
  .layout .tabs.rail:hover .tab-sublist { display: none !important; }
  .layout .tabs.rail:hover .tab-main .ic,
  .layout .tabs.rail:hover .tab-main .ic svg { width: 20px !important; height: 20px !important; }
  .layout.tabs-railed:has(.tabs.rail:hover) { --tabs-w: 72px !important; }
  /* 會計攤平頁（日記帳/手動憑證輸入）：收合時仍顯示兩個子項 icon */
  .layout .tabs.rail:hover .tab-group[data-group="ledger-entry"] .tab-sublist { display: grid !important; }
  .layout .tabs.rail:hover .tab-group[data-group="ledger-entry"] .tab-sub { justify-content: center !important; padding: 10px 0 !important; gap: 0 !important; }
  .layout .tabs.rail:hover .tab-group[data-group="ledger-entry"] .tab-sub .label { display: none !important; }
  /* 股權頁自訂分組標題（.eq-nav-group-title）：收合時縮成分隔線，不要露出整段文字 */
  .layout .tabs.rail:hover .eq-nav-group { margin: 7px 0 !important; }
  .layout .tabs.rail:hover .eq-nav-group-title { pointer-events: none !important; height: 1px !important; padding: 0 !important; margin: 7px 10px 5px !important; border-top: 1px solid var(--line, #e2e8f0) !important; border-radius: 0 !important; }
  .layout .tabs.rail:hover .eq-nav-group-title > * { display: none !important; }
}

/* ── 進頁自動展開(peek)時，內容(含頁內第二層選單)往右滑，讓第二層浮在第一層右邊、不被蓋住；
   peek 收回時內容滑回原位。與 .lap-side 的 width 動畫同步(同 duration/easing)。桌機限定。 */
@media (min-width: 881px) {
  body.has-cfo-app-shell { transition: padding-left .22s cubic-bezier(.32,.72,0,1); }
  body.has-cfo-app-shell.lap-side-open {
    padding-left: calc(var(--las-app-side-w) + var(--las-side-gap) + 8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.has-cfo-app-shell { transition: none !important; }
}

/* ── 第二層選單「釘選」鈕改成左右箭頭：展開時顯示 ‹（點了收合），收合時顯示 ›（點了展開） ── */
.tabs-pin svg { display: none !important; }
.tabs-pin::after {
  content: ''; width: 7px; height: 7px; box-sizing: border-box;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(-135deg); transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.tabs-pin[aria-pressed="false"]::after { transform: rotate(45deg); }