/* ================= 侧栏导航增强（搜索过滤 / 分组折叠 / 最近访问 / 折叠与自动隐藏） =================
   动效约定（平滑度关键）：
   - 主位移（侧栏宽/内距/内容区边距/按钮位置）统一 0.32s cubic-bezier(.4,0,.2,1)
     （Material 标准曲线：起步利落、收尾柔和，替代生硬的默认 ease）；
   - 内容元素的显隐不用 display 硬切，改为「收拢 + 淡入淡出」参与动画：
     搜索框收高度、分组标题/最近访问收 max-height、品牌文字收 max-width，opacity 过渡
     带 50ms 延迟——侧栏先滑动、文字随后浮现，避免瞬现被窄容器挤压；
   - .nav 文字用 font-size/gap 延迟过渡「生长」出现；图标尺寸（span/svg）参与过渡。
   注：main 元素体积大，不设常驻 will-change（避免大图层显存开销）。 */

/* ---- 搜索框：容器一层 DIV，图标在左、提示文字在右（input 去外观见下方重置） ---- */
.sidebar nav .nav-search{display:flex;align-items:center;gap:8px;margin:2px 4px 10px;padding:0 10px;height:34px;border-radius:var(--ui-radius,12px);background:rgba(127,127,127,.14);border:1px solid rgba(127,127,127,.22);overflow:hidden;transition:height .32s cubic-bezier(.4,0,.2,1),margin .32s cubic-bezier(.4,0,.2,1),border-width .32s cubic-bezier(.4,0,.2,1),opacity .22s ease .05s,visibility .32s,border-color .16s}
.sidebar nav .nav-search:focus-within{border-color:rgba(127,127,127,.5)}
.sidebar nav .nav-search svg{width:14px;height:14px;opacity:.65;flex:none}
/* 输入框完全去外观：视觉上只有 .nav-search 这一层 DIV（图标在左、提示文字在右）。
   必须 !important——base.css 的 `input:not(...)` 长链（特异性 0,9,1）与
   admin-cyber.css 的 `input{border:...!important}` 会覆盖普通重置规则 */
.sidebar nav .nav-search input{flex:1;min-width:0;height:auto!important;min-height:0!important;padding:0!important;margin:0;border:none!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font-size:var(--fs-md)!important;outline:none}
.sidebar nav .nav-search input:focus{border-color:transparent!important;box-shadow:none!important}
.sidebar nav .nav-search input::placeholder{color:inherit!important;opacity:.5}

/* ---- 最近访问 / 分组折叠 ---- */
.sidebar nav .nav-recent{margin:0 0 8px;max-height:160px;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1),margin .32s cubic-bezier(.4,0,.2,1),opacity .22s ease .05s,visibility .32s}
.sidebar nav .nav-recent-title{font-size:var(--fs-sm);opacity:.6;padding:6px 10px 2px;letter-spacing:.4px}
.sidebar nav .nav-group-wrap{margin-bottom:2px;transition:margin-bottom .32s cubic-bezier(.4,0,.2,1)}
.sidebar nav .nav-group-head{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;cursor:pointer;padding:7px 10px;font-size:var(--fs-sm);letter-spacing:.4px;color:inherit;opacity:.7;text-align:left;font-weight:600;max-height:40px;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1),padding .32s cubic-bezier(.4,0,.2,1),opacity .22s ease .05s,visibility .32s}
.sidebar nav .nav-group-head:hover{opacity:1}
.sidebar nav .nav-arrow{width:12px;height:12px;flex:none;transition:transform .18s ease}
.sidebar nav .nav-group-wrap.collapsed .nav-arrow{transform:rotate(-90deg)}
.sidebar nav .nav-group-wrap.collapsed .nav-group-body{display:none}
.sidebar nav .nav-empty{padding:12px 10px;font-size:var(--fs-sm);opacity:.6}

/* ---- 品牌区：padding/gap 参与过渡，文字块收 max-width ---- */
.sidebar .brand{transition:padding .32s cubic-bezier(.4,0,.2,1),gap .32s cubic-bezier(.4,0,.2,1)}
.sidebar .brand-copy{max-width:200px;overflow:hidden;white-space:nowrap;transition:max-width .32s cubic-bezier(.4,0,.2,1),opacity .22s ease .05s,visibility .32s}

/* ================= 侧栏折叠（rail：收起只剩一排图标）+ 自动隐藏（peek：悬停滑出） =================
   rail 态 = 自动隐藏模式：常态 70px 图标条（贴屏幕左缘）；鼠标移入即滑出展开全名，
   内容区同步右移（86 ⇄ 254，同 0.32s 过渡保证中途不重叠）；鼠标移开立即收回（约 100ms 缓冲，见 app.js）。
   实现约定：peek 类（html.nav-peek）出现时，所有「收起样式」经 :not(.nav-peek) 自动失效、
   侧栏回落到默认展开样式，因此只需补齐宽度/内距/内容边距/按钮位置。 */
.sidebar{transition:width .32s cubic-bezier(.4,0,.2,1),padding .32s cubic-bezier(.4,0,.2,1);will-change:width,padding}
main{transition:margin-left .32s cubic-bezier(.4,0,.2,1)}
html.nav-rail .sidebar{width:70px;padding:22px 10px}
html.nav-rail main{margin-left:86px}

/* 导航列表超高时可收缩滚动：避免图标溢出容器、与底部头像区域层叠 */
.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.sidebar nav::-webkit-scrollbar{width:4px}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:var(--ui-radius,12px)}
.sidebar nav::-webkit-scrollbar-track{background:transparent}

/* 折叠开关：悬浮在侧栏右缘，位置随三态移动（固定展开 225 / 自动隐藏 57 / 悬停浮层 225），箭头翻转示意方向 */
.nav-toggle{position:fixed;top:51px;left:225px;width:26px;height:26px;border-radius:var(--ui-radius,12px);background:#fff;color:#17313f;border:1px solid rgba(16,26,40,.14);box-shadow:0 2px 10px rgba(16,26,40,.22);display:grid;place-items:center;cursor:pointer;z-index:12;padding:0;transition:left .32s cubic-bezier(.4,0,.2,1),color .16s}
.nav-toggle:hover{color:#0e7c9b}
.nav-toggle svg{width:14px;height:14px;transition:transform .32s cubic-bezier(.4,0,.2,1)}
html.nav-rail .nav-toggle{left:57px}
html.nav-rail .nav-toggle svg{transform:rotate(180deg)}

/* peek：悬停滑出（仅桌面宽度）；内容区随侧栏同步右移（86 ⇄ 254） */
@media(min-width:761px){
  html.nav-rail.nav-peek .sidebar{width:238px;padding:27px 18px}
  /* 滑出时内容区同步右移（与钉住展开同宽 254），过渡由 main 的 margin-left 承接 */
  html.nav-rail.nav-peek main{margin-left:254px}
  html.nav-rail.nav-peek .nav-toggle{left:225px}
  html.nav-rail.nav-peek .nav-toggle svg{transform:none}
  /* 底部文字块：flex 方向切换无法过渡，入场以淡入柔化 */
  html.nav-rail.nav-peek .sidebar .side-foot>div:not(.shop-avatar){animation:navPeekIn .22s ease .05s both}
  @keyframes navPeekIn{from{opacity:0}to{opacity:1}}
}

/* 导航按钮文字/图标：rail 场景下文字用 font-size/gap 延迟「生长」出现（替代瞬变）；
   transition 列表覆盖 admin-cyber 的 `all .18s`，保留颜色/背景/位移的手感 */
html.nav-rail .sidebar .nav{transition:font-size .28s cubic-bezier(.4,0,.2,1) .05s,gap .28s cubic-bezier(.4,0,.2,1) .05s,padding .32s cubic-bezier(.4,0,.2,1),background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
html.nav-rail .sidebar .nav span{transition:width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1)}
html.nav-rail .sidebar .nav span svg{transition:width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1)}

/* ---- 图标分色：每个功能菜单的图标使用不同颜色（Material 亮色调，深色侧栏上清晰），
   便于在长长的一列里快速区分；收/展两态都生效，hover 与选中只高亮背景和文字、不改图标色 ---- */
.sidebar .nav[data-page="dashboard"]>span{color:#4FC3F7}
.sidebar .nav[data-page="orders"]>span{color:#FFB74D}
.sidebar .nav[data-page="quotations"]>span{color:#4DD0E1}
.sidebar .nav[data-page="customers"]>span{color:#81C784}
.sidebar .nav[data-page="statements"]>span{color:#BA68C8}
.sidebar .nav[data-page="files"]>span{color:#64B5F6}
.sidebar .nav[data-page="members"]>span{color:#FFD54F}
.sidebar .nav[data-page="business-types"]>span{color:#7986CB}
.sidebar .nav[data-page="materials"]>span{color:#FF8A65}
.sidebar .nav[data-page="outsourcing"]>span{color:#4DB6AC}
.sidebar .nav[data-page="suppliers"]>span{color:#F06292}
.sidebar .nav[data-page="performance"]>span{color:#AED581}
.sidebar .nav[data-page="attendance"]>span{color:#90CAF9}
.sidebar .nav[data-page="purchase"]>span{color:#FFAB91}
.sidebar .nav[data-page="finance"]>span{color:#66BB6A}
.sidebar .nav[data-page="invoices"]>span{color:#E57373}
.sidebar .nav[data-page="settings"]>span{color:#B0BEC5}
.sidebar .nav[data-page="notes"]>span{color:#FFF176}
.sidebar .nav[data-page="memos"]>span{color:#CE93D8}
.sidebar .nav[data-page="daily"]>span{color:#FFCC80}
.sidebar .nav[data-page="my-business"]>span{color:#80CBC4}

/* 收起态（非 peek）：收拢 + 淡出（替代 display 硬切），只留图标列 */
html.nav-rail:not(.nav-peek) .sidebar .nav-search{height:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;opacity:0;visibility:hidden}
html.nav-rail:not(.nav-peek) .sidebar .nav-group-head{max-height:0;padding-top:0;padding-bottom:0;opacity:0;visibility:hidden}
html.nav-rail:not(.nav-peek) .sidebar .nav-recent{max-height:0;margin-bottom:0;opacity:0;visibility:hidden}
html.nav-rail:not(.nav-peek) .sidebar .brand{justify-content:center;padding:0 0 22px;gap:0}
html.nav-rail:not(.nav-peek) .sidebar .brand-copy{max-width:0;opacity:0;visibility:hidden}
html.nav-rail:not(.nav-peek) .sidebar .nav{justify-content:center;gap:0;font-size:0;padding:13px 8px;text-align:center}
html.nav-rail:not(.nav-peek) .sidebar .nav span{width:22px;height:22px}
html.nav-rail:not(.nav-peek) .sidebar .nav span svg{width:22px;height:22px}
html.nav-rail:not(.nav-peek) .sidebar .nav-group-wrap{margin-bottom:8px}
/* 旧静态结构的分组标题（无交互的 .nav-group）：收起态若不隐藏，宽度被压到 7px 会竖排成单字列 */
html.nav-rail:not(.nav-peek) .sidebar .nav-group{display:none}
html.nav-rail:not(.nav-peek) .sidebar .nav-group-wrap.collapsed .nav-group-body{display:block}
/* 收起态：底部胶囊（dashboard-glass 的 999px 圆角白底卡片）会被压成 49×50 的「圆」叠在头像后，
   视觉突兀——此处仅在收起态褪去其背景/边框/阴影/模糊，保持展开（含 peek）时的胶囊设计 */
html.nav-rail:not(.nav-peek) .sidebar .side-foot{flex-direction:column;gap:8px;padding:16px 0 0;background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html.nav-rail:not(.nav-peek) .sidebar .side-foot>div:not(.shop-avatar){display:none}
/* 收起态隐藏退出按钮，展开（含悬停预览 peek）时恢复显示 */
html.nav-rail:not(.nav-peek) .sidebar .side-foot #logout{display:none}

/* 窄屏（≤760px）本身即图标模式、无悬停：隐藏折叠钮与搜索/分组标题，避免挤压 */
@media(max-width:760px){
  .nav-toggle{display:none}
  .sidebar .nav-search,.sidebar .nav-group-head,.sidebar .nav-recent{display:none}
}