/**
 * 自定义样式
 * 补充 Tailwind CSS，提供动画、主题色等自定义样式
 */

/* 主题色变量 */
:root {
    --primary-color: #1e40af;
    --accent-color: #f97316;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --background-color: #f9fafb;
}

/* 安全区域适配 */
.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* 动画 */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.animate-slideUp {
    animation: slideUp 0.3s ease-out;
}

.animate-slideDown {
    animation: slideDown 0.3s ease-out;
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease-out;
}

/* 页面切换动画 */
.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* 加载动画 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========== 案件优先级配色规则 ========== */
/*
 * 优先级分类基于逾期天数和金额综合评估：
 * - high（高优先级）：逾期60天以上 或 逾期金额≥10,000
 * - medium（中优先级）：逾期31-60天 或 逾期金额5,000-9,999
 * - low（低优先级）：逾期30天以下 且 逾期金额<5,000
 */

.priority-high {
    border-left: 4px solid #ef4444; /* 红色 - 高风险，紧急处理 */
}

.priority-medium {
    border-left: 4px solid #f97316; /* 橙色 - 中等风险，及时跟进 */
}

.priority-low {
    border-left: 4px solid #10b981; /* 绿色 - 低风险，常规处理 */
}

/* ========== 案件状态配色规则 ========== */
/*
 * 状态分类及含义：
 * - pending（待联系）：新案件或未联系，灰色 - 中性，待行动
 * - following（跟进中）：已联系正在跟进，蓝色 - 进行中
 * - promised（已承诺）：客户承诺还款，橙色 - 需关注承诺是否兑现
 * - settled（已结清）：已完成还款，绿色 - 成功结案
 * - lost（失联）：无法联系，红色 - 异常状态，需特殊处理
 */

.status-badge {
    @apply px-2 py-1 rounded-full text-xs font-medium;
}

.status-pending {
    @apply bg-gray-100 text-gray-700;
}

.status-following {
    @apply bg-blue-100 text-blue-700;
}

.status-promised {
    @apply bg-orange-100 text-orange-700;
}

.status-settled {
    @apply bg-green-100 text-green-700;
}

.status-lost {
    @apply bg-red-100 text-red-700;
}

/* ========== 逾期阶段配色 ========== */
/*
 * 逾期阶段分级：
 * - M0：未逾期（预防性提醒）
 * - M1：逾期1-30天（轻度逾期）
 * - M2：逾期31-60天（中度逾期）
 * - M3+：逾期60天以上（严重逾期）
 */

.overdue-m0 {
    @apply text-gray-600;
}

.overdue-m1 {
    @apply text-blue-600;
}

.overdue-m2 {
    @apply text-orange-600;
}

.overdue-m3 {
    @apply text-red-600;
}

/* 卡片样式 */
.card {
    @apply bg-white rounded-lg shadow-sm p-4;
}

/* 按钮样式 */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors;
}

.btn-secondary {
    @apply bg-gray-100 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-200 transition-colors;
}

.btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-red-700 transition-colors;
}

/* 输入框样式 */
.input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent;
}

/* 滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 响应式设计 - iPhone 15 Pro */
@media (max-width: 393px) {
    .container {
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* 触摸优化 */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* 禁用状态 */
.disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
}