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

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
    }
    .nav-item {
        @apply px-3 py-2 rounded-md transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-dark-100;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }


/* 标签激活状态 */
.tag-active {
    background-color: #3b82f6 !important;
    color: white !important;
}

/* 基础样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #f9fafb;
    color: #1f2937;
    transition: all 0.3s ease;
}

/* 深色模式基础样式 */
.dark {
    background-color: #111827;
    color: #f9fafb;
}

/* 主内容区域样式 */
main {
    background-color: #f9fafb;
    transition: all 0.3s ease;
}

.dark main {
    background-color: #111827;
}

/* 确保header在深色模式下正确显示 */
header {
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.dark header {
    background-color: #1f2937;
}

/* 确保页脚在深色模式下正确显示 */
footer {
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.dark footer {
    background-color: #1f2937;
}
.nav-item {
  position: relative;
  /* 保留你原来的样式，不用加padding */
}

.nav-item.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 24px); /* 左右各加12px内边距 */
  height: calc(100% + 10px); /* 上下各加6px内边距 */
  background-color: #3b82f6;
  border-radius: 9999px; /* 胶囊圆角 */
  z-index: -1; /* 背景在文字下方 */
}

.nav-item.active {
  color: #ffffff !important;
  font-weight: 600;
}

/* 全局统一美化 select */
select {
    /* 基础尺寸 */
    padding: 8px 32px 8px 12px;
    height: 42px;
    min-width: 120px;
    /* 字体 */
    font-size: 14px;
    color: #333;
    /* 边框+圆角 */
    border: 1px solid #d1d5db;
    border-radius: 8px;
    /* 清除默认下拉箭头 + 自定义箭头 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 背景下拉箭头 */
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 10px center;
    background-size: 14px;
    /* 过渡动画 */
    transition: all 0.2s ease;
    /* 禁止拉伸 */
    outline: none;
    /* 阴影 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 悬停状态 */
select:hover {
    border-color: #93c5fd;
}

/* 聚焦高亮 */
select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* 禁用状态 */
select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* 全局统一美化 input */
input[type="text"],
input[type="number"],
input[type="url"],
input[type="datetime-local"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea {
    /* 基础尺寸 */
    padding: 10px 14px;
    height: 42px;
    min-width: 120px;
    /* 字体 */
    font-size: 14px;
    color: #333;
    /* 边框+圆角 */
    border: 1px solid #d1d5db;
    border-radius: 8px;
    /* 背景 */
    background-color: #fff;
    /* 过渡动画 */
    transition: all 0.2s ease;
    /* 禁止拉伸 */
    outline: none;
    /* 阴影 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 悬停状态 */
input[type="text"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
textarea:hover {
    border-color: #93c5fd;
}

/* 聚焦高亮 */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* 禁用状态 */
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="url"]:disabled,
input[type="datetime-local"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
textarea:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* textarea 单独处理 */
textarea {
    min-height: 100px;
    height: auto;
}

/* 联系项样式 */
.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

.contact-item:hover span {
    color: #3b82f6;
}