.ecp-document {

        max-width: 720px;

        margin: 16px 0;

        background: #ffffff;

        border: 1px solid #e2e8f0;

        border-radius: 10px;

        overflow: hidden;

        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);

}

.ecp-document__row {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 16px;

        padding: 14px 18px;

}

.ecp-document__left {

        display: flex;

        align-items: center;

        gap: 10px;

        min-width: 0;

        flex: 1;

}

.ecp-document__icon {

        font-size: 20px;

        line-height: 1;

        flex-shrink: 0;

}

.ecp-document__title {

        font-size: 15px;

        font-weight: 600;

        color: #1e293b;

        line-height: 1.4;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        overflow-wrap: break-word;

        word-break: break-word;

        position: relative;

        cursor: pointer;

}

.ecp-document__title[data-overflow="true"]:hover::after {

        content: attr(data-title);

        position: absolute;

        bottom: calc(100% + 8px);

        left: 0;

        z-index: 100;

        width: max-content;

        max-width: min(340px, 80vw);

        padding: 8px 12px;

        background: #1e293b;

        color: #ffffff;

        font-size: 13px;

        font-weight: 400;

        line-height: 1.4;

        border-radius: 6px;

        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

        pointer-events: none;

        white-space: normal;

        overflow-wrap: break-word;

        word-break: break-word;

        animation: ecp-tooltip-fade 0.15s ease forwards;

}

@keyframes ecp-tooltip-fade {

        from {

                opacity: 0;

                transform: translateY(4px);

        }

        to {

                opacity: 1;

                transform: translateY(0);

        }

}

.ecp-document__right {

        display: flex;

        align-items: center;

        gap: 12px;

        flex-shrink: 0;

}

.ecp-document__sig-badge {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 26px;

        height: 26px;

        padding: 0;

        margin: 0;

        background: transparent;

        border: none;

        outline: none;

        line-height: 1;

        color: #2563eb;

        cursor: pointer;

        flex-shrink: 0;

        transition: color .2s ease, transform .2s ease;

}

.ecp-document__sig-badge:hover {

        color: #1d4ed8;

        transform: scale(1.1);

}

.ecp-document__sig-icon {

        display: block;

        width: 26px;

        height: 26px;

        margin: 0;

        padding: 0;

}

.ecp-document__size {

        font-size: 13px;

        font-weight: 500;

        color: #64748b;

}

.ecp-document__download-button {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        padding: 7px 16px;

        background: #2563eb;

        border: 1px solid #2563eb;

        border-radius: 6px;

        color: #ffffff;

        font-size: 13px;

        font-weight: 600;

        text-decoration: none;

        transition: all .2s ease;

}

.ecp-document__download-button:hover {

        background: #1d4ed8;

        border-color: #1d4ed8;

        color: #ffffff;

}

.ecp-document__download-button--sig {

        background: transparent;

        border: 1px solid #cbd5e1;

        color: #475569;

        font-weight: 500;

}

.ecp-document__download-button--sig:hover {

        background: #f1f5f9;

        border-color: #94a3b8;

        color: #1e293b;

}

/* Modal Window Styling */

.ecp-modal {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 99999;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 16px;

        opacity: 0;

        visibility: hidden;

        transition: opacity .2s ease, visibility .2s ease;

}

.ecp-modal.is-active {

        opacity: 1;

        visibility: visible;

}

.ecp-modal__overlay {

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: rgba(15, 23, 42, .6);

        backdrop-filter: blur(4px);

}

.ecp-modal__dialog {

        position: relative;

        width: 100%;

        max-width: 540px;

        background: #ffffff;

        border-radius: 16px;

        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);

        overflow: hidden;

        z-index: 1;

        transform: scale(.95);

        transition: transform .2s ease;

}

.ecp-modal.is-active .ecp-modal__dialog {

        transform: scale(1);

}

.ecp-modal__header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 18px 24px;

        background: #f8fafc;

        border-bottom: 1px solid #e2e8f0;

}

.ecp-modal__title-group {

        display: flex;

        align-items: center;

        gap: 10px;

}

.ecp-modal__icon {

        font-size: 20px;

}

.ecp-modal__title {

        margin: 0;

        font-size: 16px;

        font-weight: 700;

        color: #0f172a;

}

.ecp-modal__close {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 32px;

        height: 32px;

        background: transparent;

        border: none;

        border-radius: 8px;

        font-size: 24px;

        line-height: 1;

        color: #64748b;

        cursor: pointer;

        transition: background .2s, color .2s;

}

.ecp-modal__close:hover {

        background: #e2e8f0;

        color: #0f172a;

}

.ecp-modal__body {

        padding: 24px;

        display: flex;

        flex-direction: column;

        gap: 18px;

}

.ecp-modal__field {

        display: flex;

        flex-direction: column;

        gap: 4px;

}

.ecp-modal__field--org {

        padding-bottom: 14px;

        border-bottom: 1px solid #f1f5f9;

}

.ecp-modal__label {

        font-size: 11px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: .06em;

        color: #64748b;

}

.ecp-modal__value {

        font-size: 14px;

        font-weight: 500;

        color: #1e293b;

        line-height: 1.5;

        overflow-wrap: break-word;

        word-break: break-word;

}

.ecp-modal__value--org {

        font-size: 16px;

        font-weight: 700;

        color: #0f172a;

        line-height: 1.4;

        overflow-wrap: break-word;

        word-break: break-word;

}

.ecp-modal__value--highlight {

        font-size: 15px;

        font-weight: 600;

        color: #0f172a;

}

.ecp-modal__value--mono {

        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

        font-size: 13px;

        color: #334155;

        word-break: break-all;

}

@media (max-width: 640px) {

        .ecp-document__row {

                flex-direction: column;

                align-items: flex-start;

                gap: 12px;

        }

        .ecp-document__title {

                white-space: normal;

        }

        .ecp-document__right {

                width: 100%;

                justify-content: space-between;

        }

        .ecp-document__download-button {

                flex: 1;

                text-align: center;

        }

        .ecp-modal__dialog {

                border-radius: 12px;

        }

        .ecp-modal__header {

                padding: 16px 20px;

        }

        .ecp-modal__body {

                padding: 20px;

                gap: 14px;

        }

}