/* ============================================================
   AnyData BIStore-style Contract Import Modal
   Supports DevExpress Fluent light and dark modes.
   ============================================================ */

.contract-import-scope {
    --ci-accent: var(--dxbl-accent-color, var(--dxbl-accent-color-90, #2cb975));
    --ci-accent-hover: var(--dxbl-accent-color-110, #249b63);
    --ci-page-bg: var(--dxbl-body-bg, var(--bs-body-bg, #f7f8fa));
    --ci-surface: var(--dxbl-background-color, var(--bs-body-bg, #ffffff));
    --ci-surface-soft: var(--dxbl-secondary-bg, var(--bs-secondary-bg, #f6f7f9));
    --ci-surface-raised: var(--dxbl-control-bg, var(--bs-tertiary-bg, #ffffff));
    --ci-text: var(--dxbl-body-color, var(--bs-body-color, #222222));
    --ci-text-muted: var(--dxbl-secondary-color, var(--bs-secondary-color, #667085));
    --ci-border: var(--dxbl-border-color, var(--bs-border-color, #dfe3e8));
    --ci-border-soft: color-mix( in srgb, var(--ci-border) 70%, transparent );
    --ci-success: var(--bs-success, #2cb975);
    --ci-success-soft: color-mix( in srgb, var(--ci-success) 12%, var(--ci-surface) );
    --ci-danger: var(--bs-danger, #dc3545);
    --ci-danger-soft: color-mix( in srgb, var(--ci-danger) 10%, var(--ci-surface) );
    --ci-warning: var(--bs-warning, #d97706);
    --ci-info: var(--bs-info, #0f6cbd);
    --ci-info-soft: color-mix( in srgb, var(--ci-info) 8%, var(--ci-surface) );
    --ci-overlay: rgba(7, 18, 35, 0.48);
    --ci-shadow: 0 22px 60px rgba(4, 15, 30, 0.24);
    --ci-radius-xl: 18px;
    --ci-radius-lg: 14px;
    --ci-radius-md: 10px;
    --ci-radius-sm: 8px;
}

    /* ------------------------------------------------------------
   Hidden native inputs
   ------------------------------------------------------------ */

    .contract-import-scope .native-file-input-hidden {
        position: fixed !important;
        left: -10000px !important;
        top: -10000px !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 1px !important;
        min-height: 1px !important;
        max-width: 1px !important;
        max-height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* ------------------------------------------------------------
   Overlay and modal
   ------------------------------------------------------------ */

    .contract-import-scope.contract-upload-overlay {
        position: fixed;
        inset: 0;
        z-index: 3000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
        background: var(--ci-overlay);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .contract-import-scope .contract-upload-modal {
        position: relative;
        display: flex;
        flex-direction: column;
        width: min(1180px, 96vw);
        height: min(86vh, 820px);
        min-width: 760px;
        min-height: 500px;
        max-width: 98vw;
        max-height: 95vh;
        overflow: hidden;
        resize: none;
        color: var(--ci-text);
        background: var(--ci-surface);
        border: 1px solid var(--ci-border);
        border-radius: var(--ci-radius-xl);
        box-shadow: var(--ci-shadow);
    }

        .contract-import-scope .contract-upload-modal.maximized {
            width: 97vw !important;
            height: 94vh !important;
            max-width: 97vw;
            max-height: 94vh;
        }

    /* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

    .contract-import-scope .contract-upload-header {
        position: relative;
        z-index: 5;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex: 0 0 auto;
        padding: 17px 20px;
        background: var(--ci-surface);
        border-bottom: 1px solid var(--ci-border);
    }

    .contract-import-scope .contract-upload-title {
        color: var(--ci-text);
        font-size: 1.12rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .contract-import-scope .contract-upload-subtitle {
        margin-top: 3px;
        color: var(--ci-text-muted);
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .contract-import-scope .contract-upload-header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .contract-import-scope .contract-header-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        color: var(--ci-text-muted);
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--ci-radius-sm);
        font: inherit;
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
    }

        .contract-import-scope .contract-header-icon-btn:hover:not(:disabled) {
            color: var(--ci-text);
            background: var(--ci-surface-soft);
            border-color: var(--ci-border);
        }

        .contract-import-scope .contract-header-icon-btn:focus-visible {
            outline: 2px solid var(--ci-accent);
            outline-offset: 2px;
        }

        .contract-import-scope .contract-header-icon-btn:disabled {
            opacity: 0.45;
            cursor: default;
        }

        .contract-import-scope .contract-header-icon-btn.close-btn {
            font-size: 1.75rem;
        }

    /* ------------------------------------------------------------
   Body
   ------------------------------------------------------------ */

    .contract-import-scope .contract-upload-body {
        position: relative;
        z-index: 1;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 18px 20px;
        background: var(--ci-page-bg);
    }

    /* ------------------------------------------------------------
   Toolbar
   ------------------------------------------------------------ */

    .contract-import-scope .toolbar-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 13px;
    }

        .contract-import-scope .toolbar-row .btn,
        .contract-import-scope .contract-upload-footer-actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 8px 15px;
            border-radius: var(--ci-radius-sm);
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.2;
            transition: transform 0.14s ease, color 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
        }

            .contract-import-scope .toolbar-row .btn:hover:not(:disabled),
            .contract-import-scope
            .contract-upload-footer-actions
            .btn:hover:not(:disabled) {
                transform: translateY(-1px);
            }

    .contract-import-scope .btn-primary,
    .contract-import-scope .btn-success {
        color: #ffffff;
        background: var(--ci-accent);
        border-color: var(--ci-accent);
    }

        .contract-import-scope .btn-primary:hover:not(:disabled),
        .contract-import-scope .btn-success:hover:not(:disabled) {
            color: #ffffff;
            background: var(--ci-accent-hover);
            border-color: var(--ci-accent-hover);
            box-shadow: 0 5px 15px color-mix( in srgb, var(--ci-accent) 28%, transparent );
        }

    .contract-import-scope .btn-secondary,
    .contract-import-scope .btn-outline-secondary {
        color: var(--ci-text);
        background: var(--ci-surface);
        border-color: var(--ci-border);
    }

        .contract-import-scope .btn-secondary:hover:not(:disabled),
        .contract-import-scope .btn-outline-secondary:hover:not(:disabled) {
            color: var(--ci-text);
            background: var(--ci-surface-soft);
            border-color: var(--ci-accent);
        }

    .contract-import-scope .btn:disabled,
    .contract-import-scope .btn.disabled,
    .contract-import-scope label.disabled {
        opacity: 0.5;
        pointer-events: none;
        transform: none;
        cursor: default;
    }

    .contract-import-scope .file-summary {
        margin-left: auto;
    }

    .contract-import-scope .allowance-summary {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
    }

    .contract-import-scope .summary-pill {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 5px 11px;
        color: var(--ci-text-muted);
        background: var(--ci-surface-soft);
        border: 1px solid var(--ci-border-soft);
        border-radius: 999px;
        font-size: 0.84rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .contract-import-scope .summary-pill-success {
        color: var(--ci-success);
        background: var(--ci-success-soft);
        border-color: color-mix( in srgb, var(--ci-success) 30%, transparent );
    }

    .contract-import-scope .summary-pill-danger {
        color: var(--ci-danger);
        background: var(--ci-danger-soft);
        border-color: color-mix( in srgb, var(--ci-danger) 30%, transparent );
    }

    /* ------------------------------------------------------------
   Helper and allowance cards
   ------------------------------------------------------------ */

    .contract-import-scope .helper-box,
    .contract-import-scope .allowance-box,
    .contract-import-scope .panel-card {
        color: var(--ci-text);
        background: var(--ci-surface);
        border: 1px solid var(--ci-border);
        border-radius: var(--ci-radius-lg);
        box-shadow: 0 1px 2px color-mix( in srgb, var(--ci-text) 7%, transparent );
    }

    .contract-import-scope .helper-box {
        margin-bottom: 14px;
        padding: 11px 14px;
        color: var(--ci-text-muted);
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .contract-import-scope .allowance-box {
        margin-bottom: 15px;
        padding: 14px 17px;
    }

    .contract-import-scope .allowance-box-info {
        background: linear-gradient( 135deg, var(--ci-info-soft), var(--ci-surface) );
        border-color: color-mix( in srgb, var(--ci-info) 24%, var(--ci-border) );
    }

    .contract-import-scope .allowance-box-danger {
        background: linear-gradient( 135deg, var(--ci-danger-soft), var(--ci-surface) );
        border-color: color-mix( in srgb, var(--ci-danger) 32%, var(--ci-border) );
    }

    .contract-import-scope .allowance-title {
        margin-bottom: 5px;
        color: var(--ci-text);
        font-size: 0.92rem;
        font-weight: 700;
    }

    .contract-import-scope .allowance-line {
        margin-top: 4px;
        color: var(--ci-text-muted);
        font-size: 0.88rem;
        line-height: 1.45;
    }

        .contract-import-scope .allowance-line strong {
            color: var(--ci-text);
        }

    /* ------------------------------------------------------------
   Status banners
   ------------------------------------------------------------ */

    .contract-import-scope .status-banner {
        margin-bottom: 14px;
        padding: 11px 14px;
        border: 1px solid var(--ci-border);
        border-radius: var(--ci-radius-md);
        font-size: 0.9rem;
    }

    .contract-import-scope .status-info {
        color: var(--ci-text);
        background: var(--ci-info-soft);
        border-color: color-mix( in srgb, var(--ci-info) 24%, var(--ci-border) );
    }

    .contract-import-scope .status-success {
        color: var(--ci-success);
        background: var(--ci-success-soft);
        border-color: color-mix( in srgb, var(--ci-success) 28%, var(--ci-border) );
    }

    .contract-import-scope .status-error {
        color: var(--ci-danger);
        background: var(--ci-danger-soft);
        border-color: color-mix( in srgb, var(--ci-danger) 28%, var(--ci-border) );
    }

    /* ------------------------------------------------------------
   Split layout
   ------------------------------------------------------------ */

    .contract-import-scope .split-layout {
        display: flex;
        align-items: stretch;
        min-height: 410px;
    }

        .contract-import-scope .split-layout.processing-mode {
            display: block;
        }

    .contract-import-scope .split-pane {
        min-width: 0;
    }

    .contract-import-scope .split-pane-left {
        flex: 0 0 auto;
        min-width: 280px;
        max-width: 700px;
    }

    .contract-import-scope .split-pane-right {
        flex: 1 1 auto;
        min-width: 0;
    }

    .contract-import-scope .splitter {
        position: relative;
        flex: 0 0 12px;
        margin: 0 7px;
        cursor: col-resize;
        user-select: none;
    }

        .contract-import-scope .splitter::before {
            content: "";
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 5px;
            width: 2px;
            border-radius: 999px;
            background: var(--ci-border);
        }

        .contract-import-scope .splitter:hover::before {
            background: var(--ci-accent);
        }

    /* ------------------------------------------------------------
   Panels
   ------------------------------------------------------------ */

    .contract-import-scope .panel-card {
        display: flex;
        flex-direction: column;
        min-height: 320px;
        height: 100%;
        padding: 15px;
        overflow: hidden;
    }

    .contract-import-scope .contracts-panel {
        min-height: 410px;
    }

    .contract-import-scope .panel-title {
        margin-bottom: 13px;
        color: var(--ci-text);
        font-size: 0.96rem;
        font-weight: 700;
    }

    .contract-import-scope .compact-label {
        margin-bottom: 6px;
        color: var(--ci-text);
        font-size: 0.86rem;
        font-weight: 600;
    }

    .contract-import-scope .compact-textarea,
    .contract-import-scope .form-control {
        color: var(--ci-text);
        background: var(--ci-surface-raised);
        border-color: var(--ci-border);
        border-radius: var(--ci-radius-sm);
    }

    .contract-import-scope .compact-textarea {
        min-height: 118px;
        resize: vertical;
    }

    .contract-import-scope .form-control::placeholder {
        color: var(--ci-text-muted);
        opacity: 0.72;
    }

    .contract-import-scope .form-control:focus {
        color: var(--ci-text);
        background: var(--ci-surface-raised);
        border-color: var(--ci-accent);
        box-shadow: 0 0 0 3px color-mix( in srgb, var(--ci-accent) 18%, transparent );
    }

    .contract-import-scope .option-stack {
        display: grid;
        gap: 9px;
        margin-top: 13px;
    }

    .contract-import-scope .compact-check {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        color: var(--ci-text);
    }

    .contract-import-scope .form-check-input {
        border-color: var(--ci-border);
        background-color: var(--ci-surface-raised);
    }

        .contract-import-scope .form-check-input:checked {
            background-color: var(--ci-accent);
            border-color: var(--ci-accent);
        }

        .contract-import-scope .form-check-input:focus {
            border-color: var(--ci-accent);
            box-shadow: 0 0 0 3px color-mix( in srgb, var(--ci-accent) 18%, transparent );
        }

    /* ------------------------------------------------------------
   Files table
   ------------------------------------------------------------ */

    .contract-import-scope .files-table-wrap {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }

    .contract-import-scope .compact-table {
        width: 100%;
        margin: 0;
        color: var(--ci-text);
        border-color: var(--ci-border);
    }

        .contract-import-scope .compact-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            padding: 9px 8px;
            color: var(--ci-text);
            background: var(--ci-surface);
            border-bottom: 1px solid var(--ci-border);
            font-size: 0.82rem;
            font-weight: 700;
        }

        .contract-import-scope .compact-table tbody td {
            padding: 10px 8px;
            color: var(--ci-text-muted);
            background: transparent;
            border-bottom: 1px solid var(--ci-border-soft);
            vertical-align: top;
        }

        .contract-import-scope .compact-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .contract-import-scope .compact-table tbody tr:hover td {
            background: var(--ci-surface-soft);
        }

    .contract-import-scope .file-name {
        color: var(--ci-text) !important;
        font-weight: 600;
    }

    .contract-import-scope .relative-path {
        color: var(--ci-text-muted);
        overflow-wrap: anywhere;
    }

    .contract-import-scope .empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-height: 180px;
        color: var(--ci-text-muted);
        font-size: 0.9rem;
    }

    .contract-import-scope .btn-link {
        color: var(--ci-accent);
        text-decoration: none;
        font-weight: 600;
    }

        .contract-import-scope .btn-link:hover:not(:disabled) {
            color: var(--ci-accent-hover);
            text-decoration: underline;
        }

    /* ------------------------------------------------------------
   File statuses
   ------------------------------------------------------------ */

    .contract-import-scope .mini-spinner {
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 2px solid var(--ci-border);
        border-top-color: var(--ci-accent);
        border-radius: 50%;
        animation: contractImportSpin 0.8s linear infinite;
    }

    .contract-import-scope .row-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        font-size: 0.9rem;
        font-weight: 700;
    }

        .contract-import-scope .row-status.success {
            color: var(--ci-success);
        }

        .contract-import-scope .row-status.warning {
            color: var(--ci-warning);
        }

        .contract-import-scope .row-status.error {
            color: var(--ci-danger);
        }

        .contract-import-scope .row-status.queued {
            color: var(--ci-text-muted);
        }

    .contract-import-scope .processing-row td {
        background: color-mix( in srgb, var(--ci-accent) 6%, var(--ci-surface) ) !important;
    }

    /* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

    .contract-import-scope .contract-upload-footer {
        position: relative;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex: 0 0 auto;
        min-height: 62px;
        padding: 11px 18px;
        color: var(--ci-text);
        background: var(--ci-surface);
        border-top: 1px solid var(--ci-border);
        pointer-events: auto;
    }

    .contract-import-scope .contract-upload-footer-status {
        flex: 1;
        min-width: 0;
    }

    .contract-import-scope .contract-upload-footer-actions {
        position: relative;
        z-index: 101;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 8px;
        pointer-events: auto;
    }

        .contract-import-scope .contract-upload-footer-actions button {
            position: relative;
            z-index: 102;
            pointer-events: auto;
            touch-action: manipulation;
        }

    .contract-import-scope .import-action-button {
        min-width: 84px;
    }

    .contract-import-scope .footer-progress-inline {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .contract-import-scope .footer-progress-label {
        min-width: 36px;
        color: var(--ci-text);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .contract-import-scope .footer-progress-bar {
        flex: 0 0 150px;
        height: 7px;
        overflow: hidden;
        background: var(--ci-surface-soft);
        border: 1px solid var(--ci-border-soft);
        border-radius: 999px;
    }

    .contract-import-scope .footer-progress-fill {
        height: 100%;
        background: linear-gradient( 90deg, var(--ci-accent), color-mix( in srgb, var(--ci-accent) 70%, #55d7c1 ) );
        transition: width 0.25s ease;
    }

    .contract-import-scope .footer-progress-text,
    .contract-import-scope .footer-status-text {
        overflow: hidden;
        color: var(--ci-text-muted);
        font-size: 0.84rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .contract-import-scope .footer-progress-text {
        flex: 1;
    }

    .contract-import-scope .footer-result {
        font-size: 0.88rem;
        font-weight: 600;
    }

        .contract-import-scope .footer-result.success {
            color: var(--ci-success);
        }

        .contract-import-scope .footer-result.error {
            color: var(--ci-danger);
        }

    /* ------------------------------------------------------------
   Selection animation
   ------------------------------------------------------------ */

    .contract-import-scope .select-files-highlight {
        position: relative;
        border-color: var(--ci-accent) !important;
        animation: contractImportPulse 0.9s ease-in-out 2;
    }

/* ------------------------------------------------------------
   Dark-mode refinements
   Works with Bootstrap, DevExpress and explicit theme markers.
   ------------------------------------------------------------ */

html[data-bs-theme="dark"] .contract-import-scope,
body[data-bs-theme="dark"] .contract-import-scope,
html.dx-dark .contract-import-scope,
body.dx-dark .contract-import-scope,
html[class*="dark"] .contract-import-scope,
body[class*="dark"] .contract-import-scope {
    --ci-overlay: rgba(0, 0, 0, 0.68);
    --ci-shadow: 0 24px 72px rgba(0, 0, 0, 0.56);
}

    html[data-bs-theme="dark"]
    .contract-import-scope
    .contract-upload-modal,
    body[data-bs-theme="dark"]
    .contract-import-scope
    .contract-upload-modal,
    html.dx-dark
    .contract-import-scope
    .contract-upload-modal,
    body.dx-dark
    .contract-import-scope
    .contract-upload-modal {
        box-shadow: var(--ci-shadow);
    }

/* ------------------------------------------------------------
   Scrollbars
   ------------------------------------------------------------ */

.contract-import-scope .contract-upload-body,
.contract-import-scope .files-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--ci-border) transparent;
}

    .contract-import-scope .contract-upload-body::-webkit-scrollbar,
    .contract-import-scope .files-table-wrap::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }

    .contract-import-scope .contract-upload-body::-webkit-scrollbar-track,
    .contract-import-scope .files-table-wrap::-webkit-scrollbar-track {
        background: transparent;
    }

    .contract-import-scope .contract-upload-body::-webkit-scrollbar-thumb,
    .contract-import-scope .files-table-wrap::-webkit-scrollbar-thumb {
        background: var(--ci-border);
        border: 2px solid transparent;
        border-radius: 999px;
        background-clip: padding-box;
    }

/* ------------------------------------------------------------
   Animations
   ------------------------------------------------------------ */

@keyframes contractImportSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes contractImportPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix( in srgb, var(--ci-accent) 35%, transparent );
    }

    50% {
        transform: scale(1.025);
        box-shadow: 0 0 0 9px color-mix( in srgb, var(--ci-accent) 0%, transparent );
    }
}

/* ------------------------------------------------------------
   Responsive layout
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    .contract-import-scope.contract-upload-overlay {
        padding: 8px;
    }

    .contract-import-scope .contract-upload-modal,
    .contract-import-scope .contract-upload-modal.maximized {
        width: 100% !important;
        height: calc(100vh - 16px) !important;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: 13px;
    }

    .contract-import-scope .contract-upload-header {
        padding: 13px 15px;
    }

    .contract-import-scope .contract-upload-body {
        padding: 14px;
    }

    .contract-import-scope .split-layout,
    .contract-import-scope .split-layout.processing-mode {
        display: block;
    }

    .contract-import-scope .split-pane-left {
        width: auto !important;
        min-width: 0;
        max-width: none;
        margin-bottom: 13px;
    }

    .contract-import-scope .splitter {
        display: none;
    }

    .contract-import-scope .file-summary {
        width: 100%;
        margin-left: 0;
    }

    .contract-import-scope .contract-upload-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 10px 14px;
    }

    .contract-import-scope .contract-upload-footer-actions {
        justify-content: flex-end;
    }

    .contract-import-scope .footer-progress-bar {
        flex: 1;
    }
}

@media (max-width: 560px) {
    .contract-import-scope .toolbar-row {
        align-items: stretch;
    }

        .contract-import-scope .toolbar-row > .btn,
        .contract-import-scope .toolbar-row > label.btn {
            flex: 1 1 auto;
        }

    .contract-import-scope .allowance-summary {
        width: 100%;
    }

    .contract-import-scope .summary-pill {
        flex: 1 1 auto;
        justify-content: center;
    }

    .contract-import-scope .contract-upload-footer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

        .contract-import-scope
        .contract-upload-footer-actions
        .btn {
            width: 100%;
        }
}

/* ------------------------------------------------------------
   Older browser fallback where color-mix is unsupported
   ------------------------------------------------------------ */

@supports not (background: color-mix(in srgb, white, black)) {
    .contract-import-scope {
        --ci-border-soft: var(--ci-border);
        --ci-success-soft: #edf9f2;
        --ci-danger-soft: #fdf0f1;
        --ci-info-soft: #eef6fc;
    }

    html[data-bs-theme="dark"] .contract-import-scope,
    body[data-bs-theme="dark"] .contract-import-scope,
    html.dx-dark .contract-import-scope,
    body.dx-dark .contract-import-scope {
        --ci-success-soft: #17372a;
        --ci-danger-soft: #3b2024;
        --ci-info-soft: #172d40;
    }
}

/* ============================================================
   Contract Import Modal — dark mode correction
   Keep this block at the END of contract-import-modal.css
   ============================================================ */

@media (prefers-color-scheme: dark) {
    .contract-import-scope {
        color-scheme: dark;
    }
}

/*
   Explicit theme selectors used across Bootstrap, DevExpress/XAF
   and custom application theme implementations.
*/
html[data-bs-theme="dark"] .contract-import-scope,
body[data-bs-theme="dark"] .contract-import-scope,
html[data-theme="dark"] .contract-import-scope,
body[data-theme="dark"] .contract-import-scope,
html.dark .contract-import-scope,
body.dark .contract-import-scope,
html.dx-dark .contract-import-scope,
body.dx-dark .contract-import-scope,
html.dxbl-dark .contract-import-scope,
body.dxbl-dark .contract-import-scope,
html[class*="dark-theme"] .contract-import-scope,
body[class*="dark-theme"] .contract-import-scope,
html[class*="theme-dark"] .contract-import-scope,
body[class*="theme-dark"] .contract-import-scope {
    color-scheme: dark;
    --ci-page-bg: #111923;
    --ci-surface: #182330;
    --ci-surface-soft: #202d3b;
    --ci-surface-raised: #1b2734;
    --ci-text: #f3f6f9;
    --ci-text-muted: #aeb9c5;
    --ci-border: #344454;
    --ci-border-soft: #2b3947;
    --ci-accent: var(--dxbl-accent-color-90, #29b8a6);
    --ci-accent-hover: var(--dxbl-accent-color-110, #35cbb8);
    --ci-success: #54d89b;
    --ci-success-soft: #17382d;
    --ci-danger: #ff7b86;
    --ci-danger-soft: #40252b;
    --ci-warning: #f2b45f;
    --ci-info: #73baf7;
    --ci-info-soft: #172f45;
    --ci-overlay: rgba(2, 7, 13, 0.78);
    --ci-shadow: 0 26px 78px rgba(0, 0, 0, 0.68);
}

    /* Modal shell */
    html[data-bs-theme="dark"]
    .contract-import-scope .contract-upload-modal,
    body[data-bs-theme="dark"]
    .contract-import-scope .contract-upload-modal,
    html[data-theme="dark"]
    .contract-import-scope .contract-upload-modal,
    body[data-theme="dark"]
    .contract-import-scope .contract-upload-modal,
    html.dark
    .contract-import-scope .contract-upload-modal,
    body.dark
    .contract-import-scope .contract-upload-modal,
    html.dx-dark
    .contract-import-scope .contract-upload-modal,
    body.dx-dark
    .contract-import-scope .contract-upload-modal,
    html.dxbl-dark
    .contract-import-scope .contract-upload-modal,
    body.dxbl-dark
    .contract-import-scope .contract-upload-modal,
    html[class*="dark-theme"]
    .contract-import-scope .contract-upload-modal,
    body[class*="dark-theme"]
    .contract-import-scope .contract-upload-modal,
    html[class*="theme-dark"]
    .contract-import-scope .contract-upload-modal,
    body[class*="theme-dark"]
    .contract-import-scope .contract-upload-modal {
        color: var(--ci-text);
        background: var(--ci-surface);
        border-color: var(--ci-border);
        box-shadow: var(--ci-shadow);
    }

    /* Header and footer */
    html[data-bs-theme="dark"]
    .contract-import-scope .contract-upload-header,
    html[data-bs-theme="dark"]
    .contract-import-scope .contract-upload-footer,
    body[data-bs-theme="dark"]
    .contract-import-scope .contract-upload-header,
    body[data-bs-theme="dark"]
    .contract-import-scope .contract-upload-footer,
    html[data-theme="dark"]
    .contract-import-scope .contract-upload-header,
    html[data-theme="dark"]
    .contract-import-scope .contract-upload-footer,
    body[data-theme="dark"]
    .contract-import-scope .contract-upload-header,
    body[data-theme="dark"]
    .contract-import-scope .contract-upload-footer,
    html.dark
    .contract-import-scope .contract-upload-header,
    html.dark
    .contract-import-scope .contract-upload-footer,
    body.dark
    .contract-import-scope .contract-upload-header,
    body.dark
    .contract-import-scope .contract-upload-footer,
    html.dx-dark
    .contract-import-scope .contract-upload-header,
    html.dx-dark
    .contract-import-scope .contract-upload-footer,
    body.dx-dark
    .contract-import-scope .contract-upload-header,
    body.dx-dark
    .contract-import-scope .contract-upload-footer,
    html.dxbl-dark
    .contract-import-scope .contract-upload-header,
    html.dxbl-dark
    .contract-import-scope .contract-upload-footer,
    body.dxbl-dark
    .contract-import-scope .contract-upload-header,
    body.dxbl-dark
    .contract-import-scope .contract-upload-footer,
    html[class*="dark-theme"]
    .contract-import-scope .contract-upload-header,
    html[class*="dark-theme"]
    .contract-import-scope .contract-upload-footer,
    body[class*="dark-theme"]
    .contract-import-scope .contract-upload-header,
    body[class*="dark-theme"]
    .contract-import-scope .contract-upload-footer,
    html[class*="theme-dark"]
    .contract-import-scope .contract-upload-header,
    html[class*="theme-dark"]
    .contract-import-scope .contract-upload-footer,
    body[class*="theme-dark"]
    .contract-import-scope .contract-upload-header,
    body[class*="theme-dark"]
    .contract-import-scope .contract-upload-footer {
        color: var(--ci-text);
        background: var(--ci-surface);
        border-color: var(--ci-border);
    }

    /* Body */
    html[data-bs-theme="dark"]
    .contract-import-scope .contract-upload-body,
    body[data-bs-theme="dark"]
    .contract-import-scope .contract-upload-body,
    html[data-theme="dark"]
    .contract-import-scope .contract-upload-body,
    body[data-theme="dark"]
    .contract-import-scope .contract-upload-body,
    html.dark
    .contract-import-scope .contract-upload-body,
    body.dark
    .contract-import-scope .contract-upload-body,
    html.dx-dark
    .contract-import-scope .contract-upload-body,
    body.dx-dark
    .contract-import-scope .contract-upload-body,
    html.dxbl-dark
    .contract-import-scope .contract-upload-body,
    body.dxbl-dark
    .contract-import-scope .contract-upload-body,
    html[class*="dark-theme"]
    .contract-import-scope .contract-upload-body,
    body[class*="dark-theme"]
    .contract-import-scope .contract-upload-body,
    html[class*="theme-dark"]
    .contract-import-scope .contract-upload-body,
    body[class*="theme-dark"]
    .contract-import-scope .contract-upload-body {
        color: var(--ci-text);
        background: var(--ci-page-bg);
    }

    /* Cards and panels */
    html[data-bs-theme="dark"]
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    body[data-bs-theme="dark"]
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    html[data-theme="dark"]
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    body[data-theme="dark"]
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    html.dark
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    body.dark
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    html.dx-dark
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    body.dx-dark
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    html.dxbl-dark
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ),
    body.dxbl-dark
    .contract-import-scope :is( .helper-box, .allowance-box, .panel-card, .status-banner ) {
        color: var(--ci-text);
        background: var(--ci-surface);
        border-color: var(--ci-border);
        box-shadow: none;
    }

    /* Allowance information card */
    html[data-bs-theme="dark"]
    .contract-import-scope .allowance-box-info,
    body[data-bs-theme="dark"]
    .contract-import-scope .allowance-box-info,
    html[data-theme="dark"]
    .contract-import-scope .allowance-box-info,
    body[data-theme="dark"]
    .contract-import-scope .allowance-box-info,
    html.dark
    .contract-import-scope .allowance-box-info,
    body.dark
    .contract-import-scope .allowance-box-info,
    html.dx-dark
    .contract-import-scope .allowance-box-info,
    body.dx-dark
    .contract-import-scope .allowance-box-info,
    html.dxbl-dark
    .contract-import-scope .allowance-box-info,
    body.dxbl-dark
    .contract-import-scope .allowance-box-info {
        background: linear-gradient( 135deg, var(--ci-info-soft), var(--ci-surface) );
        border-color: #31516c;
    }

    /* Form controls */
    html[data-bs-theme="dark"]
    .contract-import-scope :is( .form-control, .compact-textarea ),
    body[data-bs-theme="dark"]
    .contract-import-scope :is( .form-control, .compact-textarea ),
    html[data-theme="dark"]
    .contract-import-scope :is( .form-control, .compact-textarea ),
    body[data-theme="dark"]
    .contract-import-scope :is( .form-control, .compact-textarea ),
    html.dark
    .contract-import-scope :is( .form-control, .compact-textarea ),
    body.dark
    .contract-import-scope :is( .form-control, .compact-textarea ),
    html.dx-dark
    .contract-import-scope :is( .form-control, .compact-textarea ),
    body.dx-dark
    .contract-import-scope :is( .form-control, .compact-textarea ),
    html.dxbl-dark
    .contract-import-scope :is( .form-control, .compact-textarea ),
    body.dxbl-dark
    .contract-import-scope :is( .form-control, .compact-textarea ) {
        color: var(--ci-text);
        background: var(--ci-surface-raised);
        border-color: var(--ci-border);
    }

    html[data-bs-theme="dark"]
    .contract-import-scope .form-control::placeholder,
    body[data-bs-theme="dark"]
    .contract-import-scope .form-control::placeholder,
    html[data-theme="dark"]
    .contract-import-scope .form-control::placeholder,
    body[data-theme="dark"]
    .contract-import-scope .form-control::placeholder,
    html.dark
    .contract-import-scope .form-control::placeholder,
    body.dark
    .contract-import-scope .form-control::placeholder,
    html.dx-dark
    .contract-import-scope .form-control::placeholder,
    body.dx-dark
    .contract-import-scope .form-control::placeholder,
    html.dxbl-dark
    .contract-import-scope .form-control::placeholder,
    body.dxbl-dark
    .contract-import-scope .form-control::placeholder {
        color: #8493a2;
    }

    /* Table */
    html[data-bs-theme="dark"]
    .contract-import-scope .compact-table,
    body[data-bs-theme="dark"]
    .contract-import-scope .compact-table,
    html[data-theme="dark"]
    .contract-import-scope .compact-table,
    body[data-theme="dark"]
    .contract-import-scope .compact-table,
    html.dark
    .contract-import-scope .compact-table,
    body.dark
    .contract-import-scope .compact-table,
    html.dx-dark
    .contract-import-scope .compact-table,
    body.dx-dark
    .contract-import-scope .compact-table,
    html.dxbl-dark
    .contract-import-scope .compact-table,
    body.dxbl-dark
    .contract-import-scope .compact-table {
        color: var(--ci-text);
        border-color: var(--ci-border);
    }

        html[data-bs-theme="dark"]
        .contract-import-scope .compact-table thead th,
        body[data-bs-theme="dark"]
        .contract-import-scope .compact-table thead th,
        html[data-theme="dark"]
        .contract-import-scope .compact-table thead th,
        body[data-theme="dark"]
        .contract-import-scope .compact-table thead th,
        html.dark
        .contract-import-scope .compact-table thead th,
        body.dark
        .contract-import-scope .compact-table thead th,
        html.dx-dark
        .contract-import-scope .compact-table thead th,
        body.dx-dark
        .contract-import-scope .compact-table thead th,
        html.dxbl-dark
        .contract-import-scope .compact-table thead th,
        body.dxbl-dark
        .contract-import-scope .compact-table thead th {
            color: var(--ci-text);
            background: var(--ci-surface);
            border-color: var(--ci-border);
        }

        html[data-bs-theme="dark"]
        .contract-import-scope .compact-table tbody td,
        body[data-bs-theme="dark"]
        .contract-import-scope .compact-table tbody td,
        html[data-theme="dark"]
        .contract-import-scope .compact-table tbody td,
        body[data-theme="dark"]
        .contract-import-scope .compact-table tbody td,
        html.dark
        .contract-import-scope .compact-table tbody td,
        body.dark
        .contract-import-scope .compact-table tbody td,
        html.dx-dark
        .contract-import-scope .compact-table tbody td,
        body.dx-dark
        .contract-import-scope .compact-table tbody td,
        html.dxbl-dark
        .contract-import-scope .compact-table tbody td,
        body.dxbl-dark
        .contract-import-scope .compact-table tbody td {
            color: var(--ci-text-muted);
            background: transparent;
            border-color: var(--ci-border-soft);
        }

        html[data-bs-theme="dark"]
        .contract-import-scope .compact-table tbody tr:hover td,
        body[data-bs-theme="dark"]
        .contract-import-scope .compact-table tbody tr:hover td,
        html[data-theme="dark"]
        .contract-import-scope .compact-table tbody tr:hover td,
        body[data-theme="dark"]
        .contract-import-scope .compact-table tbody tr:hover td,
        html.dark
        .contract-import-scope .compact-table tbody tr:hover td,
        body.dark
        .contract-import-scope .compact-table tbody tr:hover td,
        html.dx-dark
        .contract-import-scope .compact-table tbody tr:hover td,
        body.dx-dark
        .contract-import-scope .compact-table tbody tr:hover td,
        html.dxbl-dark
        .contract-import-scope .compact-table tbody tr:hover td,
        body.dxbl-dark
        .contract-import-scope .compact-table tbody tr:hover td {
            background: var(--ci-surface-soft);
        }

    /* Text colours that Bootstrap may override */
    html[data-bs-theme="dark"]
    .contract-import-scope :is( .contract-upload-title, .allowance-title, .panel-title, .compact-label, .file-name, .form-check-label ),
    body[data-bs-theme="dark"]
    .contract-import-scope :is( .contract-upload-title, .allowance-title, .panel-title, .compact-label, .file-name, .form-check-label ),
    html.dark
    .contract-import-scope :is( .contract-upload-title, .allowance-title, .panel-title, .compact-label, .file-name, .form-check-label ),
    body.dark
    .contract-import-scope :is( .contract-upload-title, .allowance-title, .panel-title, .compact-label, .file-name, .form-check-label ),
    html.dx-dark
    .contract-import-scope :is( .contract-upload-title, .allowance-title, .panel-title, .compact-label, .file-name, .form-check-label ),
    body.dx-dark
    .contract-import-scope :is( .contract-upload-title, .allowance-title, .panel-title, .compact-label, .file-name, .form-check-label ),
    html.dxbl-dark
    .contract-import-scope :is( .contract-upload-title, .allowance-title, .panel-title, .compact-label, .file-name, .form-check-label ),
    body.dxbl-dark
    .contract-import-scope :is( .contract-upload-title, .allowance-title, .panel-title, .compact-label, .file-name, .form-check-label ) {
        color: var(--ci-text) !important;
    }

    html[data-bs-theme="dark"]
    .contract-import-scope :is( .contract-upload-subtitle, .helper-box, .allowance-line, .relative-path, .empty-state ),
    body[data-bs-theme="dark"]
    .contract-import-scope :is( .contract-upload-subtitle, .helper-box, .allowance-line, .relative-path, .empty-state ),
    html.dark
    .contract-import-scope :is( .contract-upload-subtitle, .helper-box, .allowance-line, .relative-path, .empty-state ),
    body.dark
    .contract-import-scope :is( .contract-upload-subtitle, .helper-box, .allowance-line, .relative-path, .empty-state ),
    html.dx-dark
    .contract-import-scope :is( .contract-upload-subtitle, .helper-box, .allowance-line, .relative-path, .empty-state ),
    body.dx-dark
    .contract-import-scope :is( .contract-upload-subtitle, .helper-box, .allowance-line, .relative-path, .empty-state ),
    html.dxbl-dark
    .contract-import-scope :is( .contract-upload-subtitle, .helper-box, .allowance-line, .relative-path, .empty-state ),
    body.dxbl-dark
    .contract-import-scope :is( .contract-upload-subtitle, .helper-box, .allowance-line, .relative-path, .empty-state ) {
        color: var(--ci-text-muted) !important;
    }

    /* Buttons */
    html[data-bs-theme="dark"]
    .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ),
    body[data-bs-theme="dark"]
    .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ),
    html.dark
    .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ),
    body.dark
    .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ),
    html.dx-dark
    .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ),
    body.dx-dark
    .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ),
    html.dxbl-dark
    .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ),
    body.dxbl-dark
    .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ) {
        color: var(--ci-text);
        background: var(--ci-surface-soft);
        border-color: var(--ci-border);
    }

        html[data-bs-theme="dark"]
        .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ):hover:not(:disabled),
        body[data-bs-theme="dark"]
        .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ):hover:not(:disabled),
        html.dark
        .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ):hover:not(:disabled),
        body.dark
        .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ):hover:not(:disabled),
        html.dx-dark
        .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ):hover:not(:disabled),
        body.dx-dark
        .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ):hover:not(:disabled),
        html.dxbl-dark
        .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ):hover:not(:disabled),
        body.dxbl-dark
        .contract-import-scope :is( .btn-secondary, .btn-outline-secondary ):hover:not(:disabled) {
            color: var(--ci-text);
            background: #293848;
            border-color: var(--ci-accent);
        }

    /* Pills */
    html[data-bs-theme="dark"]
    .contract-import-scope .summary-pill,
    body[data-bs-theme="dark"]
    .contract-import-scope .summary-pill,
    html.dark
    .contract-import-scope .summary-pill,
    body.dark
    .contract-import-scope .summary-pill,
    html.dx-dark
    .contract-import-scope .summary-pill,
    body.dx-dark
    .contract-import-scope .summary-pill,
    html.dxbl-dark
    .contract-import-scope .summary-pill,
    body.dxbl-dark
    .contract-import-scope .summary-pill {
        color: var(--ci-text-muted);
        background: var(--ci-surface-soft);
        border-color: var(--ci-border);
    }