/* 响应式设计增强 - 特别针对手机端 */

/* 基础响应式设置 */
@media (max-width: 768px) {
    /* 侧边栏调整 */
    .sidebar {
        width: 60px;
        padding-top: 60px;
        z-index: 999;
        transition: all 0.3s ease;
    }
    
    .sidebar-menu a {
        padding: 12px 5px;
        text-align: center;
    }
    
    .sidebar-menu a span {
        display: none;
    }
    
    .main-content {
        margin-left: 60px;
        padding: 70px 10px 10px;
    }
    
    /* 卡片占满屏幕宽度 */
    .card {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .card-body {
        padding: 16px;
    }
    
    /* 表单调整 */
    .form-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* 确保表单元素左对齐 */
    .form-group {
        text-align: left;
    }
    
    .form-label {
        text-align: left;
        display: block;
    }
    
    .form-control {
        text-align: left;
        width: 100%;
    }
    
    .card-body {
        text-align: left;
    }
    
    /* 头部调整 */
    .header {
        padding: 10px 0;
    }
    
    .logo {
        font-size: 16px;
    }
    
    .user-info span {
        display: none;
    }
}

/* 手机端表格和表单响应式处理 */
@media (max-width: 576px) {
    /* 确保所有内容左对齐 */
    .main-content {
        text-align: left;
    }
    
    .card {
        text-align: left;
    }
    
    .card-body {
        text-align: left;
    }
    
    .form-group {
        text-align: left;
    }
    
    .form-label {
        text-align: left;
        display: block;
        width: 100%;
    }
    
    .form-control {
        text-align: left;
        width: 100%;
    }
    
    .form-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .form-col {
        width: 100%;
        text-align: left;
    }
    
    /* 按钮左对齐 */
    .btn {
        text-align: center;
        width: auto;
    }
    
    .action-buttons {
        text-align: left;
    }
    
    /* 滚动表格方式 */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 表格内容调整 */
    .table {
        min-width: 900px; /* 确保表格有足够宽度显示所有内容 */
        table-layout: auto; /* 使用自动布局 */
    }
    
    /* 表格列宽度优化 */
    .table th:first-child,
    .table td:first-child {
        min-width: 40px; /* 复选框列 */
    }
    
    .table th:nth-child(2),
    .table td:nth-child(2) {
        min-width: 80px; /* 分组列 */
    }
    
    .table th:nth-child(3),
    .table td:nth-child(3) {
        min-width: 100px; /* 标题列 */
    }
    
    .table th:nth-child(4),
    .table td:nth-child(4) {
        min-width: 120px; /* 账号列 */
    }
    
    .table th:nth-child(6),
    .table td:nth-child(6) {
        min-width: 180px; /* 网址列 */
    }
    
    .table th:nth-child(7),
    .table td:nth-child(7) {
        min-width: 150px; /* 邮箱列 */
    }
    
    .table th:nth-child(8),
    .table td:nth-child(8) {
        min-width: 100px; /* 手机号列 */
    }
    
    .table th, .table td {
        white-space: nowrap;
        padding: 10px 8px;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px; /* 限制最大宽度，超出显示省略号 */
    }
    
    /* 账号和网址字段允许更长的显示 */
    .table td:nth-child(4), /* 账号列 */
    .table td:nth-child(6) { /* 网址列 */
        max-width: 250px;
    }
    
    /* 可点击复制的文本，允许完整显示 */
    .clickable-copy {
        white-space: nowrap;
        word-break: keep-all;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 密码显示调整 */
    .toggle-password, .copy-password {
        padding: 3px 6px;
        font-size: 12px;
    }
    
    /* 操作按钮调整 */
    .action-btn {
        margin: 2px;
        padding: 3px 6px;
        font-size: 12px;
        height: 24px;
    }
    
    
    /* 操作按钮调整 */
    .action-btn {
        margin: 3px;
        padding: 6px 10px;
        height: 30px;
    }
    
    /* 密码显示调整 */
    .password-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .password-container button {
        margin-top: 5px;
    }
    
    /* 搜索区域调整 */
    .search-area {
        padding: 15px 10px;
    }
    
    .search-form-inline .search-form-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-form-inline .search-input,
    .search-form-inline .search-select,
    .search-form-inline .search-btn,
    .search-form-inline .reset-btn {
        width: 100%;
        max-width: 100%;
        min-width: auto;
    }
    
    .search-area .btn {
        width: 100%;
        margin-top: 10px;
        margin-right: 0;
    }
    
    /* 统计卡片调整 */
    .stat-card {
        min-width: 100%;
        margin: 0 0 10px 0;
    }
    
    /* 详情页表格调整 - 确保卡片占满屏幕 */
    .detail-table {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .detail-table tr {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 12px;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        background: white;
        box-sizing: border-box;
    }
    
    .detail-table th, .detail-table td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px;
        text-align: left;
        border: none;
        box-sizing: border-box;
        margin: 0;
    }
    
    .detail-table th {
        background-color: #fafafa;
        font-weight: 600;
        color: #262626;
        border-bottom: 1px solid #e8e8e8;
        border-radius: 6px 6px 0 0;
        margin-bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .detail-table td {
        padding: 12px 16px;
        border-bottom: none;
        word-break: break-word;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .detail-table tr:last-child {
        margin-bottom: 0;
    }
    
    /* 详情页复制文本样式 */
    .detail-table .clickable-copy {
        word-break: break-all;
        display: inline-block;
        max-width: 100%;
    }
    
    /* 确保详情页卡片容器占满宽度 */
    .card-body {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0;
    }
    
    /* 确保卡片本身也占满 */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
}

/* 超小屏幕设备 */
@media (max-width: 375px) {
    .card-body {
        padding: 15px 10px;
    }
    
    .page-title {
        font-size: 18px;
    }
    
    .btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}