/* ============================================
   ImportPanel v5.0 - Suppliers Directory Page
   ============================================ */

/* ---- Page Wrapper ---- */
.suppliers-page {
    max-width: 100%;
}

/* ---- Stat Cards: 5-column for suppliers ---- */
.suppliers-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.suppliers-stats .fin-card--total::before { background: var(--color-primary); }
.suppliers-stats .fin-card--active::before { background: var(--color-success); }
.suppliers-stats .fin-card--rating::before { background: var(--color-warning); }
.suppliers-stats .fin-card--value::before { background: #8b5cf6; }
.suppliers-stats .fin-card--imports::before { background: #06b6d4; }

.suppliers-stats .fin-card--total .fin-card-icon { background: var(--color-primary-light); color: var(--color-primary); }
.suppliers-stats .fin-card--active .fin-card-icon { background: var(--color-success-light); color: var(--color-success); }
.suppliers-stats .fin-card--rating .fin-card-icon { background: var(--color-warning-light); color: var(--color-warning); }
.suppliers-stats .fin-card--value .fin-card-icon { background: #ede9fe; color: #8b5cf6; }
.suppliers-stats .fin-card--imports .fin-card-icon { background: #e0f7fa; color: #06b6d4; }

/* ---- Toolbar Sort Controls ---- */
.suppliers-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.suppliers-sort-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.suppliers-sort-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

.suppliers-sort-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    transition: border-color 150ms ease;
}

.suppliers-sort-select:focus {
    outline: none;
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.suppliers-sort-dir-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.suppliers-sort-dir-btn:hover {
    border-color: var(--color-primary, #3b82f6);
    color: var(--color-primary, #3b82f6);
    background: var(--color-primary-light, #eff6ff);
}

.suppliers-sort-dir-btn svg {
    flex-shrink: 0;
}

/* ---- View Toggle ---- */
.supplier-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary, #f8fafc);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    border-radius: 6px;
    transition: all 150ms ease;
}

.view-toggle-btn:hover {
    background: var(--bg-hover, #e2e8f0);
    color: var(--text-primary, #1e293b);
}

.view-toggle-btn.active {
    background: var(--bg-primary, #fff);
    color: var(--color-primary, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ---- Grid View ---- */
.suppliers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 1400px) {
    .suppliers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .suppliers-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Supplier Card ---- */
.supplier-card {
    position: relative;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 250ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.supplier-card:hover {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* ---- Supplier Avatar ---- */
.supplier-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ---- Status Indicator Dot ---- */
.supplier-status-dot {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.supplier-status-dot.status-active {
    background: var(--color-success, #22c55e);
}

.supplier-status-dot.status-inactive {
    background: var(--color-warning, #f59e0b);
}

.supplier-status-dot.status-dormant {
    background: var(--color-danger, #ef4444);
}

/* ---- Card Name ---- */
.supplier-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.supplier-card-name mark {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-primary, #3b82f6);
    padding: 2px 4px;
    border-radius: 3px;
}

/* ---- Card Contact Icons ---- */
.supplier-card-contact {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.supplier-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    transition: all 150ms ease;
}

.supplier-contact-icon:hover {
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #3b82f6);
    transform: scale(1.1);
}

/* ---- Card Metrics ---- */
.supplier-card-metrics {
    display: flex;
    gap: 24px;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.supplier-metric {
    text-align: center;
}

.supplier-metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin-bottom: 4px;
}

.supplier-metric-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- On-Time Delivery Gauge ---- */
.supplier-gauge-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 16px auto;
}

.supplier-gauge {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.supplier-gauge-bg {
    fill: none;
    stroke: var(--bg-secondary, #f1f5f9);
    stroke-width: 4;
}

.supplier-gauge-fill {
    fill: none;
    stroke: var(--color-success, #22c55e);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 800ms ease;
}

.supplier-gauge-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary, #1e293b);
    line-height: 1;
}

.supplier-gauge-sublabel {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    white-space: nowrap;
}

/* ---- Mini Chart ---- */
.supplier-mini-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 40px;
    margin: 16px 0 6px;
}

.mini-chart-bar {
    flex: 1;
    max-width: 20px;
    background: linear-gradient(to top, var(--color-primary, #3b82f6), rgba(59, 130, 246, 0.6));
    border-radius: 3px 3px 0 0;
    transition: all 300ms ease;
}

.supplier-card:hover .mini-chart-bar {
    background: linear-gradient(to top, var(--color-success, #22c55e), rgba(34, 197, 94, 0.6));
}

.supplier-mini-chart-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 16px;
}

/* ---- Card Actions ---- */
.supplier-card-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: auto;
}

.supplier-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.supplier-action-btn:hover {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary, #3b82f6);
    color: var(--color-primary, #3b82f6);
}

.supplier-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.supplier-action-imports {
    flex: 1.2;
}

.supplier-action-edit {
    flex: 0;
    padding: 10px;
}

/* ---- Card Skeleton ---- */
.supplier-card-skeleton {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 24px;
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, #94a3b8);
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0 0 8px 0;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    margin: 0 0 24px 0;
}

/* ---- Content Area: Table + Detail Panel ---- */
.suppliers-content-area {
    display: flex;
    gap: 0;
    position: relative;
}

.suppliers-table-wrapper {
    flex: 1;
    min-width: 0;
    transition: margin-right 250ms ease;
}

.suppliers-content-area .supplier-detail-panel.open ~ .suppliers-table-wrapper,
.suppliers-table-wrapper:has(~ .supplier-detail-panel.open) {
    /* handled by JS flex layout */
}

/* ---- Star Rating Component ---- */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.star-rating-star {
    font-size: 16px;
    color: #d1d5db;
    transition: color 150ms ease;
    user-select: none;
    -webkit-user-select: none;
}

.star-rating-star.active {
    color: #f59e0b;
}

/* Read-only stars in table and stat cards */
.star-rating--readonly .star-rating-star {
    cursor: default;
}

/* Inline stars in stat cards */
.star-rating--inline {
    margin-left: 6px;
    vertical-align: middle;
}

.star-rating--inline .star-rating-star {
    font-size: 14px;
}

/* Interactive form star rating */
.star-rating--form {
    padding: 8px 0 4px;
    gap: 4px;
}

.star-rating--form .star-rating-star {
    font-size: 28px;
    cursor: pointer;
    color: #d1d5db;
    transition: color 150ms ease, transform 150ms ease;
}

.star-rating--form .star-rating-star.active {
    color: #f59e0b;
}

.star-rating--form .star-rating-star.hover {
    color: #f59e0b;
    transform: scale(1.15);
}

.star-rating--form .star-rating-star:active {
    transform: scale(0.95);
}

/* ---- Import count badge in table ---- */
.supplier-import-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #3b82f6);
    font-size: 12px;
    font-weight: 600;
}

/* ---- Last import date in table ---- */
.supplier-last-import {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

/* ---- Email Link ---- */
.supplier-email-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--transition-fast);
}

.supplier-email-link:hover {
    color: var(--color-primary-dark, var(--color-primary));
    text-decoration: underline;
}

/* ---- Supplier Form Grid ---- */
.supplier-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.supplier-form-grid .input-group.full-width {
    grid-column: 1 / -1;
}

/* ============================================
   Detail Panel
   ============================================ */
.supplier-detail-panel {
    width: 420px;
    min-width: 420px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    padding: 0;
    margin-left: 16px;
    transform: translateX(30px);
    opacity: 0;
    transition: transform 250ms ease, opacity 250ms ease;
}

.supplier-detail-panel.open {
    transform: translateX(0);
    opacity: 1;
}

/* ---- Detail Header ---- */
.supplier-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.supplier-detail-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.supplier-detail-title h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-detail-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    border-radius: 6px;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.supplier-detail-close:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

/* ---- Detail Info ---- */
.supplier-detail-info {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.supplier-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.supplier-detail-row + .supplier-detail-row {
    border-top: 1px solid var(--border-light, #f1f5f9);
}

.supplier-detail-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.supplier-detail-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.supplier-detail-value svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary, #64748b);
}

/* ---- Mini Stats Row in Detail Panel ---- */
.supplier-detail-mini-stats {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.supplier-mini-stat {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
}

.supplier-mini-stat-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin-bottom: 2px;
}

.supplier-mini-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    font-weight: 500;
}

/* ---- Detail Sections ---- */
.supplier-detail-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.supplier-detail-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px 0;
}

/* ---- Notatki (Notes) ---- */
.supplier-notes-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary, #1e293b);
    background: var(--bg-primary, #fff);
    resize: vertical;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.supplier-notes-textarea:focus {
    outline: none;
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.supplier-notes-textarea::placeholder {
    color: var(--text-tertiary, #94a3b8);
}

.supplier-notes-status {
    font-size: 11px;
    margin-top: 6px;
    min-height: 16px;
    color: var(--text-tertiary, #94a3b8);
    transition: color 200ms ease;
}

.supplier-notes-status.saved {
    color: var(--color-success, #22c55e);
}

.supplier-notes-status.error {
    color: var(--color-danger, #ef4444);
}

/* ---- Imports List in Detail Panel ---- */
.supplier-imports-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.supplier-imports-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 13px;
}

.supplier-import-item {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    transition: background 150ms ease, border-color 150ms ease;
    cursor: default;
}

.supplier-import-item:hover {
    background: var(--bg-hover, #f1f5f9);
    border-color: var(--color-primary-light, #bfdbfe);
}

.supplier-import-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.supplier-import-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-import-item-details {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

/* ---- Detail Panel Actions ---- */
.supplier-detail-actions {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
}

.supplier-detail-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-outline-danger {
    border: 1px solid var(--color-danger, #ef4444);
    color: var(--color-danger, #ef4444);
    background: transparent;
}

.btn-outline-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* ---- Text muted helper ---- */
.text-muted {
    color: var(--text-tertiary, #94a3b8);
}

/* ============================================
   Performance Score Badge (Table)
   ============================================ */
.perf-score-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 70px;
}

.perf-score-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--score-color, #3b82f6);
    min-width: 24px;
}

.perf-score-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 2px;
    overflow: hidden;
    min-width: 40px;
}

.perf-score-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 600ms ease;
}

/* ---- Table Sparkline ---- */
.table-sparkline-svg {
    display: block;
    vertical-align: middle;
}

/* ============================================
   Comparison Mode
   ============================================ */

/* Compare mode button */
.compare-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    transition: all 150ms ease;
}

.compare-mode-btn:hover {
    border-color: var(--color-primary, #3b82f6);
    color: var(--color-primary, #3b82f6);
    background: var(--color-primary-light, #eff6ff);
}

.compare-mode-btn.active {
    border-color: var(--color-primary, #3b82f6);
    background: var(--color-primary, #3b82f6);
    color: #fff;
}

/* Compare checkbox in table */
.compare-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary, #3b82f6);
}

/* Selected row in compare mode */
tr[data-compare-selected="true"] {
    background: var(--color-primary-light, #eff6ff) !important;
    border-left: 3px solid var(--color-primary, #3b82f6);
}

/* ============================================
   Comparison Panel
   ============================================ */
.supplier-compare-panel {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    margin-top: 20px;
    overflow: hidden;
    animation: compareSlideIn 300ms ease;
}

@keyframes compareSlideIn {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Compare panel header */
.compare-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.compare-panel-header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1e293b);
}

.compare-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    border-radius: 6px;
    transition: all 150ms ease;
}

.compare-panel-close:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

/* ---- Supplier Header Cards Row ---- */
.compare-suppliers-row {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.compare-supplier-card {
    flex: 1;
    text-align: center;
    padding: 20px 16px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.compare-supplier-card-color {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.compare-supplier-card h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 8px 0 4px;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-supplier-meta {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    margin-bottom: 12px;
}

.badge-sm {
    font-size: 10px;
    padding: 1px 6px;
}

/* ---- Score Ring ---- */
.compare-score-ring {
    width: 64px;
    height: 64px;
    margin: 8px auto;
    position: relative;
}

.compare-score-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.compare-score-bg {
    fill: none;
    stroke: var(--bg-hover, #e2e8f0);
    stroke-width: 3;
}

.compare-score-fg {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 800ms ease;
}

.compare-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.compare-score-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Metrics Table ---- */
.compare-metrics-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.compare-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 16px;
}

.compare-section-title svg {
    color: var(--text-secondary, #64748b);
}

.compare-metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.compare-metrics-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    white-space: nowrap;
}

.compare-metrics-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

.compare-metrics-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-metrics-table tbody tr:hover {
    background: var(--bg-hover, #f8fafc);
}

.compare-metric-label {
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

.compare-metric-value {
    font-weight: 600;
    text-align: left;
}

.compare-metric-value.compare-best {
    background: rgba(34, 197, 94, 0.08);
    border-radius: 4px;
}

.compare-best-badge {
    display: inline-flex;
    vertical-align: middle;
    color: #f59e0b;
    margin-left: 4px;
}

.compare-best-badge svg {
    width: 14px;
    height: 14px;
}

.compare-col-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.compare-score-inline {
    font-weight: 700;
}

/* ---- Comparison Chart ---- */
.compare-chart-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.compare-chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* ---- Sparklines Section ---- */
.compare-sparklines-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.compare-sparklines-row {
    display: flex;
    gap: 16px;
}

.compare-sparkline-card {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.compare-sparkline-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin-bottom: 8px;
}

.compare-sparkline-canvas {
    display: block;
    width: 100%;
    height: 40px;
}

/* ---- Supplier Map ---- */
.compare-map-section {
    padding: 20px 24px;
}

.compare-map-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 13px;
}

.supplier-map-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supplier-map-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.supplier-map-country {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    flex-shrink: 0;
}

.supplier-map-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.supplier-map-country-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
}

.supplier-map-bar-wrap {
    flex: 1;
    min-width: 0;
}

.supplier-map-bar {
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    min-width: 40px;
    transition: width 600ms ease;
}

.supplier-map-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.supplier-map-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    min-width: 90px;
    text-align: right;
    white-space: nowrap;
}

/* ---- Export button outline ---- */
.btn-outline {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 150ms ease;
}

.btn-outline:hover {
    border-color: var(--color-primary, #3b82f6);
    color: var(--color-primary, #3b82f6);
    background: var(--color-primary-light, #eff6ff);
}

/* ============================================
   Supplier Performance Analytics
   ============================================ */

/* On-time delivery badge */
.supplier-perf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.supplier-perf-badge.good {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success, #22c55e);
}

.supplier-perf-badge.ok {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.supplier-perf-badge.poor {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger, #ef4444);
}

.supplier-perf-badge.none {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-tertiary, #94a3b8);
}

/* Performance bar under supplier name */
.supplier-perf-bar {
    height: 3px;
    border-radius: 2px;
    margin-top: 4px;
    background: var(--color-border, #e2e8f0);
    overflow: hidden;
}

.supplier-perf-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Year count info text */
.supplier-year-count {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
    margin-top: 2px;
    white-space: nowrap;
}

/* Average value per import */
.supplier-avg-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

/* ---- Supplier Ranking Section ---- */
.supplier-ranking {
    margin-top: 20px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.supplier-ranking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.supplier-ranking-header h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.supplier-ranking-header h2 svg {
    color: #f59e0b;
}

.supplier-ranking-subtitle {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
}

.supplier-ranking-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.supplier-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    transition: background 150ms ease;
}

.supplier-ranking-item:last-child {
    border-bottom: none;
}

.supplier-ranking-item:hover {
    background: var(--bg-hover, #f8fafc);
}

.supplier-ranking-position {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    flex-shrink: 0;
}

.supplier-ranking-position.gold {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.supplier-ranking-position.silver {
    background: rgba(148, 163, 184, 0.2);
    color: #475569;
}

.supplier-ranking-position.bronze {
    background: rgba(180, 83, 9, 0.12);
    color: #b45309;
}

.supplier-ranking-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-ranking-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.supplier-ranking-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 70px;
}

.supplier-ranking-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.supplier-ranking-stat-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.supplier-ranking-bar-wrap {
    width: 80px;
    flex-shrink: 0;
}

.supplier-ranking-bar {
    height: 6px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}

.supplier-ranking-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* Ranking empty state */
.supplier-ranking-empty {
    text-align: center;
    padding: 24px 20px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 13px;
}

/* Detail panel performance section */
.supplier-detail-perf {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.supplier-detail-perf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.supplier-detail-perf-label {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    font-weight: 500;
}

.supplier-detail-perf-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

/* ============================================
   Dark Mode Overrides
   ============================================ */

/* Dark: performance badges */
[data-theme="dark"] .supplier-perf-badge.good {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

[data-theme="dark"] .supplier-perf-badge.ok {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .supplier-perf-badge.poor {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

[data-theme="dark"] .supplier-perf-badge.none {
    background: rgba(71, 85, 105, 0.3);
    color: #64748b;
}

[data-theme="dark"] .supplier-perf-bar {
    background: rgba(71, 85, 105, 0.4);
}

/* Dark: ranking */
[data-theme="dark"] .supplier-ranking {
    background: var(--bg-primary, #16161e);
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-ranking-header {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-ranking-item {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-ranking-item:hover {
    background: var(--bg-hover, #2a2a3a);
}

[data-theme="dark"] .supplier-ranking-position {
    background: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .supplier-ranking-position.gold {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .supplier-ranking-position.silver {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

[data-theme="dark"] .supplier-ranking-position.bronze {
    background: rgba(180, 83, 9, 0.15);
    color: #f59e0b;
}

[data-theme="dark"] .supplier-ranking-bar {
    background: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .supplier-detail-perf {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .star-rating-star:not(.active):not(.hover) {
    color: #4a4a5a;
}

[data-theme="dark"] .suppliers-sort-select {
    background: var(--bg-secondary, #1e1e2e);
    color: var(--text-primary, #e2e8f0);
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .suppliers-sort-select:focus {
    border-color: var(--color-primary, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .suppliers-sort-dir-btn {
    background: var(--bg-secondary, #1e1e2e);
    color: var(--text-secondary, #94a3b8);
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .suppliers-sort-dir-btn:hover {
    background: var(--bg-hover, #2a2a3a);
    color: var(--color-primary, #60a5fa);
    border-color: var(--color-primary, #60a5fa);
}

[data-theme="dark"] .supplier-detail-panel {
    background: var(--bg-primary, #16161e);
    border-color: var(--border-color, #2e2e3e);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .supplier-detail-header {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-detail-close:hover {
    background: var(--bg-hover, #2a2a3a);
}

[data-theme="dark"] .supplier-detail-info {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-detail-row + .supplier-detail-row {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-detail-mini-stats {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-mini-stat {
    background: var(--bg-secondary, #1e1e2e);
}

[data-theme="dark"] .supplier-detail-section {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-notes-textarea {
    background: var(--bg-secondary, #1e1e2e);
    color: var(--text-primary, #e2e8f0);
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-notes-textarea:focus {
    border-color: var(--color-primary, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .supplier-notes-textarea::placeholder {
    color: var(--text-tertiary, #4a4a5a);
}

[data-theme="dark"] .supplier-import-item {
    background: var(--bg-secondary, #1e1e2e);
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .supplier-import-item:hover {
    background: var(--bg-hover, #2a2a3a);
    border-color: var(--color-primary, #60a5fa);
}

[data-theme="dark"] .supplier-import-count {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

[data-theme="dark"] .suppliers-stats .fin-card--value .fin-card-icon {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

[data-theme="dark"] .suppliers-stats .fin-card--imports .fin-card-icon {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
}

[data-theme="dark"] .btn-outline-danger {
    border-color: var(--color-danger, #f87171);
    color: var(--color-danger, #f87171);
}

[data-theme="dark"] .btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* ---- Dark Mode: Performance Score ---- */
[data-theme="dark"] .perf-score-bar {
    background: rgba(71, 85, 105, 0.4);
}

/* ---- Dark Mode: Compare Mode Button ---- */
[data-theme="dark"] .compare-mode-btn {
    background: var(--bg-secondary, #1e1e2e);
    border-color: var(--border-color, #2e2e3e);
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .compare-mode-btn:hover {
    background: var(--bg-hover, #2a2a3a);
    border-color: var(--color-primary, #60a5fa);
    color: var(--color-primary, #60a5fa);
}

[data-theme="dark"] .compare-mode-btn.active {
    background: var(--color-primary, #3b82f6);
    color: #fff;
}

/* ---- Dark Mode: Compare Panel ---- */
[data-theme="dark"] .supplier-compare-panel {
    background: var(--bg-primary, #16161e);
    border-color: var(--border-color, #2e2e3e);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .compare-panel-header {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .compare-panel-close:hover {
    background: var(--bg-hover, #2a2a3a);
}

[data-theme="dark"] .compare-suppliers-row {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .compare-supplier-card {
    background: var(--bg-secondary, #1e1e2e);
}

[data-theme="dark"] .compare-score-bg {
    stroke: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .compare-metrics-section {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .compare-metrics-table thead th {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .compare-metrics-table tbody td {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .compare-metrics-table tbody tr:hover {
    background: var(--bg-hover, #2a2a3a);
}

[data-theme="dark"] .compare-metric-value.compare-best {
    background: rgba(34, 197, 94, 0.12);
}

[data-theme="dark"] .compare-chart-section {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .compare-sparklines-section {
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] .compare-sparkline-card {
    background: var(--bg-secondary, #1e1e2e);
    border-color: var(--border-color, #2e2e3e);
}

[data-theme="dark"] tr[data-compare-selected="true"] {
    background: rgba(59, 130, 246, 0.12) !important;
}

[data-theme="dark"] .btn-outline {
    background: var(--bg-secondary, #1e1e2e);
    border-color: var(--border-color, #2e2e3e);
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--bg-hover, #2a2a3a);
    border-color: var(--color-primary, #60a5fa);
    color: var(--color-primary, #60a5fa);
}

/* ============================================
   Supplier Contacts
   ============================================ */

/* ---- Contacts Section Container ---- */
.supplier-contacts {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.supplier-contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.supplier-contacts-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.supplier-contacts-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--color-primary, #3b82f6);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.supplier-contacts-add-btn:hover {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary, #3b82f6);
}

.supplier-contacts-add-btn svg {
    width: 14px;
    height: 14px;
}

/* ---- Contact Card ---- */
.supplier-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.supplier-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    transition: background 150ms ease, border-color 150ms ease;
    position: relative;
}

.supplier-contact-card:hover {
    background: var(--bg-hover, #f1f5f9);
    border-color: var(--color-primary-light, #bfdbfe);
}

.supplier-contact-card:hover .supplier-contact-actions {
    opacity: 1;
    pointer-events: auto;
}

/* ---- Contact Avatar ---- */
.supplier-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ---- Contact Info ---- */
.supplier-contact-info {
    flex: 1;
    min-width: 0;
}

.supplier-contact-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.supplier-contact-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-contact-role {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    white-space: nowrap;
}

.supplier-contact-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
}

.supplier-contact-detail-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

.supplier-contact-detail-item a {
    color: var(--color-primary, #3b82f6);
    text-decoration: none;
    transition: color 150ms ease;
}

.supplier-contact-detail-item a:hover {
    color: var(--color-primary-dark, #2563eb);
    text-decoration: underline;
}

.supplier-contact-detail-item svg {
    width: 12px;
    height: 12px;
    color: var(--text-tertiary, #94a3b8);
    flex-shrink: 0;
}

/* ---- Primary Contact Star Badge ---- */
.supplier-contact-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    flex-shrink: 0;
}

.supplier-contact-primary svg {
    width: 14px;
    height: 14px;
    fill: #f59e0b;
    stroke: #f59e0b;
}

/* ---- Contact Actions (edit/delete) ---- */
.supplier-contact-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.supplier-contact-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    border-radius: 4px;
    transition: all 150ms ease;
    padding: 0;
}

.supplier-contact-actions button:hover {
    background: var(--bg-hover, #e2e8f0);
    color: var(--text-primary, #1e293b);
}

.supplier-contact-actions button.contact-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger, #ef4444);
}

.supplier-contact-actions button svg {
    width: 14px;
    height: 14px;
}

/* ---- Contact Empty State ---- */
.supplier-contacts-empty {
    text-align: center;
    padding: 16px;
    color: var(--text-tertiary, #94a3b8);
    font-size: 13px;
}

.supplier-contacts-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 14px;
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: none;
    color: var(--color-primary, #3b82f6);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.supplier-contacts-empty-btn:hover {
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary, #3b82f6);
}

.supplier-contacts-empty-btn svg {
    width: 14px;
    height: 14px;
}

/* ---- Contact Inline Form ---- */
.supplier-contact-form {
    padding: 12px;
    border: 1px solid var(--color-primary, #3b82f6);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
    margin-top: 8px;
}

.supplier-contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.supplier-contact-form-grid .input-group {
    margin-bottom: 0;
}

.supplier-contact-form-grid .input-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-bottom: 3px;
    display: block;
}

.supplier-contact-form-grid .input-group input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary, #1e293b);
    background: var(--bg-primary, #fff);
    transition: border-color 150ms ease;
    box-sizing: border-box;
}

.supplier-contact-form-grid .input-group input:focus {
    outline: none;
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.supplier-contact-form-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    grid-column: 1 / -1;
    padding: 4px 0;
}

.supplier-contact-form-primary label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.supplier-contact-form-primary input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #f59e0b;
    cursor: pointer;
}

.supplier-contact-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    grid-column: 1 / -1;
    margin-top: 4px;
}

.supplier-contact-form-actions .btn {
    padding: 5px 14px;
    font-size: 12px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1300px) {
    .suppliers-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .supplier-detail-panel {
        width: 360px;
        min-width: 360px;
    }
}

@media (max-width: 900px) {
    .suppliers-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .suppliers-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .suppliers-sort-controls {
        flex-wrap: wrap;
    }

    .suppliers-content-area {
        flex-direction: column;
    }

    .supplier-detail-panel {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-top: 16px;
        max-height: none;
        transform: translateY(20px);
    }

    .supplier-detail-panel.open {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .supplier-form-grid {
        grid-template-columns: 1fr;
    }

    .suppliers-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .supplier-detail-panel {
        width: 100%;
        min-width: 0;
        border-radius: 8px;
    }

    .supplier-detail-mini-stats {
        flex-direction: column;
        gap: 8px;
    }

    .supplier-ranking-stats {
        gap: 10px;
    }

    .supplier-ranking-stat {
        min-width: 50px;
    }

    .supplier-ranking-bar-wrap {
        width: 60px;
    }
}

@media (max-width: 900px) {
    .compare-suppliers-row {
        flex-direction: column;
    }

    .compare-sparklines-row {
        flex-direction: column;
    }

    .compare-metrics-table {
        font-size: 12px;
    }

    .compare-metrics-table thead th,
    .compare-metrics-table tbody td {
        padding: 8px;
    }

    .compare-chart-container {
        height: 240px;
    }

    .supplier-map-row {
        flex-wrap: wrap;
    }

    .supplier-map-country {
        min-width: 100px;
    }

    .supplier-map-value {
        min-width: 70px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .suppliers-stats {
        grid-template-columns: 1fr;
    }

    .suppliers-sort-controls {
        width: 100%;
    }

    .suppliers-sort-select {
        flex: 1;
    }

    .supplier-ranking-item {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 16px;
    }

    .supplier-ranking-stats {
        width: 100%;
        justify-content: space-between;
    }

    .supplier-ranking-bar-wrap {
        width: 60px;
    }

    .compare-panel-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .compare-panel-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .compare-metrics-table {
        font-size: 11px;
    }

    .compare-chart-container {
        height: 200px;
    }

    .supplier-map-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .supplier-map-bar-wrap {
        width: 100%;
    }

    .supplier-map-value {
        text-align: left;
    }
}

/* ====================================================
   Radar Chart Analytics Section
   ==================================================== */

.supplier-radar-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 150ms ease;
}

.supplier-radar-section:hover {
    box-shadow: var(--shadow-md);
}

.supplier-radar-header {
    padding: 0;
}

.supplier-radar-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
    transition: background 150ms ease;
    text-align: left;
}

.supplier-radar-toggle:hover {
    background: var(--color-surface-alt, #f8fafc);
}

.supplier-radar-toggle.expanded {
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.supplier-radar-toggle svg:first-child {
    flex-shrink: 0;
    color: var(--color-primary, #3b82f6);
}

.supplier-radar-toggle svg:last-child {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-text-muted, #94a3b8);
    transition: transform 150ms ease;
}

.supplier-radar-toggle.expanded svg:last-child {
    transform: rotate(180deg);
}

.supplier-radar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #3b82f6);
    font-size: 12px;
    font-weight: 600;
}

.supplier-radar-content {
    padding: 18px;
}

.supplier-radar-instructions {
    padding: 12px 16px;
    background: var(--color-info-light, #e0f2fe);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 6px;
    color: var(--color-text, #1e293b);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.supplier-radar-chart-wrapper {
    padding: 20px;
    background: var(--color-bg-secondary, #f8fafc);
    border-radius: 8px;
    min-height: 350px;
}

#supplier-radar-chart {
    max-width: 100%;
    height: auto;
}

/* Radar checkbox in table */
.radar-checkbox {
    cursor: pointer;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border, #cbd5e1);
    border-radius: 3px;
    transition: all 150ms ease;
}

.radar-checkbox:checked {
    background-color: var(--color-primary, #3b82f6);
    border-color: var(--color-primary, #3b82f6);
}

.radar-checkbox:hover {
    border-color: var(--color-primary, #3b82f6);
}

/* Overall score badge */
.supplier-overall-score {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
}

/* Rating Modal */
.rating-modal {
    max-width: 520px;
}

.rating-supplier-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.rating-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rating-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-slider-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text, #1e293b);
}

.rating-slider-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rating-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border, #e2e8f0);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.rating-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary, #3b82f6);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 150ms ease;
}

.rating-slider::-webkit-slider-thumb:hover {
    background: var(--color-primary-hover, #2563eb);
    transform: scale(1.1);
}

.rating-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary, #3b82f6);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 150ms ease;
}

.rating-slider::-moz-range-thumb:hover {
    background: var(--color-primary-hover, #2563eb);
    transform: scale(1.1);
}

.rating-slider-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 10px;
    background: var(--color-surface-alt, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.rating-note {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.4;
}

/* Action button for rating */
.action-rate {
    color: var(--color-warning, #f59e0b);
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 150ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-rate:hover {
    background: var(--color-warning-light, rgba(245, 158, 11, 0.1));
    color: var(--color-warning, #f59e0b);
}

.action-rate svg {
    width: 16px;
    height: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .supplier-radar-chart-wrapper {
        padding: 12px;
        min-height: 300px;
    }

    .rating-modal {
        max-width: 100%;
        margin: 20px;
    }

    .rating-slider-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .rating-slider {
        width: 100%;
    }
}

/* ====================================================
   Delivery Map Section
   ==================================================== */

.supplier-delivery-map-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 150ms ease;
}

.supplier-delivery-map-section:hover {
    box-shadow: var(--shadow-md);
}

.supplier-delivery-map-header {
    padding: 0;
}

.supplier-delivery-map-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #1e293b);
    transition: background 150ms ease;
    text-align: left;
}

.supplier-delivery-map-toggle:hover {
    background: var(--color-surface-alt, #f8fafc);
}

.supplier-delivery-map-toggle.expanded {
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.supplier-delivery-map-toggle svg:first-child {
    flex-shrink: 0;
    color: var(--color-primary, #3b82f6);
}

.supplier-delivery-map-toggle svg:last-child {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-text-muted, #94a3b8);
    transition: transform 150ms ease;
}

.supplier-delivery-map-toggle.expanded svg:last-child {
    transform: rotate(180deg);
}

.supplier-delivery-map-content {
    padding: 18px;
}

/* Top Countries Section */
.delivery-map-top-countries {
    margin-bottom: 20px;
}

.delivery-map-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 16px;
}

.delivery-map-section-title svg {
    color: #f59e0b;
}

.delivery-map-country-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.delivery-map-country-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    transition: all 150ms ease;
}

.delivery-map-country-row:hover {
    background: var(--bg-hover, #f1f5f9);
    border-color: var(--color-primary-light, #bfdbfe);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.delivery-map-country-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    flex-shrink: 0;
}

.delivery-map-country-flag {
    font-size: 24px;
    line-height: 1;
}

.delivery-map-country-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.delivery-map-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.delivery-map-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delivery-map-bar-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    min-width: 65px;
}

.delivery-map-bar-wrapper {
    flex: 1;
    height: 24px;
    background: var(--bg-primary, #fff);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.delivery-map-bar {
    height: 100%;
    min-width: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    transition: width 600ms ease;
    position: relative;
}

.delivery-map-bar-text {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.delivery-map-days {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 4px 8px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    flex-shrink: 0;
}

.delivery-map-days-value {
    font-size: 16px;
    font-weight: 700;
    color: #6366f1;
    line-height: 1;
}

.delivery-map-days-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Summary Stats */
.delivery-map-summary {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    margin-top: 20px;
}

.delivery-map-stat-card {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 6px;
}

.delivery-map-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin-bottom: 4px;
}

.delivery-map-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Responsive */
@media (max-width: 900px) {
    .delivery-map-country-row {
        flex-wrap: wrap;
    }

    .delivery-map-country-info {
        min-width: 100px;
    }

    .delivery-map-bars {
        width: 100%;
    }

    .delivery-map-days {
        margin-left: auto;
    }
}

@media (max-width: 640px) {
    .delivery-map-country-row {
        flex-direction: column;
        gap: 10px;
    }

    .delivery-map-country-info {
        width: 100%;
    }

    .delivery-map-bars {
        width: 100%;
    }

    .delivery-map-bar-label {
        min-width: 60px;
        font-size: 10px;
    }

    .delivery-map-days {
        width: 100%;
        flex-direction: row;
        gap: 4px;
        justify-content: flex-start;
        padding: 6px 10px;
    }

    .delivery-map-days-value {
        font-size: 14px;
    }

    .delivery-map-summary {
        flex-direction: column;
        gap: 10px;
    }
}