/* 主要样式表 */
body {
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

.card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1rem;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    color: #6c757d;
}

/* 表格样式 */
.table {
    font-size: 0.875rem;
}

.badge {
    font-weight: normal;
}

/* 表单样式 */
.form-control:focus, .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 按钮间距 */
.btn + .btn,
form + form {
    margin-left: 0.5rem;
}

/* 表单验证 */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-position: right calc(0.375em + 0.1875rem) center;
}

/* 预约记录表格操作按钮 */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* 右边距，用于按钮之间的间隔 */
.me-1 {
    margin-right: 0.25rem !important;
}

/* 底部边距，用于手机端按钮垂直排列 */
.mb-1 {
    margin-bottom: 0.25rem !important;
}

/* 显示内联元素的弹性布局，用于按钮并排 */
.d-flex {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

/* 模态框内容格式化 */
.modal-body .alert {
    margin-bottom: 0;
    word-break: break-word;
}

/* 清空记录按钮样式 */
.card-header .btn-danger {
    font-size: 0.75rem;
}

/* 详情按钮样式 */
.btn-info {
    color: #fff;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}

.btn-info:hover {
    color: #fff;
    background-color: #31d2f2;
    border-color: #25cff2;
}

/* 手机端适配样式 */
@media (max-width: 767.98px) {
    /* 针对小屏幕的表格响应式设计 */
    .table-mobile {
        border: 0;
    }

    .table-mobile thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .table-mobile tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
    }

    .table-mobile td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
        position: relative;
        padding-left: 50%;
    }

    .table-mobile td::before {
        content: attr(data-title);
        position: absolute;
        left: 0.75rem;
        font-weight: bold;
        text-align: left;
    }

    .table-mobile td:last-child {
        border-bottom: 0;
    }

    /* 按钮在手机端全宽显示 */
    .btn-mobile-full {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* 操作按钮样式 */
    .action-buttons {
        justify-content: flex-end;
    }

    .action-buttons .btn,
    .action-buttons form {
        margin-left: 0.25rem;
    }

    /* 调整卡片和表单元素在小屏幕上的间距 */
    .card {
        margin-bottom: 1rem;
    }

    .form-control, .form-select {
        font-size: 16px; /* 防止iOS上自动缩放 */
    }

    /* 模态框在手机上的样式 */
    .modal-dialog {
        margin: 0.5rem;
    }
}

/* 确保表格在所有屏幕尺寸下都能滚动 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}