/* ── Unified file uploader ───────────────────────────────────────────────────
   The one stylesheet for Pages/Shared/_FileUploaderTable.cshtml (and the rows it renders from
   _FileUploaderRow.cshtml). The applications' report pages (ZEVIR, EVCARR, PIIRASCAFFOLD) and
   the Data Workshop's Test tab all render the uploader through that partial, so they share
   these rules. Everything is scoped under .file-uploader (the table) so nothing leaks into the
   report pages' Summary tables, which reuse the .summary-table class.

   The font is pinned to the State Template's body type (cagov.core.css) so the uploader reads
   the same wherever it is hosted — the Workshop sets a denser base font on .workshop.        */

.file-uploader {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    font-size: 1.1rem;
    line-height: 1.45;
}

@media (max-width: 767px) {
    .file-uploader {
        font-size: 1.2rem;
    }
}

    .file-uploader td, .file-uploader th {
        background-color: #f2f2f2;
        padding: 15px;
        border: none;
    }

.file-uploader .file-drop-area {
    border: 2px dashed #ccc;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    /* Prevent text wrapping in file drop area */
    white-space: nowrap;
}

    .file-uploader .file-drop-area.dragover {
        background-color: #e3e3e3;
    }

/* File selected state */
.file-uploader .file-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #f2f2f2;
}

    .file-uploader .file-selected .file-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Status container layout */
.file-uploader .status-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Progress bar - two layers: validation (blue) behind, upload (green) in front */
.file-uploader .progress-wrapper {
    flex: 1;
    height: 12px;
    background-color: #e0e0e0;
    overflow: hidden;
    min-width: 100px;
    position: relative;
}

.file-uploader .progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #2196F3;
    transition: width 0.3s ease;
}

    .file-uploader .progress-bar-fill.warning {
        background-color: #ff9800;
    }

    .file-uploader .progress-bar-fill.error {
        background-color: #f44336;
    }

.file-uploader .progress-bar-upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #4CAF50;
    transition: width 0.3s ease;
    z-index: 1;
}

/* Status text colors - functional states */
.file-uploader .status-text.queued {
    color: #6c757d;
}

.file-uploader .status-text.processing {
    color: #007bff;
}

.file-uploader .status-text.complete {
    color: #28a745;
}

.file-uploader .status-text.error {
    color: #dc3545;
}

.file-uploader .status-text.warning {
    color: #ff9800;
}

/* Accordion toggle */
.file-uploader .accordion-toggle {
    cursor: pointer;
    padding: 5px 10px;
    border: none;
    background: none;
    transition: transform 0.2s;
}

    .file-uploader .accordion-toggle.expanded {
        transform: rotate(90deg);
    }

/* Error accordion row */
.file-uploader .error-accordion-row {
    display: none;
}

    .file-uploader .error-accordion-row.expanded {
        display: table-row;
    }

/* Error summary header */
.file-uploader .error-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.file-uploader .error-count .errors {
    color: #dc3545;
    font-weight: bold;
}

.file-uploader .error-count .warnings {
    color: #ff9800;
    font-weight: bold;
}

/* Hidden uploader rows - functional visibility */
.file-uploader .upload-row.hidden-uploader {
    display: none;
}

.file-uploader .error-accordion-row.hidden-uploader {
    display: none !important;
}

/* Remove file button */
.file-uploader .remove-file-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

/* View-only file list */
.file-uploader .view-only-files ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.file-uploader .view-only-files li {
    padding: 3px 0;
}

.file-uploader .no-files-text {
    color: #6c757d;
    font-style: italic;
}

/* ========================================
       DEV Test Generator Styles
       ======================================== */

/* Container for file drop + test toggle */
.file-uploader .file-drop-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .file-uploader .file-drop-container .file-drop-area,
    .file-uploader .file-drop-container > div:first-child {
        flex: 1;
    }

/* Bug toggle button - fixed size, centered */
.file-uploader .test-gen-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
    font-size: 16px;
}

    .file-uploader .test-gen-toggle-btn:hover {
        background: #e8e8e8;
        color: #666;
    }

    .file-uploader .test-gen-toggle-btn.active {
        background: #d4edda;
        border-color: #28a745;
        color: #28a745;
    }

        .file-uploader .test-gen-toggle-btn.active:hover {
            background: #c3e6cb;
        }

/* Test generator panel (replaces file drop when active) */
.file-uploader .test-gen-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    flex: 1;
}

.file-uploader .test-gen-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    min-width: 150px;
}

.file-uploader .test-gen-actions {
    display: flex;
    gap: 4px;
}

.file-uploader .test-gen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    color: #495057;
}

    .file-uploader .test-gen-btn:hover:not(:disabled) {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    .file-uploader .test-gen-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Icon colors for different actions */
    .file-uploader .test-gen-btn .fa-flask {
        color: #6f42c1;
    }

    .file-uploader .test-gen-btn .fa-file-csv {
        color: #28a745;
    }

    .file-uploader .test-gen-btn .fa-download {
        color: #007bff;
    }

    .file-uploader .test-gen-btn .fa-upload {
        color: #fd7e14;
    }

/* Error table styling - remove borders and center number columns */
.file-uploader [id^="error-table-"] {
    border-collapse: collapse;
}

    .file-uploader [id^="error-table-"] td,
    .file-uploader [id^="error-table-"] th {
        border: none;
    }

        .file-uploader [id^="error-table-"] th:nth-child(3),
        .file-uploader [id^="error-table-"] th:nth-child(4),
        .file-uploader [id^="error-table-"] td:nth-child(3),
        .file-uploader [id^="error-table-"] td:nth-child(4) {
            text-align: center;
        }