math_cms/resources/css/app.css

/* 使用系统字体栈，避免依赖外部CDN */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* 使用系统字体：PingFang SC (macOS), 苹方-简 (iOS), 微软雅黑 (Windows), 文泉驿微米黑 (Linux) */
        --font-sans: 'PingFang SC', 'PingFang SC Regular', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    }

    body {
        @apply bg-slate-50 text-slate-900 font-sans antialiased;
    }

    /* 平滑滚动 */
    html {
        scroll-behavior: smooth;
    }

    /* 自定义滚动条 */
    ::-webkit-scrollbar {
        @apply w-2 h-2;
    }

    ::-webkit-scrollbar-track {
        @apply bg-slate-100 rounded-lg;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-slate-300 rounded-lg hover:bg-slate-400 transition-colors duration-200;
    }

    ::-webkit-scrollbar-thumb:hover {
        @apply bg-slate-400;
    }
}

@layer components {

    /* Filament 登录页面定制 */
    .fi-logo {
        display: none !important;
    }

    .fi-logo::after {
        content: '数学知识图谱管理系统' !important;
        display: inline-block !important;
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        color: #0ea5e9 !important;
    }

    /* 玻璃态面板 */
    .glass-panel {
        @apply rounded-2xl border border-white/20 bg-white/70 shadow-lg backdrop-blur-md transition-all duration-300 hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60;
    }

    /* 卡片组件 */
    .metric-card {
        @apply rounded-xl border border-slate-200/80 bg-white/90 px-6 py-5 shadow-sm transition-all duration-300 hover:shadow-md hover:scale-[1.02] dark:border-slate-700/80 dark:bg-slate-900/50;
    }

    /* 渐变背景 */
    .gradient-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .gradient-bg-light {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }

    /* 现代化按钮 */
    .btn-modern {
        @apply relative inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white bg-primary-600 rounded-lg shadow-md transition-all duration-300 hover:bg-primary-700 hover:shadow-lg hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 active:scale-95;
    }

    .btn-modern-outline {
        @apply relative inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-primary-600 bg-transparent border border-primary-600 rounded-lg shadow-sm transition-all duration-300 hover:bg-primary-50 hover:shadow-md hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 active:scale-95;
    }

    /* 输入框样式 */
    .input-modern {
        @apply w-full px-4 py-3 text-sm border border-slate-300 rounded-lg transition-all duration-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none hover:border-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:hover:border-slate-500;
    }

    /* 表格样式增强 */
    .table-modern {
        @apply w-full border-collapse overflow-hidden rounded-lg shadow-sm border border-slate-200 dark:border-slate-700;
    }

    .table-modern thead th {
        @apply px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider bg-slate-50/50 dark:bg-slate-800/50 dark:text-slate-300;
    }

    .table-modern tbody tr {
        @apply transition-colors duration-200 hover:bg-slate-50/70 dark:hover:bg-slate-800/50;
    }

    .table-modern tbody td {
        @apply px-6 py-4 text-sm text-slate-900 border-t border-slate-200 dark:border-slate-700 dark:text-slate-100;
    }

    /* 导航栏样式 */
    .navbar-modern {
        @apply backdrop-blur-md bg-white/80 shadow-sm border-b border-slate-200/50 dark:bg-slate-900/80 dark:border-slate-700/50;
    }

    /* 侧边栏样式 */
    .sidebar-modern {
        @apply bg-white border-r border-slate-200 dark:bg-slate-900 dark:border-slate-700;
    }

    /* 页面标题 */
    .page-title {
        @apply text-3xl font-bold text-slate-900 mb-2 dark:text-white;
    }

    .page-subtitle {
        @apply text-sm text-slate-600 dark:text-slate-400;
    }

    /* 状态指示器 */
    .status-online {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-400;
    }

    .status-offline {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-400;
    }

    .status-pending {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-400;
    }

    /* 加载动画 */
    .loading-spinner {
        @apply inline-block w-4 h-4 border-2 border-slate-300 border-t-primary-600 rounded-full animate-spin;
    }

    /* 动画效果 */
    .animate-fade-in {
        @apply animate-fadeIn;
    }

    .animate-slide-up {
        @apply animate-slideUp;
    }

    /* OCR记录详情页面特有样式 */
    .ocr-record-table {
        @apply table-zebra table-compact;
    }

    .ocr-record-table thead th {
        @apply bg-base-200 text-sm font-semibold text-base-content/80;
    }

    .ocr-record-table tbody tr {
        @apply hover:bg-base-100;
    }

    .ocr-record-table tbody td {
        @apply border-t border-base-300;
        vertical-align: middle;
    }

    /* 时间轴样式增强 */
    .timeline.timeline-vertical .timeline-middle .timeline-box {
        @apply border-2 shadow-lg transition-all duration-300 hover:scale-110;
    }

    .timeline.timeline-vertical .timeline-middle .timeline-box:hover {
        @apply transform hover:scale-125 hover:shadow-xl;
    }

    /* 状态徽章增强 */
    .status-badge {
        @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium transition-all duration-200;
    }

    .status-badge:hover {
        @apply transform hover:scale-105;
    }

    /* 图片预览框架 */
    .mockup-window {
        @apply border border-slate-300 rounded-t-lg overflow-hidden;
    }

    .mockup-browser-toolbar {
        @apply bg-slate-200 px-2 py-1 flex items-center gap-1 border-b border-slate-300;
    }

    .mockup-browser-content {
        @apply bg-white;
        min-height: 200px;
    }

    .mockup-browser-dot {
        @apply w-2 h-2 rounded-full bg-slate-300;
    }

    /* OCR置信度指示器 */
    .confidence-indicator {
        @apply w-2 h-2 rounded-full;
        transition: all 0.3s ease;
    }

    .confidence-high {
        @apply bg-green-500;
    }

    .confidence-medium {
        @apply bg-yellow-500;
    }

    .confidence-low {
        @apply bg-red-500;
    }

    /* AI分析结果卡片 */
    .ai-result-card {
        @apply bg-gradient-to-br from-success/10 to-success/5 border border-success/20 rounded-lg p-4;
    }

    .ai-result-card.high-score {
        @apply from-success/10 to-success/5;
    }

    .ai-result-card.medium-score {
        @apply from-yellow/10 to-yellow/5;
    }

    .ai-result-card.low-score {
        @apply from-error/10 to-error/5;
    }

    /* 提交按钮区域 */
    .submit-analysis-section {
        @apply bg-gradient-to-r from-primary/5 to-primary/10 border border-primary/20 rounded-xl p-6 transition-all duration-300;
    }

    .submit-analysis-section:hover {
        @apply bg-primary/10 border-primary/30;
    }

    .submit-analysis-section.completed {
        @apply bg-gradient-to-r from-success/5 to-success/10 border border-success/20;
    }

    /* 响应式优化 */
    @media (max-width: 768px) {
        .stats-vertical,
        .stats-horizontal {
            @apply grid grid-cols-2;
        }

        .ocr-record-table {
            @apply text-xs;
        }

        .ocr-record-table th,
        .ocr-record-table td {
            @apply px-2 py-1;
        }

        /* 移动端隐藏部分列 */
        .mobile-hidden {
            @apply hidden;
        }
    }

    @media (max-width: 480px) {
        .stats-vertical,
        .stats-horizontal {
            @apply grid grid-cols-1;
        }

        .ocr-record-table {
            @apply text-xs;
        }

        .mobile-sm-only {
            @apply block;
        }

        .mobile-hidden {
            @apply hidden;
        }
    }

    /* 深色模式适配 */
    @media (prefers-color-scheme: dark) {
        .mockup-window {
            @apply border-slate-700;
        }

        .mockup-browser-toolbar {
            @apply bg-slate-800 border-slate-700;
        }

        .mockup-browser-content {
            @apply bg-slate-800;
        }

        .mockup-browser-dot {
            @apply bg-slate-600;
        }
    }

    /* 毛玻璃效果 */
    .frosted-glass {
        @apply bg-white/10 backdrop-blur-lg border border-white/20 shadow-xl;
    }

    .frosted-glass-dark {
        @apply bg-slate-900/10 backdrop-blur-lg border border-slate-700/20 shadow-xl;
    }

    /* 悬停效果 */
    .hover-lift {
        @apply transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg;
    }

    /* 统计卡片特殊样式 */
    .stat-card {
        @apply relative overflow-hidden rounded-xl border border-slate-200 bg-gradient-to-br from-white to-slate-50 p-6 shadow-sm transition-all duration-300 hover:shadow-md hover:border-primary-200 dark:border-slate-700 dark:from-slate-800 dark:to-slate-900 dark:hover:border-primary-800;
    }

    .stat-card::before {
        content: '';
        @apply absolute inset-0 bg-gradient-to-br from-primary-500/10 to-transparent opacity-0 transition-opacity duration-300;
    }

    .stat-card:hover::before {
        @apply opacity-100;
    }

    /* 徽章样式 */
    .badge-modern {
        @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium transition-colors duration-200;
    }

    .badge-primary {
        @apply bg-primary-100 text-primary-800 dark:bg-primary-900/50 dark:text-primary-300;
    }

    .badge-secondary {
        @apply bg-secondary-100 text-secondary-800 dark:bg-secondary-900/50 dark:text-secondary-300;
    }

    .badge-success {
        @apply bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-400;
    }

    .badge-warning {
        @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-400;
    }

    .badge-error {
        @apply bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-400;
    }

    /* 分割线 */
    .divider-modern {
        @apply my-6 border-0 border-t border-slate-200 dark:border-slate-700;
    }

    /* =========================================
       全局输入框美化 (Global Input Polish)
       ========================================= */

    /* 
       策略：
       1. 对于登录页 (.fi-simple-layout)，我们禁用 Filament 的 wrapper 样式，直接对 input 应用 DaisyUI 组件样式。
       2. 对于后台管理页，我们保留 Filament 的 wrapper 结构（为了兼容前缀/后缀图标），但用 CSS 模拟 DaisyUI 的外观。
    */

    /* --- 登录页面 (Simple Layout) --- */

    /* 移除 Filament wrapper 的默认样式 */
    .fi-simple-layout .fi-input-wrp {
        @apply ring-0 shadow-none bg-transparent !important;
    }

    /* 直接对 input 应用 DaisyUI 样式 */
    .fi-simple-layout input:not([type='checkbox']):not([type='radio']),
    .fi-simple-layout select {
        @apply input input-bordered input-primary w-full bg-white text-gray-900 !important;
        height: 2.75rem !important;
        /* 修复高度 */
    }

    .fi-simple-layout input:focus,
    .fi-simple-layout select:focus {
        @apply outline-none border-primary-500 ring-2 ring-primary-500/20 !important;
    }

    /* 登录按钮美化 */
    .fi-simple-layout .fi-btn {
        @apply btn btn-primary w-full text-white font-bold shadow-lg hover:shadow-xl transition-all duration-300 !important;
        border: none !important;
    }

    /* 复选框美化 */
    .fi-simple-layout input[type='checkbox'] {
        @apply checkbox checkbox-primary rounded border-gray-300 !important;
    }

    /* 链接美化 */
    .fi-simple-layout a {
        @apply link link-primary hover:link-hover transition-colors !important;
    }

    /* --- 后台管理页面 (Admin Panel) --- */

    /* 模拟 DaisyUI input-bordered 的外观 */
    .fi-input-wrp,
    .fi-select-input {
        @apply bg-white border border-base-300 shadow-sm rounded-lg transition-all duration-200 !important;
        /* 覆盖 Filament 的默认 ring */
        box-shadow: none !important;
        ring: 0 !important;
    }

    /* 聚焦状态 */
    .fi-input-wrp:focus-within,
    .fi-select-input:focus-within {
        @apply border-primary-500 ring-2 ring-primary-500/20 !important;
    }

    /* 内部 input 保持透明 */
    .fi-input-wrp input,
    .fi-select-input select {
        @apply bg-transparent border-none shadow-none ring-0 focus:ring-0 !important;
    }

    /* 暗色模式适配 */
    :is(.dark) .fi-simple-layout input:not([type='checkbox']):not([type='radio']),
    :is(.dark) .fi-simple-layout select {
        @apply bg-base-200 text-base-content border-base-content/20 !important;
    }

    :is(.dark) .fi-input-wrp,
    :is(.dark) .fi-select-input {
        @apply bg-base-200 border-base-content/20 !important;
    }

    :is(.dark) .fi-simple-layout .fi-btn {
        @apply btn-primary text-white !important;
    }
}

@layer utilities {

    /* 文字渐变 */
    .text-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* 隐藏滚动条 */
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* 混合模式 */
    .mix-blend-multiply {
        mix-blend-mode: multiply;
    }

    .mix-blend-screen {
        mix-blend-mode: screen;
    }
}