/* message.css - 留言墙页面样式（无框架依赖版） */

/* 留言墙容器样式 */
.message-container {
    padding: 25px 35px !important;  /* 内边距：上下25像素，左右35像素，!important提高优先级 */
    background-color: #faf8f5;  /* 浅米色背景 */
    min-height: 500px;  /* 最小高度500像素 */
}

/* 留言墙标题样式 */
.message-title {
    color: #c62828 !important;  /* 红色文字，!important提高优先级 */
    font-size: 32px !important;  /* 字体大小32像素，!important提高优先级 */
    font-family: "楷体", "STKaiti", serif;  /* 楷体字体族 */
    margin-bottom: 10px !important;  /* 底部外边距10像素，!important提高优先级 */
    text-align: center;  /* 文字水平居中 */
    border-bottom: 2px solid #ffccbc;  /* 底部2像素浅橙色边框 */
    padding-bottom: 15px;  /* 底部内边距15像素 */
}

/* 留言墙副标题样式 */
.subtitle {
    margin: 15px 0 25px !important;  /* 外边距：上下15像素，底部25像素，!important提高优先级 */
    color: #e53935 !important;  /* 亮红色文字，!important提高优先级 */
    font-size: 18px !important;  /* 字体大小18像素，!important提高优先级 */
    text-align: center;  /* 文字水平居中 */
    font-style: italic;  /* 文字斜体 */
}

/* 留言表单容器样式 */
.message-form {
    background-color: white;  /* 白色背景 */
    padding: 25px;  /* 内边距25像素 */
    border-radius: 12px;  /* 12像素圆角 */
    box-shadow: 0 4px 15px rgba(183, 28, 28, 0.1);  /* 红色调阴影效果 */
    margin-bottom: 30px;  /* 底部外边距30像素 */
    border: 1px solid #ffebee;  /* 1像素浅红色边框 */
}

/* 表单标题样式 */
.form-header {
    font-size: 24px;  /* 字体大小24像素 */
    color: #c62828;  /* 红色文字 */
    margin-bottom: 20px;  /* 底部外边距20像素 */
    padding-bottom: 10px;  /* 底部内边距10像素 */
    border-bottom: 1px solid #ffccbc;  /* 底部1像素浅橙色边框 */
    font-family: "楷体", "STKaiti", serif;  /* 楷体字体族 */
}

/* 表单分组样式 */
.form-group {
    margin-bottom: 20px;  /* 底部外边距20像素 */
}

/* 表单标签样式 */
.form-group label {
    display: block;  /* 块级显示 */
    margin-bottom: 8px;  /* 底部外边距8像素 */
    color: #c62828;  /* 红色文字 */
    font-weight: bold;  /* 文字加粗 */
    font-size: 16px;  /* 字体大小16像素 */
}

/* 表单输入框、文本域、选择框通用样式 */
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;  /* 宽度100%填充父元素 */
    padding: 12px 15px;  /* 内边距：上下12像素，左右15像素 */
    border: 1px solid #ffebee;  /* 1像素浅红色边框 */
    border-radius: 8px;  /* 8像素圆角 */
    font-size: 16px;  /* 字体大小16像素 */
    background-color: #fffaf5;  /* 浅米色背景 */
    color: #5d4037;  /* 深棕色文字 */
}

/* 表单输入框、文本域、选择框聚焦状态样式 */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;  /* 移除浏览器默认的聚焦轮廓线 */
    border-color: #ff9800;  /* 聚焦时边框颜色变为橙色 */
    background-color: white;  /* 聚焦时背景变为白色 */
}

/* 文本域特定样式 */
.form-group textarea {
    min-height: 120px;  /* 最小高度120像素 */
    resize: vertical;  /* 只允许垂直方向调整大小 */
    line-height: 1.6;  /* 行高1.6倍字体大小 */
}

/* 选择框特定样式 */
.form-group select {
    cursor: pointer;  /* 鼠标悬停时显示手形指针 */
}

/* 表单按钮容器样式 */
.form-buttons {
    display: flex;  /* 弹性布局 */
    gap: 15px;  /* 子元素之间间距15像素 */
    margin-top: 20px;  /* 顶部外边距20像素 */
}

/* 表单按钮通用样式 */
.form-buttons button {
    flex: 1;  /* 弹性系数1，平均分配空间 */
    padding: 14px;  /* 内边距14像素 */
    border: none;  /* 无边框 */
    border-radius: 8px;  /* 8像素圆角 */
    font-size: 18px;  /* 字体大小18像素 */
    font-weight: bold;  /* 文字加粗 */
    cursor: pointer;  /* 鼠标悬停时显示手形指针 */
    font-family: "楷体", "STKaiti", serif;  /* 楷体字体族 */
    transition: background-color 0.3s;  /* 背景颜色0.3秒过渡效果 */
}

/* 提交按钮样式 */
.submit-btn {
    background-color: #c62828;  /* 红色背景 */
    color: white;  /* 白色文字 */
}

/* 提交按钮悬停效果 */
.submit-btn:hover {
    background-color: #d32f2f;  /* 悬停时背景变为亮红色 */
}

/* 重置按钮样式 */
.reset-btn {
    background-color: #ffebee;  /* 浅红色背景 */
    color: #c62828;  /* 红色文字 */
    border: 1px solid #ffccbc !important;  /* 1像素浅橙色边框，!important提高优先级 */
}

/* 重置按钮悬停效果 */
.reset-btn:hover {
    background-color: #ffccbc;  /* 悬停时背景变为浅橙色 */
}

/* 语录列表容器样式 */
.quotes-container {
    margin-top: 30px;  /* 顶部外边距30像素 */
}

/* 语录列表头部样式 */
.quotes-header {
    display: flex;  /* 弹性布局 */
    justify-content: space-between;  /* 子元素两端对齐 */
    align-items: center;  /* 垂直居中对齐子元素 */
    margin-bottom: 20px;  /* 底部外边距20像素 */
    padding-bottom: 15px;  /* 底部内边距15像素 */
    border-bottom: 2px solid #ffccbc;  /* 底部2像素浅橙色边框 */
}

/* 语录列表标题样式 */
.quotes-header h2 {
    font-size: 26px;  /* 字体大小26像素 */
    color: #c62828;  /* 红色文字 */
    font-family: "楷体", "STKaiti", serif;  /* 楷体字体族 */
    margin: 0;  /* 清除外边距 */
}

/* 搜索和筛选区域样式 */
.search-filter {
    display: flex;  /* 弹性布局 */
    gap: 15px;  /* 子元素之间间距15像素 */
    align-items: center;  /* 垂直居中对齐子元素 */
}

/* 搜索输入框样式 */
.search-filter input {
    padding: 10px 15px;  /* 内边距：上下10像素，左右15像素 */
    border: 1px solid #ffebee;  /* 1像素浅红色边框 */
    border-radius: 8px;  /* 8像素圆角 */
    width: 200px;  /* 宽度200像素 */
    background-color: #fffaf5;  /* 浅米色背景 */
    color: #5d4037;  /* 深棕色文字 */
}

/* 搜索输入框聚焦状态样式 */
.search-filter input:focus {
    outline: none;  /* 移除浏览器默认的聚焦轮廓线 */
    border-color: #ff9800;  /* 聚焦时边框颜色变为橙色 */
}

/* 筛选下拉框样式 */
.search-filter select {
    padding: 10px 15px;  /* 内边距：上下10像素，左右15像素 */
    border: 1px solid #ffebee;  /* 1像素浅红色边框 */
    border-radius: 8px;  /* 8像素圆角 */
    background-color: #fffaf5;  /* 浅米色背景 */
    color: #5d4037;  /* 深棕色文字 */
    cursor: pointer;  /* 鼠标悬停时显示手形指针 */
}

/* 语录网格布局样式 */
.quotes-grid {
    display: grid;  /* 网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));  /* 自动填充列，最小350像素，最大1fr */
    gap: 20px;  /* 网格间距20像素 */
    margin-bottom: 40px;  /* 底部外边距40像素 */
}

/* 语录卡片样式 */
.quote-card {
    background-color: white;  /* 白色背景 */
    border-radius: 12px;  /* 12像素圆角 */
    padding: 20px;  /* 内边距20像素 */
    box-shadow: 0 4px 15px rgba(183, 28, 28, 0.1);  /* 红色调阴影效果 */
    border: 1px solid #ffebee;  /* 1像素浅红色边框 */
}

/* 语录内容样式 */
.quote-content {
    font-size: 18px;  /* 字体大小18像素 */
    line-height: 1.6;  /* 行高1.6倍字体大小 */
    color: #5d4037;  /* 深棕色文字 */
    margin-bottom: 20px;  /* 底部外边距20像素 */
    text-align: justify;  /* 两端对齐 */
}

/* 语录作者样式 */
.quote-author {
    font-size: 16px;  /* 字体大小16像素 */
    color: #c62828;  /* 红色文字 */
    font-weight: bold;  /* 文字加粗 */
    text-align: right;  /* 文字右对齐 */
    margin-bottom: 15px;  /* 底部外边距15像素 */
    padding-top: 15px;  /* 顶部内边距15像素 */
    border-top: 1px solid #ffccbc;  /* 顶部1像素浅橙色边框 */
}

/* 语录标签容器样式 */
.quote-tags {
    display: flex;  /* 弹性布局 */
    flex-wrap: wrap;  /* 允许换行 */
    gap: 8px;  /* 子元素之间间距8像素 */
    margin-bottom: 15px;  /* 底部外边距15像素 */
}

/* 标签通用样式 */
.tag {
    background-color: #ffebee;  /* 浅红色背景 */
    color: #c62828;  /* 红色文字 */
    padding: 5px 12px;  /* 内边距：上下5像素，左右12像素 */
    border-radius: 15px;  /* 15像素圆角，形成胶囊形状 */
    font-size: 14px;  /* 字体大小14像素 */
    font-weight: bold;  /* 文字加粗 */
}

/* 革命精神标签样式 */
.tag-revolution { background-color: #ffcdd2; }  /* 浅粉色背景 */

/* 励志名言标签样式 */
.tag-inspiration { background-color: #ffecb3; }  /* 浅黄色背景 */

/* 历史经典标签样式 */
.tag-history { background-color: #ffe0b2; }  /* 浅橙色背景 */

/* 党的教导标签样式 */
.tag-party { background-color: #ffcdd2; }  /* 浅粉色背景 */

/* 红色精神标签样式 */
.tag-spirit { background-color: #ffecb3; }  /* 浅黄色背景 */

/* 语录元信息区域样式 */
.quote-meta {
    display: flex;  /* 弹性布局 */
    justify-content: space-between;  /* 子元素两端对齐 */
    align-items: center;  /* 垂直居中对齐子元素 */
    font-size: 14px;  /* 字体大小14像素 */
    color: #8d6e63;  /* 棕色文字 */
    padding-top: 15px;  /* 顶部内边距15像素 */
    border-top: 1px solid #ffebee;  /* 顶部1像素浅红色边框 */
}

/* 语录操作按钮容器样式 */
.quote-actions {
    display: flex;  /* 弹性布局 */
    gap: 10px;  /* 子元素之间间距10像素 */
}

/* 操作按钮通用样式 */
.action-btn {
    padding: 6px 12px;  /* 内边距：上下6像素，左右12像素 */
    border: none;  /* 无边框 */
    border-radius: 6px;  /* 6像素圆角 */
    font-size: 14px;  /* 字体大小14像素 */
    cursor: pointer;  /* 鼠标悬停时显示手形指针 */
    font-weight: bold;  /* 文字加粗 */
    transition: background-color 0.3s;  /* 背景颜色0.3秒过渡效果 */
}

/* 编辑按钮样式 */
.edit-btn {
    background-color: #ffb74d;  /* 橙色背景 */
    color: #5d4037;  /* 深棕色文字 */
}

/* 编辑按钮悬停效果 */
.edit-btn:hover {
    background-color: #ffcc80;  /* 悬停时背景变为浅橙色 */
}

/* 删除按钮样式 */
.delete-btn {
    background-color: #ef5350;  /* 红色背景 */
    color: white;  /* 白色文字 */
}

/* 删除按钮悬停效果 */
.delete-btn:hover {
    background-color: #f44336;  /* 悬停时背景变为亮红色 */
}

/* 空状态提示样式（没有语录时显示） */
.empty-state {
    text-align: center;  /* 文字水平居中 */
    padding: 50px 20px;  /* 内边距：上下50像素，左右20像素 */
    color: #8d6e63;  /* 棕色文字 */
    font-size: 18px;  /* 字体大小18像素 */
    background-color: white;  /* 白色背景 */
    border-radius: 12px;  /* 12像素圆角 */
    border: 1px dashed #ffccbc;  /* 1像素浅橙色虚线边框 */
}

/* 空状态提示前的装饰符号 */
.empty-state::before {
    content: "「」";  /* 中文引号作为装饰符号 */
    font-size: 40px;  /* 字体大小40像素 */
    color: #ffccbc;  /* 浅橙色 */
    display: block;  /* 块级显示 */
    margin-bottom: 20px;  /* 底部外边距20像素 */
}

/* 空状态提示悬停时装饰符号效果 */
.empty-state:hover::before {
    color: #ff9800;  /* 悬停时颜色变为橙色 */
    transform: scale(1.1);  /* 放大1.1倍 */
}

/* 响应式设计：屏幕宽度小于等于768像素时的样式 */
@media (max-width: 768px) {
    /* 留言墙容器响应式样式 */
    .message-container {
        padding: 15px 20px !important;  /* 缩小内边距：上下15像素，左右20像素 */
    }
    
    /* 语录网格响应式样式 */
    .quotes-grid {
        grid-template-columns: 1fr;  /* 改为单列布局 */
    }
    
    /* 语录列表头部响应式样式 */
    .quotes-header {
        flex-direction: column;  /* 改为垂直布局 */
        align-items: stretch;  /* 子元素拉伸填充 */
        gap: 15px;  /* 子元素之间间距15像素 */
    }
    
    /* 搜索和筛选区域响应式样式 */
    .search-filter {
        flex-direction: column;  /* 改为垂直布局 */
    }
    
    /* 搜索输入框响应式样式 */
    .search-filter input {
        width: 100%;  /* 宽度100%填充父元素 */
    }
    
    /* 表单按钮容器响应式样式 */
    .form-buttons {
        flex-direction: column;  /* 改为垂直布局 */
    }
}