/* ==========================================================================
 * workbench/index.css —— 首页工作台（v0.6.2 毛玻璃新视觉）
 *
 * 布局（自上而下）：公告轮播 → Tab+时钟 → 问候横幅 → 待办 4 列 →
 * 快捷入口（财务分组 / 通用 8 入口）→ 消息通知 + OKR/智能日历骨架。
 * 纪律：只消费 CSS 变量（--yx-* / --theme-* / v062 规范别名 --primary 等），
 *       禁止硬编码色值与 z-index 数字。
 * ==========================================================================
 */

/* ---------- 公告轮播（静态占位，h-10 全宽毛玻璃条） ---------- */
.yx-wb-notice {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x3);
  height: 40px;
  padding: 0 var(--yx-spacing-x4);
  margin-bottom: var(--yx-spacing-x6);
  /* 原型：60% 白底 + 仅底部分割线 */
  border-bottom: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.6);
}

.yx-wb-notice__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--primary);
}

.yx-wb-notice__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* v0.7.2 MSG-01：点击横幅弹公告详情 */
  cursor: pointer;
}

.yx-wb-notice__text {
  margin: 0;
  font-size: var(--yx-font-size-xs);
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--yx-motion-duration-slow)
    var(--yx-motion-easing-standard);
}

.yx-wb-notice__text.is-fading {
  opacity: 0;
}

.yx-wb-notice__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: var(--yx-spacing-x1);
  border-radius: var(--yx-radius-nav);
  color: var(--text-muted);
  cursor: pointer;
}

.yx-wb-notice__close:hover {
  background: var(--yx-color-bg-subtle);
  color: var(--text-main);
}

/* ---------- Tab 条 + 系统时间 ---------- */
.yx-wb-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yx-spacing-x4);
  margin-bottom: var(--yx-spacing-x6);
}

.yx-wb-tabs {
  margin: 0;
}

.yx-wb-tabs .yx-page-tabs__link {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--yx-spacing-x2) var(--yx-spacing-x4);
}

/* 激活态主色底白字（对本文件 transparent 复位提级，确保生效） */
.yx-wb-tabs .yx-page-tabs__link.is-active {
  background: var(--primary);
  color: var(--yx-color-brand-on-primary);
  box-shadow: var(--yx-shadow-button);
}

.yx-wb-clock {
  font-size: var(--yx-font-size-xs);
  color: var(--text-muted);
  font-variant-numeric: var(--yx-font-variantNumeric);
}

/* ---------- 问候横幅 ---------- */
.yx-workbench {
  display: flex;
  flex-direction: column;
  /* 大区块间距 32px（原型 space-y-8） */
  gap: var(--yx-spacing-x8);
}

.yx-wb-banner {
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(var(--primary-rgb), 0.08),
      transparent 55%
    ),
    var(--card-bg);
}

.yx-wb-banner__label {
  margin: 0 0 var(--yx-spacing-x1);
  font-size: 10px;
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.yx-wb-banner__greeting {
  margin: 0;
  font-size: var(--yx-font-size-4xl);
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.yx-wb-banner__date {
  margin: var(--yx-spacing-x2) 0 0;
  font-size: var(--yx-font-size-xs);
  color: var(--text-muted);
}

/* ---------- 分区通用 ---------- */
/* components.css 的 .yx-card 含 display:flex+align-items:center（卡片面板专用），
   工作台内容卡复位为块级布局 */
.yx-wb-banner,
.yx-wb-panel,
.yx-wb-finance__group {
  display: block;
  text-align: left;
}

.yx-wb-section {
  display: flex;
  flex-direction: column;
  /* 卡片内区块间距 24px（原型 space-y-6） */
  gap: var(--yx-spacing-x6);
}

.yx-wb-section__header {
  display: flex;
  align-items: baseline;
  gap: var(--yx-spacing-x2);
}

.yx-wb-section__title {
  margin: 0;
  font-size: var(--yx-font-size-sm);
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-main);
}

.yx-wb-section__tag {
  font-size: 10px;
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.yx-wb-empty {
  margin: 0;
  padding: var(--yx-spacing-x6);
  border: 1px dashed var(--card-border);
  border-radius: var(--yx-radius-card);
  font-size: var(--yx-font-size-xs);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- 待办卡片（4 列） ---------- */
.yx-wb-todo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 卡片间距统一 24px（原型 gap-6） */
  gap: var(--yx-spacing-x6);
}

.yx-wb-todo-card {
  display: flex;
  flex-direction: column;
  gap: var(--yx-spacing-x2);
  /* 卡片内边距统一 24px（原型 p-6） */
  padding: var(--yx-spacing-x6);
  border: 1px solid var(--card-border);
  border-radius: var(--yx-radius-card);
  background: var(--card-bg);
  box-shadow: var(--yx-shadow-card);
  cursor: pointer;
  transition:
    border-color var(--yx-motion-duration-slow) var(--yx-motion-easing-standard),
    box-shadow var(--yx-motion-duration-slow) var(--yx-motion-easing-standard),
    transform var(--yx-motion-duration-slow) var(--yx-motion-easing-standard);
}

.yx-wb-todo-card:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.1);
  transform: translateY(-1px);
}

.yx-wb-todo-card--disabled {
  cursor: default;
  opacity: 0.6;
}

.yx-wb-todo-card--disabled:hover {
  border-color: var(--card-border);
  box-shadow: var(--yx-shadow-card);
  transform: none;
}

.yx-wb-todo-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yx-spacing-x2);
}

.yx-wb-todo-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--yx-radius-nav);
  /* 原型：10% 主色底 */
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.yx-wb-todo-card__count {
  font-size: var(--yx-font-size-3xl);
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-main);
  font-variant-numeric: var(--yx-font-variantNumeric);
  line-height: var(--yx-lineHeight-tight);
}

.yx-wb-todo-card__name {
  font-size: var(--yx-font-size-xs);
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-body);
}

/* 预算执行率进度条（阈值色：>80% 黄、>100% 红） */
.yx-wb-todo-card__bar {
  height: 6px;
  border-radius: 3px;
  /* 原型轨道：4% 黑 */
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.yx-wb-todo-card__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width var(--yx-motion-duration-slow)
    var(--yx-motion-easing-standard);
}

.yx-wb-todo-card__bar-fill.is-warning {
  background: var(--yx-color-functional-warning-solid);
}

.yx-wb-todo-card__bar-fill.is-danger {
  background: var(--yx-color-functional-danger-solid);
}

.yx-wb-todo-card__hint {
  font-size: 10px;
  color: var(--text-muted);
}

/* ---------- 快捷入口：通用 8 入口 ---------- */
.yx-wb-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--yx-spacing-x6);
}

.yx-wb-shortcut {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--yx-spacing-x3);
  padding: var(--yx-spacing-x6);
  border: 1px solid var(--card-border);
  border-radius: var(--yx-radius-card);
  background: var(--card-bg);
  box-shadow: var(--yx-shadow-card);
  cursor: pointer;
  transition:
    border-color var(--yx-motion-duration-slow) var(--yx-motion-easing-standard),
    box-shadow var(--yx-motion-duration-slow) var(--yx-motion-easing-standard),
    transform var(--yx-motion-duration-slow) var(--yx-motion-easing-standard);
}

.yx-wb-shortcut:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.1);
  transform: translateY(-1px);
}

.yx-wb-shortcut--disabled {
  cursor: default;
  opacity: 0.6;
}

.yx-wb-shortcut--disabled:hover {
  border-color: var(--card-border);
  box-shadow: var(--yx-shadow-card);
  transform: none;
}

.yx-wb-shortcut__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--yx-radius-button);
  /* 原型：8% 主色底，hover 变主色 100% */
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  transition:
    background var(--yx-motion-duration-base) var(--yx-motion-easing-standard),
    color var(--yx-motion-duration-base) var(--yx-motion-easing-standard);
}

.yx-wb-shortcut:hover .yx-wb-shortcut__icon {
  background: var(--primary);
  color: var(--yx-color-brand-on-primary);
}

.yx-wb-shortcut__title {
  font-size: var(--yx-font-size-xs);
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-main);
}

.yx-wb-shortcut__desc {
  font-size: 10px;
  color: var(--text-muted);
}

/* ---------- 快捷入口：财务分组卡片 ---------- */
.yx-wb-finance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--yx-spacing-x6);
}

.yx-wb-finance__group-title {
  margin: 0 0 var(--yx-spacing-x3);
  font-size: 10px;
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.yx-wb-finance__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--yx-spacing-x2);
}

.yx-wb-finance__item {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x2);
  padding: var(--yx-spacing-x2) var(--yx-spacing-x3);
  border-radius: var(--yx-radius-nav);
  transition:
    background var(--yx-motion-duration-base) var(--yx-motion-easing-standard),
    color var(--yx-motion-duration-base) var(--yx-motion-easing-standard);
}

.yx-wb-finance__item:hover {
  background: var(--yx-color-bg-subtle);
  color: var(--primary);
}

.yx-wb-finance__item-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--primary);
}

.yx-wb-finance__item-name {
  font-size: var(--yx-font-size-xs);
  font-weight: var(--yx-font-weight-bold);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yx-wb-finance__item:hover .yx-wb-finance__item-name {
  color: var(--primary);
}

/* ---------- 消息通知 + OKR/智能日历 ---------- */
.yx-wb-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--yx-spacing-x6);
}

.yx-wb-duo__stack {
  display: flex;
  flex-direction: column;
  gap: var(--yx-spacing-x6);
}

.yx-wb-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--yx-spacing-x3);
}

.yx-wb-panel__more {
  font-size: var(--yx-font-size-xs);
  font-weight: var(--yx-font-weight-bold);
  color: var(--primary);
}

.yx-wb-panel__more:hover {
  text-decoration: underline;
}

.yx-wb-message-list {
  display: flex;
  flex-direction: column;
}

.yx-wb-message-item {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x3);
  padding: var(--yx-spacing-x3) 0;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
}

.yx-wb-message-item:last-child {
  border-bottom: none;
}

.yx-wb-message-item__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--yx-radius-nav);
  background: var(--theme-primary-subtle, var(--yx-color-brand-primary-subtle));
  color: var(--primary);
}

.yx-wb-message-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--yx-font-size-xs);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yx-wb-message-item:hover .yx-wb-message-item__title {
  color: var(--primary);
}

.yx-wb-message-item__time {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--text-muted);
}

/* OKR / 智能日历骨架卡：虚线边框占位 */
.yx-wb-skeleton-card {
  flex: 1 1 auto;
  padding: var(--yx-spacing-x6);
  border: 1px dashed var(--card-border);
  border-radius: var(--yx-radius-card);
  background: var(--card-bg);
}

.yx-wb-skeleton-card__tag {
  padding: 2px var(--yx-spacing-x2);
  border-radius: var(--yx-radius-tag);
  background: var(--yx-color-functional-info-subtle);
  color: var(--yx-color-functional-info-solid);
  font-size: 10px;
  font-weight: var(--yx-font-weight-bold);
}

.yx-wb-skeleton-card__lines {
  display: flex;
  flex-direction: column;
  gap: var(--yx-spacing-x3);
}

.yx-wb-skeleton-card__lines span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--yx-color-bg-subtle);
}

/* 下属动态 L3+ 标签（占位） */
.yx-wb-level-tag {
  margin-left: var(--yx-spacing-x2);
  padding: 2px var(--yx-spacing-x2);
  border-radius: var(--yx-radius-tag);
  background: var(--yx-color-functional-info-subtle);
  color: var(--yx-color-functional-info-solid);
  font-size: 10px;
  font-weight: var(--yx-font-weight-bold);
  vertical-align: middle;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .yx-wb-todo-grid,
  .yx-wb-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yx-wb-finance {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .yx-wb-todo-grid,
  .yx-wb-shortcut-grid,
  .yx-wb-duo {
    grid-template-columns: minmax(0, 1fr);
  }

  .yx-wb-clock {
    display: none;
  }
}