/**
 * 反馈建议页面专用样式
 * 文件作用：为comment.php页面提供独立的样式定义
 * 影响文件：comment.php - 反馈建议页面
 * 创建时间：2025-02-01
 * 作者：Kaka工具箱
 */

/* ================================================
   留言卡片样式
   ================================================ */

/**
 * 留言项容器
 * 作用：定义每个留言的基础样式和悬停效果
 */
.nk-reply-item {
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.3s ease;
}

.nk-reply-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/**
 * 留言头部区域
 * 作用：显示用户信息和时间
 */
.nk-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f3f6;
    background: #f8f9fc;
}

/* ================================================
   用户信息样式
   ================================================ */

/**
 * 用户卡片容器
 * 作用：用户头像和名称的布局容器
 */
.user-card {
    display: flex;
    align-items: center;
}

/**
 * 用户头像样式
 * 作用：显示用户头像或初始字母
 */
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
}

.user-avatar.bg-purple {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/**
 * 用户名和时间样式
 */
.user-name {
    font-weight: 600;
    color: #364a63;
}

.date-time {
    color: #8094ae;
    font-size: 14px;
}

/* ================================================
   留言内容样式
   ================================================ */

/**
 * 留言正文容器
 * 作用：留言内容和管理员回复的容器
 */
.nk-reply-body {
    padding: 20px;
}

.nk-reply-body>p {
    margin: 0 0 15px 0;
    color: #364a63;
    line-height: 1.6;
}

/**
 * 管理员回复样式
 * 作用：突出显示管理员的回复内容
 */
.nk-reply-entry {
    background: #f1f6ff;
    border-left: 4px solid #3b82f6;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
}

.nk-reply-entry p {
    margin: 0;
    color: #1e40af;
    font-weight: 500;
}

/* ================================================
   分页样式
   ================================================ */

/**
 * 分页链接样式
 * 作用：美化分页按钮的外观和交互效果
 */
.pagination .page-link {
    color: #6366f1;
    border: 1px solid #e5e9f2;
    padding: 8px 16px;
    margin: 0 2px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

.pagination .page-item.active .page-link {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #8094ae;
    background: #f8f9fc;
    border-color: #e5e9f2;
}

/* ================================================
   表单增强样式
   ================================================ */

/**
 * 表单控件焦点样式
 * 作用：增强表单输入框的视觉反馈
 */
.form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/**
 * 主要按钮样式
 * 作用：提交按钮的渐变效果和悬停动画
 */
.btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.btn-primary:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* ================================================
   提醒消息样式
   ================================================ */

/**
 * 提醒框基础样式
 * 作用：成功和错误消息的基础样式
 */
.alert {
    border: none;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

/**
 * 成功消息样式
 * 作用：绿色渐变的成功提示
 */
.alert-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

/**
 * 错误消息样式
 * 作用：红色渐变的错误提示
 */
.alert-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}