﻿.erp-nav-section { display: grid; gap: var(--erp-space-2); }
.erp-nav-section-title { color: var(--erp-gold-label); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; padding: 0 var(--erp-space-2); }
.erp-nav-link { display: flex; align-items: center; justify-content: space-between; gap: var(--erp-space-2); padding: 10px var(--erp-space-3); border: 1px solid transparent; border-radius: var(--erp-radius-sm); color: var(--erp-text-secondary); transition: background var(--erp-motion-fast), border-color var(--erp-motion-fast), color var(--erp-motion-fast); }
.erp-nav-link:hover, .erp-nav-link:focus-visible { color: var(--erp-gold-light); background: rgba(var(--erp-rgb-gold-dark), 0.12); border-color: var(--erp-border); }
.erp-nav-link.is-active, [data-erp-nav-active='true'].erp-nav-link { color: var(--erp-black); background: var(--erp-gold-primary); border-color: var(--erp-gold-dark); font-weight: 800; }
.erp-nav-link-icon { width: 18px; text-align: center; }
.erp-nav-link-label-wrap { min-width: 0; display: grid; gap: 1px; }
.erp-nav-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-nav-link-action { color: inherit; opacity: 0.72; font-size: 11px; }
.erp-breadcrumb, .erp-breadcrumb-bar { display: flex; align-items: center; min-width: 0; }
.erp-breadcrumb { width: fit-content; padding: var(--erp-space-2) var(--erp-space-4); background: rgba(var(--erp-rgb-card), 0.5); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-md); }
.erp-breadcrumb ol, .erp-breadcrumb-list { display: inline-flex; align-items: center; gap: var(--erp-space-2); padding: 0; margin: 0; list-style: none; font-size: 12px; }
.erp-breadcrumb a, .erp-breadcrumb-link { color: var(--erp-gold-label); font-weight: 800; }
.erp-breadcrumb a:hover, .erp-breadcrumb-link:hover { color: var(--erp-gold-light); }
.erp-breadcrumb .active-item, .erp-breadcrumb-current, .erp-breadcrumb-text { color: var(--erp-gold-light); font-weight: 800; font-size: 12px; }
.erp-breadcrumb-separator { color: var(--erp-gold-label); font-size: 10px; }
.erp-dropdown { position: relative; display: inline-block; }
.erp-dropdown__toggle { cursor: pointer; }
.erp-dropdown__menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1100; min-width: 240px; max-height: min(70vh, 560px); overflow: auto; display: none; padding: var(--erp-space-2); margin: 0; list-style: none; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-md); box-shadow: var(--erp-shadow-card); }
.erp-dropdown__menu--end { left: auto; right: 0; }
.erp-dropdown.is-open > .erp-dropdown__menu, .erp-dropdown__menu.is-open { display: block; }
.erp-dropdown__item, .erp-dropdown__item-text { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 10px; border-radius: var(--erp-radius-sm); color: var(--erp-text-secondary); background: transparent; border: 0; text-align: left; cursor: pointer; }
.erp-dropdown__item:hover, .erp-dropdown__item:focus-visible, .erp-dropdown__item.is-current { color: var(--erp-gold-light); background: rgba(var(--erp-rgb-gold-dark), 0.14); }
.erp-dropdown__header { padding: var(--erp-space-2) var(--erp-space-3); color: var(--erp-gold-primary); font-size: 12px; font-weight: 800; }
.erp-dropdown__divider { height: 1px; margin: var(--erp-space-2); background: var(--erp-border); border: 0; }
.erp-tenant-switch-toggle, .erp-account-toggle { min-height: 40px; display: inline-flex; align-items: center; gap: var(--erp-space-2); padding: var(--erp-space-2) var(--erp-space-3); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-md); background: var(--erp-card); color: var(--erp-text-secondary); }
.erp-tenant-switch-toggle:hover, .erp-account-toggle:hover, .erp-dropdown.is-open .erp-tenant-switch-toggle, .erp-dropdown.is-open .erp-account-toggle { border-color: var(--erp-gold-dark); color: var(--erp-gold-light); }
.erp-tenant-switch-copy, .erp-account-copy { min-width: 0; display: grid; gap: 1px; text-align: left; }
.erp-tenant-switch-label, .erp-account-meta { color: var(--erp-text-muted); font-size: 11px; }
.erp-tenant-switch-value, .erp-account-name { color: var(--erp-text-primary); font-size: 14px; font-weight: 800; }
.erp-account-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--erp-gold-primary); color: var(--erp-black); font-weight: 900; font-size: 12px; }

/* Tenant switch dropdown — 強制左對齊，覆蓋 tailwind generated / Bootstrap dropdown center */
.erp-tenant-switch-menu, .erp-tenant-switch-menu li, .erp-tenant-switch-menu .dropdown-item, .erp-tenant-switch-item { text-align: left !important; }
.erp-tenant-switch-item { align-items: flex-start; }
.erp-tenant-switch-item-main, .erp-tenant-switch-item-meta { text-align: left; width: 100%; }
.erp-account-menu, .erp-account-menu li, .erp-account-menu .dropdown-item { text-align: left !important; }

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1 / Phase 1b-iii Batch A (2026-05-13)
 * Migrated from erp-tailwind.css S14 (breadcrumb) + S15 (nav).
 * Bootstrap-named .breadcrumb / .nav / .nav-link override cyber-mandarin
 * baseline visuals using ERP tokens directly. View-name preserved.
 * ─────────────────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--erp-space-2);
  border-radius: var(--erp-radius-sm);
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  padding: var(--erp-space-2) var(--erp-space-4);
  font-size: 12px;
  font-weight: 700;
  color: var(--erp-text-muted);
}
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--erp-space-2);
  color: var(--erp-gold-label);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 4px;
  color: var(--erp-text-muted);
}
.breadcrumb-item[aria-current="page"],
.breadcrumb-item.active {
  color: var(--erp-gold-light);
}

.nav, .nav-tabs, .nav-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--erp-space-2);
  border-bottom: 1px solid var(--erp-border);
}
.nav-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--erp-radius-sm) var(--erp-radius-sm) 0 0;
  border: 1px solid transparent;
  padding: var(--erp-space-2) var(--erp-space-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--erp-text-muted);
  text-decoration: none;
  transition: color var(--erp-motion-fast), background var(--erp-motion-fast), border-color var(--erp-motion-fast);
}
.nav-link:hover {
  border-color: var(--erp-border);
  background: rgba(var(--erp-rgb-gold-dark), 0.10);
  color: var(--erp-gold-light);
  text-decoration: none;
}
.nav-link.active,
.nav-link[aria-selected="true"] {
  border-color: var(--erp-border);
  border-bottom-color: var(--erp-surface);
  background: var(--erp-surface);
  color: var(--erp-gold-light);
}

/* Bootstrap `.nav-tabs .nav-link.active` is (0,3,0) — beats the
 * generic `.nav-link.active` above (0,2,0) on specificity, so without
 * this matched-specificity rule Bootstrap's light-theme white-bg active
 * tab leaks through on dark blackgold pages (reported as「反白高亮」on
 * Admin/EntryBuilder 2026-05-20). Token-only per Rule 1. Applies to
 * every page that uses Bootstrap nav-tabs (cross-page primitive,
 * Layer 3 nav family is the correct owner). */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link[aria-selected="true"] {
  border-color: var(--erp-border);
  border-bottom-color: var(--erp-surface);
  background: var(--erp-surface);
  color: var(--erp-gold-light);
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────────────────
 * TenantSettings family-nav (.tenant-family-nav)
 * Moved here from design-system/tenant-shared.css by Wave C item 3 S2
 * (Layer 3 nav primitive 正位; shrink-only on tenant-shared per Rule 4).
 * Horizontal sub-nav shared by ~12 TenantSettings views (browser tab-strip
 * style). All sizing via tokens (Rule 1 / C5) — exact px preserved as
 * named --erp-family-nav-* tokens in 00-tokens.css.
 * ─────────────────────────────────────────────────────────────────────── */
.tenant-family-nav { display: flex; gap: 0; align-items: center; padding: 0 var(--erp-space-4); background: var(--erp-card); border: var(--erp-border-width-hairline) solid var(--erp-border); border-radius: var(--erp-radius-lg); overflow-x: auto; margin-bottom: var(--erp-space-4); flex-wrap: nowrap; }
.tenant-family-nav__item { display: inline-flex; align-items: center; gap: var(--erp-family-nav-item-gap); padding: var(--erp-space-3) var(--erp-family-nav-item-pad-x); color: var(--erp-text-muted); font-size: var(--erp-text-body); font-weight: var(--erp-weight-semibold); text-decoration: none; border-bottom: var(--erp-border-width-thin) solid transparent; transition: border-bottom-color var(--erp-motion-fast), color var(--erp-motion-fast), background-color var(--erp-motion-fast); white-space: nowrap; }
.tenant-family-nav__item:hover { color: var(--erp-gold-light); }
.tenant-family-nav__item.is-active { color: var(--erp-gold-primary); border-bottom-color: var(--erp-gold-primary); }
.tenant-family-nav__badge { display: inline-flex; align-items: center; padding: var(--erp-family-nav-badge-pad-y) var(--erp-family-nav-badge-pad-x); background: var(--erp-border); color: var(--erp-text-muted); font-size: var(--erp-text-micro); font-weight: var(--erp-weight-bold); border-radius: var(--erp-family-nav-badge-radius); }
.tenant-family-nav__item.is-active .tenant-family-nav__badge { background: rgba(var(--erp-rgb-gold-primary), 0.16); color: var(--erp-gold-primary); }

/* --secondary modifier — Layer-2 (sub-page) family-nav under a group hub.
 * Wave C item 3 S2: visually demotes the second-layer strip so it reads as
 * subordinate to Layer-1 (muted panel bg, tighter items, thinner underline).
 * All-token, no literal. */
.tenant-family-nav--secondary { padding: 0 var(--erp-space-3); margin-top: var(--erp-space-3); margin-bottom: var(--erp-space-3); margin-left: var(--erp-space-6); background: var(--erp-ds-bg-panel-muted); border-left: var(--erp-border-width-thick) solid var(--erp-gold-dark); }
.tenant-family-nav--secondary .tenant-family-nav__item { padding: var(--erp-space-2) var(--erp-space-3); font-size: var(--erp-family-nav-secondary-font); font-weight: var(--erp-weight-medium); }
.tenant-family-nav--secondary .tenant-family-nav__item.is-active { color: var(--erp-gold-light); border-bottom-width: var(--erp-border-width-hairline); }

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1c-γ Batch 1 (2026-05-13) — TenantSwitch + Account Menu
 * Migrated from site.css L5480-5733 (22 selectors).
 * Multi-def merged: .erp-tenant-switch-menu (3x→1) / .erp-account-menu (2x→1)
 * erp-tenant-readonly-* NOT migrated here (belongs to Slice 4 TenantSettings).
 * Source: SLICE1_ERP_PREFIX_ALLOCATION §A5 + §A6
 * ─────────────────────────────────────────────────────────────────────── */
.erp-tenant-switch-toggle {
  min-width: clamp(220px, 22vw, 320px);
  max-width: 360px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid rgba(var(--erp-rgb-nav-accent), 0.58);
  border-radius: 999px;
  background: rgba(var(--erp-rgb-nav-surface), 0.92);
  color: #f4e4c2;
  box-shadow: inset 0 0 0 1px rgba(var(--erp-rgb-nav-accent), 0.08);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.erp-tenant-switch-toggle::after { display: none; }
.erp-tenant-switch-toggle:hover,
.erp-tenant-switch-toggle:focus {
  border-color: rgba(var(--erp-rgb-nav-accent-light), 0.76);
  background: rgba(var(--erp-rgb-nav-surface-hover), 0.98);
}
.erp-tenant-switch-toggle:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.erp-tenant-switch-copy {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 1.2;
}
.erp-tenant-switch-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--erp-rgb-nav-accent), 0.72);
}
.erp-tenant-switch-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 700;
  color: #f7e7c7;
}
.erp-tenant-switch-caret {
  color: rgba(var(--erp-rgb-nav-accent), 0.88);
  font-size: 0.78rem;
  flex: 0 0 auto;
}
/* erp-tenant-switch-menu: merged 3 definitions (L5543 + L5579 + L5652) */
.erp-tenant-switch-menu {
  min-width: min(420px, calc(100vw - 1rem));
  padding: 0;
  border: 1px solid rgba(var(--erp-rgb-nav-accent), 0.18);
  border-radius: 18px;
  background: rgba(var(--erp-rgb-nav-panel), 0.98);
  box-shadow: 0 20px 48px rgba(var(--erp-rgb-black), 0.42);
  max-height: min(78vh, 640px);
  overflow: hidden;
}
.erp-tenant-switch-menu.show {
  display: flex;
  flex-direction: column;
}
.erp-tenant-switch-head {
  padding: 0.68rem 0.8rem 0.52rem;
  border-bottom: 1px solid rgba(var(--erp-rgb-nav-accent), 0.12);
}
.erp-tenant-switch-head strong {
  color: #fff1d1;
  font-size: 0.98rem;
}
.erp-tenant-switch-exit-wrap {
  padding: 0.35rem 0.55rem 0;
}
.erp-tenant-switch-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
}
.erp-tenant-switch-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.erp-tenant-switch-search-field > i {
  position: absolute;
  z-index: 1;
  left: 0.82rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--erp-rgb-nav-text-dim-cream), 0.56);
  pointer-events: none;
}
.erp-tenant-switch-search {
  min-height: 42px;
  padding-left: 2.3rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--erp-rgb-nav-accent), 0.28);
  background: rgba(var(--erp-rgb-nav-surface-alt), 0.96);
  color: #f4e4c2;
}
.erp-tenant-switch-search::placeholder {
  color: rgba(var(--erp-rgb-nav-text-dim-cream), 0.48);
}
.erp-tenant-switch-search:focus {
  border-color: rgba(var(--erp-rgb-nav-accent-light), 0.72);
  box-shadow: 0 0 0 0.2rem rgba(var(--erp-rgb-nav-accent), 0.14);
  background: rgba(var(--erp-rgb-nav-surface-hover), 0.98);
  color: #fff1d1;
}
.erp-tenant-switch-result-count {
  flex: 0 0 auto;
  color: rgba(var(--erp-rgb-nav-text-dim-cream), 0.72);
  font-size: 0.76rem;
  white-space: nowrap;
}
.erp-tenant-switch-divider {
  margin: 0.25rem 0 0.35rem;
  border-top-color: rgba(var(--erp-rgb-nav-accent), 0.12);
}
.erp-tenant-switch-platform {
  padding: 0 0.55rem 0.42rem;
  border-bottom: 1px solid rgba(var(--erp-rgb-nav-accent), 0.12);
}
.erp-tenant-switch-section-label {
  display: block;
  padding: 0.05rem 0.25rem 0.3rem;
  color: rgba(var(--erp-rgb-nav-accent), 0.76);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.erp-tenant-switch-options-wrap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 0.42rem;
}
.erp-tenant-switch-section-head {
  display: flex;
  align-items: baseline;
  padding: 0 0.8rem 0.28rem;
}
.erp-tenant-switch-section-head .erp-tenant-switch-section-label {
  padding: 0;
}
.erp-tenant-switch-options {
  min-height: 0;
  max-height: min(50vh, 400px);
  margin: 0;
  padding: 0 0.55rem 0.42rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.erp-tenant-switch-item {
  width: 100%;
  min-height: 42px;
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem;
  padding: 0.4rem 0.62rem;
  border-radius: 14px;
  color: #f4e4c2;
  text-align: left;
}
.erp-tenant-switch-item:hover,
.erp-tenant-switch-item:focus {
  background: rgba(var(--erp-rgb-nav-accent), 0.12);
  color: #fff1d1;
}
/* S2 (DECISION-20260608-configs-tenant-singletab-singletask §3.3):
   triple visual redundancy per ux-nova spec — fixes user complaint #2「看不出選中誰」.
   Previous version (background 0.16 alpha + border 0.22 alpha) on blackgold theme
   blended into surrounding rows. Three independent signals now:
     1. left accent border thick gold (geometric edge — --erp-border-width-thick)
     2. fa-check icon (semantic mark — ::before)
     3. font-weight 600 (typographic weight)
   AAA contrast (≥7:1) for text vs background ensures discoverability. */
.erp-tenant-switch-item.is-current {
  background: rgba(var(--erp-rgb-nav-accent), 0.22);
  border: var(--erp-border-width-hairline) solid rgba(var(--erp-rgb-nav-accent), 0.35);
  border-left: var(--erp-border-width-thick) solid var(--erp-gold-primary);
  font-weight: 600;
  color: var(--erp-gold-light);
}
.erp-tenant-switch-item-copy {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: baseline;
  gap: 0.45rem;
}
.erp-tenant-switch-item-main {
  width: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.erp-tenant-switch-item-meta {
  width: auto !important;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: rgba(var(--erp-rgb-nav-text-dim-cream), 0.68);
}
.erp-tenant-switch-item-state {
  flex: 0 0 auto;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(var(--erp-rgb-nav-accent), 0.18);
  border-radius: 999px;
  color: rgba(var(--erp-rgb-nav-text-dim-cream), 0.72);
  font-size: 0.7rem;
}
.erp-tenant-switch-item.is-current .erp-tenant-switch-item-state {
  border-color: rgba(var(--erp-rgb-nav-accent), 0.42);
  color: var(--erp-gold-light);
}
.erp-tenant-switch-empty {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.25rem;
  color: rgba(var(--erp-rgb-nav-text-dim-cream), 0.7);
  text-align: center;
}
.erp-tenant-switch-empty > i {
  margin-bottom: 0.2rem;
  color: rgba(var(--erp-rgb-nav-accent), 0.72);
  font-size: 1.1rem;
}
.erp-tenant-switch-empty > strong {
  color: #f4e4c2;
}
.erp-tenant-switch-empty > span {
  font-size: 0.78rem;
}
.erp-tenant-switch-clear {
  min-height: 36px;
  margin-top: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(var(--erp-rgb-nav-accent), 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--erp-gold-light);
}
.erp-tenant-switch-footer {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.58rem;
  border-top: 1px solid rgba(var(--erp-rgb-nav-accent), 0.12);
  background: rgba(var(--erp-rgb-nav-surface), 0.72);
}
.erp-tenant-switch-footer a {
  min-height: 40px;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  color: rgba(var(--erp-rgb-nav-text-dim-cream), 0.82);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}
.erp-tenant-switch-footer a:hover,
.erp-tenant-switch-footer a:focus-visible {
  background: rgba(var(--erp-rgb-nav-accent), 0.12);
  color: #fff1d1;
}
.erp-tenant-switch-menu li:not(.erp-tenant-switch-search-wrap):not(.erp-tenant-switch-empty) {
  list-style: none;
}

/* Account Menu (Sidebar / Topbar account dropdown) */
.erp-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.32rem 0.42rem 0.32rem 0.36rem;
  border: 1px solid rgba(var(--erp-rgb-nav-accent), 0.22);
  border-radius: 999px;
  background: rgba(var(--erp-rgb-nav-surface), 0.82);
  color: #f1e2c3;
  transition: border-color var(--erp-motion-fast), background-color var(--erp-motion-fast), color var(--erp-motion-fast), box-shadow var(--erp-motion-fast);
  max-width: min(100%, 320px);
}
.erp-account-toggle:hover {
  border-color: rgba(var(--erp-rgb-nav-accent-light), 0.48);
  background: rgba(var(--erp-rgb-nav-surface-hover), 0.96);
}
.erp-account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f4d189, #bd8743);
  color: #231608;
  font-weight: 800;
  flex: 0 0 auto;
}
.erp-account-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  min-width: 0;
  flex: 1 1 auto;
}
.erp-account-name {
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erp-account-meta {
  font-size: 0.78rem;
  color: #b9ad94;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erp-account-menu {
  min-width: 220px;
  border-radius: 16px;
  border: 1px solid rgba(var(--erp-rgb-nav-accent), 0.18);
  background: rgba(var(--erp-rgb-nav-panel), 0.96);
  box-shadow: 0 16px 40px rgba(var(--erp-rgb-black), 0.36);
}
.erp-account-menu-head {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.erp-account-menu .dropdown-item {
  color: #e2d4b8;
}
.erp-account-menu .dropdown-item:hover,
.erp-account-menu .dropdown-item:focus {
  color: #fff4d8;
  background: rgba(var(--erp-rgb-nav-accent), 0.14);
}

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1c-γ Batch 4 (2026-05-13) — erp-nav-* + erp-breadcrumb-* elaborate
 * Migrated from site.css L5081-5265 (19 selectors).
 * Source: SLICE1_ERP_PREFIX_ALLOCATION §A7 + §A8
 * ─────────────────────────────────────────────────────────────────────── */
.erp-nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.erp-nav-section.is-current .erp-nav-section-title {
  color: var(--erp-sidebar-text);
}
.erp-nav-section-title {
  padding: 0 0.7rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--erp-sidebar-text-dim);
}
.erp-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--erp-sidebar-link-text);
  text-decoration: none;
  background: rgba(var(--erp-sidebar-panel-rgb), 0.72);
  transition:
    color var(--erp-motion-fast) var(--erp-ease),
    border-color var(--erp-motion-fast) var(--erp-ease),
    background-color var(--erp-motion-fast) var(--erp-ease),
    transform var(--erp-motion-fast) var(--erp-ease);
}
.erp-nav-link:hover,
.erp-nav-link:focus {
  color: #fffaf0;
  border-color: rgba(var(--erp-sidebar-accent-rgb), 0.32);
  background: rgba(var(--erp-sidebar-panel-hover-rgb), 0.96);
}
.erp-nav-link.is-active {
  color: var(--erp-sidebar-active-text);
  border-color: rgba(var(--erp-sidebar-accent-rgb), 0.82);
  background: linear-gradient(135deg, var(--erp-sidebar-active-start), var(--erp-sidebar-active-mid) 58%, var(--erp-sidebar-active-end));
  box-shadow: 0 10px 20px rgba(var(--erp-sidebar-accent-rgb), 0.18);
}
.erp-nav-link-main {
  display: flex;
  align-items: center;
  gap: 0.72rem;
}
.erp-nav-link-label-wrap {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
}
.erp-nav-link-icon {
  width: 18px;
  text-align: center;
  flex: 0 0 18px;
  font-size: 0.92rem;
}
.erp-nav-link-label {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.28;
}
.erp-nav-link-alias {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--erp-sidebar-accent-rgb), 0.3);
  background: rgba(var(--erp-sidebar-accent-rgb), 0.12);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.erp-nav-link.is-active .erp-nav-link-alias {
  border-color: var(--erp-sidebar-active-chip-border);
  background: var(--erp-sidebar-active-chip-bg);
  color: var(--erp-sidebar-active-text);
}
.erp-nav-link-action {
  padding-left: 2.05rem;
  font-size: 0.78rem;
  color: var(--erp-sidebar-link-action);
  opacity: 1;
  line-height: 1.25;
}
.erp-nav-link.is-active .erp-nav-link-action {
  color: var(--erp-sidebar-active-action);
  font-weight: 700;
}
.erp-nav-link-meta {
  display: none;
}
.erp-nav-link.is-legacy {
  background: rgba(var(--erp-sidebar-panel-rgb), 0.5);
  border-style: dashed;
}
.erp-nav-subsection-title {
  margin-top: 0.25rem;
  padding: 0.3rem 0.8rem 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--erp-sidebar-text-dim);
}
.erp-nav-section-secondary {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(var(--erp-sidebar-accent-rgb), 0.16);
}

/* ───────────────────────────────────────────────────────────────────────
 * Admin Sidebar Accordion (TASK-20260619-admin-sidebar-accordion-ia, 2026-06-20)
 * Shell-scoped to Admin only (.erp-sidebar--admin covers desktop aside + mobile
 * drawer). Tenant/Public sidebars unchanged (Razor @if ShellKind==Admin branch +
 * this prefix = double defense). Group title <div> → <button> accordion toggle;
 * panel hidden when collapsed. Secondary "系統"區 muted via existing dim token. */
.erp-sidebar--admin .erp-nav-section-toggle {
  display: flex;
  align-items: center;
  gap: var(--erp-space-2);
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.erp-sidebar--admin .erp-nav-section-toggle:focus-visible {
  outline: var(--erp-space-1) solid var(--erp-gold-primary);
  outline-offset: var(--erp-space-1);
}
/* Sidebar group→item hierarchy = Variant C (user-picked 2026-06-20). Earlier the
 * <div>→<button> swap inherited a leaked font-weight:900 + button reset, rendering
 * the title 11px/900 — smaller AND heavier than its 14px items (user: 標題太小、
 * 跟項目不成一體). Variant C: bigger header (14px, muted-bright) + a gold section dot
 * + items nested under a left rail so they clearly belong to the group. All
 * Admin-scoped (0,2,0 beats the leaked 0,1,0) → Tenant/Public byte-identical.
 * L1-9 cross-shell dead-code cleanup tracked separately. */
.erp-sidebar--admin .erp-nav-section-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: var(--erp-space-1);
  height: var(--erp-space-1);
  border-radius: 50%;
  background: var(--erp-gold-primary);
}
.erp-sidebar--admin .erp-nav-section-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--erp-text-body);
  font-weight: var(--erp-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--erp-sidebar-text-muted);
}
.erp-sidebar--admin .erp-nav-section.is-current .erp-nav-section-toggle-label {
  color: var(--erp-sidebar-text);
  font-weight: var(--erp-weight-semibold);
}
.erp-sidebar--admin .erp-nav-section-toggle-count {
  color: var(--erp-sidebar-text-dim);
  font-size: var(--erp-text-micro);
  font-weight: var(--erp-weight-regular);
  font-variant-numeric: tabular-nums;
}
.erp-sidebar--admin .erp-nav-section-toggle-chevron {
  color: var(--erp-sidebar-text-dim);
  font-size: var(--erp-text-micro);
  transition: transform var(--erp-motion-base);
}
.erp-sidebar--admin .erp-nav-section-toggle[aria-expanded="false"] .erp-nav-section-toggle-chevron {
  transform: rotate(-90deg);
}
.erp-sidebar--admin .erp-nav-section-toggle:hover .erp-nav-section-toggle-chevron { color: var(--erp-sidebar-text); }
.erp-sidebar--admin .erp-nav-section-panel { display: grid; gap: var(--erp-space-1); }
/* Left rail = desktop aside only; mobile drawer centres its items so a rail would
 * read as disconnected. Drawer keeps the gold dot + larger header, no rail. */
.erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-section-panel {
  margin-left: var(--erp-space-2);
  padding-left: var(--erp-space-3);
  border-left: thin solid rgba(var(--erp-sidebar-accent-rgb), 0.25);
}
.erp-sidebar--admin .erp-nav-section-secondary .erp-nav-section-title { color: var(--erp-sidebar-text-dim); }
/* Item rows: calmer weight + tighter height + FLAT list (user feedback 2026-06-20
 * "卡片牆很怪"). Was 58px chunky cards w/ 700 action + translateX jitter. Non-active
 * rows drop the card bg/border so each group reads as a clean list; hover + active
 * carry the only affordance, no positional jitter. Admin-scoped → Tenant unchanged. */
.erp-sidebar--admin .erp-nav-link {
  min-height: calc(var(--erp-space-8) + var(--erp-space-3));
  padding: var(--erp-space-2) var(--erp-space-3);
  border-radius: var(--erp-radius-md);
  background: transparent;
  border-color: transparent;
  transition:
    color var(--erp-motion-fast) var(--erp-ease),
    border-color var(--erp-motion-fast) var(--erp-ease),
    background-color var(--erp-motion-fast) var(--erp-ease);
}
.erp-sidebar--admin .erp-nav-link:hover,
.erp-sidebar--admin .erp-nav-link:focus {
  background: rgba(var(--erp-sidebar-panel-hover-rgb), 0.55);
  transform: none;
}
.erp-sidebar--admin .erp-nav-link.is-active {
  background: rgba(var(--erp-sidebar-accent-rgb), 0.16);
  border-color: rgba(var(--erp-sidebar-accent-rgb), 0.45);
  box-shadow: none;
  transform: none;
}
.erp-sidebar--admin .erp-nav-link.is-active .erp-nav-link-label,
.erp-sidebar--admin .erp-nav-link.is-active .erp-nav-link-action {
  color: var(--erp-sidebar-link-text);
}
.erp-sidebar--admin .erp-nav-link-label {
  font-size: var(--erp-text-body);
  font-weight: var(--erp-weight-semibold);
}
.erp-sidebar--admin .erp-nav-link-action {
  font-size: var(--erp-text-caption);
  font-weight: var(--erp-weight-regular);
}
.erp-sidebar--admin .erp-nav-link-icon,
.erp-sidebar--admin .erp-nav-link.is-active .erp-nav-link-icon {
  width: var(--erp-space-6);
  flex-basis: var(--erp-space-6);
  font-size: var(--erp-text-h3);
  line-height: 1;
  color: var(--erp-sidebar-link-text);
}

/* Mobile drawer: keep the navigation a calm, left-aligned list. The desktop
 * accordion and collapsed-rail rules must not leak into the phone drawer. */
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-section {
  gap: var(--erp-space-2);
  padding-bottom: var(--erp-space-3);
  border-bottom: thin solid rgba(var(--erp-sidebar-accent-rgb), 0.14);
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-section-toggle {
  min-height: 44px;
  padding: var(--erp-space-2) var(--erp-space-1);
  border-radius: var(--erp-radius-sm);
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-section-toggle:hover,
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-section-toggle:focus-visible {
  background: rgba(var(--erp-sidebar-panel-hover-rgb), 0.72);
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-section-toggle-count {
  min-width: var(--erp-space-6);
  padding: var(--erp-space-1) var(--erp-space-2);
  border: thin solid rgba(var(--erp-sidebar-accent-rgb), 0.22);
  border-radius: var(--erp-radius-pill);
  background: rgba(var(--erp-sidebar-accent-rgb), 0.08);
  text-align: center;
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-section-panel {
  gap: var(--erp-space-1);
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-link,
body.erp-sidebar-collapsed .erp-mobile-drawer.erp-sidebar--admin .erp-nav-link {
  min-height: 44px;
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--erp-space-2) var(--erp-space-3);
  border: thin solid transparent;
  border-radius: var(--erp-radius-md);
  background: transparent;
  text-align: left;
  transform: none;
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-link:hover,
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-link:focus-visible {
  border-color: rgba(var(--erp-sidebar-accent-rgb), 0.22);
  background: rgba(var(--erp-sidebar-panel-hover-rgb), 0.68);
  transform: none;
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-link.is-active {
  border-color: rgba(var(--erp-sidebar-accent-rgb), 0.42);
  background: rgba(var(--erp-sidebar-accent-rgb), 0.13);
  box-shadow: inset var(--erp-space-1) 0 0 var(--erp-gold-primary);
  transform: none;
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-link-main,
body.erp-sidebar-collapsed .erp-mobile-drawer.erp-sidebar--admin .erp-nav-link-main {
  width: 100%;
  justify-content: flex-start;
  gap: var(--erp-space-3);
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-link-label-wrap {
  display: grid;
  min-width: 0;
  align-items: start;
  gap: var(--erp-space-1);
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-link-label {
  font-size: var(--erp-text-body);
  line-height: 1.3;
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-link-action,
body.erp-sidebar-collapsed .erp-mobile-drawer.erp-sidebar--admin .erp-nav-link-action {
  display: block;
  padding-left: calc(var(--erp-space-6) + var(--erp-space-3));
  color: var(--erp-sidebar-link-action);
  font-size: var(--erp-text-caption);
  line-height: 1.35;
  text-align: left;
}
.erp-mobile-drawer.erp-sidebar--admin .erp-nav-subsection-title {
  padding: var(--erp-space-2) var(--erp-space-3) var(--erp-space-1);
  color: var(--erp-sidebar-text-dim);
}
body.erp-sidebar-collapsed .erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-section-toggle,
body.erp-sidebar-collapsed .erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-subsection-title,
body.erp-sidebar-collapsed .erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-link-label-wrap,
body.erp-sidebar-collapsed .erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-link-action {
  display: none;
}
body.erp-sidebar-collapsed .erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-section-panel {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}
body.erp-sidebar-collapsed .erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-link {
  min-height: var(--erp-topbar-mobile-height);
  padding: var(--erp-space-2);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.erp-sidebar-collapsed .erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-link-main {
  width: 100%;
  justify-content: center;
  gap: 0;
}
body.erp-sidebar-collapsed .erp-sidebar--admin:not(.erp-mobile-drawer) .erp-nav-link-icon {
  width: var(--erp-space-6);
  flex: 0 0 var(--erp-space-6);
  font-size: var(--erp-text-h3);
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .erp-sidebar--admin .erp-nav-section-toggle-chevron { transition: none; }
}
.erp-breadcrumb-bar {
  padding: 0.7rem 1.4rem 0.4rem;
  border-bottom: 1px solid rgba(var(--erp-rgb-nav-accent), 0.08);
  background: linear-gradient(180deg, rgba(var(--erp-rgb-nav-bg-deep), 0.72), rgba(var(--erp-rgb-nav-bg-deep), 0));
}
.erp-breadcrumb-text {
  font-size: 0.88rem;
  color: #cfc3ab;
}

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1 / Phase 1b-iii Batch B (2026-05-13)
 * Migrated from erp-tailwind.css S16 (dropdown).
 * Bootstrap `.dropdown-*` + ElementPlus `.el-dropdown-menu*` get the
 * cyber-mandarin dark surface treatment.
 * ─────────────────────────────────────────────────────────────────────── */
.dropdown-menu,
.dropdown-menu.show,
.el-dropdown-menu {
  min-width: 12rem;
  overflow: hidden;
  border-radius: var(--erp-radius-sm);
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--erp-text-primary);
  box-shadow: var(--erp-shadow-card);
}
.dropdown-item,
.el-dropdown-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--erp-text-primary);
  text-decoration: none;
  transition: background var(--erp-motion-fast), color var(--erp-motion-fast);
}
.dropdown-item:hover,
.dropdown-item:focus,
.el-dropdown-menu__item:not(.is-disabled):focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: color-mix(in oklab, var(--erp-gold-dark) 15%, transparent);
  color: var(--erp-gold-light);
  text-decoration: none;
}
.dropdown-item:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.dropdown-item.text-danger,
.el-dropdown-menu__item.is-danger {
  color: #fecaca;
}
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus,
.el-dropdown-menu__item.is-danger:hover,
.el-dropdown-menu__item.is-danger:focus {
  background: color-mix(in oklab, var(--erp-danger) 15%, transparent);
}
.dropdown-header,
.dropdown-item-text {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--erp-text-muted);
}
.dropdown-divider {
  margin: 0.25rem 0;
  border: 0;
  border-top: 1px solid var(--erp-border);
}
