/* ===== 工单管理系统样式模块 v1.1.0 ===== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    min-height: 100vh; 
    padding: 20px; 
}

/* ===== 登录页 ===== */
.login-page { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    position: fixed; 
    top:0; left:0; 
    width:100%; 
    z-index: 9999; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
}

.login-box { 
    background: white; 
    padding: 40px; 
    border-radius: 16px; 
    width: 380px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); 
}

.login-box h2 { 
    text-align: center; 
    margin-bottom: 8px; 
    color: #333; 
    font-size: 22px; 
}

.login-box p { 
    text-align: center; 
    color: #999; 
    font-size: 13px; 
    margin-bottom: 30px; 
}

.login-box input { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    font-size: 14px; 
    margin-bottom: 15px; 
    outline: none; 
    transition: border 0.3s; 
}

.login-box input:focus { border-color: #667eea; }

.login-btn { 
    width: 100%; 
    padding: 13px; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    border: none; 
    border-radius: 8px; 
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer; 
}

.login-error { 
    color: #ef4444; 
    font-size: 13px; 
    text-align: center; 
    margin-top: -8px; 
    margin-bottom: 10px; 
    display: none; 
}

/* ===== 主体 ===== */
.container { 
    max-width: 1400px; 
    margin: 0 auto; 
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
    padding: 30px; 
}

.header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 30px; 
    border-bottom: 3px solid #667eea; 
    padding-bottom: 20px; 
    flex-wrap: wrap; 
    gap: 15px; 
}

.header h1 { font-size: 26px; color: #333; }

.header-info { font-size: 12px; color: #999; margin-top: 5px; }

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

.header-stats { display: flex; gap: 15px; flex-wrap: wrap; }

.stat-box { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    padding: 12px 20px; 
    border-radius: 8px; 
    text-align: center; 
    min-width: 90px; 
}

.stat-box .number { font-size: 22px; font-weight: bold; }

.stat-box .label { font-size: 11px; margin-top: 3px; opacity: 0.9; }

.current-user-info { 
    font-size: 13px; 
    color: #667eea; 
    font-weight: 600; 
    background: #f0f3ff; 
    padding: 8px 14px; 
    border-radius: 20px; 
}

.logout-btn { 
    padding: 8px 16px; 
    background: #f0f0f0; 
    color: #666; 
    border: none; 
    border-radius: 20px; 
    cursor: pointer; 
    font-size: 13px; 
}

.logout-btn:hover { background: #e0e0e0; }

/* ===== 提醒横幅 ===== */
.reminder-banner { 
    background: linear-gradient(135deg, #fff3cd, #ffeeba); 
    border: 1px solid #ffc107; 
    border-radius: 8px; 
    padding: 12px 16px; 
    margin-bottom: 20px; 
    display: none; 
}

.reminder-banner.show { display: block; }

.reminder-banner h4 { color: #856404; margin-bottom: 8px; font-size: 14px; }

.reminder-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 4px 0; 
    font-size: 13px; 
    color: #666; 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
}

.reminder-item:last-child { border-bottom: none; }

.reminder-tag { 
    padding: 2px 8px; 
    border-radius: 10px; 
    font-size: 11px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.tag-7 { background: #fee2e2; color: #dc2626; }
.tag-30 { background: #fef3c7; color: #d97706; }
.tag-90 { background: #dbeafe; color: #2563eb; }

/* ===== 标签页 ===== */
.tabs { 
    display: flex; 
    gap: 0; 
    margin-bottom: 20px; 
    border-bottom: 2px solid #f0f0f0; 
    flex-wrap: wrap; 
}

.tab { 
    padding: 12px 22px; 
    background: none; 
    border: none; 
    cursor: pointer; 
    color: #666; 
    font-weight: 600; 
    border-bottom: 3px solid transparent; 
    transition: all 0.3s; 
    font-size: 14px; 
}

.tab.active { color: #667eea; border-bottom-color: #667eea; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ===== 控件 ===== */
.controls { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 20px; 
    flex-wrap: wrap; 
    align-items: center; 
}

button { 
    padding: 10px 20px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: 600; 
    transition: all 0.3s; 
}

.btn-primary { background: #667eea; color: white; }
.btn-primary:hover { background: #5568d3; transform: translateY(-1px); }

.btn-secondary { background: #f0f0f0; color: #333; }
.btn-secondary:hover { background: #e0e0e0; }

.btn-danger { background: #ef4444; color: white; }
.btn-danger:hover { background: #dc2626; }

.btn-info { background: #3b82f6; color: white; }
.btn-info:hover { background: #2563eb; }

.btn-success { background: #10b981; color: white; }
.btn-success:hover { background: #059669; }

.btn-warning { background: #f59e0b; color: white; }
.btn-warning:hover { background: #d97706; }

.search-box { flex: 1; min-width: 250px; }

.search-box input { 
    width: 100%; 
    padding: 10px 15px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    font-size: 14px; 
    outline: none; 
}

.filter-group { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 20px; 
    flex-wrap: wrap; 
    align-items: center; 
}

.filter-group select, 
.filter-group input[type=date] { 
    padding: 8px 12px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 14px; 
    outline: none; 
}

/* ===== 表格 ===== */
.table-wrapper { overflow-x: auto; }

table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px; 
}

thead { background: #f8f9fa; border-bottom: 2px solid #ddd; }

th { 
    padding: 13px 15px; 
    text-align: left; 
    font-weight: 600; 
    color: #333; 
    font-size: 13px; 
}

td { 
    padding: 11px 15px; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 13px; 
}

tr:hover { background: #f9f9f9; }
tr.dragging { background: #e3f2fd; opacity: 0.6; }
tr.drag-over { border-top: 3px solid #667eea; }

/* ===== 徽章 ===== */
.badge { 
    display: inline-block; 
    padding: 3px 10px; 
    border-radius: 20px; 
    font-size: 12px; 
    font-weight: 600; 
    text-align: center; 
    min-width: 60px; 
    cursor: pointer; 
    transition: all 0.3s; 
}

.badge:hover { transform: scale(1.05); }

.badge-urgent { background: #fee2e2; color: #dc2626; }
.badge-high { background: #fef08a; color: #ca8a04; }
.badge-normal { background: #dbeafe; color: #0284c7; }
.badge-low { background: #e0e7ff; color: #4f46e5; }
.badge-待处理 { background: #fef3c7; color: #d97706; }
.badge-进行中 { background: #c7d2fe; color: #4f46e5; }
.badge-已完成 { background: #d1fae5; color: #059669; }
.badge-已关闭 { background: #f3f4f6; color: #6b7280; }
.badge-vip { background: #fce7f3; color: #be185d; }
.badge-normal-user { background: #f0f0f0; color: #666; }
.badge-expiring { background: #fee2e2; color: #dc2626; }
.badge-soon { background: #fef3c7; color: #d97706; }
.badge-ok { background: #d1fae5; color: #059669; }
.badge-admin { background: #e0e7ff; color: #4f46e5; }
.badge-operator { background: #dbeafe; color: #0284c7; }
.badge-viewer { background: #f0f0f0; color: #666; }

.action-buttons { display: flex; gap: 5px; flex-wrap: wrap; }
.action-buttons button { padding: 4px 10px; font-size: 12px; }

/* ===== 弹窗 ===== */
.modal { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 1000; 
    align-items: center; 
    justify-content: center; 
}

.modal.show { display: flex; }

.modal-content { 
    background: white; 
    padding: 28px; 
    border-radius: 12px; 
    width: 90%; 
    max-width: 680px; 
    max-height: 90vh; 
    overflow-y: auto; 
}

.modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    border-bottom: 2px solid #f0f0f0; 
    padding-bottom: 12px; 
}

.modal-header h2 { color: #333; font-size: 18px; }

.modal-header button { 
    background: none; 
    border: none; 
    font-size: 22px; 
    cursor: pointer; 
    color: #999; 
    padding: 0; 
}

.form-group { margin-bottom: 14px; }

.form-group label { 
    display: block; 
    margin-bottom: 5px; 
    color: #333; 
    font-weight: 600; 
    font-size: 13px; 
}

.form-group input, 
.form-group select, 
.form-group textarea { 
    width: 100%; 
    padding: 9px 12px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    font-size: 13px; 
    font-family: inherit; 
    outline: none; 
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus { border-color: #667eea; }

.form-group textarea { resize: vertical; min-height: 80px; }

.form-group input[readonly] { background: #f5f5f5; color: #888; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row.col3 { grid-template-columns: 1fr 1fr 1fr; }

/* ===== 图表 ===== */
.chart-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; 
    margin: 20px 0; 
}

.chart { 
    background: #f9f9f9; 
    padding: 18px; 
    border-radius: 8px; 
    border: 1px solid #e0e0e0; 
}

.chart h3 { margin-bottom: 12px; color: #333; font-size: 15px; }

.chart-bar { 
    display: flex; 
    align-items: center; 
    margin-bottom: 8px; 
    gap: 8px; 
}

.chart-label { width: 75px; font-size: 12px; color: #555; }

.chart-bar-fill { 
    flex: 1; 
    height: 18px; 
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); 
    border-radius: 4px; 
    transition: width 0.5s; 
}

.chart-value { width: 40px; text-align: right; font-weight: 600; font-size: 12px; }

/* ===== 备份 ===== */
.backup-info { 
    background: #e8f5e9; 
    border-left: 4px solid #4caf50; 
    padding: 12px; 
    margin-bottom: 15px; 
    border-radius: 4px; 
    font-size: 13px; 
    color: #2e7d32; 
}

/* ===== 邮件配置 ===== */
.email-config-box { 
    background: #f0f4ff; 
    border: 1px solid #c7d2fe; 
    border-radius: 8px; 
    padding: 18px; 
    margin-bottom: 20px; 
}

.email-config-box h3 { color: #4f46e5; margin-bottom: 12px; font-size: 15px; }

.email-test-result { 
    margin-top: 10px; 
    padding: 8px 12px; 
    border-radius: 6px; 
    font-size: 13px; 
    display: none; 
}

.email-test-result.success { background: #d1fae5; color: #059669; display: block; }
.email-test-result.error { background: #fee2e2; color: #dc2626; display: block; }
.email-test-result.info { background: #dbeafe; color: #2563eb; display: block; }

/* ===== 运维管理 ===== */
.admin-section { margin-bottom: 24px; }
.admin-section h3 { font-size: 16px; color: #333; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #e0e0e0; }

.admin-card { 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    padding: 20px; 
}

.admin-card .form-group { margin-bottom: 16px; }
.admin-card .form-group label { display: block; font-weight: 600; margin-bottom: 6px; color: #374151; }
.admin-card .form-group input,
.admin-card .form-group textarea { 
    width: 100%; 
    padding: 10px 12px; 
    border: 1px solid #d1d5db; 
    border-radius: 6px; 
    font-size: 14px; 
}
.admin-card .help-text { font-size: 12px; color: #6b7280; margin-top: 4px; }

.file-input { padding: 8px !important; background: white; }

.progress-bar { 
    margin-top: 12px; 
    background: #e5e7eb; 
    border-radius: 4px; 
    height: 24px; 
    position: relative; 
    overflow: hidden;
}
.progress-fill { 
    background: linear-gradient(90deg, #667eea, #764ba2); 
    height: 100%; 
    width: 0%; 
    transition: width 0.3s; 
}
.progress-text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 12px; 
    font-weight: 600; 
    color: #374151;
}

.admin-result { margin-top: 12px; }
.admin-result .success-message { 
    background: #d1fae5; 
    border: 1px solid #a7f3d0; 
    border-radius: 6px; 
    padding: 12px; 
    color: #065f46; 
}
.admin-result .success-message .warning { 
    color: #92400e; 
    margin-top: 8px; 
    font-size: 12px; 
}

.info-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 16px; 
    margin-bottom: 16px;
}
.info-item { display: flex; flex-direction: column; }
.info-item .label { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.info-item .value { font-size: 14px; font-weight: 600; color: #111827; }

.backup-actions, .maintenance-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.backup-list { margin-top: 12px; }

.log-viewer { 
    background: #1f2937; 
    color: #e5e7eb; 
    padding: 12px; 
    border-radius: 6px; 
    font-family: monospace; 
    font-size: 12px; 
    max-height: 300px; 
    overflow-y: auto;
}
.log-viewer .log-line { padding: 2px 0; border-bottom: 1px solid #374151; }
.log-viewer .placeholder { color: #9ca3af; font-style: italic; }

/* ===== 到期提醒区 ===== */
.reminder-section { margin-bottom: 20px; }
.reminder-section h3 { font-size: 15px; color: #333; margin-bottom: 12px; }

.reminder-cards { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
    margin-bottom: 20px; 
}

.reminder-card { border-radius: 10px; padding: 16px; text-align: center; }

.reminder-card.card-7 { 
    background: linear-gradient(135deg, #fee2e2, #fecaca); 
    border: 1px solid #fca5a5; 
}

.reminder-card.card-30 { 
    background: linear-gradient(135deg, #fef3c7, #fde68a); 
    border: 1px solid #fcd34d; 
}

.reminder-card.card-90 { 
    background: linear-gradient(135deg, #dbeafe, #bfdbfe); 
    border: 1px solid #93c5fd; 
}

.reminder-card .rc-num { font-size: 28px; font-weight: bold; margin-bottom: 4px; }
.reminder-card.card-7 .rc-num { color: #dc2626; }
.reminder-card.card-30 .rc-num { color: #d97706; }
.reminder-card.card-90 .rc-num { color: #2563eb; }

.reminder-card .rc-label { font-size: 12px; color: #666; }

/* ===== 用户管理 ===== */
.role-badge { 
    display: inline-block; 
    padding: 2px 8px; 
    border-radius: 10px; 
    font-size: 11px; 
    font-weight: 600; 
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .container { padding: 15px; }
    .form-row { grid-template-columns: 1fr; }
    .form-row.col3 { grid-template-columns: 1fr; }
    .reminder-cards { grid-template-columns: 1fr; }
    table { font-size: 12px; }
    th, td { padding: 8px 10px; }
}