/* 公共样式 - 用户端页面 */

/* 统一的标题样式 - 居中并带有绿色横线 */
.common-title {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
}

/* 基础的body样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

/* 基础的容器样式 */
.container {
    width: 100%;
    margin: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
}

/* 统一按钮样式 */
.standard-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.standard-button[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 通用.btn样式（与现有页面对齐） */
.btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
}

.standard-upload-btn {
    display: inline-block;
    background: #fff;
    border: 1.5px solid #bbb;
    color: #333;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s;
    margin-top: 5px;
}
.standard-upload-btn:hover {
    border-color: #4CAF50;
    background: #f6f6f6;
}

/* ========== 桌面端默认样式 ========== */

/* 桌面端显示表格，隐藏卡片 */
.desktop-table {
    display: block;
}

.mobile-cards-container {
    display: none;
}

/* ========== 移动端自适应样式 ========== */

/* 移动端基础样式 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        padding: 0;
    }
    
    .container {
        padding: 12px;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .common-title {
        font-size: 18px;
        padding-bottom: 8px;
        margin-bottom: 15px;
    }
    
    /* 表单样式优化 */
    .form-group {
        margin-bottom: 12px;
    }
    
    .form-group label {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea,
    input[type="text"],
    input[type="date"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* 防止iOS缩放 */
        padding: 10px;
        border-radius: 6px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 按钮样式优化 */
    .btn,
    .standard-button,
    button[type="submit"],
    button[type="button"] {
        width: 100%;
        padding: 12px;
        font-size: 15px;
        margin-bottom: 8px;
        border-radius: 6px;
    }
    
    .button-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .button-group button,
    .button-group a {
        width: 100%;
        text-align: center;
    }
    
    /* 表格响应式 */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }
    
    table:not(.stack-table) {
        min-width: 500px;
    }
    
    table:not(.stack-table) th,
    table:not(.stack-table) td {
        padding: 8px 6px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    /*
        说明：
        - 移动端表格自适应显示，无需横向滚动
        - 列内容自动换行，确保所有列都能在屏幕内显示
        - 保持表格的原始结构和样式
    */
    table.stack-table {
        width: 100% !important;
        min-width: 0 !important; /* 移除最小宽度限制 */
        border-collapse: collapse;
        font-size: 10px; /* 进一步减小字体以适应更多内容 */
        table-layout: fixed; /* 固定表格布局，让列宽自适应 */
    }

    /* 移除横向滚动容器样式 */
    .table-wrapper {
        overflow-x: visible; /* 不使用横向滚动 */
        -webkit-overflow-scrolling: auto;
        margin: 0;
        padding: 0;
    }

    table.stack-table th,
    table.stack-table td {
        padding: 4px 2px !important;
        font-size: 10px !important;
        white-space: normal !important; /* 允许文本换行 */
        word-wrap: break-word !important; /* 强制换行 */
        word-break: break-all !important; /* 在任何字符间换行 */
        overflow-wrap: break-word !important;
        min-width: 0 !important; /* 移除最小宽度限制 */
        max-width: none !important;
    }

    table.stack-table.user-records-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        font-size: 10px !important;
    }

    table.stack-table.user-records-table th,
    table.stack-table.user-records-table td {
        padding: 3px 2px !important;
        font-size: 10px !important;
        white-space: normal !important;
        word-break: break-all !important;
        display: table-cell !important;
        visibility: visible !important;
    }

    table.stack-table.user-records-table td[data-label="操作"] div {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: 100% !important;
    }

    table.stack-table.user-records-table td[data-label="操作"] .action-btn {
        display: block !important;
        width: 100% !important;
        font-size: 10px !important;
        padding: 3px 4px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    table.stack-table.user-records-table td:nth-child(10)::before,
    table.stack-table.user-records-table td:nth-child(10)[data-recheck-status=""]::before {
        content: none !important;
        display: none !important;
    }

    /* 手机端自适应列宽度分配 - 简洁清晰的布局 */
    table.stack-table th:nth-child(1), /* 序号 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(1) {
        width: 5% !important;
    }
    
    table.stack-table th:nth-child(2), /* 记录ID - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(2) {
        width: 5% !important;
    }
    
    table.stack-table th:nth-child(3), /* 检查单位 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(3) {
        width: 12% !important;
        display: table-cell !important;
    }
    
    table.stack-table td:nth-child(3),
    table.stack-table.user-records-table td:nth-child(3) {
        width: 12% !important;
        display: table-cell !important;
    }
    
    table.stack-table th:nth-child(4), /* 检查日期 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(4) {
        width: 18% !important;
    }
    
    table.stack-table td:nth-child(4),
    table.stack-table.user-records-table td:nth-child(4) {
        width: 18% !important;
    }
    
    table.stack-table th:nth-child(5), /* 检查地点 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(5) {
        width: 14% !important;
    }
    
    table.stack-table td:nth-child(5),
    table.stack-table.user-records-table td:nth-child(5) {
        width: 14% !important;
    }
    
    table.stack-table th:nth-child(6), /* 场所类型 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(6) {
        width: 8% !important;
        display: table-cell !important;
        visibility: visible !important;
    }
    
    table.stack-table td:nth-child(6),
    table.stack-table.user-records-table td:nth-child(6) {
        width: 8% !important;
        display: table-cell !important;
        visibility: visible !important;
    }
    
    table.stack-table th:nth-child(7), /* 状态 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(7) {
        width: 8% !important;
    }
    
    table.stack-table td:nth-child(7),
    table.stack-table.user-records-table td:nth-child(7) {
        width: 8% !important;
    }
    
    table.stack-table th:nth-child(8), /* 整改措施 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(8) {
        width: 8% !important;
    }
    
    table.stack-table td:nth-child(8),
    table.stack-table.user-records-table td:nth-child(8) {
        width: 8% !important;
    }
    
    table.stack-table th:nth-child(9), /* 是否复查 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(9) {
        display: table-cell !important;
    }
    
    table.stack-table td:nth-child(9),
    table.stack-table.user-records-table td:nth-child(9) {
        display: table-cell !important;
    }
    
    table.stack-table th:nth-child(10), /* 整改状态 - user-records-table例外 */
    table.stack-table.user-records-table th:nth-child(10) {
        display: table-cell !important;
    }
    
    table.stack-table td:nth-child(10),
    table.stack-table.user-records-table td:nth-child(10) {
        display: table-cell !important;
    }
    
    table.stack-table th:nth-child(11), /* 操作 */
    table.stack-table.user-records-table th:nth-child(11) {
        display: none !important;
    }
    
    table.stack-table td:nth-child(11),
    table.stack-table.user-records-table td:nth-child(11) {
        display: none !important;
    }
    
    /* 移除所有卡片式样式 */
    table.stack-table td::before {
        display: none !important;
    }
    
    /* 驾驶员督促记录表格手机端自适应 */
    table.stack-table.reminder-records-table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse;
        font-size: 10px !important;
        table-layout: fixed !important;
    }

    table.stack-table.reminder-records-table th,
    table.stack-table.reminder-records-table td {
        padding: 4px 2px !important;
        font-size: 10px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* 重点对象监管记录表格列宽度分配 */
    table.stack-table.reminder-records-table th:nth-child(1), /* 序号 */
    table.stack-table.reminder-records-table td:nth-child(1) {
        width: 5% !important;
    }
    
    table.stack-table.reminder-records-table th:nth-child(2), /* 对象姓名 */
    table.stack-table.reminder-records-table td:nth-child(2) {
        width: 10% !important;
    }
    
    table.stack-table.reminder-records-table th:nth-child(3), /* 问题分类 */
    table.stack-table.reminder-records-table td:nth-child(3) {
        width: 8% !important;
    }
    
    table.stack-table.reminder-records-table th:nth-child(4), /* 监管方式 */
    table.stack-table.reminder-records-table td:nth-child(4) {
        width: 10% !important; /* 减少监管方式列占比 */
    }
    
    table.stack-table.reminder-records-table th:nth-child(5), /* 监管内容 */
    table.stack-table.reminder-records-table td:nth-child(5) {
        width: 25% !important;
    }
    
    table.stack-table.reminder-records-table th:nth-child(6), /* 监管图片 */
    table.stack-table.reminder-records-table td:nth-child(6) {
        width: 12% !important;
    }
    
    table.stack-table.reminder-records-table th:nth-child(7), /* 所属单位 */
    table.stack-table.reminder-records-table td:nth-child(7) {
        width: 10% !important;
    }
    
    table.stack-table.reminder-records-table th:nth-child(8), /* 监管日期 */
    table.stack-table.reminder-records-table td:nth-child(8) {
        width: 10% !important;
    }
    
    table.stack-table.reminder-records-table th:nth-child(9), /* 操作 */
    table.stack-table.reminder-records-table td:nth-child(9) {
        width: 10% !important; /* 增加操作列占比 */
        min-width: 80px !important;
    }
    
    /* 驾驶员督促记录表格列宽度分配 */

    
    /* 移动端整改状态列显示复查信息 - user-records-table例外 */
    table.stack-table td:nth-child(10)::before,
    table.stack-table.user-records-table td:nth-child(10)::before {
        content: "" !important;
        display: none !important;
    }
    
    /* 操作按钮优化 - 参照meeting_records.php的按钮样式 */
    table.stack-table .action-btn {
        font-size: 12px !important;
        padding: 3px 6px !important;
        margin: 1px 0 !important;
        display: block !important;
        line-height: 1.2;
        width: auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border-radius: 2px !important;
        min-height: auto !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        color: white !important;
    }
    
    /* 操作列容器优化 - 正常表格布局 */
    table.stack-table td:nth-child(11) div {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        width: 100% !important;
    }
    
    /* 会议记录表格手机端自适应 */
    table.meeting-table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse;
        font-size: 10px !important;
        table-layout: fixed !important;
    }

    table.meeting-table th,
    table.meeting-table td {
        padding: 4px 2px !important;
        font-size: 10px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* 会议记录表格列宽度分配 */
    table.meeting-table th:nth-child(1), /* 序号 */
    table.meeting-table td:nth-child(1) {
        width: 8% !important;
    }
    
    table.meeting-table th:nth-child(2), /* 会议主题 */
    table.meeting-table td:nth-child(2) {
        width: 30% !important;
    }
    
    table.meeting-table th:nth-child(3), /* 会议日期 */
    table.meeting-table td:nth-child(3) {
        width: 15% !important;
    }
    
    table.meeting-table th:nth-child(4), /* 会议地点 */
    table.meeting-table td:nth-child(4) {
        width: 20% !important;
    }
    
    table.meeting-table th:nth-child(5), /* 参会人员 */
    table.meeting-table td:nth-child(5) {
        width: 20% !important;
    }
    
    table.meeting-table th:nth-child(6), /* 操作 */
    table.meeting-table td:nth-child(6) {
        width: 7% !important;
        min-width: 40px !important;
    }

    /* 会议记录操作按钮优化 */
    table.meeting-table .action-btn {
        font-size: 8px !important;
        padding: 2px 3px !important;
        margin: 1px 0 !important;
        display: block !important;
        line-height: 1.1;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border-radius: 2px !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        color: white !important;
    }
    
    /* 会议记录操作列容器 */
    table.meeting-table td:nth-child(6) div {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        width: 100% !important;
    }

    /* 演练记录表格操作按钮优化 - 垂直排列 */
    table.stack-table td[data-label="操作"] div {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        width: 100% !important;
        align-items: center !important;
    }
    
    table.stack-table td[data-label="操作"] .action-btn {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 3px 6px !important;
        font-size: 12px !important;
        line-height: 1.2;
        text-align: center !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        color: white !important;
        border-radius: 2px !important;
        box-sizing: border-box !important;
    }

    /* 图片上传区域优化 */
    .upload-area {
        padding: 15px;
    }
    
    .image-preview img,
    .photo-preview img {
        max-width: 100%;
        height: auto;
    }
    
    /* 复选框容器优化 */
    .checkbox-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .checkbox-item {
        width: 100%;
    }
    
    /* 导航链接优化 */
    .nav-links {
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .nav-links a {
        font-size: 13px;
        padding: 6px 10px;
        background: #f0f0f0;
        border-radius: 4px;
        text-decoration: none;
    }
    
    /* 详情页优化 */
    .detail-item,
    .info-item {
        margin-bottom: 12px;
    }
    
    .detail-label,
    .info-label {
        font-size: 13px;
        color: #666;
    }
    
    .detail-value,
    .info-value {
        font-size: 14px;
    }
    
    /* 图片网格优化 */
    .image-grid,
    .photo-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .image-grid img,
    .photo-grid img {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }
}

/* 超小屏幕优化 */
@media (max-width: 420px) {
    body {
        font-size: 13px;
    }
    
    .container {
        padding: 10px;
    }
    
    .common-title {
        font-size: 16px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 8px;
    }
    
    .btn,
    .standard-button {
        padding: 10px;
        font-size: 14px;
    }
    
    table th,
    table td {
        padding: 6px 4px;
        font-size: 11px;
    }
    
    .image-grid,
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}