/* ======================================================================
   layout.css — 应用框架布局（页面骨架层）

   职责：侧栏 / 顶栏 / 主内容区 / 顶栏页面标题 / 侧栏分组导航菜单与图标对齐。
   配色变量统一来自 theme.css（var(--wcs-*)）。

   职责边界（重要）：
   - NavMenu.razor.css（scoped）只保留配色 / 行尺寸 / 移动端折叠开关；
     布局与对齐统一在本文件定义，勿在 scoped 侧加 flex/line-height——
     scoped 的 ::deep 规则特异性 (0,3,0) 会压制这里的规则，曾导致
     导航图标对齐调整全部失效（修复记录见 git 87f3c72）。
   加载顺序：... → app.css → scoped → theme.css → 【layout.css】 → pages.css
   ====================================================================== */

/* ---------- 侧栏 ----------
   MainLayout 的左侧导航（桌面固定 250px，见 MainLayout.razor.css）：
   深石板纵向渐变底 + 右缘 1px 高光分隔线 */
.page .sidebar {
    background: linear-gradient(180deg, var(--wcs-sidebar-from) 0%, var(--wcs-sidebar-to) 100%);
    box-shadow: 1px 0 0 rgba(148, 163, 184, 0.15);
}

/* 侧栏顶部的品牌区（"交叉带管理系统"）：叠深色底与侧栏区分层次，
   底部细线与导航区分隔 */
.page .sidebar .top-row {
    background-color: rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

/* 品牌名：白色大字加粗 + 轻投影，保证深底上的可读性 */
.sidebar .navbar-brand {
    color: #f8fafc !important;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.35rem 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 侧栏菜单项基础皮肤：浅色文字 + 圆角条目 + 色彩过渡 */
.sidebar .nav-link {
    color: rgba(226, 232, 240, 0.82);
    border-radius: 0.55rem;
    padding: 0.55rem 0.9rem;
    margin: 0.15rem 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* 菜单项悬停：主色 16% 透明底 + 文字变白 */
.sidebar .nav-link:hover {
    background-color: rgba(99, 102, 241, 0.16);
    color: #ffffff;
}

/* 当前页菜单项：主色渐变底 + 左缘主色竖条 + 加粗（当前位置指示） */
.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.28), rgba(99, 102, 241, 0.10));
    color: #ffffff;
    box-shadow: inset 3px 0 0 var(--wcs-primary);
    font-weight: 600;
}

/* 移动端展开的导航区背景（侧栏收起时 nav-scrollable 平铺在页面顶部） */
.nav-scrollable { background: transparent; }
.nav-scrollable .nav-link { color: rgba(226, 232, 240, 0.82); }

/* ---------- 顶栏 ----------
   右上角工具栏（你好xxx / 工具下载 / 登出）：白色 92% 半透明 +
   背景模糊毛玻璃 + 底部边框，悬浮滚动时内容从下方透出 */
.page .top-row {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--wcs-border);
    box-shadow: var(--wcs-shadow-sm);
    font-size: 0.92rem;
    color: var(--wcs-text-muted);
}

/* ---------- 主内容区 ---------- */
/* 内容底色与页面背景一致（覆盖 bootstrap 白底） */
.page main { background-color: var(--wcs-bg); }
/* 底部留白，长页面滚动到底不贴边 */
.page article.content { padding-bottom: 2.5rem; }

/* ---------- 顶栏页面标题 ----------
   顶栏左侧的当前页标题（PageTitleService 设置）：渐变竖条装饰 + 加粗文字，
   超长标题省略号截断不换行 */
.topbar-title { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.topbar-title-accent {
    width: 4px; height: 1.15rem; border-radius: 50rem;
    background: linear-gradient(180deg, #6366f1, #0ea5e9);
    flex-shrink: 0;
}
.topbar-title-text {
    font-size: 1.02rem; font-weight: 700; color: #1e293b;
    letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 侧栏分组菜单 ----------
   可折叠分组（业务管理 / 系统管理）：分组头按钮 + 缩进的子项列表 */

/* 分组头：无按钮边框的透明条目，小号大写灰字；右侧 2rem 预留箭头位 */
.nav-group { margin: 0.35rem 0.5rem; }

.nav-group-toggle {
    display: flex; align-items: center; gap: 0.55rem;
    width: 100%; padding: 0.5rem 2rem 0.5rem 0.85rem;
    background: transparent; border: none; border-radius: 0.55rem;
    color: rgba(148, 163, 184, 0.95); font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-group-toggle:hover { background-color: rgba(99, 102, 241, 0.14); color: #e2e8f0; }

/* 展开指示箭头（纯 CSS 三角）绝对定位在行尾右侧：
   让分组头的"图标+文字"与顶层菜单左对齐；展开时旋转 90° 指向下 */
.nav-group-caret {
    position: absolute; right: 0.85rem; top: 50%; margin-top: -4px;
    width: 0; height: 0; flex-shrink: 0;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    transition: transform 0.18s ease;
}
.nav-group.open .nav-group-caret { transform: rotate(90deg); }

/* 子项容器：左缩进 + 左缘细竖线，视觉上从属于分组头 */
.nav-group-items { margin: 0.1rem 0 0.25rem 0.55rem; padding-left: 0.65rem; border-left: 1px solid rgba(148, 163, 184, 0.22); }
/* 组内菜单项：比顶层项更小的字号与内边距 */
.nav-group-items .nav-link { margin: 0.1rem 0.15rem; padding: 0.45rem 0.75rem; font-size: 0.88rem; }

/* 导航图标（bootstrap-icons 自托管字体，App.razor 引入）：
   链接为 flex 行（见下），图标与文字的间距由 gap 控制、垂直对齐由
   align-items 控制；vertical-align/margin 类的行内规则在此布局下
   不生效，勿再加（历史教训：曾叠加双重偏移导致图标错位） */
.nav .bi { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.nav-group-toggle .bi { font-size: 0.92rem; }

/* 菜单行统一布局：flex 垂直居中 + 左对齐。
   覆盖 NavMenu.razor.css scoped 的行尺寸（特异性同为 (0,3,0)，靠加载顺序生效）；
   不用 line-height 做垂直居中——它与组内项 padding 叠加会导致内容偏移 */
.nav-scrollable .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.85rem;
    line-height: 1.4;
}

/* 分组内小节标题（系统管理的 账号权限 / 软件分发 / 系统配置）：
   极小号灰字分组标签，不做交互 */
.nav-section-label {
    padding: 0.55rem 0.9rem 0.15rem;
    font-size: 0.68rem; font-weight: 700;
    color: rgba(148, 163, 184, 0.62);
    letter-spacing: 0.14em;
}