.du-upload-form-container {
    position: relative;
}

.du-upload-form-toggle {
    background-color: #0073aa;
    color: #fff;
    padding: 8px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.du-upload-form-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.du-upload-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 3px;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

.form-group {
    margin-bottom: 16px;
}

.du-upload-header {
	margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.du-upload-header h3 {
    margin: 0;
    font-size: 24px;
}

.form-group:last-child {
margin-bottom: 0;
}

.du-delete-file {
    margin-left:10px;
    /* Add other necessary styles */
}


.form-group label {
display: block;
margin-bottom: 8px;
}

.du-message {
    padding: 10px;
    margin-bottom: 15px;
}

.du-message.success {
    background-color: #dff0d8;
    color: #3c763d;
}

.du-message.error {
    background-color: #f2dede;
    color: #a94442;
}


.form-group input[type="text"],
.form-group input[type="date"],
.form-group select,
.form-group input[type="file"] {
width: 100%;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-group input[type="radio"] {
margin-left: 8px;
}

/* Multi-file upload styles */
.du-files-preview {
    margin-top: 20px;
}

.du-file-container {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 20px;
    background: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
}

.du-file-container:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.du-file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e5e9;
}

.du-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.du-file-info i {
    font-size: 24px;
    color: #6c757d;
}

.du-file-name {
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
}

.du-file-meta {
    font-size: 12px;
    color: #6c757d;
}

.du-remove-file {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.du-remove-file:hover {
    background: #c82333;
    transform: scale(1.1);
}

.du-file-metadata {
    padding: 20px;
    background: #fff;
}

.du-file-metadata .du-field {
    margin-bottom: 15px;
}

.du-file-metadata .du-field:last-child {
    margin-bottom: 0;
}

.du-duplicate-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 15px;
    margin-top: 15px;
}

.du-warning-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

.du-warning-content i {
    color: #856404;
    font-size: 18px;
    flex-shrink: 0;
}

.du-warning-content span {
    color: #856404;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.du-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

.du-checkbox input[type="checkbox"] {
    display: none;
}

.du-checkbox-mark {
    width: 20px;
    height: 20px;
    border: 2px solid #856404;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.du-checkbox input[type="checkbox"]:checked + .du-checkbox-mark {
    background: #856404;
}

.du-checkbox input[type="checkbox"]:checked + .du-checkbox-mark::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.du-checkbox span:last-child {
    font-size: 14px;
    color: #856404;
    font-weight: 500;
    white-space: nowrap;
}

.du-instructions {
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin: 0;
    border-left: 4px solid #667eea;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.du-instructions p {
    margin-bottom: 0;
    color: #495057;
    line-height: 1.4;
    font-size: 13px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.du-instructions p:before {
    content: "•";
    color: #667eea;
    font-weight: bold;
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.du-instructions strong {
    color: #212529;
    font-weight: 600;
}

/* Enhanced dropzone for multiple files */
.du-dropzone {
    border: 3px dashed #dee2e6;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.du-dropzone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.du-dropzone.active-drop {
    border-color: #007bff;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.du-dropzone.active-drop::before {
    opacity: 1;
}

.du-dropzone {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.du-dropzone-content {
    text-align: center;
    padding: 30px 20px;
    position: relative;
    z-index: 2;
    max-width: 100%;
}

.du-dropzone-icon {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.du-dropzone-text {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
}

.du-dropzone-text strong {
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.du-link {
    color: #ffd700;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
    transition: all 0.2s ease;
}

.du-link:hover {
    color: #ffed4e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.du-meta {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 12px;
    font-weight: 400;
}

/* Add more files button */
.du-add-more-container {
    text-align: center;
    margin: 20px 0;
}

.du-add-more-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.du-add-more-btn:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.du-add-more-btn i {
    font-size: 12px;
}

/* Modern card styling for the modal */
.du-modern .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.du-modern .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 20px 30px;
}

.du-modern .modal-header .modal-title {
    font-weight: 600;
    font-size: 20px;
}

.du-modern .modal-body {
    padding: 30px;
    background: #f8f9fa;
}

.du-modern .du-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.du-modern .du-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.du-modern .du-card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px 25px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.du-modern .du-card-header i {
    color: #667eea;
    font-size: 18px;
}

.du-modern .du-card-header h6 {
    margin: 0;
    font-weight: 600;
    color: #495057;
    font-size: 16px;
}

.du-modern .du-field {
    padding: 0 25px 20px;
}

.du-modern .du-field:last-child {
    padding-bottom: 25px;
}

.du-modern .du-label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 14px;
}

.du-modern .du-input,
.du-modern .du-chip-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.du-modern .du-input:focus,
.du-modern .du-chip-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.du-modern .du-help {
    font-size: 12px;
    color: #6c757d;
    margin-top: 6px;
    line-height: 1.4;
}

.du-modern .du-required {
    color: #dc3545;
}

.du-modern .du-optional {
    color: #6c757d;
    font-weight: 400;
}

/* Enhanced button styling */
.du-modern .du-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    padding: 14px 30px;
    font-weight: 600;
    font-size: 16px;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.du-modern .du-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.du-modern .du-btn:disabled {
    background: #6c757d;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.du-modern .du-btn.processing {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.du-modern .du-btn-icon {
    font-size: 18px;
}

/* Progress bar styling */
.du-modern .du-progress {
    background: #e9ecef;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    margin: 15px 0;
}

.du-modern .du-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 10px;
    transition: width 0.3s ease;
}


/* Privacy notice styling */
.du-modern .du-privacy {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    padding: 15px 20px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #495057;
    font-size: 14px;
}

.du-modern .du-privacy i {
    color: #667eea;
    font-size: 16px;
}

/* Status group styling */
.du-modern .du-status-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.du-modern .du-status {
    cursor: pointer;
    flex: 1;
}

.du-modern .du-status input[type="radio"] {
    display: none;
}

.du-modern .du-status-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.du-modern .du-status-pill.du-pass {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border-color: rgba(40, 167, 69, 0.2);
}

.du-modern .du-status-pill.du-fail {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.2);
}

.du-modern .du-status-pill.du-na {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    border-color: rgba(108, 117, 125, 0.2);
}

.du-modern .du-status input[type="radio"]:checked + .du-status-pill {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: scale(1.05);
}

/* Responsive design */
@media (max-width: 768px) {
    .du-modern .modal-body {
        padding: 20px;
    }
    
    .du-modern .du-grid {
        gap: 15px;
    }
    
    .du-instructions {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }
    
    .du-dropzone {
        min-height: 180px;
    }
    
    .du-dropzone-content {
        padding: 20px 15px;
    }
    
    .du-dropzone-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }
    
    .du-dropzone-text strong {
        font-size: 18px;
    }
    
    .du-modern .du-status-group {
        flex-direction: column;
    }
}

/* Modal shell styles now provided by cls-modal.css */

.du-upload-progress-container {
    width: 100%;
    height: 20px;
    background-color: #f1f1f1;
    margin-bottom: 10px;
}

.du-upload-progress-bar {
    height: 100%;
    background-color: #4caf50;
    width: 0%;
}

.file-animation {
    opacity: 0;
    transform: translateY(50px);
    animation: file-animation 0.5s ease-in-out forwards;
}

@keyframes file-animation {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* .du-modal-close removed — dead code */


.radio-group {
display: inline-flex;
align-items: center;
}

.radio-group label {
margin-right: 8px;
}

.form-group button[type="submit"] {
background-color: #0073aa;
color: #fff;
padding: 8px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 3px;
transition: background-color 0.3s;
}

.form-group button[type="submit"]:hover {
background-color: #0085ba;
}

/* Rename functionality styles */
.file-action.rename-file {
    color: #0073aa;
    cursor: pointer;
    margin-right: 8px;
}

.file-action.rename-file:hover {
    color: #005a87;
}

/* ===================================
   AI Processing Status Styles
   =================================== */

.du-ai-processing-container {
    margin-top: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.du-ai-processing-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.du-ai-processing-header i {
    font-size: 24px;
    color: #667eea;
}

.du-ai-processing-header h6 {
    margin: 0;
    font-weight: 600;
    color: #1e293b;
}

.du-ai-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.du-ai-file-item:last-child {
    margin-bottom: 0;
}

.du-ai-file-item.processing {
    border-left: 3px solid #3b82f6;
}

.du-ai-file-item.complete {
    border-left: 3px solid #22c55e;
}

.du-ai-file-item.error {
    border-left: 3px solid #ef4444;
}

.du-ai-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.du-ai-file-icon {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.du-ai-file-name {
    font-weight: 500;
    color: #1e293b;
}

.du-ai-file-status {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.du-ai-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.du-ai-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.du-ai-status-badge.processing {
    background: #dbeafe;
    color: #1e40af;
}

.du-ai-status-badge.complete {
    background: #dcfce7;
    color: #166534;
}

.du-ai-status-badge.error {
    background: #fee2e2;
    color: #991b1b;
}

.du-ai-spinner-small {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Upload complete summary */
.du-upload-summary {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}

.du-upload-summary-icon {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.du-upload-summary-icon i {
    font-size: 28px;
    color: #22c55e;
}

.du-upload-summary h5 {
    color: #166534;
    margin-bottom: 8px;
}

.du-upload-summary p {
    color: #4b5563;
    margin: 0;
    font-size: 14px;
}

/* AI Extracted Data Display */
.du-ai-extracted-data {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.du-ai-extracted-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4b5563;
    background: #f8fafc;
    padding: 6px 10px;
    border-radius: 6px;
}

.du-ai-extracted-field i {
    color: #3b82f6;
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.du-ai-field-label {
    color: #6b7280;
    font-weight: 500;
}

.du-ai-field-value {
    color: #1f2937;
    font-weight: 600;
}

/* COI Badge inline */
.du-ai-file-status .du-coi-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

.du-ai-file-status .du-coi-badge i {
    font-size: 9px;
}

/* Improved file item for extracted data */
.du-ai-file-item.complete {
    flex-direction: column;
    align-items: stretch;
}

.du-ai-file-item.complete > .du-ai-file-info,
.du-ai-file-item.complete > .du-ai-status-badge {
    /* Keep original layout for header */
}

.du-ai-file-item.complete .du-ai-file-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Post-upload "what happens next" guidance */
.du-next-steps {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid #10b981;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0 4px;
}
.du-next-steps__title {
    font-weight: 700;
    color: #065f46;
    font-size: 14px;
    margin-bottom: 5px;
}
.du-next-steps__title i {
    margin-right: 6px;
}
/* The summary message is emitted as <div class="du-next-steps__msg">, not a <p>.
   Only `.du-next-steps p` was styled, so the message inherited no colour at all and
   rendered near-invisible on the pale green panel. Both selectors are covered now. */
.du-next-steps p,
.du-next-steps__msg {
    margin: 0;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.55;
}

/* Outcome variants. The panel used to be green whatever happened — including when
   every file had been rejected and nothing was stored. */
.du-next-steps--warn {
    background: #fffbeb;
    border-color: #fde68a;
    border-left-color: #f59e0b;
}
.du-next-steps--warn .du-next-steps__title {
    color: #92400e;
}

.du-next-steps--error {
    background: #fef2f2;
    border-color: #fecaca;
    border-left-color: #dc2626;
}
.du-next-steps--error .du-next-steps__title {
    color: #991b1b;
}
/* ---- Empty state: a property with nothing filed yet ------------------------
 * Shipped without styles at first, so the heading inherited the page's h3 and turned a quiet
 * "nothing here yet" into the loudest thing on the screen. It should read as a calm, deliberate
 * state — the first thing a new customer sees — not as an error and not as a headline.
 */
.du-empty-state {
    max-width: 44ch;
    margin: 28px auto 34px;
    padding: 30px 28px;
    text-align: center;
    border: 1px dashed #cfdce3;
    border-radius: 10px;
    background: #fbfdfe;
}

.du-empty-state__title {
    /* Deliberately NOT heading-sized: this is a status, not a section title. */
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #274d5e;
    letter-spacing: 0;
}

.du-empty-state__lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #6b8794;
}

.du-empty-state__action {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #0f607c;
}

@media (max-width: 640px) {
    .du-empty-state { margin: 20px 12px 26px; padding: 24px 20px; }
}

/* ============================================================
   Post-upload extraction card

   The fields read off a document, landing one at a time. This is the one moment
   where a customer can see that the dates and the vendor came OFF their file
   rather than out of a form — so it is given room to be looked at rather than
   compressed into the status line it replaced.

   Values come from du_dragdrop_process(); only the stagger is presentational.
   ============================================================ */
.du-feed-fields {
    display: grid;
    gap: 4px;
    margin: 8px 0 2px;
    padding: 10px 12px;
    border: 1px solid #d8e6ec;
    border-radius: 8px;
    background: #f7fcfd;
}

.du-feed-field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    line-height: 1.45;
    animation: du-feed-field-in 260ms cubic-bezier(.22,.68,.36,1) both;
}

.du-feed-field-label {
    color: #6b8794;
    flex: 0 1 auto;
    min-width: 0;
}

.du-feed-field-value {
    color: #12455a;
    font-weight: 600;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

@keyframes du-feed-field-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .du-feed-field { animation: none !important; }
}

/* ============================================================
   Select-files mode

   The checkboxes fade and slide in rather than appearing between frames, so
   entering the mode reads as a change of state instead of a page redraw. The
   stagger is by row, which makes the direction of travel legible down the list.
   ============================================================ */
.file-checkbox-container {
    transition: opacity 180ms ease, transform 180ms ease;
}

.file-checkbox-container.du-cb-enter {
    opacity: 0;
    transform: translateX(-6px);
}

/* A short cascade down the first rows — enough to read as a sweep, not a queue. */
.file-item:nth-child(1)  .file-checkbox-container { transition-delay: 0ms; }
.file-item:nth-child(2)  .file-checkbox-container { transition-delay: 25ms; }
.file-item:nth-child(3)  .file-checkbox-container { transition-delay: 50ms; }
.file-item:nth-child(4)  .file-checkbox-container { transition-delay: 75ms; }
.file-item:nth-child(5)  .file-checkbox-container { transition-delay: 100ms; }
.file-item:nth-child(n+6) .file-checkbox-container { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
    .file-checkbox-container,
    .file-checkbox-container.du-cb-enter {
        transition: none !important;
        transform: none !important;
        opacity: 1;
    }
}

/* ==========================================================================================
   THE BINDER CONTROLS — Select Files / Export Full Binder / Joint Commission / Exit Binder
   (house style, 2026-09-20)

   These four sat in three different visual languages: a hand-built pill, the Execoore theme's
   .btn-primary slab, the same slab with an inline colour override, and a dashed pill. Read
   together they looked like four features built by four people, which is what they were.

   They are one control group now, in the language the portfolio home established
   (cls-portfolio-home/assets/css/ph.css): 38px tall, 9px radius, a #dbe4ea hairline, Montserrat,
   teal #0f607c. Export Full Binder is the filled one because it is the action this row exists
   for; the other three are the quiet white half of the same pair.

   >>> FOCUS IS AN OUTLINE, NOT A SHADOW. <<<
   A box-shadow ring is painted as a background effect, and Windows high-contrast mode removes
   backgrounds — so a shadow-only focus state disappears for exactly the users who most need to
   see where they are. outline survives it.

   IDs, because skin.css sets #exportPDF and #selectFiles geometry and Bootstrap's .btn-primary
   sets the colours being replaced.
   ========================================================================================== */

#selectFiles.select-button,
#selectFiles,
#exportPDF.export-button,
#exportPDF,
#exportJCBinder.export-button,
#exportJCBinder,
#exportExitBinder.exit-binder-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* skin.css gives #exportPDF flex-wrap:wrap + align-content:flex-end. Wrapping makes it a
       multi-line flex box, so align-content wins over align-items and packs the icon and label
       to the BOTTOM of the button. One line, centred. */
    flex-wrap: nowrap;
    align-content: center;
    white-space: nowrap;
    gap: 8px;
    /* Bootstrap's .btn padding is added to the height unless the box is a border-box, which is why
       Export Full Binder stood 10px taller than its neighbours; vertical-align settles the baseline
       the three of them sit on when the container is not itself a flex row. */
    box-sizing: border-box;
    vertical-align: middle;
    height: 38px;
    min-height: 38px;
    margin: 20px 0 0;
    padding: 0 14px;
    border: 1px solid #dbe4ea;
    border-radius: 9px;
    background: #ffffff;
    color: #0f607c;                        /* 7.04:1 on white */
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

#selectFiles i,
#exportPDF i,
#exportJCBinder i,
#exportExitBinder.exit-binder-button i {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    font-weight: 400;
    color: inherit;
}

/* Hover moves the surface. The theme's .btn-text draws an animated underline; a pill is not a link. */
#selectFiles:hover,
#selectFiles.select-button:hover,
#exportJCBinder:hover,
#exportExitBinder.exit-binder-button:hover {
    background: #eaf4f7;                   /* --ph-hover; the label is still 6.29:1 */
    border-color: #a9d3dc;                 /* --ph-active-border */
    color: #0f607c;
}
#selectFiles::after,
#selectFiles:hover::after,
#exportPDF::after,
#exportPDF:hover::after,
#exportJCBinder::after,
#exportJCBinder:hover::after { display: none !important; }

#selectFiles:focus-visible,
#exportPDF:focus-visible,
#exportJCBinder:focus-visible,
#exportExitBinder.exit-binder-button:focus-visible {
    outline: 2px solid #0f607c;
    outline-offset: 2px;
    box-shadow: none;
}

/* Export Full Binder — the filled one. */
#exportPDF.export-button,
#exportPDF,
#exportPDF.btn-primary {
    background: #0f607c;
    border-color: #0f607c;
    color: #ffffff;                        /* 7.04:1 on the fill */
}
#exportPDF:hover,
#exportPDF.export-button:hover,
#exportPDF.btn-primary:hover {
    background: #0a4659;                   /* --ph-link-hover, 10.33:1 */
    border-color: #0a4659;
    color: #ffffff;
}

/* Selection mode is a STATE the button holds, not only something the rows do. */
body.select-mode #selectFiles,
body.select-mode #selectFiles:hover {
    background: #0f607c;
    border-color: #0f607c;
    color: #ffffff;
}

/* The staff tool stays quiet until it is pointed at: grey label, dashed edge. */
#exportExitBinder.exit-binder-button {
    border-style: dashed;
    color: #65747d;                        /* 4.83:1 on white */
}
#exportExitBinder.exit-binder-button:hover {
    border-style: solid;
    color: #10242e;                        /* 14.3:1 on the hover fill */
}
#exportExitBinder .exit-binder-staff {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eef2f5;
    color: #5f7079;                        /* 4.57:1 on the tag fill */
}

#selectFiles:active,
#exportPDF:active,
#exportJCBinder:active,
#exportExitBinder.exit-binder-button:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    #selectFiles, #exportPDF, #exportJCBinder, #exportExitBinder.exit-binder-button {
        transition: none !important;
    }
    #selectFiles:active, #exportPDF:active, #exportJCBinder:active,
    #exportExitBinder.exit-binder-button:active { transform: none !important; }
}

/* The spinner sat on a filled button and was drawn in white; it still does. */
#exportPDF.processing .spinbin {
    border-color: rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
}

/* ==========================================================================================
 * EXIT BINDER — staff-only button and dialog (2026-09-15)
 * The dialog frame (overlay, header, close, footer) is the shared modal system's
 * (.cls-modal-overlay / .cls-modal). Only its contents are styled here.
 * Motion answers actions: the chosen reason settles into place, views cross-fade, the
 * working state shows an indeterminate bar, and a check draws once when the file arrives.
 * ========================================================================================== */

/* The button itself is styled with the rest of the binder controls, above. Only the dialog's
   contents are styled here. */

/* ---- dialog contents ------------------------------------------------------------------------ */
#exitBinderOverlay .eb-modal { max-width: 560px; }
#exitBinderOverlay .cls-modal-title i { margin-right: 8px; }
#exitBinderOverlay .cls-modal-body { padding: 22px 24px 18px; color: #10242e; }
#exitBinderOverlay .eb-view.is-in { animation: eb-in .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes eb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#exitBinderOverlay .eb-lede { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #10242e; }
#exitBinderOverlay .eb-contents {
    list-style: none;
    margin: 0 0 20px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    background: #fff;
    border: 1px solid #e3e9ed;
    border-radius: 10px;
}
#exitBinderOverlay .eb-contents li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 13px; line-height: 1.35; color: #3f5561; }
#exitBinderOverlay .eb-contents li:last-child { grid-column: 1 / -1; }
#exitBinderOverlay .eb-contents i { width: 16px; text-align: center; color: #0f607c; font-size: 12px; }

#exitBinderOverlay .eb-label { font-size: 13px; font-weight: 600; color: #10242e; margin: 0 0 8px; }
#exitBinderOverlay .eb-reasons { display: grid; gap: 8px; margin: 0 0 16px; }
#exitBinderOverlay .eb-reason { position: relative; margin: 0; cursor: pointer; display: block; }
#exitBinderOverlay .eb-reason input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
#exitBinderOverlay .eb-reason-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid #e3e9ed;
    border-radius: 10px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .12s ease;
}
#exitBinderOverlay .eb-reason:hover .eb-reason-card { border-color: #b9ccd4; }
#exitBinderOverlay .eb-reason input:active + .eb-reason-card { transform: scale(.99); }
#exitBinderOverlay .eb-reason input:checked + .eb-reason-card {
    border-color: #0f607c;
    background: #f3f9fb;
    box-shadow: 0 0 0 3px rgba(15, 96, 124, .12);
}
#exitBinderOverlay .eb-reason input:focus-visible + .eb-reason-card { outline: 2px solid #0f607c; outline-offset: 2px; }
#exitBinderOverlay .eb-reason-icon {
    width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center;
    background: #eef3f5; color: #5f7079; font-size: 14px;
    transition: background-color .18s ease, color .18s ease;
}
#exitBinderOverlay .eb-reason input:checked + .eb-reason-card .eb-reason-icon { background: #0f607c; color: #fff; }
#exitBinderOverlay .eb-reason-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
#exitBinderOverlay .eb-reason-text strong { font-size: 14px; color: #10242e; }
#exitBinderOverlay .eb-reason-text small { font-size: 12px; color: #5f7079; }
#exitBinderOverlay .eb-reason-check {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid #c7d4da; position: relative;
    transition: border-color .18s ease, background-color .18s ease;
}
#exitBinderOverlay .eb-reason input:checked + .eb-reason-card .eb-reason-check { background: #0f607c; border-color: #0f607c; }
#exitBinderOverlay .eb-reason input:checked + .eb-reason-card .eb-reason-check::after {
    content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
    animation: eb-pop .22s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes eb-pop { from { opacity: 0; transform: rotate(45deg) scale(.4); } to { opacity: 1; transform: rotate(45deg) scale(1); } }

#exitBinderOverlay .eb-caution {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; border-radius: 10px;
    background: #fff7e8; color: #7a4306;
    box-shadow: inset 3px 0 0 #d98a1a;
    font-size: 13px; line-height: 1.45;
}
#exitBinderOverlay .eb-caution i { color: #b7791f; margin-top: 2px; }
#exitBinderOverlay .eb-error {
    margin: 14px 0 0; padding: 10px 14px; border-radius: 10px;
    background: #fdf1f0; color: #8f1d14; box-shadow: inset 3px 0 0 #b42318;
    font-size: 13px; line-height: 1.45;
    animation: eb-shake .32s ease both;
}
@keyframes eb-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Working and done states */
#exitBinderOverlay .eb-center { text-align: center; padding: 8px 8px 4px; }
#exitBinderOverlay .eb-state-title { display: block; font-size: 16px; color: #10242e; margin: 14px 0 6px; }
#exitBinderOverlay .eb-state-text { margin: 0 auto; max-width: 42ch; font-size: 13px; line-height: 1.5; color: #5f7079; }
#exitBinderOverlay .eb-pages { position: relative; width: 56px; height: 64px; margin: 6px auto 0; }
#exitBinderOverlay .eb-pages span {
    position: absolute; inset: 0; border-radius: 6px; background: #fff; border: 1.5px solid #c7d4da;
    box-shadow: 0 2px 6px rgba(16, 36, 46, .08);
    animation: eb-page 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
#exitBinderOverlay .eb-pages span::before, #exitBinderOverlay .eb-pages span::after {
    content: ""; position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 2px; background: #dfe8ec;
}
#exitBinderOverlay .eb-pages span::before { top: 14px; }
#exitBinderOverlay .eb-pages span::after { top: 22px; right: 22px; }
#exitBinderOverlay .eb-pages span:nth-child(2) { animation-delay: .6s; }
#exitBinderOverlay .eb-pages span:nth-child(3) { animation-delay: 1.2s; }
@keyframes eb-page {
    0%   { opacity: 0; transform: translateY(14px) rotate(-4deg); }
    25%  { opacity: 1; transform: translateY(0) rotate(0); }
    70%  { opacity: 1; transform: translateY(0) rotate(0); }
    100% { opacity: 0; transform: translateY(-10px) rotate(3deg); }
}
#exitBinderOverlay .eb-progress { position: relative; height: 4px; margin: 18px auto 6px; max-width: 280px; border-radius: 4px; background: #e3e9ed; overflow: hidden; }
#exitBinderOverlay .eb-progress span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 4px; background: #0f607c; animation: eb-indeterminate 1.3s ease-in-out infinite; }
@keyframes eb-indeterminate { from { left: -40%; } to { left: 100%; } }
#exitBinderOverlay .eb-elapsed { font-size: 12px; color: #93a3ad; font-variant-numeric: tabular-nums; }

#exitBinderOverlay .eb-tick { width: 58px; height: 58px; display: block; margin: 4px auto 0; }
#exitBinderOverlay .eb-tick circle { fill: #12795a; transform-origin: center; animation: eb-grow .3s cubic-bezier(.2, .8, .2, 1) both; }
#exitBinderOverlay .eb-tick path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; animation: eb-draw .4s .2s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes eb-grow { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes eb-draw { to { stroke-dashoffset: 0; } }
#exitBinderOverlay .eb-filename {
    display: inline-block; margin: 0 0 8px; padding: 4px 10px; border-radius: 6px;
    background: #fff; border: 1px solid #e3e9ed; font-size: 12px; color: #3f5561; overflow-wrap: anywhere;
}

/* Footer buttons — same language as the other staff dialogs */
#exitBinderOverlay .eb-footer { align-items: center; gap: 8px; }
/* The main action sits on the right: after a download, Done is the primary button. */
#exitBinderOverlay .eb-footer [data-eb-close].eb-btn--primary { order: 3; }
#exitBinderOverlay .eb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; margin: 0; padding: 0 18px;
    border-radius: 8px; border: 1px solid transparent;
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
    cursor: pointer; box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, opacity .15s ease;
}
#exitBinderOverlay .eb-btn[hidden] { display: none; }
#exitBinderOverlay .eb-btn:active:not(:disabled) { transform: translateY(1px); }
#exitBinderOverlay .eb-btn:focus-visible { outline: 2px solid #0f607c; outline-offset: 2px; }
#exitBinderOverlay .eb-btn:disabled { cursor: not-allowed; opacity: .55; }
#exitBinderOverlay .eb-btn--primary { background: #0f607c; border-color: #0f607c; color: #fff; box-shadow: 0 1px 2px rgba(10, 70, 89, .25); }
#exitBinderOverlay .eb-btn--primary:hover:not(:disabled) { background: #0a4659; border-color: #0a4659; }
#exitBinderOverlay .eb-btn--primary.is-busy { opacity: 1; background: #0a4659; }
#exitBinderOverlay .eb-btn--quiet { background: transparent; color: #5f7079; padding: 0 12px; }
#exitBinderOverlay .eb-btn--quiet:hover:not(:disabled) { background: #e8eef1; color: #10242e; }
#exitBinderOverlay .eb-btn--soft { background: #fff; border-color: #dde5e9; color: #0f607c; }
#exitBinderOverlay .eb-btn--soft:hover { background: #e6f1f4; border-color: #0f607c; }
#exitBinderOverlay .eb-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: eb-spin .7s linear infinite; }
@keyframes eb-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    #exitBinderOverlay .eb-contents { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    #exitBinderOverlay *, #exitBinderOverlay *::before, #exitBinderOverlay *::after { animation: none !important; transition: none !important; }
    #exitBinderOverlay .eb-tick path { stroke-dashoffset: 0; }
    #exitBinderOverlay .eb-pages span { opacity: 1; }
    #exitBinderOverlay .eb-progress span { left: 30%; }
}