/* ============================================
   LineupIQ Import System
   ============================================ */

/* Import Input Section */
.import-input-section {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.import-options {
    flex: 1;
}

/* Import Section Tabs - with template link on right */
.import-option-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.import-option-tabs-left {
    display: flex;
    gap: 0.5rem;
}

.import-option-tab {
    padding: 0.5rem 1rem;
    background: var(--liq-bg-tertiary);
    border: 1px solid var(--liq-border-color);
    border-radius: 6px;
    color: var(--liq-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .import-option-tab:hover {
        border-color: var(--liq-accent-green);
        color: var(--liq-text-primary);
    }

    .import-option-tab.active {
        background: rgba(16, 185, 129, 0.1);
        border-color: var(--liq-accent-green);
        color: var(--liq-accent-green);
    }

/* Template download link */
.import-template-link {
    font-size: 0.8rem;
    color: var(--liq-text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

    .import-template-link:hover {
        color: var(--liq-accent-green);
    }

    .import-template-link i {
        font-size: 0.85rem;
    }

.import-option-content {
    display: none;
}

    .import-option-content.active {
        display: block;
    }

/* Import Paste Area */
.import-paste-area {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 1px solid var(--liq-border-color);
    border-radius: 6px;
    background: var(--liq-bg-primary);
    color: var(--liq-text-primary);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    resize: vertical;
}

    .import-paste-area:focus {
        outline: none;
        border-color: var(--liq-accent-green);
    }

    .import-paste-area::placeholder {
        color: var(--liq-text-secondary);
        opacity: 0.7;
    }

/* File Drop Zone */
.import-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    border: 2px dashed var(--liq-border-color);
    border-radius: 8px;
    background: var(--liq-bg-primary);
    transition: all 0.15s ease;
    text-align: center;
    gap: 0.5rem;
}

    .import-file-drop:hover,
    .import-file-drop.drag-over {
        border-color: var(--liq-accent-green);
        background: rgba(16, 185, 129, 0.05);
    }

    .import-file-drop i {
        font-size: 2.5rem;
        color: var(--liq-text-secondary);
        margin-bottom: 0.5rem;
    }

    .import-file-drop p {
        margin: 0;
        color: var(--liq-text-primary);
        font-weight: 500;
    }

    .import-file-drop span {
        color: var(--liq-text-secondary);
        font-size: 0.85rem;
    }

/* File Info Display */
.import-file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--liq-accent-green);
    border-radius: 6px;
}

    .import-file-info i {
        font-size: 1.5rem;
    }

    .import-file-info span {
        flex: 1;
        font-weight: 500;
        color: var(--liq-text-primary);
    }

.import-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--liq-border-color);
}

/* Preview Section */
.import-preview-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Combined Mapping & Summary Row */
.import-mapping-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--liq-bg-tertiary);
    border-bottom: 1px solid var(--liq-border-color);
    flex-wrap: wrap;
}

    .import-mapping-section h6 {
        display: none; /* Hide the header to save space */
    }

.import-mapping-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.import-mapping-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .import-mapping-item label {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--liq-text-secondary);
        font-weight: 600;
        white-space: nowrap;
    }

    .import-mapping-item select {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
        border: 1px solid var(--liq-border-color);
        border-radius: 4px;
        background: var(--liq-bg-secondary);
        color: var(--liq-text-primary);
        min-width: 110px;
    }

        .import-mapping-item select:focus {
            outline: none;
            border-color: var(--liq-accent-green);
        }

/* Summary - now inline with mapping */
.import-summary {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.import-summary-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.import-summary-value {
    font-size: 0.9rem;
    font-weight: 700;
}

.import-summary-label {
    font-size: 0.75rem;
    color: var(--liq-text-secondary);
}

/* Preview Table */
.import-preview-table-container {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.import-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .import-preview-table thead {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .import-preview-table th {
        padding: 0.5rem 0.75rem;
        text-align: center;
        background: var(--liq-bg-tertiary);
        color: var(--liq-text-secondary);
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        border-bottom: 1px solid var(--liq-border-color);
        border-right: 1px solid var(--liq-border-color);
        white-space: nowrap;
    }

        .import-preview-table th:last-child {
            border-right: none;
        }

    .import-preview-table td {
        padding: 0.45rem 0.75rem;
        border-bottom: 1px solid var(--liq-border-color);
        border-right: 1px solid var(--liq-border-color);
        color: var(--liq-text-primary);
        text-align: center;
    }

        .import-preview-table td:last-child {
            border-right: none;
        }

        /* Player name column - left aligned */
        .import-preview-table td.col-player {
            text-align: left;
        }

    .import-preview-table tbody tr:hover {
        background: var(--liq-bg-hover);
    }

    .import-preview-table tbody tr.row-matched {
        background: rgba(16, 185, 129, 0.05);
    }

    .import-preview-table tbody tr.row-unmatched {
        background: rgba(255, 193, 7, 0.08);
        opacity: 0.7;
    }

/* Match Status Indicators */
.import-match-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

    .import-match-status.matched {
        background: rgba(16, 185, 129, 0.15);
        color: var(--liq-accent-green);
    }

    .import-match-status.unmatched {
        background: rgba(255, 193, 7, 0.15);
        color: #d69e00;
    }

/* Footer Actions */
.import-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: var(--liq-bg-tertiary);
    border-top: 1px solid var(--liq-border-color);
}

.import-footer-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.import-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--liq-text-secondary);
    cursor: pointer;
}

    .import-checkbox input {
        accent-color: var(--liq-accent-green);
    }

/* Mobile Responsive */
@media (max-width: 768px) {
    .import-mapping-section {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .import-mapping-grid {
        flex-direction: column;
        gap: 0.5rem;
    }

    .import-mapping-item {
        justify-content: space-between;
        width: 100%;
    }

        .import-mapping-item label {
            min-width: 80px;
        }

        .import-mapping-item select {
            flex: 1;
            margin-left: 0.5rem;
        }

    .import-summary {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
        text-align: center;
    }
}

/* ============================================
   Import Grid Section (AG Grid based)
   ============================================ */

.import-grid-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.import-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: var(--liq-bg-tertiary);
    border-bottom: 1px solid var(--liq-border-color);
    flex-shrink: 0;
}

.import-summary-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.import-summary-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.import-summary-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
}

    .import-summary-stat i {
        font-size: 0.9rem;
    }

    .import-summary-stat strong {
        font-weight: 700;
    }

/* Import Grid Styling */
#importPreviewGrid {
    --ag-row-height: 36px;
    --ag-header-height: 42px;
}

    #importPreviewGrid .ag-header-cell {
        padding: 0;
    }

    #importPreviewGrid .ag-row.row-matched {
        background-color: rgba(16, 185, 129, 0.06);
    }

    #importPreviewGrid .ag-row.row-unmatched {
        background-color: rgba(255, 193, 7, 0.08);
        opacity: 0.75;
    }

    #importPreviewGrid .ag-row:not(.ag-row-selected) {
        opacity: 1;
        background-color: var(--liq-bg-secondary);
    }

    #importPreviewGrid .ag-row.row-unmatched:not(.ag-row-selected) {
        opacity: 0.75;
        background-color: rgba(255, 193, 7, 0.08);
    }

/* Import Column Header with Dropdown */
.import-header-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 4px 6px;
}

.import-header-select {
    width: 100%;
    padding: 3px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid var(--liq-border-color);
    border-radius: 4px;
    background: var(--liq-bg-secondary);
    color: var(--liq-text-primary);
    cursor: pointer;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%236c757d' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 18px;
}

    .import-header-select:focus {
        outline: none;
        border-color: var(--liq-accent-green);
    }

    .import-header-select.mapped {
        border-color: var(--liq-accent-green);
        background-color: rgba(16, 185, 129, 0.1);
        color: var(--liq-accent-green);
    }

    .import-header-select.unmapped {
        color: var(--liq-text-secondary);
    }

.import-header-original {
    font-size: 0.65rem;
    color: var(--liq-text-secondary);
    text-align: center;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Match status cell */
.import-match-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.import-match-icon {
    font-size: 1rem;
}

    .import-match-icon.matched {
        color: var(--liq-accent-green);
    }

    .import-match-icon.unmatched {
        color: #d69e00;
    }

/* Editable import cells */
#importPreviewGrid .import-editable-cell {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 0.85rem;
    color: var(--liq-text-primary);
    padding: 0 8px;
}

    #importPreviewGrid .import-editable-cell:focus {
        outline: none;
        background: var(--liq-bg-primary);
    }

/* ============================================
   Import Grid Responsive Improvements
   ============================================ */

/* Summary bar responsive */
.import-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--liq-bg-tertiary);
    border-bottom: 1px solid var(--liq-border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.import-summary-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.import-summary-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.import-summary-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

    .import-summary-stat i {
        font-size: 0.9rem;
    }

    .import-summary-stat strong {
        font-weight: 700;
    }

/* Back button text hidden on mobile */
#importBackBtn .back-btn-text {
    margin-left: 0.25rem;
}

/* Modal sizing improvements */
#projectionsImportModal .slate-modal-content {
    max-width: 1000px;
    width: 95%;
    height: 85vh;
    max-height: 750px;
}

/* Tablet and below */
@media (max-width: 768px) {
    /* Hide "Back" text, show only arrow */
    #importBackBtn .back-btn-text {
        display: none;
    }

    #importBackBtn {
        padding: 0.375rem 0.5rem;
    }

    /* Compress summary stats */
    .import-summary-left {
        gap: 0.75rem;
    }

    .import-summary-stat {
        font-size: 0.8rem;
    }

        .import-summary-stat i {
            font-size: 0.85rem;
        }

    /* Stack summary on very small screens */
    .import-summary-bar {
        padding: 0.5rem 0.75rem;
    }

    /* Modal takes more screen */
    #projectionsImportModal .slate-modal-content {
        width: 98%;
        height: 90vh;
        max-height: none;
        border-radius: 8px;
    }

    /* Grid headers smaller */
    .import-header-select {
        font-size: 0.65rem;
        padding: 2px 4px;
        padding-right: 14px;
    }

    .import-header-original {
        font-size: 0.6rem;
    }

    #importPreviewGrid {
        --ag-row-height: 32px;
        --ag-header-height: 38px;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    /* Stack summary sections vertically */
    .import-summary-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .import-summary-left {
        justify-content: space-between;
    }

    .import-summary-right {
        justify-content: flex-end;
    }

    /* Smaller stats */
    .import-summary-stat {
        font-size: 0.75rem;
    }

        /* Hide total count on very small screens */
        .import-summary-stat.text-muted {
            display: none;
        }

    /* Input section padding */
    .import-input-section {
        padding: 1rem;
    }

    .import-paste-area {
        min-height: 150px;
        font-size: 0.8rem;
    }

    /* Footer adjustments */
    #importModalFooter {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #importOnlyMatchedLabel {
        font-size: 0.8rem;
    }
}

/* Position column styling */
.import-position-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-position-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.15);
    color: var(--liq-accent-green);
    min-width: 40px;
}

/* Position dropdown in grid */
#importPreviewGrid .ag-cell-edit-wrapper {
    padding: 0;
}

#importPreviewGrid .ag-select {
    height: 100%;
}

/* Sync notice banner */
.import-sync-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--liq-text-secondary);
    font-size: 0.8rem;
}

    .import-sync-notice i {
        color: #3b82f6;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .import-sync-notice strong {
        color: var(--liq-text-primary);
    }

/* Import Field Summary */
.import-field-summary {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    padding: 0.375rem 0.75rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
}

    .import-field-summary i {
        color: var(--bs-info);
    }

    .import-field-summary .field-badge {
        display: inline-block;
        padding: 0.125rem 0.5rem;
        margin-left: 0.25rem;
        background: rgba(var(--bs-success-rgb), 0.1);
        color: var(--bs-success);
        border-radius: 0.25rem;
        font-weight: 500;
        font-size: 0.75rem;
    }

/* Spacer to push checkbox and button to the right */
.import-footer-spacer {
    flex: 1;
}