/**
 * SpamJudge 管理后台样式
 *
 * @package SpamJudge
 */

/* 主容器 */
.spamjudge-wrap {
    /* 将顶部外边距从 20px 调整为 10px，使标题与页面上边距更均衡 */
    margin: 10px 20px 0 0;
}

/* 标签页导航 - 减少与标题的间距 */
.spamjudge-wrap .nav-tab-wrapper {
    margin-top: 10px;
}

/* 标签页内容 - 减少与导航的间距 */
.tab-content {
    padding: 15px 20px 20px;
    margin-top: 10px;
}

/* 日志操作按钮 - 减少下边距 */
.logs-actions {
    margin-bottom: 10px;
}

/* 日志表格 */
.spamjudge-logs table {
    margin-top: 20px;
    table-layout: fixed;
    width: 100%;
}

/* 评论者名称列 - 限制宽度并显示省略号 */
.comment-author-preview {
    /* 占满单元格并在边缘省略 */
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 评论内容列 - 限制宽度并显示省略号 */
.comment-content-preview {
    /* 占满单元格并在边缘省略 */
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 时间列 - 限制宽度并显示省略号 */
.comment-time-preview {
    /* 占满单元格并在边缘省略 */
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 分页 */
.tablenav {
    margin-top: 20px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

/* 分页左侧按钮容器 */
.tablenav-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 分页容器布局 */
.tablenav-pages {
    display: flex;
    align-items: center;
}

/* 响应式：窄屏时保持分页在右侧，限定在插件日志区域 */
@media screen and (max-width: 782px) {
    .spamjudge-logs .tablenav {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }
    .spamjudge-logs .tablenav .tablenav-pages {
        margin-left: auto; /* 推到右侧 */
        float: none;       /* 覆盖核心在窄屏时的float设置 */
        width: auto;       /* 避免被设为100%导致换行 */
    }
}

/* 分页链接容器布局 */
.tablenav-pages .pagination-links {
    display: flex;
    gap: 5px;
}

/* 分页链接基础样式 */
.tablenav-pages a,
.tablenav-pages span {
    padding: 5px 10px;
    border: 1px solid #ddd;
    background: #fff;
    text-decoration: none;
    color: #2271b1;
}

/* 分页链接悬停效果 */
.tablenav-pages a:hover {
    background: #f0f0f0;
}

/* 当前页码高亮 */
.tablenav-pages .current {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

/* 表单样式 */
.form-table th {
    width: 200px;
}

/* 表单输入字段统一宽度 */
.form-table input[type="text"],
.form-table input[type="url"],
.form-table input[type="password"],
.form-table input[type="number"],
.form-table textarea,
.form-table select {
    width: 100%;
    max-width: 500px;
}

/* 表单说明文字样式 */
.form-table .description {
    margin-top: 5px;
    color: #666;
    font-style: italic;
}

/* 密码输入框与眼睛按钮 */
.sj-password-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 500px;
}

.sj-password-wrapper input {
    padding-right: 40px; /* 为眼睛按钮留出空间 */
}

/* 眼睛按钮样式 */
.sj-toggle-password {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    color: #787c82;
}

/* 眼睛按钮悬停效果 */
.sj-toggle-password:hover {
    color: #2271b1;
}

/* 响应式设计 */
@media screen and (max-width: 782px) {
    .form-table th {
        width: auto;
    }
}