/**
 * GitHub Dark Theme 风格样式
 * 复刻自 image.caogiso.site
 * 
 * 注意：此文件必须在 Tailwind CSS 之后加载，以确保样式优先级
 */

/* 字体导入 - Readex Pro */
@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap");

/* ========================================
   CSS变量 - GitHub Dark Theme
   ======================================== */
:root {
    /* 字体系统 */
    --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 Dark 主题配色 */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-canvas: #010409;
    
    /* 边框和分隔线 */
    --border-primary: #30363d;
    --border-secondary: #21262d;
    
    /* 文字颜色 */
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    
    /* 强调色 - GitHub蓝 */
    --accent-primary: #58a6ff;
    --accent-hover: #79c0ff;
    --accent-emphasis: #1f6feb;
    
    /* 功能色 */
    --success: #3fb950;
    --warning: #d29922;
    --danger: #f85149;
    
    /* 卡片和按钮 */
    --btn-bg: #21262d;
    --btn-hover-bg: #30363d;
    --card-bg: #161b22;
    --card-hover-bg: #1c2128;
}

/* ========================================
   全局样式覆盖 - 最高优先级
   强制覆盖 Tailwind 的默认样式
   ======================================== */
html {
    background-color: var(--bg-primary) !important;
}

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

/* 强制所有主要容器使用暗黑背景 */
body,
div.min-h-screen,
div.min-h-screen.flex,
main,
aside,
.login-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* 特别处理侧边栏 */
aside {
    background-color: var(--bg-secondary) !important;
}

/* 特别处理主内容区 */
main {
    background-color: var(--bg-primary) !important;
}

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

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

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

/* 卡片和容器背景 - 使用更具体的选择器 */
.card-container,
div.card-container,
.bg-zinc-950.card-container {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
}

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

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

button.btn-bg:hover,
button.bg-zinc-600:hover,
button.bg-zinc-800:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

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

header h1 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

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

#searchInput:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1) !important;
}

#searchInput::placeholder {
    color: var(--text-muted) !important;
}

/* 搜索按钮 */
#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;
}

#searchBtn:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* 清除按钮 */
#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;
}

#clearBtn:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

/* 分类标签按钮 */
.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;
}

.category-tab:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.category-tab.active,
.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;
}

/* ========================================
   站点卡片样式
   ======================================== */
.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;
}

.site-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
    background-color: var(--card-hover-bg) !important;
}

.site-name {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: 14px !important;
}

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

.default-icon {
    color: var(--text-muted) !important;
}

/* 链接按钮 */
.internal-link,
.external-link,
.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 */
.internal-link:not(.hidden),
.external-link:not(.hidden),
.custom-field-link:not(.hidden) {
    display: inline-block !important;
}

.internal-link:hover,
.external-link:hover,
.custom-field-link:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.external-link,
.custom-field-link {
    background-color: var(--btn-hover-bg) !important;
    color: var(--text-primary) !important;
}

.external-link:hover,
.custom-field-link:hover {
    background-color: var(--accent-emphasis) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

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

#loading .animate-spin {
    border-color: var(--border-primary) !important;
    border-top-color: var(--accent-primary) !important;
}

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

.sortable-chosen {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
}

/* 拖拽句柄样式 */
.drag-handle {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
}

.drag-handle:active {
    cursor: grabbing !important;
}

.drag-handle:hover {
    color: var(--accent-primary) !important;
}

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

/* 登录页面 */
.login-container {
    background-color: var(--bg-primary) !important;
}

.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.4) !important;
}

.login-card h1 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

.login-card p {
    color: var(--text-secondary) !important;
}

.login-form label {
    color: var(--text-secondary) !important;
    font-weight: var(--font-weight-medium) !important;
}

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

.login-form input:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1) !important;
}

.login-form input::placeholder {
    color: var(--text-muted) !important;
}

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

.login-btn:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* 侧边栏 */
aside {
    background-color: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-primary) !important;
}

aside h1 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

aside p {
    color: var(--text-secondary) !important;
}

aside nav a {
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

aside nav a:hover {
    background-color: var(--btn-hover-bg) !important;
    color: var(--text-primary) !important;
}

aside nav a.active,
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;
}

aside .border-t {
    border-color: var(--border-primary) !important;
}

aside .text-zinc-400 {
    color: var(--text-secondary) !important;
}

/* 主内容区 */
main {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

main.bg-black,
main.bg-white {
    background-color: var(--bg-primary) !important;
}

main h2 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

main h2.text-white {
    color: var(--text-primary) !important;
}

main p {
    color: var(--text-secondary) !important;
}

main p.text-white {
    color: var(--text-secondary) !important;
}

/* 统计卡片 */
.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;
}

.stat-card:hover {
    border-color: var(--accent-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}

.stat-card p {
    color: var(--text-secondary) !important;
}

.stat-card .text-3xl {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

.stat-icon {
    background-color: var(--bg-tertiary) !important;
    border-radius: 6px !important;
}

/* 表格 */
table {
    width: 100%;
    border-collapse: collapse;
}

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

table tbody tr {
    border-bottom: 1px solid var(--border-primary) !important;
    transition: background-color 0.2s ease !important;
}

table tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
}

table tbody td {
    color: var(--text-primary) !important;
    padding: 12px 16px;
    font-size: 14px;
}

table tbody td.text-zinc-300 {
    color: var(--text-secondary) !important;
}

/* 按钮 */
button,
.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;
}

button:hover,
.btn:hover {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

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

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

select.text-white,
select.bg-zinc-700,
select.bg-tertiary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

/* 模态框 */
.modal-overlay {
    background-color: rgba(1, 4, 9, 0.8) !important;
    backdrop-filter: blur(4px);
}

.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.4) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-primary) !important;
}

.modal-header h3 {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-medium) !important;
}

.modal-close {
    color: var(--text-secondary) !important;
    transition: color 0.2s ease !important;
}

.modal-close:hover {
    color: var(--text-primary) !important;
}

/* 错误和成功提示 */
.error-message,
#errorMessage {
    background-color: rgba(248, 81, 73, 0.1) !important;
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
    border-radius: 6px !important;
}

.success-message,
#successMessage {
    background-color: rgba(63, 185, 80, 0.1) !important;
    border: 1px solid var(--success) !important;
    color: var(--success) !important;
    border-radius: 6px !important;
}

/* 链接 */
a {
    color: var(--accent-primary) !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: var(--accent-hover) !important;
}

a.text-zinc-400 {
    color: var(--text-secondary) !important;
}

a.text-zinc-400:hover {
    color: var(--text-primary) !important;
}

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

/* 空状态 */
.empty-state {
    color: var(--text-secondary) !important;
}

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