/* 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: 1600px;
    --engine-col-lessor-width: 4%;
    --engine-col-aircraft-registr-width: 5%;
    --engine-col-aircraft-msn-width: 4%;
    --engine-col-partnumber-width: 6%;
    --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-start-width: 7%;
    --engine-col-stagger-end-width: 7%;
    --engine-col-fc-limit-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: 10%;

    /* Độ 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-start-width);
}

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

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

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

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

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

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

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

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

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

#enginesTable thead th:nth-child(23),
#enginesTable tbody td:nth-child(23) {
    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;
}

/* Giữ header khi scroll dọc trong vùng dragdrop */
.engine-stagger-dragdrop-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    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: 40px;
    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: 4;
    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-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.25rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    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.dragging {
    opacity: 0.7;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.45);
}

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

.engine-stagger-block-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.1;
}

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

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

/* 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: 5;
}

.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;
}