.bunkering-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.4rem;
}

.bunkering-header__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .bunkering-header__title > div {
        display: flex;
        flex-direction: column;
    }

    .bunkering-header__title h1 {
        font-size: 4.4rem;
        font-weight: 500;
        line-height: 150%;
        margin: 0;
        margin-bottom: 0.8rem;
    }

.bunkering-header__actions {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Temporarily hide buttons that navigate to previous workflow steps */
.bunkering-prev-step {
    display: none !important;
}

/* Content Grid */
.bunkering-content {
    animation: fadeIn 0.3s ease-in;
}

    .bunkering-content .form-section {
        background: var(--white80);
        border-radius: 2.4rem;
        box-shadow: none;
        margin-bottom: 0;
    }

        .bunkering-content .form-section .form-section__title {
            font-size: 2rem;
            font-weight: 600;
        }

        .bunkering-content .form-section .form-section__empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 3.2rem 2.4rem;
            background: var(--white);
            border-radius: 2rem;
        }

.bunkering-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
}

.bunkering-grid__full {
    grid-column: 1 / -1;
}

/* signature layout helpers */
.bunkering-content .inputs__field--100 {
    flex: 0 0 100%;
    max-width: 100%;
}

.bunkering-content .inputs__field--50 {
    flex: 0 0 calc(50% - 0.8rem);
    max-width: calc(50% - 0.8rem);
}

.bunkering-content .signature-container {
    width: 100%;
    max-width: 100%;
}

    .bunkering-content .signature-container canvas {
        width: 100% !important;
        display: block;
    }

/* Button Styles */

.btn-incident,
.btn-pause,
.btn-next-tank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid;
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-incident {
    border-color: rgba(231, 82, 103, 0.3);
    background-color: rgba(231, 82, 103, 0.05);
}

    .btn-incident:hover {
        background-color: rgba(231, 82, 103, 0.1);
    }

.btn-incident__icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(231, 82, 103, 0.2);
    border-radius: 0.375rem;
    color: #e75267;
}

.btn-pause {
    border-color: rgba(1, 114, 228, 0.3);
    background-color: rgba(1, 114, 228, 0.05);
}

    .btn-pause:hover {
        background-color: rgba(1, 114, 228, 0.1);
    }

.btn-pause__icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(1, 114, 228, 0.2);
    border-radius: 0.375rem;
    color: #0172e4;
}

.btn-resume {
    border-color: rgba(5, 207, 125, 0.3);
    background-color: rgba(5, 207, 125, 0.05);
}

    .btn-resume:hover {
        background-color: rgba(5, 207, 125, 0.1);
    }

.btn-next-tank {
    border-color: rgba(1, 114, 228, 0.3);
    background-color: rgba(1, 114, 228, 0.05);
}

    .btn-next-tank:hover {
        background-color: rgba(1, 114, 228, 0.1);
    }

.btn-next-tank__icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(1, 114, 228, 0.2);
    border-radius: 0.375rem;
    color: #0172e4;
}

.table {
    width: 100%;
    border-spacing: 0;
    margin-bottom: 0;
}

    .table thead th {
        text-align: left;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 150%;
        padding: 1.32rem 1.6rem;
        padding-left: 0;
        background: var(--white80);
        border-top: 0.1rem var(--border1) solid;
        border-bottom: 0.1rem var(--border1) solid;
    }

        .table thead th:first-child {
            border-left: 0.1rem var(--border1) solid;
            border-top-left-radius: 5rem;
            border-bottom-left-radius: 5rem;
            padding-left: 1.6rem;
        }

        .table thead th:last-child {
            border-right: 0.1rem var(--border1) solid;
            border-top-right-radius: 5rem;
            border-bottom-right-radius: 5rem;
        }

    .table tbody td {
        font-size: 1.4rem;
        padding: 1.2rem 1.6rem;
        padding-left: 0;
        border-bottom: 0.1rem solid transparent;
        border-image: repeating-linear-gradient( to right, var(--border3) 0, var(--border3) 0.5rem, /* dash length */ transparent 0.5rem, transparent 1rem /* gap length */ ) 1;
    }

        .table tbody td:last-child {
            padding-right: 0;
        }

    .table tbody tr:last-child td {
        border: none;
        padding-bottom: 0;
    }

    .table .inputs__field {
        font-size: 1.4rem;
        padding: 1.12rem 1.8rem;
    }

    .table .select .select__value {
        padding-top: 1.12rem;
        padding-bottom: 1.12rem;
        padding-left: 1.8rem;
        padding-right: 3rem;
    }

        .table .select .select__value p {
            font-size: 1.4rem;
            margin: 0;
            line-height: 1.4;
        }

#safetyChecklistTable.table tbody td,
#operationChecklistTable.table tbody td {
    font-size: 1.6rem;
}

    #safetyChecklistTable.table tbody td .checkbox-container .checkbox-checkmark,
    #operationChecklistTable.table tbody td .checkbox-container .checkbox-checkmark {
        top: -0.8rem;
        left: 1rem;
    }

    #deliveryOrdersTable.table tbody td:first-child,
    #safetyChecklistTable.table tbody td:first-child,
    #operationChecklistTable.table tbody td:first-child,
    #tanksTable.table tbody td:first-child,
    #repetitiveChecksTable.table tbody td:first-child,
    #fuelTanksTable.table tbody td:first-child,
    #samplesTable.table tbody td:first-child {
        padding-left: 1.6rem;
    }

.table-layout {
    background: var(--white80);
    border-radius: 2.4rem;
    padding: 1.6rem;
    width: 100%;
}

.fixed-table-body table {
    border: none;
    box-shadow: none;
    padding: 0;
    border-spacing: 0;
    font-size: 1.4rem;
    background: transparent;
}

    .fixed-table-body table thead th {
        font-size: 1.4rem;
        font-weight: 600;
        padding: 1.4rem 1.6rem;
        line-height: 150%;
    }

    .fixed-table-body table tbody td {
        color: var(--primary-dark);
        padding: 1.76rem 1.6rem;
    }

        .fixed-table-body table tbody td:first-child {
            font-weight: 600;
        }

    .fixed-table-body table tbody tr:last-child td {
        border-bottom: 0.1rem solid transparent;
        border-image: repeating-linear-gradient(to right, var(--border3) 0, var(--border3) 0.5rem, /* dash length */ transparent 0.5rem, transparent 1rem /* gap length */ ) 1;
        padding: 1.76rem 1.6rem;
    }

    .fixed-table-body table tbody tr:not(:last-child) td {
        border-bottom: 0.1rem #C6CACE solid;
        border-top: none;
        border-left: none;
        border-right: none;
    }

    .fixed-table-body table .status-badge {
        font-weight: 500;
        min-width: 12rem;
    }

.pagination-info {
    font-size: 1.4rem;
}

.location-popup .vessel-info {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.2rem;
    margin-bottom: 3.2rem;
    border: 0.1rem var(--border1) solid;
    border-radius: 1.2rem;
    box-shadow: 0 0.6rem 1.03rem 0 rgba(75, 85, 99, 0.03);
}

    .location-popup .vessel-info .vessel-info__image {
        display: block;
    }

        .location-popup .vessel-info .vessel-info__image img {
            height: 12rem;
            object-fit: cover;
            border-radius: 1.2rem;
        }

.location-popup .vessel-map {
    height: 15.7rem;
    border-radius: 1.2rem;
}

.location-popup .details-section {
    padding: 2rem;
    border: 0.1rem var(--border1) solid;
    border-radius: 1.2rem;
    box-shadow: 0 0.6rem 1.03rem 0 rgba(75, 85, 99, 0.03);
}

    .location-popup .details-section .details-section__header {
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 1.6rem;
    }

    .location-popup .details-section .details-section__body {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    .location-popup .details-section .details-section__row {
        display: flex;
        gap: 2.4rem;
        width: 100%;
    }

        .location-popup .details-section .details-section__row > div {
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 0.4rem;
        }

            .location-popup .details-section .details-section__row > div > p:first-child {
                font-size: 1.4rem;
                font-weight: 500;
                color: var(--gray2);
            }

            .location-popup .details-section .details-section__row > div > p:last-child {
                font-size: 1.6rem;
                font-weight: 600;
                color: var(--black);
            }

    .location-popup .details-section.details-section--table .details-section__row {
        justify-content: space-between;
        padding-bottom: 1.6rem;
        border-bottom: 0.1rem var(--border1) solid;
    }

        .location-popup .details-section.details-section--table .details-section__row > p:first-child {
            color: var(--black);
        }

        .location-popup .details-section.details-section--table .details-section__row > p:last-child {
            font-weight: 500;
        }

/* Progress Bar */
.progress {
    height: 12px;
    background-color: #e5e7eb;
    border-radius: 0.375rem;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #0172e4;
    transition: width 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .bunkering-grid {
        grid-template-columns: 1fr;
    }

    .bunkering-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .bunkering-header__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.8rem;
    }

        /* На маленьких экранах скрываем текст в кнопках навигации "Previous", оставляем только иконки */
        .bunkering-header__actions a[title*="Previous"] span {
            display: none;
        }

        .bunkering-header__actions a[title*="Previous"] {
            padding: 0.8rem;
            min-width: auto;
            width: auto;
        }

            .bunkering-header__actions a[title*="Previous"] svg {
                margin: 0;
            }

        /* Кнопка Complete всегда видна и имеет приоритет - перемещаем вправо */
        .bunkering-header__actions #btnComplete {
            margin-left: auto;
            order: 999;
        }

        /* Кнопка Export PDF также компактная на маленьких экранах */
        .bunkering-header__actions #btnExportPDF {
            padding: 0.8rem;
            min-width: auto;
        }

        /* Скрываем текст "Export PDF" на маленьких экранах, оставляем только иконку */
        .bunkering-header__actions #btnExportPDF {
            font-size: 0;
        }

            .bunkering-header__actions #btnExportPDF svg {
                margin: 0;
                font-size: 1.8rem;
                width: 1.8rem;
                height: 1.8rem;
            }

            /* Восстанавливаем размер шрифта для текста внутри кнопки, но скрываем его */
            .bunkering-header__actions #btnExportPDF *:not(svg) {
                display: none;
            }

        /* Скрываем текст в кнопке Back to Operations на маленьких экранах */
        .bunkering-header__actions a[href*="BunkeringOps"] span {
            display: none;
        }

        .bunkering-header__actions a[href*="BunkeringOps"] {
            padding: 0.8rem;
            min-width: auto;
        }

            .bunkering-header__actions a[href*="BunkeringOps"] svg {
                margin: 0;
            }
}

/* Дополнительные стили для средних экранов */
@media (max-width: 1200px) and (min-width: 769px) {
    .bunkering-header__actions {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

        /* Сокращаем текст в кнопках навигации на средних экранах */
        .bunkering-header__actions a[title*="Previous"] {
            font-size: 1.2rem;
            padding: 0.8rem 1rem;
            white-space: nowrap;
        }

        /* Убеждаемся, что кнопка Complete всегда видна */
        .bunkering-header__actions #btnComplete {
            flex-shrink: 0;
        }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .bunkering-header__actions {
        gap: 0.6rem;
    }

        .bunkering-header__actions .btn {
            padding: 0.6rem;
            font-size: 1.2rem;
        }

        /* Кнопка Complete занимает всю ширину на очень маленьких экранах */
        .bunkering-header__actions #btnComplete {
            width: 100%;
            margin-left: 0;
            order: -1;
        }
}