/* ============================================================================
   it-checklist.css — Giao diện module Checklist CNTT (IT)
   Theme navy #16345c / blue #2f6fb2, dựa theo mockup GUI.
   Toàn bộ class prefix "it-" để không đụng CSS toàn cục / MudBlazor / Radzen.
   ============================================================================ */
/* Biến màu để Ở :root — modal render NGOÀI .it-app vẫn dùng được */
:root {
    --it-navy: #16345c;
    --it-blue: #2f6fb2;
    --it-bg: #eef1f5;
    --it-line: #dde3ea;
    --it-green: #1e9e5a;
    --it-red: #d23f3f;
    --it-amber: #e0a800;
}

.it-app {
    color: #1f2733;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    /* Lấp đầy vùng body, tự cuộn bên trong + padding để không sát viền */
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 15px;
    background: var(--it-bg);
}

    .it-app * {
        box-sizing: border-box;
    }

    /* Tránh double padding-bottom (margin panel cuối + padding .it-app) */
    .it-app > *:last-child {
        margin-bottom: 0;
    }

/* ============================================================================
   Layout "fill": header/filter/footer cứng — vùng bảng chiếm height còn lại,
   dài hơn thì BẢNG cuộn (không cuộn cả view).
   .it-app.fill  = flex cột, không cuộn.
   .it-panel.it-grow = panel chứa bảng, giãn hết chỗ trống; bên trong:
       > h3 / .it-note / .it-kpi-row : cứng
       > .ctbl-scroll (TableCustom) : cuộn.
   ============================================================================ */
.it-app.fill {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .it-app.fill .it-panel.it-grow {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 0;
    }

        .it-app.fill .it-panel.it-grow > h3,
        .it-app.fill .it-panel.it-grow > .it-note,
        .it-app.fill .it-panel.it-grow > .it-kpi-row,
        .it-app.fill .it-panel.it-grow > .it-loading {
            flex: none;
        }

        .it-app.fill .it-panel.it-grow > .ctbl-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }

    /* Split 2 cột (Lịch sử phiên): cả khối chiếm height còn lại, mỗi panel bảng cuộn riêng */
    .it-app.fill > .it-split {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;
        align-items: stretch;
        flex-wrap: nowrap;
    }

        .it-app.fill > .it-split > .left,
        .it-app.fill > .it-split > .right {
            display: flex;
            flex-direction: column;
            min-height: 0;
            align-self: stretch;
        }

            .it-app.fill > .it-split .it-panel {
                flex: 1 1 auto;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                margin-bottom: 0;
            }

                .it-app.fill > .it-split .it-panel > h3 {
                    flex: none;
                }

                .it-app.fill > .it-split .it-panel > .ctbl-scroll {
                    flex: 1 1 auto;
                    min-height: 0;
                    overflow: auto;
                }

/* ---- Header trang ---- */
.it-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.it-head h1 {
    margin: 0;
    color: var(--it-navy);
    font-size: 20px;
    font-weight: 700;
}

.it-head .it-sub {
    font-size: 13px;
    color: #6b7a8a;
    margin-top: 3px;
}

/* ---- Cards KPI ---- */
.it-cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.it-card {
    background: #fff;
    border: 1px solid var(--it-line);
    border-radius: 10px;
    padding: 16px 18px;
    flex: 1;
    min-width: 160px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.it-card .it-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--it-navy);
    line-height: 1.1;
}

.it-card .it-lbl {
    font-size: 12.5px;
    color: #6b7a8a;
    margin-top: 4px;
}

.it-card.g .it-num {
    color: var(--it-green);
}

.it-card.r .it-num {
    color: var(--it-red);
}

.it-card.a .it-num {
    color: var(--it-amber);
}

/* ---- Panel ---- */
.it-panel {
    background: #fff;
    border: 1px solid var(--it-line);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.it-panel h3 {
    margin: 0 0 14px;
    color: var(--it-navy);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.it-panel h3 .it-spacer {
    flex: 1;
}

.it-panel h4 {
    color: var(--it-navy);
    margin: 18px 0 8px;
    font-size: 14px;
}

/* ---- Form ---- */
.it-frm {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.it-fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.it-fld label {
    font-size: 12px;
    color: #6b7a8a;
}

.it-fld select,
.it-fld input,
.it-fld textarea {
    padding: 7px 10px;
    border: 1px solid var(--it-line);
    border-radius: 6px;
    font-size: 13px;
    min-width: 140px;
    background: #fff;
    font-family: inherit;
}

.it-fld .it-readonly {
    padding: 7px 10px;
    font-size: 13px;
    color: #1f2733;
    background: #f4f6f9;
    border: 1px solid var(--it-line);
    border-radius: 6px;
    min-width: 200px;
}

/* ---- Button ---- */
.it-btn {
    background: var(--it-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

    .it-btn:hover {
        background: #27598f;
    }

    .it-btn:disabled {
        opacity: .55;
        cursor: default;
    }

    .it-btn.ghost {
        background: #fff;
        color: var(--it-blue);
        border: 1px solid var(--it-blue);
    }

        .it-btn.ghost:hover {
            background: #f2f7fc;
        }

    .it-btn.green {
        background: var(--it-green);
    }

        .it-btn.green:hover {
            background: #178048;
        }

    .it-btn.sm {
        padding: 4px 12px;
        font-size: 12px;
    }

/* Bảng: dùng component <TableCustom> (CSS ở table-custom.css) */

.it-chk {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ---- Pill / badge ---- */
.it-pill {
    display: inline-block;
    border-radius: 12px;
    padding: 1px 10px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.it-pill.dat {
    background: #e3f5ea;
    color: var(--it-green);
}

.it-pill.na {
    background: #eef1f5;
    color: #7a8a9a;
}

.it-pill.warn {
    background: #fde8c8;
    color: #9a6a00;
}

.it-pill.err {
    background: #fbe0e0;
    color: var(--it-red);
}

/* ---- Risk cell ---- */
.it-risk {
    display: inline-block;
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.it-risk.rc {
    background: #c00;
    color: #fff;
}

.it-risk.c {
    background: #e06666;
    color: #fff;
}

.it-risk.tb {
    background: #ffd966;
    color: #6b5a00;
}

.it-risk.t {
    background: #b6d7a8;
    color: #315425;
}

/* ---- Progress bar ---- */
.it-bar {
    height: 9px;
    background: #e6ebf1;
    border-radius: 6px;
    overflow: hidden;
    min-width: 120px;
    display: inline-block;
    vertical-align: middle;
}

    .it-bar > span {
        display: block;
        height: 100%;
        background: var(--it-green);
    }

.it-mini {
    font-size: 11px;
    color: #90a0b3;
    margin-left: 6px;
}

/* ---- Note ---- */
.it-note {
    background: #fffdf3;
    border: 1px solid #f0e2b8;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: #7a6a30;
    margin-top: 12px;
}

/* ---- Chart cột ---- */
.it-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 140px;
    padding: 20px 4px 22px;
    border-bottom: 2px solid var(--it-line);
}

    .it-chart .col {
        flex: 1;
        background: linear-gradient(var(--it-blue), #5b9bd5);
        border-radius: 4px 4px 0 0;
        position: relative;
        min-height: 2px;
    }

        .it-chart .col span {
            position: absolute;
            top: -18px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 11px;
            color: #5a6b7b;
        }

        .it-chart .col em {
            position: absolute;
            bottom: -20px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 11px;
            color: #90a0b3;
            font-style: normal;
        }

/* ---- Tag nhỏ ---- */
.it-tag {
    background: #eaf1f8;
    color: var(--it-blue);
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: 10px;
    font-weight: 600;
}

.it-kpi-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    font-size: 12.5px;
    color: #5a6b7b;
    flex-wrap: wrap;
    align-items: center;
}

    .it-kpi-row b {
        color: var(--it-navy);
    }

/* ---- Layout 2 cột (lịch sử) ---- */
.it-split {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .it-split .left {
        flex: 1 1 340px;
    }

    .it-split .right {
        flex: 2 1 460px;
    }

.it-row-click {
    cursor: pointer;
}

    .it-row-click.active td {
        background: #e8f0f9 !important;
    }

.it-empty {
    font-size: 13px;
    color: #90a0b3;
    padding: 14px 4px;
}

/* ---- Loading bar ---- */
.it-loading {
    height: 3px;
    background: linear-gradient(90deg, var(--it-blue), #8fbce8, var(--it-blue));
    background-size: 200% 100%;
    animation: it-load 1.1s linear infinite;
    border-radius: 3px;
    margin: 8px 0;
}

@keyframes it-load {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* Overlay loading phủ lên panel khi đang tải */
.it-panel {
    position: relative;
}

.it-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.66);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 5;
    font-size: 13px;
    color: #33475b;
    border-radius: 10px;
}

.it-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #dbe4ee;
    border-top-color: var(--it-blue);
    border-radius: 50%;
    animation: it-spin .8s linear infinite;
}

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

/* Nút icon thao tác (xem / tải / xóa …) */
.it-icobtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    margin-right: 5px;
}

    .it-icobtn:hover {
        filter: brightness(1.08);
    }

    .it-icobtn:last-child {
        margin-right: 0;
    }

/* ============================================================================
   Dialog / Modal (Rủi ro, Công việc phát sinh) — tự chứa, render NGOÀI .it-app
   ============================================================================ */
.it-modal-back {
    position: fixed;
    inset: 0;
    background: rgba(16, 28, 46, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1400;
    padding: 24px 16px;
    overflow: auto;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: #1f2733;
}

    .it-modal-back * {
        box-sizing: border-box;
    }

.it-modal {
    background: #fff;
    border-radius: 12px;
    width: 760px;
    max-width: 100%;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
    overflow: hidden;
    animation: it-modal-in .16s ease-out;
}

@keyframes it-modal-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.it-modal-head {
    background: var(--it-navy);
    color: #fff;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .it-modal-head .x {
        cursor: pointer;
        font-size: 22px;
        line-height: 1;
        opacity: .8;
        padding: 0 2px;
    }

        .it-modal-head .x:hover {
            opacity: 1;
        }

.it-modal-body {
    padding: 20px;
    max-height: calc(100vh - 220px);
    overflow: auto;
}

/* MudDialog wrapper (dùng IDialogService) — bỏ padding để markup tự chủ */
.it-dialog {
    overflow: hidden;
    border-radius: 12px !important;
}

    .it-dialog .mud-dialog-content {
        padding: 0;
        max-height: none;
        overflow: visible;
    }

    .it-dialog .mud-dialog-actions {
        margin: 0;
        padding: 14px 20px;
        border-top: 1px solid var(--it-line);
        background: #fafbfc;
        gap: 10px;
    }

/* Lưới field trong modal: 6 track.
   Mặc định .it-fld = span 3 (2 cột/hàng); .col3 = span 2 (3 cột/hàng); .full = cả hàng. */
.it-grid2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px 16px;
}

    .it-grid2 > .it-fld {
        grid-column: span 3;
    }

    .it-grid2 > .it-fld.col3 {
        grid-column: span 2;
    }

    .it-grid2 .full {
        grid-column: 1 / -1;
    }

    /* Field trong modal: label + control chiếm trọn ô lưới */
    .it-grid2 .it-fld {
        min-width: 0;
    }

        .it-grid2 .it-fld label {
            font-size: 12px;
            color: #6b7a8a;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .it-grid2 .it-fld input,
        .it-grid2 .it-fld select,
        .it-grid2 .it-fld textarea {
            width: 100%;
            min-width: 0;
            padding: 8px 10px;
            border: 1px solid var(--it-line);
            border-radius: 7px;
            font-size: 13px;
            font-family: inherit;
            background: #fff;
        }

            .it-grid2 .it-fld input:focus,
            .it-grid2 .it-fld select:focus,
            .it-grid2 .it-fld textarea:focus {
                outline: none;
                border-color: var(--it-blue);
                box-shadow: 0 0 0 3px rgba(47, 111, 178, .15);
            }

        .it-grid2 .it-fld textarea {
            resize: vertical;
            min-height: 42px;
        }

/* Ô hiển thị Điểm/Mức & người thực hiện (read-only) */
.it-scorebox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f4f6f9;
    border: 1px solid var(--it-line);
    border-radius: 7px;
    font-size: 13px;
    min-height: 39px;
}

    .it-scorebox b {
        font-size: 16px;
        color: var(--it-navy);
    }

.it-modal-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--it-line);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fafbfc;
}

/* ---- Tabs (dialog) ---- */
.it-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--it-line);
    margin-bottom: 14px;
}

.it-tab {
    background: none;
    border: none;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7a8a;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
}

    .it-tab:hover {
        color: var(--it-blue);
    }

    .it-tab.active {
        color: var(--it-blue);
        border-bottom-color: var(--it-blue);
    }