/* ========================================
   Blue Theme Override for Element Plus
   ======================================== */
:root {
    --el-color-primary: #2563eb;
    --el-color-primary-light-3: #60a5fa;
    --el-color-primary-light-5: #93bbfd;
    --el-color-primary-light-7: #bfdbfe;
    --el-color-primary-light-8: #dbeafe;
    --el-color-primary-light-9: #eff6ff;
    --el-color-primary-dark-2: #1d4ed8;
    --el-fill-color-light: #f8fafc;
    --el-border-radius-base: 8px;
    --el-border-radius-small: 6px;
    --el-font-size-base: 15px;
    --panel-bg: #ffffff;
    --panel-border: #e2e8f0;
    --panel-shadow: 0 1px 4px rgba(37,99,235,0.06);
    --q-item-hover: #eff6ff;
    --q-item-active: #dbeafe;
    --header-gradient: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Segoe UI', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #f0f4f8; min-height: 100vh; font-size: 15px; }

/* ========== Header ========== */
.app-header {
    display: flex; align-items: center; gap: 16px;
    background: var(--header-gradient);
    color: #fff; padding: 22px 32px; box-shadow: 0 2px 12px rgba(30,64,175,0.25);
}
.app-header .header-icon { opacity: 0.9; }
.app-header h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: 0.5px; }
.app-header p { margin: 4px 0 0; font-size: 14px; opacity: 0.85; }

/* ========== Body ========== */
.app-body { max-width: 1320px; margin: 0 auto; padding: 24px 20px 60px; }

/* ========== Step Cards ========== */
.step-card { margin-bottom: 20px; border-radius: 12px; }
.step-card-header {
    display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; flex-wrap: wrap;
}
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--el-color-primary); color: #fff;
    font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.header-actions { margin-left: auto; display: flex; gap: 8px; }

/* ========== Upload ========== */
.el-upload-dragger { border-radius: 10px; transition: border-color 0.3s; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.ml-auto { margin-left: auto !important; }
.full-width { width: 100%; }

.file-info-sub { font-size: 13px; color: #64748b; margin-top: 2px; }

/* ========== Tabs ========== */
.el-tabs--border-card { border-radius: 10px; overflow: hidden; box-shadow: var(--panel-shadow); }
.el-tabs__item { font-size: 15px !important; }
.sub-tabs { margin-top: 12px; }
.sub-tabs .el-tabs__header { margin-bottom: 12px; }
.el-tabs__item .el-badge { margin-left: 4px; vertical-align: middle; }
.opt-tag { margin-left: 4px; vertical-align: middle; }

/* ========== Mode Bar ========== */
.mode-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 8px;
    background: var(--el-color-primary-light-9); margin-bottom: 14px;
    font-size: 14px;
}
.mode-label { font-weight: 600; font-size: 14px; color: var(--el-color-primary-dark-2); white-space: nowrap; }

/* ========== Selector Layout ========== */
.selector-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 420px;
}
@media (max-width: 860px) { .selector-layout { grid-template-columns: 1fr; } }

.selector-left, .selector-right { min-width: 0; }
.selector-right { display: flex; flex-direction: column; gap: 12px; }

/* ========== Panel Card ========== */
.panel-card {
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: 10px; box-shadow: var(--panel-shadow);
    overflow: hidden;
}
.panel-toolbar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 10px 12px; border-bottom: 1px solid var(--panel-border);
    background: #fafbfd;
}
.panel-toolbar .search-input { max-width: 200px; }

/* ========== Question List ========== */
.q-list { padding: 4px 0; }
.q-item {
    display: flex; align-items: center; gap: 7px; padding: 8px 14px;
    cursor: pointer; transition: background 0.2s, box-shadow 0.2s;
    border-left: 3px solid transparent; font-size: 14px;
}
.q-item:hover { background: var(--q-item-hover); }
.q-item.active { background: var(--q-item-active); border-left-color: var(--el-color-primary); }
.q-id { font-size: 14px; color: var(--el-color-primary-dark-2); white-space: nowrap; }
.q-label-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; font-size: 13px; }

/* ========== Browse Panel ========== */
.browse-panel { flex-shrink: 0; }
.opt-list { display: flex; flex-direction: column; gap: 3px; padding: 8px 14px; }
.opt-list .el-checkbox { margin-right: 0; font-size: 14px; }

/* ========== Final Panel ========== */
.final-panel { flex: 1; min-height: 200px; }
.final-toolbar { display: flex; }
.final-list { padding: 6px 10px; }
.final-item {
    padding: 9px 12px; border-radius: 8px; margin-bottom: 6px;
    background: var(--el-color-primary-light-9);
    border: 1px solid var(--el-color-primary-light-7);
    transition: box-shadow 0.2s;
}
.final-item:hover { box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.final-item-top {
    display: flex; align-items: center; gap: 6px; font-size: 14px;
}
.final-item-codes {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.final-item-codes .el-tag { font-size: 12px; }

.final-item-simple-base {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--el-border-color-lighter);
}
.final-item-simple-base .simple-base-label {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    white-space: nowrap;
}
.final-item-simple-base .simple-base-mode-group .el-radio-button__inner {
    padding: 4px 10px;
    font-size: 12px;
}

/* ========== Brand Layout ========== */
.brand-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 400px; }
.brand-left, .brand-right { min-width: 0; }
.brand-left { display: flex; flex-direction: column; }
.brand-right {
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: 10px; box-shadow: var(--panel-shadow); padding: 0;
    display: flex; flex-direction: column;
}
.brand-right .final-toolbar { padding: 10px 12px; border-bottom: 1px solid var(--panel-border); background: #fafbfd; }
.brand-right > .el-scrollbar { flex: 1; }
.brand-right .final-list { padding: 6px 10px; }
.brand-btn-bar { display: flex; gap: 8px; margin-top: 10px; }

.brand-info-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.brand-info-alert { flex: 1; min-width: 260px; }
.xml-upload-btn { flex-shrink: 0; }

/* ========== Dialog ========== */
.dialog-group-label { font-size: 15px; margin-bottom: 12px; color: #334155; }
.dialog-opts { max-height: 280px; overflow-y: auto; padding: 8px 0; }
.dialog-opts .el-checkbox { font-size: 14px; }
.opts-toolbar { display: flex; gap: 8px; margin-bottom: 6px; }

/* ========== Result Containers ========== */
.result-container { margin-top: 16px; }
.result-container:empty { margin: 0; }
.crosstab-wrapper { overflow-x: auto; }

/* ========== Execute Step ========== */
.center-box { text-align: center; padding: 16px 0; }
.target-upload-section { max-width: 500px; margin: 0 auto 20px; }
.progress-text { text-align: center; font-size: 14px; color: #475569; margin-top: 6px; }

/* ========== Log ========== */
.log-summary { display: flex; gap: 16px; padding: 12px 0; }
.log-stat { font-size: 15px; color: #334155; }
.log-stat.cascade { color: #dc2626; }
.log-list { max-height: 400px; overflow-y: auto; font-size: 13px; }
.log-item { padding: 3px 0; display: flex; gap: 8px; }
.log-item.cascade { color: #dc2626; }
.log-respid { color: #64748b; }
.log-qid { color: var(--el-color-primary); font-weight: 600; }
.log-from { color: #ef4444; text-decoration: line-through; }
.log-to { color: #22c55e; font-weight: 600; }
.log-cascade-tag { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: #fef2f2; color: #dc2626; }
.log-more { padding: 6px 0; color: #94a3b8; }
.no-data { text-align: center; padding: 20px; color: #94a3b8; }

/* ========== Crosstab Table ========== */
.table-responsive { overflow-x: auto; margin: 12px 0; }
table { width: 100%; border-collapse: collapse; }
table.table-bordered td, table.table-bordered th { border: 1px solid #cbd5e1; }
table.table-sm td, table.table-sm th { padding: 5px 10px; font-size: 13px; }
thead th { background: var(--el-color-primary-light-9); font-weight: 600; color: #1e293b; position: sticky; top: 0; z-index: 1; }
tbody tr:hover { background: #f8fafc; }
.crosstab-table { font-size: 13px; border-collapse: collapse; width: 100%; }
.crosstab-table th, .crosstab-table td { border: 1px solid #cbd5e1; padding: 5px 10px; }
.crosstab-table th { background: #f1f5f9; color: #1e293b; white-space: nowrap; }
.crosstab-table td { white-space: nowrap; }
.crosstab-table tr:nth-child(even) { background: #f8fafc; }
.ct-title-cell { font-size: 14px; font-weight: 700; padding: 8px 12px !important; background: var(--el-color-primary-light-9) !important; }
.ct-subheader-row td, .ct-subheader-cell {
    background: #dce6f0 !important; font-weight: 700; color: #1e3a5f;
    padding: 6px 12px !important; font-size: 13px; border: 1px solid #cbd5e1;
}

/* ========== Element Plus size overrides ========== */
.el-button { font-size: 14px; }
.el-tag { font-size: 13px; }
.el-input { font-size: 14px; }
.el-checkbox { font-size: 14px; }
.el-radio-button__inner { font-size: 13px; }
.el-alert { font-size: 14px; }
.el-empty__description { font-size: 14px; }
.el-text { font-size: 14px; }

/* ========== 修改数据 Tab ========== */
.modify-data-layout { padding: 8px 0; }
.modify-section { margin-bottom: 24px; }
.modify-section-title { font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; }
.modify-upload { display: block; }
.modify-preview-box { min-height: 60px; max-height: 320px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; background: #fafbfc; padding: 12px; }
.modify-preview-table-wrap { overflow-x: auto; }
.modify-preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modify-preview-table th, .modify-preview-table td { border: 1px solid #e2e8f0; padding: 6px 10px; text-align: left; }
.modify-preview-table th { background: #f1f5f9; font-weight: 600; }
.modify-preview-table tbody tr:nth-child(even) { background: #f8fafc; }
.modify-preview-table .delta-pos { color: #22c55e; font-weight: 600; }
.modify-preview-table .delta-neg { color: #ef4444; font-weight: 600; }
.modify-log-box { max-height: 280px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fafbfc; }
.modify-result-summary .failure-item { font-size: 13px; margin-top: 4px; }
.modify-failure-detail {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-line;
    color: #334155;
}
.modify-verify-warn .verify-err-item { font-size: 13px; margin-top: 4px; }
.center-box { display: flex; justify-content: center; align-items: center; }
.progress-text { text-align: center; font-size: 14px; color: #64748b; margin-top: 4px; }