/**
 * Consignor List Component Styles
 * Follows auction-detail.css patterns
 */

/* ========================================
   Tab Navigation
   ======================================== */

.consignor-tabs {
    margin-bottom: 0;
    border-bottom: none;
    padding: 0 1rem;
    background: var(--bs-gray-50, #f8f9fa);
}

.consignor-tabs .nav-link {
    border-radius: 0;
    border-bottom: 3px solid transparent;
    color: var(--bs-secondary, #6c757d);
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.consignor-tabs .nav-link:hover {
    border-color: var(--bs-gray-300, #dee2e6);
    color: var(--bs-body-color, #212529);
}

.consignor-tabs .nav-link.active {
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
    background: transparent;
}

.consignor-tabs .badge {
    font-size: 0.75rem;
    font-weight: 500;
}

/* ========================================
   Status Filters
   ======================================== */

.status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-gray-200, #e9ecef);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--bs-gray-300, #dee2e6);
    border-radius: 50px;
    background: white;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-gray-700, #495057);
    cursor: pointer;
    transition: all 0.2s ease;
}

.status-pill:hover {
    background: var(--bs-gray-100, #f8f9fa);
}

.status-pill.active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: white;
}

.status-pill__count {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Status Pill Variants - Candidate States */
.status-pill--pending { border-color: #6c757d; }
.status-pill--pending.active { background-color: #6c757d; border-color: #6c757d; }

.status-pill--needs-work { border-color: #ffc107; }
.status-pill--needs-work.active { background-color: #ffc107; border-color: #ffc107; color: #212529; }

.status-pill--approved { border-color: #198754; }
.status-pill--approved.active { background-color: #198754; border-color: #198754; }

/* Status Pill Variants - Auction States */
.status-pill--live { border-color: #0d6efd; }
.status-pill--live.active { background-color: #0d6efd; border-color: #0d6efd; }

.status-pill--sold { border-color: #198754; }
.status-pill--sold.active { background-color: #198754; border-color: #198754; }

.status-pill--paid { border-color: #20c997; }
.status-pill--paid.active { background-color: #20c997; border-color: #20c997; }

.status-pill--unsold { border-color: #6c757d; }
.status-pill--unsold.active { background-color: #6c757d; border-color: #6c757d; }

.status-pill--reserve { border-color: #fd7e14; }
.status-pill--reserve.active { background-color: #fd7e14; border-color: #fd7e14; }

/* Status Pill Variants - Issue Categories */
.status-pill--photos { border-color: #6f42c1; }
.status-pill--photos.active { background-color: #6f42c1; border-color: #6f42c1; }

.status-pill--documents { border-color: #0dcaf0; }
.status-pill--documents.active { background-color: #0dcaf0; border-color: #0dcaf0; color: #212529; }

.status-pill--keys { border-color: #fd7e14; }
.status-pill--keys.active { background-color: #fd7e14; border-color: #fd7e14; }

.status-pill--mechanical { border-color: #dc3545; }
.status-pill--mechanical.active { background-color: #dc3545; border-color: #dc3545; }

.status-pill--paperwork { border-color: #198754; }
.status-pill--paperwork.active { background-color: #198754; border-color: #198754; }

.status-pill--other { border-color: #6c757d; }
.status-pill--other.active { background-color: #6c757d; border-color: #6c757d; }

/* ========================================
   Search
   ======================================== */

.auction-search {
    position: relative;
    padding: 0.75rem 1rem;
}

.auction-search__icon {
    position: absolute;
    left: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-gray-400, #ced4da);
}

.auction-search__input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    border: 1px solid var(--bs-gray-300, #dee2e6);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auction-search__input:focus {
    outline: none;
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* ========================================
   Table
   ======================================== */

.auction-table {
    width: 100%;
    border-collapse: collapse;
}

.auction-table th {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-gray-600, #6c757d);
    background: var(--bs-gray-50, #f8f9fa);
    border-bottom: 1px solid var(--bs-gray-200, #e9ecef);
}

.auction-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-gray-100, #f8f9fa);
}

/* ========================================
   Row Styles
   ======================================== */

.consignor-row {
    cursor: pointer;
    transition: background 0.2s ease;
}

.consignor-row:hover {
    background: var(--bs-gray-50, #f8f9fa);
}

.consignor-row.expanded {
    background: var(--bs-gray-100, #f8f9fa);
}

/* Row Highlighting by Status */
.consignor-row--needs-work {
    border-left: 3px solid #ffc107;
}

.consignor-row--live {
    border-left: 3px solid #0d6efd;
}

.consignor-row--sold,
.consignor-row--paid {
    border-left: 3px solid #198754;
}

.consignor-row--unsold {
    border-left: 3px solid #6c757d;
}

.consignor-row--approved {
    border-left: 3px solid #20c997;
}

.consignor-row--pending {
    border-left: 3px solid #adb5bd;
}

/* Expand Button */
.expand-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--bs-gray-300, #dee2e6);
    border-radius: 4px;
    background: white;
    font-size: 0.875rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.expand-btn:hover {
    background: var(--bs-gray-100, #f8f9fa);
}

/* ========================================
   Status Badges
   ======================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

/* Candidate Status Badges */
.status-badge--pending {
    background-color: #6c757d;
    color: white;
}

.status-badge--needs-work {
    background-color: #ffc107;
    color: #212529;
}

.status-badge--approved {
    background-color: #198754;
    color: white;
}

.status-badge--rejected {
    background-color: #dc3545;
    color: white;
}

/* Auction Status Badges */
.status-badge--live {
    background-color: #0d6efd;
    color: white;
    animation: pulse 2s infinite;
}

.status-badge--sold {
    background-color: #198754;
    color: white;
}

.status-badge--paid {
    background-color: #20c997;
    color: white;
}

.status-badge--unsold {
    background-color: #6c757d;
    color: white;
}

.status-badge--reserve {
    background-color: #fd7e14;
    color: white;
}

.status-badge--scheduled {
    background-color: #0dcaf0;
    color: #212529;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ========================================
   Issue Category Badges
   ======================================== */

.issue-category {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.issue-category--photos {
    background-color: #6f42c1;
    color: white;
}

.issue-category--documents {
    background-color: #0dcaf0;
    color: #212529;
}

.issue-category--keys {
    background-color: #fd7e14;
    color: white;
}

.issue-category--mechanical {
    background-color: #dc3545;
    color: white;
}

.issue-category--paperwork {
    background-color: #198754;
    color: white;
}

.issue-category--other {
    background-color: #6c757d;
    color: white;
}

/* ========================================
   Vehicle Info
   ======================================== */

.vehicle-info {
    min-width: 0;
}

.vehicle-title {
    font-weight: 500;
    color: var(--bs-body-color, #212529);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-meta {
    font-size: 0.8125rem;
    color: var(--bs-gray-600, #6c757d);
}

/* VIN Code */
.vin-code {
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background-color: var(--bs-gray-100, #f8f9fa);
    border-radius: 0.25rem;
}

/* Current Bid */
.current-bid {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bs-success, #198754);
}

.bid-count {
    font-size: 0.75rem;
}

/* ========================================
   Detail Panel
   ======================================== */

.detail-row {
    background: var(--bs-gray-50, #f8f9fa);
}

.detail-panel {
    padding: 1.5rem;
    border-top: 1px solid var(--bs-gray-200, #e9ecef);
}

.detail-panel--needs-work {
    border-left: 4px solid #ffc107;
}

.detail-panel--live {
    border-left: 4px solid #0d6efd;
}

/* No Image Placeholder */
.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    background: var(--bs-gray-200, #e9ecef);
    border-radius: 0.375rem;
    color: var(--bs-gray-400, #ced4da);
    font-size: 3rem;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.info-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-gray-500, #adb5bd);
    text-transform: uppercase;
}

.info-value {
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
}

/* Issues Panel */
.issues-panel {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
}

.vehicle-issues-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vehicle-issues-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 193, 7, 0.2);
}

.vehicle-issues-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.vehicle-issues-list .issue-category {
    flex-shrink: 0;
    padding: 0.25rem;
    font-size: 0.625rem;
}

.vehicle-issues-list .issue-desc {
    font-size: 0.8125rem;
    color: var(--bs-gray-700, #495057);
}

/* Success/Pending Panels */
.success-panel,
.pending-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--bs-gray-600, #6c757d);
}

.success-panel i,
.pending-panel i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.success-panel {
    background: rgba(25, 135, 84, 0.1);
    border-radius: 0.5rem;
}

.success-panel i {
    color: var(--bs-success, #198754);
}

.pending-panel {
    background: var(--bs-gray-100, #f8f9fa);
    border-radius: 0.5rem;
}

/* ========================================
   Empty State
   ======================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--bs-gray-500, #adb5bd);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: 0.9375rem;
}

.empty-row td {
    padding: 0 !important;
}

/* ========================================
   Footer
   ======================================== */

.auction-table-footer {
    padding: 0.75rem 1rem;
    background: var(--bs-gray-50, #f8f9fa);
    border-top: 1px solid var(--bs-gray-200, #e9ecef);
}

.results-count {
    font-size: 0.8125rem;
    color: var(--bs-gray-600, #6c757d);
}

/* ========================================
   Issue Rows
   ======================================== */

.issue-row {
    cursor: default;
}

.issue-row:hover {
    background: var(--bs-gray-50, #f8f9fa);
}

.issue-description {
    font-size: 0.875rem;
    color: var(--bs-gray-700, #495057);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .status-filters {
        padding: 0.75rem;
    }

    .status-pill {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .auction-table th,
    .auction-table td {
        padding: 0.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .detail-panel {
        padding: 1rem;
    }
}