/* ============================================================
   零工派单管理系统 — 自定义样式
   与 Tailwind CDN 互补，处理 CDN 无法生成的动态类与细节
   ============================================================ */

:root {
    --ring-emerald: 16 185 129;
}

/* 表格行高与紧凑排版 */
.table-tight th,
.table-tight td {
    padding: 0.75rem 1rem; /* py-3 px-4 */
    vertical-align: middle;
}

/* 数字使用等宽字形，避免抖动 */
.tabular-nums,
table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* 滚动条美化（Webkit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; border: 2px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 隐藏横向滚动条（移动端表格容器） */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 超期脉冲点 */
.dot-pulse { position: relative; display: inline-flex; }
.dot-pulse::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 9999px;
    background: currentColor;
    animation: dotPulse 1.6s cubic-bezier(.24,.6,.35,1) infinite;
}
@keyframes dotPulse {
    0%   { transform: scale(.85); opacity: .85; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* 卡片细微悬停抬升 */
.card-hover { transition: box-shadow .18s ease, transform .18s ease; }
.card-hover:hover { box-shadow: 0 4px 14px -2px rgb(15 23 42 / .10); transform: translateY(-1px); }

/* 对账单打印/截图区域字体 */
.statement-body {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 移动端底部安全区 */
@supports (padding: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* 表单控件聚焦统一 */
input:focus, select:focus, textarea:focus { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    box-shadow: 0 0 0 3px rgb(16 185 129 / .18);
}

/* 禁用 html2canvas 的跨域字体问题，使用系统字体兜底 */
.statement-capture { background: #ffffff; }

/* Alpine 未初始化前隐藏弹窗内容 */
[x-cloak] { display: none !important; }

/* 表格在窄屏下的最小宽度，保证列不挤压 */
@media (max-width: 640px) {
    .table-tight th, .table-tight td { padding: 0.625rem 0.75rem; font-size: 0.8125rem; }
}