/* static/css/responsive.css - 响应式设计样式 */

/* 大屏幕 (1200px+) */
@media (min-width: 1200px) {
    .container {
        max-width: 1600px;
    }

    .contract-type-grid {
        grid-template-columns: repeat(2, 1fr); /* 保持两列 */
        gap: 20px;
    }

    .header h1 {
        font-size: 2.8em;
    }

    .left-panel {
        /*max-height: 90vh;*/
    }
}

/* 中等屏幕 (992px - 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 1200px;
    }

    .contract-type-grid {
        grid-template-columns: repeat(2, 1fr); /* 保持两列 */
        gap: 15px;
    }

    .agreement-type-selector {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .category-cards {
        gap: 15px;
    }
}

/* 平板屏幕 (768px - 991px) */
@media (max-width: 991px) {
    body {
        padding: 15px;
    }

    .main-content {
        flex-direction: column;
    }

    .left-panel {
        /*max-height: none;*/
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 25px;
    }

    .right-panel {
        min-height: 500px;
        padding: 25px;
    }

    .contract-type-grid {
        grid-template-columns: repeat(2, 1fr); /* 平板仍保持两列 */
        gap: 12px;
    }

    .category-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .role-selector {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .preview-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .preview-controls {
        width: 100%;
        justify-content: center;
    }

    .step-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .back-button {
        margin-left: 0;
        align-self: flex-start;
    }

    .step-description {
        margin-left: 0;
    }
}

/* 手机屏幕 (480px - 767px) */
@media (max-width: 767px) {
    body {
        padding: 10px;
    }

    .header {
        padding: 20px 15px;
    }

    .header h1 {
        font-size: 1.8em;
    }

    .header p {
        font-size: 1em;
    }

    .left-panel, .right-panel {
        padding: 20px;
    }

    .form-section h3 {
        font-size: 1em;
    }

    .contract-type-grid {
        grid-template-columns: 1fr; /* 手机改为单列 */
        gap: 10px;
        padding: 15px;
    }

    .contract-option {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 15px;
    }

    .contract-option .contract-icon {
        font-size: 1.8em;
        margin-top: 0;
    }

    .category-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .category-card .category-icon {
        margin-right: 0;
        margin-bottom: 15px;
        font-size: 2.5em;
    }

    .category-arrow {
        margin-left: 0;
        margin-top: 10px;
        transform: rotate(90deg);
    }

    .category-card:hover .category-arrow {
        transform: rotate(90deg) translateY(-5px);
    }

    .category-header {
        padding: 15px;
    }

    .category-title {
        font-size: 1.1em;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .upload-area {
        padding: 20px 15px;
    }

    .file-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .dialog-content {
        width: 95%;
        margin: 10px;
    }

    .dialog-header {
        padding: 15px;
    }

    .dialog-body {
        padding: 15px;
    }

    .dialog-footer {
        flex-direction: column;
        padding: 15px;
    }

    .dialog-footer .btn {
        width: 100%;
        margin: 5px 0;
    }

    .ai-processing-hint {
        font-size: 13px;
        padding: 10px;
    }

    .processing-dots {
        margin-top: 8px;
    }

    .progress-container {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .progress-text {
        text-align: center;
        min-width: auto;
    }

    .loading-header p::before {
        position: static;
        display: inline-block;
        margin-right: 8px;
    }

    .confirmation-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .change-button {
        align-self: center;
    }

    .batch-actions {
        flex-direction: column;
        gap: 10px;
    }

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

    .preview-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .preview-toolbar .toolbar-left,
    .preview-toolbar .toolbar-right {
        justify-content: center;
    }
}

/* 小屏手机 (最大479px) */
@media (max-width: 479px) {
    body {
        padding: 8px;
    }

    .header h1 {
        font-size: 1.5em;
    }

    .header p {
        font-size: 0.9em;
    }

    .left-panel, .right-panel {
        padding: 15px;
    }

    .form-section {
        margin-bottom: 20px;
    }

    .form-section h3 {
        font-size: 0.95em;
    }

    .contract-option {
        padding: 12px;
    }

    .contract-option .contract-info h4 {
        font-size: 0.9em;
    }

    .contract-option .contract-info p {
        font-size: 0.8em;
    }

    .category-header {
        padding: 12px;
    }

    .category-title {
        font-size: 1em;
    }

    .category-description {
        font-size: 0.85em;
    }

    .contract-type-grid {
        padding: 12px;
        gap: 8px;
    }

    .upload-area {
        padding: 15px 10px;
    }

    .simple-loading-container {
        padding: 25px 15px;
    }

    .loading-header h3 {
        font-size: 1em;
    }

    .loading-header p {
        font-size: 0.85em;
        line-height: 1.4;
    }

    .progress-bar-simple {
        height: 10px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 8px 10px;
        font-size: 13px;
    }

    .message {
        padding: 10px 12px;
        font-size: 13px;
    }

    .file-preview {
        padding: 12px;
    }

    .ocr-result {
        font-size: 11px;
        max-height: 120px;
    }

    .dialog-header h3 {
        font-size: 1em;
    }

    .preview-placeholder {
        padding: 30px 15px;
    }

    .placeholder-icon {
        font-size: 3em;
    }

    .feature-item {
        padding: 10px;
        font-size: 0.85em;
    }
}

/* 超小屏设备 (最大359px) */
@media (max-width: 359px) {
    body {
        padding: 5px;
    }

    .header {
        padding: 15px 10px;
    }

    .header h1 {
        font-size: 1.3em;
    }

    .left-panel, .right-panel {
        padding: 12px;
    }

    .contract-type-grid {
        padding: 10px;
    }

    .category-cards {
        padding: 15px;
    }

    .simple-loading-container {
        padding: 20px 12px;
    }

    .upload-area {
        padding: 12px 8px;
    }

    .btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* 横屏平板 (768px - 1024px) 特殊适配 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .main-content {
        flex-direction: row;
    }

    .left-panel {
        flex: 1;
        /*max-height: 70vh;*/
        border-right: 1px solid var(--border-light);
        border-bottom: none;
    }

    .right-panel {
        flex: 1;
    }

    .contract-type-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .category-cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
    .contract-option,
    .category-card,
    .role-option,
    .agreement-option {
        border-width: 3px;
    }

    .btn {
        border: 2px solid currentColor;
    }

    .progress-bar-simple {
        border: 2px solid #000;
    }

    .progress-fill-simple {
        background: #0066cc;
    }

    .message {
        border-width: 2px;
        border-style: solid;
    }

    .spinner {
        border-width: 3px;
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #ecf0f1;
        --text-secondary: #bdc3c7;
        --text-muted: #95a5a6;

        --bg-primary: #2c3e50;
        --bg-secondary: #34495e;
        --bg-light: #2c3e50;

        --border-color: #4a5f7a;
        --border-light: #34495e;
    }

    body {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    }

    .dispute-category-section {
        background: var(--bg-primary);
        border-color: var(--border-color);
    }

    .category-header {
        background: linear-gradient(135deg, var(--bg-secondary) 0%, #2c3e50 100%);
    }

    .contract-option {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .contract-option:hover {
        background: #3b5373;
    }

    .contract-option.selected {
        background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
    }

    .category-card {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }

    .upload-area {
        background: var(--bg-secondary);
        border-color: var(--primary-color);
    }

    .file-preview {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }

    .ocr-result {
        background: #1e2832;
        border-color: var(--border-color);
        color: var(--text-secondary);
    }

    .simple-loading-container {
        background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    }

    .progress-bar-simple {
        background: var(--bg-secondary);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .preview-area {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .preview-area .lawyer-letter {
        color: var(--text-primary);
    }

    .message.error {
        background: #8b2635;
        color: #fecaca;
        border-left-color: var(--danger-color);
    }

    .message.success {
        background: #064e3b;
        color: #a7f3d0;
        border-left-color: var(--success-color);
    }

    .message.warning {
        background: #78350f;
        color: #fcd34d;
        border-left-color: var(--warning-color);
    }
}

/* 打印优化 */
@media print {
    * {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .contract-option,
    .category-card {
        break-inside: avoid;
    }

    .form-section {
        break-inside: avoid;
    }

    .file-preview {
        break-inside: avoid;
    }

    .simple-loading-container {
        display: none;
    }

    .btn {
        display: none;
    }

    .upload-area {
        display: none;
    }
}

/* 超宽屏幕 (2560px+) */
@media (min-width: 2560px) {
    .container {
        max-width: 2000px;
    }

    .contract-type-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 25px;
    }

    .category-cards {
        gap: 25px;
    }

    .header h1 {
        font-size: 3.2em;
    }

    .left-panel, .right-panel {
        padding: 40px;
    }
}

/* 可访问性：减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .contract-option,
    .category-card,
    .role-option,
    .agreement-option,
    .btn {
        transition: none;
    }

    .contract-option::before {
        display: none;
    }

    .upload-area {
        transition: none;
    }

    .simple-loading-container {
        animation: none;
    }

    .loading-header p::before {
        animation: none;
    }

    .progress-fill-simple::before {
        animation: none;
    }

    .spinner {
        animation: none;
        border-top-color: var(--primary-color);
    }
}

/* 触屏设备优化 */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .contract-option,
    .category-card,
    .role-option,
    .agreement-option {
        min-height: 60px;
        padding: 20px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
        padding: 12px;
        font-size: 16px; /* 防止iOS缩放 */
    }

    .upload-area {
        min-height: 120px;
        padding: 30px 20px;
    }

    /* 移除悬停效果 */
    .contract-option:hover,
    .category-card:hover,
    .role-option:hover,
    .agreement-option:hover,
    .btn:hover {
        transform: none;
    }
}

/* 窄屏设备特殊优化 */
@media (max-width: 320px) {
    .header h1 {
        font-size: 1.2em;
        line-height: 1.3;
    }

    .category-title {
        font-size: 0.9em;
    }

    .contract-option .contract-info h4 {
        font-size: 0.85em;
    }

    .btn {
        padding: 8px 12px;
        font-size: 11px;
        min-height: 36px;
    }

    .form-group {
        margin-bottom: 12px;
    }

    .simple-loading-container {
        padding: 15px 10px;
    }

    .dialog-content {
        width: 98%;
        margin: 5px;
    }
}