/* Global Utilities - kept global but could be prefixed if strictly necessary */
.docusign-flow .mb-20 { margin-bottom: 20px; }
.docusign-flow .mt-30 { margin-top: 30px; }
.docusign-flow .mt-20 { margin-top: 20px; }
.docusign-flow .mt-10 { margin-top: 10px; }
.docusign-flow .mb-15 { margin-bottom: 15px; }
.docusign-flow .ml-15 { margin-left: 15px; }
.docusign-flow .ml-10 { margin-left: 10px; }

/* DocuSign Integration Styles - Restricted to .docusign-flow parent */

.docusign-flow .section-title { 
    font-weight: 600; 
    font-size: 16px; 
    margin-bottom: 20px; 
    color: #333; 
    border-left: 3px solid #CDB06B; 
    padding-left: 10px; 
    line-height: 1.2; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

/* Shared Gold Button Design System */
.docusign-flow .btn-emerald,
.docusign-flow .btn-docusign-accent,
.docusign-flow #recipientModal .btn-emerald { 
    background-color: #CDB06B !important; 
    color: #1a1a1a !important; 
    border: none !important; 
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.docusign-flow .btn-emerald:hover,
.docusign-flow .btn-docusign-accent:hover,
.docusign-flow #recipientModal .btn-emerald:hover { 
    background-color: #bfa35d !important;
    transform: translateY(-1px);
    color: #000 !important;
    text-decoration: none;
}

.docusign-flow .btn-emerald:disabled,
.docusign-flow .btn-docusign-accent:disabled {
    background-color: #a88c42 !important; 
    color: #1a1a1a !important; 
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

/* Design Variations */
.docusign-flow .btn-emerald {
    padding: 8px 20px; 
    border-radius: 6px; 
    font-size: 13px; 
}

.docusign-flow .btn-docusign-accent {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0;
}

.docusign-flow .loading-icon {
    animation: docusignSpin 1s linear infinite;
}

.docusign-flow .tracking-table-container { 
    border: 1px solid #dee2e6; 
    border-radius: 4px; 
    background: #fff; 
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 20px;
    display: block;
}

.docusign-flow .custom-table { 
    width: 100%; 
    margin-bottom: 0; 
    background-color: #fff; 
    border-collapse: collapse; 
}

.docusign-flow .custom-table th { 
    white-space: nowrap !important; 
    background: #f8fafc; 
    color: #64748b; 
    font-weight: 600; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    padding: 12px 10px; 
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.docusign-flow .custom-table td { 
    white-space: normal !important; 
    word-wrap: break-word; 
    padding: 10px; 
    font-size: 13px; 
    color: #475569;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.docusign-flow .external-docs-scroll { 
    max-height: 280px; 
    overflow-y: auto; 
    overflow-x: auto; 
}

.docusign-flow .external-docs-scroll thead th { 
    position: sticky; 
    top: -1px; 
    z-index: 10; 
    background: #f8fafc; 
    border-bottom: 1px solid #e2e8f0; 
}

.docusign-flow .action-btns-container { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
    align-items: stretch; 
}

.docusign-flow .action-btns-container .btn { 
    margin: 0 !important; 
}

.docusign-flow .other-docs-box {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 20px;
    background: #fff;
}

.docusign-flow .other-doc-row { 
    padding: 12px; 
    border: 1px solid #e9ecef; 
    border-radius: 4px; 
    background: #fff; 
    margin-bottom: 10px;
    position: relative;
}

.docusign-flow .other-doc-row:last-child { 
    margin-bottom: 0; 
}

.docusign-flow .btnRemoveOtherDoc {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #dc3545;
    border-left: 1px solid #ddd;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    padding: 0;
    border: none;
}

.docusign-flow .btnRemoveOtherDoc:hover { 
    background: #e0e0e0; 
    color: #a71d2a; 
    text-decoration: none; 
}

.docusign-flow .action-btns { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    flex-wrap: nowrap; 
}

.docusign-flow .action-btns .btn { 
    margin: 0; 
}

.docusign-flow .action-btns i.fa-eye { 
    font-size: 15px; 
    cursor: pointer; 
}

/* Premium Loader Styles */
@keyframes docusignSpin { to { transform: rotate(360deg); } }
@keyframes docusignFadeIn { from { opacity: 0; } to { opacity: 1; } }

.docusign-flow .premium-loader {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(205, 176, 107, 0.2);
    border-radius: 50%;
    border-top-color: #CDB06B;
    animation: docusignSpin 0.8s linear infinite;
}

.docusign-flow .loader-wrapper {
    padding: 30px 0;
    text-align: center;
    animation: docusignFadeIn 0.3s ease-in;
}

.docusign-flow .loader-text {
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

/* Recipient Modal Specifics (Scoped to .docusign-flow) */
.docusign-flow .recipient-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}

.docusign-flow .recipient-item:last-child { 
    border-bottom: none; 
}

.docusign-flow .recipient-item:hover { 
    background: #fdfcf8; 
}

.docusign-flow .recipient-item .custom-checkbox { 
    width: 100%; 
    display: flex; 
    align-items: center; 
}

.docusign-flow .recipient-item label { 
    margin-left: 10px; 
    margin-bottom: 0; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 500; 
    color: #334155;
    flex: 1;
}

.docusign-flow .recipient-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.docusign-flow .block-signed { display: none; }

/* Icons */
/* Custom Spinner for fa-circle-o-notch when Font Awesome fails or is not supported */
.fa-circle-o-notch {
    display: inline-block !important;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(205, 176, 107, 0.2) !important;
    border-top-color: currentColor !important;
    border-radius: 50% !important;
    animation: docusignSpin 0.8s linear infinite !important;
    text-indent: -9999px;
    vertical-align: middle;
    box-sizing: border-box;
    position: relative;
}

.fa-circle-o-notch::before {
    display: none !important;
}

.fa-circle-o-notch.fa-2x {
    width: 2em;
    height: 2em;
    border-width: 3px;
}

.fa-circle-o-notch.fa-3x {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

/* Icons */
.docusign-flow .fa-circle-o-notch:before {content: "\f1ce"}


/* Responsiveness (also scoped) */
@media (max-width: 991px) {
    .docusign-flow .action-btns-container { flex-direction: column; }
    .docusign-flow .action-btns-container .btn { width: 100%; margin-bottom: 5px !important; }
    .docusign-flow .action-btns-container .btn:last-child { margin-bottom: 0 !important; }
}

@media (max-width: 768px) {
    .docusign-flow .other-docs-box { padding: 15px; }
    .docusign-flow .section-title { font-size: 14px; }
    .docusign-flow .custom-table { min-width: 600px; }
    .docusign-flow .history-table { min-width: 1000px; }
    .docusign-flow .signing-table { min-width: 600px; }
}

@media (max-width: 576px) {
    .docusign-flow .custom-table { min-width: 500px; }
    .docusign-flow .btn-emerald { font-size: 12px; padding: 10px 15px; }
}

/* Status Text Utilities */
.docusign-flow .text-danger { color: #dc3545 !important; }
.docusign-flow .text-success { color: #02a249 !important; }
.docusign-flow .text-warning { color: #ffc107 !important; }
.docusign-flow .text-info { color: #17a2b8 !important; }

/* Status Labels Custom overrides if needed */
.docusign-flow .label-danger { background-color: #dc3545; }
.docusign-flow .label-success { background-color: #02a249; }
.docusign-flow .label-warning { background-color: #f7b924; color: #fff; }
.docusign-flow .label-info { background-color: #17a2b8; }
.docusign-flow .label-default { background-color: #6c757d; }