:root {
    --vc-page-bg-color: #F6F6F7;
    --vc-menu-main-bg: #1F2339;
    --vc-menu-main-font-color: #838A9B;
    --vc-menu-main-bg-active-color: #3E77FC;
    --vc-menu-main-active-font-color: #FFFFFF;
    --vc-menu-main-title-font-color: #FFFFFF;
    --vc-menu-sub-bg: #FFFFFF;
    --vc-menu-sub-font-color: #545761;
    --vc-menu-sub-bg-active-color: #EAF0FE;
    --vc-menu-sub-active-font-color: #3E77FC;
    --vc-menu-sub-title-font-color: #4F525C;
    --vc-menu-sub-footer: #F6F6F7;
    --vc-nav-bg: #1D1F2D;
    --vc-nav-color: #888888;
    --vc-nav-active-color: #FFFFFF;
    --vc-org-bg-active-color: #EAF0FE;
}

.data-card {
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    width: 150px;
    height: 80px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.data-card .label {
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 500;
}
.data-card .value {
    font-family: sans-serif;
    font-size: 17px;
    font-weight: bold;
}

.bg-blue-100 {
    background-color: #dbeafe !important;
    color: #007bff;
}

.bg-blue-200 {
    background-color: #4190fa !important;
    color: #007bff;
}

.bg-green-100{
    background-color: #e5fced !important;
    color: #2c6926;
}

.bg-green-200{
    background-color: #059669 !important;
    color: #2c6926;
}

.bg-purple-100{
    background-color: 	#f3e8ff !important;
    color: #9b26e8;
}

.margin-0 {
    margin: 0;
}

.margin-lr-0 {
    margin-left: 0;
    margin-right: 0;
}

.margin-xs {
    margin: 5px;
}

.margin-sm {
    margin: 10px;
}

.margin {
    margin: 15px;
}

.margin-lg {
    margin: 20px;
}

.margin-xl {
    margin: 25px;
}

.margin-top-xs {
    margin-top: 5px;
}

.margin-top-sm {
    margin-top: 10px;
}

.margin-top-sm:hover {
    cursor: pointer;
    /*background-color: red;*/
}

.margin-top {
    margin-top: 15px;
}

.margin-top-lg {
    margin-top: 20px;
}

.margin-top-xl {
    margin-top: 25px;
}

.margin-right-xs {
    margin-right: 5px;
}

.margin-right-sm {
    margin-right: 10px;
}

.margin-right {
    margin-right: 15px;
}

.margin-right-lg {
    margin-right: 20px;
}

.margin-right-xl {
    margin-right: 25px;
}

.margin-bottom-0 {
    margin-bottom: 0px;
}

.margin-bottom-xs {
    margin-bottom: 5px;
}

.margin-bottom-sm {
    margin-bottom: 10px;
}

.margin-bottom {
    margin-bottom: 15px;
}

.margin-bottom-lg {
    margin-bottom: 20px;
}

.margin-bottom-xl {
    margin-bottom: 25px;
}

.margin-left-0 {
    margin-left: 0px;
}

.margin-left-xs {
    margin-left: 5px;
}

.margin-left-sm {
    margin-left: 10px;
}

.margin-left {
    margin-left: 15px;
}

.margin-left-lg {
    margin-left: 20px;
}

.margin-left-xl {
    margin-left: 25upx;
}

.margin-lr-xs {
    margin-left: 5px;
    margin-right: 10upx;
}

.margin-lr-sm {
    margin-left: 10px;
    margin-right: 10px;
}

.margin-lr {
    margin-left: 15px;
    margin-right: 15px;
}

.margin-lr-lg {
    margin-left: 20px;
    margin-right: 20px;
}

.margin-lr-xl {
    margin-left: 25px;
    margin-right: 25px;
}

.margin-tb-xs {
    margin-top: 5px;
    margin-bottom: 5px;
}

.margin-tb-sm {
    margin-top: 10px;
    margin-bottom: 10px;
}

.margin-tb {
    margin-top: 15px;
    margin-bottom: 15px;
}

.margin-tb-lg {
    margin-top: 20px;
    margin-bottom: 20px;
}

.margin-tb-xl {
    margin-top: 25px;
    margin-bottom: 25px;
}

.padding-l-60 {
    padding-left: 60px;
}

.padding-0 {
    padding: 0;
}

.padding-lr-0 {
    padding-left: 0;
    padding-right: 0;
}

.padding-r-0 {
    padding-right: 0;
}

.padding-l-0 {
    padding-left: 0;
}

.padding-l-60 {
    padding-left: 60px;
}

.padding-xs {
    padding: 5px;
}

.padding-sm {
    padding: 10px;
}

.padding {
    padding: 15px;
}

.padding-lg {
    padding: 20px;
}

.padding-xl {
    padding: 25px;
}

.padding-top-xs {
    padding-top: 5px;
}

.padding-top-sm {
    padding-top: 10px;
}

.padding-top {
    padding-top: 15px;
}

.padding-top-lg {
    padding-top: 20px;
}

.padding-top-xl {
    padding-top: 25px;
}

.padding-right-xs {
    padding-right: 5px;
}

.padding-right-sm {
    padding-right: 10px;
}

.padding-right {
    padding-right: 15px;
}

.padding-right-lg {
    padding-right: 20px;
}

.padding-right-xl {
    padding-right: 25px;
}

.padding-bottom-xs {
    padding-bottom: 5px;
}

.padding-bottom-sm {
    padding-bottom: 10px;
}

.padding-bottom {
    padding-bottom: 15px;
}

.padding-bottom-lg {
    padding-bottom: 20px;
}

.padding-bottom-xl {
    padding-bottom: 25px;
}

.padding-left-xs {
    padding-left: 5px;
}

.padding-left-sm {
    padding-left: 10px;
}

.padding-left {
    padding-left: 15px;
}

.padding-left-lg {
    padding-left: 20px;
}

.padding-left-xl {
    padding-left: 25px;
}

.padding-lr-xs {
    padding-left: 5px;
    padding-right: 5px;
}

.padding-lr-sm {
    padding-left: 10px;
    padding-right: 10px;
}

.padding-lr {
    padding-left: 15px;
    padding-right: 15px;
}

.padding-lr-lg {
    padding-left: 20px;
    padding-right: 20px;
}

.padding-lr-xl {
    padding-left: 25px;
    padding-right: 25px;
}

.padding-tb-xs {
    padding-top: 5px;
    padding-bottom: 5px;
}

.padding-tb-sm {
    padding-top: 10px;
    padding-bottom: 10px;
}

.padding-tb {
    padding-top: 15px;
    padding-bottom: 15px;
}

.padding-tb-lg {
    padding-top: 20px;
    padding-bottom: 20px;
}

.padding-tb-xl {
    padding-top: 25px;
    padding-bottom: 25px;
}

.font-1 {
    font-size: 14px;
    font-weight: 600;
}

.font-2 {
    font-size: 18px;
    font-weight: 600;
}

.border {
    border: 1px solid #e7eaec;
}

.vc-border {
    border: 1px solid #e7eaec;
}

.border-right {
    border-right: 1px solid #e7eaec;
}

.border-top {
    border-top: 1px solid #e7eaec;
}

.border-bottom {
    border-bottom: 1px solid #e7eaec;
}

.border-left {
    border-left: 1px solid #e7eaec;
}

.flex {
    display: flex;
}

.basis-xs {
    flex-basis: 20%;
}

.basis-sm {
    flex-basis: 40%;
}

.basis-df {
    flex-basis: 50%;
}

.basis-lg {
    flex-basis: 60%;
}

.basis-xl {
    flex-basis: 80%;
}

.flex-sub {
    flex: 1;
}

.flex-twice {
    flex: 2;
}

.flex-treble {
    flex: 3;
}

.flex-direction {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

.align-stretch {
    align-items: stretch;
}

.self-start {
    align-self: flex-start;
}

.self-center {
    align-self: flex-center;
}

.self-end {
    align-self: flex-end;
}

.self-stretch {
    align-self: stretch;
}

.align-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

ul {
    padding-inline-start: 0px;
}

ul li {
    list-style-type: none;
}

.text-bold {
    font-weight: bold;
}

.text-center {
    text-align: center;
}

.text-content {
    line-height: 1.6;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-title {
    font-size: 18px;
}

.text-blue {
    color: #007bff;
}

.text-green{
    color: #2c6926;
}

.white-bg {
    background-color: #ffffff;
}

.border-bottom {
    border-bottom: 1px solid #e7eaec !important;
}

.border-radius {
    border-radius: 10px;
}

.border-radius-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.border-radius-bottom {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.hand {
    cursor: pointer;
}

.line-x {
    width: 100%;
    border-bottom: 2px solid #F6F6F7;
}

.line-y {
    height: 100%;
    border-right: 2px solid #F6F6F7;
}

.vc-input-search {
    position: absolute;
    transform: translate3d(0px, 33px, 0px);
    top: 10px;
    left: 0px;
    background-color: #fff;
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    min-height: 200px;
    z-index: 1
}

.vc-input-search .close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 20px;
    color: #007bff;
    cursor: pointer;
}

.vc-active {
    color: var(--vc-menu-main-bg-active-color);
}

html,
body,
.vc-page {
    height: 100%;
    width: 100%;
    background-color: var(--vc-page-bg-color);
}

.vc-menu {
    border-right: 1px solid #EFEFF0;
}

.vc-menu-main {
    background-color: var(--vc-menu-main-bg);
    color: var(--vc-menu-main-font-color);
    text-align: center;
    width: 80px;
    font-size: 14px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
}

.vc-menu-main::-webkit-scrollbar {
    display: none;
}

.vc-menu-main .active {
    background-color: var(--vc-menu-main-bg-active-color);
    color: var(--vc-menu-main-active-font-color);
}

.vc-menu-main ul li {
    height: 45px;
    line-height: 45px;
    cursor: pointer;
}

.vc-menu-main ul li:hover {
    background-color: var(--vc-menu-main-bg-active-color);
    color: var(--vc-menu-main-active-font-color);
}

.vc-menu-main ul li.title {
    color: var(--vc-menu-main-title-font-color);
    height: 60px;
    font-size: 24px;
    line-height: 60px;
}

.vc-menu-main ul li.title a {
    text-decoration: none;
    cursor: pointer;
    color: var(--vc-menu-main-title-font-color);
}

.vc-menu-sub {
    background-color: var(--vc-menu-sub-bg);
    color: var(--vc-menu-sub-font-color);
    text-align: start;
    width: 110px;
    font-size: 14px;
    height: 95%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
}

.vc-menu-sub::-webkit-scrollbar {
    display: none;
}

.vc-menu-sub .active {
    background-color: var(--vc-menu-sub-bg-active-color);
    color: var(--vc-menu-sub-active-font-color);
}

.vc-menu-sub ul li {
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vc-menu-sub ul li.title {
    color: var(--vc-menu-sub-title-font-color);
    height: 40px;
    font-size: 10px;
    line-height: 40px;
    text-align: center;
    padding-left: 0px;
    border-bottom: 1px solid #F2F2F3;
    margin-bottom: 10px;
}

.vc-menu-sub ul li:hover {
    background-color: var(--vc-menu-sub-bg-active-color);
    color: var(--vc-menu-sub-active-font-color);
}

.vc-menu-sub ul li.sub-footer {
    background-color: var(--vc-menu-sub-footer);
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 160px;
}

.vc-main {
    height: 100%;
    /* width: 100%; */
    flex-grow: 1;
}

.vc-nav {
    height: 50px;
    width: 100%;
    background-color: var(--vc-nav-bg);
    font-size: 14px;
    line-height: 50px;
    color: var(--vc-nav-color);
}

.vc-nav ul li {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
}

.vc-nav ul li.title {
    color: var(--vc-menu-main-title-font-color);
    height: 50px;
    font-size: 24px;
    line-height: 50px;
    /* width: 80px;
    text-align: center; */
}

.vc-nav ul li.title a {
    text-decoration: none;
    cursor: pointer;
    color: var(--vc-menu-main-title-font-color);
}

.vc-nav ul li i {
    margin-right: 5px;
}

.vc-nav ul li.active {
    color: var(--vc-nav-active-color);
    border-bottom: 2px solid var(--vc-nav-active-color) !important;
}

.vc-main .vc-main-content {
    width: 100%;
    height: 99%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.vc-menu-sub.vc-main .vc-main-content::-webkit-scrollbar {
    display: none;
}


/*.vc-main .breadcrumb ul li:active{*/


/*    background-color: red;!important*/


/*}*/

.vc-main .ibox .ibox-title {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.vc-main .ibox .ibox-content {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.vc-index .vc-index-nav {
    padding: 10px;
    font-size: 16px;
}

.vc-index .index-1-left {
    width: 30%;
    padding: 10px;
}

.vc-index .index-1-left .index-1-left-1 {
    background-color: #FFFFFF;
    border-radius: 10px;
    height: 350px;
    padding: 15px;
}

.vc-index .index-title {
    color: #404357;
    font-size: 20px;
    font-weight: bold;
}

.vc-index .index-number {
    color: #404357;
    font-size: 26px;
    font-weight: bold;
    margin-top: -5px;
}

.vc-index .index-number-unit {
    color: #9D9D9F;
    font-size: 14px;
}

.vc-index .index-name {
    color: #404357;
    font-size: 20px;
    font-weight: bold;
}

.vc-index .index-name-ico {
    font-size: 30px;
    color: #00BF6F;
    font-weight: bold;
    margin-top: 5px;
}

.vc-index .index-number-describe {
    color: #9D9D9F;
}

.vc-index .index-1-left .index-1-left-1 .index-1-left-1-content {
    padding-top: 50px;
    padding-bottom: 50px;
}

.vc-index .index-1-left .index-1-left-1 .index-1-left-img {
    background-color: #F6F6F6;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    text-align: center;
    line-height: 60px;
    margin-right: 10px;
}

.vc-index .index-1-left .index-1-left-1 .index-1-left-img i {
    color: #00BF6F;
    font-weight: bold;
    font-size: 24px;
}

.vc-index .index-1-mid .index-1-mid-1 {
    background-color: #FFFFFF;
    border-radius: 10px;
    height: 350px;
    padding: 15px;
    overflow-y: hidden;
}

.vc-index .index-1-mid {
    width: 30%;
    padding: 10px;
}

.vc-index .index-1-right {
    width: 30%;
    padding: 10px;
}

.vc-index .index-1-right .index-1-right-1 {
    background-color: #FFFFFF;
    border-radius: 10px;
    height: 350px;
    padding: 15px;
    overflow-y: hidden;
}

.vc-index .index-1-left-1-bottom {
    width: 90%;
    margin: 40px auto;
}

.vc-index .index-1-left-1-bottom .index-1-left-1-bottom-item {
    width: 45%;
}

.vc-index .vc-index-notice-title {
    font-size: 14px;
    color: #544E42;
    width: 60%;
}

.vc-index .vc-index-notice-title i {
    font-size: 2px;
}

.vc-index .vc-index-notice-time {
    font-size: 14px;
    color: #9D9D9F;
}

.vc-index .index-1-left-item {
    width: 49%;
    padding: 15px;
    border-radius: 10px;
}

.vc-index .index-bottom-number {
    color: #404357;
    font-size: 20px;
    font-weight: bold;
}

.vc-index .index-bottom-number-desc {
    color: #9D9D9F;
}

.vc-index .index-1-right-item {
    padding: 15px;
    border-radius: 10px;
}

nav-link nav-link-breadcrumb active:active {
    background-color: red;
}

.vc-org ul li {
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    cursor: pointer;
}

.vc-org-hc ul li {
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    cursor: pointer;
}

.vc-org ul li:hover,
.vc-org-hc ul li:hover {
    background-color: var(--vc-org-bg-active-color);
}

.vc-org .active {
    background-color: var(--vc-org-bg-active-color);
}


/* .vc-org .role-title{

} */

.vc-org-page .role-context {
    color: #888888;
}

.vc-org-page .role-menu {
    margin-top: 15px;
    font-size: 14px;
    cursor: pointer;
}

.vc-org-page .role-menu .item:hover,
.vc-org-page .role-menu .active {
    color: #1890FF;
}

.attendance-staff {
    height: 500px;
    overflow-y: auto;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.attendance-staff::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.labeling-strip {
    overflow: hidden;
}

.labeling-strip .strip {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 10px;
    right: -12px;
    transform: rotate(45deg);
}

.labeling-strip .strip span {
    background: #36A8FF;
    position: absolute;
    bottom: px;
    display: block;
    width: 100%;
    text-align: center;
    height: 100;
    color: #FFFFFF;
}

.coupon-market .coupon {
    border-radius: 5px;
    background-color: #FFFFFF;
}

.coupon-market .coupon img {
    width: 100%;
    height: 120px;
}

.coupon-market .coupon .title {
    font-size: 16px;
}

.tree-div {
    height: 650px;
    overflow-y: scroll;
}

.tree-div::-webkit-scrollbar {
    display: none;
}

.textAuto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.textAuto:hover {
    overflow: visible;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}

.hc-table-div {
    /* width: calc(100% - 190px); */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
}

.hc-table-div::-webkit-scrollbar {
    /* display: none; */
    height: 5px;
}

.hc-table-fix-right-td {
    position: sticky;
    right: 0px;
    background: #fff;
}

.hc-table-fix-left-td {
    position: sticky;
    left: 0px;
    background: #fff;
}

.hc-td {
    width: 120px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: normal;
}

.vc-search-community-item {
    margin-top: 10px;
}

.vc-search-community-item .item-title {
    font-size: 16px;
}

.vc-search-community-item .item-content {
    margin-top: 5px;
}

.vc-search-community-item .item-content a {
    margin-right: 10px;
}

.data-report-item {
    width: 32%;
    height: 60px;
}

.data-report-i {
    width: 24.5%;
    padding: 10px;
}

.data-report-i .data-report-i-t {
    margin-left: 10px;
    font-size: 16px;
    font-weight: bold;
}

.data-report-item {
    margin-top: 10px;
}

.data-report-item .data-report-item-title {
    font-size: 12px;
    margin-top: 5px;
    margin-left: 6px;
    color: #000;
}

.data-report-item .data-report-item-value {
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    color: #F28A4A;
}

.vc-reserve-active {
    border: 1px solid #007bff;
    color: #007bff;
}

.simplify-acceptance .form-group {
    margin-bottom: 0px;
}

/* 2026-01-14 新增CSS样式 */

.heading-1 { font-family: 'Helvetica Neue', sans-serif;color: #1e293b;font-size: 1.5rem !important; font-weight: 600 !important; }
.heading-2 { font-family: 'Helvetica Neue', sans-serif;color: #1e293b;font-size: 1.25rem !important; font-weight: 600 !important; }
.heading-3 { font-family: 'Helvetica Neue', sans-serif;background-color: #f9fafb;color: #1e293b;font-size: 1.125rem !important; font-weight: 500 !important; }

.body-lg { font-size: 1.125rem !important; }
.body-base { font-size: 1.0625rem !important; }
.body-sm { font-size: 1rem !important; }
.body-xs { font-size: 0.9375rem !important; }
.data-lg { font-size: 1.5rem !important; font-weight: 600 !important; }
.data-base { font-size: 1.25rem !important; font-weight: 600 !important; }
.data-sm { font-size: 1.125rem !important; font-weight: 600 !important; }

/* 其他样式保持不变 */
.font-logo {
    font-family: 'Microsoft YaHei', sans-serif; /* 替换跨域字体为系统字体 */
}
.card-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.stat-card {
    transition: transform 0.2s ease-in-out;
    padding: 0.75rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stat-card:hover {
    transform: translateY(-2px);
}
.log-item {
    border-left: 3px solid #e2e8f0;
}
.log-item.active {
    border-left-color: #3b82f6;
}
.order-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
}
.tag-complaint { background-color: #ef4444; }
.tag-report { background-color: #f97316; }
.tag-repair { background-color: #10b981; }
.tag-inquiry { background-color: #3b82f6; }
.tag-suggestion { background-color: #8b5cf6; }
.tag-other { background-color: #64748b; }

.status-group {
    font-size: 0.9375rem !important;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    font-weight: 500;
}

.group-total {
    font-size: 1rem !important;
    color: #ef4444;
    font-weight: 400;
    margin-bottom: 4px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.group-total span:last-child {
    color: #ef4444;
    font-weight: 400;
    margin-left: 8px;
}

.people-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 1rem !important;
    margin-right: 4px;
    margin-bottom: 4px;
}
.people-tag i {
    margin-right: 3px;
    font-size: 0.9375rem !important;
}

/* 进度条样式 */
.progress-bar {
    height: 6px;
    border-radius: 3px;
    background-color: #e3e2e2;
    overflow: hidden;
}
.progress-value {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* 表格样式 */
.table-sm {
    padding: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.table-sm th {
    padding: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}
.table-sm td {
    padding: 0.5rem !important;
    font-size: 1rem !important;
}

/* 按钮样式 */
.btn-sm1 {
    padding: 0.25rem 0.75rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

/* 标题间距统一 */
.section-title {
    margin-bottom: 0.75rem !important;
}
.sub-title {
    margin-bottom: 0.5rem !important;
}

/* 全局容器样式 */
.main-container {
    padding: 1rem !important;
    max-width: 100vw;
    height: auto !important;
    overflow: visible !important;
    margin: 0 auto;
    max-width: 1920px;
}

/* 图表容器样式 */
.chart-container {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    min-height: 200px;
}

/* 统计卡片内部样式 */
.stat-card-inner {
    margin-bottom: 0.25rem !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stat-card-value {
    text-align: right;
}
.stat-card-label {
    margin-bottom: 0.1rem !important;
    text-align: left;
    font-size: 1rem !important;
}
.stat-card-desc {
    color: #64748b !important;
    text-align: right;
    font-size: 1.25rem !important;
}

/* 工单状态标签样式 */
.status-tag {
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.9375rem !important;
    font-weight: 500;
    text-align: center;
}

/* 可点击行样式 */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.clickable-row:hover {
    background-color: #f8fafc;
}

/* 查看全部按钮样式 */
.view-all-btn {
    font-size: 1rem !important;
    padding: 0.2rem 0.5rem !important;
    display: flex;
    align-items: center;
    gap: 2px;
}
.view-all-btn i {
    font-size: 0.9375rem !important;
}

/* 基础信息统计卡片内容容器 */
.stat-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 工单分类统计自定义图例样式 */
.custom-legend {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 18px;
    max-width: 300px;
    min-width: 200px;
    box-sizing: border-box;
}
.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 1rem !important;
    color: #334155;
}
.legend-color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
}
.legend-value {
    margin-left: auto;
    color: #1e293b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem !important;
}
.legend-percent {
    color: #64748b;
    font-weight: 400;
    font-size: 0.9375rem !important;
}

/* 滚动条优化 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 左图右数布局样式 */
.chart-data-container {
    display: flex;
    gap: 0.75rem;
    height: 100%;
    min-height: 180px;
}
.chart-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.data-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

/* 人员统计图表容器优化 */
.people-chart-container {
    min-height: 220px !important;
    display: flex;
    flex-direction: column;
}

/* 工单趋势图表容器优化 */
.work-order-trend-container {
    min-height: 240px !important;
    display: flex;
    flex-direction: column;
}

/* 为左右两列添加适当的间距和最小高度 */
.content-column-1 {
    margin-bottom: 0.001rem;
}

.col-span-1{
    height: auto;
}

.content-column {
    margin-bottom: 2rem;
}

/* 确保卡片有足够的内边距和间距 */
.content-card {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

/* 内置SVG图标（无外部依赖，避免跨域） */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.icon-list {
    background-image: url("../img/check.png");
}

.icon-user-circle {
    background-image: url("../img/owner.png");
}
.icon-users {
    background-image: url("../img/family.png");
}
.icon-home {
    background-image: url("../img/tenant.png");
}
.icon-store {
    background-image: url("../img/business.png");
}
.icon-briefcase {
    background-image: url("../img/staff.png");
}
.icon-user-friends {
    background-image: url("../img/other.png");
}

/* 内嵌Tailwind核心工具类（简化版，避免CDN跨域） */
*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal}
body{margin:0;line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
/*a{color:inherit;text-decoration:inherit}*/
b,strong{font-weight:bolder}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
/*button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}
 */
:-moz-focusring{outline:auto}
:-moz-ui-invalid{box-shadow:none}
progress{vertical-align:baseline}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}
fieldset{margin:0;padding:0}
legend{padding:0}
menu,ol,ul{list-style:none;margin:0;padding:0}
dialog{padding:0}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
[role=button],button{cursor:pointer}
:disabled{cursor:default}
/*audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}*/
[hidden]{display:none}
/* 核心布局类 */
.container{width:100%}
@media (min-width: 640px){.container{max-width:640px}}
@media (min-width: 768px){.container{max-width:768px}}
@media (min-width: 1024px){.container{max-width:1024px}}
@media (min-width: 1280px){.container{max-width:1280px}}
@media (min-width: 1536px){.container{max-width:1536px}}
.mx-auto{margin-left:auto;margin-right:auto}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mt-2{margin-top:0.5rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.grid{display:grid}
.hidden{display:none}
.w-full{width:100%}
.w-1\/2{width:50%}
.min-h-screen{min-height:100vh}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.gap-1{gap:0.05rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:0.6rem}
.gap-5{gap:1.0rem}
.gap-6{gap:1.5rem}
.gap-7{gap:3.5rem}
.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}
.rounded-lg{border-radius:0.5rem}
.rounded-xl{border-radius:0.75rem}
.rounded-full{border-radius:9999px}
.rounded-button{border-radius:4px}
.border{border-width:1px}
.border-t{border-top-width:1px}
.border-gray-200{border-color:#e5e7eb}
.border-gray-300{border-color:#d1d5db}
.bg-white{background-color:#fff}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-200{background-color: #647281
}
.bg-blue-50{background-color:#eff6ff}
.bg-blue-100{background-color:#dbeafe}
.bg-blue-300{background-color: #4191fc
}
.bg-green-50{background-color:#ecfdf5}
.bg-green-100{background-color:#d1fae5}
.bg-green-200{background-color: #059669
}
.bg-purple-50{background-color:#f5f3ff}

.bg-purple-200{background-color: #9b26e8
}

.bg-yellow-50{background-color:#fffbeb}
.bg-yellow-200{background-color: #f3ca2b
}

.bg-pink-50{background-color:#fdf2f8}
.bg-red-50{background-color:#fef2f2}
.bg-red-200{background-color: #f51d1d
}
.bg-teal-50{background-color: #f0fdfa
}
.bg-orange-50{background-color:#fff7ed}
.bg-orange-200{background-color: #f19e06
}
.bg-indigo-50{background-color:#eeeffe}
.bg-pending\/10{background-color:rgba(249, 115, 22, 0.1)}
.bg-processing\/10{background-color:rgba(59, 130, 246, 0.1)}
.bg-completed\/10{background-color:rgba(16, 185, 129, 0.1)}
.bg-to_evaluate\/10{background-color:rgba(139, 92, 246, 0.1)}
.bg-to_visit\/10{background-color:rgba(99, 102, 241, 0.1)}
.bg-primary{background-color:#3b82f6}
.text-left{text-align:left}
.text-center{text-align:center}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-gray-800{color:#1f2937}
.text-blue-400{color:#93c5fd}
.text-blue-600{color:#2563eb}
.text-blue-700{color:#1d4ed8}
.text-blue-800{color:#1e40af}
.text-green-400{color:#4ade80}
.text-green-600{color:#059669}
.text-green-700{color:#047857}
.text-green-800{color:#065f46}
.text-yellow-400{color:#fbbf24}
.text-yellow-600{color:#d97706}
.text-yellow-700{color:#b45309}

.text-red-400{color: #b69090
}
.text-red-600{color: #b94747
}
.text-red-700{color:#b91c1c}

.text-orange-700{color:#c2410c}
.text-purple-600{color:#7c3aed}
.text-purple-700{color:#6d28d9}
.text-indigo-600{color:#4f46e5}
.text-indigo-700{color:#4338ca}
.text-teal-600{color: #6dedf8
}
.text-teal-700{color: #0d9488
}
.text-pink-700{color: #be5a91
}
.div-height{height: 325px}
.text-pending{color:#f97316}
.text-processing{color:#3b82f6}
.text-completed{color:#10b981}
.text-to_evaluate{color:#8b5cf6}
.text-to_visit{color:#6366f1}
.text-white{color:#fff}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.hover\:bg-gray-200:hover{background-color:#e5e7eb}
.hover\:bg-gray-50:hover{background-color:#f9fafb}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.overflow-y-auto{overflow-y:auto}
.sticky{position:sticky}
.top-0{top:0px}
.divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246 / var(--tw-divide-opacity))}
/* 响应式布局 */
@media (min-width: 640px){
    .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width: 768px){
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width: 1024px){
    .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 2026-01-22 Add by Terry Yi for 欠费报表CSS*/
/* 基础样式重置，移除CSS变量，直接使用具体值 */
.building-filter-container {
    width: 280px;
    background: #fff;
    border-radius: 8px; /* 增加圆角，更精致 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* 优化阴影，更柔和 */
    overflow: hidden;
    margin: 20px auto;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 4px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 500;
    height: 30px;
}

.stat-count {
    font-size: 12px;
    color: #409eff; /* 主题蓝 */
    cursor: pointer;
    transition: color 0.2s;
}
.stat-count:hover {
    color: #66b1ff; /* 浅一点的主题蓝 */
}

.search-wrapper {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
}

.search-icon {
    position: absolute;
    left: 5px;
    top: 6px;
    color: #909399;
    font-size: 14px;
}

.building-search {
    width: 100%;
    height: 35px;
    padding: 10px 12px 10px 25px;
    border: 1px solid #dcdfe6;
    border-radius: 6px; /* 优化输入框圆角 */
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s;
}
.building-search:focus {
    width: 100%;
    height: 35px;
    border-color: #409eff; /* 主题蓝 */
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* 聚焦外发光 */
}

/* 自适应背景框核心样式 */
.filter-container {
    /* 背景框基础样式 */
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    width: 100%;          /* 宽度自适应父容器 */
    max-width: 200px;     /* 最大宽度限制，防止过宽 */
    min-width: 145px;     /* 最小宽度限制，保证移动端显示 */
    padding: 5px;        /* 内边距，让内容不贴边 */
    height: auto;
}

.building-list {
    list-style: none;
    margin: 0;
    padding: 2px; /* 增加列表内边距 */
    background-color: #fafafa; /* 列表背景色 */
}

/* 楼栋项基础样式 - 核心修复：默认高度35px，展开时自动增高 */
.building-item {
    width: 100%; /* 强制100%宽度 */
    min-height: 35px; /* 最小高度35px（默认状态） */
    height: auto; /* 自动高度（展开单元时自适应） */
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease; /* 丝滑过渡 */
    font-size: 14px;
    margin-bottom: 3px; /* 楼栋项间距 */
    border-radius: 6px;
    border: 1px solid #f0f0f0; /* 浅边框 */
    overflow: hidden; /* 防止溢出圆角 */
    box-sizing: border-box; /* 高度/宽度包含边框和内边距 */
}
/* 楼栋项 hover 效果 */
.building-item:hover {
    border-color: #409eff; /* 主题蓝边框 */
    background-color: #f9fbff; /* 浅蓝背景 */
    transform: translateY(-1px); /* 轻微上浮 */
    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
}
/* 楼栋项选中态（核心优化） */
.building-item.active {
    background-color: #409eff; /* 主题蓝背景 */
    color: #ffffff; /* 白色文字（仅楼栋名称） */
    border-color: #409eff; /* 主题蓝边框 */
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3); /* 选中阴影 */
}
/* 全部楼栋项特殊样式 */
.building-item[data-name="全部"].active {
    background-color: #5cadff; /* 稍浅的主题蓝 */
}

/* 楼栋头部 - 适配35px最小高度，文字垂直居中 */
.building-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px; /* 移除上下内边距，靠line-height居中 */
    height: 35px; /* 固定35px高度（仅头部） */
    line-height: 35px; /* 文字垂直居中 */
}
/* 仅楼栋头部文字用白色，单元项单独控制 */
.building-item.active .building-header {
    color: #ffffff; /* 楼栋名称白色 */
}
/* 展开/收起图标 */
.expand-icon {
    font-size: 12px;
    color: #666;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%; /* 圆形背景 */
    transition: all 0.2s;
}
.building-item:hover .expand-icon {
    color: #409eff; /* 主题蓝 */
    background-color: rgba(64, 158, 255, 0.1); /* 浅蓝背景 */
}
.building-item.active .expand-icon {
    color: #ffffff; /* 白色 */
    background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
}

/* 单元列表（独立背景，展开时正常显示） */
.unit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #ffffff; /* 单元列表强制白色背景 */
    border-top: 1px solid rgba(64, 158, 255, 0.1); /* 主题色分隔线 */
}
.unit-list.expanded {
    display: block; /* 展开时显示 */
}

/* 单元项样式（核心修复：文字色独立控制） */
.unit-item {
    padding: 10px 20px;
    cursor: pointer;
    color: #333; /* 默认深灰色文字，不受楼栋样式影响 */
    transition: all 0.2s;
    position: relative; /* 伪元素用 */
}
/* 单元项 hover 效果 */
.unit-item:hover {
    background-color: #f0f8ff; /* 极浅蓝背景 */
    padding-left: 22px; /* 轻微缩进 */
    color: #409eff; /* hover时文字变主题蓝 */
}
/* 单元项选中态（核心优化：清晰的文字+背景） */
.unit-item.active {
    background-color: #e6f7ff; /* 浅青蓝背景 */
    color: #1890ff; /* 天蓝色文字，醒目且不刺眼 */
    font-weight: 500;
    border-left: 3px solid #1890ff; /* 左侧竖线 */
    padding-left: 17px; /* 配合竖线缩进 */
}
/* 移除楼栋选中对单元文字的覆盖（关键修复） */
.building-item.active .unit-item {
    color: #333; /* 单元项默认深灰色，和普通状态一致 */
}
.building-item.active .unit-item.active {
    background-color: #e6f7ff; /* 保持浅青蓝背景 */
    border-left-color: #1890ff; /* 保持天蓝色竖线 */
    color: #1890ff; /* 保持天蓝色文字 */
}

.custom-date-col {
    width: 150px !important; /* 可根据需要调整，比如100px/150px */
    flex: 0 0 150px !important; /* 防止flex布局拉伸 */
    max-width: 150px !important;
    padding-right: 5px !important; /* 可选：减小右侧间距 */
    padding-left: 5px !important;
}

/* 2026-01-30 */

.content-auto {
    content-visibility: auto;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.table-hover-row:hover {
    @apply bg-gray-100 transition-colors duration-150;
}
.card-shadow {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}
.section-card {
    @apply bg-white rounded-lg card-shadow p-5 mb-6;
}
.chart-container {
    @apply h-[300px] w-full relative;
}
.stats-card {
    @apply bg-white rounded-lg card-shadow p-4 border-l-4 border-primary;
}
.stats-grid {
    @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4;
}
.stat-item {
    @apply bg-gray-50 rounded-lg p-3 flex flex-col items-center justify-center text-center;
}
.stat-icon {
    @apply w-10 h-10 rounded-full flex items-center justify-center mb-2;
}
.stat-label {
    @apply text-gray-500 text-xs mb-1;
}
.stat-value {
    @apply font-semibold text-gray-600 text-lg;
}
.stat-value-danger {
    @apply text-danger;
}
.stat-value-primary {
    @apply text-primary;
}
.stat-value-warning {
    @apply text-warning;
}
.stat-value-success {
    @apply text-success;
}