/* =====================================================================
   aurora_fresh · 布局层（Layout）
   ---------------------------------------------------------------------
   职责：顶栏 / 侧栏 / 内容区 / 页脚 / 移动抽屉 / 响应式
   依赖：必须晚于 app.min.css 加载，用于覆盖 Skote 底座的硬编码尺寸
        （底座原值：顶栏 70px、侧栏 250px、折叠 70px、页脚 60px）
   加载顺序：fresh-tokens → fresh-layout（本文件）→ fresh-components
   ===================================================================== */

/* =====================================================================
   1. 顶部栏（#page-topbar）
   底座原值 height:70px、box-shadow 较重；此处统一为 64px + 1px 细边
   ===================================================================== */
#page-topbar {
  height: var(--f-topbar-h);
  background: var(--f-surface);
  border-bottom: 1px solid var(--f-border);
  box-shadow: none !important;
}

.navbar-header {
  height: var(--f-topbar-h);
  padding: 0 var(--f-space-6) 0 0 !important;
  background: transparent;
}

/* Logo 区：宽度跟随侧栏，保证折叠时同步收缩 */
.navbar-brand-box {
  width: var(--f-sidebar-w) !important;
  padding: 0 var(--f-space-5) !important;
  text-align: left;
  background: transparent;
  flex-shrink: 0;
  transition: width var(--f-dur) var(--f-ease);
}

.navbar-brand-box .logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* 主题默认走浅色 sidebar，隐藏深色版 logo（保留 DOM 供系统判断） */
.navbar-brand-box .logo-light {
  display: none;
}

.navbar-brand-box .logo-sm {
  display: none;
}

/* ⚠️ LOGO 尺寸的唯一来源就是这里。
   底座 app.min.css 只给 .logo{line-height:70px}，从不约束 <img> 尺寸，
   所以原主题的 LOGO 实际大小 = header.tpl 上的 height="26" 属性 —— 26px。
   在 64px 高的顶栏里（品牌区宽 240px，26px 高的品牌图只占约 100px 宽）明显偏小，
   品牌图自带的第二行小字在 26px 下几乎不可读。
   现统一放大到 36px：约 144px 宽，占品牌区 60%，与顶栏比例协调且仍留呼吸感。
   max-width 兜住「超宽品牌图」撑破品牌区；object-fit 保证任何比例都不被压扁。 */
.navbar-brand-box .logo-lg img {
  width: auto;
  height: 50px;
  max-height: 50px;
  max-width: 200px;
  object-fit: contain;
}

/* 折叠态方形小图标（logo_url_home_mini）同步放大到同一视觉重量。
   max-width:72px = 折叠后品牌区宽度（--f-sidebar-w-mini），保证不溢出。 */
.navbar-brand-box .logo-sm img {
  width: auto;
  height: 36px;
  max-height: 36px;
  max-width: 72px;
  object-fit: contain;
}

/* 汉堡按钮：方形浅底，hover 变主色浅底 */
#vertical-menu-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--f-radius-sm);
  color: var(--f-text-3);
  background: transparent;
  border: 0;
  transition: background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

#vertical-menu-btn:hover {
  background: var(--f-primary-50);
  color: var(--f-primary-active);
}

#vertical-menu-btn i {
  font-size: 16px;
}

/* 顶栏右侧操作区：统一间距 */
.f-topbar__right {
  gap: var(--f-space-1);
}

/* 顶栏纯图标按钮（侧栏开关 / 搜索 / 语言 / 购物车 / 消息）：正方形热区
   ⚠️ 必须排除用户下拉按钮 #page-header-user-dropdown —— 它内含「头像 + 用户名 + 箭头」，
      宽度是内容自适应（约 100px）。一旦被这条定宽规则套住，会被压成 36px 并被
      .waves-effect{overflow:hidden} + .btn{justify-content:center} 两侧对称裁切，
      表现为头像与箭头消失、用户名只剩中间两个字（已修，勿再回退）。
      另外本选择器特异性 (1,1,0) 高于 #page-header-user-dropdown (1,0,0)，
      单靠给用户按钮写 height/padding 是压不回来的，必须在这里排除。 */
#page-topbar .header-item:not(#page-header-user-dropdown) {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--f-radius-sm);
  color: var(--f-text-3);
  background: transparent;
  border: 0;
  transition: background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

#page-topbar .header-item:hover {
  background: var(--f-bg);
  color: var(--f-primary-active);
}

#page-topbar .header-item i {
  font-size: 18px;
  margin-top: 0 !important;
}

/* 未读消息红点：弱化为主色小圆点 */
#page-topbar .badge-danger {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  font-weight: var(--f-fw-semibold);
  border-radius: var(--f-radius-pill);
  /* 白字落在红底上：中间红 --f-danger 只有 3.22:1，用深档 6.06:1 */
  background: var(--f-danger-ink) !important;
  /* 显式声明白字：底座虽有 .badge-danger{color:#fff}，但这里底色被本规则改写，
     把前景色一并钉死，避免以后被其它 badge 规则抢走继承色（曾因此出过绿底深字） */
  color: #fff !important;
}

#page-topbar .noti-icon {
  position: relative;
}

/* 用户头像：首字母圆形浅底 */
.f-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--f-primary-100);
  color: var(--f-primary-deep);
  font-size: 13px;
  font-weight: var(--f-fw-semibold);
  letter-spacing: .5px;
  overflow: hidden;
}

/* 用户下拉按钮：宽度随内容自适应（头像 + 用户名 + 箭头），高度与图标按钮对齐。
   —— 与上面图标按钮规则唯一的差别就是「这里绝不定宽」，切勿再加 width:36px。 */
#page-header-user-dropdown {
  width: auto;
  max-width: 220px;
  height: 36px;
  padding: var(--f-space-1) var(--f-space-2);
  gap: var(--f-space-2);
  color: var(--f-text-3);
}

/* 用户名：短名完整显示，超长名用省略号收尾（显式省略号优于无声裁切）。
   头像 .f-avatar 自带 flex:0 0 32px，不会被压缩。 */
#page-header-user-dropdown > span:not(.f-avatar) {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 下拉箭头：固定尺寸不参与压缩。
   选择器写成 i.mdi-chevron-down 是为了提高特异性 —— 若只写 .mdi-chevron-down(1,1,0)，
   会被 #page-topbar .header-item i{font-size:18px}(1,1,1) 压过，箭头会变成 18px。 */
#page-header-user-dropdown i.mdi-chevron-down {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--f-text-4);
}

/* 顶栏下拉菜单 */
#page-topbar .dropdown-menu {
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  box-shadow: var(--f-shadow-md);
  padding: var(--f-space-1);
  margin-top: var(--f-space-2);
}

#page-topbar .dropdown-item {
  display: flex;
  align-items: center;
  padding: var(--f-space-2) var(--f-space-3);
  border-radius: var(--f-radius-sm);
  font-size: var(--f-fs-base);
  color: var(--f-text-2);
  transition: background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

#page-topbar .dropdown-item:hover,
#page-topbar .dropdown-item:focus {
  background: var(--f-primary-50);
  color: var(--f-primary-active);
}

#page-topbar .dropdown-item i {
  color: var(--f-text-4);
  margin-right: var(--f-space-2) !important;
}

#page-topbar .dropdown-item:hover i {
  color: var(--f-primary-active);
}

#page-topbar .dropdown-item.text-danger:hover {
  background: var(--f-danger-bg);
  color: var(--f-danger-ink);
}

/* =====================================================================
   2. 左侧栏（.vertical-menu）
   底座原值 width:250px / top:70px；此处 240px / top:64px
   ===================================================================== */
.vertical-menu {
  width: var(--f-sidebar-w) !important;
  top: var(--f-topbar-h) !important;
  z-index: 1001;
  background: var(--f-surface);
  border-right: 1px solid var(--f-border);
  box-shadow: none !important;
  transition: width var(--f-dur) var(--f-ease),
              transform var(--f-dur) var(--f-ease);
}

.vertical-menu .simplebar-content-wrapper,
.vertical-menu .simplebar-mask {
  overflow: visible !important;
}

/* --- 菜单项（metismenu） --- */
#sidebar-menu {
  padding: var(--f-space-3) var(--f-space-3) var(--f-space-8);
}

#sidebar-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#sidebar-menu ul li a {
  display: flex;
  align-items: center;
  padding: 10px var(--f-space-3);
  border-radius: var(--f-radius-sm);
  color: var(--f-text-2);
  font-size: 18px;
  font-weight: var(--f-fw-normal);
  line-height: 1.5;
  transition: background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

#sidebar-menu ul li a:hover {
  background: var(--f-violet-50);
  color: var(--f-violet-bright);
}

/* 图标统一尺寸与间距（.f-menu-ico 由 menu.tpl 叠加） */
#sidebar-menu ul li a i.f-menu-ico {
  flex: 0 0 18px;
  width: 18px;
  margin-right: var(--f-space-3);
  font-size: 17px;
  text-align: center;
  color: var(--f-text-4);
  transition: color var(--f-dur-fast) var(--f-ease);
}

#sidebar-menu ul li a:hover i.f-menu-ico {
  color: var(--f-violet-bright);
}

#sidebar-menu ul li a span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* metisMenu 的展开箭头 */
#sidebar-menu ul li a.has-arrow:after {
  width: 7px;
  height: 7px;
  right: 14px;
  border-width: 1px;
  border-color: var(--f-text-4);
  transform: rotate(45deg);
  transition: transform var(--f-dur-fast) var(--f-ease);
}

#sidebar-menu ul li.mm-active > a.has-arrow:after {
  transform: rotate(-135deg);
}

/* 当前项：浅底 + 主色文字（保留 metismenu 自己的 active/mm-active） */
#sidebar-menu ul li a.active {
  background: var(--f-primary-50);
  color: var(--f-primary-active);
  font-weight: var(--f-fw-medium);
}

#sidebar-menu ul li a.active i.f-menu-ico {
  color: var(--f-primary-active);
}

/* FreshUI 追加的左侧指示条（不改 metismenu 的 class，只叠加） */
#sidebar-menu ul li.f-menu-current > a {
  position: relative;
}

#sidebar-menu ul li.f-menu-current > a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  border-radius: 0 var(--f-radius-xs) var(--f-radius-xs) 0;
  background: var(--f-primary);
}

/* 二级 / 三级菜单 */
#sidebar-menu ul li ul.sub-menu {
  padding: var(--f-space-1) 0 var(--f-space-1) 0;
  margin: 0;
}

#sidebar-menu ul li ul.sub-menu li a {
  padding: 8px var(--f-space-3) 8px 44px;
  font-size:16px;
  color: var(--f-text-3);
}

#sidebar-menu ul li ul.sub-menu li a:hover {
  background: transparent;
  color: var(--f-primary-active);
}

#sidebar-menu ul li ul.sub-menu li a.active {
  background: transparent;
  color: var(--f-primary-active);
  font-weight: var(--f-fw-medium);
}

#sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
  padding-left: 60px;
}

/* 移动端关闭按钮 */
.f-menu-close {
  display: none;
}

/* =====================================================================
   3. 主内容区（.main-content / .page-content / .container-fluid）
   ===================================================================== */
.main-content {
  margin-left: var(--f-sidebar-w);
  overflow: visible !important;
  transition: margin-left var(--f-dur) var(--f-ease);
}

.page-content {
  padding: calc(var(--f-topbar-h) + var(--f-space-4)) var(--f-space-6) 0;
}

.container-fluid {
  max-width: var(--f-content-max);
  padding: 0 var(--f-space-4) var(--f-space-6);
  width: 100%;
}

/* =====================================================================
   4. 页脚（.footer）
   底座原值：position:absolute / height:60px / background:#f2f2f5
   ===================================================================== */
.footer {
  left: var(--f-sidebar-w) !important;
  right: 0;
  height: var(--f-footer-h);
  padding: 0 var(--f-space-6) !important;
  background: transparent;
  border-top: 1px solid var(--f-divider);
  color: var(--f-text-4);
  font-size: var(--f-fs-sm);
  display: flex;
  align-items: center;
  transition: left var(--f-dur) var(--f-ease);
}

.footer .container-fluid {
  padding: 0;
  max-width: var(--f-content-max);
}

.footer .row {
  width: 100%;
  margin: 0;
  align-items: center;
}

.f-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 给页脚留出空间，避免内容被遮挡 */
.page-content {
  padding-bottom: var(--f-footer-h);
}

/* =====================================================================
   5. 侧栏折叠态（body.vertical-collpsed，由 app.js toggle）
   ⚠️ 底座给 .vertical-collpsed 加了 min-height:1760px，必须清零
   ===================================================================== */
.vertical-collpsed {
  min-height: 0 !important;
}

.vertical-collpsed .vertical-menu {
  width: var(--f-sidebar-w-mini) !important;
  position: fixed !important;
}

.vertical-collpsed .main-content {
  margin-left: var(--f-sidebar-w-mini);
}

.vertical-collpsed .footer {
  left: var(--f-sidebar-w-mini) !important;
}

.vertical-collpsed .navbar-brand-box {
  width: var(--f-sidebar-w-mini) !important;
  padding: 0 !important;
  justify-content: center;
}

/* 折叠后品牌区只剩 72px，36px 的小图标若按默认左对齐会明显偏左，
   这里让 .logo（flex 容器）水平居中，图标左右留白一致。 */
.vertical-collpsed .navbar-brand-box .logo {
  justify-content: center;
}

.vertical-collpsed .navbar-brand-box .logo-lg {
  display: none !important;
}

.vertical-collpsed .navbar-brand-box .logo-sm {
  display: block !important;
}

/* 折叠态：菜单项居中只显示图标 */
.vertical-collpsed #sidebar-menu > ul > li > a {
  padding: 10px 0;
  justify-content: center;
  min-height: 40px;
}

.vertical-collpsed #sidebar-menu > ul > li > a span {
  display: none;
}

.vertical-collpsed #sidebar-menu > ul > li > a i.f-menu-ico {
  margin-right: 0;
  font-size: 18px;
}

.vertical-collpsed #sidebar-menu > ul > li > a.has-arrow:after {
  display: none;
}

/* 折叠态 hover 浮出子菜单 */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  width: calc(190px + var(--f-sidebar-w-mini));
  background: var(--f-surface);
  color: var(--f-primary-active);
  border-radius: 0 var(--f-radius-sm) var(--f-radius-sm) 0;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span {
  display: inline;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul {
  left: var(--f-sidebar-w-mini);
  width: 190px;
  padding: var(--f-space-1);
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: 0 0 var(--f-radius-md) 0;
  box-shadow: var(--f-shadow-md) !important;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
  width: 100%;
  padding-left: var(--f-space-3) !important;
  color: var(--f-text-3);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
  background: var(--f-primary-50);
  color: var(--f-primary-active);
}

/* =====================================================================
   6. 移动端抽屉（≤991.98px）
   底座用 display:none/block 控制侧栏——会被打断动画，
   此处改为 display:block + transform，保证滑动过渡
   ===================================================================== */
.f-mask {
  position: fixed;
  inset: 0;
  z-index: var(--f-z-mask);
  background: rgba(15, 23, 42, .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--f-dur) var(--f-ease),
              visibility var(--f-dur) var(--f-ease);
}

.f-mask.is-show {
  opacity: 1;
  visibility: visible;
}

/* ⚠️ 桌面端（≥992px）不存在"抽屉"语义，遮罩必须彻底失效。
   fresh-ui.js 的 syncMask() 已在 JS 层做了宽度判断，此处是 CSS 兜底，
   覆盖 JS 尚未初始化的窗口期、以及 MutationObserver 不可用的老浏览器。
   注意 .f-mask 的 z-index 为 1040，一旦显示会拦截全站点击，
   绝不能只依赖 JS 层拦截。 */
@media (min-width: 992px) {
  .f-mask {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .main-content {
    margin-left: 0 !important;
  }

  .footer {
    left: 0 !important;
    padding: 0 var(--f-space-4) !important;
  }

  .vertical-menu {
    display: block !important;
    position: fixed !important;
    top: var(--f-topbar-h) !important;
    left: 0;
    bottom: 0;
    width: var(--f-sidebar-w) !important;
    z-index: var(--f-z-drawer) !important;
    transform: translateX(-100%);
    box-shadow: var(--f-shadow-lg);
  }

  body.sidebar-enable .vertical-menu {
    transform: translateX(0);
  }

  /* 移动端关闭按钮 */
  .f-menu-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--f-space-2) var(--f-space-4);
    border-bottom: 1px solid var(--f-divider);
    color: var(--f-text-3);
    font-size: 20px;
    cursor: pointer;
  }

  /* 折叠态在移动端不生效 */
  .vertical-collpsed .vertical-menu,
  .vertical-collpsed .main-content,
  .vertical-collpsed .footer {
    width: var(--f-sidebar-w) !important;
    margin-left: 0 !important;
    left: 0 !important;
  }

  .navbar-header {
    padding: 0 var(--f-space-4) 0 0 !important;
  }

  /* ⚠️ responsive.css(31-37 / 71-75) 在 995px 与 768px 两处用
        .navbar-brand-box{display:none!important} 隐藏了品牌区，导致移动端顶栏
        左侧空白。本文件先于 responsive.css 加载，必须用更高特异性
        （#page-topbar 前缀）才能覆盖。原 aurora.css:684-692 曾修过同一问题，
        该表已停用，故在此补齐。 */
  #page-topbar .navbar-brand-box {
    display: block !important;
    width: auto !important;
    padding: 0 var(--f-space-3) !important;
  }

  /* 优先显示站点小图标 LOGO；若后台未配置 logo_url_home_mini，
     header.tpl 的 {if} 不会输出 .logo-sm，:not(:empty) 不匹配，
     自动回退到 .logo-lg（下面的 max-width 保证不撑破顶栏）。 */
  #page-topbar .navbar-brand-box .logo-sm:not(:empty) {
    display: block !important;
  }

  #page-topbar .navbar-brand-box .logo-sm:not(:empty) ~ .logo-lg {
    display: none !important;
  }

  /* 移动端 LOGO 上限放宽到 170px：与桌面同为 36px 高时约 144px 宽。
     ⚠️ 若这里卡在 120px，会与 height:36px 冲突 —— object-fit:contain 会把
        4:1 的品牌图缩成 120×30，看起来反而又变小了（改小前需连带改这里）。 */
  #page-topbar .navbar-brand-box .logo-lg img {
    max-width: 170px;
  }

  /* ⚠️ 不可用 padding 简写把 bottom 打回 0：.footer 在移动端仍是
        position:absolute;bottom:0（app.min.css），会压住列表最后一行
        的操作按钮与分页。此处必须与第 405 行的 --f-footer-h 保持一致。 */
  .page-content {
    padding-top: calc(var(--f-topbar-h) + var(--f-space-3));
    padding-left: var(--f-space-4);
    padding-right: var(--f-space-4);
    padding-bottom: var(--f-footer-h);
  }

  .container-fluid {
    padding: 0 0 var(--f-space-6);
  }
}

/* =====================================================================
   7. 页面标题栏（pageheader.tpl）
   ===================================================================== */
.f-pagehead {
  margin-bottom: var(--f-space-5);
}

.f-pagehead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f-space-4);
  flex-wrap: wrap;
}

.f-pagehead__left {
  display: flex;
  align-items: center;
  gap: var(--f-space-2);
  min-width: 0;
}

.f-pagehead__title {
  font-size: var(--f-fs-xl);
  font-weight: var(--f-fw-semibold);
  color: var(--f-ink-800);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.f-pagehead__right {
  margin-left: auto;
}

/* 返回按钮（JS 默认隐藏，仅个别页显示） */
.backBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--f-radius-sm);
  color: var(--f-text-3);
  transition: background var(--f-dur-fast) var(--f-ease);
}

.backBtn:hover {
  background: var(--f-bg);
  color: var(--f-primary-active);
}

.backBtn i {
  font-size: 22px;
}

@media (max-width: 767.98px) {
  .f-pagehead__title {
    font-size: var(--f-fs-md);
  }
}

/* =====================================================================
   8. 打印：隐藏侧栏与顶栏（账单打印场景）
   ===================================================================== */
@media print {
  .vertical-menu,
  #page-topbar,
  .footer,
  .f-preloader,
  .f-mask {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  .page-content {
    padding: 0 !important;
  }
}