/* ========== 全局通用基础样式（全系统共用） ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
    background: #f1f3f5;
    font-size: 14px;
    color: #222;
}
a {
    text-decoration: none;
}
input, select, button, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* 卡片容器（所有页面统一） */
.card-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
}
.card-box h4 {
    margin-bottom: 16px;
    font-weight: 600;
}

/* 表单通用 */
.form-item {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}
.form-item label {
    width: 110px;
}
.form-item input,
.form-item select,
.form-item textarea {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}
.form-item textarea {
    resize: vertical;
}

/* 按钮通用 */
.btn {
    padding: 7px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}
/* 主按钮：品牌正红，纯色无渐变 */
.btn-primary {
    background-color: #c4001a;
    color: #fff;
}
.btn-primary:hover {
    background-color: #a80016;
}
.btn-default {
    border:1px solid #ccc;
    color:#333;
    background:#fff;
}

/* 表格通用 */
.common-table{
    width:100%;
    border-collapse:collapse;
    margin-top:16px;
}
.common-table th, .common-table td{
    border:1px solid #e5e7eb;
    padding:11px;
    text-align:center;
}
.common-table th{
    background:#f7f8fa;
}

/* 筛选标签栏 */
.filter-bar{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:12px;
    flex-wrap:wrap;
}
.filter-bar a{
    padding:6px 14px;
    border:1px solid #c4001a;
    border-radius:4px;
    text-decoration:none;
    color:#c4001a;
}
.filter-bar a.active{
    background:#c4001a;
    color:#fff;
}

/* 搜索行 */
.search-row{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:16px;
    flex-wrap: wrap;
}

/* 分页 */
.page-bar{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:16px;
}
.page-bar a{
    color:#c4001a;
}
.page-bar a:hover{
    color:#a80016;
}

/* 操作链接 */
.operate-link{
    color:#c4001a;
    text-decoration:none;
    margin:0 4px;
}
.operate-link:hover{
    color:#a80016;
    text-decoration: underline;
}

/* radio单选组 */
.radio-group{
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
}

/* 强制表单控件字体统一 */
table, input, select, button, textarea {
    font-family: inherit;
    font-size: 14px !important;
}

/* ========== 无侧边栏页面公共容器样式（base.html 使用） ========== */
.page-center-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.page-normal-wrap{
    padding:20px;
}
.err-text{
    color:#dc3545;
    margin-bottom:24px;
    line-height:1.6;
}

/* ========== 左侧侧边栏样式【方案一 浅灰商务】 ========== */
.sidebar {
    background-color: #f5f7fa;
    border-right: 1px solid #e4e7ed;
}
.sidebar .sidebar-title{
    color:#303133;
    font-weight:600;
}
.sidebar .menu-item {
    color: #606266;
    font-size: 14px;
    background: transparent;
}
.sidebar .menu-item:hover {
    background-color: #ecf0f5;
    color: #c4001a;
}
.sidebar .menu-item.active {
    color: #c4001a;
    background-color: #fdf2f3;
    border-left: 3px solid #c4001a;
}
.sidebar .menu-item .arrow{
    color:#909399;
}

/* ========== 顶部导航栏 - 退出登录链接 ========== */
.top-header .logout{
    color:#c4001a;
}
.top-header .logout:hover{
    color:#a80016;
    text-decoration: underline;
}


/* ========== 下级代理商区域分配树形页面样式 ========== */
.agent-region-container {
    width: 96%;
    max-width: 1000px;
    margin: 20px auto;
    background: #fff;
    padding: 24px;
    border-radius: 6px;
}
.agent-region-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #c4001a;
    color: #333;
}
.agent-region-info-row {
    margin-bottom: 14px;
    font-size: 15px;
}
.agent-region-info-row span.label {
    color: #666;
    min-width: 90px;
    display: inline-block;
}
.tree-wrap {
    border: 1px solid #e5e7eb;
    padding: 16px;
    max-height: 600px;
    overflow: auto;
    width:100vw;
    margin: 20px 0;
}
.tree-item {
    margin: 6px 0;
}
.tree-level-1 {
    padding: 6px 0;
    font-weight: bold;
}
.tree-level-2 {
    padding: 4px 0;
    margin-left: 24px;
}
.tree-level-3 {
    padding: 3px 0;
    margin-left: 48px;
    color: #555;
}
.btn-box {
    margin-top: 24px;
    display: flex;
    gap: 12px;
}
.btn-save {
    background: #c4001a;
    color: #fff;
    border: none;
    padding: 9px 26px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
}
.btn-back {
    background: #888;
    color: #fff;
    border: none;
    padding: 9px 26px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
}
input[type="checkbox"] {
    margin-right: 6px;
}

.area-checkbox {
    margin-right:6px;
}
.child-container {
    margin-left: 4px;
}
.tree-toggle:hover {
    color:#880000 !important;
}


/* ========== 预约工单详情页面 ========== */
.card-box{
    max-width:760px;
    width:100%;
}
.form-row{
    display:flex;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #eee;
}
.form-row label{
    width:120px;
    color:#333;
}
.img-row{
    display:flex;
    gap:10px;
    flex:1;
    flex-wrap:wrap;
}
.img-row img{
    height:100px;
    cursor:pointer;
    border:1px solid #ccc;
}
.back-btn{
    margin-top:24px;
}
/* 审核按钮组 */
.btn-group-audit{
    margin-top:20px;
    display:flex;
    gap:16px;
}
.btn-accept{
    background:#009944;
    color:#fff;
    border:none;
    padding:8px 24px;
    border-radius:4px;
    cursor:pointer;
}
.btn-accept:hover{
    background:#007c38;
}
.btn-reject{
    background:#c4001a;
    color:#fff;
    border:none;
    padding:8px 24px;
    border-radius:4px;
    cursor:pointer;
}
.btn-reject:hover{
    background:#a80016;
}

/* 图片放大弹窗遮罩 */
#image-modal{
    position:fixed;
    left:0;top:0;right:0;bottom:0;
    background:rgba(0,0,0,0.75);
    display:none;
    z-index:9999;
    align-items:center;
    justify-content:center;
}
#image-modal img{
    max-width:90%;
    max-height:90%;
}
#image-modal .close{
    position:absolute;
    top:20px;
    right:30px;
    color:#fff;
    font-size:30px;
    cursor:pointer;
}

/* ========== 管理员工单详情分组布局（参考移动端分组UI） ========== */
.admin-order-card{
    max-width:820px;
    width:100%;
    background:#fff;
    padding:24px;
    border-radius:8px;
}
.admin-section-title{
    font-size:16px;
    font-weight:bold;
    margin-bottom:12px;
    color:#c4001a;
    border-left:4px solid #c4001a;
    padding-left:8px;
}
.admin-order-row{
    display:flex;
    padding:8px 0;
}
.admin-order-row .label{
    width:130px;
    color:#444;
    flex-shrink:0;
}
.admin-order-row .value{
    flex:1;
    color:#222;
}
.admin-hr{
    margin:18px 0;
    border:0;
    border-top:1px solid #eee;
}

/* 图片预览容器，九宫格缩略 */
.admin-img-wrap{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:8px 0 16px;
}
.admin-img-wrap img.thumb-img{
    height:110px;
    cursor:pointer;
    border:1px solid #ddd;
}
.admin-img-group-title{
    font-weight:bold;
    margin:10px 0 6px;
}

/* 审核按钮组 */
.btn-group-audit{
    margin-top:24px;
    display:flex;
    gap:16px;
}
.btn-accept{
    background:#009944;
    color:#fff;
    border:none;
    padding:8px 24px;
    border-radius:4px;
    cursor:pointer;
}
.btn-accept:hover{
    background:#007c38;
}
.btn-reject{
    background:#c4001a;
    color:#fff;
    border:none;
    padding:8px 24px;
    border-radius:4px;
    cursor:pointer;
}
.btn-reject:hover{
    background:#a80016;
}
.back-btn{
    margin-top:24px;
}

/* 大图弹窗 */
#admin-image-modal{
    position:fixed;
    left:0;top:0;right:0;bottom:0;
    background:rgba(0,0,0,0.78);
    display:none;
    z-index:9999;
    align-items:center;
    justify-content:center;
}
#admin-image-modal img{
    max-width:92%;
    max-height:92vh;
}
#admin-image-modal .close{
    position:absolute;
    top:20px;
    right:30px;
    color:#fff;
    font-size:32px;
    cursor:pointer;
}