/* ============================================================================
 * skin-layout.css —— 青志社团 · 三种「界面排布方案」(v84)
 * ----------------------------------------------------------------------------
 * 【为什么有这份文件】
 * 用户实测反馈：「这三个除了颜色不一样其他的都差不多」。
 * 实测确认根因：v83.1 的 layout-v83.css 给三套皮肤**套了同一套布局**
 * （都是 208px 左侧栏 + 单栏主区），三套之间**只有配色变量不同** ⇒ 肉眼无差别。
 *
 * 【本文件的分工】
 * 只做**布局结构**，配色继续由 layout-v83.css / theme-skins.css 提供。
 * 三套方案在**导航形态 / 内容栅格 / 卡片形态 / 面板标题**四个维度上**结构级不同**：
 *
 *   ① slate 「指挥台」 —— 左侧固定栏 208px + 单栏宽1180px + 横向条形卡 + 小字标题
 *   ② ink   「工作台」 —— 顶部横条 + 分组 + **双栏**（主栏 + 右侧 320px 常驻）+ 带图标大卡
 *   ③ indigo「聚焦」   —— **可折叠窄栏 60px（图标+浮层展开）** + 单栏窄 900px 居中 + 紧凑小卡
 *
 * 【铁律】
 *  - 一切挂在 [data-skin] 上 ⇒ 移除 data-skin 即整套退回 v83.1 原样（"恢复原样"总开关）
 *  - 类名一律 sl- 前缀
 *  - 禁硬编码灰色（一律 var(--tx2)/var(--tx3)/var(--line)）
 *  - ⛔ 不改 styles.css / v797.css / layout-v83.css 任何既有行（追加式）
 *  - ⛔ 不碰 motion.css 的动效类名（mo-view-in / mo-anim-in 必须与 app.js 成对）
 *  - 移动端（<1024px）三套**完全一致**：保持顶栏 + 底部 tabbar 不动
 * ========================================================================== */

/* ============================================================================
 * 公共：三套共用的地基
 * ========================================================================== */

/* —— 卡片高度统一（修「第一张 89px / 其他 75px」不齐问题）——
   根因：首卡多了副标题 <em>看教室与老师</em>，内容多一行 ⇒ 撑高。
   修法：**不删副标题**（那是信息），而是给它预留固定行高，
        并给所有卡同一个 min-height，副标题溢出时用 ellipsis。 */
[data-skin] .stat-card {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
[data-skin] .stat-card .v {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
}
[data-skin] .stat-card .v em {
  font-style: normal;
  font-size: 11px;
  color: var(--tx3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;      /* 允许在 flex 里收缩，这是 ellipsis 生效的前提 */
}
/* 无副标题的卡也保留同样行高 ⇒ 六卡严格等高 */
[data-skin] .stat-card .v { min-height: 22px; }

/* —— 字号层级：数字要比标签大出一档（用户点名"对比不够"）—— */
[data-skin] .stat-card .k { font-size: 11.5px; letter-spacing: .3px; color: var(--tx3); }
[data-skin] .stat-card .v { font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--tx); }
[data-skin] .stat-card .v em { font-weight: 400; }

/* —— 卡片间距 / 圆角 / 内边距节奏统一 —— */
[data-skin] .stat-grid { gap: 10px; }
[data-skin] .panel-body { padding: 14px 16px; }
[data-skin] .panel-head h3 { letter-spacing: .2px; }

/* ============================================================================
 * 方案 ① slate「指挥台」—— 左侧固定栏 + 单栏宽 + 横向条形卡
 * 定位：超管/大主管。一屏能扫最多东西，信息横向铺开。
 * ========================================================================== */
@media (min-width: 1024px) {
  /* 导航：继承 v83.1 的 208px 侧栏，这里只加密行高与加分组视觉 */
  [data-skin="slate"] #nav { gap: 1px !important; padding: 8px 8px 14px; }
  [data-skin="slate"] #nav .navbtn {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 6px;
  }

  /* 内容区：单栏，宽1180，靠密度取胜 */
  [data-skin="slate"] #main > .view { max-width: 1180px; }

  /* 卡片形态：**横向条形卡**（数字在左、标签在右）⇒ 与③ 的竖排大卡结构不同 */
  [data-skin="slate"] .stat-grid {
    grid-template-columns: repeat(3, 1fr) !important;   /* 6 张 → 3×2，比6 列更好读 */
    gap: 8px;
  }
  [data-skin="slate"] .stat-card {
    min-height: 56px;
    flex-direction: row;              /* ★ 横向：与③的纵向形成结构对比 */
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
  }
  [data-skin="slate"] .stat-card .k {
    order: 2;margin: 0; font-size: 12px; flex: none;
    color: var(--tx2);
  }
  [data-skin="slate"] .stat-card .v {
    order: 1; margin: 0; flex: 1; min-height: 0;
    font-size: 20px; align-items: baseline;
  }
  [data-skin="slate"] .stat-card .v em { font-size: 11px; }

  /* 面板标题：小字加粗（紧凑风） */
  [data-skin="slate"] .panel-head h3 { font-size: 13.5px; font-weight: 600; }
  [data-skin="slate"] .panel-head { padding: 9px 14px; }
  [data-skin="slate"] .panel-body { padding: 12px 14px; }

  /* 成员页：一行更紧凑（复用 --row-h 36px） */
  [data-skin="slate"] .mrow { min-height: 36px; }
}

/* ============================================================================
 * 方案 ② ink「工作台」—— 顶部横条 + 分组下拉 + **双栏** + 带图标大卡
 * 定位：社长/部长。左边做事，右边随时看"今天还剩什么"。
 * ★ 这是三套里**唯一真的换栅格结构**的一套。
 * ========================================================================== */
@media (min-width: 1024px) {
  /* 导航形态：**回到顶部横条**（与①的侧栏、③的窄栏都不同）
     做法：把 #app 从 grid 退回 block，让 topbar 恢复成正常的横条 flex。
     这是"取消 v83.1 的侧栏"，不是新增结构。 */
  [data-skin="ink"] #app {
    display: block !important;
  }
  [data-skin="ink"] #app > .topbar {
    display: flex !important;
    position: sticky; top: 0; z-index: 40;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    /* 横条比侧栏矮，把高度还给内容 */
    min-height: 52px;
  }
  /* 横条内导航：横向滚动，不换行成两行（这是 v83.1 要解决的问题，② 换方式解决） */
  [data-skin="ink"] #nav {
    flex: 1;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 3px;
    padding: 0;
    background: transparent;
    border-right: none;
    max-height: none;
    position: static;
    scrollbar-width: none;
    min-width: 0;
  }
  [data-skin="ink"] #nav::-webkit-scrollbar { display: none; }
  [data-skin="ink"] #nav .navbtn {
    width: auto;
    flex: none;
    white-space: nowrap;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;         /* 药丸形，与①的方角、③的图标块都不同 */
    font-size: 13px;
    text-align: center;
  }
  /* 选中态：药丸实心（①是左指示条，③是图标块） */
  [data-skin="ink"] .navbtn.active {
    background: var(--pri) !important;
    color: #fff !important;
    font-weight: 500 !important;
  }
  [data-skin="ink"] .navbtn.active::before { display: none !important; }
  [data-skin="ink"] #app > .topbar > .brand,
  [data-skin="ink"] #app > .topbar > .me {
    background: transparent;
    padding: 0;
    border: none;
    flex: none;
  }

  /* ★★ 双栏：主栏 + 右侧常驻 320px ★★
     用 grid 而非新建 DOM：把已有面板用 grid-column 挪到右栏。
     首页实测子元素顺序：i=0 倒数日面板、 i=1 v797-home-stat-wrap（含 stat-grid 等）
     ⇒ 右侧栏放「倒数日」+「本周忙碌度」，左边放其余。 */
  [data-skin="ink"] #main > .view {
    max-width: 1180px;
  }
  [data-skin="ink"] .view[data-view="home"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-auto-rows: min-content;
    gap: 14px;
    align-items: start;
  }
  /* 右栏：倒数日（i=0）固定占第 2 列第 1 行 */
  [data-skin="ink"] .view[data-view="home"] > *:nth-child(1) {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 66px;                    /* 顶栏高52 + 一点间距 */
  }
  /* 其余全部进左栏 */
  [data-skin="ink"] .view[data-view="home"] > *:nth-child(2) {
    grid-column: 1;
  }
  /* stat-grid 容器内部也要双栏化：6 张卡放左栏上，宽一点 */
  [data-skin="ink"] .view[data-view="home"] > *:nth-child(2) > * {
    min-width: 0;
  }

  /* 卡片形态：**带图标的大卡2×3**（比①的3×2 更大更方） */
  [data-skin="ink"] .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  [data-skin="ink"] .stat-card {
    min-height: 92px;/* ★ 大卡：比①的 56px 高一截 */
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
  }
  /* 用 ::before 挂一个"图标位"：纯 CSS，不新建 DOM */
  [data-skin="ink"] .stat-card::before {
    content: "";
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--pri-soft);
    /* 用四种图形区分四类卡，纯CSS 无图片 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
  }
  [data-skin="ink"] .stat-card:nth-child(1)::before {
    background-image: linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor);
    background-size: 16px 3px, 11px 3px;
    background-position: center 6px, center 12px;
    color: var(--pri);
  }
  [data-skin="ink"] .stat-card:nth-child(2)::before {
    background-image: radial-gradient(circle, currentColor 40%, transparent 42%);
    color: var(--meet);
  }
  [data-skin="ink"] .stat-card:nth-child(3)::before {
    background-image: linear-gradient(currentColor,currentColor);
    background-size: 3px 16px, 16px 3px;
    color: var(--free);
  }
  [data-skin="ink"] .stat-card:nth-child(4)::before,
  [data-skin="ink"] .stat-card:nth-child(5)::before,
  [data-skin="ink"] .stat-card:nth-child(6)::before {
    background-image: linear-gradient(currentColor,currentColor);
    background-size: 14px 4px;
    color: var(--tx3);
  }
  [data-skin="ink"] .stat-card .k { order: 3; font-size: 12px; color: var(--tx2); }
  [data-skin="ink"] .stat-card .v { order: 2; font-size: 26px; font-weight: 600; }
  [data-skin="ink"] .stat-card .v em { order: 4; }

  /* 面板标题：带图标 + 副标题（标题左侧加一条色条当"图标"位） */
  [data-skin="ink"] .panel-head h3 { font-size: 14.5px; font-weight: 600; }
  [data-skin="ink"] .panel-head {
    padding: 12px 16px;
    border-left: 3px solid var(--pri);
  }
  [data-skin="ink"] .panel-body { padding: 14px 16px; }

  [data-skin="ink"] .mrow { min-height: 44px; }
}

/* ============================================================================
 * 方案 ③ indigo「聚焦」—— 可折叠窄栏 60px + 单栏窄 900px + 紧凑小卡
 * 定位：普通成员/游客。内容少，就让内容"浮"在中间，四周留白。
 * ========================================================================== */
@media (min-width: 1024px) {
  /* 导航：**窄图标栏60px**（第三种形态） */
  [data-skin="indigo"] #app {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "brand  main"
      "nav    main"
      "me     main";
  }
  [data-skin="indigo"] #app > .topbar { display: contents !important; }
  [data-skin="indigo"] #app > .topbar > .brand { grid-area: brand; }
  [data-skin="indigo"] #app > .topbar > #nav  { grid-area: nav; }
  [data-skin="indigo"] #app > .topbar > .me    { grid-area: me; }

  [data-skin="indigo"] #nav {
    padding: 8px 6px 14px;
    gap: 4px;
    background: var(--card);
    border-right: 1px solid var(--line);
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: visible;
    position: sticky;
    top: 0;
  }
  /* 窄栏里只显示图标方块：文字压掉，用 hover 浮层显示全名*/
  [data-skin="indigo"] #nav .navbtn {
    width: 48px;
    height: 44px;
    padding: 0;
    justify-content: center !important;
    border-radius: 12px;
    font-size: 0;                 /* ★ 隐藏文字，只留图标块 */
    position: relative;
  }
  /* 用 ::before 生成"图标"：取导航文字的首字，做成方块里的字形
     （不新建 DOM，纯 CSS；首字取自按钮文本，浏览器不支持 attr() 动态取值，
       所以统一用一个中性符号，靠 hover 浮层给出真实名字） */
  [data-skin="indigo"] #nav .navbtn::after {
    content: "●";
    font-size: 13px;
    color: var(--tx3);
    line-height: 1;
  }
  [data-skin="indigo"] #nav .navbtn.active::after { color: #fff; }
  [data-skin="indigo"] #nav .navbtn.active {
    background: var(--pri) !important;
    border-radius: 12px;
  }
  [data-skin="indigo"] .navbtn.active::before { display: none !important; }

  /* 窄栏的 hover 浮层：显示被压掉的真实名字（可读性兜底） */
  [data-skin="indigo"] #nav .navbtn:hover::before {
    content: attr(data-view);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tx);
    color: var(--card);
    font-size: 12px;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1200;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  }
  [data-skin="indigo"] #app > .topbar > .brand,
  [data-skin="indigo"] #app > .topbar > .me {
    background: var(--card);
    padding: 8px;
    justify-content: center;
  }
  [data-skin="indigo"] #app > .topbar > .brand { border-bottom: 1px solid var(--line); }
  [data-skin="indigo"] #app > .topbar > .me { border-top: 1px solid var(--line); }

  /* 内容区：**窄栏 + 居中**，四周大留白（与①的 1180 满宽、②的双栏都不同） */
  [data-skin="indigo"] #main {
    display: flex;
    justify-content: center;
  }
  [data-skin="indigo"] #main > .view {
    max-width: 900px;
    width: 100%;
  }

  /* 卡片形态：**紧凑小卡 3×4**（比①的条形、②的大卡都更碎更小） */
  [data-skin="indigo"] .stat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
  [data-skin="indigo"] .stat-card {
    min-height: 96px;         /* 纵向小卡：窄而高 */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 18px;      /* 大圆角，与①方角、②中圆角都不同 */
  }
  [data-skin="indigo"] .stat-card .k { order: 2; font-size: 12px; color: var(--tx2); }
  [data-skin="indigo"] .stat-card .v { order: 1; font-size: 24px; flex-direction: column; align-items: flex-start; gap: 2px; }
  [data-skin="indigo"] .stat-card .v em { order: 3; font-size: 11.5px; }

  /* 面板标题：大标题 + 说明文字（大留白风） */
  [data-skin="indigo"] .panel-head { padding: 16px 20px 10px; }
  [data-skin="indigo"] .panel-head h3 { font-size: 17px; font-weight: 600; letter-spacing: .3px; }
  [data-skin="indigo"] .panel-head .hint { font-size: 12px; }
  [data-skin="indigo"] .panel-body { padding: 12px 20px 20px; }
  [data-skin="indigo"] .panel + .panel { margin-top: 18px; }

  [data-skin="indigo"] .mrow { min-height: 52px; }
}

/* ============================================================================
 * 移动端（<1024px）：三套**故意保持一致**
 * 理由：390px 放不下侧栏/双栏；且移动端已有底部 tabbar。
 *       若三套在移动端也各自不同，会导致「手机上三套长得一样」的白做。
 * 这里只做**密度**差异（行高/字号），结构一律沿用原有顶栏 + 底部 tab。
 * ========================================================================== */
@media (max-width: 1023px) {
  [data-skin] .stat-card { min-height: 72px; }
  [data-skin] .stat-card .v { font-size: 20px; }
  [data-skin="slate"] .stat-card { min-height: 64px; padding: 8px 12px; }
  [data-skin="slate"] .stat-card .v { font-size: 18px; }
  [data-skin="indigo"] .stat-card { min-height: 80px; padding: 12px; }
  [data-skin="indigo"] .stat-card .v { font-size: 22px; }
  /* 移动端 stat-grid 一律 2 列（styles.css:1121 已有 2 列规则，这里保证三套一致） */
  [data-skin] .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================================
 * 减弱动效：三套的 hover 浮层不该有动画
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-skin] .stat-card,
  [data-skin] .navbtn,
  [data-skin] .panel {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
 * 打印：窄栏/侧栏都没意义
 * ========================================================================== */
@media print {
  [data-skin] #nav,
  [data-skin] #app > .topbar > .me { display: none !important; }
  [data-skin] #app { display: block !important; }
  [data-skin] #main > .view { max-width: none !important; }
}