/* ==========================================================================
   layout.css — 应用外壳（App Shell）
   桌面：固定左侧栏 + 吸顶工具栏 + 内容区（Grid 两列两行）
   平板：侧栏收成图标轨道
   手机：侧栏变抽屉，底部出现标签栏
   ========================================================================== */

@layer layout {

/* ==========================================================================
   1. 应用外壳网格
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
  min-height: 100dvh;
}

/* 侧栏收起（平板 / 用户手动收起）：只留图标轨道 */
html[data-sidebar="collapsed"] .app {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

/* ==========================================================================
   2. 侧边栏
   ========================================================================== */

.app-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  z-index: var(--z-sticky);
  overflow: hidden;
}

/* ---------- 品牌区 ---------- */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-h);
  padding: 0 var(--space-4);
  flex: none;
  border-bottom: 1px solid var(--color-border);
}

.brand-mark {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  /* 品牌标用固定色，不随主题变化（与 app 图标保持同一观感） */
  background: linear-gradient(135deg, #3b7df0, #1548a1);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: 15px;
  letter-spacing: -0.02em;
}

.brand-text { min-width: 0; }
.brand-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
  line-height: 1.3;
  white-space: nowrap;
}

/* 收起态：隐藏文字，只留图标 */
html[data-sidebar="collapsed"] .app-sidebar .brand-text,
html[data-sidebar="collapsed"] .app-sidebar .nav-label,
html[data-sidebar="collapsed"] .app-sidebar .nav-group-title,
html[data-sidebar="collapsed"] .app-sidebar .nav-badge,
html[data-sidebar="collapsed"] .app-sidebar .sidebar-foot-text { display: none; }

html[data-sidebar="collapsed"] .app-sidebar .sidebar-brand,
html[data-sidebar="collapsed"] .app-sidebar .nav-item,
html[data-sidebar="collapsed"] .app-sidebar .sidebar-foot { justify-content: center; padding-inline: var(--space-2); }

/* ---------- 导航 ---------- */
.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.nav-group + .nav-group { margin-top: var(--space-5); }

.nav-group-title {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  text-transform: uppercase;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav-item:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  text-decoration: none;
}
.nav-item[aria-current="page"],
.nav-item.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--weight-semi);
}

.nav-icon {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}
.nav-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }

.nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-badge {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--danger-50);
  color: var(--danger-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  text-align: center;
}
.nav-badge[data-tone="warning"] { background: var(--warning-50); color: var(--warning-600); }
.nav-badge[data-tone="gold"]    { background: var(--gold-50);    color: var(--gold-700); }

/* 收起态下，徽章变成图标右上角的小圆点 */
html[data-sidebar="collapsed"] .app-sidebar .nav-item { position: relative; }
html[data-sidebar="collapsed"] .app-sidebar .nav-badge {
  display: block;
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
}

/* ---------- 侧栏底部 ---------- */
.sidebar-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sidebar-collapse-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sidebar-collapse-btn:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.sidebar-collapse-btn svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
html[data-sidebar="collapsed"] .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-foot-text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   3. 顶部工具栏
   ========================================================================== */

.app-topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-h);
  padding: 0 var(--space-5);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
/* 不支持 color-mix 的旧内核（部分微信内置浏览器）退回不透明背景 */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .app-topbar { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.topbar-menu-btn {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.topbar-menu-btn:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.topbar-menu-btn svg { width: 20px; height: 20px; }

.topbar-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.topbar-title h1 {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-title p {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-spacer { flex: 1; min-width: var(--space-2); }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

/* 同步状态指示灯 */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.sync-pill:hover { border-color: var(--color-border-strong); }
.sync-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--success-500);
}
.sync-pill[data-state="saving"] .sync-dot { background: var(--warning-500); animation: pulse-dot 1.1s ease-in-out infinite; }
.sync-pill[data-state="error"]  .sync-dot { background: var(--danger-500); }
.sync-pill[data-state="offline"] .sync-dot { background: var(--gray-400); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* 用户菜单 */
.user-menu { position: relative; flex: none; }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-2) 0 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.user-chip:hover { border-color: var(--color-border-strong); }

.user-avatar {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
}

.user-chip-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-role {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}
.user-chip-role[data-role="admin"] { background: var(--brand-50); color: var(--brand-700); }

/* ==========================================================================
   4. 主内容区
   ========================================================================== */

.app-main {
  grid-area: main;
  min-width: 0;
  padding: var(--space-5) var(--space-6) var(--space-10);
  overflow-x: hidden;
}

.view-root {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* 视图切换：淡入 + 轻微上移（不依赖 View Transitions API，兼容性更稳） */
.view-root > .view { animation: view-enter var(--dur-base) var(--ease-out) both; }
@keyframes view-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 页面头（标题 + 操作按钮） ---------- */
.view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.view-head-text { min-width: 0; }
.view-head-text h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  letter-spacing: -0.01em;
}
.view-head-text p {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.view-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- 通用网格 ---------- */
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* 表单单列 + 侧栏说明的双栏布局（设置页） */
.split-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-6);
  align-items: start;
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row-wrap { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.spacer { flex: 1; min-width: var(--space-2); }

/* ==========================================================================
   5. 移动端底部标签栏
   ========================================================================== */

.app-tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.tabbar-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: var(--tabbar-h);
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  transition: color var(--dur-fast) var(--ease-out);
}
.tabbar-item svg { width: 21px; height: 21px; stroke-width: 1.7; }
.tabbar-item.is-active,
.tabbar-item[aria-current="page"] { color: var(--color-primary); }
.tabbar-item:active { background: var(--color-surface-sunken); }

/* 中间"录入"凸起按钮 */
.tabbar-item--accent .tabbar-fab {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -14px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.tabbar-item--accent .tabbar-fab svg { width: 20px; height: 20px; stroke-width: 2.1; }

/* 移动端侧栏遮罩 */
.drawer-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(16, 24, 40, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.drawer-scrim.is-open { display: block; animation: fade-in var(--dur-fast) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   6. 断点适配
   ========================================================================== */

/*
 * 注意这里的区间写法（min-width + max-width 成对出现）：
 * 侧栏收起规则的写法是 `html:not([data-sidebar="expanded"]) .app`，
 * 特异性 (0,2,1) 高于手机端 `.app` 的 (0,1,0)。如果只写 max-width:1180px，
 * 它在 390px 宽度下依然生效，会把手机布局压成「68px 侧栏轨道 + 内容」——
 * 手机上就会出现主内容只有 68px 宽的诡异现象。
 * 因此把平板规则严格限制在 768px 以上，让手机规则独占小屏。
 */

/* --- 平板：默认收起侧栏 --- */
@media (min-width: 768px) and (max-width: 1180px) {
  html:not([data-sidebar="expanded"]) .app {
    grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
  }
  html:not([data-sidebar="expanded"]) .app-sidebar .brand-text,
  html:not([data-sidebar="expanded"]) .app-sidebar .nav-label,
  html:not([data-sidebar="expanded"]) .app-sidebar .nav-group-title,
  html:not([data-sidebar="expanded"]) .app-sidebar .nav-badge,
  html:not([data-sidebar="expanded"]) .app-sidebar .sidebar-foot-text { display: none; }
  html:not([data-sidebar="expanded"]) .app-sidebar .sidebar-brand,
  html:not([data-sidebar="expanded"]) .app-sidebar .nav-item,
  html:not([data-sidebar="expanded"]) .app-sidebar .sidebar-foot { justify-content: center; padding-inline: var(--space-2); }
  html:not([data-sidebar="expanded"]) .app-sidebar .nav-badge {
    display: block;
    position: absolute;
    top: 4px; right: 8px;
    min-width: 8px; height: 8px; padding: 0;
    text-indent: -9999px; overflow: hidden;
  }
  html:not([data-sidebar="expanded"]) .sidebar-collapse-btn svg { transform: rotate(180deg); }
}

/* --- 窄屏公用（平板 + 手机）：表单降为单列 --- */
@media (max-width: 1180px) {
  .split-form { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 手机：侧栏改为抽屉 + 底部标签栏 --- */
@media (max-width: 767px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main";
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(290px, 84vw);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-102%);
    transition: transform var(--dur-slow) var(--ease-out);
    box-shadow: var(--shadow-lg);
    border-right: none;
    /*
     * 抽屉必须高于遮罩（--z-drawer > 遮罩的 drawer-1）。
     * 沿用桌面态的 --z-sticky 时抽屉会沉到遮罩下面：遮罩的暗色 +
     * 毛玻璃会把抽屉一起糊掉，点击也全被遮罩截走——手机上菜单
     * 打开后"整屏模糊、什么都点不了"就是这个原因。
     */
    z-index: var(--z-drawer);
  }
  /* 抽屉打开：移动端一律展开文字，不做图标轨道 */
  .app-sidebar.is-open { transform: none; }
  .app-sidebar .brand-text,
  .app-sidebar .nav-label,
  .app-sidebar .nav-group-title,
  .app-sidebar .sidebar-foot-text { display: block !important; }
  .app-sidebar .nav-badge {
    display: inline-block !important;
    position: static !important;
    min-width: 20px !important;
    height: auto !important;
    padding: 1px 6px !important;
    text-indent: 0 !important;
    overflow: visible !important;
  }
  .app-sidebar .sidebar-brand,
  .app-sidebar .nav-item,
  .app-sidebar .sidebar-foot {
    justify-content: flex-start !important;
    padding-inline: var(--space-3) !important;
  }
  .app-sidebar .sidebar-brand { padding-inline: var(--space-4) !important; }

  .topbar-menu-btn { display: grid; }

  .app-topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar-title p { display: none; }

  .app-main {
    padding: var(--space-4) var(--space-3) calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--space-6));
  }

  .app-tabbar { display: block; }

  .view-head { margin-bottom: var(--space-4); }
  .view-head-text h2 { font-size: var(--text-lg); }
  .view-head-actions { width: 100%; }

  .grid-2, .grid-3, .grid-4, .grid-2-1 { grid-template-columns: minmax(0, 1fr); }
  .sync-pill .sync-text { display: none; }
  .sync-pill { padding: 0 var(--space-2); }
}

/* --- 超窄屏：进一步压缩 --- */
@media (max-width: 400px) {
  .user-chip-name { display: none; }
  .brand-title { font-size: var(--text-sm); }
}

} /* end @layer layout */