/* Manufacturing Job start and completion modals */

[id^="startJobModal-"] .modal-dialog,
[id^="completeJobModal-"] .modal-dialog {
    height: calc(100dvh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

[id^="startJobModal-"] .modal-content,
[id^="completeJobModal-"] .modal-content {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

[id^="startJobModal-"] .modal-content > form,
[id^="completeJobModal-"] .modal-content > form {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

[id^="startJobModal-"] .modal-header,
[id^="completeJobModal-"] .modal-header {
    flex: 0 0 auto;
    align-items: flex-start;
}

[id^="startJobModal-"] .modal-header > div,
[id^="completeJobModal-"] .modal-header > div {
    min-width: 0;
    padding-right: .75rem;
}

[id^="startJobModal-"] .modal-title,
[id^="completeJobModal-"] .modal-title,
[id^="startJobModal-"] .modal-header .small,
[id^="completeJobModal-"] .modal-header .small {
    overflow-wrap: anywhere;
}

[id^="startJobModal-"] .modal-body,
[id^="completeJobModal-"] .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

[id^="startJobModal-"] .modal-footer,
[id^="completeJobModal-"] .modal-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom)) !important;
    background: #fff;
    border-top: 1px solid #dee2e6 !important;
    box-shadow: 0 -.35rem .9rem rgba(15, 23, 42, .08);
}

[id^="startJobModal-"] .modal-footer .btn,
[id^="completeJobModal-"] .modal-footer .btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    [id^="startJobModal-"] .modal-dialog,
    [id^="completeJobModal-"] .modal-dialog {
        height: calc(100dvh - 1rem);
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    [id^="startJobModal-"] .modal-body,
    [id^="completeJobModal-"] .modal-body {
        padding: 1rem !important;
    }

    [id^="startJobModal-"] .modal-body .alert,
    [id^="completeJobModal-"] .modal-body .alert {
        margin-bottom: 1rem;
    }

    [id^="startJobModal-"] .table,
    [id^="completeJobModal-"] .table {
        font-size: .84rem;
        margin-bottom: 0;
    }

    [id^="startJobModal-"] .table th,
    [id^="startJobModal-"] .table td,
    [id^="completeJobModal-"] .table th,
    [id^="completeJobModal-"] .table td {
        padding: .5rem .4rem;
        white-space: normal;
    }
}

@media (max-width: 575.98px) {
    [id^="startJobModal-"],
    [id^="completeJobModal-"] {
        padding: 0 !important;
    }

    [id^="startJobModal-"] .modal-dialog,
    [id^="completeJobModal-"] .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
    }

    [id^="startJobModal-"] .modal-content,
    [id^="completeJobModal-"] .modal-content {
        min-height: 100dvh;
        border-radius: 0 !important;
    }

    [id^="startJobModal-"] .modal-header,
    [id^="completeJobModal-"] .modal-header {
        padding: .9rem 1rem !important;
        border-radius: 0 !important;
    }

    [id^="startJobModal-"] .modal-title,
    [id^="completeJobModal-"] .modal-title {
        font-size: 1.05rem;
    }

    [id^="startJobModal-"] .modal-body,
    [id^="completeJobModal-"] .modal-body {
        padding: .9rem !important;
    }

    [id^="startJobModal-"] .modal-body .alert .d-flex,
    [id^="completeJobModal-"] .modal-body .alert .d-flex {
        gap: .75rem !important;
        align-items: flex-start;
    }

    [id^="startJobModal-"] .modal-footer,
    [id^="completeJobModal-"] .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: .6rem;
        padding: .75rem .9rem calc(.75rem + env(safe-area-inset-bottom)) !important;
    }

    [id^="startJobModal-"] .modal-footer .btn,
    [id^="completeJobModal-"] .modal-footer .btn {
        width: 100%;
        min-height: 48px;
        margin: 0 !important;
        padding-left: .75rem;
        padding-right: .75rem;
        white-space: normal;
    }

    [id^="startJobModal-"] .table-responsive,
    [id^="completeJobModal-"] .table-responsive {
        margin-left: -.2rem;
        margin-right: -.2rem;
    }

    [id^="startJobModal-"] .table th:first-child,
    [id^="startJobModal-"] .table td:first-child,
    [id^="completeJobModal-"] .table th:first-child,
    [id^="completeJobModal-"] .table td:first-child {
        min-width: 115px;
    }
}