/* ============================================================
   layout-shared.css —— 个人中心(auth) 与 管理后台(admin) 的公共布局骨架
   ------------------------------------------------------------
   全部以 5002auth/static/dashboard.html(个人中心) 的值为基准，
   两个页面通过 <link rel="stylesheet" href="/static/layout-shared.css">
   引用，消除各自内联骨架带来的样式漂移。

   本文件只放「纯布局骨架」：reset / body / 顶栏 / 左侧导航 / 内容区 / 卡片。
   有意保留差异的样式(按钮、表格、badge)以及各页面独有样式，
   仍留在各自页面的 <style> 里，本文件不包含。

   引用顺序约定：此文件的 <link> 必须放在各页面自己的 <style> 之前，
   以便页面可以按需覆盖共享规则。
   ============================================================ */

/* ---------- 基础 reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
}
body {
  font-family: "Microsoft YaHei", Arial, -apple-system, sans-serif;
  background: #f0f4ff;
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- 顶部栏：与首页完全一致 ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 72px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.topbar-slogan {
  font-size: 1.8em;
  font-weight: 700;
  color: #1a73e8;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}
.topbar-slogan:hover {
  color: #e53935;
  text-shadow: 0 0 12px rgba(229, 57, 53, 0.55);
  transform: scale(1.05);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topbar-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topbar-links a {
  font-size: 17px;
  color: #2b2b2b;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-links a:hover { color: #1a73e8; }
.account-corner {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- 主体：左侧导航贴边通栏 + 右侧内容占满剩余空间 ---------- */
.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.nav {
  width: 200px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  /* 顶部留出固定顶栏(72px)的空间，跟右侧 .content 的 padding-top 对齐，
     否则第一个导航项会被固定顶栏盖住、看起来字太靠上 */
  padding: 88px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  transition: width 0.2s;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 16px;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.nav-item:hover { background: #f1f3f4; }
.nav-item.active { background: #e8f0fe; color: #1a73e8; font-weight: 600; }

/* ---------- 内容区 ---------- */
.content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  /* 内容区永不横向溢出：任何单个元素超宽都在它自己内部处理(如 .card 的 overflow-x)，
     页面级别不出现横向滚动条，笔记本小屏也不会被撑破错位 */
  overflow-x: hidden;
  /* 显式设置成跟 body 一致的浅蓝底色：卡片改成独立卡片风格(带四周间距)后，
     卡片之间/四周的缝隙会露出 .content 的背景——若不显式设置，.content 本身透明，
     会漏出 body 的 #f0f4ff，效果其实一致，但显式声明避免以后 body 背景改动时
     这里被"意外继承"，也让本文件自description即可读出实际配色，不必去翻 body 定义。 */
  background: #f0f4ff;
  padding-top: 72px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
.content-inner {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.panel {
  display: none;
  flex: 1;
  flex-direction: column;
}
.panel.active { display: flex; }
.panel > .card:last-child,
.panel > .balance-card:last-child {
  flex: 1;
  /* 独立卡片风格下最后一张卡片仍然撑满剩余高度，但它自己也要保留跟其它卡片
     一致的外边距，否则会紧贴 .content-inner 底部、跟其余卡片的间距不对称。 */
  margin-bottom: 20px;
}

/* ---------- 卡片通用样式 ---------- */
.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  /* 独立卡片风格：四边完整边框(不再贴边通栏)，配合下面的 margin-bottom 形成
     悬浮感。用户明确要求保持直角——不加 border-radius，圆角会让卡片外的浅色
     背景从四个圆弧缺口露出来，观感不好。 */
  border-radius: 0;
  padding: 20px 40px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* 卡片里若有宽表格(用户列表、支出明细、文件列表等)，在笔记本/窄屏下会超出卡片宽度。
     统一让卡片内部横向滚动(而不是把整个页面撑破、内容溢出到屏幕外)——这是笔记本小屏
     "格式乱掉/内容被横向挤"的根治：内容自适应容器，放不下就在卡片内滚，页面本身永不横向溢出。
     不溢出的普通卡片不受影响(overflow-x:auto 只在真的超宽时才出现滚动条)。 */
  overflow-x: auto;
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header h2 { font-size: 16px; font-weight: 700; color: #1a73e8; }
.card-header h2.muted { color: #2b2b2b; font-weight: 500; }

/* ---------- 响应式：顶栏 / 导航 / 布局 / 内容 / 卡片 骨架部分 ---------- */
@media (max-width: 700px) {
  .topbar { padding: 6px 12px; min-height: 50px; }
  .topbar-slogan { font-size: 1em; white-space: normal; }
  .topbar-right { gap: 6px; }
  .topbar-links { gap: 8px; font-size: 0.85em; }
  .topbar-links a { font-size: 12px; }

  /* layout 整体下移 50px（topbar 高度），避免 nav 被固定顶栏遮住 */
  .layout {
    flex-direction: column;
    padding-top: 50px;
  }
  /* content 自身不再需要为 topbar 留空间，由 layout 统一承担 */
  .content { padding-top: 0; }

  .nav {
    width: 100% !important;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px;
    gap: 4px;
  }
  .nav-item { flex-shrink: 0; }
}