/* Cấu hình chung cho font & độ rộng cột
   Chỉ cần chỉnh các biến :root là thay đổi được toàn site */
:root {
    /* Font size tổng thể */
    --base-font-size: 0.95rem;
    --table-header-font-size: 0.7rem;
    --table-body-font-size: 0.8rem;

    /* Font cho vùng filter */
    --filter-label-font-size: 0.8rem;
    --filter-input-font-size: 0.8rem;

    /* Cấu hình độ rộng các cột bảng công việc */
    --col-stt-width: 3rem;
    --col-title-width: 21%;
    --col-jobtype-width: 8%;
    --col-priority-width: 7%;
    --col-effectivity-width: 8%;
    --col-assigned-width: 10%;
    --col-deadline-width: 10%;
    --col-remaining-width: 8%;
    --col-person-width: 10%;
    --col-team-width: 5%;
    --col-note-width: 30%;
    --col-status-width: 7%;
    --col-created-by-width: 7%;
    --col-actions-width: 10%;

    /* Cấu hình độ rộng các cột bảng Modification */
    --mod-col-index-width: 3rem;
    --mod-col-ata-width: 5%;
    --mod-col-description-width: 20%;
    --mod-col-partdesc-width: 14%;
    --mod-col-document-width: 10%;
    --mod-col-issued-width: 9%;
    --mod-col-performed-width: 7%;
    --mod-col-type-width: 11%;
    --mod-col-aircraft-width: 14%;
    --mod-col-note-width: 20%;
    --mod-col-createdby-width: 8%;
    --mod-col-incharge-width: 10%;
    --mod-col-status-width: 7%;
    --mod-col-actions-width: 8%;

    /* Cấu hình độ rộng các cột bảng AD Management đã bỏ (giữ chỗ nếu cần dùng lại sau) */

    /* Cấu hình độ rộng các cột bảng Engine */
    --engine-col-index-width: 3rem;
    --engine-table-min-width: 1800px;
    --engine-col-lessor-width: 4%;
    --engine-col-aircraft-registr-width: 5%;
    --engine-col-aircraft-msn-width: 4%;
    --engine-col-partnumber-width: 10%;
    --engine-col-serialnumber-width: 6%;
    --engine-col-position-width: 5%;
    --engine-col-type-width: 7%;
    --engine-col-location-width: 5%;
    --engine-col-is-spare-width: 5%;
    --engine-col-delivery-date-width: 7%;
    --engine-col-stagger-time-width: 6%;
    --engine-col-stagger-cycle-width: 5%;
    --engine-col-stagger-start-width: 7%;
    --engine-col-is-stagger-width: 5%;
    --engine-col-fc-limit-width: 5%;
    --engine-col-fc-limit-min-width: 5%;
    --engine-col-fc-limit-max-width: 5%;
    --engine-col-cycle-per-day-width: 7%;
    --engine-col-tsn-width: 4%;
    --engine-col-csn-width: 4%;
    --engine-col-tsovh-width: 4%;
    --engine-col-csovh-width: 4%;
    --engine-col-tat-day-width: 4%;
    --engine-col-shop-date-width: 6%;
    --engine-col-shop-level-width: 5%;
    --engine-col-actions-width: 8%;

    /* Độ rộng các ô filter (có thể chỉnh tại đây) */
    --filter-title-width: 8%;
    --filter-jobtype-width: 6%;
    --filter-priority-width: 6%;
    --filter-effectivity-width: 6%;
    --filter-person-width: 6%;
    --filter-team-width: 6%;
    --filter-createdby-width: 6%;
    --filter-note-width: 8%;
    --filter-status-width: 5%;
    --filter-deadline-width: 8%;
    --filter-deadlineto-width: 8%;
    --filter-assignedfrom-width: 8%;
    --filter-assignedto-width: 8%;
    --filter-remaining-width: 5%;
    --filter-sort-width: 6%;

    /* Độ rộng các ô filter cho trang Modification */
    --filter-mod-ata-width: 3%;
    --filter-mod-description-width: 10%;
    --filter-mod-document-width: 10%;
    --filter-mod-performedby-width: 6%;
    --filter-mod-type-width: 8%;
    --filter-mod-aircraft-width: 10%;
    --filter-mod-performedaircraft-width: 10%;
    --filter-mod-issuedfrom-width: 10%;
    --filter-mod-issuedto-width: 10%;
    --filter-mod-createdby-width: 8%;
    --filter-mod-incharge-width: 8%;
    --filter-mod-status-width: 5%;
}

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--base-font-size);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.5rem;
}

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

.card-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.btn-add-task {
    border-radius: 999px;
    font-weight: 500;
    padding: 0.3rem 0.9rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease-in-out;
}

.btn-add-task:hover {
    background-color: #ffffff;
    color: #0d6efd;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.btn-add-task:active {
    transform: translateY(0);
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}

.table th {
    font-weight: 600;
    color: #495057;
    border-top: none;
    font-size: var(--table-header-font-size);
}

.table td {
    vertical-align: middle;
    font-size: var(--table-body-font-size);
}

/* Font riêng cho vùng Bộ lọc theo cột */
.filter-row .form-label {
    font-size: var(--filter-label-font-size);
}

.filter-row .form-control-sm,
.filter-row .form-select-sm {
    font-size: var(--filter-input-font-size);
}

.task-note {
    white-space: pre-wrap;
    word-break: break-word;
}

#tasksTable {
    table-layout: fixed;
    /* Đảm bảo bảng đủ rộng để có thể scroll ngang khi nhiều cột */
    min-width: 1200px;
}
/* Bảng Aircrafts */
#aircraftsTable {
    table-layout: fixed;
    min-width: 800px;
}
#aircraftsTable thead th {
    font-size: var(--table-header-font-size);
}

#aircraftsTable tbody td {
    font-size: var(--table-body-font-size);
}
#aircraftsTable thead th,
#aircraftsTable tbody td {
    border: 1px solid #dee2e6;
}
#aircraftsTable {
    border-collapse: collapse;
}
/* Độ rộng từng cột bảng Aircrafts (có thể chỉnh lại %) */
#aircraftsTable thead th:nth-child(1),
#aircraftsTable tbody td:nth-child(1) {
    width: 3rem; /* STT */
}

#aircraftsTable thead th:nth-child(2),
#aircraftsTable tbody td:nth-child(2) {
    width: 5%; /* Registration */
}

#aircraftsTable thead th:nth-child(3),
#aircraftsTable tbody td:nth-child(3) {
    width: 5%; /* MSN */
}

#aircraftsTable thead th:nth-child(4),
#aircraftsTable tbody td:nth-child(4) {
    width: 8%; /* Type */
}

#aircraftsTable thead th:nth-child(5),
#aircraftsTable tbody td:nth-child(5) {
    width: 20%; /* Description */
}

#aircraftsTable thead th:nth-child(6),
#aircraftsTable tbody td:nth-child(6) {
    width: 6%; /* Mnf Date */
}

#aircraftsTable thead th:nth-child(7),
#aircraftsTable tbody td:nth-child(7) {
    width: 6%; /* Owner */
}

#aircraftsTable thead th:nth-child(8),
#aircraftsTable tbody td:nth-child(8) {
    width: 12%; /* Cabin */
}

#aircraftsTable thead th:nth-child(9),
#aircraftsTable tbody td:nth-child(9) {
    width: 12%; /* Engine */
}

#aircraftsTable thead th:nth-child(10),
#aircraftsTable tbody td:nth-child(10) {
    width: 6%; /* Delivery Date */
}

#aircraftsTable thead th:nth-child(11),
#aircraftsTable tbody td:nth-child(11) {
    width: 6%; /* Created By */
}

#aircraftsTable thead th:nth-child(12),
#aircraftsTable tbody td:nth-child(12) {
    width: 6%; /* Updated By */
}

#aircraftsTable thead th:nth-child(13),
#aircraftsTable tbody td:nth-child(13) {
    width: 9%; /* Created Date */
}

#aircraftsTable thead th:nth-child(14),
#aircraftsTable tbody td:nth-child(14) {
    width: 9%; /* Updated Date */
}

#aircraftsTable thead th:nth-child(15),
#aircraftsTable tbody td:nth-child(15) {
    width: 7%; /* Actions */
    white-space: nowrap;
}

/* Bảng Engine */
#enginesTable {
    table-layout: fixed;
    min-width: var(--engine-table-min-width);
    border-collapse: collapse;
}

#enginesTable thead th,
#enginesTable tbody td {
    border: 1px solid #dee2e6;
    vertical-align: top;
    word-break: break-word;
}

#enginesTable thead th {
    font-weight: 700;
}

#enginesTable thead th:nth-child(1),
#enginesTable tbody td:nth-child(1) {
    width: var(--engine-col-index-width);
}

#enginesTable thead th:nth-child(2),
#enginesTable tbody td:nth-child(2) {
    width: var(--engine-col-lessor-width);
}

#enginesTable thead th:nth-child(3),
#enginesTable tbody td:nth-child(3) {
    width: var(--engine-col-aircraft-registr-width);
}

#enginesTable thead th:nth-child(4),
#enginesTable tbody td:nth-child(4) {
    width: var(--engine-col-aircraft-msn-width);
}

#enginesTable thead th:nth-child(5),
#enginesTable tbody td:nth-child(5) {
    width: var(--engine-col-partnumber-width);
}

#enginesTable thead th:nth-child(6),
#enginesTable tbody td:nth-child(6) {
    width: var(--engine-col-serialnumber-width);
}

#enginesTable thead th:nth-child(7),
#enginesTable tbody td:nth-child(7) {
    width: var(--engine-col-position-width);
}

#enginesTable thead th:nth-child(8),
#enginesTable tbody td:nth-child(8) {
    width: var(--engine-col-type-width);
}

#enginesTable thead th:nth-child(9),
#enginesTable tbody td:nth-child(9) {
    width: var(--engine-col-location-width);
}

#enginesTable thead th:nth-child(10),
#enginesTable tbody td:nth-child(10) {
    width: var(--engine-col-is-spare-width);
}

#enginesTable thead th:nth-child(11),
#enginesTable tbody td:nth-child(11) {
    width: var(--engine-col-delivery-date-width);
}

#enginesTable thead th:nth-child(12),
#enginesTable tbody td:nth-child(12) {
    width: var(--engine-col-stagger-time-width);
}

#enginesTable thead th:nth-child(13),
#enginesTable tbody td:nth-child(13) {
    width: var(--engine-col-stagger-cycle-width);
}

#enginesTable thead th:nth-child(14),
#enginesTable tbody td:nth-child(14) {
    width: var(--engine-col-stagger-start-width);
}

#enginesTable thead th:nth-child(15),
#enginesTable tbody td:nth-child(15) {
    width: var(--engine-col-is-stagger-width);
}

#enginesTable thead th:nth-child(16),
#enginesTable tbody td:nth-child(16) {
    width: var(--engine-col-fc-limit-width);
}

#enginesTable thead th:nth-child(17),
#enginesTable tbody td:nth-child(17) {
    width: var(--engine-col-fc-limit-min-width);
}

#enginesTable thead th:nth-child(18),
#enginesTable tbody td:nth-child(18) {
    width: var(--engine-col-fc-limit-max-width);
}

#enginesTable thead th:nth-child(19),
#enginesTable tbody td:nth-child(19) {
    width: var(--engine-col-cycle-per-day-width);
}

#enginesTable thead th:nth-child(20),
#enginesTable tbody td:nth-child(20) {
    width: var(--engine-col-tsn-width);
}

#enginesTable thead th:nth-child(21),
#enginesTable tbody td:nth-child(21) {
    width: var(--engine-col-csn-width);
}

#enginesTable thead th:nth-child(22),
#enginesTable tbody td:nth-child(22) {
    width: var(--engine-col-tsovh-width);
}

#enginesTable thead th:nth-child(23),
#enginesTable tbody td:nth-child(23) {
    width: var(--engine-col-csovh-width);
}

#enginesTable thead th:nth-child(24),
#enginesTable tbody td:nth-child(24) {
    width: var(--engine-col-tat-day-width);
}

#enginesTable thead th:nth-child(25),
#enginesTable tbody td:nth-child(25) {
    width: var(--engine-col-shop-date-width);
}

#enginesTable thead th:nth-child(26),
#enginesTable tbody td:nth-child(26) {
    width: var(--engine-col-shop-level-width);
}

#enginesTable thead th:last-child,
#enginesTable tbody td:last-child {
    width: var(--engine-col-actions-width);
    white-space: nowrap;
}

.engine-filter-row .form-label {
    font-size: var(--filter-label-font-size);
}

.engine-filter-row .form-control-sm,
.engine-filter-row .form-select-sm {
    font-size: var(--filter-input-font-size);
}

/* Engine Stagger Drag & Drop (Gantt-like) */
#engineStaggerDragdropPage {
    height: calc(100vh - 120px);
}

#engineStaggerDragdropPage > .col-12,
#engineStaggerDragdropPage .card {
    height: 100%;
}

.engine-stagger-dragdrop-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.engine-stagger-dragdrop-table {
    table-layout: fixed;
    min-width: 1100px;
    border-collapse: collapse;
}

.engine-stagger-dragdrop-table thead th,
.engine-stagger-dragdrop-table tbody td {
    vertical-align: middle;
}

.engine-stagger-dragdrop-table tbody td {
    padding: 0.05rem 0.1rem;
    line-height: 1;
}

/* Giữ header khi scroll dọc trong vùng dragdrop */
.engine-stagger-dragdrop-table thead th {
    position: sticky;
    top: 0;
    z-index: 6;
    background-color: #f8f9fa;
}

.engine-stagger-dragdrop-table thead th:nth-child(1) {
    width: 70px;
}

.engine-stagger-dragdrop-table thead th:nth-child(2) {
    width: 60px;
}

.engine-stagger-month-header {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.2rem 0.1rem;
    min-width: 20px;
}

.engine-stagger-time-cell {
    min-width: 10px;
    height: 18px;
    padding: 0;
    background-color: #ffffff;
    position: relative;
}

.engine-stagger-time-cell.drag-over {
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
    background-color: #e7f1ff;
}

.engine-stagger-dragdrop-palette {
    border-radius: 0.5rem;
    border: 1px dashed #ced4da;
    background-color: #f8f9fa;
    padding: 0.75rem 0.9rem;
}

.engine-stagger-card-body {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.engine-stagger-relationship-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 7;
    overflow: visible;
}

.engine-stagger-relationship-overlay.is-hidden {
    display: none;
}

.engine-stagger-relationship-path {
    fill: none;
    stroke: #8b1e2d;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.92;
}

.engine-stagger-relationship-node {
    fill: #ffffff;
    stroke: #8b1e2d;
    stroke-width: 1.5;
    opacity: 0.95;
}

.engine-stagger-page-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(248, 249, 250, 0.86);
    backdrop-filter: blur(2px);
    z-index: 1080;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.engine-stagger-page-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.engine-stagger-page-loading__dialog {
    min-width: min(28rem, 100%);
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.4rem 1.6rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(13, 202, 240, 0.28);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.12);
    text-align: center;
}

.engine-stagger-page-loading__spinner {
    width: 2.4rem;
    height: 2.4rem;
}

.engine-stagger-page-loading__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.engine-stagger-page-loading__subtitle {
    font-size: 0.88rem;
    color: #475569;
}

.engine-stagger-block-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

#ganttBlockList {
    margin-left: auto;
    justify-content: flex-end;
    flex: 1 1 320px;
}

.engine-stagger-block {
    min-width: 90px;
    padding: 0.45rem 0.9rem;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    cursor: grab;
    box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.15);
    user-select: none;
    text-align: center;
    position: relative;
    z-index: 2;
}

.engine-stagger-block[data-legend="true"] {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    min-height: 2.1rem;
}

.engine-stagger-block[data-engine-location="Store"],
.engine-stagger-block[data-engine-location="store"] {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    min-height: 2.1rem;
}

.engine-stagger-block[data-legend="true"] .engine-stagger-block-text,
.engine-stagger-block[data-engine-location="Store"] .engine-stagger-block-text,
.engine-stagger-block[data-engine-location="store"] .engine-stagger-block-text {
    height: auto;
    line-height: 1.2;
}

.engine-stagger-block.dragging {
    opacity: 0.7;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.45);
}

.engine-stagger-block.engine-stagger-quick-connect-source {
    border-color: #0dcaf0;
    box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.35);
}

.engine-stagger-block.engine-stagger-group-connect-source {
    transform: scale(0.96);
    border-color: #8b1e2d;
    box-shadow: 0 0 0 3px rgba(139, 30, 45, 0.25);
}

.engine-stagger-block.in-cell {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    height: 100%;
    min-width: 20px;
    max-width: none;
    padding: 0 0.2rem;
    border-radius: 0.2rem;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    white-space: normal;
    overflow: hidden;
}

.engine-stagger-block.engine-stagger-underlay-block {
    z-index: 1;
    top: 0;
    height: 100%;
    border-width: 1px;
    box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.2);
    opacity: 0.92;
}

.engine-stagger-block.engine-stagger-overlay-block {
    z-index: 1;
    top: 12%;
    height: 76%;
    background: rgba(255, 193, 7, 0.52) !important;
    border-color: rgba(255, 193, 7, 0.78) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.3);
    pointer-events: none;
    backdrop-filter: saturate(0.9);
}

.engine-stagger-block.engine-stagger-overlay-block.engine-stagger-overlay-block-draggable {
    pointer-events: auto;
    cursor: grab;
    z-index: 3;
}

.engine-stagger-block.engine-stagger-overlay-block.engine-stagger-overlay-block-draggable.dragging {
    cursor: grabbing;
}

.engine-stagger-block.engine-stagger-shop-collapsed {
    top: 12%;
    height: 76%;
    width: 4px !important;
    min-width: 4px !important;
    max-width: 4px !important;
    padding: 0 !important;
    border-width: 0 !important;
    border-radius: 999px;
    box-shadow: none;
    overflow: hidden;
}

.engine-stagger-block.engine-stagger-shop-collapsed::after {
    display: none;
}

.engine-stagger-block.engine-stagger-shop-collapsed .engine-stagger-block-text {
    display: none;
}

.engine-stagger-shop-gap-overlay {
    position: absolute;
    left: 0;
    top: 12%;
    height: 76%;
    border-radius: 0.25rem;
    background: rgba(124, 212, 167, 0.45);
    border: 1px solid rgba(74, 171, 122, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    pointer-events: none;
    z-index: 0;
}

.engine-stagger-block.engine-stagger-block-resizable {
    padding-right: 1rem;
}

.engine-stagger-block.engine-stagger-block-resizable.engine-stagger-block-left-handle {
    padding-left: 1rem;
    padding-right: 0.2rem;
}

.engine-stagger-block.engine-stagger-block-resizable::after {
    content: '<>';
    position: absolute;
    top: 50%;
    right: 0.2rem;
    transform: translateY(-50%);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: -0.05rem;
    color: var(--engine-stagger-handle-color, rgba(255, 255, 255, 0.95));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.engine-stagger-block.engine-stagger-block-resizable.engine-stagger-block-left-handle::after {
    left: 0.2rem;
    right: auto;
}

.engine-stagger-block.engine-stagger-block-resizable.engine-stagger-block-resize-ready,
.engine-stagger-block.engine-stagger-block-resizable.engine-stagger-block-resizing {
    cursor: ew-resize;
}

.engine-stagger-block.engine-stagger-block-resizable.engine-stagger-block-resize-ready::after,
.engine-stagger-block.engine-stagger-block-resizable.engine-stagger-block-resizing::after {
    opacity: 1;
}


.engine-stagger-block-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    line-height: 1.1;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

.engine-stagger-block-label,
.engine-stagger-block-subtext {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
}

.engine-stagger-block-subtext {
    font-size: 0.62rem;
    opacity: 0.92;
}

.engine-stagger-block-group-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 1.35rem;
    height: 1.1rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.2);
}

.engine-stagger-block-group-badge--spare {
    background: rgba(11, 94, 215, 0.92);
}

.engine-stagger-block-group-badge--stagger {
    background: rgba(139, 30, 45, 0.92);
}

.engine-stagger-block-text--shop-badge-right {
    position: relative;
}

.engine-stagger-block-label--shop-badge-right {
    width: 100%;
    text-align: center;
    padding-right: 1.9rem;
}

.engine-stagger-block-group-badge--shop-right {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Block đã có block con (has_child = true) hiển thị hơi mờ để dễ nhận biết */
.engine-stagger-block.engine-stagger-block-has-child {
    opacity: 0.6;
    filter: saturate(0.8);
}

/* ON/OFF badge layout inside engine stagger blocks */
.engine-stagger-block.engine-stagger-block-has-onoff {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.35rem;
}

.engine-stagger-block-action-menu {
    position: absolute;
    min-width: 132px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem;
    border: 1px solid rgba(139, 30, 45, 0.18);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.16);
    z-index: 8;
}

.engine-stagger-block-action-menu.is-hidden {
    display: none;
}

.engine-stagger-block-action-btn {
    border: 0;
    border-radius: 0.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.engine-stagger-block-action-btn[data-action="tracking"] {
    background: rgba(139, 30, 45, 0.1);
    color: #8b1e2d;
}

.engine-stagger-block-action-btn[data-action="tracking"]:hover {
    background: rgba(139, 30, 45, 0.18);
}

.engine-stagger-block-action-btn[data-action="edit"] {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.engine-stagger-block-action-btn[data-action="edit"]:hover {
    background: rgba(13, 110, 253, 0.18);
}

.engine-block-onoff-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.25rem;
}

.engine-block-onoff-badge {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    white-space: nowrap;
}

.engine-block-onoff-label {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

/* Bảng Modification */
#modificationsTable {
    table-layout: fixed;
    /* Tăng min-width để buộc phải có scroll ngang trên màn hình thường */
    min-width: 1600px;
}

/* Đường kẻ giữa các hàng/cột của bảng Modification */
#modificationsTable thead th,
#modificationsTable tbody td {
    border: 1px solid #dee2e6;
}

#modificationsTable {
    border-collapse: collapse;
}

/* Độ rộng cơ bản cho một số cột Modification */
#modificationsTable thead th.mod-col-index,
#modificationsTable tbody td.mod-col-index {
    width: var(--mod-col-index-width);
}

#modificationsTable thead th.mod-col-ata,
#modificationsTable tbody td.mod-col-ata {
    width: var(--mod-col-ata-width);
}

#modificationsTable thead th.mod-col-createdby,
#modificationsTable tbody td.mod-col-createdby {
    width: var(--mod-col-createdby-width);
}

#modificationsTable thead th.mod-col-incharge,
#modificationsTable tbody td.mod-col-incharge {
    width: var(--mod-col-incharge-width);
}

/* Cố định (freeze) cột 1 và 2 khi scroll ngang */
#modificationsTable thead th:nth-child(1),
#modificationsTable tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #ffffff;
}

#modificationsTable thead th:nth-child(2),
#modificationsTable tbody td:nth-child(2) {
    position: sticky;
    left: var(--mod-col-index-width);
    z-index: 3;
    background-color: #ffffff;
}

/* Cho phép scroll theo chiều ngang khi bảng rộng hơn container */
.table-responsive {
    overflow-x: auto;
}

/* Chỉ cho phần thân bảng công việc (tbody) scroll dọc; header giữ nguyên */
#tasksTable thead,
#tasksTable tbody {
    display: block;
}

/* Bù độ rộng thanh scroll dọc để header & body canh cột thẳng hàng */
#tasksTable thead {
    /* margin sẽ được điều chỉnh động bằng JavaScript tùy theo có scrollbar hay không */
    margin-right: 0;
}

#tasksTable tbody {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    /*padding-bottom: 16px;* /* chừa vừa đủ khoảng trống để không bị che hàng cuối */
}

#tasksTable thead tr,
#tasksTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Độ rộng các cột filter */
.filter-row {
    margin-left: 0rem;
    /* chỉnh ở đây để thay đổi margin-left của cả hàng filter */
}

/* Cho phép bộ lọc theo cột scroll ngang trên màn hình hẹp */
.filter-scroll-wrapper {
    width: 100%;
}

@media (max-width: 992px) {
    .filter-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-row {
        flex-wrap: nowrap;
        min-width: 1200px;
    }
}

.filter-row .filter-col-title {
    flex: 0 0 var(--filter-title-width);
    max-width: var(--filter-title-width);
}

.filter-row .filter-col-jobtype {
    flex: 0 0 var(--filter-jobtype-width);
    max-width: var(--filter-jobtype-width);
}

.filter-row .filter-col-priority {
    flex: 0 0 var(--filter-priority-width);
    max-width: var(--filter-priority-width);
}

.filter-row .filter-col-effectivity {
    flex: 0 0 var(--filter-effectivity-width);
    max-width: var(--filter-effectivity-width);
}

.filter-row .filter-col-person {
    flex: 0 0 var(--filter-person-width);
    max-width: var(--filter-person-width);
}

.filter-row .filter-col-team {
    flex: 0 0 var(--filter-team-width);
    max-width: var(--filter-team-width);
}

.filter-row .filter-col-createdby {
    flex: 0 0 var(--filter-createdby-width);
    max-width: var(--filter-createdby-width);
}

.filter-row .filter-col-note {
    flex: 0 0 var(--filter-note-width);
    max-width: var(--filter-note-width);
}

.filter-row .filter-col-status {
    flex: 0 0 var(--filter-status-width);
    max-width: var(--filter-status-width);
}

.filter-row .filter-col-deadline {
    flex: 0 0 var(--filter-deadline-width);
    max-width: var(--filter-deadline-width);
}
.filter-row .filter-col-deadlineto {
    flex: 0 0 var(--filter-deadlineto-width);
    max-width: var(--filter-deadlineto-width);
}

.filter-row .filter-col-assignedfrom {
    flex: 0 0 var(--filter-assignedfrom-width);
    max-width: var(--filter-assignedfrom-width);
}
.filter-row .filter-col-assignedto {
    flex: 0 0 var(--filter-assignedto-width);
    max-width: var(--filter-assignedto-width);
}
.filter-row .filter-col-remaining {
    flex: 0 0 var(--filter-remaining-width);
    max-width: var(--filter-remaining-width);
}

.filter-row .filter-col-sort {
    flex: 0 0 var(--filter-sort-width);
    max-width: var(--filter-sort-width);
}

/* Độ rộng các cột bảng Modification */
#modificationsTable th.mod-col-index,
#modificationsTable td.mod-col-index {
    width: var(--mod-col-index-width);
}

#modificationsTable th.mod-col-ata,
#modificationsTable td.mod-col-ata {
    width: var(--mod-col-ata-width);
}

#modificationsTable th.mod-col-description,
#modificationsTable td.mod-col-description {
    width: var(--mod-col-description-width);
}

#modificationsTable th.mod-col-partdesc,
#modificationsTable td.mod-col-partdesc {
    width: var(--mod-col-partdesc-width);
}

#modificationsTable th.mod-col-document,
#modificationsTable td.mod-col-document {
    width: var(--mod-col-document-width);
}

#modificationsTable th.mod-col-issued,
#modificationsTable td.mod-col-issued {
    width: var(--mod-col-issued-width);
}

#modificationsTable th.mod-col-performed,
#modificationsTable td.mod-col-performed {
    width: var(--mod-col-performed-width);
}

#modificationsTable th.mod-col-type,
#modificationsTable td.mod-col-type {
    width: var(--mod-col-type-width);
}

#modificationsTable th.mod-col-aircraft,
#modificationsTable td.mod-col-aircraft {
    width: var(--mod-col-aircraft-width);
}

#modificationsTable th.mod-col-note,
#modificationsTable td.mod-col-note {
    width: var(--mod-col-note-width);
}

#modificationsTable th.mod-col-status,
#modificationsTable td.mod-col-status {
    width: var(--mod-col-status-width);
}

#modificationsTable th.mod-col-actions,
#modificationsTable td.mod-col-actions {
    width: var(--mod-col-actions-width);
}

/* Độ rộng các cột filter cho trang Modification */
.filter-row .filter-col-mod-ata {
    flex: 0 0 var(--filter-mod-ata-width);
    max-width: var(--filter-mod-ata-width);
}

.filter-row .filter-col-mod-description {
    flex: 0 0 var(--filter-mod-description-width);
    max-width: var(--filter-mod-description-width);
}

.filter-row .filter-col-mod-document {
    flex: 0 0 var(--filter-mod-document-width);
    max-width: var(--filter-mod-document-width);
}

.filter-row .filter-col-mod-performedby {
    flex: 0 0 var(--filter-mod-performedby-width);
    max-width: var(--filter-mod-performedby-width);
}

.filter-row .filter-col-mod-type {
    flex: 0 0 var(--filter-mod-type-width);
    max-width: var(--filter-mod-type-width);
}

.filter-row .filter-col-mod-aircraft {
    flex: 0 0 var(--filter-mod-aircraft-width);
    max-width: var(--filter-mod-aircraft-width);
}

.filter-row .filter-col-mod-performedaircraft {
    flex: 0 0 var(--filter-mod-performedaircraft-width);
    max-width: var(--filter-mod-performedaircraft-width);
}

.filter-row .filter-col-mod-issuedfrom {
    flex: 0 0 var(--filter-mod-issuedfrom-width);
    max-width: var(--filter-mod-issuedfrom-width);
}

.filter-row .filter-col-mod-issuedto {
    flex: 0 0 var(--filter-mod-issuedto-width);
    max-width: var(--filter-mod-issuedto-width);
}

.filter-row .filter-col-mod-createdby {
    flex: 0 0 var(--filter-mod-createdby-width);
    max-width: var(--filter-mod-createdby-width);
}

.filter-row .filter-col-mod-incharge {
    flex: 0 0 var(--filter-mod-incharge-width);
    max-width: var(--filter-mod-incharge-width);
}

.filter-row .filter-col-mod-status {
    flex: 0 0 var(--filter-mod-status-width);
    max-width: var(--filter-mod-status-width);
}

#tasksTable th.col-stt,
#tasksTable td.col-stt {
    width: var(--col-stt-width);
    vertical-align: top;
}

#tasksTable th.col-title,
#tasksTable td.col-title {
    width: var(--col-title-width);
    vertical-align: top;
}

#tasksTable th.col-desc,
#tasksTable td.col-desc {
    width: var(--col-desc-width);
}

#tasksTable th.col-jobtype,
#tasksTable td.col-jobtype {
    width: var(--col-jobtype-width);
    vertical-align: top;

}

#tasksTable th.col-priority,
#tasksTable td.col-priority {
    width: var(--col-priority-width);
    text-align: center;
    vertical-align: top;


}

#tasksTable th.col-effectivity,
#tasksTable td.col-effectivity {
    width: var(--col-effectivity-width);
    vertical-align: top;

}

#tasksTable th.col-assigned,
#tasksTable td.col-assigned {
    width: var(--col-assigned-width);
    text-align: center;
    vertical-align: top;


}

#tasksTable th.col-deadline,
#tasksTable td.col-deadline {
    width: var(--col-deadline-width);
    text-align: center;
    vertical-align: top;


}

#tasksTable th.col-remaining,
#tasksTable td.col-remaining {
    width: var(--col-remaining-width);
    text-align: center;
    vertical-align: top;

}

/* Cỡ chữ riêng cho badge Remaining Day (to hơn một chút) */
.col-remaining .task-remaining_day {
    font-size: 0.9rem;
}

#tasksTable th.col-person,
#tasksTable td.col-person {
    width: var(--col-person-width);
    vertical-align: top;

}

#tasksTable th.col-team,
#tasksTable td.col-team {
    width: var(--col-team-width);
    vertical-align: top;

}

#tasksTable th.col-note,
#tasksTable td.col-note {
    width: var(--col-note-width);
    vertical-align: top;

    /* Để có thể đặt nút note-folder-btn cố định trong ô */
    position: relative;
    /* Chừa rất ít khoảng trống bên phải, tránh bị lệch xa */
    padding-right: 0.5rem;
}

.col-note .note-header-line {
    /* Giữ layout nội dung ghi chú, chừa chỗ bên phải cho nút */
    display: block;
    /* Chừa đúng bề rộng nút + một chút margin */
    padding-right: 1.8rem;
}

.note-folder-btn {
    padding: 0.1rem 0.3rem;
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 1;
}

#tasksTable th.col-status,
#tasksTable td.col-status {
    width: var(--col-status-width);
    text-align: center;
    vertical-align: top;

}

#tasksTable th.col-created-by,
#tasksTable td.col-created-by {
    width: var(--col-created-by-width);
    white-space: nowrap;
    vertical-align: top;

}

#tasksTable th.col-actions,
#tasksTable td.col-actions {
    width: var(--col-actions-width);
    text-align: center;
    vertical-align: top;

}

/* Đường kẻ giữa các hàng/cột của bảng công việc */
#tasksTable thead th,
#tasksTable tbody td {
    border: 1px solid #dee2e6;
}

#tasksTable {
    border-collapse: collapse;
}

.badge {
    font-weight: 500;
    padding: 0.4em 0.8em;
}

.action-buttons .btn {
    margin-right: 0.25rem;
}

.action-buttons .btn:last-child {
    margin-right: 0;
}

.edit-field {
    display: none;
    font-size: 0.8rem;
    /* font cho tất cả input/select khi sửa */
}

/* Tăng chiều cao ô ghi chú khi ở chế độ sửa */
.edit-field.edit-note {
    min-height: 10rem;
    /* chỉnh lớn/nhỏ tùy ý */
    font-size: 0.8rem;
    /* đồng bộ với các field khác, có thể đổi riêng nếu cần */
}

.task-title,
.task-description,
.task-status {
    cursor: default;
}

#noTasksRow i {
    opacity: 0.5;
}

/* Font cho bảng trong các modal (đặc biệt là modal lịch sử) */
.modal-body .table th,
.modal-body .table td {
    font-size: 0.875rem;
}

/* Tùy chỉnh riêng cho bảng trong modal lịch sử */
#historyModal .table th {
    font-size: 0.8rem;
    font-weight: 600;
    color: #343a40;
}

#historyModal .table td {
    font-size: 0.8rem;
    color: #495057;
}

/* Layout cho modal lịch sử khi nội dung rất dài */
#historyModal .modal-dialog {
    max-width: 95vw;
}

#historyModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

#historyModal .table-responsive {
    overflow-x: auto;
}

#historyModal .table {
    /* Cho phép bảng rộng hơn modal để scroll ngang khi cần */
    min-width: 1200px;
}

/* Tăng độ rộng 2 cột "Ghi chú cũ" và "Ghi chú mới" trong modal lịch sử
   lớn hơn khoảng 1.5 lần so với các cột còn lại */
#historyModal .table th:nth-child(6),
#historyModal .table td:nth-child(6),
#historyModal .table th:nth-child(7),
#historyModal .table td:nth-child(7) {
    width: 18%;
}

/* Hiển thị xuống dòng & bẻ từ cho các cột text dài trong modal lịch sử
   (tiêu đề cũ/mới, trạng thái cũ/mới, ghi chú cũ/mới) */
#historyTableBody td:nth-child(2),
#historyTableBody td:nth-child(3),
#historyTableBody td:nth-child(4),
#historyTableBody td:nth-child(5),
#historyTableBody td:nth-child(6),
#historyTableBody td:nth-child(7) {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .btn {
        margin-bottom: 0.25rem;
        margin-right: 0;
    }

    .save-cancel-buttons {
        flex-direction: column;
    }

    .save-cancel-buttons .btn {
        margin-bottom: 0.25rem;
        margin-right: 0;
    }
}

/* Màu sắc cho Priority (badge giống Status) */
.priority-aog {
    background-color: #dc3545;
    /* đỏ */
    color: #fff;
}

.priority-critical {
    background-color: #fd7e14;
    /* cam */
    color: #fff;
}

.priority-regular {
    background-color: #ffc107;
    /* vàng */
    color: #212529;
}

.priority-information {
    background-color: #c3e6cb;
    /* xanh lá nhạt */
    color: #155724;
}

/* Badge màu cho Status của Modification */
.status-open {
    background-color: #ffc107;
    /* vàng */
    color: #212529;
}

.status-pending {
    background-color: #fd7e14;
    /* cam */
    color: #fff;
}

.status-closed {
    background-color: #28a745;
    /* xanh lá */
    color: #fff;
}