/**
 * 工具类样式
 *
 * 职责：提供可复用的原子类，用于快速设置常用样式
 * 使用方式：直接在 HTML class 中添加
 */

/* ========== 1. 输入框宽度 ========== */

/**
 * 5档标准宽度（新开发统一使用）
 *
 * | 档位  | 宽度  | 适用场景                           |
 * |-------|-------|-----------------------------------|
 * | w-xs  | 80px  | 短数字: ID、序号、数量、评分        |
 * | w-sm  | 120px | 选择框/短文本: 状态、类型、姓名     |
 * | w-md  | 180px | 常规文本(默认): 名称、标题、手机号  |
 * | w-lg  | 250px | 长文本: 邮箱、地址、商户全称        |
 * | w-xl  | 320px | 超长文本/多行: 描述、备注、命令     |
 */
.w-xs { width: var(--input-w-xs); }   /* 80px */
.w-sm { width: var(--input-w-sm); }   /* 120px */
.w-md { width: var(--input-w-md); }   /* 180px */
.w-lg { width: var(--input-w-lg); }   /* 250px */
.w-xl { width: var(--input-w-xl); }   /* 320px */
.w-full { width: 100%; }

/* EasyUI 宽度归一:input 系(textbox/numberbox/spinner/datebox)渲染外宽=声明+8(组件容器
   另加边框内距),select 系(combobox)渲染外宽=声明,导致同级控件右缘差 8px 不对齐。
   给 select 补 8px,两类控件外宽一致(实测 textbox w-lg=258 vs combobox w-lg=250)。 */
select.w-xs { width: calc(var(--input-w-xs) + 8px); }
select.w-sm { width: calc(var(--input-w-sm) + 8px); }
select.w-md { width: calc(var(--input-w-md) + 8px); }
select.w-lg { width: calc(var(--input-w-lg) + 8px); }
select.w-xl { width: calc(var(--input-w-xl) + 8px); }

/* ========== 1.5 多行文本框高度（EasyUI textbox multiline） ========== */

/**
 * EasyUI textbox 的 multiline 高度通过 data-options 配置，非 CSS class
 * 统一使用以下 4 档标准高度（单位 px）：
 *
 * | 档位 | 高度   | 适用场景                          |
 * |------|--------|----------------------------------|
 * | 70   | 70px   | 短备注: 备注、卖点、附加数据      |
 * | 80   | 80px   | 中等输入: 字段列表、ID批量输入    |
 * | 100  | 100px  | 较长输入: 渠道参数、配置数据      |
 * | 280  | 280px  | 超大文本: 配置值（JSON等）        |
 *
 * 用法: data-options="multiline:true,height:70"
 * 禁止使用 style="height:XXpx" 设置多行文本框高度
 */

/* ========== 2. 弹窗尺寸 ========== */
/* 宽度 = padding(60) + 标签宽度 + 星号(20) + 输入框宽度 */
/* 标签宽度: form-label=55, form-label-lg=75, form-label-xl=95 */

.dialog-sm { width: 360px; }    /* form-label(55) + w-220(220) = 355 */
.dialog-md { width: 390px; }    /* form-label(55) + w-250(250) = 385 */
.dialog-lg { width: 410px; }    /* form-label-lg(75) + w-250(250) = 405 */
.dialog-xl { width: 430px; }    /* form-label-xl(95) + w-250(250) = 425 */
.dialog-xxl { width: 500px; }   /* 超长标签/输入框 或带列表 */
.dialog-2xl { width: var(--dialog-2xl); }   /* 650px 数据权限/认证等复杂弹窗 */
.dialog-3xl { width: var(--dialog-3xl); }   /* 700px 日志详情/列选择等展示弹窗 */
.dialog-4xl { width: var(--dialog-4xl); }   /* 800px SQL详情等超大展示弹窗 */

/* ========== 3. 状态类（供 JS 切换） ========== */

/* 空值状态 */
.is-empty {
    color: var(--color-text-muted) !important;
}

/* Tooltip 深色主题 */
.tooltip-dark {
    background-color: var(--color-text-secondary) !important;
    border-color: var(--color-text-secondary) !important;
}

/* ========== 4. 文本对齐 ========== */

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

/* ========== 5. 间距 ========== */

/* margin */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }

.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }

/* padding */
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* ========== 6. 显示/隐藏 ========== */

.hidden { display: none !important; }
.visible { display: block; }
.invisible { visibility: hidden; }

/* ========== 7. Flex 布局 ========== */

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-height: 0; }
.flex-column { display: flex; flex-direction: column; }

/* ========== 8. 链接样式 ========== */

a {
    color: var(--color-text);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
    /* 不加下划线：全站链接 hover 仅变深颜色，干脆一套（带图标的链接下划线会画到图标底下；与选择列弹窗一致） */
}

/* ========== 9. Select2 全局修复 ========== */
/* 外层 div：边框样式与 EasyUI textbox 一致，总高 24px (border 2px + ul 22px) */
.select2-container-multi {
    width: auto !important;
    min-width: 188px !important;
    max-width: calc(100% - 40px) !important;
    flex-shrink: 0 !important;
    border: 1px solid #95B8E7 !important;
    border-radius: 5px !important;
    background: #fff !important;
}
/* ul 标签列表：高度 22px，去掉原有边框 */
.select2-container-multi .select2-choices {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 22px !important;
    padding: 0 0 0 4px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
/* 输入框 */
.select2-container-multi .select2-choices .select2-search-field {
    width: 60px !important;
    flex: 0 0 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container-multi .select2-choices .select2-search-field input {
    width: 100% !important;
    height: 20px !important;
    padding: 0 3px !important;
    margin: 0 !important;
    line-height: 20px !important;
}
/* 选中标签：11px 字体，高度适配 22px ul */
.select2-container-multi .select2-choices .select2-search-choice {
    box-sizing: border-box !important;
    margin: 1px 0 1px 3px !important;
    padding: 0 5px 0 16px !important;
    height: 18px !important;
    line-height: 16px !important;
    font-size: 11px !important;
    border: 1px solid #95B8E7 !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-shadow: none !important;
}
/* 关闭图标垂直居中 */
.select2-container-multi .select2-search-choice-close {
    top: 50%;
    transform: translateY(-50%);
}

/* combotree 空值时字号修正 */
input.textbox-text.is-empty {
    font-size: var(--font-size-base) !important;
}

/* ========== 10. DateRangePicker 覆盖 ========== */

.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
    padding: 1px;
}

.daterangepicker.ltr {
    padding-bottom: 30px;
}

.daterangepicker.ltr .ranges ul {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid var(--color-border-light);
}

.daterangepicker.ltr .ranges li {
    float: left;
    font-size: var(--font-size-base);
    padding: 8.8px;
}

/* ========== 11. JSON 编辑器 ========== */

.json-editor.CodeMirror,
.json-editor .CodeMirror {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.json-editor .CodeMirror-scroll {
    overflow-x: hidden !important;
}

.json-editor .CodeMirror-code pre {
    word-break: break-all;
}

.json-editor-bar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* ========== 12. EasyUI 微调（仅必要的） ========== */

/* 分页栏字体统一 */
.pagination,
.pagination-num,
.pagination-page-list {
    font-size: var(--font-size-base);
    font-family: var(--font-family);
}

/* 表格单元格内边距 + 数字等宽对齐 */
.datagrid-cell,
.datagrid-cell-group,
.datagrid-header-rownumber,
.datagrid-cell-rownumber {
    padding: 0 var(--spacing-sm) !important;
    font-family: system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* 按钮高度统一 */
.l-btn-text {
    height: 22px;
    line-height: 22px;
}

/* LinkButton 内 FA 图标间距 */
.l-btn-text .fa {
    display: inline-block;
    width: 14px;
    height: 16px;
    font-size: 14px;
    line-height: 16px;
    margin-right: 4px;
    text-align: center;
    vertical-align: middle;
}

/* 纯图标按钮（无文字）- 图标居中 */
.l-btn-text > .fa:only-child {
    margin-right: 0;
}

/* Dialog 标题栏 FA 图标间距 */
.panel-title .fa {
    margin-right: var(--spacing-xs);
}