math_cms/resources/css/app.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    }

    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;
    }

    /* 毛玻璃效果 */
    .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;
    }
}

@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;
    }
}