/* 
   Impeccable Styling - Unified Common Rules (v1.1)
   Designed for global reuse across mostly standard list pages.
*/

:root {
    --im-primary: #3b82f6;
    --im-primary-hover: #2563eb;
    --im-success: #10b981;
    --im-success-hover: #059669;
    --im-info: #0ea5e9;
    --im-info-hover: #0284c7;
    --im-warning: #f59e0b;
    --im-warning-hover: #d97706;
    --im-danger: #ef4444;
    --im-danger-hover: #dc2626;
    --im-border: #e2e8f0;
    --im-surface: #f8fafc;
    --im-text-main: #1e293b;
    --im-text-sub: #64748b;
    --im-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --im-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* 1. Global Page Animation */
.im-fade-in {
    padding: 18px 20px 20px 20px;
    animation: imFadeIn 0.4s ease-out forwards;
}
@keyframes imFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fix for top spacing in common admin layouts */
.content {
    padding-top: 5px !important;
}

/* 2. Standard Container Cards (Search & Table) */
.search-collapse {
    background: #fff !important;
    border: 1px solid var(--im-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--im-shadow-md) !important;
    padding: 8px 16px !important; 
    margin-bottom: 8px !important; 
    width: 100% !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
}

/* Internal Row Containers */
.select-list {
    width: 100% !important;
}

.select-list ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.select-list ul li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
}

/* Integrated Toolbar */
#toolbar {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.im-toolbar {
    display: inline-flex !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.select-table {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: var(--im-shadow-md) !important;
    padding: 8px 12px !important; 
    border: 1px solid var(--im-border) !important;
    clear: both !important;
}

/* 3. Button & Input Precision Alignment (32px Height) */
.btn, .form-control, input, select {
    height: 32px !important; /* Slightly larger for better touch/vision */
    font-size: 13px !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
}

.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important; /* More horizontal breathing room */
    border: none !important;
    font-weight: 500 !important;
    box-shadow: var(--im-shadow-sm) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--im-shadow-md) !important;
}

/* Icon Alignment Correction (Natural Breathing Room) */
.btn i {
    margin-left: 0 !important; 
    margin-right: 6px !important; /* Natural gap as requested */
    width: auto !important;
    min-width: 0 !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Colors - Sync with Modern-UI Skill */
.btn-primary { background-color: var(--im-primary) !important; color: #fff !important; border: 1px solid transparent !important; }
.btn-primary:hover { background-color: var(--im-primary-hover) !important; }

.btn-success { background-color: var(--im-success) !important; color: #fff !important; }
.btn-success:hover { background-color: var(--im-success-hover) !important; }

.btn-info { background-color: var(--im-info) !important; color: #fff !important; }
.btn-info:hover { background-color: var(--im-info-hover) !important; }

.btn-warning { background-color: var(--im-warning) !important; color: #fff !important; }
.btn-warning:hover { background-color: var(--im-warning-hover) !important; }

.btn-danger { background-color: var(--im-danger) !important; color: #fff !important; }
.btn-danger:hover { background-color: var(--im-danger-hover) !important; }

.btn-default { background-color: #fff !important; color: var(--im-text-sub) !important; border: 1px solid var(--im-border) !important; min-width: 0 !important; width: auto !important; }
.btn-default:hover { background-color: var(--im-surface) !important; color: var(--im-text-main) !important; }

/* Prevent search-bar buttons from stretching in flex/float context */
.im-search-item .btn,
.search-actions .btn { flex: none !important; width: auto !important; min-width: 0 !important; }
 
/* 3.1 Extra Small Buttons (For Table Actions) */
.btn-xs {
    height: 24px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}
 
.btn-xs i {
    margin-right: 4px !important;
    font-size: 10px !important;
}

/* Operation button group — unified flex layout for table action cells */
.op-btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
    align-items: center !important;
}
.op-btn-group .btn {
    margin: 0 !important;
    flex-shrink: 0;
}

/* Semantic action button color convention (applied via btn-xs helpers):
   编辑/修改  → btn-warning  (amber)
   查看/详情  → btn-info     (sky)
   删除/驳回  → btn-danger   (red)
   新增/充值  → btn-success  (green)
   日志/记录  → btn-primary  (indigo)
*/

/* 4. High-Density Table Headers (Permanent Underline Removal & Height Optimization) */
html body .table thead th,
html body .table thead th a,
html body .bootstrap-table .th-inner,
html body .fixed-table-header th .th-inner {
    background-color: var(--im-surface) !important;
    color: var(--im-text-main) !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    padding: 2px 12px !important; /* Even smaller padding for precision */
    font-size: 13px !important;
    line-height: normal !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    display: table-cell; /* Standard table alignment fallback */
}

/* Specific fix for Bootstrap Table's inner div to ensure vertical centering */
html body .bootstrap-table .th-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: inherit !important; /* Inherit align: 'center'/'right' from JS */
    min-height: 28px !important; /* Minimum height for consistent look */
    padding: 0 12px !important;
}

.table tbody td {
    padding: 6px 12px !important; 
    border-top: 1px solid var(--im-border) !important;
    vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fcfdfe !important;
}

.fixed-table-toolbar { display: none !important; }

/* Extra-wide desktop can safely stretch bootstrap-table to the container.
   On narrower desktop widths we prefer horizontal scrolling over squeezing
   columns, otherwise some rent list pages become unusable. */
@media (min-width: 1367px) {
    .bootstrap-table .fixed-table-container .fixed-table-header table,
    .bootstrap-table .fixed-table-container .fixed-table-body table,
    .bootstrap-table .fixed-table-container .fixed-table-footer table {
        width: 100% !important;
    }
}

/* Input/Select Improvements */
.form-control, input[type="text"], select {
    border: 1px solid var(--im-border) !important;
    padding: 0 10px !important;
    background-color: #ffffff !important;
}

select.form-control {
    padding-right: 30px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    cursor: pointer;
}

/* 5. Generic Dashboard Components */
.im-header-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #fff !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
    border: 1px solid var(--im-border) !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.im-header-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--im-text-main) !important;
}

.im-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    border: 1px solid transparent !important;
}

/* Badge Variants with High Visibility */
.im-status-badge.badge-success { color: #15803d !important; background: #ecfdf5 !important; border-color: #d1fae5 !important; }
.im-status-badge.badge-danger { color: #b91c1c !important; background: #fef2f2 !important; border-color: #fecaca !important; }
.im-status-badge.badge-info { color: #1d4ed8 !important; background: #eff6ff !important; border-color: #dbeafe !important; }
.im-status-badge.badge-warning { color: #a16207 !important; background: #fffbeb !important; border-color: #fef3c7 !important; }
.im-status-badge.badge-default { color: #475569 !important; background: #f1f5f9 !important; border-color: #e2e8f0 !important; }

/* Legacy aliases for backward compatibility */
.im-status-success { color: #059669 !important; background: #ecfdf5 !important; border-color: #d1fae5 !important; }
.im-status-danger { color: #dc2626 !important; background: #fef2f2 !important; border-color: #fecaca !important; }
.im-status-info { color: #0284c7 !important; background: #eff6ff !important; border-color: #dbeafe !important; }

.im-table-wrapper {
    background: #fff !important;
    padding: 16px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
    border: 1px solid var(--im-border) !important;
}

@media (max-width: 768px) {
    .im-table-wrapper {
        padding: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    .im-table-wrapper > .table-responsive {
        margin-bottom: 0 !important;
        border: 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .im-table-wrapper table.im-table-mobile-medium,
    .im-table-wrapper table.im-table-mobile-wide,
    .im-table-wrapper table.im-table-mobile-xwide {
        width: max-content !important;
        max-width: none !important;
    }

    .im-table-wrapper table.im-table-mobile-medium {
        min-width: 720px;
    }

    .im-table-wrapper table.im-table-mobile-wide {
        min-width: 960px;
    }

    .im-table-wrapper table.im-table-mobile-xwide {
        min-width: 1120px;
    }
}

/* 6. Professional Table Cell Formatters */
.multi-line-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
}

.main-text {
    font-weight: 600 !important;
    color: var(--im-text-main) !important;
}

.sub-text {
    font-size: 12px !important;
    color: #475569 !important; /* Slate 600 */
}

.amount-cell {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums !important;
}

.secondary-text {
    color: #64748b !important; /* Slate 500 */
    font-size: 12px !important;
}

/* 11. Custom Premium Radio/Checkbox Blocks (Isolated from Framework) */
.im-radio, .im-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 22px !important;
    margin-right: 15px !important;
    margin-bottom: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
    color: #334155 !important;
    user-select: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    position: relative !important;
    min-height: 44px !important; /* Touch-friendly and stable height */
}

/* 彻底隐藏原生控件，防止重叠 */
.im-radio input, .im-check input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* 自定义标记容器 */
.im-radio-mark, .im-check-mark {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    background: #fff;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    box-sizing: border-box;
}

.im-radio-mark { border-radius: 50%; }
.im-check-mark { border-radius: 6px; }

/* 兼容旧浏览器：不要把 :has() 和普通选择器写在同一条规则里 */
.im-radio.is-checked,
.im-check.is-checked {
    border-color: #4e73df !important;
    background: #eff6ff !important;
    color: #1e40af !important;
    box-shadow: 0 4px 12px -2px rgba(78, 115, 223, 0.2) !important;
}

.im-radio:has(input:checked),
.im-check:has(input:checked) {
    border-color: #4e73df !important;
    background: #eff6ff !important;
    color: #1e40af !important;
    box-shadow: 0 4px 12px -2px rgba(78, 115, 223, 0.2) !important;
}

.im-radio.is-checked .im-radio-mark,
.im-radio input:checked + .im-radio-mark {
    border-color: #4e73df;
    border-width: 6px;
}

.im-radio:has(input:checked) .im-radio-mark {
    border-color: #4e73df;
    border-width: 6px;
}

.im-radio.is-checked .im-radio-text,
.im-radio input:checked ~ .im-radio-text,
.im-check.is-checked,
.im-check input:checked ~ .im-check-text {
    color: #1e40af !important;
}

.im-radio:has(input:checked) .im-radio-text,
.im-check:has(input:checked) {
    color: #1e40af !important;
}

/* Checkbox 选中勾 */
.im-check.is-checked .im-check-mark,
.im-check input:checked + .im-check-mark {
    background: #4e73df;
    border-color: #4e73df;
}

.im-check:has(input:checked) .im-check-mark {
    background: #4e73df;
    border-color: #4e73df;
}

.im-check.is-checked .im-check-mark:after,
.im-check input:checked + .im-check-mark:after {
    content: "\f00c";
    font-family: "FontAwesome";
    font-size: 10px;
    color: #fff;
}

.im-check:has(input:checked) .im-check-mark:after {
    content: "\f00c";
    font-family: "FontAwesome";
    font-size: 10px;
    color: #fff;
}

.im-radio:hover, .im-check:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

/* 7. Premium Stats Bar (Refined for Text Fidelity) */
.im-stats-bar { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 20px !important; 
    margin-bottom: 16px !important;
    background: #fff !important;
    border: 1px solid var(--im-border) !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
    align-items: center !important;
}

.im-stat-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-size: 13px !important;
    color: var(--im-text-main) !important;
}

.im-stat-label { 
    color: var(--im-text-sub) !important; 
    font-weight: 500 !important;
}

.im-stat-value { 
    font-weight: 700 !important; 
    font-family: 'JetBrains Mono', monospace !important; 
    font-size: 15px !important;
}

.im-stat-value.success { color: var(--im-success) !important; }
.im-stat-value.primary { color: var(--im-primary) !important; }
.im-stat-value.warning { color: var(--im-warning) !important; }
.im-stat-value.danger { color: var(--im-danger) !important; }

/* Grid version for when explicit cards are needed */
.im-stats-grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; 
    gap: 12px !important; 
    margin-bottom: 16px !important;
}
.im-stats-card {
    background: #fff !important;
    border: 1px solid var(--im-border) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.im-stats-card .im-stat-label { font-size: 11px !important; text-transform: uppercase !important; }
.im-stats-card .im-stat-value { font-size: 18px !important; }

/* Legacy im-stats-top mapping */
.im-stats-top {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

.im-search-compact {
    background: #fff !important;
    border: 1px solid var(--im-border) !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
}

.im-search-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: center !important;
}

.im-search-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.im-search-item label {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    white-space: nowrap !important;
}

@media (min-width: 769px) and (max-width: 1366px) {
    .im-search-compact {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .select-table,
    .bootstrap-table .fixed-table-container,
    .bootstrap-table .fixed-table-pagination {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .im-search-row {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    .bootstrap-table .fixed-table-container .fixed-table-body {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .bootstrap-table .fixed-table-container .fixed-table-header table,
    .bootstrap-table .fixed-table-container .fixed-table-body table,
    .bootstrap-table .fixed-table-container .fixed-table-footer table {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
    }
}
/* 10. Unified Styles for Add/Edit Pages (Form Modals) */
.layeropentop {
    background: #f8fafc !important; /* Premium Surface */
    padding: 24px 36px !important;
    box-sizing: border-box;
    max-width: 100%;
}

.layerform {
    padding: 15px 25px !important;
    background: #fff !important;
    border-radius: 12px;
    margin: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 767px) {
    .layeropentop {
        padding: 10px 12px 6px !important;
    }

    .layerform {
        margin: 0 !important;
        padding: 12px !important;
    }
}

.form-group {
    margin-bottom: 20px !important;
}

.form-horizontal.m .form-group,
.im-modern-form .form-group {
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}

.form-horizontal.m .form-group > label.control-label,
.im-modern-form .form-group > label.control-label {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.form-horizontal.m .form-group > div[class*="col-sm-"],
.im-modern-form .form-group > div[class*="col-sm-"] {
    min-height: 38px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* flex 横向表单栅格：仅桌面宽屏，避免与手机弹框纵向布局冲突 */
@media (min-width: 993px) {
    .form-horizontal.m .form-group > label.col-sm-1,
    .im-modern-form .form-group > label.col-sm-1,
    .form-horizontal.m .form-group > div.col-sm-1,
    .im-modern-form .form-group > div.col-sm-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; width: 8.333333% !important; box-sizing: border-box !important; }
    .form-horizontal.m .form-group > label.col-sm-2,
    .im-modern-form .form-group > label.col-sm-2,
    .form-horizontal.m .form-group > div.col-sm-2,
    .im-modern-form .form-group > div.col-sm-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; width: 16.666667% !important; box-sizing: border-box !important; }
    .form-horizontal.m .form-group > label.col-sm-3,
    .im-modern-form .form-group > label.col-sm-3,
    .form-horizontal.m .form-group > div.col-sm-3,
    .im-modern-form .form-group > div.col-sm-3 { flex: 0 0 25% !important; max-width: 25% !important; width: 25% !important; box-sizing: border-box !important; }
    .form-horizontal.m .form-group > label.col-sm-4,
    .im-modern-form .form-group > label.col-sm-4,
    .form-horizontal.m .form-group > div.col-sm-4,
    .im-modern-form .form-group > div.col-sm-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; width: 33.333333% !important; box-sizing: border-box !important; }
    .form-horizontal.m .form-group > label.col-sm-8,
    .im-modern-form .form-group > label.col-sm-8,
    .form-horizontal.m .form-group > div.col-sm-8,
    .im-modern-form .form-group > div.col-sm-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; width: 66.666667% !important; box-sizing: border-box !important; }
    .form-horizontal.m .form-group > label.col-sm-9,
    .im-modern-form .form-group > label.col-sm-9,
    .form-horizontal.m .form-group > div.col-sm-9,
    .im-modern-form .form-group > div.col-sm-9 { flex: 0 0 75% !important; max-width: 75% !important; width: 75% !important; box-sizing: border-box !important; }
    .form-horizontal.m .form-group > label.col-sm-10,
    .im-modern-form .form-group > label.col-sm-10,
    .form-horizontal.m .form-group > div.col-sm-10,
    .im-modern-form .form-group > div.col-sm-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; width: 83.333333% !important; box-sizing: border-box !important; }
    .form-horizontal.m .form-group > label.col-sm-12,
    .im-modern-form .form-group > label.col-sm-12,
    .form-horizontal.m .form-group > div.col-sm-12,
    .im-modern-form .form-group > div.col-sm-12 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
}

.form-horizontal.m label.control-label,
.im-modern-form label.control-label,
.im-modern-form .col-form-label {
    font-weight: 600 !important;
    color: #334155 !important;
    font-size: 13px !important;
    text-align: right !important;
    padding-top: 8px !important;
    padding-right: 15px !important;
}

.is-required::before {
    content: "* ";
    color: #ef4444;
    font-weight: 700;
    margin-right: 2px;
}

/* Elegant Input Styling with Volume */
.form-horizontal.m .form-control,
.im-modern-form .form-control {
    height: 38px; /* Remove !important to allow textareas to grow */
    max-width: 500px !important; 
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

.form-horizontal.m .form-control-static,
.im-modern-form .form-control-static {
    min-height: 38px !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #334155 !important;
}

.form-horizontal.m .input-group,
.im-modern-form .input-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 38px !important;
}

.form-horizontal.m .input-group .form-control,
.im-modern-form .input-group .form-control {
    max-width: none !important;
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    height: 38px !important;
    line-height: 20px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.form-horizontal.m .input-group > .form-control:not(:only-child),
.im-modern-form .input-group > .form-control:not(:only-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
}

.form-horizontal.m .input-group-btn,
.im-modern-form .input-group-btn {
    display: flex !important;
}

/* Select dropdown arrow fix: background shorthand above resets background-image, restore here */
.form-horizontal.m select.form-control,
.im-modern-form select.form-control {
    padding: 0 36px 0 14px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    cursor: pointer;
}

/* Textarea height fix */
.form-horizontal.m textarea.form-control,
.im-modern-form textarea.form-control {
    height: auto !important;
    min-height: 38px !important;
    line-height: 1.6 !important;
}

.form-horizontal.m textarea.form-control[rows="5"],
.im-modern-form textarea.form-control[rows="5"] {
    min-height: 120px !important;
}

.im-modern-form .form-control:focus {
    border-color: #4e73df !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.15) !important;
}

body .layui-layer-content .form-horizontal.m .form-control,
body .layui-layer-content .im-modern-form .form-control,
body .layui-layer-content .form-horizontal.m textarea.form-control,
body .layui-layer-content .im-modern-form textarea.form-control {
    width: 100% !important;
    max-width: none !important;
}

body .layui-layer-content .form-horizontal.m select.form-control,
body .layui-layer-content .im-modern-form select.form-control {
    width: 100% !important;
    max-width: none !important;
    padding: 0 36px 0 14px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    cursor: pointer;
}

body .layui-layer-content .form-horizontal.m .form-group > label.control-label,
body .layui-layer-content .im-modern-form .form-group > label.control-label {
    padding-top: 9px !important;
}

/* 11. Global Modal Footer (Layer Buttons) — 覆盖 layer-ext-moon 默认按钮样式 */
body .layui-layer-btn,
body .layer-ext-moon .layui-layer-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 14px 24px 16px !important;
    text-align: right !important;
    background: #fff !important;
    border-top: 1px solid #f1f5f9 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

body .layui-layer-btn a,
body .layui-layer-btn .layui-layer-btn0,
body .layui-layer-btn .layui-layer-btn1,
body .layer-ext-moon .layui-layer-btn a,
body .layer-ext-moon .layui-layer-btn .layui-layer-btn0,
body .layer-ext-moon .layui-layer-btn .layui-layer-btn1 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
    float: none !important;
    text-decoration: none !important;
    outline: none !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Primary "Confirm" Button */
body .layui-layer-btn .layui-layer-btn0,
body .layer-ext-moon .layui-layer-btn .layui-layer-btn0 {
    background: #4e73df !important;
    border: 1px solid #4e73df !important;
    color: #fff !important;
    padding: 0 28px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(78, 115, 223, 0.2) !important;
}

body .layui-layer-btn .layui-layer-btn0 i,
body .layer-ext-moon .layui-layer-btn .layui-layer-btn0 i {
    margin-right: 4px !important;
}

body .layui-layer-btn .layui-layer-btn0:hover,
body .layer-ext-moon .layui-layer-btn .layui-layer-btn0:hover {
    background: #2e59d9 !important;
    border-color: #2e59d9 !important;
    box-shadow: 0 4px 10px rgba(78, 115, 223, 0.3) !important;
    opacity: 1 !important;
    color: #fff !important;
}

/* Secondary "Cancel" Button */
body .layui-layer-btn .layui-layer-btn1,
body .layer-ext-moon .layui-layer-btn .layui-layer-btn1 {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

body .layui-layer-btn .layui-layer-btn1:hover,
body .layer-ext-moon .layui-layer-btn .layui-layer-btn1:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

/* Radio & Checkbox Modern Blocks */
.form-horizontal.m .radio-inline, 
.form-horizontal.m .checkbox-inline,
.form-horizontal.m .radio-box,
.form-horizontal.m .check-box,
.im-modern-form .radio-inline, 
.im-modern-form .checkbox-inline,
.im-modern-form .radio-box,
.im-modern-form .check-box {
    padding: 6px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    margin-right: 12px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    line-height: 1.2 !important;
    vertical-align: top !important;
    white-space: nowrap !important;
}

.form-horizontal.m .radio-inline input[type="radio"],
.form-horizontal.m .checkbox-inline input[type="checkbox"],
.form-horizontal.m .radio-box input[type="radio"],
.form-horizontal.m .check-box input[type="checkbox"],
.im-modern-form .radio-inline input[type="radio"], 
.im-modern-form .checkbox-inline input[type="checkbox"],
.im-modern-form .radio-box input[type="radio"],
.im-modern-form .check-box input[type="checkbox"] {
    margin: 0 8px 0 0 !important;
    position: static !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
}

.form-horizontal.m .radio-box .iradio-blue,
.form-horizontal.m .check-box .icheckbox-blue,
.im-modern-form .radio-box .iradio-blue,
.im-modern-form .check-box .icheckbox-blue,
.form-horizontal.m .radio-box .iradio,
.form-horizontal.m .check-box .icheckbox,
.im-modern-form .radio-box .iradio,
.im-modern-form .check-box .icheckbox {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: inline-block !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.form-horizontal.m .radio-box > input[type="radio"],
.form-horizontal.m .check-box > input[type="checkbox"],
.im-modern-form .radio-box > input[type="radio"],
.im-modern-form .check-box > input[type="checkbox"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.form-horizontal.m .radio-box.checked,
.form-horizontal.m .check-box.checked,
.im-modern-form .radio-box.checked,
.im-modern-form .check-box.checked,
.form-horizontal.m .radio-box:has(.checked),
.form-horizontal.m .check-box:has(.checked),
.im-modern-form .radio-box:has(.checked),
.im-modern-form .check-box:has(.checked) {
    background: #eef4ff !important;
    border-color: rgba(78, 115, 223, 0.35) !important;
    color: #3456b8 !important;
}

.radio-options,
.checkbox-options {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

.radio-option,
.checkbox-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 40px !important;
    padding: 8px 16px !important;
    border: 1px solid #dbe4f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.radio-option:hover,
.checkbox-option:hover {
    border-color: #bfd0ea !important;
    background: #f8fbff !important;
}

.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    accent-color: var(--im-primary) !important;
}

.radio-option span,
.checkbox-option span {
    line-height: 1.45 !important;
}

body .layui-layer-content .form-horizontal.m,
body .layui-layer-content .im-modern-form {
    padding: 18px 8px 4px !important;
}

.form-horizontal.m .radio-inline:hover, 
.form-horizontal.m .checkbox-inline:hover,
.form-horizontal.m .radio-box:hover,
.form-horizontal.m .check-box:hover,
.im-modern-form .radio-inline:hover, 
.im-modern-form .checkbox-inline:hover,
.im-modern-form .radio-box:hover,
.im-modern-form .check-box:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #4e73df !important;
}

.form-horizontal.m .help-block,
.im-modern-form .help-block {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 6px !important;
    display: block !important;
    font-weight: normal !important;
}

/* Input Group Precision */
.form-horizontal.m .input-group-addon,
.im-modern-form .input-group-addon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 1 !important;
    padding: 0 10px !important;
    margin: 0 !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

.form-horizontal.m .input-group > .form-control:focus,
.im-modern-form .input-group > .form-control:focus {
    z-index: 2 !important;
}

.form-horizontal.m .input-group > .form-control:focus + .input-group-addon,
.im-modern-form .input-group > .form-control:focus + .input-group-addon {
    border-color: #4e73df !important;
    z-index: 2 !important;
}

/* 12. Table Alignment Synchronization */
.bootstrap-table .fixed-table-container .table thead th .th-inner {
    text-align: inherit !important;
    display: block !important;
}

/* Ensure numeric integrity in table cells */
.main-text[style*="text-align: right"],
.secondary-text[style*="text-align: right"] {
    display: block;
    width: 100%;
}

/* 14. Premium Image Upload Component */
.im-upload-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.im-upload-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.im-upload-preview {
    width: 120px;
    height: 120px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.im-upload-preview:hover {
    border-color: #4e73df;
    background: #f1f5f9;
}

.im-upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.im-upload-preview i {
    font-size: 24px;
    color: #94a3b8;
}

.im-upload-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.im-upload-url-input {
    font-family: monospace;
    font-size: 11px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-style: dashed !important;
}

.im-upload-btn {
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* Extra UI Components (Refined for Rent Module) */
.im-tab-pills > li > a { 
    border: 1px solid transparent !important; border-radius: 8px !important; 
    margin-right: 8px; background: #fff; color: var(--im-text-sub); 
    padding: 6px 12px; font-size: 13px; transition: all 0.2s;
    text-decoration: none;
}
.im-tab-pills > li.active > a { background: var(--im-primary) !important; color: #fff !important; font-weight: 600; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2); }
.im-tab-pills > li > a .badge { background: #f1f5f9; color: var(--im-text-sub); font-weight: normal; margin-left: 4px; }
.im-tab-pills > li.active > a .badge { background: rgba(255,255,255,0.2); color: #fff; }

.font-mono { font-family: 'JetBrains Mono', 'Menlo', 'Monaco', monospace !important; font-size: 12px; }

/* Pagination Modern UI */
.pagination-wrapper { 
    display: flex; align-items: center; justify-content: space-between; 
    flex-wrap: wrap; gap: 16px; margin-top: 20px; padding: 0 4px;
}
.pagination-info { display: flex; gap: 12px; align-items: center; }
.info-item { font-size: 12px; color: var(--im-text-sub); display: flex; align-items: center; gap: 4px; }
.info-value { font-weight: 700; color: var(--im-text-main); font-family: 'JetBrains Mono'; font-size: 13px; }
.info-value.total { color: var(--im-primary); font-size: 14px; }
.info-value.current { color: var(--im-primary); }

.pagination > li > a { border-radius: 8px !important; border: 1px solid var(--im-border); color: var(--im-text-sub); margin: 0 2px; }
.pagination > .active > .page-link, .pagination > .active > span { background: var(--im-primary) !important; color: #fff; border-color: var(--im-primary); border-radius: 8px !important; }

/* Empty State */
.im-empty-state { text-align: center; padding: 60px 20px !important; color: var(--im-text-sub); font-size: 14px; }
.im-empty-state i { font-size: 48px; color: var(--im-border); display: block; margin-bottom: 16px; }
/* Bootstrap-table no-data row */
tr.no-records-found td {
    padding: 40px 20px !important;
    text-align: center !important;
    background: #fafbfd !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    border-color: var(--im-border) !important;
}
.im-no-records-inner { display: inline-block; text-align: center; }
.im-no-records-inner .fa { font-size: 30px; color: #d1d5db; display: block; margin-bottom: 8px; }


/* Laydate Stability (Trigger Fix Only) */
/* Custom theme overrides removed to restore system standard as requested. */

/* 15. Premium Stats Grid */
.im-stats-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 12px; 
    margin-bottom: 16px;
}
.im-stats-card {
    background: #fff;
    border: 1px solid var(--im-border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.im-stats-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent;
}
.im-stats-card.primary::before { background: var(--im-primary); }
.im-stats-card.success::before { background: var(--im-success); }
.im-stats-card.warning::before { background: var(--im-warning); }
.im-stats-card.danger::before { background: var(--im-danger); }

.im-stats-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.im-stats-label { font-size: 11px; color: var(--im-text-sub); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.025em; }
.im-stats-value { font-size: 18px; font-weight: 700; color: var(--im-text-main); font-family: 'JetBrains Mono'; line-height: 1.2; }
.im-stats-unit { font-size: 10px; font-weight: normal; color: var(--im-text-sub); margin-left: 2px; }

/* ============================================================
   12. Select2 Theme — Modal Form Alignment
   让 select2 在 .form-horizontal.m / .im-modern-form 中
   与其他 form-control 外观一致
   ============================================================ */
.form-horizontal.m .select2-container,
.im-modern-form .select2-container {
    width: 100% !important;
    max-width: 500px !important;
}
body .layui-layer-content .form-horizontal.m .select2-container,
body .layui-layer-content .im-modern-form .select2-container {
    width: 100% !important;
    max-width: none !important;
}

/* 单选框主体 */
.form-horizontal.m .select2-selection--single,
.im-modern-form .select2-selection--single {
    height: 38px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}
.form-horizontal.m .select2-selection--single:focus,
.form-horizontal.m .select2-container--open .select2-selection--single,
.im-modern-form .select2-selection--single:focus,
.im-modern-form .select2-container--open .select2-selection--single {
    border-color: #4e73df !important;
    box-shadow: 0 0 0 3px rgba(78,115,223,0.15) !important;
    outline: none !important;
}

/* 已选文字 */
.form-horizontal.m .select2-selection__rendered,
.im-modern-form .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 14px !important;
    padding-right: 36px !important;
    color: #334155 !important;
    font-size: 13px !important;
}

/* 下拉箭头 */
.form-horizontal.m .select2-selection__arrow,
.im-modern-form .select2-selection__arrow {
    height: 36px !important;
    right: 10px !important;
    width: 20px !important;
    top: 0 !important;
}
.form-horizontal.m .select2-selection__arrow b,
.im-modern-form .select2-selection__arrow b {
    display: none !important;
}
.form-horizontal.m .select2-selection__arrow::after,
.im-modern-form .select2-selection__arrow::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* 下拉菜单 */
.select2-dropdown {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    font-size: 13px !important;
    overflow: hidden !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    outline: none !important;
}
.select2-results__option {
    padding: 7px 14px !important;
    color: #475569 !important;
}
.select2-results__option--highlighted {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}
.select2-results__option[aria-selected="true"] {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

/* ============================================================
   13. Mobile Modal + Form Baseline
   统一 rent/admin 后台在手机端的弹框尺寸、/form 布局和按钮密度
   ============================================================ */
@media (max-width: 768px) {
    body .layui-layer.im-layer-sheet-mobile {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18) !important;
    }

    body .layui-layer.im-layer-sheet-mobile .layui-layer-title {
        height: 48px !important;
        line-height: 48px !important;
        padding: 0 78px 0 16px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #eef2f7 !important;
    }

    body .layui-layer.im-layer-sheet-mobile .layui-layer-setwin {
        top: 15px !important;
        right: 12px !important;
    }

    body .layui-layer.im-layer-sheet-mobile .layui-layer-content {
        padding: 0 !important;
        background: #fff !important;
    }

    body .layui-layer.im-layer-sheet-mobile .layui-layer-btn,
    body .layui-layer.im-layer-sheet-mobile.layer-ext-moon .layui-layer-btn {
        padding: 12px 14px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        font-size: 0 !important;
    }

    body .layui-layer.im-layer-sheet-mobile .layui-layer-btn a,
    body .layui-layer.im-layer-sheet-mobile.layer-ext-moon .layui-layer-btn a {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        line-height: 1 !important;
        padding: 0 10px !important;
        float: none !important;
    }
}

body.im-mobile-modal-frame {
    overflow-x: hidden !important;
    max-width: 100%;
    box-sizing: border-box;
}

body.im-mobile-modal-frame .wrapper.wrapper-content.animated.fadeInRight.ibox-content {
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    overflow-x: hidden !important;
    max-width: 100%;
    box-sizing: border-box;
}

body.im-mobile-modal-frame .layeropentop {
    background: #fff !important;
    padding: 10px 12px 6px !important;
}

body.im-mobile-modal-frame .layerform {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.im-mobile-modal-frame .form-horizontal.m,
body.im-mobile-modal-frame .im-modern-form {
    padding: 0 !important;
}

body.im-mobile-modal-frame .form-horizontal.m .form-group,
body.im-mobile-modal-frame .im-modern-form .form-group {
    display: block !important;
    margin-bottom: 10px !important;
    padding: 0 4px !important;
}

body.im-mobile-modal-frame .form-horizontal.m .form-group > label.control-label,
body.im-mobile-modal-frame .im-modern-form .form-group > label.control-label,
body.im-mobile-modal-frame .form-horizontal.m label.control-label,
body.im-mobile-modal-frame .im-modern-form label.control-label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    min-height: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

body.im-mobile-modal-frame .form-horizontal.m .form-group > label[class*="col-sm-"],
body.im-mobile-modal-frame .im-modern-form .form-group > label[class*="col-sm-"],
body.im-mobile-modal-frame .form-horizontal.m .form-group > div[class*="col-sm-"],
body.im-mobile-modal-frame .im-modern-form .form-group > div[class*="col-sm-"] {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.im-mobile-modal-frame .form-horizontal.m .form-group > div[class*="col-sm-"],
body.im-mobile-modal-frame .im-modern-form .form-group > div[class*="col-sm-"] {
    display: block !important;
    min-height: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.im-mobile-modal-frame .form-horizontal.m .row,
body.im-mobile-modal-frame .im-modern-form .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.im-mobile-modal-frame .form-horizontal.m .row > [class*="col-sm-"],
body.im-mobile-modal-frame .im-modern-form .row > [class*="col-sm-"] {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.im-mobile-modal-frame .form-horizontal.m .row > [class*="col-sm-"] + [class*="col-sm-"],
body.im-mobile-modal-frame .im-modern-form .row > [class*="col-sm-"] + [class*="col-sm-"] {
    margin-top: 8px !important;
}

/* 平板弹框：姓名+电话等短字段可并排；真手机（≤767px）改上下堆叠，避免挤出视口 */
@media (min-width: 768px) and (max-width: 992px) {
    .im-mobile-form-page .im-form-inline-pair,
    body.im-mobile-modal-frame .im-form-inline-pair {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }

    .im-mobile-form-page .im-form-inline-pair > [class*="col-sm-"],
    body.im-mobile-modal-frame .im-form-inline-pair > [class*="col-sm-"] {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
    }

    .im-mobile-form-page .im-form-inline-pair > [class*="col-sm-"] + [class*="col-sm-"],
    body.im-mobile-modal-frame .im-form-inline-pair > [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    .im-mobile-form-page .im-form-inline-pair,
    body.im-mobile-modal-frame .im-form-inline-pair {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }

    .im-mobile-form-page .im-form-inline-pair > [class*="col-sm-"],
    body.im-mobile-modal-frame .im-form-inline-pair > [class*="col-sm-"] {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .im-mobile-form-page .im-form-inline-pair .form-control,
    body.im-mobile-modal-frame .im-form-inline-pair .form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.im-mobile-modal-frame .channel-option-grid.compact-three .radio-box {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
}

body.im-mobile-modal-frame .form-horizontal.m .form-control,
body.im-mobile-modal-frame .im-modern-form .form-control,
body.im-mobile-modal-frame .form-horizontal.m .form-control-static,
body.im-mobile-modal-frame .im-modern-form .form-control-static,
body.im-mobile-modal-frame .form-horizontal.m .select2-container,
body.im-mobile-modal-frame .im-modern-form .select2-container,
body.im-mobile-modal-frame .form-horizontal.m .input-group,
body.im-mobile-modal-frame .im-modern-form .input-group {
    width: 100% !important;
    max-width: none !important;
}

body.im-mobile-modal-frame .form-horizontal.m .form-control,
body.im-mobile-modal-frame .im-modern-form .form-control,
body.im-mobile-modal-frame .form-horizontal.m .form-control-static,
body.im-mobile-modal-frame .im-modern-form .form-control-static,
body.im-mobile-modal-frame .form-horizontal.m .select2-selection--single,
body.im-mobile-modal-frame .im-modern-form .select2-selection--single {
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

body.im-mobile-modal-frame .form-horizontal.m textarea.form-control,
body.im-mobile-modal-frame .im-modern-form textarea.form-control {
    min-height: 88px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

body.im-mobile-modal-frame .form-horizontal.m .input-group-addon,
body.im-mobile-modal-frame .im-modern-form .input-group-addon {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

body.im-mobile-modal-frame .form-horizontal.m .help-block,
body.im-mobile-modal-frame .im-modern-form .help-block {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

body.im-mobile-modal-frame .form-horizontal.m .radio-inline,
body.im-mobile-modal-frame .form-horizontal.m .checkbox-inline,
body.im-mobile-modal-frame .form-horizontal.m .radio-box,
body.im-mobile-modal-frame .form-horizontal.m .check-box,
body.im-mobile-modal-frame .im-modern-form .radio-inline,
body.im-mobile-modal-frame .im-modern-form .checkbox-inline,
body.im-mobile-modal-frame .im-modern-form .radio-box,
body.im-mobile-modal-frame .im-modern-form .check-box {
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 0 6px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

/* ============================================================
   14. Reusable Mobile Page Utilities
   统一抽取移动端弹框表单、搜索区、横向滚动表格的公共规则
   ============================================================ */
.im-mobile-form-page {
    padding: 0 !important;
}

.im-mobile-form-page .form-horizontal.m,
.im-mobile-form-page .im-modern-form {
    padding: 0 !important;
}

/* 仅窄屏 / 手机弹框 iframe 才纵向堆叠，避免桌面弹窗表单错位 */
@media (max-width: 992px) {
    .im-mobile-form-page .form-group {
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 14px !important;
    }

    .im-mobile-form-page .form-group > label.control-label,
    .im-mobile-form-page label.control-label {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        min-height: 0 !important;
        text-align: left !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin-bottom: 6px !important;
    }

    .im-mobile-form-page .form-group > label[class*="col-sm-"],
    .im-mobile-form-page .form-group > div[class*="col-sm-"] {
        flex: none !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .im-mobile-form-page .form-group > div[class*="col-sm-"],
    .im-mobile-form-page .col-sm-1,
    .im-mobile-form-page .col-sm-2,
    .im-mobile-form-page .col-sm-3,
    .im-mobile-form-page .col-sm-4,
    .im-mobile-form-page .col-sm-5,
    .im-mobile-form-page .col-sm-6,
    .im-mobile-form-page .col-sm-7,
    .im-mobile-form-page .col-sm-8,
    .im-mobile-form-page .col-sm-9,
    .im-mobile-form-page .col-sm-10,
    .im-mobile-form-page .col-sm-11,
    .im-mobile-form-page .col-sm-12 {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        float: none !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .im-mobile-form-page .form-control,
    .im-mobile-form-page .form-control-static,
    .im-mobile-form-page .select2,
    .im-mobile-form-page .select2-container,
    .im-mobile-form-page .input-group {
        width: 100% !important;
        max-width: none !important;
    }

    .im-mobile-form-page .help-block {
        margin-top: 4px !important;
    }

    .im-mobile-form-page .im-upload-box {
        width: 100%;
    }

    .im-mobile-form-page .im-upload-btn-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .im-mobile-form-page .im-upload-btn,
    .im-mobile-form-page .im-upload-url-input {
        width: 100% !important;
    }
}

body.im-mobile-modal-frame .im-mobile-form-page .form-group {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;
}

body.im-mobile-modal-frame .im-mobile-form-page .form-group > label.control-label,
body.im-mobile-modal-frame .im-mobile-form-page label.control-label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}

body.im-mobile-modal-frame .im-mobile-form-page .form-group > div[class*="col-sm-"],
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-1,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-2,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-3,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-4,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-5,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-6,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-7,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-8,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-9,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-10,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-11,
body.im-mobile-modal-frame .im-mobile-form-page .col-sm-12 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    float: none !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.im-mobile-modal-frame .im-mobile-form-page .form-control,
body.im-mobile-modal-frame .im-mobile-form-page .form-control-static,
body.im-mobile-modal-frame .im-mobile-form-page .select2,
body.im-mobile-modal-frame .im-mobile-form-page .select2-container,
body.im-mobile-modal-frame .im-mobile-form-page .input-group {
    width: 100% !important;
    max-width: none !important;
}

.im-mobile-search-page .im-search-row {
    gap: 10px 14px;
}

.im-mobile-search-page .im-mobile-search-item {
    flex: 1 1 180px;
    min-width: 180px;
}

.im-mobile-search-page .im-mobile-search-item label {
    white-space: nowrap;
}

.im-mobile-search-page .im-mobile-search-item .form-control,
.im-mobile-search-page .im-mobile-search-item .select2,
.im-mobile-search-page .im-mobile-search-item .select2-container {
    width: 100% !important;
}

.im-mobile-search-page .im-mobile-search-actions,
.im-mobile-search-page .im-mobile-search-toolbar {
    flex: 0 0 auto;
    min-width: auto;
}

.im-mobile-search-page .im-mobile-search-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.im-mobile-search-page .im-mobile-search-actions .btn {
    min-width: 76px;
    min-height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    box-shadow: none;
}

.im-mobile-search-page .im-mobile-search-actions .btn i {
    margin-right: 0 !important;
    font-size: 14px;
}

.im-mobile-search-page .im-mobile-search-actions .btn-primary {
    background: #4f74db !important;
    border-color: #4f74db !important;
}

.im-mobile-search-page .im-mobile-search-actions .btn-primary:hover,
.im-mobile-search-page .im-mobile-search-actions .btn-primary:focus {
    background: #4568ca !important;
    border-color: #4568ca !important;
}

.im-mobile-search-page .im-mobile-search-actions .btn-default {
    background: #f8fafc !important;
    border-color: #dbe5f1 !important;
    color: #64748b !important;
}

.im-mobile-table-shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
    .im-mobile-search-page .im-mobile-search-item {
        flex-basis: calc(50% - 7px);
        min-width: calc(50% - 7px);
    }

    .im-mobile-search-page .im-mobile-search-actions,
    .im-mobile-search-page .im-mobile-search-toolbar {
        flex-basis: 100%;
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    .im-mobile-form-page .form-group {
        margin-bottom: 10px !important;
    }

    .im-mobile-form-page .form-group > label.control-label,
    .im-mobile-form-page label.control-label {
        margin-bottom: 4px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .im-mobile-form-page .form-control,
    .im-mobile-form-page .form-control-static,
    .im-mobile-form-page .select2-selection--single {
        min-height: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    .im-mobile-form-page textarea.form-control {
        min-height: 96px !important;
        height: auto !important;
    }

    .im-mobile-form-page .im-upload-preview {
        min-height: 160px;
    }
}

@media (max-width: 640px) {
    .im-mobile-search-page .im-mobile-search-item,
    .im-mobile-search-page .im-mobile-search-actions,
    .im-mobile-search-page .im-mobile-search-toolbar {
        flex-basis: 100%;
        min-width: 100%;
    }

    .im-mobile-search-page .im-mobile-search-actions {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(96px, 0.85fr);
        gap: 8px;
        align-items: stretch;
    }

    .im-mobile-search-page .im-mobile-search-actions .btn,
    .im-mobile-search-page .im-mobile-search-toolbar .btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 0 12px !important;
    }

    .im-mobile-table-shell {
        overflow-x: hidden;
    }

    .im-mobile-table-shell .bootstrap-table {
        margin-top: 0;
    }

    .im-mobile-table-shell .fixed-table-container {
        border: 0;
    }

    .im-mobile-table-shell .fixed-table-body {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        background: #fff;
    }

    .im-mobile-table-shell .bootstrap-table .no-records-found td {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
   14. Global Mobile: 禁止主框架 / iframe 内页整页轻微左右滑动
   ============================================================ */
@media (max-width: 767px) {
    html {
        overflow-x: hidden;
        max-width: 100%;
    }

    body.gray-bg,
    body.fixed-sidebar.full-height-layout.gray-bg {
        overflow-x: hidden !important;
        max-width: 100%;
        width: 100%;
        overscroll-behavior-x: none;
    }

    #wrapper {
        overflow-x: hidden !important;
        max-width: 100%;
    }

    #page-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.fixed-sidebar.mini-navbar #page-wrapper,
    body.body-small.fixed-sidebar.mini-navbar #page-wrapper,
    body.canvas-menu.mini-navbar #page-wrapper,
    body.body-small.rtls #page-wrapper {
        margin-left: 0 !important;
    }

    #page-wrapper > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }

    .navbar.navbar-static-top .navbar-top-links.welcome-message > li:not(.user-menu) {
        display: none !important;
    }

    #content-main,
    #content-main.mainContent.row {
        overflow-x: hidden !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #content-main iframe.RuoYi_iframe,
    iframe.RuoYi_iframe {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .container-div {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .container-div > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    .im-fade-in:not(.order-page-wrap) {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }

    .order-page-wrap.im-fade-in {
        padding: 8px 0 14px !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }

    .container-div:has(> .row > .order-page-wrap) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .container-div:has(> .row > .order-page-wrap) > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .order-page-wrap.im-fade-in > .col-sm-12,
    .order-page-wrap .col-sm-12.search-collapse {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .order-page-wrap .search-collapse.order-search,
    .order-page-wrap .order-search.im-search-compact {
        padding-left: 8px !important;
        padding-right: 8px !important;
        border-radius: 0 !important;
        margin-bottom: 8px !important;
    }

    .search-collapse,
    .select-table,
    .order-page-wrap {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .im-table-wrapper {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .bootstrap-table.rent-mobile-scroll,
    .bootstrap-table.rent-mobile-scroll .fixed-table-container,
    .bootstrap-table.rent-mobile-scroll .fixed-table-body {
        overscroll-behavior-x: contain;
    }

    .im-fade-in:not(.order-page-wrap) > .col-sm-12,
    .container-div > .row > .col-sm-12 {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .channel-page-shell,
    .channel-table-shell {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .channel-table-shell .fixed-table-body {
        overscroll-behavior-x: contain;
    }

    body .layui-layer.im-layer-sheet-mobile .layui-layer-content {
        overflow-x: hidden !important;
    }
}