/* ==========================================================================
   佛系云 · 顶部横栏（topbar.css）
   --------------------------------------------------------------------------
   为什么需要这个文件：
     app.min.css 里顶栏的高度是「隐性」的 —— #page-topbar 不写 height，
     靠 .header-item{height:70px} 和 .navbar-brand-box 撑起来；同时
     .vertical-menu{top:70px} / .main-content{margin-left:250px} 都是硬编码。
     我们把 logo 放大到 56px 后顶栏变成 80px、侧栏变成 248px，
     于是出现三类错位：
       ① 顶栏 80px vs 图标 70px  → 图标整体上浮 5px
       ② 顶栏 80px vs 侧栏 top:70px → 侧栏上边缘被顶栏压住 10px，交接处露缝
       ③ 侧栏 248px vs 内容 margin-left:250px → 内容左侧多出 2px 空隙
     本文件统一把高度收敛到一套变量上，并重做右侧工具栏的节奏与分隔。

   设计语言（与 sidebar-nav.css / nav-pages.css 同一套单色体系）：
     顶栏底      #ffffff
     顶栏下边线  #e8ecf1（1px，替代原来偏蓝的阴影）
     图标        #55606e，悬停 #0f172a + #f5f7fa 圆角底
     头像        近黑 #0f172a 底 + 白字（替换原玫红 rgb(255,95,98)）
   ========================================================================== */

:root {
    --tb-h: 80px;          /* 顶栏高度（与侧栏 top 严格一致） */
    --tb-gap: 20px;        /* 内容区与顶栏之间的呼吸距离（防止首屏紧贴顶栏） */
    --tb-side-w: 248px;    /* 侧栏宽度（与内容区 margin-left 严格一致） */
    --tb-line: #e8ecf1;
    --tb-ink-0: #0f172a;
    --tb-ink-1: #1f2937;
    --tb-ink-2: #55606e;
    --tb-ink-3: #93a0b0;
    --tb-hover: #f5f7fa;
}

/* --------------------------------------------------------------------------
   1. 顶栏容器：统一高度 + 中性细分隔线（去掉偏蓝的大阴影）
   -------------------------------------------------------------------------- */
body #page-topbar {
    height: var(--tb-h) !important;
    min-height: var(--tb-h) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--tb-line) !important;
}

body #page-topbar .navbar-header {
    height: var(--tb-h) !important;
    min-height: var(--tb-h) !important;
    align-items: center !important;
    padding: 0 !important;
}

/* ② 侧栏与内容区严格对齐顶栏高度 */
body .vertical-menu {
    top: var(--tb-h) !important;
}
body .main-content {
    margin-left: var(--tb-side-w) !important;
}
body.vertical-collpsed .vertical-menu { top: var(--tb-h) !important; }
body.vertical-collpsed .main-content { margin-left: 70px !important; }

/* ③ 页脚：app.min.css 硬编码 left:250px / 折叠时 left:70px，
      与我们改写后的侧栏宽度不同步，中小屏会把页脚顶进内容区。这里一并对齐。 */
body .footer {
    left: var(--tb-side-w) !important;
}
body.vertical-collpsed .footer {
    left: 70px !important;
}

/* --------------------------------------------------------------------------
   2. 品牌区（LOGO）：与侧栏同宽、同底色，右侧一条细分隔线收口
   -------------------------------------------------------------------------- */
body #page-topbar .navbar-brand-box {
    width: var(--tb-side-w) !important;
    min-width: var(--tb-side-w) !important;
    height: var(--tb-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 22px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    /* 右侧细分隔线：把 logo 区与工具栏分开，消除"接缝"观感 */
    border-right: 1px solid var(--tb-line) !important;
    overflow: visible !important;
}
body #page-topbar .navbar-brand-box .logo-lg img {
    width: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    max-width: 204px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
}

/* --------------------------------------------------------------------------
   3. 折叠按钮：与图标统一的方形热区
   -------------------------------------------------------------------------- */
body #page-topbar #vertical-menu-btn {
    height: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    padding: 0 !important;
    margin: 0 6px 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--tb-ink-2) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background-color 0.16s ease, color 0.16s ease !important;
}
body #page-topbar #vertical-menu-btn:hover,
body #page-topbar #vertical-menu-btn:focus {
    background: var(--tb-hover) !important;
    color: var(--tb-ink-0) !important;
}
body #page-topbar #vertical-menu-btn i {
    font-size: 17px !important;
    line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   4. 右侧工具栏：统一 44px 方形热区 + 均匀间距
   --------------------------------------------------------------------------
   旧状态：5 个按钮宽度 52/48/46/46/123，间距杂乱，图标上下不齐。
   -------------------------------------------------------------------------- */
body #page-topbar .navbar-header > .d-flex {
    height: var(--tb-h) !important;
    align-items: center !important;
    gap: 8px !important;                 /* 间距由 flex gap 统一控制 */
    padding-right: 18px !important;
    box-sizing: border-box !important;
}
/* 清掉模板里的 ml-1 / ml-2 等 bootstrap 边距 —— 它们会叠加到 gap 上，
   造成"8px/8px/4px"这种不均匀间距 */
body #page-topbar .navbar-header > .d-flex > .dropdown,
body #page-topbar .navbar-header > .d-flex > .pointer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
}

/* 所有工具按钮统一规格 */
body #page-topbar .navbar-header .header-item {
    height: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--tb-ink-2) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background-color 0.16s ease, color 0.16s ease !important;
}
body #page-topbar .navbar-header .header-item:hover,
body #page-topbar .navbar-header .header-item:focus,
body #page-topbar .navbar-header .dropdown.show .header-item {
    background: var(--tb-hover) !important;
    color: var(--tb-ink-0) !important;
}
/* 图标本体：去掉模板里为旧布局写的 margin-top:8px 补丁 */
body #page-topbar .navbar-header .header-item i {
    margin-top: 0 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
body #page-topbar .navbar-header .header-item a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* 语言旗标：统一 18px 高，垂直居中 */
body #page-topbar #header-lang-img {
    height: 18px !important;
    width: auto !important;
    display: block !important;
    border-radius: 2px !important;
    object-fit: cover !important;
}

/* 未读红点：收敛尺寸与位置，不用 bootstrap 的大 pill */
body #page-topbar .navbar-header .badge {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px #fff !important;
}
body #page-topbar .navbar-header .dropdown {
    position: relative !important;
}

/* --------------------------------------------------------------------------
   5. 用户头像区：近黑底白字（替换原玫红），与黑白商务风统一
   -------------------------------------------------------------------------- */
body #page-topbar .user-center_header {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;          /* 原样式写了 radius:50% 但缺单位 */
    background: var(--tb-ink-0) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    transition: background-color 0.16s ease !important;
}
body #page-topbar .dropdown:hover .user-center_header,
body #page-topbar .dropdown.show .user-center_header {
    background: #1f2937 !important;
}

/* 用户名 + 下拉箭头 */
body #page-topbar .navbar-header .header-item > span.d-none.d-xl-inline-block {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tb-ink-1) !important;
    line-height: 1 !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body #page-topbar .navbar-header .header-item > i.mdi {
    font-size: 16px !important;
    color: var(--tb-ink-3) !important;
    margin-left: 3px !important;
    line-height: 1 !important;
}

/* 带用户名的按钮放宽：左内边距取 8px，使头像与前一图标按钮的净间距
   与图标之间的间距（8px）一致，整条工具栏节奏统一 */
body #page-topbar .navbar-header .header-item#page-header-user-dropdown {
    min-width: 0 !important;
    padding: 0 10px 0 0 !important;
    gap: 8px !important;
}

/* 移动端（≤991.98px）：.logo-lg 会隐藏，改用 .logo-sm。
   ★ 必须用媒体查询隔离！否则 .logo-sm 的 display:flex 会在桌面端也生效，
     造成 .logo-lg 与 .logo-sm 同时渲染、logo 纵向被挤到 top:32。 */
@media (max-width: 991.98px) {
    body #page-topbar .navbar-brand-box .logo-dark { display: block !important; }
    body #page-topbar .navbar-brand-box .logo-light { display: none !important; }
    body #page-topbar .navbar-brand-box .logo-sm {
        display: flex !important;
        align-items: center !important;
        height: 40px !important;
        overflow: visible !important;
    }
    body #page-topbar .navbar-brand-box .logo-sm img {
        width: auto !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        max-width: 176px !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
    }
}

/* 桌面端（≥992px）：只显示 .logo-lg，隐藏 .logo-sm，保证单一 logo 垂直居中 */
@media (min-width: 992px) {
    body #page-topbar .navbar-brand-box .logo-sm { display: none !important; }
    body #page-topbar .navbar-brand-box .logo-lg {
        display: flex !important;
        align-items: center !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
}

/* --------------------------------------------------------------------------
   6. 下拉菜单：统一圆角 / 边框 / 阴影，去掉 bootstrap 默认的粗糙感
   -------------------------------------------------------------------------- */
body #page-topbar .navbar-header .dropdown-menu {
    min-width: 188px !important;
    margin-top: 8px !important;
    padding: 6px !important;
    border: 1px solid var(--tb-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1) !important;
}
body #page-topbar .navbar-header .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 9px 12px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    color: var(--tb-ink-1) !important;
    transition: background-color 0.14s ease, color 0.14s ease !important;
}
body #page-topbar .navbar-header .dropdown-menu .dropdown-item:hover,
body #page-topbar .navbar-header .dropdown-menu .dropdown-item:focus {
    background: var(--tb-hover) !important;
    color: var(--tb-ink-0) !important;
}
body #page-topbar .navbar-header .dropdown-menu .dropdown-item i {
    font-size: 16px !important;
    color: var(--tb-ink-3) !important;
    margin-right: 8px !important;
}
body #page-topbar .navbar-header .dropdown-menu .dropdown-item:hover i {
    color: var(--tb-ink-1) !important;
}
body #page-topbar .navbar-header .dropdown-menu .dropdown-item.text-danger,
body #page-topbar .navbar-header .dropdown-menu .dropdown-item.text-danger i {
    color: #dc2626 !important;
}
body #page-topbar .navbar-header .dropdown-menu .dropdown-item.text-danger:hover {
    background: #fef2f2 !important;
}

/* --------------------------------------------------------------------------
   7. 内容区顶距补偿（★ 本轮修复：顶栏遮挡首屏内容）
   --------------------------------------------------------------------------
   背景：app.min.css 里顶栏是 position:fixed，其高度靠 .page-content 的
        上内边距（calc(70px + 24px) = 94px）来「让位」。此前这里把这层
        padding 直接清成 0，导致所有非 .bw-page 的页面（会员中心首页、
        工单、产品、充值、用户中心等）首屏内容顶到 y=0，
        被 80px 固定顶栏压在下面 —— 即用户截图看到的遮挡。

   做法：把上内边距改成由 --tb-h 驱动，顶栏多高就留多少，再额外加一段
        视觉呼吸（--tb-gap），避免首屏文字紧贴顶栏下沿。
        左右留白沿用 12px（bootstrap 栅格习惯），底部 60px 保持。
        仅对「顶栏存在」的页面生效；登录/注册等页面顶栏不渲染，
        故用 :has() 反查回避，避免给 auth 页凭空加 80px 空白。
   -------------------------------------------------------------------------- */
body .page-content {
    padding: calc(var(--tb-h) + var(--tb-gap)) 12px 60px 12px !important;
}

/* 四页（账单/交易/帮助/新闻）的 .bw-page 自带 .bw-head 上内边距，
   呼吸距离减半即可，否则首屏过空。 */
body .page-content:has(.bw-page) {
    padding-top: calc(var(--tb-h) + 8px) !important;
}

/* 顶栏未渲染的页面（登录/注册/找回密码/绑定/access token）不需要上内边距 */
body:not(:has(#page-topbar)) .page-content {
    padding-top: 0 !important;
}

/* 少数自成一体的页面（如 auth 全屏页）已经自带内外边距，让其自行控制 */
body:has(.auth-full-page-content) .page-content {
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   8. 响应式：中小屏顶栏降高，侧栏 top 同步
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    :root { --tb-h: 72px; --tb-gap: 18px; --tb-side-w: 208px; }
    body #page-topbar .navbar-brand-box { width: 208px !important; min-width: 208px !important; padding: 0 16px !important; }
    body #page-topbar .navbar-brand-box .logo-lg img { height: 46px !important; min-height: 46px !important; max-height: 46px !important; max-width: 176px !important; }
    body .main-content { margin-left: 208px !important; }
    body .vertical-menu { width: 208px !important; }
    body .footer { left: 208px !important; }
}

@media (max-width: 991.98px) {
    :root { --tb-h: 64px; --tb-gap: 14px; }
    body #page-topbar .navbar-brand-box { width: 180px !important; min-width: 180px !important; }
    body #page-topbar .navbar-brand-box .logo-lg img { height: 40px !important; min-height: 40px !important; max-height: 40px !important; max-width: 150px !important; }
    /* 移动端侧栏变抽屉，内容不再左缩进 */
    body .main-content { margin-left: 0 !important; }
    body .vertical-menu { width: var(--tb-side-w) !important; top: var(--tb-h) !important; }
    body.sidebar-enable .vertical-menu { top: var(--tb-h) !important; }
    body .footer { left: 0 !important; }
    body .page-content { padding-left: 10px !important; padding-right: 10px !important; }
}

@media (max-width: 575.98px) {
    :root { --tb-h: 60px; --tb-gap: 12px; }
    body #page-topbar .navbar-brand-box { width: 150px !important; min-width: 150px !important; padding: 0 12px !important; }
    body #page-topbar .navbar-brand-box .logo-lg img { height: 34px !important; min-height: 34px !important; max-height: 34px !important; max-width: 126px !important; }
    body #page-topbar .navbar-header > .d-flex { padding-right: 8px !important; gap: 0 !important; }
    body #page-topbar .navbar-header .header-item { min-width: 38px !important; height: 38px !important; font-size: 17px !important; }
    body #page-topbar .navbar-header .header-item i { font-size: 17px !important; }
    body #page-topbar .user-center_header { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; font-size: 12px !important; }
    body .page-content { padding-left: 8px !important; padding-right: 8px !important; padding-bottom: 40px !important; }
    body .footer { left: 0 !important; }
}