/* 🎨 软件配色规范 - 黄黑白主题 */
:root {
    /* 主色系 (Core Colors) */
    --color-primary: #F5D830; /* 品牌黄 */
    --color-black: #231815;   /* 黑色 */
    --color-white: #FFFFFF;   /* 白色 */

    /* 辅助色系 (States) */
    --color-error: #E53935;   /* 错误/危险 */
    --color-warning: #FB8C00; /* 警告/提醒 */
    --color-success: #43A047; /* 成功 */
    --color-info: #1E88E5;    /* 信息 */

    /* 中性色 (Neutral) */
    --color-gray-dark: #333333;     /* 二级标题 */
    --color-gray: #555555;          /* 正文 */
    --color-gray-light: #888888;    /* 辅助信息 */
    --color-disabled-bg: #E0E0E0;   /* 禁用背景 */
    --color-disabled-text: #9E9E9E; /* 禁用文字 */
    
    /* 背景层级 */
    --color-bg-module: #F5F5F5;     /* 模块区域背景 */
    --color-bg-page: #ffffff;       /* 页面主背景 */
    --color-border: #CCCCCC;        /* 默认边框 */
    
    /* 交互状态颜色 */
    --color-primary-hover: #F0CC1A; /* 主色悬停态 */
    --color-primary-gradient: #E6C32A; /* 主色渐变 */
    --color-bg-hover: #F8F9FA;      /* 悬停背景 */
    
    /* 半透明效果 */
    --color-primary-alpha-25: rgba(245, 216, 48, 0.25);
    --color-error-alpha-25: rgba(229, 57, 53, 0.25);
    --color-black-alpha-80: rgba(35, 24, 21, 0.8);
    --color-info-alpha-10: rgba(30, 136, 229, 0.1);
    
    /* 阴影和边框 */
    --border-alpha-light: rgba(0, 0, 0, 0.125);
    --shadow-light: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    
    /* 表格边框 */
    --color-border-table: #dee2e6;
    
    /* 自定义提示颜色 - 不同深浅的浅黄色 */
    --color-alert-success: #FFF9E6;      /* 最浅黄色 - 成功提示 */
    --color-alert-warning: #FFF3CD;      /* 中等黄色 - 警告提示 */
    --color-alert-danger: #FCF4DD;       /* 偏橙黄色 - 错误提示 */
    --color-alert-info: #F9F7E6;         /* 淡黄色 - 信息提示 */
}

/* 全局样式 */
body {
    background-color: var(--color-white);
    color: var(--color-gray);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    background-color: var(--color-bg-page);
}

/* 文字颜色分级 */
h1, .h1 {
    color: var(--color-black);
    font-weight: bold;
}

h2, .h2, h3, .h3 {
    color: var(--color-gray-dark);
}

.text-muted {
    color: var(--color-gray-light) !important;
}

/* 按钮样式 (Button) */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-black);
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-black);
}

.btn-secondary {
    background-color: var(--color-white);
    border-color: var(--color-black);
    color: var(--color-black);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-bg-hover);
    border-color: var(--color-black);
    color: var(--color-black);
}

.btn-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-white);
}

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-white);
}

.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-white);
}

.btn:disabled, .btn.disabled {
    background-color: var(--color-disabled-bg);
    border-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* 输入框样式 (Input) */
.form-control {
    border: 1px solid var(--color-border);
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-primary-alpha-25);
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 0.2rem var(--color-error-alpha-25);
}

.invalid-feedback {
    color: var(--color-error);
}

/* 通知/消息样式 (Toast/Alert) */
.alert-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.alert-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-white);
}

.alert-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-white);
}

.alert-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-white);
}

/* 导航栏样式 */
.navbar {
    background-color: var(--color-black) !important;
}

.navbar .navbar-brand {
    color: var(--color-white) !important;
    font-weight: bold;
}

.navbar .nav-link {
    color: var(--color-white) !important;
}

.navbar .nav-link:hover, .navbar .nav-link:focus {
    color: var(--color-primary) !important;
}

.navbar .dropdown-menu {
    border-color: var(--color-border);
}

/* 修复导航栏下拉项中图标与文字对齐问题 */
.navbar .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 图标和文字间距 */
    white-space: nowrap; /* 防止图标换行导致错位 */
}

.navbar .dropdown-menu .dropdown-item i,
.navbar .dropdown-menu .dropdown-item .fa,
.navbar .dropdown-menu .dropdown-item .fas {
    width: 1.25rem; /* 固定图标占位宽度，保证对齐 */
    text-align: center;
    font-size: 1rem; /* 统一图标大小 */
}

/* 如果某些下拉项使用了 me-2 等间距类，保持兼容但以更一致的间距为准 */
.navbar .dropdown-menu .dropdown-item > .me-2 {
    margin-right: 0.25rem !important;
}

.navbar .badge {
    background-color: var(--color-error) !important;
}

/* 卡片样式 */
.card {
    background-color: var(--color-white);
    border: 1px solid var(--border-alpha-light);
    box-shadow: var(--shadow-light);
}

.card:hover {
    box-shadow: var(--shadow-hover);
    transition: box-shadow 0.15s ease-in-out;
}

.card-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--border-alpha-light);
    color: var(--color-black);
    font-weight: 600;
}

/* 统计卡片 */
.stats-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-gradient) 100%);
    color: var(--color-black);
    border: none;
}

.stats-card .card-body {
    padding: 1.5rem;
}

.stats-card .display-4 {
    font-weight: 700;
}

/* 表格样式 */
.table-responsive {
    border-radius: 0.375rem;
    overflow: visible; /* 修改为 visible 以防止下拉菜单被遮挡 */
}

/* 修复表格中下拉菜单的层级问题 */
.table .dropdown-menu {
    z-index: 1050 !important; /* 确保在表格和其他元素之上 */
    position: absolute !important;
}

.table .btn-group {
    position: relative;
}

/* 确保下拉菜单不被卡片容器遮挡 */
.card-body {
    overflow: visible;
}

.table th {
    background-color: var(--color-white);
    color: var(--color-black);
    font-weight: 600;
    border-bottom: 2px solid var(--color-border-table);
}

.table td {
    color: var(--color-gray);
}

/* 用户权限标签 */
.user-type-guest {
    background-color: var(--color-gray-light);
    color: var(--color-white);
}

.user-type-user {
    background-color: var(--color-success);
    color: var(--color-white);
}

.user-type-manager {
    background-color: var(--color-warning);
    color: var(--color-white);
}

.user-type-super_admin {
    background-color: var(--color-error);
    color: var(--color-white);
    font-weight: bold;
    border: 1px solid var(--color-error);
}

/* 兼容旧的admin样式 */
.user-type-admin {
    background-color: var(--color-warning);
    color: var(--color-white);
}

/* 状态标签 - 只应用于.badge元素 */
.badge.status-pending {
    background-color: var(--color-warning);
    color: var(--color-white);
}

.badge.status-processing {
    background-color: var(--color-info);
    color: var(--color-white);
}

.badge.status-replied {
    background-color: var(--color-success);
    color: var(--color-white);
}

.badge.status-closed {
    background-color: var(--color-gray-light);
    color: var(--color-white);
}

/* 搜索表单 */
.search-form {
    background-color: var(--color-white);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
}

/* 分页样式 */
.pagination {
    justify-content: center;
    margin-top: 2rem;
}

.page-link {
    color: var(--color-black);
    border-color: var(--color-border);
}

.page-link:hover {
    color: var(--color-black);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-black);
}

/* 消息样式 */
.message-unread {
    background-color: var(--color-white);
    border-left: 4px solid var(--color-primary);
}

.message-read {
    opacity: 0.8;
}

/* 反馈卡片 */
.feedback-card {
    border-left: 4px solid var(--color-primary);
    background-color: var(--color-white);
}

.feedback-card.status-pending {
    border-left-color: var(--color-warning);
}

.feedback-card.status-processing {
    border-left-color: var(--color-info);
}

.feedback-card.status-replied {
    border-left-color: var(--color-success);
}

.feedback-card.status-closed {
    border-left-color: var(--color-gray-light);
}

/* 确保反馈卡片内的文字颜色正确 */
.feedback-card .card-body,
.feedback-card .card-header,
.feedback-card .card-footer {
    color: var(--color-gray);
}

.feedback-card .card-title {
    color: var(--color-gray-dark);
}

.feedback-card .text-muted {
    color: var(--color-gray-light) !important;
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-primary-alpha-25);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 工具提示 */
.tooltip-inner {
    background-color: var(--color-black);
}

/* 页脚样式 */
footer {
    background-color: var(--color-white) !important;
    color: var(--color-gray);
    border-top: 1px solid var(--color-border);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn {
        padding: 0.375rem 0.75rem;
    }
    
    h1, .h1 {
        font-size: 1.75rem;
    }
}

/* 自定义提示样式 - 使用不同深浅的浅黄色 */
.custom-alert {
    border: 2px solid var(--color-black);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--color-black);
    font-weight: 500;
}

.custom-alert-success {
    background-color: var(--color-alert-success);
    border-color: var(--color-black);
}

.custom-alert-warning {
    background-color: var(--color-alert-warning);
    border-color: var(--color-black);
}

.custom-alert-danger {
    background-color: var(--color-alert-danger);
    border-color: var(--color-black);
}

.custom-alert-info {
    background-color: var(--color-alert-info);
    border-color: var(--color-black);
}

/* 图片占位符样式 */
.image-placeholder {
    width: 200px;
    height: 150px;
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-module);
    color: var(--color-gray-light);
    font-size: 2rem;
}

.image-placeholder i {
    opacity: 0.5;
}