/* 模态框样式修复 */
.modal.d-block {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.modal.d-block .modal-dialog {
    position: relative;
    width: auto;
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
    margin: auto;
    z-index: 10000;
}

.modal.d-block .modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    overflow-y: auto;
}

/* 确保页面内容在模态框下面 */
.page-content {
    position: relative;
    z-index: 1;
}

/* NavMenu 图标与文本对齐 */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.nav-link i.bi {
    font-size: 1.25rem;
    line-height: 1;
}

/* 响应式按钮组 */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.btn-group .btn {
    flex: 0 1 auto;
    white-space: nowrap;
}

/* 超小屏幕 (≤480px) */
@media (max-width: 480px) {
    .page-content {
        padding: 0.5rem 0;
    }

    .card {
        box-shadow: none;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .table-responsive {
        border: none;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
    }

    .table {
        font-size: 0.75rem;
        margin: 0;
    }

    .table th,
    .table td {
        padding: 0.35rem 0.25rem;
        white-space: nowrap;
    }

    .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.65rem;
    }

    .btn-group .btn {
        min-width: auto;
        padding: 0.15rem 0.3rem !important;
    }

    .modal.d-block {
        padding: 0.5rem;
    }

    .modal-dialog {
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-body {
        padding: 0.75rem !important;
    }

    .modal-header {
        padding: 0.5rem !important;
    }

    .modal-footer {
        padding: 0.5rem !important;
    }

    .alert {
        padding: 0.5rem;
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }

    h1 {
        font-size: 1.25rem;
    }

    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .form-control, .form-select {
        font-size: 0.85rem;
        padding: 0.4rem 0.5rem;
    }
}

/* 小屏幕 (481px-767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .page-content {
        padding: 0.75rem;
    }

    .card {
        box-shadow: none;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .table {
        font-size: 0.8rem;
    }

    .table th,
    .table td {
        padding: 0.4rem 0.3rem;
    }

    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    .modal.d-block {
        padding: 0.75rem;
    }

    .modal-dialog {
        max-width: calc(100vw - 1.5rem) !important;
    }

    .alert {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    h1 {
        font-size: 1.4rem;
    }
}

/* 中等屏幕 (768px-991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .page-content {
        padding: 1rem;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .btn-sm {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }

    .modal-dialog {
        max-width: 600px !important;
    }
}

/* 大屏幕 (≥992px) */
@media (min-width: 992px) {
    .modal-dialog {
        max-width: 600px !important;
    }

    .btn-group .btn {
        margin-left: 0.25rem;
    }

    .btn-group .btn:first-child {
        margin-left: 0;
    }
}