/* input(4,1): run-time error CSS1019: Unexpected token, found '<'
input(53,1): run-time error CSS1019: Unexpected token, found '<'
input(53,2): run-time error CSS1019: Unexpected token, found '/' */
/* ==========================================================================
   1. SIDER BAR & MENU
   ========================================================================== */
<style >
/* 1. Đồng bộ khung hình (vị trí) cho cả link thường, hover và active */
.nav-sidebar .nav-link {
    padding-left: 0.5rem !important;
    display: flex;
    align-items: center;
    border-radius: 4px;
    /* Ép margin cố định để khung nền hover và active trùng khít nhau */
    margin: 2px 6px !important;
    transition: background-color 0.15s ease-in-out;
}

/* 2. Thụt lề đa cấp */
.nav-treeview {
    padding-left: 0.8rem !important;
    margin-left: 0 !important;
}

/* 3. CHỈ SET MÀU CHO TRẠNG THÁI ACTIVE */

/* Menu Cha đang được chọn (Xanh) */
.sidebar-menu > .nav-item > .nav-link.active {
    background-color: #007bff !important;
    color: #fff !important;
}

/* Menu Con đang được chọn (Ghi sáng) */
.nav-treeview .nav-item > .nav-link.active {
    background-color: #ebecec !important;
    color: #212529 !important;
}

/* 4. MÀU HOVER: Để mặc định của Bootstrap/AdminLTE */
/* Tao chỉ ép nó không được đè lên màu của thằng Active */
.nav-sidebar .nav-link:hover:not(.active) {
    /* Không set background-color ở đây để nó tự lấy mặc định của theme */
    /* Nếu mặc định của mày bị mất, có thể dùng: background-color: rgba(255,255,255,0.1); */
}

/* 5. Icon và Chữ */
.nav-icon-container {
    margin-right: 0.5rem !important;
    flex-shrink: 0;
}

.nav-link p {
    margin-bottom: 0;
}

</style >
/* ==========================================================================
   2. FORM & VALIDATION
   ========================================================================== */
/* Reset validation mặc định của Bootstrap để dùng HTMX/Manual validation */
.invalid-feedback {
    display: none;
}

.form-control:valid {
    border-color: #dee2e6;
    background-image: none;
}

/* Trạng thái Readonly/Disabled đồng bộ */
.form-control[readonly],
.form-select[disabled],
.form-control[disabled] {
    background-color: var(--bs-tertiary-bg);
    opacity: 1;
    cursor: not-allowed;
}

/* ==========================================================================
   3. MODAL & OVERLAYS
   ========================================================================== */
.modal-backdrop.show {
    opacity: 0.65;
}

.modal-header .btn-tool {
    font-size: 1.125rem;
    padding: 0.125rem 0.375rem;
}

.modal-footer {
    background-color: var(--bs-tertiary-bg);
}

/* Top border accents cho Modal */
.modal-outline-primary {
    border-top: 3px solid var(--bs-primary);
}

.modal-outline-success {
    border-top: 3px solid var(--bs-success);
}

.modal-outline-danger {
    border-top: 3px solid var(--bs-danger);
}

/* Progress Bar cho Modal load qua HTMX */
#modalProgressBar {
    height: 3px;
    width: 0;
    transition: width 0.4s ease-out;
    box-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.5);
    background-color: var(--bs-primary);
}

/* ==========================================================================
   4. SWEETALERT2 CUSTOMIZATION (AdminLTE Style)
   ========================================================================== */

.swal2-popup.admin-lte-confirm {
    width: 24rem;
    padding: 1.5rem;
    border-radius: var(--bs-border-radius);
    font-family: inherit;
}

.swal2-icon-small {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin: 0 auto 0.5rem !important;
}

.swal2-actions {
    margin-top: 1.5rem;
    gap: 0.5rem;
}

.swal2-actions .btn {
    min-width: 100px;
    padding: 0.4rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   5. UTILITIES
   ========================================================================== */
.table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* SVG Icon Helper */
.bi {
    display: inline-block;
    width: 1em;  /*Dùng em để tự scale theo cỡ chữ của nút */
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
     /*Không dùng margin-top âm nữa, dùng vertical-align chuẩn */
    vertical-align: -3px;
     /*Chống việc icon làm giãn dòng */
    line-height: 1;
}

/* Ghi đè cho các nút disabled trong AdminLTE 4 / Bootstrap 5 */
.btn:disabled,
.btn.disabled,
button:disabled {
    /* Quan trọng nhất: Cho phép chuột tương tác để hiện cursor */
    pointer-events: auto !important;
    /* Hiện biểu tượng cấm */
    cursor: not-allowed !important;
    /* Làm mờ nút để phân biệt */
    opacity: 0.65;
    /* Chặn mọi hiệu ứng đổ bóng hoặc đổi màu khi di chuột vào */
    box-shadow: none !important;
}

/* ===================================================
   TRẠNG THÁI HOVER & ACTIVE CHO DÒNG TRONG BẢNG 
=================================================== */

/* 1. Trạng thái bình thường: CHỈ tạo hiệu ứng mượt cho màu nền, CẤM transition trên box-shadow */
.table tbody tr td {
    transition: background-color 0.1s ease-in-out;
}

/* 2. HIỆU ỨNG DI CHUỘT (HOVER): Màu xanh siêu nhạt tinh tế */
.table tbody tr:hover td {
    background-color: #f2f7ff !important;
    box-shadow: inset 0 0 0 9999px #f2f7ff !important; /* Đè sọc xám mặc định của Bootstrap */
    cursor: pointer;
}

/* 3. HIỆU ỨNG ĐƯỢC CHỌN (ACTIVE): Màu nền xanh đậm hơn chút, giữ màu chữ gốc */
.table tbody tr.table-row-active td {
    background-color: #deebff !important;
    box-shadow: inset 0 0 0 9999px #deebff !important; /* Đè nền hover và nền bootstrap */
}

/* 4. KÍCH HOẠT VẠCH DỌC TRÁI (Xuất hiện tức thì, triệt tiêu hoàn toàn co rụt nhấp nháy) */
.table tbody tr.table-row-active td:first-child {
    /* Ghim cứng vạch xanh 4px ngay lập tức, không ăn theo transition */
    box-shadow: inset 4px 0 0 0 #0d6efd, inset 0 0 0 9999px #deebff !important;
    padding-left: 12px !important;
}

/* Khi hover vào dòng, cột chứa class text-primary-emphasis (Mã phiếu) đổi sang màu primary nhạt */
.table tbody tr:hover td.text-primary-emphasis {
    color: #0d6efd !important; /* Mã màu primary nhạt của Bootstrap 5 */
}