/**
 * 工单管理系统 - 统一主题样式
 * 基于 RuoYi 风格，Element Plus 配色
 */

/* ==================== CSS变量 ==================== */
:root {
    /* 主题色 */
    --ruoyi-primary: #409EFF;
    --ruoyi-success: #67C23A;
    --ruoyi-warning: #E6A23C;
    --ruoyi-danger: #F56C6C;
    --ruoyi-info: #909399;
    
    /* 背景色 */
    --ruoyi-bg: #f0f2f5;
    --ruoyi-header-bg: #304156;
    --ruoyi-sidebar-bg: #304156;
    --ruoyi-menu-active: #409EFF;
    
    /* 边框色 */
    --ruoyi-border: #dcdfe6;
    --ruoyi-border-light: #e4e7ed;
    
    /* 文字色 */
    --ruoyi-text-primary: #303133;
    --ruoyi-text-regular: #606266;
    --ruoyi-text-secondary: #909399;
    --ruoyi-text-placeholder: #c0c4cc;
    
    /* 圆角 */
    --ruoyi-radius: 4px;
    --ruoyi-radius-large: 8px;
    
    /* 阴影 */
    --ruoyi-shadow: 0 1px 4px rgba(0,21,41,.08);
    --ruoyi-shadow-light: 0 2px 12px 0 rgba(0,0,0,.1);
    --ruoyi-shadow-dark: 0 4px 20px rgba(0,0,0,.25);
    
    /* 间距 */
    --ruoyi-spacing: 15px;
    --ruoyi-spacing-sm: 10px;
    --ruoyi-spacing-lg: 20px;
}

/* ==================== 基础重置 ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    color: var(--ruoyi-text-regular);
    background-color: var(--ruoyi-bg);
    min-height: 100vh;
}

/* ==================== 统一弹窗样式 ==================== */

/* 模态框 */
.modal-content {
    border: none;
    border-radius: var(--ruoyi-radius-large);
    box-shadow: var(--ruoyi-shadow-dark);
}

.modal-header {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    border-bottom: 1px solid var(--ruoyi-border-light);
    border-radius: var(--ruoyi-radius-large) var(--ruoyi-radius-large) 0 0;
    padding: 15px 20px;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ruoyi-text-primary);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--ruoyi-border-light);
    padding: 15px 20px;
}

/* SweetAlert2 弹窗 */
.swal2-popup {
    border-radius: var(--ruoyi-radius-large) !important;
    box-shadow: var(--ruoyi-shadow-dark) !important;
}

.swal2-title {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.swal2-html-container {
    font-size: 14px !important;
}

.swal2-confirm {
    background: var(--ruoyi-primary) !important;
    border-color: var(--ruoyi-primary) !important;
    border-radius: var(--ruoyi-radius) !important;
    padding: 8px 20px !important;
}

.swal2-cancel {
    border-radius: var(--ruoyi-radius) !important;
    padding: 8px 20px !important;
}

/* Element Plus 弹窗 */
.el-dialog {
    border-radius: var(--ruoyi-radius-large) !important;
    box-shadow: var(--ruoyi-shadow-dark) !important;
}

.el-dialog__header {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    border-radius: var(--ruoyi-radius-large) var(--ruoyi-radius-large) 0 0;
    padding: 15px 20px !important;
}

.el-dialog__title {
    font-weight: 600;
    color: var(--ruoyi-text-primary);
}

.el-dialog__body {
    padding: 20px !important;
}

.el-dialog__footer {
    border-top: 1px solid var(--ruoyi-border-light);
    padding: 15px 20px !important;
}

/* ==================== 统一按钮样式 ==================== */
.btn-ruoyi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--ruoyi-radius);
    border: 1px solid var(--ruoyi-border);
    background: #fff;
    color: var(--ruoyi-text-regular);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all .3s;
}

.btn-ruoyi:hover {
    color: var(--ruoyi-primary);
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}

.btn-ruoyi-primary {
    background: var(--ruoyi-primary);
    border-color: var(--ruoyi-primary);
    color: #fff;
}

.btn-ruoyi-primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
}

.btn-ruoyi-success {
    background: var(--ruoyi-success);
    border-color: var(--ruoyi-success);
    color: #fff;
}

.btn-ruoyi-success:hover {
    background: #85ce61;
    border-color: #85ce61;
    color: #fff;
}

.btn-ruoyi-warning {
    background: var(--ruoyi-warning);
    border-color: var(--ruoyi-warning);
    color: #fff;
}

.btn-ruoyi-warning:hover {
    background: #ebb563;
    border-color: #ebb563;
    color: #fff;
}

.btn-ruoyi-danger {
    background: var(--ruoyi-danger);
    border-color: var(--ruoyi-danger);
    color: #fff;
}

.btn-ruoyi-danger:hover {
    background: #f78989;
    border-color: #f78989;
    color: #fff;
}

.btn-ruoyi-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.btn-ruoyi:disabled, .btn-ruoyi.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ==================== 统一卡片样式 ==================== */
.ruoyi-card {
    background: #fff;
    border-radius: var(--ruoyi-radius);
    box-shadow: var(--ruoyi-shadow);
    margin-bottom: var(--ruoyi-spacing);
}

.ruoyi-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--ruoyi-border-light);
    font-size: 16px;
    font-weight: 500;
    color: var(--ruoyi-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ruoyi-card-header i {
    margin-right: 8px;
    color: var(--ruoyi-primary);
}

.ruoyi-card-body {
    padding: 20px;
}

/* ==================== 统一表格样式 ==================== */
.ruoyi-table {
    width: 100%;
    border-collapse: collapse;
}

.ruoyi-table th {
    background: #f5f7fa;
    color: var(--ruoyi-text-secondary);
    font-weight: 500;
    font-size: 14px;
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--ruoyi-border-light);
}

.ruoyi-table td {
    padding: 12px 10px;
    font-size: 14px;
    color: var(--ruoyi-text-regular);
    border-bottom: 1px solid var(--ruoyi-border-light);
}

.ruoyi-table tr:hover td {
    background: #f5f7fa;
}

/* ==================== 统一表单样式 ==================== */
.ruoyi-form .form-label {
    font-size: 14px;
    color: var(--ruoyi-text-regular);
    margin-bottom: 8px;
    font-weight: 500;
}

.ruoyi-form .form-control,
.ruoyi-form .form-select {
    border: 1px solid var(--ruoyi-border);
    border-radius: var(--ruoyi-radius);
    padding: 8px 12px;
    font-size: 14px;
    color: var(--ruoyi-text-regular);
    transition: all .3s;
}

.ruoyi-form .form-control:focus,
.ruoyi-form .form-select:focus {
    border-color: var(--ruoyi-primary);
    box-shadow: 0 0 0 2px rgba(64,158,255,.2);
    outline: none;
}

.ruoyi-form .form-control::placeholder {
    color: var(--ruoyi-text-placeholder);
}

/* ==================== 统一标签样式 ==================== */
.ruoyi-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: var(--ruoyi-radius);
    border: 1px solid;
}

.ruoyi-tag-primary {
    background: rgba(64,158,255,.1);
    border-color: rgba(64,158,255,.2);
    color: var(--ruoyi-primary);
}

.ruoyi-tag-success {
    background: rgba(103,194,58,.1);
    border-color: rgba(103,194,58,.2);
    color: var(--ruoyi-success);
}

.ruoyi-tag-warning {
    background: rgba(230,162,60,.1);
    border-color: rgba(230,162,60,.2);
    color: var(--ruoyi-warning);
}

.ruoyi-tag-danger {
    background: rgba(245,108,108,.1);
    border-color: rgba(245,108,108,.2);
    color: var(--ruoyi-danger);
}

.ruoyi-tag-info {
    background: rgba(144,147,153,.1);
    border-color: rgba(144,147,153,.2);
    color: var(--ruoyi-info);
}

/* ==================== 统一提示样式 ==================== */
.alert {
    border-radius: var(--ruoyi-radius);
    border: none;
    padding: 12px 20px;
}

.alert-success { background: #f0f9eb; color: var(--ruoyi-success); }
.alert-danger { background: #fef0f0; color: var(--ruoyi-danger); }
.alert-warning { background: #fdf6ec; color: var(--ruoyi-warning); }
.alert-info { background: #f4f4f5; color: var(--ruoyi-info); }

/* ==================== 统一搜索栏样式 ==================== */
.search-bar {
    background: #fff;
    padding: 15px 20px;
    border-radius: var(--ruoyi-radius);
    margin-bottom: var(--ruoyi-spacing);
    box-shadow: var(--ruoyi-shadow);
}

.search-bar .form-control,
.search-bar .form-select {
    border: 1px solid var(--ruoyi-border);
    border-radius: var(--ruoyi-radius);
    padding: 6px 12px;
    font-size: 14px;
}

/* ==================== 统一分页样式 ==================== */
.pagination {
    margin: 15px 0;
}

.pagination .page-link {
    color: var(--ruoyi-text-regular);
    border: 1px solid var(--ruoyi-border-light);
    padding: 6px 12px;
    font-size: 14px;
    border-radius: var(--ruoyi-radius);
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background: var(--ruoyi-primary);
    border-color: var(--ruoyi-primary);
    color: #fff;
}

.pagination .page-link:hover {
    color: var(--ruoyi-primary);
    background: #ecf5ff;
}

/* ==================== 统一详情项样式 ==================== */
.detail-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--ruoyi-border-light);
}

.detail-item .label {
    width: 120px;
    color: var(--ruoyi-text-secondary);
    font-size: 14px;
    flex-shrink: 0;
}

.detail-item .value {
    flex: 1;
    color: var(--ruoyi-text-primary);
    font-size: 14px;
}

/* ==================== 统一空状态样式 ==================== */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--ruoyi-text-secondary);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .main-container { margin-left: 0; }
}
/**
 * 工单管理系统 - 增强表格样式
 * 基于 Ant Design / Element Plus 风格
 */

/* ==================== 表格增强样式 ==================== */

/* 表格容器 */
.table-container {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

/* 主表格样式 */
.ruoyi-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* 表头样式 */
.ruoyi-table thead {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

.ruoyi-table th {
    background: transparent;
    color: #303133;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid #e4e7ed;
    white-space: nowrap;
    position: relative;
}

.ruoyi-table th i {
    margin-right: 6px;
    color: #409EFF;
    font-size: 14px;
}

/* 表头排序按钮 */
.ruoyi-table th .sort-btn {
    background: none;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    color: #909399;
    font-size: 12px;
    margin-left: 4px;
    border-radius: 4px;
    transition: all 0.3s;
}

.ruoyi-table th .sort-btn:hover {
    background: rgba(64, 158, 255, 0.1);
    color: #409EFF;
}

/* 表格主体 */
.ruoyi-table tbody tr {
    transition: all 0.3s ease;
}

.ruoyi-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #606266;
    border-bottom: 1px solid #e4e7ed;
    vertical-align: middle;
}

/* 斑马纹 */
.ruoyi-table-striped tbody tr:nth-child(even) td {
    background: #fafbfc;
}

/* 行悬停效果 */
.ruoyi-table tbody tr:hover td {
    background: linear-gradient(90deg, #ecf5ff 0%, #f5f7fa 100%);
}

/* 可点击行 */
.ruoyi-table.table-clickable tbody tr {
    cursor: pointer;
}

.ruoyi-table.table-clickable tbody tr:hover td {
    background: linear-gradient(90deg, #e6f7ff 0%, #f0f9ff 100%);
}

/* 首列链接样式 */
.ruoyi-table td a.primary-link {
    color: #409EFF;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.ruoyi-table td a.primary-link:hover {
    color: #66b1ff;
    text-decoration: underline;
}

/* ==================== 增强标签样式 ==================== */

/* 基础标签 */
.ruoyi-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    white-space: nowrap;
}

/* 状态标签 - 待分配 */
.ruoyi-tag.status-pending {
    background: linear-gradient(135deg, #fef0e6 0%, #fde2c4 100%);
    color: #e6a23c;
    box-shadow: 0 1px 3px rgba(230, 162, 60, 0.2);
}

/* 状态标签 - 处理中 */
.ruoyi-tag.status-processing {
    background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
    color: #409EFF;
    box-shadow: 0 1px 3px rgba(64, 158, 255, 0.2);
}

/* 状态标签 - 已完成 */
.ruoyi-tag.status-completed {
    background: linear-gradient(135deg, #f0f9eb 0%, #e1f3d8 100%);
    color: #67C23A;
    box-shadow: 0 1px 3px rgba(103, 194, 58, 0.2);
}

/* 紧急度标签 - 一般 */
.ruoyi-tag.urgency-normal {
    background: linear-gradient(135deg, #f4f4f5 0%, #e9e9eb 100%);
    color: #909399;
}

/* 紧急度标签 - 优先 */
.ruoyi-tag.urgency-priority {
    background: linear-gradient(135deg, #fdf6ec 0%, #faecd8 100%);
    color: #E6A23C;
    box-shadow: 0 1px 3px rgba(230, 162, 60, 0.2);
}

/* 紧急度标签 - 紧急 */
.ruoyi-tag.urgency-urgent {
    background: linear-gradient(135deg, #fef0f0 0%, #fde2e2 100%);
    color: #F56C6C;
    box-shadow: 0 1px 3px rgba(245, 108, 108, 0.2);
    animation: pulse-urgent 2s infinite;
}

@keyframes pulse-urgent {
    0%, 100% { box-shadow: 0 1px 3px rgba(245, 108, 108, 0.2); }
    50% { box-shadow: 0 1px 6px rgba(245, 108, 108, 0.4); }
}

/* 带图标的标签 */
.ruoyi-tag i {
    margin-right: 4px;
    font-size: 12px;
}

/* ==================== 增强按钮样式 ==================== */

/* 按钮组 */
.btn-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 小型按钮增强 */
.btn-ruoyi.btn-ruoyi-sm {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.btn-ruoyi.btn-ruoyi-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-ruoyi.btn-ruoyi-sm:active {
    transform: translateY(0);
}

/* 主要按钮 */
.btn-ruoyi.btn-ruoyi-primary.btn-ruoyi-sm {
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
    border: none;
}

/* 成功按钮 */
.btn-ruoyi.btn-ruoyi-success.btn-ruoyi-sm {
    background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
    border: none;
}

/* 警告按钮 */
.btn-ruoyi.btn-ruoyi-warning.btn-ruoyi-sm {
    background: linear-gradient(135deg, #e6a23c 0%, #cf9236 100%);
    border: none;
}

/* 危险按钮 */
.btn-ruoyi.btn-ruoyi-danger.btn-ruoyi-sm {
    background: linear-gradient(135deg, #f56c6c 0%, #dd6161 100%);
    border: none;
}

/* 信息按钮 */
.btn-ruoyi.btn-ruoyi-info.btn-ruoyi-sm {
    background: linear-gradient(135deg, #909399 0%, #7d8085 100%);
    border: none;
    color: #fff;
}

/* ==================== 表格内操作列 ==================== */

/* 操作列容器 */
.action-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* 分隔线 */
.action-divider {
    width: 1px;
    height: 14px;
    background: #e4e7ed;
    margin: 0 2px;
}

/* ==================== 空状态 ==================== */

.ruoyi-table tbody tr.empty-row td {
    padding: 60px 20px;
}

.empty-content {
    text-align: center;
    color: #909399;
}

.empty-content i {
    font-size: 56px;
    opacity: 0.3;
    display: block;
    margin-bottom: 16px;
}

.empty-content p {
    margin: 0;
    font-size: 14px;
}

/* ==================== 分页增强 ==================== */

.pagination-info {
    color: #606266;
    font-size: 14px;
}

.pagination-info strong {
    color: #409EFF;
    font-weight: 600;
}

.pagination .page-link {
    border-radius: 4px !important;
    margin: 0 3px;
    border: 1px solid #dcdfe6;
    color: #606266;
    min-width: 32px;
    text-align: center;
    transition: all 0.3s;
}

.pagination .page-link:hover {
    border-color: #409EFF;
    color: #409EFF;
    background: #ecf5ff;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
    border-color: #409EFF;
    color: #fff;
    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.pagination .page-item.disabled .page-link {
    color: #c0c4cc;
    cursor: not-allowed;
}

/* ==================== 响应式表格 ==================== */

@media (max-width: 992px) {
    .ruoyi-table th,
    .ruoyi-table td {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .btn-ruoyi.btn-ruoyi-sm {
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ruoyi-table {
        min-width: 600px;
    }
}
.action-btns { white-space: nowrap; } .action-btns .btn-ruoyi { margin-right: 4px; }
/* ==================== Ant Design 风格表单样式 ==================== */

/* 表单容器 */
.ruoyi-form {
  width: 100%;
}

/* 表单行 - 水平布局 */
.ruoyi-form .form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* 表单项 - 水平布局 */
.ruoyi-form .form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  width: 100%;
}

/* 表单项 - 半宽（两列布局） */
.ruoyi-form .form-item-half {
  width: 50%;
  padding-right: 12px;
}

.ruoyi-form .form-item-half:nth-child(even) {
  padding-right: 0;
  padding-left: 12px;
}

/* 标签样式 - Ant Design 风格 */
.ruoyi-form .form-label {
  flex: 0 0 120px;
  max-width: 120px;
  text-align: right;
  padding-right: 12px;
  line-height: 32px;
  font-size: 14px;
  color: #606266;
  font-weight: 400;
}

/* 必填标记 */
.ruoyi-form .form-label .text-danger {
  color: #f56c6c;
  margin-left: 4px;
}

/* 表单控件容器 */
.ruoyi-form .form-control-wrapper {
  flex: 1;
  min-width: 0;
}

/* 输入框统一样式 */
.ruoyi-form .el-input__wrapper,
.ruoyi-form .el-select__wrapper,
.ruoyi-form .el-textarea__inner,
.ruoyi-form .el-date-editor {
  border-radius: 4px;
}

/* Element UI 输入框高度统一 */
.ruoyi-form .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.ruoyi-form .el-input {
  --el-input-height: 32px;
}

.ruoyi-form .el-select {
  --el-component-size: 32px;
}

.ruoyi-form .el-date-editor.el-input {
  --el-input-height: 32px;
}

.ruoyi-form .el-textarea__inner {
  min-height: 80px;
  padding: 8px 12px;
}

/* 表单按钮区域 */
.ruoyi-form .form-actions {
  display: flex;
  justify-content: flex-start;
  padding-left: 120px;
  margin-top: 24px;
  gap: 12px;
}

/* 表单按钮样式 */
.ruoyi-form .form-actions .btn-ruoyi {
  min-width: 80px;
  height: 36px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: 4px;
}

/* ==================== 响应式布局 ==================== */
@media (max-width: 768px) {
  .ruoyi-form .form-item,
  .ruoyi-form .form-item-half {
    flex-direction: column;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
  
  .ruoyi-form .form-label {
    flex: none;
    max-width: 100%;
    text-align: left;
    padding-right: 0;
    margin-bottom: 8px;
    line-height: 1.5;
  }
  
  .ruoyi-form .form-actions {
    padding-left: 0;
    flex-direction: column;
  }
  
  .ruoyi-form .form-actions .btn-ruoyi {
    width: 100%;
  }
}

/* ==================== 表单分组标题 ==================== */
.ruoyi-form .form-section-title {
  width: 100%;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 15px;
  font-weight: 500;
  color: #303133;
}

/* ==================== 表单验证错误提示 ==================== */
.ruoyi-form .form-error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}

/* ==================== 登录页表单特殊处理 ==================== */
.login-box .ruoyi-form .form-item {
  flex-direction: column;
  margin-bottom: 16px;
}

.login-box .ruoyi-form .form-label {
  flex: none;
  max-width: 100%;
  text-align: left;
  padding-right: 0;
  margin-bottom: 8px;
}