/**
 * 表单优化样式
 * 解决表单控件过宽的问题，提供更好的视觉体验
 * 创建日期：2025-11-21
 */

/* ===== 表单控件尺寸系统 ===== */

/* 小尺寸控件：适用于姓名、电话、邮编等短字段 */
.form-control-sm,
.input-sm {
    max-width: 300px;
    width: 100%;
}

/* 中等尺寸控件：适用于邮箱、地址等中等字段 */
.form-control-md,
.input-md {
    max-width: 500px;
    width: 100%;
}

/* 大尺寸控件：适用于描述、备注等长字段 */
.form-control-lg,
.input-lg,
textarea.form-control,
textarea {
    max-width: 100%;
    width: 100%;
}

/* ===== 响应式表单布局 ===== */

/* 表单网格布局 - 自适应列数 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 两列表单布局 */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* 三列表单布局 */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* 四列表单布局 */
.form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* 移动端自动堆叠为单列 */
@media (max-width: 768px) {
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Flex表单布局 ===== */

/* 弹性行布局 - 适合需要自动换行的场景 */
.form-row-flex {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.form-row-flex .form-group {
    flex: 1;
    min-width: 250px;
}

/* 强制指定列宽的flex布局 */
.form-row-flex .col-1 {
    flex: 1;
}

.form-row-flex .col-2 {
    flex: 2;
}

.form-row-flex .col-3 {
    flex: 3;
}

/* ===== 表单组优化 ===== */

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group-inline label {
    margin-bottom: 0;
    min-width: 120px;
    flex-shrink: 0;
}

.form-group-inline .form-control {
    flex: 1;
}

/* ===== 特殊控件优化 ===== */

/* Select下拉框 - 限制宽度 */
select.form-control-auto {
    width: auto;
    min-width: 200px;
    max-width: 400px;
}

/* 数字输入框 - 紧凑设计 */
input[type="number"].form-control-number {
    max-width: 150px;
    text-align: right;
}

/* 日期选择器 - 适中宽度 */
input[type="date"].form-control-date,
input[type="datetime-local"].form-control-date {
    max-width: 250px;
}

/* 复选框/单选框组 - 横向排列 */
.form-check-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.form-check-group .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== 表单容器优化 ===== */

/* 紧凑型表单容器 */
.form-container-compact {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}

/* 标准表单容器 */
.form-container-standard {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

/* 宽屏表单容器 */
.form-container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* 移动端表单容器 */
@media (max-width: 768px) {
    .form-container-compact,
    .form-container-standard,
    .form-container-wide {
        padding: 1rem;
        max-width: 100%;
    }
}

/* ===== 表单分组 ===== */

.form-section {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #3470ff;
    display: inline-block;
    min-width: 200px;
}

.dark .form-section {
    border-bottom-color: #374151;
}

.dark .form-section-title {
    color: #f3f4f6;
}

/* ===== 表单标签优化 ===== */

.form-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-label-required::after {
    content: '*';
    color: #ef4444;
    margin-left: 0.25rem;
}

.form-label-optional::after {
    content: '(可选)';
    color: #9ca3af;
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: normal;
}

/* ===== 表单辅助文本 ===== */

.form-help-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

.dark .form-help-text {
    color: #9ca3af;
}

.form-help-text-success {
    color: #10b981;
}

.form-help-text-error {
    color: #ef4444;
}

.form-help-text-warning {
    color: #f59e0b;
}

/* ===== 表单验证状态 ===== */

.form-control.is-valid {
    border-color: #10b981;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

.form-control.is-invalid {
    border-color: #ef4444;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ef4444'%3e%3cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

.form-control.is-warning {
    border-color: #f59e0b;
}

/* ===== 输入框组合 ===== */

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group .form-control {
    flex: 1;
    border-radius: 0;
}

.input-group .form-control:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.input-group .form-control:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    font-size: 0.875rem;
    white-space: nowrap;
}

.input-group-prepend {
    border-right: none;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.input-group-append {
    border-left: none;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.dark .input-group-prepend,
.dark .input-group-append {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

/* ===== 表单操作按钮区域优化 ===== */

.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e7eb;
    flex-wrap: wrap;
}

.form-actions-right {
    justify-content: flex-end;
}

.form-actions-center {
    justify-content: center;
}

.form-actions-between {
    justify-content: space-between;
}

.dark .form-actions {
    border-top-color: #374151;
}

/* ===== 移动端特殊优化 ===== */

@media (max-width: 640px) {
    /* 移动端表单组全宽 */
    .form-group-inline {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-group-inline label {
        min-width: auto;
    }
    
    /* 移动端输入框组堆叠 */
    .input-group {
        flex-direction: column;
    }
    
    .input-group .form-control,
    .input-group-prepend,
    .input-group-append {
        width: 100%;
        border-radius: 0.5rem !important;
    }
    
    .input-group .form-control:not(:first-child) {
        margin-top: 0.5rem;
    }
    
    /* 移动端按钮全宽 */
    .form-actions .btn {
        flex: 1;
        min-width: 120px;
    }
}

/* ===== 表单卡片样式 ===== */

.form-card {
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.dark .form-card {
    background: #1f2937;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.form-card-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.dark .form-card-header {
    border-bottom-color: #374151;
}

.form-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.dark .form-card-title {
    color: #f3f4f6;
}

/* ===== 表单加载状态 ===== */

.form-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.form-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #3470ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ===== 工具类 ===== */

/* 隐藏元素但保留空间 */
.form-invisible {
    visibility: hidden;
}

/* 禁用状态 */
.form-disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

/* 只读状态 */
.form-readonly .form-control {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

.dark .form-readonly .form-control {
    background-color: #374151;
}

/* ===== 打印样式 ===== */

@media print {
    .form-actions,
    .form-card {
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }
    
    .btn {
        display: none;
    }
}