/**
 * GitHub Light Theme 风格样式
 * 对应 github-dark-theme.css 的亮色版本
 * 
 * 注意：此文件必须在 Tailwind CSS 之后加载，以确保样式优先级
 */

/* ========================================
   CSS变量 - GitHub Light Theme
   使用 [data-theme="light"] 选择器
   ======================================== */
[data-theme="light"] {
    /* 字体系统（与暗色主题相同） */
    --font-family: "Readex Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* GitHub Light 主题配色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f6f8fa;
    --bg-tertiary: #ffffff;
    --bg-canvas: #ffffff;
    
    /* 边框和分隔线 */
    --border-primary: #d0d7de;
    --border-secondary: #d8dee4;
    
    /* 文字颜色 */
    --text-primary: #24292f;
    --text-secondary: #57606a;
    --text-muted: #656d76;
    
    /* 强调色 - GitHub蓝 */
    --accent-primary: #0969da;
    --accent-hover: #0860ca;
    --accent-emphasis: #0550ae;
    
    /* 功能色 */
    --success: #1a7f37;
    --warning: #9a6700;
    --danger: #cf222e;
    
    /* 卡片和按钮 */
    --btn-bg: #f6f8fa;
    --btn-hover-bg: #f3f4f6;
    --card-bg: #ffffff;
    --card-hover-bg: #f6f8fa;
}

/* ========================================
   平滑过渡动画 - 全局应用
   ======================================== */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ========================================
   全局样式覆盖 - 仅对亮色主题生效
   ======================================== */
[data-theme="light"] html {
    background-color: var(--bg-primary) !important;
}

[data-theme="light"] html,
[data-theme="light"] body {
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    font-weight: var(--font-weight-normal) !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 强制所有主要容器使用亮色背景 */
[data-theme="light"] body,
[data-theme="light"] div.min-h-screen,
[data-theme="light"] div.min-h-screen.flex,
[data-theme="light"] main,
[data-theme="light"] aside,
[data-theme="light"] .login-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* 特别处理侧边栏 */
[data-theme="light"] aside {
    background-color: var(--bg-secondary) !important;
}

/* 特别处理主内容区 */
[data-theme="light"] main {
    background-color: var(--bg-primary) !important;
}

/* 强制覆盖 Tailwind 的默认背景色 */
[data-theme="light"] body.bg-black,
[data-theme="light"] body.bg-white,
[data-theme="light"] div.bg-black,
[data-theme="light"] div.bg-white,
[data-theme="light"] main.bg-black,
[data-theme="light"] main.bg-white {
    background-color: var(--bg-primary) !important;
}

/* 强制覆盖 Tailwind 的文字颜色 */
[data-theme="light"] .text-white,
[data-theme="light"] h1.text-white,
[data-theme="light"] h2.text-white,
[data-theme="light"] h3.text-white,
[data-theme="light"] h4.text-white,
[data-theme="light"] p.text-white,
[data-theme="light"] span.text-white,
[data-theme="light"] td.text-white,
[data-theme="light"] th.text-white,
[data-theme="light"] button.text-white,
[data-theme="light"] a.text-white,
[data-theme="light"] label.text-white {
    color: var(--text-primary) !important;
}

/* 覆盖 Tailwind 的默认背景色 - 只针对主要容器 */
[data-theme="light"] body.bg-black,
[data-theme="light"] body.bg-white,
[data-theme="light"] div.bg-black,
[data-theme="light"] div.bg-white,
[data-theme="light"] main.bg-black,
[data-theme="light"] main.bg-white,
[data-theme="light"] .min-h-screen.bg-black,
[data-theme="light"] .min-h-screen.bg-white {
    background-color: var(--bg-primary) !important;
}

/* 卡片和容器背景 */
[data-theme="light"] .card-container,
[data-theme="light"] div.card-container,
[data-theme="light"] .bg-zinc-950.card-container {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
}

/* 输入框背景 */
[data-theme="light"] input.bg-tertiary,
[data-theme="light"] input.bg-zinc-700,
[data-theme="light"] input.bg-zinc-900,
[data-theme="light"] select.bg-tertiary,
[data-theme="light"] select.bg-zinc-700 {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* 按钮背景 */
[data-theme="light"] button.btn-bg,
[data-theme="light"] button.bg-zinc-600,
[data-theme="light"] button.bg-zinc-800 {
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] button.btn-bg:hover,
[data-theme="light"] button.bg-zinc-600:hover,
[data-theme="light"] button.bg-zinc-800:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* ========================================
   导航栏样式
   ======================================== */
[data-theme="light"] header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

[data-theme="light"] header h1 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* 搜索输入框 */
[data-theme="light"] #searchInput {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
}

[data-theme="light"] #searchInput:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1) !important;
}

[data-theme="light"] #searchInput::placeholder {
    color: var(--text-muted) !important;
}

/* 搜索按钮 */
[data-theme="light"] #searchBtn {
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] #searchBtn:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* 清除按钮 */
[data-theme="light"] #clearBtn {
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] #clearBtn:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

/* 分类标签按钮 */
[data-theme="light"] .category-tab {
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    font-weight: var(--font-weight-normal) !important;
}

[data-theme="light"] .category-tab:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

[data-theme="light"] .category-tab.active,
[data-theme="light"] .category-tab.bg-zinc-800 {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* ========================================
   站点卡片样式
   ======================================== */
[data-theme="light"] .site-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

[data-theme="light"] .site-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--card-hover-bg) !important;
}

[data-theme="light"] .site-name {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: 14px !important;
}

/* 图标容器 */
[data-theme="light"] .site-card .flex-shrink-0 {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
}

[data-theme="light"] .default-icon {
    color: var(--text-muted) !important;
}

/* 链接按钮 */
[data-theme="light"] .internal-link,
[data-theme="light"] .external-link,
[data-theme="light"] .custom-field-link {
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    font-size: 13px !important;
    font-weight: var(--font-weight-normal) !important;
    text-decoration: none !important;
}

/* 当链接按钮没有hidden类时才显示为inline-block */
[data-theme="light"] .internal-link:not(.hidden),
[data-theme="light"] .external-link:not(.hidden),
[data-theme="light"] .custom-field-link:not(.hidden) {
    display: inline-block !important;
}

[data-theme="light"] .internal-link:hover,
[data-theme="light"] .external-link:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

[data-theme="light"] .external-link,
[data-theme="light"] .custom-field-link {
    background-color: var(--btn-hover-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .external-link:hover,
[data-theme="light"] .custom-field-link:hover {
    background-color: var(--accent-emphasis) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* ========================================
   加载和空状态
   ======================================== */
[data-theme="light"] #loading,
[data-theme="light"] #emptyState {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #loading .animate-spin {
    border-color: var(--border-primary) !important;
    border-top-color: var(--accent-primary) !important;
}

/* ========================================
   拖拽排序样式
   ======================================== */
[data-theme="light"] .sortable-ghost {
    opacity: 0.4 !important;
    background-color: var(--bg-tertiary) !important;
}

[data-theme="light"] .sortable-chosen {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.2) !important;
}

/* 拖拽句柄样式 */
[data-theme="light"] .drag-handle {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
}

[data-theme="light"] .drag-handle:active {
    cursor: grabbing !important;
}

[data-theme="light"] .drag-handle:hover {
    color: var(--accent-primary) !important;
}

/* ========================================
   管理页面样式
   ======================================== */

/* 登录页面 */
[data-theme="light"] .login-container {
    background-color: var(--bg-primary) !important;
}

[data-theme="light"] .login-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .login-card h1 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

[data-theme="light"] .login-card p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .login-form label {
    color: var(--text-secondary) !important;
    font-weight: var(--font-weight-medium) !important;
}

[data-theme="light"] .login-form input {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
}

[data-theme="light"] .login-form input:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1) !important;
}

[data-theme="light"] .login-form input::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="light"] .login-btn {
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] .login-btn:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* 侧边栏 */
[data-theme="light"] aside {
    background-color: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-primary) !important;
}

[data-theme="light"] aside h1 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

[data-theme="light"] aside p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] aside nav a {
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] aside nav a:hover {
    background-color: var(--btn-hover-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] aside nav a.active,
[data-theme="light"] aside nav a.bg-zinc-800 {
    background-color: var(--btn-hover-bg) !important;
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-medium) !important;
}

[data-theme="light"] aside .border-t {
    border-color: var(--border-primary) !important;
}

[data-theme="light"] aside .text-zinc-400 {
    color: var(--text-secondary) !important;
}

/* 主内容区 */
[data-theme="light"] main {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] main.bg-black,
[data-theme="light"] main.bg-white {
    background-color: var(--bg-primary) !important;
}

[data-theme="light"] main h2 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

[data-theme="light"] main h2.text-white {
    color: var(--text-primary) !important;
}

[data-theme="light"] main p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] main p.text-white {
    color: var(--text-secondary) !important;
}

/* 统计卡片 */
[data-theme="light"] .stat-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

[data-theme="light"] .stat-card:hover {
    border-color: var(--accent-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .stat-card p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .stat-card .text-3xl {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

[data-theme="light"] .stat-icon {
    background-color: var(--bg-tertiary) !important;
    border-radius: 6px !important;
}

/* 表格 */
[data-theme="light"] table {
    width: 100%;
    border-collapse: collapse;
}

[data-theme="light"] table thead th {
    color: var(--text-secondary) !important;
    font-weight: var(--font-weight-medium) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    padding: 12px 16px;
    font-size: 14px;
}

[data-theme="light"] table tbody tr {
    border-bottom: 1px solid var(--border-primary) !important;
    transition: background-color 0.2s ease !important;
}

[data-theme="light"] table tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="light"] table tbody td {
    color: var(--text-primary) !important;
    padding: 12px 16px;
    font-size: 14px;
}

[data-theme="light"] table tbody td.text-zinc-300 {
    color: var(--text-secondary) !important;
}

/* 按钮 */
[data-theme="light"] button,
[data-theme="light"] .btn {
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    font-weight: var(--font-weight-normal) !important;
}

[data-theme="light"] button:hover,
[data-theme="light"] .btn:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* 输入框和选择框 */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="file"],
[data-theme="light"] select,
[data-theme="light"] textarea {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
}

/* 覆盖 Tailwind 的输入框样式 */
[data-theme="light"] input.text-white,
[data-theme="light"] input.bg-zinc-700,
[data-theme="light"] input.bg-tertiary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

[data-theme="light"] select.text-white,
[data-theme="light"] select.bg-zinc-700,
[data-theme="light"] select.bg-tertiary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* 模态框 */
[data-theme="light"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px);
}

[data-theme="light"] .modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .modal-header {
    border-bottom: 1px solid var(--border-primary) !important;
}

[data-theme="light"] .modal-header h3 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-medium) !important;
}

[data-theme="light"] .modal-close {
    color: var(--text-secondary) !important;
    transition: color 0.2s ease !important;
}

[data-theme="light"] .modal-close:hover {
    color: var(--text-primary) !important;
}

/* 错误和成功提示 */
[data-theme="light"] .error-message,
[data-theme="light"] #errorMessage {
    background-color: rgba(207, 34, 46, 0.1) !important;
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
    border-radius: 6px !important;
}

[data-theme="light"] .success-message,
[data-theme="light"] #successMessage {
    background-color: rgba(26, 127, 55, 0.1) !important;
    border: 1px solid var(--success) !important;
    color: var(--success) !important;
    border-radius: 6px !important;
}

/* 链接 */
[data-theme="light"] a {
    color: var(--accent-primary) !important;
    transition: color 0.2s ease !important;
}

[data-theme="light"] a:hover {
    color: var(--accent-hover) !important;
}

[data-theme="light"] a.text-zinc-400 {
    color: var(--text-secondary) !important;
}

[data-theme="light"] a.text-zinc-400:hover {
    color: var(--text-primary) !important;
}

/* 卡片容器 */
[data-theme="light"] .card-container {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 6px !important;
}

/* 空状态 */
[data-theme="light"] .empty-state {
    color: var(--text-secondary) !important;
}

/* ========================================
   响应式调整
   ======================================== */
@media (max-width: 768px) {
    [data-theme="light"] header h1 {
        font-size: 20px !important;
    }
    
    [data-theme="light"] .site-card {
        margin-bottom: 12px;
    }
    
    [data-theme="light"] aside {
        width: 100% !important;
    }
}