/* Freelance Hub 完整样式文件 - 适配明暗模式 + 角色选择优化 */
/* 替换路径：public/assets/css/freelance-hub-public.css */

/* ==================== 基础通用样式 ==================== */
.fh-job-single { max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #eee; }
.fh-job-meta { margin: 10px 0; color: #666; }
.fh-job-filters { max-width: 1000px; margin: 20px auto; padding: 16px; border: 1px solid #eee; background: #fafafa; }
.fh-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fh-filter-field { flex: 1 1 160px; }
.fh-filter-input, .fh-filter-select { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; }
.fh-filter-button { width: 100%; padding: 9px 12px; border: 0; border-radius: 4px; background: #1e87f0; color: #fff; cursor: pointer; }

.freelance-hub-job-list { max-width: 1000px; margin: 16px auto; padding: 0; list-style: none; }
.freelance-hub-job-item { padding: 16px; border: 1px solid #eee; margin-bottom: 12px; background: #fff; }
.fh-job-title a { font-weight: 600; color: #222; text-decoration: none; }
.fh-job-desc { margin-top: 8px; color: #555; }
.fh-job-meta-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; color: #666; font-size: 13px; }

.fh-bounty-notice { margin-top: 12px; padding: 12px; border: 1px dashed #f0b429; background: #fff8e6; }
.fh-bounty-notice-title { font-weight: 600; margin-bottom: 6px; }
.fh-bounty-notice-content p { margin: 6px 0 0; }

.fh-messaging { display: flex; gap: 20px; max-width: 1000px; margin: 20px auto; }
.fh-conversation-list { width: 250px; border: 1px solid #eee; padding: 10px; }
.fh-message-area { flex: 1; border: 1px solid #eee; padding: 10px; }
.fh-message-list { height: 400px; overflow-y: auto; margin-bottom: 10px; }
.fh-message-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fh-message-input textarea { width: 100%; height: 80px; margin-bottom: 0; }
.fh-message-input input[type="file"],
.fh-message-input button {
    width: 100%;
    box-sizing: border-box;
}
.fh-message-input button {
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: #1e87f0;
    color: #fff;
    cursor: pointer;
}

/* ==================== 表单基础样式（明模式默认） ==================== */
.freelance-hub-role-switch,
.freelance-hub-kyc-identity,
.freelance-hub-kyc-enterprise,
.freelance-hub-review,
.freelance-hub-dispute,
#freelance-hub-submit-job-form,
#freelance-hub-bid-form {
    max-width: 1000px;
    margin: 20px auto;
}

#freelance-hub-submit-job-form,
#freelance-hub-bid-form,
.freelance-hub-role-switch form,
.freelance-hub-kyc-identity form,
.freelance-hub-kyc-enterprise form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 明模式表单元素：默认样式，文字正常可见 */
#freelance-hub-submit-job-form input,
#freelance-hub-submit-job-form select,
#freelance-hub-submit-job-form textarea,
#freelance-hub-bid-form input,
#freelance-hub-bid-form select,
#freelance-hub-bid-form textarea,
.freelance-hub-role-switch input,
.freelance-hub-role-switch select,
.freelance-hub-role-switch textarea,
.freelance-hub-kyc-identity input,
.freelance-hub-kyc-identity select,
.freelance-hub-kyc-identity textarea,
.freelance-hub-kyc-enterprise input,
.freelance-hub-kyc-enterprise select,
.freelance-hub-kyc-enterprise textarea,
.freelance-hub-review input,
.freelance-hub-review textarea,
.freelance-hub-dispute textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    line-height: 1.4;
    color: #333; /* 明模式文字默认色 */
}

#freelance-hub-submit-job-form textarea,
#freelance-hub-bid-form textarea,
.freelance-hub-review textarea,
.freelance-hub-dispute textarea {
    min-height: 110px;
    resize: vertical;
    margin-bottom: 12px;
}

#freelance-hub-submit-job-form button,
#freelance-hub-bid-form button,
.freelance-hub-role-switch button,
.freelance-hub-kyc-identity button,
.freelance-hub-kyc-enterprise button,
.freelance-hub-review button,
.freelance-hub-dispute button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: #1e87f0;
    color: #fff;
    cursor: pointer;
}

/* ==================== 核心修正1：角色选择按钮优化 ==================== */
.freelance-hub-role-switch form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 选项容器：左对齐，仅占内容宽度 */
.freelance-hub-role-switch .role-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
}

/* 单个选项：点击范围仅包含圈+文字，不占整行 */
.freelance-hub-role-switch label {
    display: inline-flex; /* 行内布局，不占整行 */
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    padding: 0 !important;
    margin: 0 !important;
    width: fit-content; /* 宽度仅适配内容（圈+文字） */
    height: 14px;
    line-height: 14px;
}

/* 单选按钮：尺寸适中，选中无尺寸波动 */
.freelance-hub-role-switch input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border: 1px solid #999 !important;
    border-radius: 50% !important;
    background: #fff !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    position: static !important;
    top: 0 !important;
    left: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* 选中状态：仅内部样式变化，外层尺寸不变 */
.freelance-hub-role-switch input[type="radio"]:checked {
    background-color: #007cba !important;
    background-clip: content-box !important;
    padding: 2px !important;
    border-color: #007cba !important;
}

/* ==================== 核心修正2：暗黑模式表单适配（关键） ==================== */
/* 【重要】替换下面的 .dark 为你网站暗黑模式的body类名！
   查找方法：切换暗黑模式后，F12检查body标签的class，比如 .theme-dark / .dark-mode 等 */
body.dark #freelance-hub-submit-job-form input,
body.dark #freelance-hub-submit-job-form select,
body.dark #freelance-hub-submit-job-form textarea {
    background-color: #374151 !important; /* 暗黑模式输入框背景（深灰，与页面区分） */
    border-color: #4B5563 !important;     /* 暗黑模式边框（中灰，轮廓清晰） */
    color: #E5E7EB !important;            /* 暗黑模式输入文字（浅灰，高对比度） */
}

/* 暗黑模式占位符文字（提示文字）- 兼容所有浏览器 */
body.dark #freelance-hub-submit-job-form input::placeholder,
body.dark #freelance-hub-submit-job-form textarea::placeholder,
body.dark #freelance-hub-submit-job-form select::placeholder {
    color: #D1D5DB !important; /* 占位符文字（比输入文字稍浅，清晰可见） */
    opacity: 1 !important;     /* 强制不透明，消除蒙层感 */
}
/* 兼容WebKit（Chrome/Safari/Edge） */
body.dark #freelance-hub-submit-job-form input::-webkit-input-placeholder,
body.dark #freelance-hub-submit-job-form textarea::-webkit-input-placeholder,
body.dark #freelance-hub-submit-job-form select::-webkit-input-placeholder {
    color: #D1D5DB !important;
    opacity: 1 !important;
}
/* 兼容Firefox */
body.dark #freelance-hub-submit-job-form input::-moz-placeholder,
body.dark #freelance-hub-submit-job-form textarea::-moz-placeholder,
body.dark #freelance-hub-submit-job-form select::-moz-placeholder {
    color: #D1D5DB !important;
    opacity: 1 !important;
}
/* 兼容旧版IE/Edge */
body.dark #freelance-hub-submit-job-form input:-ms-input-placeholder,
body.dark #freelance-hub-submit-job-form textarea:-ms-input-placeholder,
body.dark #freelance-hub-submit-job-form select:-ms-input-placeholder {
    color: #D1D5DB !important;
    opacity: 1 !important;
}

/* 暗黑模式下拉框选项：避免选项文字看不清 */
body.dark #freelance-hub-submit-job-form select option {
    color: #1F2937 !important;    /* 选项文字（深灰，清晰） */
    background-color: #FFFFFF !important; /* 选项背景（白色，与文字对比） */
}

/* 兼容系统级暗黑模式（兜底） */
@media (prefers-color-scheme: dark) {
    #freelance-hub-submit-job-form input,
    #freelance-hub-submit-job-form select,
    #freelance-hub-submit-job-form textarea {
        background-color: #374151 !important;
        border-color: #4B5563 !important;
        color: #E5E7EB !important;
    }
    #freelance-hub-submit-job-form input::placeholder,
    #freelance-hub-submit-job-form textarea::placeholder {
        color: #D1D5DB !important;
        opacity: 1 !important;
    }
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 768px) {
    .fh-messaging {
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }
    .fh-conversation-list { width: 100%; }

    .fh-job-single,
    .fh-job-filters,
    .freelance-hub-job-list,
    .freelance-hub-role-switch,
    .freelance-hub-kyc-identity,
    .freelance-hub-kyc-enterprise,
    .freelance-hub-review,
    .freelance-hub-dispute,
    #freelance-hub-submit-job-form,
    #freelance-hub-bid-form {
        padding-left: 12px;
        padding-right: 12px;
    }

    .fh-filter-row { flex-direction: column; gap: 8px; }
    .fh-filter-field { flex: 1 1 auto; }
    .freelance-hub-job-item { padding: 12px; }
    .fh-job-meta-row { flex-direction: column; gap: 6px; }
    .fh-bounty-notice { margin-top: 8px; }
    .freelance-hub-role-switch .role-options { gap: 8px; }
}

/* ========== 修正1：悬赏任务复选框对号下偏问题 ========== */
/* 假设复选框的class为 .fh-checkbox 或类似，这里用通用选择器覆盖 */
#freelance-hub-submit-job-form input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #999 !important;
    border-radius: 3px !important;
    background: #fff !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#freelance-hub-submit-job-form input[type="checkbox"]:checked {
    background-color: #007cba !important;
    border-color: #007cba !important;
}

#freelance-hub-submit-job-form input[type="checkbox"]:checked::after {
    content: "✓" !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 暗黑模式下复选框样式 */
body.dark #freelance-hub-submit-job-form input[type="checkbox"] {
    background-color: #374151 !important;
    border-color: #4B5563 !important;
}

body.dark #freelance-hub-submit-job-form input[type="checkbox"]:checked {
    background-color: #007cba !important;
    border-color: #007cba !important;
}

/* ========== 精准修正1：悬赏任务复选框对号下偏（适配明暗模式） ========== */
#freelance-hub-submit-job-form input[type="checkbox"] {
    /* 重置默认样式，统一尺寸 */
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #999 !important;
    border-radius: 3px !important;
    background: #fff !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    /* 让对号居中的核心：flex布局 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* 复选框选中样式 */
#freelance-hub-submit-job-form input[type="checkbox"]:checked {
    background-color: #007cba !important;
    border-color: #007cba !important;
}

/* 自定义居中对号，彻底解决下偏 */
#freelance-hub-submit-job-form input[type="checkbox"]:checked::after {
    content: "✓" !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    /* 绝对居中，无偏移 */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* ========== 精准修正2：悬赏说明区域（fh-bounty-notice）文字可见性（适配明暗模式） ========== */
/* 明模式：保持原有视觉，强化文字对比度 */
.fh-bounty-notice {
    background-color: #fff8e6 !important; /* 明模式浅黄色背景 */
    border: 1px dashed #f0b429 !important; /* 明模式边框色 */
    padding: 16px !important;
    margin: 16px 0 !important;
    border-radius: 6px !important;
}

.fh-bounty-notice-title {
    font-weight: 600 !important;
    color: #d69e2e !important; /* 明模式标题色（醒目） */
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

.fh-bounty-notice-content {
    color: #5a5a5a !important; /* 明模式文字色（深灰，清晰） */
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.fh-bounty-notice-content p {
    margin: 6px 0 !important;
}

/* ========== 暗黑模式下的适配（替换 .dark 为你实际的暗黑类名） ========== */
/* 暗黑模式复选框 */
body.dark #freelance-hub-submit-job-form input[type="checkbox"] {
    background-color: #374151 !important; /* 暗黑模式复选框背景 */
    border-color: #4B5563 !important; /* 暗黑模式边框 */
}

body.dark #freelance-hub-submit-job-form input[type="checkbox"]:checked {
    background-color: #007cba !important;
    border-color: #007cba !important;
}

/* 暗黑模式悬赏说明区域 */
body.dark .fh-bounty-notice {
    background-color: #2d3748 !important; /* 暗黑模式背景（深灰） */
    border-color: #4B5563 !important; /* 暗黑模式边框（中灰） */
}

body.dark .fh-bounty-notice-title {
    color: #fbbf24 !important; /* 暗黑模式标题（亮黄，醒目） */
}

body.dark .fh-bounty-notice-content {
    color: #e5e7eb !important; /* 暗黑模式文字（浅灰，高对比度） */
}