/* Màn ký hợp đồng: ký đơn (NLĐ/NSDLĐ), ký hàng loạt, ký qua link mail — HRMCON-1388/1391/1401.
   Nạp 1 lần trong Hrm.Web.Client/Components/App.razor. Mọi class gói trong nld-* / sp-* để không đè màn khác. */

    /* ===== Màn ký Người lao động (HRMCON-1388) — mọi rule gói trong .nld-* để không đè màn khác ===== */
    .nld-sign-modal .ant-modal-body {
        padding: 0;
    }

    .nld-sign {
        --nld-brand: #e8632a;
        --nld-brand-hover: #cf5117;
        --nld-brand-700: #a94011;
        --nld-brand-soft: #fdf0e9;
        --nld-brand-200: #f4b595;
        --nld-bg: #f5f6fa;
        --nld-hover: #eef0f6;
        --nld-border: #e5e8f0;
        --nld-border-strong: #d4d9e4;
        --nld-text: #141925;
        --nld-text-2: #5a6478;
        --nld-text-3: #3a4256;
        --nld-primary: #0248b7;
        --nld-primary-hover: #013a94;
        --nld-danger: #ff0000;
        --nld-danger-hover: #d90000;
        height: 85vh;
        width: 100%;
        display: flex;
        min-height: 0;
        background: var(--nld-bg);
        font-size: 13px;
        color: var(--nld-text);
    }

    /* --- vùng xem văn bản --- */
    .nld-viewer {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .nld-viewer-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        outline: none;
    }

    .nld-toolbar {
        height: 48px;
        flex-shrink: 0;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border-bottom: 1px solid var(--nld-border);
    }

    .nld-toolbar-file,
    .nld-toolbar-spacer {
        flex: 1;
        min-width: 0;
    }

    .nld-toolbar-file {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--nld-text-2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nld-group {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 3px;
        border: 1px solid var(--nld-border);
        border-radius: 7px;
    }

    /* viewer.js gán inline style (chữ trắng, nền đen, font 20px) cho các nút này — cần !important để ghi đè */
    .nld-toolbar #prev-page,
    .nld-toolbar #next-page,
    .nld-toolbar #zoom-in,
    .nld-toolbar #zoom-out {
        width: 26px;
        height: 26px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 5px;
        background: transparent !important;
        color: var(--nld-text-3) !important;
        font-size: 15px !important;
        line-height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .12s;
    }

        .nld-toolbar #prev-page:hover,
        .nld-toolbar #next-page:hover,
        .nld-toolbar #zoom-in:hover,
        .nld-toolbar #zoom-out:hover {
            background: var(--nld-hover) !important;
        }

    .nld-toolbar #page-number,
    .nld-toolbar #zoom-level,
    .nld-toolbar #total-pages {
        margin: 0 !important;
        background: transparent !important;
        color: var(--nld-text) !important;
        font-size: 12.5px;
        font-variant-numeric: tabular-nums;
    }

    .nld-toolbar #page-number {
        min-width: 32px;
        height: 24px;
        line-height: 22px;
        padding: 0 6px !important;
        text-align: center;
        border: 1px solid var(--nld-border-strong);
        border-radius: 5px;
    }

    .nld-toolbar #total-pages {
        color: var(--nld-text-2) !important;
        padding-right: 4px;
    }

    .nld-toolbar #zoom-level {
        min-width: 46px;
        text-align: center;
        font-weight: 500;
    }

    .nld-vsep {
        width: 1px;
        height: 20px;
        background: var(--nld-border);
    }

    .nld-icon-btn.ant-btn {
        color: var(--nld-text-3);
    }

    .nld-viewer-main {
        flex: 1;
        min-height: 0;
        display: flex;
    }

    .nld-viewer-main #viewer {
        flex: 1;
        min-width: 0;
        overflow: auto;
        padding: 20px 24px 40px;
        background: #282828;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .nld-viewer-main #thumbnail {
        order: -1;
        width: 148px;
        flex-shrink: 0;
        padding: 16px 0;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        border-right: 1px solid var(--nld-border);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

        .nld-viewer-main #thumbnail > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 6px !important;
        }

            .nld-viewer-main #thumbnail > div > div:first-child {
                border: 1px solid var(--nld-border-strong) !important;
                border-radius: 3px;
                background: #fff;
                cursor: pointer;
                overflow: hidden;
                transition: border-color .12s, box-shadow .12s;
            }

                .nld-viewer-main #thumbnail > div > div:first-child:hover {
                    border-color: var(--nld-brand) !important;
                    box-shadow: 0 0 0 3px rgba(232,99,42,.18);
                }

            .nld-viewer-main #thumbnail > div > div:last-child {
                color: var(--nld-text-2) !important;
                font-size: 11.5px !important;
            }

        .nld-viewer-main #viewer::-webkit-scrollbar,
        .nld-viewer-main #thumbnail::-webkit-scrollbar {
            width: 6px;
        }

        .nld-viewer-main #thumbnail::-webkit-scrollbar-thumb {
            background: var(--nld-border-strong);
            border-radius: 3px;
        }

        .nld-viewer-main #viewer::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,.25);
            border-radius: 3px;
        }

    .nld-viewer-main .page {
        box-shadow: 0 2px 6px rgba(16,24,40,.25), 0 4px 12px rgba(16,24,40,.2);
    }

    /* --- bảng bên phải --- */
    .nld-panel {
        width: 460px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-left: 1px solid var(--nld-border);
    }

    .nld-panel-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
    }

    .nld-sec {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        .nld-sec h2 {
            margin: 0;
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--nld-text-2);
        }

    /* RadioGroup dạng nút → trông như segmented tabs */
    .nld-tabs.ant-radio-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 3px;
        border-radius: 7px;
        background: var(--nld-hover);
    }

        .nld-tabs .ant-radio-button-wrapper {
            height: 30px;
            line-height: 28px;
            text-align: center;
            border: 0 !important;
            border-radius: 5px !important;
            background: transparent;
            color: var(--nld-text-2);
            font-weight: 500;
            box-shadow: none !important;
        }

            .nld-tabs .ant-radio-button-wrapper::before {
                display: none !important;
            }

            .nld-tabs .ant-radio-button-wrapper:hover {
                color: var(--nld-text);
            }

        .nld-tabs .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),
        .nld-tabs .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
            background: #fff !important;
            color: var(--nld-text) !important;
            font-weight: 600;
            box-shadow: 0 1px 2px rgba(16,24,40,.08) !important;
        }

        .nld-tabs .ant-radio-button-wrapper-disabled {
            background: transparent !important;
            color: #b4bac8 !important;
        }

    .nld-pane {
        position: relative;
        border-radius: 10px;
    }

    .nld-pane-default {
        min-height: 110px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--nld-border);
        background: var(--nld-bg);
    }

        .nld-pane-default img {
            width: 300px;
            max-width: 100%;
            height: auto;
            border: 1.5px solid #16a34a;
            border-radius: 5px;
            background: #fff;
        }

    .nld-stamp {
        width: 100%;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        border: 1.5px solid #16a34a;
        border-radius: 7px;
        background: #fff;
    }

    .nld-stamp-ic {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 999px;
        background: #e7f6ec;
        color: #128a3e;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nld-stamp small {
        display: block;
        font-size: 11.5px;
        color: var(--nld-text-2);
        line-height: 1.35;
    }

    .nld-stamp strong {
        display: block;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
    }

    .nld-info {
        margin: 0;
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        row-gap: 8px;
    }

        .nld-info dt {
            color: var(--nld-text-2);
            font-weight: 400;
        }

        .nld-info dd {
            margin: 0;
            word-break: break-word;
        }

    .nld-pane-draw {
        display: flex;
        justify-content: center;
        border: 1.5px dashed var(--nld-border-strong);
        background: #fff;
        overflow: hidden;
    }

        .nld-pane-draw canvas {
            display: block;
            cursor: crosshair;
            touch-action: none;
        }

    .nld-pane-clear.ant-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        color: var(--nld-danger);
    }

        .nld-pane-clear.ant-btn:hover,
        .nld-pane-clear.ant-btn:focus {
            color: var(--nld-danger-hover);
            border-color: var(--nld-danger-hover);
        }

    .nld-pane-upload {
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px dashed var(--nld-border-strong);
        background: #fff;
        transition: border-color .12s, background .12s;
    }

        .nld-pane-upload:hover {
            border-color: var(--nld-brand);
        }

    .nld-upload-empty {
        width: 100%;
        min-height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        color: var(--nld-text-3);
    }

        .nld-upload-empty:hover {
            background: var(--nld-brand-soft);
        }

    .nld-upload-hint {
        font-size: 11.5px;
        color: var(--nld-text-2);
    }

    .nld-link {
        color: var(--nld-brand-hover);
        font-weight: 500;
        cursor: pointer;
    }

        .nld-link:hover {
            color: var(--nld-brand-700);
            text-decoration: underline;
        }

    .nld-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--nld-border);
        border-radius: 7px;
    }

    .nld-opt-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .nld-opt-label {
        width: 110px;
        flex-shrink: 0;
        font-size: 12.5px;
        color: var(--nld-text-2);
    }

    .nld-opt-val {
        min-width: 24px;
        text-align: right;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .nld-colors .ant-radio-button-wrapper {
        display: inline-flex;
        align-items: center;
    }

    .nld-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        margin-right: 6px;
        vertical-align: middle;
    }

    .nld-options .ant-slider-track {
        background-color: var(--nld-brand);
    }

    .nld-options .ant-slider-handle {
        border-color: var(--nld-brand);
    }

    .nld-btn-soft.ant-btn {
        height: 36px;
        border-radius: 7px;
        border: 1px solid var(--nld-brand-200);
        background: var(--nld-brand-soft);
        color: var(--nld-brand-700);
        font-weight: 600;
    }

        .nld-btn-soft.ant-btn:hover,
        .nld-btn-soft.ant-btn:focus {
            border-color: var(--nld-brand-200);
            background: #fae3d6;
            color: var(--nld-brand-700);
        }

    /* Cảnh báo gọn 1 dòng — dùng chung cho màn ký đơn và ký hàng loạt */
    .nld-alert-sm.ant-alert,
    .nld-sec .nld-alert-sm.ant-alert {
        padding: 6px 10px;
        font-size: 12px;
        line-height: 1.45;
        border-radius: 7px;
    }

        .nld-alert-sm.ant-alert .ant-alert-icon {
            font-size: 13px;
            margin-right: 6px;
            align-self: flex-start;
            margin-top: 2px;
        }

        .nld-alert-sm.ant-alert .ant-alert-message {
            font-size: 12px;
            margin: 0;
        }

    .nld-panel-body > .nld-sec + .nld-sec {
        margin-top: 18px;
    }

    .nld-sec .ant-alert {
        border-radius: 7px;
        font-size: 12.5px;
    }

    .nld-panel-foot {
        flex-shrink: 0;
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-top: 1px solid var(--nld-border);
    }

    .nld-agree.ant-checkbox-wrapper {
        font-size: 12px;
        line-height: 1.45;
        color: var(--nld-text-3);
        align-items: flex-start;
    }

    .nld-foot-btns {
        display: flex;
        gap: 10px;
    }

    .nld-btn-primary.ant-btn,
    .nld-btn-danger.ant-btn {
        height: 38px;
        border: 0;
        border-radius: 7px;
        font-weight: 600;
    }

    .nld-foot-btns .nld-btn-primary.ant-btn {
        flex: 1;
    }

    .nld-btn-primary.ant-btn:not([disabled]) {
        background: var(--nld-primary, #0248b7);
        color: #fff;
    }

        .nld-btn-primary.ant-btn:not([disabled]):hover,
        .nld-btn-primary.ant-btn:not([disabled]):focus {
            background: var(--nld-primary-hover, #013a94);
            color: #fff;
        }

    .nld-btn-danger.ant-btn:not([disabled]) {
        background: var(--nld-danger, #ff0000);
        color: #fff;
    }

        .nld-btn-danger.ant-btn:not([disabled]):hover,
        .nld-btn-danger.ant-btn:not([disabled]):focus {
            background: var(--nld-danger-hover, #d90000);
            color: #fff;
        }

    .nld-btn-primary.ant-btn[disabled],
    .nld-btn-danger.ant-btn[disabled] {
        background: #eef0f6;
        color: #8b93a7;
    }

    /* --- nhánh xem iframe (chưa xác định người ký là NLĐ) --- */
    .nld-viewer-iframe {
        background: #282828;
    }

    .nld-iframe-box {
        flex: 1;
        position: relative;
        min-height: 0;
    }

    .nld-iframe-foot {
        flex-shrink: 0;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #fff;
        border-top: 1px solid #e5e8f0;
    }

        .nld-iframe-foot .ant-btn {
            min-width: 140px;
        }

    .nld-viewer-iframe > .nld-viewer {
        min-height: 0;
    }

    .nld-place-hint {
        margin-right: auto;
        font-size: 12.5px;
        color: #5a6478;
    }

    /* --- modal OTP --- */
    .nld-otp-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
        color: #3a4256;
    }

    .nld-otp-text {
        margin: 0;
    }

        .nld-otp-text b {
            display: block;
            color: #141925;
        }

    .nld-otp {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

        .nld-otp .otp-input {
            width: 44px;
            height: 44px;
            padding: 0;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            border: 1px solid #d4d9e4;
            border-radius: 7px;
            outline: none;
            transition: border-color .12s, box-shadow .12s;
        }

            .nld-otp .otp-input:focus {
                border-color: #e8632a;
                box-shadow: 0 0 0 3px rgba(232,99,42,.35);
            }

    .nld-otp-note {
        margin: 0;
        font-size: 12px;
        color: #8a5300;
    }

    .nld-otp-resend {
        display: flex;
        gap: 6px;
        justify-content: center;
        font-size: 12.5px;
    }

    .nld-countdown {
        color: #c2123a;
        font-variant-numeric: tabular-nums;
    }

    .nld-otp-body .nld-link {
        color: #cf5117;
    }

    /* --- modal từ chối --- */
    .nld-refuse {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .nld-refuse label {
            font-weight: 500;
            color: #141925;
        }

    .nld-required,
    .nld-error {
        color: #e11d48;
    }

    .nld-error {
        font-size: 12px;
    }

    .nld-hint {
        font-size: 12px;
        color: #5a6478;
    }

    .nld-modal-foot {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 16px;
    }

        .nld-modal-foot .nld-btn-danger.ant-btn {
            height: 32px;
        }

    @media (max-width: 1100px) {
        .nld-viewer-main #thumbnail {
            display: none;
        }
    }

    @media (max-width: 860px) {
        .nld-sign {
            height: auto;
            flex-direction: column;
        }

        .nld-viewer {
            height: 70vh;
        }

        .nld-panel {
            width: 100%;
            border-left: 0;
            border-top: 1px solid #e5e8f0;
        }

        .nld-toolbar-file {
            display: none;
        }
    }


/* ===== Ký hàng loạt NSDLĐ ===== */
    .nld-multi-sign .nld-viewer-main #thumbnail {
        display: none;
    }

    /* Loading khi chuyển chứng từ chỉ phủ vùng xem PDF, không phủ danh sách bên trái (HRMCON-1468) */
    .nld-viewer-spin {
        flex: 1;
        min-width: 0;
        min-height: 0;
    }

        .nld-viewer-spin > .ant-spin-nested-loading,
        .nld-viewer-spin .ant-spin-container,
        .nld-viewer-main .nld-viewer-spin #viewer {
            height: 100%;
        }

    .nld-clist {
        order: -2;
        width: 284px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: #fff;
        border-right: 1px solid #e5e8f0;
    }

    .nld-cl-h {
        height: 44px;
        flex-shrink: 0;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e5e8f0;
    }

    .nld-cl-title {
        font-size: 13px;
        font-weight: 600;
        color: #141925;
    }

    .nld-cl-count {
        font-size: 12px;
        color: #5a6478;
    }

    .nld-cl-items {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .nld-ci {
        padding: 10px;
        border-radius: 7px;
        border: 1px solid transparent;
        cursor: pointer;
        outline: none;
    }

        .nld-ci:hover {
            background: #eef0f6;
        }

        .nld-ci.cur {
            background: #f3f7fe;
            border-color: #c9d8f5;
        }

        .nld-ci b {
            display: block;
            font-size: 12.5px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .nld-ci small {
            display: block;
            font-size: 11.5px;
            color: #5a6478;
            font-family: "JetBrains Mono", Consolas, monospace;
        }

    .nld-panel-body .sl-inline {
        margin-bottom: 18px;
    }

    .nld-multi-sign .nld-panel-body .nld-sec + .nld-sec {
        margin-top: 18px;
    }

    @media (max-width: 1100px) {
        .nld-clist {
            width: 220px;
        }
    }


/* ===== Ký qua link mail (SendSignContract, HRMCON-1401) ===== */
.nld-link-page {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.nld-link-header {
    height: 56px;
    flex-shrink: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e8f0;
}

    .nld-link-header h1 {
        margin: 0;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: .01em;
        color: #141925;
        text-transform: uppercase;
    }

.nld-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

    .nld-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: currentColor;
    }

    .nld-badge.pending {
        background: #fef4e2;
        color: #8a5300;
    }

    .nld-badge.signed {
        background: #e7f6ec;
        color: #0f5f2c;
    }

    .nld-badge.rejected {
        background: #fce9ec;
        color: #c2123a;
    }

.nld-link-sign.nld-sign {
    height: calc(100vh - 160px);
    min-height: 560px;
}

.nld-doc-tabs.ant-radio-group .ant-radio-button-wrapper {
    height: 28px;
    line-height: 26px;
    font-size: 12.5px;
}

.nld-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 16px;
    border: 1px solid #e5e8f0;
    border-radius: 10px;
    background: #f5f6fa;
}

    .nld-done h3 {
        margin: 4px 0 0;
        font-size: 15px;
        font-weight: 600;
    }

.nld-done-ic {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nld-done.ok .nld-done-ic {
    background: #e7f6ec;
    color: #128a3e;
}

.nld-done.err .nld-done-ic {
    background: #fce9ec;
    color: #c2123a;
}

.nld-link-empty {
    padding: 48px 16px;
    background: #fff;
    border-radius: 10px;
}

@media (max-width: 860px) {
    .nld-link-sign.nld-sign {
        height: auto;
    }
}