/* ==========================================================================
   后台全局商务美化层 (admin_business.css)
   --------------------------------------------------------------------------
   加载顺序：位于 base.html 的 head 最末端，晚于 base/custom/admin_fixes、
   base_site 内联主题及各页面 extrastyle/extrahead，因此作为最终收口层。
   职责：
     1) 统一官方 change_form / change_list 的表单、标签与输入对齐；
     2) 红色必填星与字段提示；
     3) 富文本(CKEditor)容器商务化；
     4) 通用元素(标题/错误/帮助/分页/筛选等)细部打磨。
   原则：只调样式，不修改页面结构与业务逻辑。
   ========================================================================== */

/* ---------- 1. 页面通用 ---------- */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#content {
    padding: 20px 22px 40px;
}

/* 内容标题 */
#content h1 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 6px 0 18px;
    letter-spacing: .3px;
}

/* 模块主卡片：官方 admin 通用 */
#content-main .module {
    border-radius: 10px;
    overflow: hidden;
}

/* ---------- 2. 官方 change_form：标签与输入水平对齐 ---------- */

/* 仅在 Django 官方渲染的编辑页生效（body.change-form + .module.aligned），
   不影响各模型 fork 出的自定义表单页。 */
body.change-form #content-main .module.aligned .form-row,
body.change-form #content-main fieldset.module.aligned .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px 8px;
    margin: 0 0 4px;
    border-bottom: 1px solid #f1f5f9;
    background: transparent !important;
    box-shadow: none;
}
body.change-form #content-main .module.aligned .form-row:last-child {
    border-bottom: none;
}
body.change-form #content-main .module.aligned .form-row:hover {
    box-shadow: none;
    transform: none;
}

/* 单字段：label 与控件平铺在同一行 */
body.change-form #content-main .module.aligned .form-row > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
body.change-form #content-main .module.aligned .form-row label {
    display: block;
    flex: 0 0 210px;
    max-width: 210px;
    min-width: 210px;
    margin: 9px 14px 0 0;
    text-align: right;
    font-weight: 600;
    color: #334155;
    line-height: 1.6;
    box-sizing: border-box;
}
body.change-form #content-main .module.aligned .form-row label::after {
    content: "：";
    color: #334155;
}

/* 控件列 */
body.change-form #content-main .module.aligned .form-row > div > input,
body.change-form #content-main .module.aligned .form-row > div > select,
body.change-form #content-main .module.aligned .form-row > div > textarea,
body.change-form #content-main .module.aligned .form-row > div > .related-widget-wrapper,
body.change-form #content-main .module.aligned .form-row > div > .django-ckeditor-widget,
body.change-form #content-main .module.aligned .form-row > div > .readonly {
    flex: 1 1 auto;
    min-width: 320px;
    max-width: 780px;
    margin: 0;
}

/* 帮助/提示文本：另起一行并缩进，与控件首列对齐 */
body.change-form #content-main .module.aligned .form-row .help,
body.change-form #content-main .module.aligned .form-row .help-text,
body.change-form #content-main .module.aligned .form-row .field-help,
body.change-form #content-main .module.aligned .form-row [id$="_helptext"] {
    flex-basis: 100%;
    width: auto;
    max-width: 780px;
    margin: 4px 0 0 224px;
    padding: 0;
    font-size: 12px;
    line-height: 1.7;
    color: #94a3b8;
    background: transparent;
}
body.change-form #content-main .module.aligned .form-row .field-hint {
    flex-basis: 100%;
    max-width: 780px;
    margin: 4px 0 0 224px;
    font-size: 12px;
    line-height: 1.6;
    color: #dc2626;
}

/* 多字段同行的 fieldBox：保持两列内对齐 */
body.change-form #content-main .module.aligned .form-row .fieldBox {
    flex: 1 1 auto;
    min-width: 45%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
body.change-form #content-main .module.aligned .form-row .fieldBox label {
    flex-basis: 210px;
    max-width: 210px;
    text-align: right;
    margin-right: 14px;
}
body.change-form #content-main .module.aligned .form-row .fieldBox .help {
    margin-left: 224px;
}

/* checkbox 保持行内 */
body.change-form #content-main .module.aligned .form-row > .checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 320px;
    max-width: 780px;
    margin: 2px 0 0;
}
body.change-form #content-main .module.aligned .form-row > .checkbox-row input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex: none;
}
body.change-form #content-main .module.aligned .form-row > .checkbox-row label {
    flex: none;
    min-width: 0;
    max-width: none;
    width: auto;
    margin: 0;
    text-align: left;
    font-weight: 500;
}
body.change-form #content-main .module.aligned .form-row > .checkbox-row label::after {
    content: "";
}
body.change-form #content-main .module.aligned .form-row > .checkbox-row .help {
    flex-basis: 100%;
    margin: 2px 0 0 26px;
}

/* 只读字段 */
body.change-form #content-main .module.aligned .form-row .readonly {
    display: block;
    margin-top: 2px;
    line-height: 1.7;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 10px 12px;
}

/* 日期时间等子控件去 max-width 压制 */
body.change-form #content-main .module.aligned .form-row .datetimeshortcuts {
    margin-left: 8px;
    white-space: nowrap;
}
body.change-form #content-main .module.aligned .form-row input.vTimeField,
body.change-form #content-main .module.aligned .form-row input.vDateField {
    width: auto;
    min-width: 120px;
    flex: none;
}

/* 官方文本控件统一样式 */
body.change-form #content-main .module.aligned .form-row input[type="text"],
body.change-form #content-main .module.aligned .form-row input[type="email"],
body.change-form #content-main .module.aligned .form-row input[type="password"],
body.change-form #content-main .module.aligned .form-row input[type="number"],
body.change-form #content-main .module.aligned .form-row input[type="url"],
body.change-form #content-main .module.aligned .form-row select,
body.change-form #content-main .module.aligned .form-row textarea {
    box-sizing: border-box;
    border: 1px solid #dbe1ea;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.change-form #content-main .module.aligned .form-row input:focus,
body.change-form #content-main .module.aligned .form-row select:focus,
body.change-form #content-main .module.aligned .form-row textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .15);
}

/* fieldset 标题：渐变左侧条 + 深色文字 */
body.change-form #content-main fieldset.module.aligned h2,
body.change-form #content-main fieldset.module h2 {
    background: linear-gradient(90deg, #f8fafc, #fff);
    color: #2c3e50;
    border-left: 4px solid #667eea;
    padding: 12px 16px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}

/* 必填星号（红色） */
body.change-form label.required,
body.change-form #content-main .module.aligned .form-row label.required {
    color: #1e293b;
}
body.change-form label.required::before,
body.change-form #content-main .module.aligned .form-row label.required::before {
    content: "* ";
    color: #dc2626;
    font-weight: 700;
}
/* 星号不应影响冒号伪元素 */
body.change-form label.required::after {
    color: #334155;
}

/* 错误提示 */
body.change-form #content-main .module.aligned .form-row.errors,
body.change-form #content-main .module.aligned .form-row .errors {
    background: #fff7f7;
    border-radius: 6px;
}
body.change-form #content-main .module.aligned .form-row .errorlist {
    flex-basis: 100%;
    margin: 0 0 6px 224px;
    padding: 6px 12px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 13px;
    list-style: none;
}

/* 提交按钮行 */
body.change-form .submit-row {
    background: transparent !important;
    border: none !important;
    margin: 18px 0 0;
    padding: 0 !important;
}
body.change-form .submit-row input {
    padding: 10px 26px !important;
    font-size: 14px;
}

/* ---------- 3. 富文本(CKEditor) ---------- */
body.change-form #content-main .module.aligned .form-row .django-ckeditor-widget {
    display: block !important;
    width: 100%;
    max-width: 900px;
}
body.change-form #content-main .module.aligned .form-row textarea.ckeditor,
body.change-form #content-main .module.aligned .form-row textarea[data-type="ckeditortype"] {
    max-width: 900px;
}
.cke_chrome {
    border: 1px solid #dbe1ea !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    max-width: 900px;
}
.cke_top {
    border-radius: 6px 6px 0 0;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.cke_bottom {
    border-radius: 0 0 6px 6px;
}

/* ---------- 3.5 全局提示（不限 change_form，供任何页面手写表单使用） ---------- */
.field-hint {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #dc2626;
    font-weight: 400;
}
.required-star {
    color: #dc2626;
    font-weight: 700;
    margin: 0 2px;
}

/* ---------- 4. 通用操作区/提示 ---------- */
.errornote {
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    border-radius: 8px;
    padding: 12px 16px !important;
    font-weight: 500;
}

/* 行内链接操作 */
.object-tools {
    margin-top: 0;
}
.object-tools li {
    margin: 0 0 0 8px;
}

/* 筛选器选中项强调 */
#changelist-filter li.selected a {
    color: #667eea;
    font-weight: 700;
}
#changelist-filter li.selected a::before {
    content: "• ";
    color: #764ba2;
}

/* 字段分组标题（fieldsets 无 <h2> 时的纯文本分组不做特殊处理） */

/* ---------- 5. 统一系统管理 fork 页面微小间距 ---------- */
/* fork 页面普遍使用这些内部类；这里只做"无侵入补间距"，不覆盖已有配色。
   为避免覆盖各 fork 在自身 <style> 中定义的样式，此段选择器均以
   .content-wrapper 等 fork 顶层容器开头并保持与 fork 风格一致的数值。 */
.content-wrapper .page-header {
    margin-bottom: 18px;
}
.content-wrapper .data-table-wrap,
.content-wrapper .card .table-responsive {
    border-radius: 10px;
    overflow-x: auto;
}

/* ---------- 6. 响应式兜底：窄屏恢复纵向 ---------- */
@media (max-width: 992px) {
    body.change-form #content-main .module.aligned .form-row label {
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left;
        margin: 0 0 4px;
    }
    body.change-form #content-main .module.aligned .form-row .help,
    body.change-form #content-main .module.aligned .form-row .help-text,
    body.change-form #content-main .module.aligned .form-row .field-help,
    body.change-form #content-main .module.aligned .form-row .field-hint,
    body.change-form #content-main .module.aligned .form-row .errorlist {
        margin-left: 0;
    }
    body.change-form #content-main .module.aligned .form-row > div > input,
    body.change-form #content-main .module.aligned .form-row > div > textarea,
    body.change-form #content-main .module.aligned .form-row > div > select {
        min-width: 0;
        max-width: 100%;
    }
}

/* ==========================================================================
   6. 鏁版嵁绠＄悊妯″潡涓撶敤甯冨眬锛坆ody.change-form.data-mgmt-form锛岀壒寮傛€ф渶楂橈級
   瑙勫垯锛氭爣绛?100px 宸﹀垪銆佹帶浠惰嚜閫傚簲銆乭elp 鏁磋锛屾瘡涓?form-row 鐙崰涓€琛屻€?   鍙綔鐢ㄤ簬 body 鍚屾椂鍚?change-form + data-mgmt-form 鐨勯〉闈紙鏁版嵁绠＄悊 fork 妯℃澘锛夛紝
   涓嶅奖鍝嶅叾浠?Django admin 妯″潡銆?   ========================================================================== */

/* 6.1 鍗＄墖瀹瑰櫒 */
body.change-form.data-mgmt-form #content-main .module.aligned,
body.change-form.data-mgmt-form #content-main fieldset.module.aligned {
    display: block !important;
    padding: 22px 28px 26px !important;
    max-width: 100% !important;
    background: #fff !important;
    border: 1px solid #e5e9f2 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}

/* 6.2 姣忎釜 form-row 鐙崰涓€琛岋細nowrap + width:100% + clear:both */
body.change-form.data-mgmt-form #content-main .module.aligned .form-row,
body.change-form.data-mgmt-form #content-main fieldset.module.aligned .form-row {
    display: flex !important;
    flex-wrap: nowrap !important;            /* 琛屽唴涓嶅厑璁告崲琛岋紙label/div 鍚岃锛?*/
    align-items: flex-start !important;
    padding: 14px 2px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #eef2f7 !important;
    clear: both;
    float: none;
}
body.change-form.data-mgmt-form #content-main .module.aligned .form-row:last-child,
body.change-form.data-mgmt-form #content-main fieldset.module.aligned .form-row:last-child {
    border-bottom: none !important;
}

/* 6.3 鏍囩鍒楋細鍥哄畾 100px */
body.change-form.data-mgmt-form #content-main .module.aligned .form-row > label,
body.change-form.data-mgmt-form #content-main fieldset.module.aligned .form-row > label {
    flex: 0 0 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    width: 100px !important;
    margin: 9px 14px 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

/* 6.4 鎺т欢鍒楋細flex 1锛宮in-width:0 鎵嶈兘琚帇缂╁埌 100% */
body.change-form.data-mgmt-form #content-main .module.aligned .form-row > div,
body.change-form.data-mgmt-form #content-main fieldset.module.aligned .form-row > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    display: block !important;
}

/* 6.5 鎺т欢鏈韩锛?00% 鍗犳弧鎺т欢鍒?*/
body.change-form.data-mgmt-form #content-main .module.aligned .form-row > div > input,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row > div > select,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row > div > textarea,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row > div > .related-widget-wrapper,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row > div > .readonly,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row > div > .django-ckeditor-widget {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* 6.6 help / 閿欒 / 鎻愮ず锛氭暣琛屻€佹帶浠跺垪涓嬫柟銆佸乏瀵归綈 */
body.change-form.data-mgmt-form #content-main .module.aligned .form-row {
    overflow: visible !important;
}
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .help,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .help-text,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .field-help,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .field-hint,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row [id$="_helptext"],
body.change-form.data-mgmt-form #content-main .module.aligned .form-row span.help,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .errorlist,
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .errors {
    display: block !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: calc(100% + 114px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 6px 0 0 -114px !important;
    padding: 0 0 0 114px !important;
    white-space: normal !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* 6.7 fieldBox锛堝悓 form-row 鍐呯殑澶氬瓧娈碉級涔熷崟琛?*/
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .fieldBox,
body.change-form.data-mgmt-form #content-main fieldset.module.aligned .form-row .fieldBox {
    flex: 0 0 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    border: 0;
    padding: 0;
    margin: 0 0 8px;
}
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .fieldBox label,
body.change-form.data-mgmt-form #content-main fieldset.module.aligned .form-row .fieldBox label {
    flex: 0 0 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    width: 100px !important;
    margin: 9px 14px 0 0 !important;
    text-align: right !important;
}
body.change-form.data-mgmt-form #content-main .module.aligned .form-row .fieldBox .help,
body.change-form.data-mgmt-form #content-main fieldset.module.aligned .form-row .fieldBox .help {
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}