/* WHMCS Vue2 + Element UI 客户区自定义样式 */

/* 表格行点击样式 */
.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    background-color: #f5f7fa !important;
}

/* 卡片头部布局 */
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header-left {
    display: flex;
    align-items: center;
}

.card-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 表格操作按钮组 */
.table-actions {
    display: flex;
    gap: 8px;
}

/* 批量操作工具栏 */
.bulk-actions {
    margin-bottom: 16px;
}

.bulk-actions-selected {
    margin-left: 12px;
    color: #909399;
}

/* 分页容器 */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* 对话框样式 */
.dialog-footer {
    text-align: right;
}

/* 状态标签样式 */
.status-tag {
    font-size: 12px;
}

/* 表格列样式 */
.table-column-center {
    text-align: center;
}

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

/* 金额显示样式 */
.amount-display {
    color: #303133;
    font-weight: bold;
}

/* 日期显示样式 */
.date-display {
    color: #606266;
}

/* 链接样式 */
.table-link {
    color: #409EFF;
    text-decoration: none;
    font-weight: bold;
}

.table-link:hover {
    text-decoration: underline;
}

/* 产品信息显示 */
.product-info {
    display: flex;
    flex-direction: column;
}

.product-name {
    color: #303133;
    font-weight: bold;
    margin-bottom: 4px;
}

.product-details {
    color: #909399;
    font-size: 12px;
}

/* 域名信息显示 */
.domain-info {
    display: flex;
    flex-direction: column;
}

.domain-name {
    color: #303133;
    font-weight: bold;
    margin-bottom: 4px;
}

.domain-auto-renew {
    color: #909399;
    font-size: 12px;
}

/* 自动续费图标 */
.auto-renew-icon {
    margin-right: 4px;
}

.auto-renew-active {
    color: #67C23A;
}

.auto-renew-inactive {
    color: #F56C6C;
}

/* 邮件附件图标 */
.email-attachment {
    margin-left: 8px;
    color: #909399;
}

/* 即将到期标签 */
.expiring-soon {
    margin-top: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .card-header-flex {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .card-header-right {
        justify-content: center;
    }
    
    .table-actions {
        flex-direction: column;
        gap: 4px;
    }
}

/* Element UI 表格自定义样式 */
.el-table .el-table__header-wrapper th {
    background-color: #fafafa;
    color: #606266;
    font-weight: 600;
}

.el-table .el-table__row:hover > td {
    background-color: #f5f7fa;
}

/* 表格排序图标样式 */
.el-table .caret-wrapper {
    height: 14px;
}

.el-table .sort-caret.ascending {
    border-bottom-color: #409EFF;
}

.el-table .sort-caret.descending {
    border-top-color: #409EFF;
}

/* 加载状态样式 */
.el-loading-mask {
    background-color: rgba(255, 255, 255, 0.8);
}

/* 分页样式调整 */
.el-pagination {
    text-align: center;
}

.el-pagination .el-pagination__total {
    color: #606266;
}

/* 日期选择器样式 */
.el-date-editor.el-input {
    width: 240px;
}

/* 下拉选择器样式 */
.el-select .el-input {
    width: 100%;
}

/* 按钮组样式 */
.el-button-group .el-button {
    margin-left: 0;
}

/* 对话框样式调整 */
.el-dialog__header {
    padding: 20px 20px 10px;
}

.el-dialog__body {
    padding: 10px 20px;
}

.el-dialog__footer {
    padding: 10px 20px 20px;
}

/* 表单样式 */
.el-form-item {
    margin-bottom: 16px;
}

/* 警告信息样式 */
.el-alert {
    margin-bottom: 20px;
}

/* 时间线样式 */
.el-timeline {
    padding-left: 0;
}

/* 卡片样式调整 */
.el-card {
    border-radius: 8px;
}

.el-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid #EBEEF5;
}

.el-card__body {
    padding: 20px;
}

/* 标签页样式 */
.el-tabs__header {
    margin: 0 0 15px;
}

/* 骨架屏样式 */
.el-skeleton {
    margin: 16px 0;
}

/* 宽度实用类 */
.w-100 {
    width: 100% !important;
}

.w-250 {
    width: 250px !important;
}

.w-150 {
    width: 150px !important;
}

.w-240 {
    width: 240px !important;
}

.w-500 {
    width: 500px !important;
}

/* 颜色实用类 */
.text-primary {
    color: #303133 !important;
}

.text-secondary {
    color: #606266 !important;
}

.text-muted {
    color: #909399 !important;
}

.text-link {
    color: #409EFF !important;
}

.text-success {
    color: #67C23A !important;
}

.text-warning {
    color: #E6A23C !important;
}

.text-danger {
    color: #F56C6C !important;
}

/* 字体实用类 */
.fw-bold {
    font-weight: bold !important;
}

.fs-12 {
    font-size: 12px !important;
}

/* 间距实用类 */
.mb-4 {
    margin-bottom: 4px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-20 {
    margin-top: 20px !important;
}

.mr-8 {
    margin-right: 8px !important;
}

/* 对话框内容样式 */
.dialog-content {
    margin-bottom: 16px;
}

.dialog-prompt {
    color: #909399;
    margin-bottom: 12px;
}

.dialog-alert {
    margin-bottom: 16px;
}