/* ==========================================================================
   卡片组件 (Card Component)
   用于承载内容块，是服务器端渲染页面中最常用的布局单元。
   支持 Header / Body / Footer 三段式结构，可组合工具栏、统计、字段列表等子元素。
   ========================================================================== */

.zuoekai-card {
  display: flex;
  flex-direction: column;
  position: relative;
  
  background: var(--zuoekai-color-surface-panel);
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-lg);
  box-shadow: var(--zuoekai-shadow-sm);
  
  transition: 
    box-shadow var(--zuoekai-motion-duration-normal) var(--zuoekai-motion-ease-out),
    border-color var(--zuoekai-motion-duration-normal) var(--zuoekai-motion-ease-out);
}

/* 悬浮增强变体：鼠标悬停时加深阴影和边框，用于可交互卡片 */
.zuoekai-card--hoverable:hover {
  box-shadow: var(--zuoekai-shadow-md);
  border-color: var(--zuoekai-color-border-strong);
}

/* 卡片头部：标题 + 副标题 + 操作区 */
.zuoekai-card__header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top-left-radius: var(--zuoekai-radius-lg);
  border-top-right-radius: var(--zuoekai-radius-lg);
}

.zuoekai-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--zuoekai-color-text);
  line-height: 1.4;
}

.zuoekai-card__subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--zuoekai-color-text-secondary);
  font-weight: 400;
}

/* 卡片主体：内容区域，flex: 1 使其在固定高度卡片中自动填充 */
.zuoekai-card__body {
  padding: 6px;
  flex: 1;
  color: var(--zuoekai-color-text);
  font-size: 14px;
  line-height: 1.6;
}

.zuoekai-card__body--no-top-padding {
  padding-top: 0;
}

/* 卡片主体 - 贴边变体：去除内边距，适用于表格/列表等需要撑满宽度的场景 */
.zuoekai-card__body--flush {
  padding: 0;
}

/* 卡片主体 - 居中变体：内容水平+垂直居中（适用于打卡按钮等场景） */
.zuoekai-card__body--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

/* 卡片主体 - 填充变体：用于 header / footer 固定、body 内部滚动的单卡片场景 */
.zuoekai-card__body--fill {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* 媒体预览容器：适用于摄像头、截图、封面等 16:9 画面承载场景 */
.zuoekai-card__media-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-lg);
  background: rgba(0, 0, 0, 0.6);
}

/* 媒体元素：默认铺满容器并裁切，适用于 video / img / iframe 等 */
.zuoekai-card__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 填充 body 下的滚动区自动吃满剩余空间 */
.zuoekai-card__body--fill > .zuoekai-scrollable {
  flex: 1;
  min-height: 0;
}

/* 卡片内容骨架：适用于 header 后直接接 form / div 容器的纵向填充结构 */
.zuoekai-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* 卡片底部：操作按钮区域，默认右对齐 */
.zuoekai-card__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--zuoekai-color-border);
  background: var(--zuoekai-color-surface-page); /* Slight contrast for footer */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Actions usually right-aligned */
  gap: 12px;
  border-bottom-left-radius: var(--zuoekai-radius-lg);
  border-bottom-right-radius: var(--zuoekai-radius-lg);
}

/* 透明底部变体：去掉底部背景色 */
.zuoekai-card__footer--transparent {
  background: transparent;
}

/* 分栏底部：两组操作区各占一侧（左侧主操作 / 右侧危险操作） */
.zuoekai-card__footer--split {
  justify-content: space-between;
}

/* 居中底部变体：内容水平居中（适用于日期/时间标签等场景） */
.zuoekai-card__footer--center {
  justify-content: center;
}

/* 单卡片满屏：用于单页主卡片，需要 header/footer 固定、body 内部滚动的场景 */
.zuoekai-card--viewport-fill {
  height: calc(100dvh - var(--zuoekai-card-viewport-offset, 138px));
  min-height: 0;
  overflow: hidden;
}

/* 描述文本：位于卡片内部，次要辅助信息 */
.zuoekai-card__desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--zuoekai-color-text-secondary);
}

/* 描述文本 - 居中：适用于按钮说明、弹窗状态说明等轻提示场景 */
.zuoekai-card__desc--center {
  text-align: center;
}

/* 描述文本 - 警告：适用于跨午夜提醒、权限提示等轻警告场景 */
.zuoekai-card__desc--warning {
  color: var(--zuoekai-color-warning-600);
  font-weight: 500;
}

/* 主内容区：图标 + 标题组的水平容器 */
.zuoekai-card__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

/* 标题组：标题 + 眉题 + 元信息的纵向容器 */
.zuoekai-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

/* 眉题：标题上方的小号分类标签 */
.zuoekai-card__eyebrow {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--zuoekai-color-text-secondary);
}

/* 标题文本：单行溢出省略 */
.zuoekai-card__title-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 元信息行：更新时间、作者等辅助信息 */
.zuoekai-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--zuoekai-color-text-secondary);
  white-space: nowrap;
}

/* 元信息图标 */
.zuoekai-card__meta-icon {
  width: 16px;
  height: 16px;
  flex: none;
  stroke-width: 2;
}

/* 工具栏：标题区与操作区的水平分隔容器，width:100% 确保在 header flex 容器内撑满全宽 */
.zuoekai-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* 工具栏分支：在小屏下仍保持主内容区与操作区同行，适用于右侧按钮/图标类操作 */
.zuoekai-card__toolbar--inline-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.zuoekai-card__toolbar--inline-actions .zuoekai-card__actions,
.zuoekai-card__toolbar--inline-actions .zuoekai-card__tags {
  flex-shrink: 0;
  justify-self: end;
  align-self: center;
}

/* 操作区：按钮组，默认右对齐 */
.zuoekai-card__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* 标签区：标签组，默认右对齐 */
.zuoekai-card__tags {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* 图标包裹：圆角方形的图标容器 */
.zuoekai-card__icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: var(--zuoekai-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--zuoekai-color-surface-page);
  color: var(--zuoekai-color-text-secondary);
}

/* 图标：统一尺寸的 SVG 图标 */
.zuoekai-card__icon {
  width: 18px;
  height: 18px;
  flex: none;
  stroke-width: 2;
}

/* 分区：卡片内部可堆叠的独立内容块，相邻分区自动添加分隔线 */
.zuoekai-card__section {
  padding: 16px;
}

.zuoekai-card__section + .zuoekai-card__section {
  border-top: 1px solid var(--zuoekai-color-border);
}

/* 字段列表：纵向排列的 key-value 行 */
.zuoekai-card__row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 字段行：左标签右数值的水平布局 */
.zuoekai-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

/* 字段标签：次要色 */
.zuoekai-card__row-label {
  min-width: 0;
  color: var(--zuoekai-color-text-secondary);
}

/* 字段值：加粗主色 */
.zuoekai-card__row-value {
  min-width: 0;
  text-align: right;
  font-weight: 600;
  color: var(--zuoekai-color-text);
}

/* 统计网格：用于多个统计块的网格布局 */
.zuoekai-card__stats {
  display: grid;
  gap: 16px;
}

/* 统计网格 - 两列 */
.zuoekai-card__stats--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 统计网格 - 三列（适用于假日银行等三项指标场景） */
.zuoekai-card__stats--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 统计网格 - 四列 */
.zuoekai-card__stats--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 统计网格 - 六列（适用于工时概览等多指标横排场景） */
.zuoekai-card__stats--6col {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 统计块：带边框和圆角的独立数值展示区 */
.zuoekai-card__stat {
  padding: 16px;
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-md);
  background: var(--zuoekai-color-surface-page);
}

/* 统计块 - 居中对齐 */
.zuoekai-card__stat--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 统计标签 */
.zuoekai-card__stat-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--zuoekai-color-text-secondary);
}

/* 统计数值：大号加粗 */
.zuoekai-card__stat-value {
  margin-top: 4px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--zuoekai-color-text);
}

/* 统计备注：数值下方的单位或补充说明 */
.zuoekai-card__stat-note {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--zuoekai-color-text-secondary);
}

/* 卡片空状态容器：用于卡片内部的无数据、待同步等场景，统一留白节奏 */
.zuoekai-card__empty {
  padding: 24px 0;
}

/* 卡片链接：继承颜色，悬停变品牌色 */
.zuoekai-card__link {
  color: inherit;
  text-decoration: none;
}

.zuoekai-card__link:hover {
  color: var(--zuoekai-color-brand-600);
}

/* 语义色图标：用于卡片内图标在不依赖内联 style 的情况下表达不同业务语义 */
.zuoekai-card__icon--info { color: var(--zuoekai-color-info-600); }
.zuoekai-card__icon--success { color: var(--zuoekai-color-success-600); }
.zuoekai-card__icon--warning { color: var(--zuoekai-color-warning-600); }
.zuoekai-card__icon--purple { color: var(--zuoekai-color-purple-500, #9333ea); }

/* 卡片组布局：用于指标卡组、排行卡组等多张卡片的统一排布 */
.zuoekai-card-group {
  display: grid;
  gap: 16px;
}

/* 四列指标卡组：桌面端四列，适合实时指标场景 */
.zuoekai-card-group--metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 排名卡组：桌面端四列，兼容较短的数据摘要卡 */
.zuoekai-card-group--rank {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 余额卡组：桌面端三列，适合可用余额/冻结余额/待结算等并列展示 */
.zuoekai-card-group--balance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ==========================================================================
   卡片变体 (Card Variants)
   ========================================================================== */

/* 扁平变体：去阴影、保留边框，用于嵌套或密集布局 */
.zuoekai-card--flat {
  box-shadow: none;
  border-color: var(--zuoekai-color-border);
}

/* 强调色变体：左侧彩色边框 + 浅色背景，用于业务语义区分 */
.zuoekai-card--accent-blue   { background: var(--zuoekai-color-blue-50, #eff6ff);  border-left: 3px solid var(--zuoekai-color-blue-500, #3b82f6); }
.zuoekai-card--accent-green  { background: var(--zuoekai-color-green-50, #f0fdf4); border-left: 3px solid var(--zuoekai-color-green-500, #22c55e); }
.zuoekai-card--accent-yellow { background: var(--zuoekai-color-yellow-50, #fefce8); border-left: 3px solid var(--zuoekai-color-yellow-500, #eab308); }
.zuoekai-card--accent-purple { background: var(--zuoekai-color-purple-50, #faf5ff); border-left: 3px solid var(--zuoekai-color-purple-500, #a855f7); }

/* --------------------------------------------------------------------------
   横幅头部变体 (Header Banner)
   头部使用品牌渐变背景 + 白色文字，适用于视觉重点卡片（如打卡、账户总览）。
   自动跟随 data-zuoekai-theme 切换渐变配色。
   -------------------------------------------------------------------------- */

/* 含横幅头部的卡片 - 整体阴影增强，营造悬浮灵动感 */
.zuoekai-card:has(.zuoekai-card__header--banner) {
  box-shadow: var(--zuoekai-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.10));
  overflow: hidden;
  transition:
    box-shadow var(--zuoekai-motion-duration-normal) var(--zuoekai-motion-ease-out),
    transform var(--zuoekai-motion-duration-normal) var(--zuoekai-motion-ease-out);
}

/* 含横幅头部的卡片 - 悬浮时微上浮 + 阴影加深 */
.zuoekai-card:has(.zuoekai-card__header--banner):hover {
  box-shadow: var(--zuoekai-shadow-brand-glow, 0 10px 22px rgba(79, 70, 229, 0.28));
  transform: translateY(-2px);
}

/* 横幅头部 - 渐变背景 + 白色文字 + 强阴影 */
.zuoekai-card__header--banner {
  background: var(--zuoekai-gradient-primary);
  border-bottom: none;
  color: #fff;
  padding: 20px 24px 32px;           /* 底部留出额外空间，供 body 向上覆盖 */
  position: relative;
  box-shadow:
    0 6px 20px rgba(79, 70, 229, 0.35),   /* 品牌色扩散阴影 */
    0 2px 6px rgba(0, 0, 0, 0.12);         /* 底部硬阴影增强立体感 */
}

/* 横幅头部 - 紧随其后的内容区域：白色卡片覆盖 banner 底部，形成层叠冲击感 */
/* 兼容 header 后直接跟 form 包裹（如配置卡片 header → form → body 结构） */
/* z-index: 0 与 position: relative 共同建立堆叠上下文，确保内部 dropdown panel (z=1200)
   明确高于同级 table-container，解决排序图标穿透到 dropdown 面板内的问题 */
.zuoekai-card__header--banner + .zuoekai-card__body,
.zuoekai-card__header--banner + .zuoekai-card__section,
.zuoekai-card__header--banner + form {
  position: relative;
  z-index: 1;
  margin-top: -12px;                 /* 向上覆盖 banner 底部 */
  border-top-left-radius: var(--zuoekai-radius-lg);
  border-top-right-radius: var(--zuoekai-radius-lg);
  background: var(--zuoekai-color-surface-panel);
  box-shadow:
    0 -6px 16px rgba(0, 0, 0, 0.12),   /* 主向上阴影：白色卡片悬浮感 */
    0 -2px 4px rgba(0, 0, 0, 0.06);     /* 近距硬阴影：强化边缘分离 */
}

/* 横幅头部 - body 内嵌表格容器：恢复顶部圆角，与 body 的 border-radius 保持一致 */
.zuoekai-card__header--banner + .zuoekai-card__body > .zuoekai-table-container:first-child {
  border-top-left-radius: var(--zuoekai-radius-lg);
  border-top-right-radius: var(--zuoekai-radius-lg);
}

/* 横幅头部 - 标题白色覆盖 */
.zuoekai-card__header--banner .zuoekai-card__title {
  color: #fff;
}

/* 横幅头部 - 副标题半透明白色 */
.zuoekai-card__header--banner .zuoekai-card__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* 横幅头部 - 眉标签半透明白色 */
.zuoekai-card__header--banner .zuoekai-card__eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

/* 横幅头部 - 元信息半透明白色 */
.zuoekai-card__header--banner .zuoekai-card__meta {
  color: rgba(255, 255, 255, 0.75);
}

/* 横幅头部 - 操作区文字/链接白色 */
.zuoekai-card__header--banner .zuoekai-card__actions {
  color: rgba(255, 255, 255, 0.9);
}

/* 横幅头部 - 图标包裹：半透明白色背景 */
.zuoekai-card__header--banner .zuoekai-card__icon-wrap {
  background: rgba(255, 255, 255, 0.15);
}

/* 横幅头部 - 图标白色 */
.zuoekai-card__header--banner .zuoekai-card__icon {
  color: #fff;
}

/* 横幅头部 - 内部按钮：白色半透明风格 */
.zuoekai-card__header--banner .zuoekai-button {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.zuoekai-card__header--banner .zuoekai-button:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
}

/* 横幅头部 - 内部 tag：白色半透明风格 */
.zuoekai-card__header--banner .zuoekai-tag {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* ==========================================================================
   卡片网格布局 (Card Grid)
   ========================================================================== */
.zuoekai-card-grid {
  display: grid;
  gap: 16px;
}

.zuoekai-card-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* 卡片网格 - 三列（桌面端三列，平板两列，手机单列） */
.zuoekai-card-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.zuoekai-panel-content:has(> .zuoekai-card-grid--3col-fill) {
  height: calc(100dvh - 24px);
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.zuoekai-card-grid--3col-fill {
  flex: 1;
  min-height: 0;
}

.zuoekai-card-grid--3col-fill > .zuoekai-card {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.zuoekai-card-grid--3col-fill > .zuoekai-card > .zuoekai-card__body {
  flex: 1;
  min-height: 0;
}

/* 卡片网格 - 四列（桌面端四列，平板两列，手机单列） */
.zuoekai-card-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .zuoekai-card-grid--3col,
  .zuoekai-card-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .zuoekai-card-grid--mobile-keep-3col {
    grid-template-columns: repeat(3, 1fr);
  }

  .zuoekai-card-grid--mobile-keep-4col {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .zuoekai-card-grid--2col,
  .zuoekai-card-grid--3col,
  .zuoekai-card-grid--4col {
    grid-template-columns: 1fr;
  }

  .zuoekai-card-grid--mobile-keep-2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .zuoekai-card-grid--mobile-keep-3col {
    grid-template-columns: repeat(3, 1fr);
  }

  .zuoekai-card-grid--mobile-keep-4col {
    grid-template-columns: repeat(4, 1fr);
  }

  .zuoekai-panel-content:has(> .zuoekai-card-grid--3col-fill) {
    height: auto;
  }

  .zuoekai-card-grid--3col-fill {
    flex: none;
  }

  .zuoekai-card-grid--3col-fill > .zuoekai-card > .zuoekai-card__body {
    max-height: var(--zuoekai-card-grid-fill-mobile-max-height, 300px);
  }
}

/* ==========================================================================
   响应式规则 (Responsive)
   ========================================================================== */

/* 平板 (<= 768px)：缩小内边距、工具栏纵向排列 */
@media (max-width: 768px) {
  .zuoekai-card {
    border-radius: var(--zuoekai-radius-md);
  }
  
  .zuoekai-card__header,
  .zuoekai-card__body,
  .zuoekai-card__footer {
    padding: 16px;
  }
  
  .zuoekai-card__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  
  
  .zuoekai-card__actions,
  .zuoekai-card__tags {
    justify-content: flex-start;
  }

  .zuoekai-card__toolbar--inline-actions {
    align-items: center;
  }

  .zuoekai-card__toolbar--inline-actions .zuoekai-card__main {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  .zuoekai-card__toolbar--inline-actions .zuoekai-card__actions,
  .zuoekai-card__toolbar--inline-actions .zuoekai-card__tags {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  
  .zuoekai-card__stats--3col,
  .zuoekai-card__stats--4col,
  .zuoekai-card__stats--6col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zuoekai-card__stats--mobile-keep-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zuoekai-card__stats--mobile-keep-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zuoekai-card__stats--mobile-keep-4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .zuoekai-card__stats--mobile-keep-6col {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  .zuoekai-card__legend {
    column-gap: 12px;
  }
  
  .zuoekai-card__chart {
    min-height: 280px;
  }
  
  .zuoekai-card-group--metrics,
  .zuoekai-card-group--rank,
  .zuoekai-card-group--balance,
  .zuoekai-card__stats--4col,
  .zuoekai-card__stats--6col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .zuoekai-card-group--metrics,
  .zuoekai-card-group--rank,
  .zuoekai-card-group--balance,
  .zuoekai-card__stats--2col,
  .zuoekai-card__stats--3col,
  .zuoekai-card__stats--4col,
  .zuoekai-card__stats--6col {
    grid-template-columns: 1fr;
  }

  .zuoekai-card__stats--mobile-keep-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zuoekai-card__stats--mobile-keep-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zuoekai-card__stats--mobile-keep-4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .zuoekai-card__stats--mobile-keep-6col {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  .zuoekai-card__legend {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   信息卡组 (Card Group - Info)
   桌面端双列网格，适合运营页"信息概览"等多模块豆腐块并排展示
   ========================================================================== */
.zuoekai-card-group--info {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ==========================================================================
   详情卡片变体 (Card - Detail)
   用于模块信息豆腐块场景：上方标题+操作，下方字段列表或统计区
   主要特征：等高伸展、头部/内容纵向分层、字段行紧凑、统计块高亮
   ========================================================================== */

/* 根容器：等高 + 纵向弹性布局 */
.zuoekai-card--detail {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 头部区域：标题与操作按钮的间距和对齐 */
.zuoekai-card--detail > .zuoekai-card__section:first-child {
  padding-bottom: 12px;
}

.zuoekai-card--detail .zuoekai-card__toolbar {
  align-items: flex-start;
  gap: 12px;
}

/* 操作按钮最小宽度，避免文字被挤压 */
.zuoekai-card--detail .zuoekai-card__actions .zuoekai-button {
  min-width: 72px;
}

/* 内容区域：自适应填充剩余空间 */
.zuoekai-card__detail-body {
  display: flex;
  flex: 1;
  align-items: stretch;
  padding-top: 12px;
}

/* 字段列表：紧凑行间距 */
.zuoekai-card--detail .zuoekai-card__row-list {
  flex: 1;
  gap: 10px;
}

/* 字段行：垂直居中、最小高度保持一致 */
.zuoekai-card--detail .zuoekai-card__row {
  align-items: center;
  min-height: 28px;
}

/* 字段标签：次要色，弱化标签突出数值 */
.zuoekai-card--detail .zuoekai-card__row-label {
  color: var(--zuoekai-color-text-secondary);
}

/* 字段值：加粗，强调数据 */
.zuoekai-card--detail .zuoekai-card__row-value {
  font-weight: 600;
}

/* --- 详情卡片 - 统计网格（适用于违规扣分等左列表+右高亮块场景） --- */

/* 左侧字段列表与右侧统计块按 1.4:1 比例排列，保持视觉平衡 */
.zuoekai-card--detail .zuoekai-card__stats--2col {
  align-items: stretch;
  gap: 14px;
  grid-template-columns: minmax(0, 1.4fr) minmax(104px, 1fr);
}

/* 高亮统计块：居中、圆角面板、柔和边框 */
.zuoekai-card--detail .zuoekai-card__stat--center {
  min-height: 100%;
  justify-content: center;
  padding: 12px;
  border-radius: 14px;
  background: var(--zuoekai-color-surface-page);
  border: 1px solid var(--zuoekai-color-border);
}

/* 统计数值放大，视觉聚焦 */
.zuoekai-card--detail .zuoekai-card__stat-value {
  font-size: 2rem;
}

/* --- 详情卡片 - 违规扣分子变体 --- */
/* 违规卡的操作按钮去阴影，降低视觉干扰 */
.zuoekai-card--detail-penalties .zuoekai-card__actions .zuoekai-button {
  box-shadow: none;
}

/* ==========================================================================
   卡片组 & 详情卡片 - 响应式规则
   ========================================================================== */

/* 平板（<= 767px）：信息卡组单列、详情卡片工具栏纵向排列 */
@media (max-width: 767px) {
  .zuoekai-card-group--info {
    grid-template-columns: 1fr;
  }

  /* 详情卡片工具栏：操作区整行展示 */
  .zuoekai-card--detail .zuoekai-card__toolbar {
    align-items: stretch;
  }

  .zuoekai-card--detail .zuoekai-card__actions {
    width: 100%;
  }

  .zuoekai-card--detail .zuoekai-card__actions .zuoekai-button {
    width: 100%;
    justify-content: center;
  }

  /* 详情卡片统计网格：单列回落 */
  .zuoekai-card--detail .zuoekai-card__stats--2col {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   动作卡片变体 (Card Action)
   用于帮助中心、功能入口等可点击"豆腐块"场景。
   渐变背景 + 图标方块 + 标题/描述，悬浮时加深阴影。
   提供 indigo / green / purple / amber 四种色彩方案。
   ========================================================================== */

/* 动作卡片 - 基础样式 */
.zuoekai-card--action {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--zuoekai-radius-lg);
  border: 1px solid var(--zuoekai-color-border);
  background: var(--zuoekai-color-surface-panel);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    box-shadow var(--zuoekai-motion-duration-normal) var(--zuoekai-motion-ease-out),
    transform var(--zuoekai-motion-duration-normal) var(--zuoekai-motion-ease-out),
    border-color var(--zuoekai-motion-duration-normal) var(--zuoekai-motion-ease-out);
}

.zuoekai-card--action:hover {
  box-shadow: var(--zuoekai-shadow-md);
  transform: translateY(-1px);
}

/* 动作卡片 - 头部：图标 + 标题水平排列 */
.zuoekai-card__action-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 动作卡片 - 图标容器：渐变方块 */
.zuoekai-card__action-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--zuoekai-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.zuoekai-card__action-icon svg {
  width: 20px;
  height: 20px;
}

/* 动作卡片 - 标题 */
.zuoekai-card__action-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--zuoekai-color-text);
  line-height: 1.4;
  transition: color var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out);
}

/* 动作卡片 - 描述 */
.zuoekai-card__action-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--zuoekai-color-text-secondary);
}

/* --- 动作卡片颜色方案 --- */

/* Indigo（靛蓝）：工时计算等偏数据分析场景 */
.zuoekai-card--action-indigo {
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  border-color: #c7d2fe;
}
.zuoekai-card--action-indigo .zuoekai-card__action-icon {
  background: linear-gradient(135deg, #6366f1 0%, #9333ea 100%);
}
.zuoekai-card--action-indigo:hover .zuoekai-card__action-title {
  color: #4f46e5;
}

/* Green（绿色）：休息申请等偏流程操作场景 */
.zuoekai-card--action-green {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: #bbf7d0;
}
.zuoekai-card--action-green .zuoekai-card__action-icon {
  background: linear-gradient(135deg, #22c55e 0%, #059669 100%);
}
.zuoekai-card--action-green:hover .zuoekai-card__action-title {
  color: #16a34a;
}

/* Purple（紫色）：假日银行等偏资产管理场景 */
.zuoekai-card--action-purple {
  background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%);
  border-color: #e9d5ff;
}
.zuoekai-card--action-purple .zuoekai-card__action-icon {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
}
.zuoekai-card--action-purple:hover .zuoekai-card__action-title {
  color: #9333ea;
}

/* Amber（琥珀）：工时银行等偏时间管理场景 */
.zuoekai-card--action-amber {
  background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%);
  border-color: #fde68a;
}
.zuoekai-card--action-amber .zuoekai-card__action-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}
.zuoekai-card--action-amber:hover .zuoekai-card__action-title {
  color: #d97706;
}