/**
 * 推广返佣系统 - 全局样式
 *
 * 蓝白色系设计系统，与主系统风格保持一致
 * 支持暗黑模式
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 基础样式 */
@layer base {
  :root {
    --color-success: 34 197 94;
    --color-warning: 245 158 11;
    --color-danger: 239 68 68;
    --color-info: 14 165 233;
    --color-sidebar: 15 23 42;
    --color-bg: 248 250 252;
    --color-bg-elevated: 255 255 255;
    --color-text: 30 41 59;
    --color-text-secondary: 100 116 139;
    --color-border: 226 232 240;
  }

  .dark {
    --color-success: 74 222 128;
    --color-warning: 251 191 36;
    --color-danger: 248 113 113;
    --color-info: 56 189 248;
    --color-sidebar: 15 23 42;
    --color-bg: 15 23 42;
    --color-bg-elevated: 30 41 59;
    --color-text: 241 245 249;
    --color-text-secondary: 148 163 184;
    --color-border: 51 65 85;
  }

  * {
    @apply border-slate-200 dark:border-slate-700;
  }

  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 antialiased transition-colors duration-200;
  }

  ::-webkit-scrollbar {
    @apply w-1.5 h-1.5;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-slate-300/60 dark:bg-slate-600/60 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400/80 dark:bg-slate-500/80;
  }

  .sidebar-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

/* 组件样式 */
@layer components {
  /* 卡片 */
  .vben-card {
    @apply bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-100 dark:border-slate-700;
  }

  .vben-card-header {
    @apply px-5 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center justify-between;
  }

  .vben-card-title {
    @apply text-base font-semibold text-slate-800 dark:text-slate-100 flex items-center gap-2;
  }

  .vben-card-body {
    @apply p-5;
  }

  /* 按钮 */
  .btn-ios {
    @apply inline-flex items-center justify-center gap-2
           px-4 py-2 rounded-md text-sm font-medium
           transition-all duration-150 ease-in-out
           focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-slate-800
           disabled:opacity-60 disabled:cursor-not-allowed disabled:pointer-events-none;
  }

  .btn-ios-primary {
    @apply btn-ios bg-blue-500 text-white
           hover:bg-blue-600 active:bg-blue-700
           focus:ring-blue-500 shadow-sm;
  }

  .btn-ios-secondary {
    @apply btn-ios bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-200
           border border-slate-300 dark:border-slate-600
           hover:bg-slate-50 dark:hover:bg-slate-600 active:bg-slate-100
           focus:ring-blue-500;
  }

  .btn-ios-danger {
    @apply btn-ios bg-red-500 text-white
           hover:bg-red-600 active:bg-red-700
           focus:ring-red-500 shadow-sm;
  }

  .btn-ios-ghost {
    @apply btn-ios bg-transparent text-slate-600 dark:text-slate-300
           hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-900 dark:hover:text-white
           focus:ring-slate-500;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs rounded;
  }

  /* 输入框 */
  .input-ios {
    @apply w-full px-3 py-2 text-sm
           text-slate-900 dark:text-slate-100
           bg-white dark:bg-slate-800
           border border-slate-300 dark:border-slate-600 rounded-md
           placeholder:text-slate-400 dark:placeholder:text-slate-500
           transition-colors duration-150
           hover:border-slate-400 dark:hover:border-slate-500
           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
           disabled:bg-slate-100 dark:disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed;
  }

  select.input-ios {
    @apply appearance-none cursor-pointer pr-10;
  }

  .input-group {
    @apply space-y-1.5;
  }

  .input-label {
    @apply block text-sm font-medium text-slate-700 dark:text-slate-300;
  }

  /* 表格 */
  .table-ios-container {
    @apply overflow-x-auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-ios {
    @apply w-full text-sm min-w-[600px];
  }

  .table-ios thead {
    @apply bg-slate-50 dark:bg-slate-700/50;
  }

  .table-ios th {
    @apply px-4 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-300 uppercase tracking-wider
           border-b border-slate-200 dark:border-slate-600;
  }

  .table-ios td {
    @apply px-4 py-3 text-slate-700 dark:text-slate-300 border-b border-slate-100 dark:border-slate-700;
  }

  .table-ios tbody tr {
    @apply transition-colors duration-150;
  }

  .table-ios tbody tr:hover {
    @apply bg-blue-50/50 dark:bg-blue-900/20;
  }

  /* 徽章 */
  .badge-ios {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
  }

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

  .badge-danger {
    @apply badge-ios bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400;
  }

  .badge-info {
    @apply badge-ios bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400;
  }

  /* 统计卡片 */
  .stat-card {
    @apply bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-100 dark:border-slate-700 p-3 sm:p-4 flex items-center gap-3;
  }

  .stat-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0;
  }

  .stat-icon-primary {
    @apply stat-icon bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400;
  }

  .stat-icon-success {
    @apply stat-icon bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400;
  }

  .stat-icon-warning {
    @apply stat-icon bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400;
  }

  .stat-icon-info {
    @apply stat-icon bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400;
  }

  .stat-value {
    @apply text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100 leading-none;
  }

  .stat-label {
    @apply text-xs sm:text-sm text-slate-500 dark:text-slate-400;
  }

  /* 页面头部 */
  .page-header {
    @apply mb-6;
  }

  .page-title {
    @apply text-xl font-semibold text-slate-900 dark:text-slate-100;
  }

  .page-description {
    @apply text-sm text-slate-500 dark:text-slate-400 mt-1;
  }

  /* 顶部导航栏 */
  .top-navbar {
    @apply h-14 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700
           flex items-center justify-between px-4 sticky top-0 z-40;
  }

  /* 多标签栏 */
  .tabs-bar {
    @apply h-10 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700
           flex items-center gap-1 px-2 overflow-x-auto;
  }

  .tab-item {
    @apply inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md
           text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100
           hover:bg-slate-100 dark:hover:bg-slate-700
           transition-colors duration-150 cursor-pointer whitespace-nowrap;
  }

  .tab-item-active {
    @apply tab-item bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400;
  }

  .tab-close {
    @apply ml-1 p-0.5 rounded hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors;
  }

  /* 模态框 */
  .modal-overlay {
    @apply fixed inset-0 bg-black/50 dark:bg-black/70 z-50
           flex items-center justify-center p-4
           animate-fade-in;
  }

  .modal-content {
    @apply bg-white dark:bg-slate-800 rounded-lg shadow-2xl w-full max-w-lg max-h-[85vh] min-h-[320px]
           flex flex-col overflow-hidden
           animate-slide-up;
  }

  .modal-header {
    @apply flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-700 flex-shrink-0;
  }

  .modal-title {
    @apply text-lg font-semibold text-slate-900 dark:text-slate-100;
  }

  .modal-close {
    @apply p-1 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-200
           hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-150;
  }

  .modal-body {
    @apply flex-1 overflow-y-auto p-6 min-h-0;
  }

  .modal-footer {
    @apply flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 dark:border-slate-700
           bg-slate-50 dark:bg-slate-800/50 flex-shrink-0;
  }

  /* 分页 */
  .pagination {
    @apply flex items-center gap-1;
  }

  .pagination-btn {
    @apply px-3 py-1.5 text-sm rounded-md border border-gray-300
           text-gray-700 hover:bg-gray-50
           disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors duration-150;
  }

  .pagination-btn-active {
    @apply pagination-btn bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
  }

  /* 工具栏 */
  .toolbar {
    @apply flex flex-wrap items-center gap-3 mb-4;
  }
}

/* 工具类 */
@layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }

  .flex-between {
    @apply flex items-center justify-between;
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fade-in {
    animation: fade-in 0.15s ease-out;
  }

  .animate-slide-up {
    animation: slide-up 0.2s ease-out;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

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

  /* 移动端优化 */
  @media (max-width: 640px) {
    .vben-card-body {
      @apply p-3;
    }

    .vben-card-header {
      @apply px-3 py-2.5;
    }

    .modal-content {
      @apply max-w-[calc(100%-1rem)] mx-2 rounded-lg max-h-[90vh] overflow-y-auto;
    }

    .page-title {
      @apply text-lg;
    }

    .stat-card {
      @apply p-3;
    }

    .stat-value {
      @apply text-xl;
    }

    .stat-label {
      @apply text-xs;
    }

    .table-ios th,
    .table-ios td {
      @apply px-3 py-2.5 text-xs whitespace-nowrap;
    }

    .btn-ios {
      @apply px-3 py-2 text-xs;
    }

    .input-ios {
      @apply text-sm py-2;
    }

    .top-navbar {
      @apply px-3 h-12;
    }

    .tabs-bar {
      @apply px-2;
    }

    .tab-item,
    .tab-item-active {
      @apply px-2 py-1.5 text-xs gap-1;
    }
  }
}
