/**
 * 工具页面公共样式
 *
 * 说明：
 * 1. 本文件包含所有工具页面的公共样式
 * 2. 提取自61个工具页面的重复样式
 * 3. 减少代码重复，提升缓存效率
 * 4. 避免与Bootstrap类名冲突，使用calc-前缀或工具特定类名
 *
 * 使用方法：
 * <link rel="stylesheet" href="__STATIC__/css/tools-common.css">
 *
 * 注意事项：
 * - 避免使用Bootstrap已有的类名（如.row, .form-control, .badge等）
 * - 使用calc-前缀或更具体的类名
 *
 * @author AI Assistant
 * @date 2025-10-06
 * @version 1.1 (修复Bootstrap冲突)
 */

/* ========================================
   1. 基础布局样式
   ======================================== */

/* 通用区块容器 */
.section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 16px;
}

/* 区块标题 */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.section-title i {
    color: #667eea;
    font-size: 20px;
}

/* 区块头部 */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

/* 行布局 - 使用calc-row避免与Bootstrap的.row冲突 */
.calc-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.calc-row > * {
    flex: 1 1 200px;
}

/* ========================================
   2. 表单样式
   ======================================== */

/* 注意：.form-control 由Bootstrap提供，这里不重复定义以避免冲突 */

/* 计算器表单组 */
.calc-form-group {
    margin-bottom: 20px;
}

.calc-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
}

.calc-form-group label .required {
    color: #f56565;
    margin-left: 3px;
}

/* 计算器输入组 */
.calc-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calc-input-group input {
    flex: 1;
    height: 42px;
    padding: 0 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.calc-input-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.calc-input-group .unit {
    font-size: 14px;
    color: #718096;
    white-space: nowrap;
}

/* ========================================
   3. 按钮样式
   ======================================== */

/* 操作按钮组 */
.operation-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.operation-buttons .btn {
    flex: 1;
    min-width: 120px;
}

/* 计算器按钮组 */
.calc-btn-group {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

/* 计算器按钮基础样式 */
.calc-btn {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 主要按钮 */
.calc-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.calc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 次要按钮 */
.calc-btn-secondary {
    background: #fff;
    color: #667eea;
    border: 2px solid #667eea;
}

.calc-btn-secondary:hover {
    background: #f7fafc;
    transform: translateY(-2px);
}

/* ========================================
   4. 结果展示样式
   ======================================== */

/* 计算结果容器 */
.calc-result {
    display: none;
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: #fff;
}

.calc-result.show {
    display: block;
}

/* 结果项 */
.result-item {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #f8f9fa;
}

.result-item .label {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.result-item .value {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.result-item h5 {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.result-item .h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.result-item.highlight {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.result-item.highlight .label,
.result-item.highlight h5 {
    color: rgba(255, 255, 255, 0.9);
}

.result-item.highlight .value,
.result-item.highlight .h2 {
    color: white;
}

/* 结果框 */
.result-box {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 16px;
}

.result-value {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 8px;
}

.result-label {
    font-size: 14px;
    opacity: 0.9;
}

/* ========================================
   5. 状态标签样式
   ======================================== */

/* 徽章基础样式 */
.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* 成功徽章 */
.badge-success {
    background: #48bb78;
    color: white;
}

/* 警告徽章 */
.badge-warning {
    background: #ed8936;
    color: white;
}

/* 信息徽章 */
.badge-info {
    background: #4299e1;
    color: white;
}

/* 危险徽章 */
.badge-danger {
    background: #f56565;
    color: white;
}

/* ========================================
   6. 上传区域样式
   ======================================== */

/* 上传区域 */
.upload-area {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f7fafc;
}

.upload-area:hover {
    border-color: #667eea;
    background: #edf2f7;
}

.upload-area.dragover {
    border-color: #667eea;
    background: #e6f2ff;
}

/* 上传图标 */
.upload-icon {
    font-size: 48px;
    color: #a0aec0;
    margin-bottom: 15px;
}

/* 上传文本 */
.upload-text {
    font-size: 16px;
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 8px;
}

/* 上传提示 */
.upload-hint {
    font-size: 13px;
    color: #718096;
}

/* 文件输入 */
.file-input {
    display: none;
}

/* ========================================
   7. 选项卡样式
   ======================================== */

/* 选项卡导航 */
.tab-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}

/* 选项卡项 */
.tab-item {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    font-weight: 500;
    color: #718096;
}

.tab-item:hover {
    color: #667eea;
}

.tab-item.active {
    border-bottom-color: #667eea;
    color: #667eea;
    font-weight: 600;
}

/* 选项卡内容 */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ========================================
   8. 选项组样式
   ======================================== */

/* 选项组 */
.options-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* 选项项 */
.option-item {
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
}

.option-item:hover {
    border-color: #667eea;
    background: #f7fafc;
}

.option-item.active {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

/* 选项标签 */
.option-label {
    font-size: 14px;
    font-weight: 600;
}

/* 单选按钮组 */
.calc-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.calc-radio-item input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.calc-radio-item label {
    cursor: pointer;
    margin: 0;
}

/* ========================================
   9. PDF相关样式
   ======================================== */

/* PDF图标 */
.pdf-icon {
    font-size: 48px;
    color: #e53e3e;
    margin-bottom: 10px;
}

/* PDF名称 */
.pdf-name {
    font-size: 14px;
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PDF元信息 */
.pdf-meta {
    font-size: 12px;
    color: #718096;
}

/* ========================================
   10. 响应式设计
   ======================================== */

/* 平板端 */
@media (max-width: 768px) {
    .section {
        padding: 15px;
        margin-bottom: 12px;
    }

    .section-title {
        font-size: 16px;
    }

    .calc-row {
        flex-direction: column;
    }

    .calc-row > * {
        flex: 1 1 100%;
    }

    .operation-buttons {
        flex-direction: column;
    }

    .operation-buttons .btn {
        min-width: auto;
    }

    .calc-btn-group {
        flex-direction: column;
    }

    .result-value {
        font-size: 24px;
    }

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

    .upload-icon {
        font-size: 36px;
    }

    .tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-item {
        white-space: nowrap;
    }

    .options-group {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* 手机端 */
@media (max-width: 480px) {
    .section {
        padding: 12px;
    }

    .section-title {
        font-size: 15px;
    }

    .calc-form-group label {
        font-size: 13px;
    }

    .calc-input-group input {
        height: 38px;
        font-size: 13px;
    }

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

    .result-item .value {
        font-size: 18px;
    }

    .result-value {
        font-size: 20px;
    }

    .badge {
        font-size: 12px;
        padding: 4px 10px;
    }

    .options-group {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   11. 工具提示和帮助
   ======================================== */

/* 帮助图标 */
.help-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: #a0aec0;
    color: #fff;
    font-size: 12px;
    cursor: help;
    margin-left: 5px;
}

.help-icon:hover {
    background: #667eea;
}

/* 提示文本 */
.hint-text {
    font-size: 13px;
    color: #718096;
    margin-top: 5px;
}

/* 错误提示 */
.error-text {
    font-size: 13px;
    color: #f56565;
    margin-top: 5px;
}

/* 成功提示 */
.success-text {
    font-size: 13px;
    color: #48bb78;
    margin-top: 5px;
}

/* ========================================
   12. 加载和动画
   ======================================== */

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 淡入动画 */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 滑入动画 */
.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ========================================
   13. 实用工具类
   ======================================== */

/* 文本对齐 */
.text-center {
    text-align: center;
}

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

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

/* 间距 */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

/* 显示/隐藏 */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

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

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================
   14. 打印样式
   ======================================== */

@media print {
    .operation-buttons,
    .upload-area,
    .tab-nav {
        display: none;
    }

    .section {
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }

    .result-item {
        page-break-inside: avoid;
    }
}