/* ============================================================
   WorkBuddy 签到面板 - 全局样式
   主色 #2563eb（蓝色系，无紫色）
   ============================================================ */

:root {
    --wb-primary: #2563eb;
    --wb-primary-light: #eff6ff;
    --wb-text: #0f172a;
    --wb-text-muted: #64748b;
    --wb-border: rgba(15, 23, 42, 0.08);
    --wb-bg: #f5f7fa;

    /* 视觉令牌：统一圆角 / 阴影 / 缓动，保证全站观感一致 */
    --wb-radius: 14px;
    --wb-radius-sm: 10px;
    --wb-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
    --wb-shadow-md: 0 4px 14px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .04);
    --wb-shadow-lg: 0 12px 32px rgba(37, 99, 235, .12), 0 2px 8px rgba(15, 23, 42, .05);
    --wb-ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--wb-bg);
    color: var(--wb-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 数字统一等宽，避免刷新时抖动 */
.stat-value, .credit, .ch-credit, .cal-amt, .log-line { font-variant-numeric: tabular-nums; }

/* Element Plus 主题色对齐项目主色 */
:root {
    --el-color-primary: #2563eb;
    --el-color-primary-light-3: #5b8def;
    --el-color-primary-light-5: #8fb0f4;
    --el-color-primary-light-7: #c2d1f9;
    --el-color-primary-light-8: #d9e2fb;
    --el-color-primary-light-9: #eff6ff;
    --el-color-primary-dark-2: #1d4ed8;
    --el-border-radius-base: 9px;
    --el-font-size-base: 14px;
    --el-transition-duration: .22s;
}

/* ───────────── 卡片 ───────────── */
.el-card {
    border-color: var(--wb-border) !important;
    border-radius: var(--wb-radius) !important;
    box-shadow: var(--wb-shadow-sm);
    transition: box-shadow .28s var(--wb-ease), transform .28s var(--wb-ease), border-color .28s var(--wb-ease);
    will-change: transform;
}

/* 有内容的卡片轻微悬浮上浮（只对 hover-shadow 生效，不干扰表格滚动） */
.el-card.is-hover-shadow:hover,
.el-card.block-card:hover,
.el-card.stat-card:hover {
    border-color: rgba(37, 99, 235, .18) !important;
    box-shadow: var(--wb-shadow-md);
    transform: translateY(-2px);
}

.el-card__header {
    border-bottom-color: var(--wb-border) !important;
    padding: 14px 18px !important;
    font-weight: 500;
    font-size: 14px;
}

.el-card__body { padding: 16px 18px !important; }

/* ───────────── 按钮 ───────────── */
.el-button {
    transition: transform .18s var(--wb-ease), box-shadow .18s var(--wb-ease),
                background-color .18s var(--wb-ease), border-color .18s var(--wb-ease), color .18s var(--wb-ease) !important;
}
.el-button:not(.is-disabled):active { transform: scale(.97); }
.el-button--primary:not(.is-plain):not(.is-text):not(.is-link) {
    box-shadow: 0 2px 8px rgba(37, 99, 235, .22);
}
.el-button--primary:not(.is-plain):not(.is-text):not(.is-link):hover {
    box-shadow: 0 4px 14px rgba(37, 99, 235, .32);
}

/* ───────────── 表格 ───────────── */
.el-table { border-radius: var(--wb-radius-sm); }
.el-table th.el-table__cell {
    background: #f8fafc !important;
    color: var(--wb-text-muted);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: .2px;
}
.el-table tbody tr { transition: background-color .2s var(--wb-ease); }
.el-table__body tr:hover > td.el-table__cell { background: #f6f9ff !important; }

/* ───────────── 标签 / 开关 ───────────── */
.el-tag { border-radius: 6px !important; font-weight: 500; }
.el-switch { transition: opacity .2s; }

/* ───────────── 抽屉 / 弹层 ───────────── */
.el-drawer { box-shadow: -12px 0 40px rgba(15, 23, 42, .12); }
.el-overlay { backdrop-filter: blur(1px); }

/* ───────────── 入场动画 ───────────── */
@keyframes wbRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 内容区整体淡入 + 子元素依次上浮（错峰 60ms） */
.app-main { animation: wbRise .34s var(--wb-ease) both; }
.app-main > * { animation: wbRise .42s var(--wb-ease) both; }
.app-main > *:nth-child(1) { animation-delay: .02s; }
.app-main > *:nth-child(2) { animation-delay: .08s; }
.app-main > *:nth-child(3) { animation-delay: .14s; }
.app-main > *:nth-child(4) { animation-delay: .20s; }
.app-main > *:nth-child(5) { animation-delay: .26s; }
.app-main > *:nth-child(6) { animation-delay: .32s; }
.app-main > *:nth-child(n+7) { animation-delay: .36s; }

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::-webkit-scrollbar-track { background: transparent; }

/* 小屏适配 */
@media (max-width: 768px) {
    .el-table { font-size: 12px; }
    .el-table .cell { padding: 0 6px; }
    .el-button { padding: 8px 12px; }
    .el-drawer__body { padding: 12px; }
    .el-form-item__label { padding-bottom: 4px; }
    .el-card__body { padding: 12px 13px !important; }
    .el-card__header { padding: 12px 13px !important; }
}

/* 弹窗在手机端占满可用宽度，避免固定 px 宽度横向溢出 */
@media (max-width: 560px) {
    .el-dialog { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px); margin: 0 auto; }
    .el-dialog__body { padding: 14px; }
    .el-dialog__header { padding: 14px 14px 6px; }
}