/* v11 追加 V27：切換角色畫面——預覽橫幅（乙「以角色檢視」）、「🔀 切換」選單（甲）、「👁️ 以角色檢視」視窗（各入口都載入，見 app/core/layout.php layout_assets） */

/* ---- 預覽橫幅：畫面最上方固定，手機也看得到（窄螢幕會變兩行，高度由 assets/js/roleswitch.js 量好寫進 --viewas-h） ---- */
.viewas-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1035;   /* 在上方列（1030）之上、選單抽屜與視窗（1040 起）之下 */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem .75rem;
  padding: max(.35rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) .35rem max(.75rem, env(safe-area-inset-left));
  background: #fbbf24; color: #1a1a1a; font-size: .9rem; line-height: 1.35; text-align: center;
  box-shadow: 0 2px 10px rgb(0 0 0 / .45);
}
.viewas-bar b { font-weight: 800; }
.viewas-bar .viewas-ro { white-space: nowrap; }
.viewas-bar .viewas-end { background: #1a1a1a; color: #fff; border: 0; font-weight: 700; padding: .2rem .75rem; white-space: nowrap; }
.viewas-bar .viewas-end:hover, .viewas-bar .viewas-end:focus-visible { background: #000; color: #fbbf24; }
html:has(.viewas-bar) { --viewas-h: 2.5rem; }                                         /* 量到實際高度之前的預設 */
@media (max-width: 575.98px) { html:has(.viewas-bar) { --viewas-h: 3.9rem; } }
body:has(> .viewas-bar) { padding-top: var(--viewas-h); }
/* 固定／黏在上方的東西都往下移橫幅的高度；橫幅已經避開瀏海，下面的上方列不用再留上方安全區 */
body:has(> .viewas-bar) .navbar.site-nav { top: var(--viewas-h); padding-top: var(--bs-navbar-padding-y); }
body:has(> .viewas-bar) .admin-topbar { top: var(--viewas-h); height: var(--topbar-h); padding-top: 0; }
body:has(> .viewas-bar) .admin-sidebar { top: var(--viewas-h); height: auto; }
body:has(> .viewas-bar) .sidebar-brand { height: var(--topbar-h); padding-top: 0; }
body:has(> .viewas-bar) .staff-top { top: var(--viewas-h); padding-top: .55rem; }
body:has(> .viewas-bar) .st-upload { top: calc(var(--viewas-h) + .55rem + 49px); }
body:has(> .viewas-bar) #toastArea.top-0 { top: var(--viewas-h) !important; }
html:has(> body.admin-body > .viewas-bar) { scroll-padding-top: calc(var(--viewas-h) + var(--topbar-h) + 2.5rem); }

/* ---- 「🔀 切換」選單 ---- */
.switch-menu .dropdown-menu { min-width: 13rem; max-width: min(20rem, calc(100vw - 1.5rem)); }
.switch-menu .dropdown-item { white-space: normal; padding-top: .45rem; padding-bottom: .45rem; }
/* 手機寬度：只剩圖示、拿掉下拉箭頭、縮小左右留白（上方列的頁面標題才不會被擠到只剩「…」） */
@media (max-width: 575.98px) {
  .switch-menu .dropdown-toggle::after { display: none; }
  .switch-menu .dropdown-toggle, #viewasOpen { padding-left: .5rem; padding-right: .5rem; }
}

/* ---- 「👁️ 以角色檢視」視窗 ---- */
.viewas-roles { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.viewas-role { text-align: left; border: 1px solid hsl(var(--border) / .7); border-radius: .6rem; padding: .5rem .7rem; background: hsl(var(--secondary) / .35); color: hsl(var(--foreground)); line-height: 1.3; }
.viewas-role small { display: block; color: hsl(var(--muted-foreground)); font-size: .75rem; }
.viewas-role.active, .viewas-role:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .15); }
.viewas-list .list-group-item { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--border) / .6); text-align: left; }
.viewas-list .list-group-item.active { background: hsl(var(--primary) / .2); border-color: hsl(var(--primary)); color: hsl(var(--foreground)); }
.viewas-list .list-group-item small { color: hsl(var(--muted-foreground)); }