/* Excel Lookup Plugin Frontend Styles - Bootstrap 5 Compatible */

.excel-lookup-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 20px 15px;
    font-family: inherit;
}

.excel-lookup-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Full width container for many columns */
.excel-lookup-fullwidth {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0 15px;
}

.search-form-section {
    background: var(--bs-light, #f8f9fa);
    padding: 2rem;
    border-radius: var(--bs-border-radius, 0.375rem);
    margin-bottom: 2rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.search-form-section h3 {
    margin: 0 0 1.5rem 0;
    color: var(--bs-dark, #212529);
    font-size: 1.75rem;
    font-weight: 600;
}

.excel-search-form {
    margin: 0;
}

/* Bootstrap 5 compatible search input */
.search-input-group {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius, 0.375rem);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-body-bg, #fff);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.search-input:focus {
    outline: 0;
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.search-button {
    padding: 0.75rem 1.5rem;
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
    border: 1px solid var(--bs-primary, #0d6efd);
    border-radius: var(--bs-border-radius, 0.375rem);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    white-space: nowrap;
}

.search-button:hover {
    background-color: var(--bs-primary-hover, #0b5ed7);
    border-color: var(--bs-primary-hover, #0a58ca);
}

.search-button:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

.search-button:active {
    background-color: var(--bs-primary-active, #0a58ca);
    border-color: var(--bs-primary-active, #0a53be);
    transform: translateY(0);
}

.search-button:disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* Results Section */
.search-results {
    margin-top: 1.5rem;
}

.search-results.loading {
    text-align: center;
    padding: 3rem;
    color: var(--bs-text-muted, #6c757d);
}

.results-found {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}

.results-found h4 {
    margin: 0 0 1.5rem 0;
    color: var(--bs-success, #198754);
    font-size: 1.25rem;
    font-weight: 600;
}

/* Bootstrap 5 compatible table */
.result-table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--bs-body-color, #212529);
    vertical-align: top;
    border-color: var(--bs-border-color, #dee2e6);
    border-collapse: collapse;
}

.result-table > :not(caption) > * > * {
    padding: 0.75rem;
    background-color: var(--bs-table-bg, transparent);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg, transparent);
}

.result-table > tbody {
    vertical-align: inherit;
}

.result-table > thead {
    vertical-align: bottom;
}

.result-table th {
    background-color: var(--bs-table-bg, #f8f9fa);
    font-weight: 600;
    color: var(--bs-dark, #212529);
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
}

.result-table td {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.result-table > :not(:first-child) {
    border-top: 2px solid currentColor;
}

.result-table tbody tr:hover {
    background-color: var(--bs-table-hover-bg, rgba(0,0,0,0.075));
}

/* Horizontal scroll for many columns */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive .result-table {
    min-width: 800px;
}

.no-results {
    text-align: center;
    padding: 3rem;
    color: var(--bs-danger, #dc3545);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
}

.no-results h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--bs-danger, #dc3545);
}

/* Error and Success Messages - Bootstrap Alert Style */
.error-message {
    position: relative;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

.success-message {
    position: relative;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

/* Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.125em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* Responsive Design - Bootstrap Breakpoints */
@media (max-width: 575.98px) {
    .excel-lookup-wrapper {
        padding: 15px 10px;
    }
    
    .search-form-section {
        padding: 1.5rem;
    }
    
    .search-input-group {
        flex-direction: column;
        gap: 1rem;
    }
    
    .search-input,
    .search-button {
        width: 100%;
    }
    
    .result-table {
        font-size: 0.875rem;
    }
    
    .result-table th,
    .result-table td {
        padding: 0.5rem 0.25rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .result-table {
        font-size: 0.9rem;
    }
    
    .result-table th,
    .result-table td {
        padding: 0.6rem 0.4rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .excel-lookup-wrapper {
        padding: 20px;
    }
}

@media (min-width: 992px) {
    .excel-lookup-wrapper {
        padding: 30px 20px;
    }
    
    /* For large screens with many columns, enable horizontal scroll */
    .table-responsive .result-table {
        min-width: 1200px;
    }
}

@media (min-width: 1200px) {
    .table-responsive .result-table {
        min-width: 1400px;
    }
}

/* Custom scrollbar for table */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--bs-gray-200, #e9ecef);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400, #ced4da);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500, #adb5bd);
}

/* Print styles */
@media print {
    .search-form-section {
        display: none;
    }
    
    .excel-lookup-wrapper {
        width: 100%;
        padding: 0;
    }
    
    .result-table {
        font-size: 12px;
    }
    
    .result-table th,
    .result-table td {
        padding: 4px;
    }
}