/* =============================================================================
 * eco-module.css — giao diện chuẩn cho màn hình danh sách / form của mọi module
 * -----------------------------------------------------------------------------
 * Đi kèm assets/js/core/eco-crud.js. Nạp toàn cục ở _LayoutMaster.cshtml, SAU
 * assets/css/style.css và hrmcustom.css để ghi đè được, TRƯỚC @RenderSection("css")
 * để từng trang vẫn tinh chỉnh tiếp được.
 *
 * Nền tảng là Bootstrap 4.3.1 + theme Vuexy sẵn có — file này không thay thế
 * chúng, chỉ thống nhất những chỗ mỗi màn đang tự chế bằng inline style.
 * Icon dùng FontAwesome 4.7 (fa fa-...), KHÔNG dùng cú pháp FA5/6.
 *
 * Quy ước đặt tên: .eco-<khối>__<phần tử>--<biến thể>, trạng thái dùng .is-*
 * ========================================================================== */

:root {
    --eco-primary: #5a8dee;
    --eco-success: #39da8a;
    --eco-danger: #ff5b5c;
    --eco-warning: #fdac41;
    --eco-info: #00cfdd;
    --eco-muted: #8c9aae;
    --eco-border: #e4e7ed;
    --eco-bg-soft: #f7f8fa;
    --eco-text: #4e5155;
    --eco-radius: 6px;
    --eco-shadow: 0 2px 8px rgba(34, 41, 47, 0.10);
}

/* ===========================================================================
 * 1. Overlay chờ + spinner
 * Thay Loading.showex(): bản cũ phủ nền đen opacity 0.90 và hardcode
 * height:1970px nên màn dài bị hở đáy, màn ngắn sinh thanh cuộn thừa.
 * ======================================================================== */

.eco-overlay {
    position: fixed;
    inset: 0;
    z-index: 10600; /* trên modal Bootstrap (1050) và SweetAlert2 (1060) */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(34, 41, 47, 0.35);
    backdrop-filter: blur(1px);
}

    .eco-overlay.is-open {
        display: flex;
    }

.eco-overlay__box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #fff;
    border-radius: var(--eco-radius);
    box-shadow: var(--eco-shadow);
    font-weight: 500;
    color: var(--eco-text);
}

.eco-spinner {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid rgba(90, 141, 238, 0.25);
    border-top-color: var(--eco-primary);
    border-radius: 50%;
    animation: eco-spin 0.7s linear infinite;
}

@keyframes eco-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Người dùng bật "giảm chuyển động" thì không quay, chỉ nhấp nháy nhẹ */
@media (prefers-reduced-motion: reduce) {
    .eco-spinner {
        animation: none;
        border-top-color: var(--eco-primary);
        opacity: 0.7;
    }
}

/* ===========================================================================
 * 2. Toast — dùng cho thông báo THÀNH CÔNG
 * Trước đây mọi thông báo đều là modal SweetAlert2 phải bấm OK; xóa 5 dòng
 * là 5 lần bấm. Lỗi vẫn giữ modal vì cần người dùng đọc và xác nhận.
 * ======================================================================== */

.eco-toast-host {
    position: fixed;
    top: 76px; /* dưới thanh điều hướng nổi */
    right: 20px;
    z-index: 10700;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.eco-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 380px;
    padding: 11px 16px;
    border-radius: var(--eco-radius);
    border-left: 4px solid var(--eco-success);
    background: #fff;
    box-shadow: var(--eco-shadow);
    color: var(--eco-text);
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

    .eco-toast.is-open {
        opacity: 1;
        transform: translateX(0);
    }

    .eco-toast .fa {
        font-size: 16px;
        color: var(--eco-success);
    }

.eco-toast--error {
    border-left-color: var(--eco-danger);
}

    .eco-toast--error .fa {
        color: var(--eco-danger);
    }

.eco-toast--warning {
    border-left-color: var(--eco-warning);
}

    .eco-toast--warning .fa {
        color: var(--eco-warning);
    }

@media (max-width: 575.98px) {
    .eco-toast-host {
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
    }

    .eco-toast {
        min-width: 0;
        max-width: none;
    }
}

/* ===========================================================================
 * 3. Empty state / trạng thái lỗi trong bảng
 * Thay '<div class="box-pd col-sm-12 text-center">Chưa có dữ liệu</div>' —
 * class col-sm-* trong <td> làm ô co lại bất thường trên màn hẹp.
 * ======================================================================== */

.eco-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 16px;
    color: var(--eco-muted);
    font-size: 13px;
}

    .eco-empty .fa {
        font-size: 30px;
        opacity: 0.45;
    }

.eco-empty--error {
    color: var(--eco-danger);
}

    .eco-empty--error .fa {
        opacity: 0.7;
    }

/* ===========================================================================
 * 4. Thanh công cụ + bộ lọc
 * ======================================================================== */

.eco-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: var(--eco-bg-soft);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-radius);
}

.eco-toolbar__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Vùng bộ lọc phía trên bảng */
.eco-filters {
    margin-bottom: 4px;
}

    .eco-filters .form-group {
        margin-bottom: 8px;
    }

    .eco-filters label {
        font-size: 12px;
        font-weight: 600;
        color: var(--eco-muted);
        margin-bottom: 3px;
    }

@media (max-width: 767.98px) {
    .eco-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

        .eco-toolbar .btn,
        .eco-toolbar .dropdown,
        .eco-toolbar .btn-group {
            width: 100%;
        }

        .eco-toolbar .dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
        }
}

/* ===========================================================================
 * 5. Bảng dữ liệu
 * ======================================================================== */

/* Bọc bảng để cuộn ngang trên màn hẹp thay vì làm vỡ bố cục trang */
.eco-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

    .eco-table thead th {
        background-color: #dce3ff;
        font-size: 13px;
        font-weight: 600;
        color: #3b4a68;
        white-space: nowrap;
        border-bottom: 0;
        vertical-align: middle;
    }

    .eco-table td {
        font-size: 13px;
        vertical-align: middle;
    }

    .eco-table tbody tr {
        transition: background-color 0.12s ease;
    }

        .eco-table tbody tr:hover {
            background-color: #f4f7ff;
        }

        /* Dòng đang được tích chọn — tránh xóa nhầm khi thao tác hàng loạt */
        .eco-table tbody tr.is-selected {
            background-color: #eaf1ff;
            box-shadow: inset 3px 0 0 var(--eco-primary);
        }

    /* Cột số tiền: canh phải + chữ số đều nhau để so sánh theo cột */
    .eco-table .eco-col-money,
    .eco-table td.eco-col-money {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

    .eco-table .eco-col-center {
        text-align: center;
    }

    .eco-table .eco-col-nowrap {
        white-space: nowrap;
    }

/* Ô mã + nút hành động trên cùng một dòng.
   Thay `style="display:flex; justify-content:space-between"` gắn thẳng vào <td>
   trong các template — inline style làm <td> mất vertical-align của bảng. */
.eco-cell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Nút bánh răng mở menu thao tác trên từng dòng.
   Class .btn-row-action đang được dùng ở các view QTT nhưng CHƯA từng được
   định nghĩa trong bất kỳ file CSS nào — đây là định nghĩa còn thiếu. */
.btn-row-action,
.eco-row-action {
    padding: 2px 8px;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--eco-radius);
    background: transparent;
    color: var(--eco-muted);
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .btn-row-action:hover,
    .eco-row-action:hover,
    .btn-row-action:focus,
    .eco-row-action:focus {
        background-color: #e9eefb;
        color: var(--eco-primary);
    }

    /* Bootstrap 4 vẽ mũi tên ::after cho .dropdown-toggle — nút icon không cần */
    .btn-row-action.dropdown-toggle::after,
    .eco-row-action.dropdown-toggle::after {
        display: none;
    }

.eco-table .dropdown-menu {
    font-size: 13px;
    box-shadow: var(--eco-shadow);
}

    .eco-table .dropdown-menu .dropdown-item {
        padding: 7px 14px;
    }

        .eco-table .dropdown-menu .dropdown-item .fa {
            width: 16px;
            margin-right: 6px;
            text-align: center;
        }

        .eco-table .dropdown-menu .dropdown-item.text-danger:hover {
            background-color: #ffeceb;
        }

/* Checkbox chọn dòng.
   KHÔNG gộp chung với .hrmchk: class đó đang được dùng ở hầu hết module chưa chuyển và
   đã có định nghĩa riêng trong hrmcustom.css — style đè vào sẽ làm xê dịch giao diện của chúng. */
.eco-check {
    height: 15px;
    width: 15px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

/* ===========================================================================
 * 6. Badge trạng thái
 * Bootstrap 4: dùng `badge badge-success`, KHÔNG dùng `badge bg-success` (BS5).
 * ======================================================================== */

.eco-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.eco-badge--success {
    background: rgba(57, 218, 138, 0.14);
    color: #22a06b;
}

.eco-badge--danger {
    background: rgba(255, 91, 92, 0.14);
    color: #d63b3c;
}

.eco-badge--warning {
    background: rgba(253, 172, 65, 0.16);
    color: #c97f14;
}

.eco-badge--info {
    background: rgba(0, 207, 221, 0.14);
    color: #0a9aa5;
}

.eco-badge--primary {
    background: rgba(90, 141, 238, 0.14);
    color: #3f6fd0;
}

.eco-badge--muted {
    background: rgba(140, 154, 174, 0.16);
    color: #6b7a8f;
}

/* Chấm tròn trạng thái đứng trước chữ */
.eco-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}

/* Nút bật/tắt trạng thái ngay trên dòng (thay cặp icon xanh/đỏ 2x cũ) */
.eco-status-toggle {
    background: none;
    border: 0;
    padding: 2px 6px;
    border-radius: 12px;
    cursor: pointer;
}

    .eco-status-toggle:hover {
        background-color: #eef2f9;
    }

/* ===========================================================================
 * 7. Form trong popup
 * ======================================================================== */

/* Popup dùng chung #editPopup: giữ header luôn nhìn thấy, phần thân tự cuộn.
 *
 * Vì sao cần rule này (đã đo trên trình duyệt): markup ở _LayoutMaster khai
 * `modal-dialog-centered modal-dialog-scrollable`, nhưng hai chỗ trong CSS nền
 * làm hỏng cơ chế cuộn của Bootstrap:
 *   1. app-assets/css/bootstrap.css bị sửa tay — `.modal-dialog-scrollable` mất
 *      `max-height` (dòng trong @media chỉ còn lại một chuỗi chú thích hỏng).
 *   2. app-assets/css/bootstrap-extended.css của theme Vuexy đặt
 *      `.modal .modal-content { overflow: visible }`, đè lên `overflow: hidden`
 *      mà `.modal-dialog-scrollable .modal-content` cần để chặn chiều cao.
 * Cộng với `.modal-dialog-centered.modal-dialog-scrollable .modal-content
 * { max-height: none }`, form cao hơn màn hình sẽ nở hết cỡ rồi bị CĂN GIỮA:
 * phần dôi ra chia đều trên/dưới nên header và các ô đầu form nằm ở toạ độ ÂM,
 * cuộn xuống cũng không quay lại được. Đo ở 1280x800 với form thiết kế mẫu
 * email: modal-content cao 1467px, header ở top -309px.
 *
 * Không sửa thẳng bootstrap.css: vài trang (Administrator/Role, Plan/Project,
 * Asset/Report, Elib, Propose) đã tự chèn `height: auto !important` để né lỗi
 * này; trả max-height về cho .modal-dialog-scrollable sẽ làm các trang đó bị
 * cắt lại. Chặn ở .modal-content theo id nên thắng mọi rule trên, và các trang
 * kia cũng được cuộn đúng luôn. */
#editPopup .modal-dialog-scrollable {
    /* Khung ngoài phải trừ đúng phần margin của .modal-dialog: rule của theme cho
       height:100% (= cả chiều cao màn hình) rồi còn cộng margin 1.75rem trên/dưới
       nên hộp dôi ra ngoài viewport và header bị đẩy lên quá mép trên. */
    max-height: calc(100% - 1rem);
}

#editPopup .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}

#editPopup .modal-dialog-scrollable .modal-body {
    /* overflow-y: auto => flex item được phép co dưới kích thước nội dung
       (automatic minimum size = 0), nhờ vậy thân form cuộn thay vì bị cắt. */
    overflow-y: auto;
}

@media (min-width: 576px) {
    #editPopup .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem);
    }

    #editPopup .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 3.5rem);
    }
}

/* Áp cho form đã gắn class .eco-form.
   Cố tình KHÔNG nhắm vào #formEdit: id đó được MỌI module dùng cho form sửa, style đè
   vào sẽ đổi giao diện của tất cả màn chưa chuyển sang chuẩn này. */
.eco-form .form-group {
    margin-bottom: 12px;
}

.eco-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--eco-text);
    margin-bottom: 4px;
}

/* Ghi chú dưới ô nhập */
.eco-form .form-text,
.eco-form small.text-muted {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.45;
}

/* Thông báo lỗi validate. EcoForm.validate đặt errorClass 'eco-error', nhưng
   'error' vẫn được style vì các form chưa chuyển sang chuẩn mới (và bất kỳ form
   nào bị unobtrusive gắn validator trước) sẽ dùng class mặc định của thư viện. */
label.eco-error,
label.error,
.eco-error {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--eco-danger);
}

.form-control.is-invalid,
.is-invalid .select2-selection {
    border-color: var(--eco-danger);
}

/* Hàng nút của form sửa */
.eco-form-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--eco-border);
}

@media (max-width: 575.98px) {
    .eco-form-actions {
        flex-direction: column-reverse;
    }

        .eco-form-actions .btn {
            width: 100%;
            margin: 0;
        }
}

/* Dropdown select2 phải nổi trên modal.
   Đây là rule select2 DUY NHẤT để ở phạm vi toàn cục — nó chỉ đổi thứ tự xếp lớp,
   không đụng đến kích thước, nên không làm xê dịch giao diện của module chưa chuyển. */
.select2-container--open {
    z-index: 10650;
}

/* Bo góc cho khớp với các ô nhập xung quanh — CHỈ trong vùng đã chuẩn hoá.
   Cố tình KHÔNG ép chiều cao select2 ở phạm vi toàn cục: đã đo thực tế, mọi giá trị
   cố định đều lệch với .form-control của theme (37.39px) và làm xê dịch giao diện
   của toàn bộ module chưa chuyển sang chuẩn này. */
.eco-filters .select2-container--default .select2-selection--single,
#formEdit .select2-container--default .select2-selection--single,
.eco-form .select2-container--default .select2-selection--single {
    border-radius: var(--eco-radius);
}

/* ===========================================================================
 * 8. Phân trang
 * ======================================================================== */

#box-pager .pagination {
    margin-bottom: 0;
    flex-wrap: wrap;
}

#box-pager .page-item {
    cursor: pointer;
}

#box-pager .page-link {
    font-size: 13px;
    padding: 5px 11px;
}

@media (max-width: 575.98px) {
    #box-pager .pagination {
        float: none !important;
        justify-content: center;
    }
}

/* ===========================================================================
 * 9. Thẻ card của trang danh sách
 * ======================================================================== */

.eco-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
}

.eco-card .card-title {
    margin-bottom: 0;
    font-size: 16px;
}

@media (max-width: 575.98px) {
    .eco-card .card-header {
        flex-direction: column;
        align-items: stretch;
    }

        .eco-card .card-header .btn {
            width: 100%;
        }
}